cws-theme-tokens

Theme Tokens handler used by cws.digital products

This library receive a list of tokens and generate CSS vars for each token and, when it is a color, generate dynamic shades of the color.

Will can test this library here

Installing

ES6

Install using npm

npm install --save cws-theme-tokens

Import

import cwsThemeTokens from 'cws-theme-tokens'

CDN

Import using <script> tag

<script src="https://unpkg.com/cws-theme-tokens@latest/dist/cws-theme-tokens.umd.js"></script>

All available CDN urls:

• UMD: https://unpkg.com/cws-theme-tokens@latest/dist/cws-theme-tokens.umd.js
• UMD minified: https://unpkg.com/cws-theme-tokens@latest/dist/cws-theme-tokens.umd.min.js
• Common JS: https://unpkg.com/cws-theme-tokens@latest/dist/cws-theme-tokens.cjs.js
• ES: https://unpkg.com/cws-theme-tokens@latest/dist/cws-theme-tokens.es.js

After import using script tag, the method will be available as window.cwsThemeTokens()

Usage

const tokens = {{
  "sizeIconXxs": "16px",
  "sizeIconXs": "20px",
  "sizeIconSm": "24px",
  "sizeIconMd": "32px",
  "sizeIconLg": "40px",
  "sizeIconXl": "48px",
  "colorPrimary": "#008CDF",
  "colorSecondary": "#303030"
}}

const settings = {
  "colorContrastLight": "#FFFFFF",
  "colorContrastDark": "#000000",
  "colorAmount": 9,
  "colorStep": 0.1
}

const cssTokens = cwsThemeTokens(tokens, settings)

console.log(cssTokens)

Output:

