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

Chameleon-react by default uses the chameleon-theme-wl package. This means, you need to install this package for every project.

Installation with @mediahuis/scripts​

To support another brand besides the White Label theme (@mediahuis/chameleon-theme-wl), you need to install the brand's corresponding theme package and set some environment variables.

$ npm install @mediahuis/chameleon-theme-gva

@mediahuis/scripts will handle the rest for you through extension resolving and alias resolving. Set the MH_THEME and MH_BRAND environment variables to switch themes. For example:

$ MH_BRAND=gva MH_THEME=gva-summer-2020 mediahuis-scripts-vite dev

You can find an example app in our repo that uses @mediahuis/scripts-vite and @mediahuis/scripts-storybook.

For more info, check the @mediahuis/scripts documentation.

Installation without @mediahuis/scripts​

If you don’t use @mediahuis/scripts you’ll probably want to do your own alias and extension resolving. For example: here's how that looks in webpack (but it’s more or less the same for other bundlers such as Vite):

// webpack.config.js
module.exports = {
    resolve: {
        alias: {
        `@mediahuis/chameleon-theme-wl`: `@mediahuis/chameleon-theme-${process.env.MH_BRAND}`,
        },
        extensions: [`.${process.env.MH_BRAND}.js`, '.js'],
    }
};

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_BRAND,
    }),
  ],
};