For Developers ()

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.

A theme is a combination of multiple assets that define the foundations of a brands identity. This includes tokens, icons, logos, illustrations and fonts for different platforms, in our case we support iOS, Android and Web.

Design Tokens

Tokens are a set of conventions translated into variables. They are meant to make the converstation between design and develop as seamless as possible. Tokens are defined in a JSON format and transformed via Amazons style-dictionary cli for every platform to consume. The basic set of tokens are for every brand the same, on top of that we provide for each theme specific component tokens.

$button-outline-hover-border-color: #0088c2;
// ...
$color-grey-base: #d7d7d7;
$color-primary-base: #e20714;
// ...

Icons

Every brand has the same default icon set. This default set can be augmented with the brand's own identity. We provide icons for every platform in different formats: PDF for iOS, XML Drawables for Android & React components and SVG(sprites) for web.

Logo's

Logos are the visual identity of each brand. We provide at least BrandMain, BrandSquareMain & BrandPlusMain, but several other variations are commonly available. We provide logos for every platform in different formats: PDF for iOS, XML Drawables for Android & React components and SVG(sprites) for web.

Favicons

Favicons have a different implementation for each platform, we support a basic set, which should be enough.

Fonts

Fonts will be predefined for each brand. There will always be a brand-primary, brand-secondary and a system font. We use only 3 weights of each font: regular, medium & bold. For every platform the fonts will be served via the theme packages. They are also provided via a CDN.

Active themes-packages

By default the components use chameleon-theme-wl. This means, you need to install this package for every project. The component library itself can be found in chameleon-react.

yarn add @mediahuis/chameleon-theme-wl
yarn add @mediahuis/chameleon-react

Reset

In most cases the reset should be available within the main website layout. No need to add them.

If that's not the case, simply include the reset css to the entry of your app.

import '@mediahuis/chameleon-reset';

Fonts

In most cases the fonts should be available within the main website layout. No need to add them.

If that's not the case, simply add the fonts css to the entry of your app.

import '@mediahuis/chameleon-theme-wl/lib/web/fonts.css';

Installation with @mediahuis/scripts

Multibranded setup

By default chameleon comes only with the white-label theme. To support another brand we need to install the brand's corresponding theme package e.g. yarn add @mediahuis/chameleon-theme-<name>. To make it work in our project, we need to use extension & alias resolving. In @mediahuis/scripts it's as simple as adding the following to your mediahuis-scripts.config.js.

MH_BRAND: The active brand/theme in your project e.g. hbvl

// mediahuis-scripts.config.js

module.exports = {
  include: [
    '@mediahuis/chameleon-react',
    `@mediahuis/chameleon-theme-${process.env.MH_BRAND || 'wl'}`,
  ],
  extensionVars: {
    source: [process.env.MH_BRAND],
  },
};

Installation without @mediahuis/scripts

Multibranded Setup

If you need to develop for multiple brands, you can replace the @mediahuis/chameleon-theme-wl imports with one of the earlier mentioned theme-packages via alias & extension resolving. In webpack it looks something like this:

MH_BRAND: The active theme in your project e.g. hbvl

// 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 rules. In order to make this work, you have to use PostCSS in conjunction with our custom PostCSS plugin 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,
    }),
  ],
};

Components provided via @mediahuis/chameleon-react are built with accessibility in mind. Internally they are built with css-modules and inline styles for dynamic values. The API is inspired by styled-system with the box-pattern in mind.