{
  "--size-icon-xxs": "16px",
  "--size-icon-xs": "20px",
  "--size-icon-sm": "24px",
  "--size-icon-md": "32px",
  "--size-icon-lg": "40px",
  "--size-icon-xl": "48px",
  "--color-primary-100": "#39B5FF",
  "--color-primary-200": "#23ADFF",
  "--color-primary-300": "#0DA5FF",
  "--color-primary-400": "#009AF5",
  "--color-primary-500": "#008CDF",
  "--color-primary-600": "#007EC9",
  "--color-primary-700": "#0070B2",
  "--color-primary-800": "#00629C",
  "--color-primary-900": "#005486",
  "--color-primary-100-contrast": "#000000",
  "--color-primary-200-contrast": "#000000",
  "--color-primary-300-contrast": "#000000",
  "--color-primary-400-contrast": "#FFFFFF",
  "--color-primary-500-contrast": "#FFFFFF",
  "--color-primary-600-contrast": "#FFFFFF",
  "--color-primary-700-contrast": "#FFFFFF",
  "--color-primary-800-contrast": "#FFFFFF",
  "--color-primary-900-contrast": "#FFFFFF",
  "--color-secondary-100": "#434343",
  "--color-secondary-200": "#3E3E3E",
  "--color-secondary-300": "#3A3A3A",
  "--color-secondary-400": "#353535",
  "--color-secondary-500": "#303030",
  "--color-secondary-600": "#2B2B2B",
  "--color-secondary-700": "#262626",
  "--color-secondary-800": "#222222",
  "--color-secondary-900": "#1D1D1D",
  "--color-secondary-100-contrast": "#FFFFFF",
  "--color-secondary-200-contrast": "#FFFFFF",
  "--color-secondary-300-contrast": "#FFFFFF",
  "--color-secondary-400-contrast": "#FFFFFF",
  "--color-secondary-500-contrast": "#FFFFFF",
  "--color-secondary-600-contrast": "#FFFFFF",
  "--color-secondary-700-contrast": "#FFFFFF",
  "--color-secondary-800-contrast": "#FFFFFF",
  "--color-secondary-900-contrast": "#FFFFFF",
  "--color-neutral-100": "#FFFFFF",
  "--color-neutral-200": "#EDEDED",
  "--color-neutral-300": "#DADADA",
  "--color-neutral-400": "#C8C8C8",
  "--color-neutral-500": "#B6B6B6",
  "--color-neutral-600": "#A4A4A4",
  "--color-neutral-700": "#929292",
  "--color-neutral-800": "#7F7F7F",
  "--color-neutral-900": "#6D6D6D",
  "--color-neutral-100-contrast": "#000000",
  "--color-neutral-200-contrast": "#000000",
  "--color-neutral-300-contrast": "#000000",
  "--color-neutral-400-contrast": "#000000",
  "--color-neutral-500-contrast": "#000000",
  "--color-neutral-600-contrast": "#000000",
  "--color-neutral-700-contrast": "#000000",
  "--color-neutral-800-contrast": "#FFFFFF",
  "--color-neutral-900-contrast": "#FFFFFF",
  "--color-error-100": "#F95959",
  "--color-error-200": "#F94242",
  "--color-error-300": "#F82B2B",
  "--color-error-400": "#F71313",
  "--color-error-500": "#EA0808",
  "--color-error-600": "#D30707",
  "--color-error-700": "#BB0606",
  "--color-error-800": "#A40606",
  "--color-error-900": "#8C0505",
  "--color-error-100-contrast": "#000000",
  "--color-error-200-contrast": "#FFFFFF",
  "--color-error-300-contrast": "#FFFFFF",
  "--color-error-400-contrast": "#FFFFFF",
  "--color-error-500-contrast": "#FFFFFF",
  "--color-error-600-contrast": "#FFFFFF",
  "--color-error-700-contrast": "#FFFFFF",
  "--color-error-800-contrast": "#FFFFFF",
  "--color-error-900-contrast": "#FFFFFF",
  "--color-alert-100": "#FFC83C",
  "--color-alert-200": "#FFC126",
  "--color-alert-300": "#FFBB0F",
  "--color-alert-400": "#F8B100",
  "--color-alert-500": "#E1A100",
  "--color-alert-600": "#CB9100",
  "--color-alert-700": "#B48100",
  "--color-alert-800": "#9D7100",
  "--color-alert-900": "#876100",
  "--color-alert-100-contrast": "#000000",
  "--color-alert-200-contrast": "#000000",
  "--color-alert-300-contrast": "#000000",
  "--color-alert-400-contrast": "#000000",
  "--color-alert-500-contrast": "#000000",
  "--color-alert-600-contrast": "#000000",
  "--color-alert-700-contrast": "#000000",
  "--color-alert-800-contrast": "#FFFFFF",
  "--color-alert-900-contrast": "#FFFFFF",
  "--color-success-100": "#10F682",
  "--color-success-200": "#09EA79",
  "--color-success-300": "#08D870",
  "--color-success-400": "#08C666",
  "--color-success-500": "#07B45D",
  "--color-success-600": "#06A254",
  "--color-success-700": "#06904A",
  "--color-success-800": "#057E41",
  "--color-success-900": "#046C38",
  "--color-success-100-contrast": "#000000",
  "--color-success-200-contrast": "#000000",
  "--color-success-300-contrast": "#000000",
  "--color-success-400-contrast": "#000000",
  "--color-success-500-contrast": "#FFFFFF",
  "--color-success-600-contrast": "#FFFFFF",
  "--color-success-700-contrast": "#FFFFFF",
  "--color-success-800-contrast": "#FFFFFF",
  "--color-success-900-contrast": "#FFFFFF"
}

All CSS vars will be setted on the HTML to be used by CSS

Attributes

tokens

An object of tokens to be transformed on CSS vars. When a value is a valid css color this will be handled to generate dynamic shades and contrast colors.

Example

{
  "sizeIconXxs": "16px",
  "sizeIconXs": "20px",
  "sizeIconSm": "24px",
  "sizeIconMd": "32px",
  "sizeIconLg": "40px",
  "sizeIconXl": "48px",
  "colorPrimary": "#008CDF", // this will generate colors shades
  "colorSecondary": "rgb(200, 200, 120)", // this will generate colors shades
  "colorTertiary": "hsl(136, 42%, 39%)" // this will generate colors shades
}

settings

Settings to generate tokens, set CSS vars and handle colors

| Attribute | Description | Type | Default | |-------|------|---------|---------| | element | DOM element to be inserted the CSS vars | DOM element | document.documentElement | | selector | DOM selector to be inserted the CSS vars | DOM selector | null | | colorAmount | Amount of colors shades to be generated by each token | Integer | 9 | | colorStep | Shade step between each shade to be generated | Float < 1 | 0.1 | | colorContrastLight | Color to be used as contrast when generated shade is dark | Valid CSS color | #FFFFFF | | colorContrastDark | Color to be used as contrast when generated shade is light | Valid CSS color | #000000 |

Maintainers

Willy Camargo

License

MIT