postcss-theme-colors

    0.2.1 • Public • Published

    postcss-theme-colors

    Theming with cc().

    Installation

    npm install postcss-theme-colors postcss-nested
     
    # or if you are using postcss-nesting
    # npm install postcss-theme-colors postcss-nesting
     
    # or postcss-preset-env
    # npm install postcss-theme-colors postcss-preset-env

    Usage

    Input:

    a {
      color: cc(G01);
      background-color: color(cc(G01) alpha(-8%));
    }

    Output:

    a {
      color: #eee;
      background-color: rgba(238, 238, 238, 0.92);
    }
     
    html[data-theme='dark'] a {
      color: #111;
      background-color: rgba(17, 17, 17, 0.92);
    }

    Configuration

    const colors = {
      C01: '#eee',
      C02: '#111',
    }
     
    const groups = {
      G01: ['C01', 'C02'],
    }
     
    postcss([
      require('postcss-theme-colors')({colors, groups}),
      require('postcss-nested'), // or postcss-nesting, postcss-preset-env
      // require('postcss-custom-properties')({variables: colors}), // optional
      // require('postcss-color-function'), // optional
    ]).process(css)

    Plugin Options

    • options: Object
      • colors: Object, color definitions.
      • groups: Object, group definitions.
      • function: string, function name, defaults to cc.
      • useCustomProperties: boolean, whether to transform cc(group) to var(color), defaults to false.
      • darkThemeSelector: string, dark theme selector, defaults to html[data-theme="dark"].
      • nestingPlugin: string | null, specific the nesting plugin ('nested' or 'nesting'), will detect automatically by default.

    Keywords

    none

    Install

    npm i postcss-theme-colors

    DownloadsWeekly Downloads

    5

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    4.73 kB

    Total Files

    4

    Last publish

    Collaborators

    • ambarli