❤
npm
Sign UpSign In

cws-theme-tokens

0.0.4 • Public • Published

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:

Click to view JSON 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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.4
    26
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.0.4
    26
  • 0.0.3
    0
  • 0.0.2
    0
  • 0.0.1
    0

Package Sidebar

Install

npm i cws-theme-tokens

Repository

github.com/autorei/cws-theme-tokens

Homepage

github.com/autorei/cws-theme-tokens#readme

Weekly Downloads

26

Version

0.0.4

License

MIT

Unpacked Size

305 kB

Total Files

16

Last publish

Collaborators

  • gabesp
  • rafaelducati
  • thiagoenge
  • willycamargo
Try on RunKit
Report malware