Giters

Andy-set-studio / gorko

A tiny Sass token class generator.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add support for themes

Andy-set-studio opened this issue · comments

commented

It's something that's going to be needed in this project I'm on and now #9 is merged, this is very doable.

I think it should run like this:

  1. Define a $themes map which contains colors fonts or whatnot
  2. During the generation of CSS: if $themes is defined and a utility uses CSS Custom Properties, use the $var-key to pick each map from each theme
  3. The theme should reference that its related to a user preference, such as @media (prefers-color-scheme: dark) or provide a namespace/prefix, so if someone adds say [data-theme="blush"] to the <html> element, it switches to that theme.

Example

Say we define something like this

$gorko-colors: ('primary': green, 'secondary': yellow);

$themes: (
  'dark': (
    'prefix': 'prefers-color-scheme',
    'tokens': (
      'color': ('primary': red, 'secondary': blue)
    )
  ),
  'blush': (
    'prefix': '[data-theme="blush"]',
    'tokens': (
      'color': ('primary': pink, 'secondary': purple)
    )
  )
);

The generator would generate this:

/* Default */
:root {
  --color-primary: green;
  --color-primary: yellow;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: red;
    --color-primary: blue;
  }
}

[data-theme="blush"] {
    --color-primary: pink;
    --color-primary: purple;
}

It needs to be as flexible as possible because that's the whole mantra of this project.

commented

Should probably be $gorko-themes