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

    Keywords

    none

    Install

    npm i cws-theme-tokens

    DownloadsWeekly Downloads

    318

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    305 kB

    Total Files

    16

    Last publish

    Collaborators

    • gabesp
    • rafaelducati
    • thiagoenge
    • willycamargo