sebnitu / vrembem / 26263674015

91%

main: 100%

push

github

Add a new API for creating palettes, aliasing, modes, and themes (#2839)

This PR creates the APIs for a more robust palette and theming system. This is done by allowing the palettes module to handle primitive and semantic colors together and introduces palette aliasing. Also added is the concept of "modes" that can be used along-side themes for "auto", "light", and "dark" mode usage. Creating this duel vector distinction allows for more robust and creative theming through aliasing semantic tokens based on a theme while maintaining the benefits of a light/dark mode toggle. The themeStore module has also been updated to reflect these changes.

### Example usage

Define a set of primitive color values and a semantic namespace that you use throughout your project.

```scss
$config: (
  "palette": (
    "green": #35cc86, // Define some primitive color values
    "blue": #3680dd,  // ...
    "primary": "blue" // Alias a semantic namespace to a palette primitive
  )
)
```

Once your palette has been defined, you can use the palette's `remap` function to return a map with palette values assigned to a new aliases. This map is theme ready and can be assigned directly as a theme value:

```scss
@use "@vrembem/core/palette";

@include tokens.set("core", (
  "forest": palette.remap("primary", "green")
));
```

This will output new theme tokens (`-l`, `-c`, `-h` and variants) under the forest theme data attribute selector: `[data-theme="forest"]`.

This PR resolves #2836

565 of 647 branches covered (87.33%)

Branch coverage included in aggregate %.

13 of 13 new or added lines in 1 file covered. (100.0%)

882 of 948 relevant lines covered (93.04%)

32.23 hits per line