GitXplorerGitXplorer
a

postcss-theme-colors

public
8 stars
2 forks
0 issues

Commits

List of commits on branch main.
Unverified
1e8d2d17797f8c6da2778d44cdec0107ec6b58e1

chore(release): 1.1.3

aambar committed 9 months ago
Unverified
7bbe97932036dc22f9ac888144f91b4fd263e5a4

fix: filter groups

aambar committed 9 months ago
Unverified
73f7032ce1d238c508abe45a6e9a181f6d7e5e3a

chore(release): 1.1.2

aambar committed 9 months ago
Unverified
ccac4c128b39d4073d5bedf5b102c1940354f16c

fix: add types to exports

aambar committed 9 months ago
Unverified
5c3d12ad10b2efc9060c5f19900ebed3178ce426

release 1.1.1

aambar committed 9 months ago
Unverified
ee4b57dd8d83e66a206befc74452b7bafe6d9f96

chore: add @changesets/changelog-git

aambar committed 9 months ago

README

The README file for this repository.

postcss-theme-colors

test workflow Coverage Status

Expand theme color groups to allow non-static handling of relative color syntax or color-mix() function.

Installation

npm install postcss-theme-colors postcss-preset-env

Usage

Input:

a {
  /* any value with theme (light/dark) color */
  color: oklch(from var(--G01) l c h / 0.1);
  /* more:
  border: 1px solid oklch(from var(--G01) .8 c h);
  box-shadow: 0 0 0 2px var(--G01), 0 0 0 4px oklch(from var(--G01) l c h / .1);
  --anyVar: value-with-theme-color;
  */
}

Output:

a {
  --v1868641404: var(--flag-light, rgba(238, 238, 238, 0.1)) var(--flag-dark, rgba(17, 17, 17, 0.1));
  color: rgba(238, 238, 238, 0.1); /* fallback */
  color: var(--v1868641404); /* expand for color scheme */
}

@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
  a {
    color: oklch(from var(--G01) l c h / 0.1); /* W3C */
  }
}

Configuration

const colors = {
  '--G01': ['#eee', '#111'],
}

postcss([
  require('postcss-theme-colors')({colors}),
  require('postcss-preset-env'),
  require('@csstools/postcss-global-data')({
    files: [
      // example flags
      require.resolve('postcss-theme-colors/flag.css'),
      // your global theme colors
      'vars.css',
    ],
  }),
]).process(css)

Plugin Options

type Options = {
  /** color groups */
  colors: Record<string, string | string[]>
  /**
   * boolean flags
   * @default ['--flag-light', '--flag-dark']
   */
  flags?: string[]
  /**
   * Whether to inject boolean flags, could also be defined in global CSS files
   * @default false
   */
  shouldInjectFlags?: boolean
}