0.0.4 • Published 5 years ago

cws-theme-tokens v0.0.4

Weekly downloads
114
License
MIT
Repository
github
Last release
5 years ago

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

AttributeDescriptionTypeDefault
elementDOM element to be inserted the CSS varsDOM elementdocument.documentElement
selectorDOM selector to be inserted the CSS varsDOM selectornull
colorAmountAmount of colors shades to be generated by each tokenInteger9
colorStepShade step between each shade to be generatedFloat < 10.1
colorContrastLightColor to be used as contrast when generated shade is darkValid CSS color#FFFFFF
colorContrastDarkColor to be used as contrast when generated shade is lightValid CSS color#000000

Maintainers

Willy Camargo

License

MIT

coloris-color
@everything-registry/sub-chunk-1431@infinitebrahmanuniverse/nolb-cw
0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago