Skip to main content

For developers: Web

Chameleon is a collection of reusable tools and components that are divided into multiple packages. They can be used together or separately depending on your team’s needs.

OverviewWebSwiftKotlin

NPM packages​

All of Chameleon for the Web platform is distributed through NPM packages*.

For access, contact Service Desk

Themes​

Every brand has its own Chameleon theme package containing all design tokens and assets for that brand.

$ npm install @mediahuis/chameleon-theme-wl/tokens

Design tokens​

Design tokens for the web platform are available in multiple formats.

Javascript​

To import design tokens in JS, there's 2 options.

  1. You can get the tokens that are returned as CSS Custom Properties.
// this exports as CSS Custom Props
import * as tokensAsCSSCustomProperties from '@mediahuis/chameleon-theme-wl/tokens/js/css-custom-properties';

console.log(tokensAsCSSCustomProperties.colorPrimaryBase); // 'var(--color-primary-base)'

This allows you to offload the resolving of values for subthemes, responsiveness, darkmode, ... to the CSS engine instead of working with raw values.

  1. You can also get the tokens as raw values
// these return raw values
import * as defaultTokens from '@mediahuis/chameleon-theme-wl/tokens';
import * as darkModeTokens from '@mediahuis/chameleon-theme-wl/tokens/dark';
import * as desktopTokens from '@mediahuis/chameleon-theme-wl/tokens/desktop';
import * as sportSubthemeTokens from '@mediahuis/chameleon-theme-wl/tokens/subthemes/sport';

console.log(defaultTokens.colorPrimaryBase); // '#FFFFFF'
console.log(darkModeTokens.colorPrimaryBase); // '#000000'

CSS​

<link
  rel="stylesheet"
  href="/node_modules/@mediahuis/chameleon-theme-wl/lib/web/tokens-custom-media.css"
/>
<link
  rel="stylesheet"
  href="/node_modules/@mediahuis/chameleon-theme-wl/lib/web/tokens.css"
/>

Important note: these CSS files use @custom-media declarations and should be post processed with our @mediahuis/chameleon-postcss-plugin

Other platforms​

We also provide these tokens in SCSS and JSON format. See the theme's package.json exports field for more info.

Fonts​

We provide a /node_modules/@mediahuis/chameleon-theme-wl/lib/web/fonts.css file that has @font-face declarations set up correctly for you.

Each font comes with a fallback @font-face declaration to minimize CLS. More info found in this article.

You can also find a brand's font files under /node_modules/@mediahuis/chameleon-theme-wl/lib/web/fonts/.

We provide some handy exports for the fonts as well

import '@mediahuis/chameleon-theme-wl/fonts.css';
import '@mediahuis/chameleon-theme-wl/fonts/some-font.woff2';

Icons, logos and illustrations​

Icons, logs and illustrations for the web platform are available as SVG files. You can find them under

  • /node_modules/@mediahuis/chameleon-theme-wl/lib/web/icons/
  • /node_modules/@mediahuis/chameleon-theme-wl/lib/web/illustrations/
  • /node_modules/@mediahuis/chameleon-theme-wl/lib/web/logos/

There's also an SVG spritesheet available for each.

  • /node_modules/@mediahuis/chameleon-theme-wl/lib/web/icons.svg
  • /node_modules/@mediahuis/chameleon-theme-wl/lib/web/illustrations.svg
  • /node_modules/@mediahuis/chameleon-theme-wl/lib/web/logos.svg

We also export all of these as react components

import '@mediahuis/chameleon-theme-wl/icons';
import '@mediahuis/chameleon-theme-wl/illustrations';
import '@mediahuis/chameleon-theme-wl/logos';

React​

Icons, logos and illustrations are also available as React components.

React Component Library​

For the web platform, we also offer a full fledged component library: @mediahuis/chameleon-react. It integrates neatly with all @mediahuis/chameleon-theme-* packages.

Reset​

In most cases a CSS reset should already be available within the main website layout.

If that's not the case, simply include the @mediahuis/chameleon-reset CSS to the entry of your app.

import '@mediahuis/chameleon-reset';

Installation​

$ npm install @mediahuis/chameleon-theme-wl
$ npm install @mediahuis/chameleon-react

@mediahuis/chameleon-react by default uses the @mediahuis/chameleon-theme-wl (White Label) theme package. This means, you need to install this package for every project.

Multi-branding​

To support another brand besides the White Label theme, you need to install the brand's corresponding theme package.

$ npm install @mediahuis/chameleon-theme-gva

Next, configure your resolver to alias all White Label imports to the theme package instead. Also, set the correct resolve conditions (for things such as "locale"). For example: here's what that looks in vite (but it’s more or less the same for other bundlers).

// vite.config.js
import { defineConfig, defaultClientConditions } from 'vite';
import react from '@vitejs/plugin-react-swc';

const theme = process.env.MH_THEME || 'wl';

export default defineConfig(({ mode }) => ({
  plugins: [react()],
  resolve: {
    alias: {
      '@mediahuis/chameleon-theme-wl': `@mediahuis/chameleon-theme-${theme}`,
    },
    conditions: [`chameleon-theme-${theme}`, ...defaultClientConditions],
  },
  optimizeDeps: {
    esbuildOptions: {
      conditions: [`chameleon-theme-${theme}`, ...defaultClientConditions],
    },
  },
}));

You can find an example app in our repo

PostCSS configuration (required!)​

chameleon-react components make use of @custom-media declarations. In order to make this work, you have to use PostCSS in conjunction with our custom PostCSS plugin @mediahuis/chameleon-postcss-plugin. Use the following configuration to hook it up.

// postcss.config.js
module.exports = {
  plugins: [
    require('@mediahuis/chameleon-postcss-plugin')({
      theme: process.env.MH_THEME,
    }),
  ],
};