feat: theme tokens (#138)

* feat: theme tokens

* docs: theme

* fix: fallbacks

* fix: markdown descriptions

* refactor: actions

* docs: typos

* docs: tokens

* feat: icon, text-brand, etc

* fix: nested tokens under theme

* docs: theme stuff

* fix: don't use multiple colors in css

* docs: nice md

* docs: nice md

* docs: nicer sample

* docs: fix samp

* docs: fix samp

* docs: fix sampe

* docs: fix demo

* docs: more content

* docs: fancier demo

* docs: title and icon

* fix: border and status token names

* chore: node version

* fix(editor): fix color snippets

* fix: interactive and status tokens

* fix: textmate comments

* perf: reduce size of copyright header

* feat: rhds context output

* fix: docs, interactive tokens

* docs: config

* feat: cjs plugin for stylelint

* fix: build steps

* fix: esm stylelint headache

* fix: surface computed

* fix: nullify computed tokens in map

* fix(stylelint): better fix, messages

* feat(stylelint): deprecated rule

* fix: restore and deprecate interactive colours

* fix: shadow tokens

* docs: changesets

* style: whitespace

* docs: nice theme demo

* docs: nice font samples

* docs: btt

.changeset/interactive-tokens.md

@@ -0,0 +1,12 @@
+---
+"@rhds/tokens": minor
+---
+
+✨ Added interactive tokens, and **DEPRECATES** the older interactive tokens
+
+```diff
+- color: var(--rh-color-interactive-blue-darker);
++ color: var(--rh-color-interactive-primary-default-on-light);
+- color: var(--rh-color-interactive-purple-darker);
++ color: var(--rh-color-interactive-primary-visited-default-on-light);
+```

.changeset/responsive-theme.md

@@ -0,0 +1,34 @@
+---
+"@rhds/tokens": minor
+---
+Added theme tokens for responsive colours. Read these in a themable container
+such as `<rh-card>` to style themable content that responds to the color palette
+
+```html
+<rh-surface color-palette="lighter">
+  <p>Use <a href="#">theme tokens</a> for best results.<p>
+  <rh-card color-palette="darkest">
+    <p>That way, colours respond to their parents' <code>color-palette</code>
+       Without requiring <a href="#">custom CSS</a></p>
+  </rh-card>
+</rh-surface>
+```
+
+```css
+rh-surface {
+  & a {
+    color: var(--rh-color-interactive-primary-default);
+    &:hover { color: var(--rh-color-interactive-primary-hover); }
+    &:focus-within { color: var(--rh-color-interactive-primary-focus); }
+    &:active { color: var(--rh-color-interactive-primary-active); }
+    &:visited {
+      color: var(--rh-color-interactive-primary-visited);
+      &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
+      &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
+      &:active { color: var(--rh-color-interactive-primary-visited-active); }
+    }
+  }
+}
+```
+
+For more information, please see our [theming docs](https://ux.redhat.com/themeing).

.changeset/rich-bags-deliver.md

@@ -2,21 +2,17 @@
 "@rhds/tokens": minor
 ---
 
-Added status tokens
+✨ Added status tokens:
+
+RHDS describes six statuses: `danger`, `warning`, `caution`, `neutral`, `note`, and `success`.
 
 ```css
 button {
-  .light &.danger {
-    background: var(--rh-color-status-danger-on-light);
-  }
-  .light &.success {
-    background: var(--rh-color-status-success-on-light);
-  }
-  .dark &.danger {
-    background: var(--rh-color-status-danger-on-dark);
-  }
-  .dark &.success {
-    background: var(--rh-color-status-success-on-dark);
-  }
+  &.danger { background: var(--rh-color-status-danger); }
+  &.warning { background: var(--rh-color-status-warning); }
+  &.caution { background: var(--rh-color-status-caution); }
+  &.neutral { background: var(--rh-color-status-neutral); }
+  &.note { background: var(--rh-color-status-note); }
+  &.success { background: var(--rh-color-status-success); }
 }
 ```

.gitignore

@@ -11,6 +11,10 @@ json/**/*
 css/**/*
 scss/**/*
 design/**/*
+plugins/cjs
+plugins/**/*.cjs
+plugins/**/*.cjs.map
+plugins/**/*.d.cts
 plugins/**/*.js
 plugins/**/*.js.map
 plugins/**/*.d.ts

.nvmrc

@@ -1 +1 @@
-v22.6.0
+v22.7.0

build.ts

@@ -77,6 +77,7 @@ export async function build(): Promise<void> {
   sd.registerTransform(Transforms.colorFormats);
   sd.registerTransform(Transforms.hslValue);
   sd.registerTransform(Transforms.rgbValue);
+  sd.registerTransform(Transforms.themeTokens);
   sd.registerTransform(Transforms.remToPx);
   sd.registerTransform(Transforms.pxNumeric);
   sd.registerTransform(Transforms.mediaQuery);
@@ -86,8 +87,14 @@ export async function build(): Promise<void> {
   sd.registerTransformGroup(TransformGroups.sketch);
 
   sd.registerFilter(Filters.isColor);
+  sd.registerFilter(Filters.isThemeColorToken);
+  sd.registerFilter(Filters.isNotThemeColorToken);
+  sd.registerFilter(Filters.isLightThemeColorToken);
+  sd.registerFilter(Filters.isDarkThemeColorToken);
 
   sd.registerFormat(Formats.litCss);
+  sd.registerFormat(Formats.rhdsColorContextConsumer);
+  sd.registerFormat(Formats.rhdsColorContextProvider);
   sd.registerFormat(Formats.mapEs);
   sd.registerFormat(Formats.mapCjs);
   sd.registerFormat(Formats.metaMapEs);