From d4333d542e3ced0358afb492b1329cfb1af1b0e7 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 11 Jan 2023 10:52:33 +0200
Subject: [PATCH 1/5] feat: syntax tokens

---
 build.js                 |   9 ++-
 docs/assets/styles.css   |   6 ++
 docs/index.html          |   5 +-
 lib/formats.js           |   1 +
 lib/formats/prism.js     |  21 +++++++
 lib/predicates.js        |   4 ++
 platforms.yaml           |   4 ++
 tokens/color/syntax.md   |  95 +++++++++++++++++++++++++++++
 tokens/color/syntax.yaml | 127 +++++++++++++++++++++++++++++++++++++++
 9 files changed, 266 insertions(+), 6 deletions(-)
 create mode 100644 docs/assets/styles.css
 create mode 100644 lib/formats/prism.js
 create mode 100644 tokens/color/syntax.md
 create mode 100644 tokens/color/syntax.yaml

diff --git a/build.js b/build.js
index a6bbbe2..9d6933e 100644
--- a/build.js
+++ b/build.js
@@ -38,6 +38,7 @@ export function build() {
     .registerTransformGroup(TransformGroups.js)
     .registerTransformGroup(TransformGroups.sketch)
     .registerFormat(Formats.litCss)
+    .registerFormat(Formats.prismCss)
     .registerFormat(Formats.mapEs)
     .registerFormat(Formats.mapCjs)
     .registerFormat(Formats.vscodeSnippets)
@@ -55,12 +56,10 @@ export function build() {
         parse({ contents, filePath }) {
           const isCrayon = filePath.split('/').includes('crayon');
           return YAML.parse(contents,
-
             /**
-           * Transform `$value` (DTCG syntax) to `value` (style-dictionary syntax)
-           * @this {*}
-           */
-
+             * Transform `$value` (DTCG syntax) to `value` (style-dictionary syntax)
+             * @this {*}
+             */
             function(key, value) {
               if ('$value' in this) {
                 this.value = this.$value;
diff --git a/docs/assets/styles.css b/docs/assets/styles.css
new file mode 100644
index 0000000..4a85fed
--- /dev/null
+++ b/docs/assets/styles.css
@@ -0,0 +1,6 @@
+#syntax .description {
+  padding: var(--rh-space-lg, 16px);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rh-space-lg, 16px);
+}
diff --git a/docs/index.html b/docs/index.html
index 0ce5767..092a1c6 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -17,6 +17,7 @@
     <link rel="stylesheet" href="/assets/rhds.css">
     <link rel="stylesheet" href="/assets/styles.css">
     <link rel="stylesheet" href="/assets/11ty.css">
+    <link rel="stylesheet" href="/assets/prism.css">
 
     <script type="importmap">{{ importMap | dump | safe }}</script>
 
@@ -62,6 +63,7 @@ <h3>Contents</h3>
             <li><a href="#color">Color</a></li>
             <li><a href="#box-shadow">Box Shadow</a></li>
             <li><a href="#font">Typography</a></li>
+            <li><a href="#syntax">Syntax</a></li>
             <li><a href="#border">Borders</a></li>
             <li><a href="#opacity">Opacity</a></li>
             <li><a href="#space">Spacers</a></li>
@@ -123,10 +125,11 @@ <h2>Overview<a href="#overview">#</a></h2>
       </section>
 
       {% category path = 'color',
-                  exclude = ['border', 'text', 'icon'] %}
+                  exclude = ['border', 'text', 'icon', 'syntax'] %}
       {% category path = 'box-shadow' %}
       {% category path = 'font',
                   include = 'color.text' %}
+      {% category path = 'color.syntax' %}
       {% category path = 'border',
                   include = 'color.border' %}
       {% category path = 'opacity' %}
diff --git a/lib/formats.js b/lib/formats.js
index dd7365a..8278fb8 100644
--- a/lib/formats.js
+++ b/lib/formats.js
@@ -2,3 +2,4 @@ export * from './formats/lit.js';
 export * from './formats/map.js';
 export * from './formats/docs.js';
 export * from './formats/editor.js';
+export * from './formats/prism.js';
diff --git a/lib/formats/prism.js b/lib/formats/prism.js
new file mode 100644
index 0000000..7892ab8
--- /dev/null
+++ b/lib/formats/prism.js
@@ -0,0 +1,21 @@
+import StyleDictionary from 'style-dictionary';
+const { fileHeader } = StyleDictionary.formatHelpers;
+import { isColor, isSyntax } from '../predicates.js';
+
+/**
+ * Prism Syntax CSS
+ * @type {import('style-dictionary').Format}
+ */
+export const prismCss = {
+  name: 'css/prism',
+  formatter: ({ file, dictionary }) => [
+    fileHeader({ file }),
+    dictionary
+      .allTokens
+      .filter(isColor)
+      .filter(isSyntax)
+      .map(x => `.token.${x.name
+        .replace(/rh-color-syntax-([-\w])/, '$1')
+        .replace(/-on-(light|dark)$/, '')}{color:var(--${x.name},${x.value});}`).join('\n')
+  ].join('\n'),
+};
diff --git a/lib/predicates.js b/lib/predicates.js
index 5d98394..d2a23b5 100644
--- a/lib/predicates.js
+++ b/lib/predicates.js
@@ -25,6 +25,10 @@ export const isTablet = token =>
 export const isShadow = token =>
   getType(token) === 'shadow';
 
+/** @type {Predicate} */
+export const isSyntax = token =>
+  token.path.includes('syntax');
+
 /** @type {Predicate} */
 export const isCubicBezier = token =>
   getType(token) === 'cubicBezier';
diff --git a/platforms.yaml b/platforms.yaml
index 0971770..1f24a5c 100644
--- a/platforms.yaml
+++ b/platforms.yaml
@@ -8,6 +8,10 @@ css:
       options:
         fileHeader: redhat/legal
         selector: ':root'
+    - destination: prism.css
+      format: css/prism
+      options:
+        fileHeader: redhat/legal
     - destination: shared.css
       format: css/variables
       options:
diff --git a/tokens/color/syntax.md b/tokens/color/syntax.md
new file mode 100644
index 0000000..cae613e
--- /dev/null
+++ b/tokens/color/syntax.md
@@ -0,0 +1,95 @@
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>HTML</title>
+    <link rel="stylesheet" href="/styles.css">
+  </head>
+  <body>
+    <header>
+      <h1>Tags</h1>
+    </header>
+    <main>
+      <p class="class-name">Text</p>
+    </main>
+  </body>
+</html>
+```
+
+```typescript
+@customElement('rh-jazz-hands')
+export class RhJazzHands extends LitElement {
+  @colorContextConsumer() private on: ColorTheme = 'light';
+
+  render() {
+    const  { on } = this;
+    return html`
+      <slot id="container" class=${classMap({ [on]: !!on })></slot>
+    `;
+  }
+}
+```
+
+```css
+@container (--context: dark) {
+  :host(:has(rh-cta)) {
+    border-color: var(--rh-color-border-interactive-on-dark, #73bcf7);
+  }
+}
+```
+
+```bash
+# !/bin/bash
+
+source_prefix=$1
+suffix=$2
+destination_prefix=$3
+
+for i in $(ls ${source_prefix}*.${suffix});do
+  mv $i $(echo $i | sed s/${source_prefix}/${destination_prefix}/)
+done
+```
+
+```go
+package main
+
+import "fmt"
+
+func main() {
+  fmt.Println("Hello, 世界")
+}
+```
+
+```rust
+trait Animal {
+    // Associated function signature; `Self` refers to the implementor type.
+    fn new(name: &'static str) -> Self;
+
+    // Method signatures; these will return a string.
+    fn name(&self) -> &'static str;
+    fn noise(&self) -> &'static str;
+
+    // Traits can provide default method definitions.
+    fn talk(&self) {
+        println!("{} says {}", self.name(), self.noise());
+    }
+}
+```
+
+```json
+{
+  "color": {
+    "$type": "color",
+    "accent": {
+      "base": {
+        "on-light": {
+          "$name": "rh-color-accent-base-on-light",
+          "$description": "Inline link (light theme)",
+          "$value": "#0066cc"
+        }
+      }
+    }
+  }
+}
+```
+
diff --git a/tokens/color/syntax.yaml b/tokens/color/syntax.yaml
new file mode 100644
index 0000000..eb618c0
--- /dev/null
+++ b/tokens/color/syntax.yaml
@@ -0,0 +1,127 @@
+color:
+  syntax:
+    $extensions:
+      com.redhat.ux:
+        heading: Syntax Highlighting
+        descriptionFile: syntax.md
+
+    # atrule:
+    #   on-light:
+    #     $value: '{color.}'
+
+    attr-name:
+      on-light:
+        $value: '{color.orange.500}'
+
+    attr-value:
+      on-light:
+        $value: '{color.orange.500}'
+
+    boolean:
+      on-light:
+        $value: '{color.orange.500}'
+
+    # builtin:
+    #   on-light:
+    #     $value: '{color.}'
+
+    # cdata:
+    #   on-light:
+    #     $value: '{color.}'
+
+    # char:
+    #   on-light:
+    #     $value: '{color.}'
+
+    class-name:
+      on-light:
+        $value: '{color.green.600}'
+
+    comment:
+      on-light:
+        $value: '{color.black.500}'
+
+    constant:
+      on-light:
+        $value: '{color.purple.500}'
+
+    # deleted:
+    #   on-light:
+    #     $value: '{color.}'
+
+    # doctype:
+    #   on-light:
+    #     $value: '{color.}'
+
+    # entity:
+    #   on-light:
+    #     $value: '{color.}'
+
+    function:
+      on-light:
+        $value: '{color.red.500}'
+
+    # important:
+    #   on-light:
+    #     $value: '{color.}'
+
+    # inserted:
+    #   on-light:
+    #     $value: '{color.}'
+
+    keyword:
+      on-light:
+        $value: '{color.purple.500}'
+
+    # namespace:
+    #   on-light:
+    #     $value: '{color.}'
+
+    number:
+      on-light:
+        $value: '{color.orange.500}'
+
+    operator:
+      on-light:
+        $value: '{color.cyan.500}'
+
+    # prolog:
+    #   on-light:
+    #     $value: '{color.}'
+
+    property:
+      on-light:
+        $value: '{color.blue.500}'
+
+    punctuation:
+      on-light:
+        $value: '{color.blue.500}'
+
+    regex:
+      on-light:
+        $value: '{color.red.500}'
+
+    # selector:
+    #   on-light:
+    #     $value: '{color.}'
+
+    string:
+      on-light:
+        $value: '{color.green.500}'
+
+    symbol:
+      on-light:
+        $value: '{color.green.500}'
+
+    tag:
+      on-light:
+        $value: '{color.orange.500}'
+
+    # url:
+    #   on-light:
+    #     $value: '{color.}'
+
+    variable:
+      on-light:
+        $value: '{color.purple.500}'
+

From 3c5a41259c34e5c59e44e9443223ed87edf489b0 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Mon, 6 Mar 2023 11:16:06 +0200
Subject: [PATCH 2/5] feat(syntax): highlight with highlightjs

---
 build.js                            |   1 +
 docs/assets/styles.css              |  16 +++
 docs/index.html                     |   3 +
 eleventy.config.cjs                 |   2 +
 lib/actions.js                      |   9 +-
 lib/formats.js                      |   1 +
 lib/formats/highlightjs.js          |  54 ++++++++++
 lib/formats/prism.js                |   2 +-
 lib/predicates.js                   |   8 ++
 package-lock.json                   |  41 +++++++-
 package.json                        |   2 +
 platforms.yaml                      |   4 +
 plugins/11ty.cjs                    |  47 +++++----
 plugins/11ty/tokens.css             |   5 -
 plugins/11ty/tokens.js              |   1 +
 tokens/color/crayon/gold.yml        |   2 +
 tokens/color/crayon/light-green.yml |   4 +
 tokens/color/crayon/magenta.yml     |   4 +
 tokens/color/syntax.md              | 137 ++++++++++++++++++++-----
 tokens/color/syntax.yaml            | 152 +++++++++++++++-------------
 20 files changed, 366 insertions(+), 129 deletions(-)
 create mode 100644 lib/formats/highlightjs.js
 create mode 100644 tokens/color/crayon/light-green.yml
 create mode 100644 tokens/color/crayon/magenta.yml

diff --git a/build.js b/build.js
index e740ca6..2ddd0df 100644
--- a/build.js
+++ b/build.js
@@ -38,6 +38,7 @@ export function build() {
     .registerTransformGroup(TransformGroups.js)
     .registerTransformGroup(TransformGroups.sketch)
     .registerFormat(Formats.litCss)
+    .registerFormat(Formats.highlightjsCss)
     .registerFormat(Formats.prismCss)
     .registerFormat(Formats.mapEs)
     .registerFormat(Formats.mapCjs)
diff --git a/docs/assets/styles.css b/docs/assets/styles.css
index 4a85fed..1c9114e 100644
--- a/docs/assets/styles.css
+++ b/docs/assets/styles.css
@@ -4,3 +4,19 @@
   flex-wrap: wrap;
   gap: var(--rh-space-lg, 16px);
 }
+
+#syntax .description > label {
+  width: 100%;
+}
+
+#syntax pre {
+  border-radius: var(--rh-border-radius-default, 3px);
+  border: 1px solid var(--rh-color-border-subtle-on-light, #d2d2d2);
+  padding: var(--rh-space-xl, 24px);
+}
+
+#syntax .dark pre {
+  background: var(--rh-color-syntax-background-dark, #212427);
+  color: var(--rh-color-syntax-color-dark, #d2d2d2);
+  border-color: var(--rh-color-border-subtle-on-dark, #6a6e73);
+}
diff --git a/docs/index.html b/docs/index.html
index 2d2d4ad..a4fa0f5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="/assets/styles.css">
     <link rel="stylesheet" href="/assets/11ty.css">
     <link rel="stylesheet" href="/assets/prism.css">
+    <link rel="stylesheet" href="/assets/highlightjs.css">
     <link rel="stylesheet" href="/assets/tokens.css">
 
     <script type="importmap">{{ importMap | dump | safe }}</script>
@@ -121,7 +122,9 @@ <h2>Overview<a href="#overview">#</a></h2>
       {% category path = 'box-shadow' %}
       {% category path = 'font',
                   include = 'color.text' %}
+
       {% category path = 'color.syntax' %}
+
       {% category path = 'border',
                   include = 'color.border' %}
       {% category path = 'opacity' %}
diff --git a/eleventy.config.cjs b/eleventy.config.cjs
index a642922..5864106 100644
--- a/eleventy.config.cjs
+++ b/eleventy.config.cjs
@@ -12,12 +12,14 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy({ 'docs/assets': 'assets' });
   eleventyConfig.addPassthroughCopy({ 'css/global.css': 'assets/rhds.css' });
   eleventyConfig.addPassthroughCopy({ 'css/prism.css': 'assets/prism.css' });
+  eleventyConfig.addPassthroughCopy({ 'css/highlightjs.css': 'assets/highlightjs.css' });
   eleventyConfig.addPassthroughCopy({ 'plugins/11ty/styles.css': 'assets/11ty.css' });
   eleventyConfig.addGlobalData('importMap', async function() {
     const { Generator } = await import('@jspm/generator');
     const generator = new Generator();
     await generator.install([
       '@rhds/elements',
+      // '@rhds/elements/rh-tabs/rh-tabs.js',
       '@rhds/elements/rh-footer/rh-global-footer.js',
       '@rhds/elements/rh-tooltip/rh-tooltip.js',
     ]);
diff --git a/lib/actions.js b/lib/actions.js
index 4d04feb..6506550 100644
--- a/lib/actions.js
+++ b/lib/actions.js
@@ -123,7 +123,7 @@ function getDescription(collection) {
   return readFileSync(join(process.cwd(), dirname(filePath), descriptionFile), 'utf-8');
 }
 
-function writeDescription(parent) {
+function mutateTokensAddingDescriptions(parent) {
   if (EXT_KEY in (parent?.$extensions ?? {})) {
     const { descriptionFile } = parent.$extensions[EXT_KEY];
     if (descriptionFile) {
@@ -132,7 +132,7 @@ function writeDescription(parent) {
   }
   for (const value of Object.values(parent)) {
     if (typeof value === 'object' && value) {
-      writeDescription(value);
+      mutateTokensAddingDescriptions(value);
     }
   }
 }
@@ -141,7 +141,10 @@ export const descriptionFile = {
   name: 'descriptionFile',
   do() {
     const json = JSON.parse(readFileSync(OUTPUT_JSON_URL, 'utf8'));
-    writeDescription(json);
+    mutateTokensAddingDescriptions(json);
     writeFileSync(OUTPUT_JSON_URL, JSON.stringify(json, null, 2));
+  },
+  undo() {
+    // rmSync(OUTPUT_JSON_URL);
   }
 };
diff --git a/lib/formats.js b/lib/formats.js
index 8278fb8..fd5cf54 100644
--- a/lib/formats.js
+++ b/lib/formats.js
@@ -2,4 +2,5 @@ export * from './formats/lit.js';
 export * from './formats/map.js';
 export * from './formats/docs.js';
 export * from './formats/editor.js';
+export * from './formats/highlightjs.js';
 export * from './formats/prism.js';
diff --git a/lib/formats/highlightjs.js b/lib/formats/highlightjs.js
new file mode 100644
index 0000000..31ed8a3
--- /dev/null
+++ b/lib/formats/highlightjs.js
@@ -0,0 +1,54 @@
+import StyleDictionary from 'style-dictionary';
+const { fileHeader } = StyleDictionary.formatHelpers;
+import { isColor, isOnDark, isOnLight, isSyntax } from '../predicates.js';
+
+
+const highlighjsTokens = new Map(Object.entries({
+  'attr-name': 'attr',
+  'attr-value': 'attr',
+  // 'boolean':
+  'class-name': 'class',
+  // 'comment':
+  // 'constant':
+  // 'function':
+  // 'keyword':
+  // 'number':
+  // 'operator':
+  // 'property':
+  // 'punctuation':
+  // 'regex':
+  // 'string':
+  // 'symbol':
+  // 'tag':
+  // 'variable':
+}));
+
+/**
+ * Prism Syntax CSS
+ * @type {import('style-dictionary').Format}
+ */
+export const highlightjsCss = {
+  name: 'css/highlightjs',
+  formatter: ({ file, dictionary }) => {
+    const syntaxColors =
+      dictionary
+        .allTokens
+        .filter(isSyntax)
+        .filter(isColor);
+    const onLight = syntaxColors.filter(isOnLight);
+    const onDark = syntaxColors.filter(isOnDark);
+    return [
+      fileHeader({ file }),
+      ...onLight
+        .map(x => `.hljs-${x.name
+          .replace('built-in', 'built_in')
+          .replace(/rh-color-syntax-([-\w]+)/, (_, match) => highlighjsTokens.get(match) ?? match)
+          .replace(/-on-light$/, '')}{color:var(--${x.name},${x.value});}`),
+      ...onDark
+        .map(x => `.dark .hljs-${x.name
+          .replace('built-in', 'built_in')
+          .replace(/rh-color-syntax-([-\w]+)/, (_, match) => highlighjsTokens.get(match) ?? match)
+          .replace(/-on-dark$/, '')}{color:var(--${x.name},${x.value});}`),
+    ].join('\n');
+  },
+};
diff --git a/lib/formats/prism.js b/lib/formats/prism.js
index 7892ab8..bf86c73 100644
--- a/lib/formats/prism.js
+++ b/lib/formats/prism.js
@@ -14,7 +14,7 @@ export const prismCss = {
       .allTokens
       .filter(isColor)
       .filter(isSyntax)
-      .map(x => `.token.${x.name
+      .map(x => `pre[class^="lang"].token.${x.name
         .replace(/rh-color-syntax-([-\w])/, '$1')
         .replace(/-on-(light|dark)$/, '')}{color:var(--${x.name},${x.value});}`).join('\n')
   ].join('\n'),
diff --git a/lib/predicates.js b/lib/predicates.js
index d2a23b5..ab0838c 100644
--- a/lib/predicates.js
+++ b/lib/predicates.js
@@ -13,6 +13,14 @@ export const isColor = token =>
 export const isBreakpoint = token =>
   token.path.includes('breakpoint');
 
+/** @type {Predicate} */
+export const isOnLight = token =>
+  token.path.includes('on-light');
+
+/** @type {Predicate} */
+export const isOnDark = token =>
+  token.path.includes('on-dark');
+
 /** @type {Predicate} */
 export const isMobile = token =>
   token.path.includes('mobile');
diff --git a/package-lock.json b/package-lock.json
index aa0c546..ba80bfb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,17 @@
 {
   "name": "@rhds/tokens",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.17",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@rhds/tokens",
-      "version": "1.0.0-beta.16",
+      "version": "1.0.0-beta.17",
       "dependencies": {
         "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
         "highlight.js": "^11.7.0",
+        "markdown-it-highlightjs": "^4.0.1",
+        "markdown-it-prism": "^2.3.0",
         "postcss-value-parser": "^4.2.0",
         "stylelint": "^15.2.0"
       },
@@ -6927,6 +6929,25 @@
         "markdown-it": "bin/markdown-it.js"
       }
     },
+    "node_modules/markdown-it-highlightjs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.0.1.tgz",
+      "integrity": "sha512-EPXwFEN6P5nqR3G4KjT20r20xbGYKMMA/360hhSYFmeoGXTE6hsLtJAiB/8ID8slVH4CWHHEL7GX0YenyIstVQ==",
+      "dependencies": {
+        "highlight.js": "^11.5.1"
+      }
+    },
+    "node_modules/markdown-it-prism": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-prism/-/markdown-it-prism-2.3.0.tgz",
+      "integrity": "sha512-ePtHY80gZyeje4bn3R3SL0jpd1C9HFaYffJW2Ma0YD+tspqa2v9TuVwUyFwboFu4jnFNcO8oPQROgbcYJbmBvw==",
+      "dependencies": {
+        "prismjs": "1.29.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/markdown-it/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -16992,6 +17013,22 @@
         }
       }
     },
+    "markdown-it-highlightjs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.0.1.tgz",
+      "integrity": "sha512-EPXwFEN6P5nqR3G4KjT20r20xbGYKMMA/360hhSYFmeoGXTE6hsLtJAiB/8ID8slVH4CWHHEL7GX0YenyIstVQ==",
+      "requires": {
+        "highlight.js": "^11.5.1"
+      }
+    },
+    "markdown-it-prism": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-prism/-/markdown-it-prism-2.3.0.tgz",
+      "integrity": "sha512-ePtHY80gZyeje4bn3R3SL0jpd1C9HFaYffJW2Ma0YD+tspqa2v9TuVwUyFwboFu4jnFNcO8oPQROgbcYJbmBvw==",
+      "requires": {
+        "prismjs": "1.29.0"
+      }
+    },
     "mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
diff --git a/package.json b/package.json
index 42c4cad..1a709c5 100644
--- a/package.json
+++ b/package.json
@@ -121,6 +121,8 @@
   "dependencies": {
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
     "highlight.js": "^11.7.0",
+    "markdown-it-highlightjs": "^4.0.1",
+    "markdown-it-prism": "^2.3.0",
     "postcss-value-parser": "^4.2.0",
     "stylelint": "^15.2.0"
   }
diff --git a/platforms.yaml b/platforms.yaml
index cfb95c5..ba8d945 100644
--- a/platforms.yaml
+++ b/platforms.yaml
@@ -12,6 +12,10 @@ css:
       format: css/prism
       options:
         fileHeader: redhat/legal
+    - destination: highlightjs.css
+      format: css/highlightjs
+      options:
+        fileHeader: redhat/legal
     - destination: shared.css
       format: css/variables
       options:
diff --git a/plugins/11ty.cjs b/plugins/11ty.cjs
index bdcecf3..135fbc4 100644
--- a/plugins/11ty.cjs
+++ b/plugins/11ty.cjs
@@ -1,11 +1,11 @@
 const { readFile } = require('node:fs/promises');
 const { join } = require('node:path');
 const markdownSyntaxHighlightOptions = require('@11ty/eleventy-plugin-syntaxhighlight/src/markdownSyntaxHighlightOptions');
+const markdownItHighlightJs = require('markdown-it-highlightjs');
+const markdownItPrism = require('markdown-it-prism');
 
 const getDocs = (x, options) => x?.$extensions?.[options.docsExtension];
 const capitalize = x => `${x.at(0).toUpperCase()}${x.slice(1)}`;
-const isRef = x => x?.original?.$value?.startsWith?.('{') ?? false;
-const deref = x => `rh-${x.original.$value.replace(/[{}]/g, '').split('.').join('-')}`;
 
 /** Returns a string with common indent stripped from each line. Useful for templating HTML */
 function dedent(str) {
@@ -51,16 +51,16 @@ function getFilePathGuess(collection) {
 
 /** Get the markdown description in a category's docs extension */
 function getDescription(collection, options) {
-  const {
-    filePath = getFilePathGuess(collection),
-    description = '',
-    descriptionFile
-  } = getDocs(collection, options) ?? {};
-
-  if (description) {
-    return description;
-  } else if (descriptionFile) {
-    return readFile(join(process.cwd(), filePath, '..', descriptionFile), 'utf-8');
+  const docs = getDocs(collection, options) ?? {};
+  if (docs.description) {
+    return docs.description;
+  } else if (docs.descriptionFile) {
+    return readFile(join(
+      process.cwd(),
+      docs.filePath ?? getFilePathGuess(collection),
+      '..',
+      docs.descriptionFile,
+    ), 'utf-8');
   } else {
     return '';
   }
@@ -210,10 +210,9 @@ function table({ tokens, name = '', docs, options } = {}) {
  * @param {PluginOptions} [pluginOptions={}]
  */
 module.exports = function RHDSPlugin(eleventyConfig, pluginOptions = {}) {
-  const md = require('markdown-it')({
-    html: true,
-    highlight: markdownSyntaxHighlightOptions(pluginOptions),
-  });
+  const md = require('markdown-it')({ html: true })
+    .use(markdownItHighlightJs);
+    // .use(markdownItPrism);
 
   const slugify = eleventyConfig.getFilter('slugify');
 
@@ -227,6 +226,20 @@ module.exports = function RHDSPlugin(eleventyConfig, pluginOptions = {}) {
     return getDocs(collection, pluginOptions);
   });
 
+  async function description(options) {
+    if (options.description === false) {
+      return '';
+    }
+    options.attrs ??= pluginOptions.attrs ?? (() => '');
+    options.docsExtension ??= pluginOptions.docsExtension ?? 'com.redhat.ux';
+    const tokens = require('../json/rhds.tokens.json');
+    const { parent, key } = getParentCollection(options, tokens);
+    const collection = parent[key];
+    return `<div class="description">${md.render(dedent(await getDescription(collection, options)))}</div>`;
+  }
+
+  eleventyConfig.addShortcode('description', description);
+
   eleventyConfig.addShortcode('category',
     async function category(options = {}) {
       options.attrs ??= pluginOptions.attrs ?? (() => '');
@@ -275,7 +288,7 @@ module.exports = function RHDSPlugin(eleventyConfig, pluginOptions = {}) {
       return dedent(/* html */`
         <section id="${name}" class="token-category level-${level - 1}">
           <h${level} id="${slug}">${heading}<a href="#${slug}">#</a></h${level}>
-          <div class="description">${md.render(dedent(await getDescription(collection, pluginOptions)))}</div>
+          ${await description(options)}
           ${await table({ /* eslint-disable indent */
             tokens: Object.values(collection).filter(x => x.$value),
             options,
diff --git a/plugins/11ty/tokens.css b/plugins/11ty/tokens.css
index 10abe6d..eda8a26 100644
--- a/plugins/11ty/tokens.css
+++ b/plugins/11ty/tokens.css
@@ -358,11 +358,6 @@ tr:is(:hover, :focus-within).on-dark .copy-cell .copy-button {
   display: block;
 }
 
-.language-html .hljs-tag { color: var(--rh-color-blue-500, #004080); }
-.language-html .hljs-name { color: var(--rh-color-brand-red-dark, #be0000); }
-.language-html .hljs-attr { color: var(--rh-color-orange-300, #ec7a08); }
-.language-html .hljs-string { color: var(--rh-color-green-500, #3e8635); }
-
 code[class^="language-"] {
   max-width: 100%;
   display: block;
diff --git a/plugins/11ty/tokens.js b/plugins/11ty/tokens.js
index da6a13f..ae20254 100644
--- a/plugins/11ty/tokens.js
+++ b/plugins/11ty/tokens.js
@@ -1,3 +1,4 @@
+import '@rhds/elements/rh-tabs/rh-tabs.js';
 import '@rhds/elements/rh-tooltip/rh-tooltip.js';
 import '@rhds/elements/rh-footer/rh-global-footer.js';
 
diff --git a/tokens/color/crayon/gold.yml b/tokens/color/crayon/gold.yml
index 7f19967..0c567cb 100644
--- a/tokens/color/crayon/gold.yml
+++ b/tokens/color/crayon/gold.yml
@@ -3,6 +3,8 @@ color:
     50:
       $value: '#fdf7e7'
       $description: Alert - Warning background
+    300:
+      $value: '#f4c145'
     400:
       $value: '#f0ab00'
       $description: Alert - Warning accent
diff --git a/tokens/color/crayon/light-green.yml b/tokens/color/crayon/light-green.yml
new file mode 100644
index 0000000..202adca
--- /dev/null
+++ b/tokens/color/crayon/light-green.yml
@@ -0,0 +1,4 @@
+color:
+  light-green:
+    400:
+      $value: '#92d400'
diff --git a/tokens/color/crayon/magenta.yml b/tokens/color/crayon/magenta.yml
new file mode 100644
index 0000000..773be11
--- /dev/null
+++ b/tokens/color/crayon/magenta.yml
@@ -0,0 +1,4 @@
+color:
+  magenta:
+    500:
+      $value: '#b300b3'
diff --git a/tokens/color/syntax.md b/tokens/color/syntax.md
index cae613e..74d1474 100644
--- a/tokens/color/syntax.md
+++ b/tokens/color/syntax.md
@@ -1,3 +1,15 @@
+<label>
+  <input type="checkbox"
+         name="dark-syntax"
+         autocomplete="off"
+         onchange="this.closest('div').classList.toggle('dark')">
+  On Dark
+</label>
+
+<rh-tabs>
+<rh-tab>HTML</rh-tab>
+<rh-tab-panel>
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -10,46 +22,94 @@
       <h1>Tags</h1>
     </header>
     <main>
-      <p class="class-name">Text</p>
+      <!-- main content here -->
     </main>
   </body>
 </html>
 ```
 
+</rh-tab-panel>
+
+<rh-tab>CSS</rh-tab>
+<rh-tab-panel>
+
+```css
+@import url(print.css);
+
+@font-face {
+  font-family: Chunkfive;
+  src: url('Chunkfive.otf');
+}
+
+body, .usertext {
+  color: #F0F0F0;
+  background: #600;
+  font-family: Chunkfive, sans;
+  --heading-1: 30px/32px Helvetica, sans-serif;
+}
+
+@media print {
+  a[href^=http]::after {
+    content: attr(href)
+  }
+}
+```
+
+</rh-tab-panel>
+
+<rh-tab>TypeScript</rh-tab>
+<rh-tab-panel>
+
 ```typescript
 @customElement('rh-jazz-hands')
 export class RhJazzHands extends LitElement {
+  public static myValue: string;
+
   @colorContextConsumer() private on: ColorTheme = 'light';
 
+  constructor(init: string) {
+    this.myValue = init;
+  }
+
   render() {
     const  { on } = this;
     return html`
-      <slot id="container" class=${classMap({ [on]: !!on })></slot>
+      <slot id="container" class="${classMap({ [on]: !!on })}"></slot>
     `;
   }
 }
 ```
 
-```css
-@container (--context: dark) {
-  :host(:has(rh-cta)) {
-    border-color: var(--rh-color-border-interactive-on-dark, #73bcf7);
-  }
-}
-```
+</rh-tab-panel>
+
+<rh-tab>Bash</rh-tab>
+<rh-tab-panel>
 
 ```bash
-# !/bin/bash
+#!/bin/bash
+
+###### CONFIG
+ACCEPTED_HOSTS="/root/.hag_accepted.conf"
+BE_VERBOSE=false
 
-source_prefix=$1
-suffix=$2
-destination_prefix=$3
+if [ "$UID" -ne 0 ]
+then
+  echo "Superuser rights required"
+  exit 2
+fi
+
+genApacheConf(){
+  echo -e "# Host ${HOME_DIR}$1/$2 :"
+}
 
-for i in $(ls ${source_prefix}*.${suffix});do
-  mv $i $(echo $i | sed s/${source_prefix}/${destination_prefix}/)
-done
+echo '"quoted"' | tr -d \" > text.txt
 ```
 
+</rh-tab-panel>
+
+<rh-tab>Go</rh-tab>
+<rh-tab-panel>
+
 ```go
 package main
 
@@ -60,6 +120,11 @@ func main() {
 }
 ```
 
+</rh-tab-panel>
+
+<rh-tab>Rust</rh-tab>
+<rh-tab-panel>
+
 ```rust
 trait Animal {
     // Associated function signature; `Self` refers to the implementor type.
@@ -76,20 +141,36 @@ trait Animal {
 }
 ```
 
+</rh-tab-panel>
+
+<rh-tab>JSON</rh-tab>
+<rh-tab-panel>
+
 ```json
-{
-  "color": {
-    "$type": "color",
-    "accent": {
-      "base": {
-        "on-light": {
-          "$name": "rh-color-accent-base-on-light",
-          "$description": "Inline link (light theme)",
-          "$value": "#0066cc"
-        }
-      }
+[
+  {
+    "title": "apples",
+    "count": [
+      12000,
+      20000
+    ],
+    "description": {
+      "text": "...",
+      "sensitive": false
+    }
+  },
+  {
+    "title": "oranges",
+    "count": [
+      17500,
+      null
+    ],
+    "description": {
+      "text": "...",
+      "sensitive": false
     }
   }
-}
+]
 ```
 
+</rh-tabs>
diff --git a/tokens/color/syntax.yaml b/tokens/color/syntax.yaml
index eb618c0..fab09ba 100644
--- a/tokens/color/syntax.yaml
+++ b/tokens/color/syntax.yaml
@@ -5,123 +5,129 @@ color:
         heading: Syntax Highlighting
         descriptionFile: syntax.md
 
-    # atrule:
-    #   on-light:
-    #     $value: '{color.}'
-
-    attr-name:
-      on-light:
-        $value: '{color.orange.500}'
-
-    attr-value:
-      on-light:
-        $value: '{color.orange.500}'
+    background:
+      light:
+        $value: '{color.black.150}'
+      dark:
+        $value: '{color.black.800}'
+
+    color:
+      light:
+        $value: '{color.black.900}'
+      dark:
+        $value: '{color.black.300}'
 
     boolean:
       on-light:
         $value: '{color.orange.500}'
+      on-dark:
+        $value: '{color.orange.300}'
 
-    # builtin:
-    #   on-light:
-    #     $value: '{color.}'
-
-    # cdata:
-    #   on-light:
-    #     $value: '{color.}'
-
-    # char:
-    #   on-light:
-    #     $value: '{color.}'
-
-    class-name:
-      on-light:
-        $value: '{color.green.600}'
-
-    comment:
+    title:
+      $extensions:
+        com.prismjs:
+          name: class-name
       on-light:
-        $value: '{color.black.500}'
+        $value: '{color.purple.500}'
+      on-dark:
+        $value: '{color.gold.300}'
 
     constant:
       on-light:
         $value: '{color.purple.500}'
 
-    # deleted:
-    #   on-light:
-    #     $value: '{color.}'
-
-    # doctype:
-    #   on-light:
-    #     $value: '{color.}'
-
-    # entity:
-    #   on-light:
-    #     $value: '{color.}'
-
     function:
       on-light:
         $value: '{color.red.500}'
 
-    # important:
-    #   on-light:
-    #     $value: '{color.}'
-
-    # inserted:
-    #   on-light:
-    #     $value: '{color.}'
-
     keyword:
       on-light:
-        $value: '{color.purple.500}'
-
-    # namespace:
-    #   on-light:
-    #     $value: '{color.}'
+        $value: '{color.magenta.500}'
+      on-dark:
+        $value: '{color.purple.300}'
 
     number:
       on-light:
         $value: '{color.orange.500}'
+      on-dark:
+        $value: '{color.orange.300}'
 
     operator:
       on-light:
         $value: '{color.cyan.500}'
 
-    # prolog:
-    #   on-light:
-    #     $value: '{color.}'
+    selector-tag:
+      on-light:
+        $value: '{color.red.600}'
+      on-dark:
+        $value: '{color.red.400}'
 
+    built_in:
+      on-light:
+        $value: '{color.blue.500}'
+      on-dark:
+        $value: '{color.blue.100}'
     property:
       on-light:
         $value: '{color.blue.500}'
+      on-dark:
+        $value: '{color.black.300}'
 
     punctuation:
       on-light:
-        $value: '{color.blue.500}'
+        $value: '{color.black.900}'
+      on-dark:
+        $value: '{color.black.300}'
 
-    regex:
+    literal:
       on-light:
-        $value: '{color.red.500}'
-
-    # selector:
-    #   on-light:
-    #     $value: '{color.}'
-
-    string:
+        $value: '{color.orange.500}'
+      on-dark:
+        $value: '{color.orange.300}'
+    regex:
       on-light:
-        $value: '{color.green.500}'
+        $value: '{color.orange.500}'
 
     symbol:
       on-light:
         $value: '{color.green.500}'
 
     tag:
+      on-light:
+        $value: '{color.black.600}'
+      on-dark:
+        $value: '{color.black.500}'
+    name:
+      on-light:
+        $value: '{color.red.600}'
+      on-dark:
+        $value: '{color.red.400}'
+    meta:
+      on-light:
+        $value: '{color.blue.500}'
+      on-dark:
+        $value: '{color.blue.100}'
+    comment:
+      on-light:
+        $value: '{color.black.600}'
+      on-dark:
+        $value: '{color.black.500}'
+    attr:
       on-light:
         $value: '{color.orange.500}'
+      on-dark:
+        $value: '{color.orange.300}'
+    string:
+      on-light:
+        $value: '{color.green.500}'
+      on-dark:
+        $value: '{color.light-green.400}'
 
-    # url:
-    #   on-light:
-    #     $value: '{color.}'
-
+    attribute:
+      on-dark:
+        $value: '{color.blue.100}'
     variable:
       on-light:
-        $value: '{color.purple.500}'
-
+        $value: '{color.red.600}'
+      on-dark:
+        $value: '{color.red.400}'

From b60bf62ce6333eaa5527bf1b7324cf3d21910f42 Mon Sep 17 00:00:00 2001
From: marionnegp <mapatel@redhat.com>
Date: Tue, 7 Mar 2023 14:27:23 -0500
Subject: [PATCH 3/5] Added example code for HTML, CSS, and Less

---
 tokens/color/syntax.md | 42 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/tokens/color/syntax.md b/tokens/color/syntax.md
index 74d1474..19906fb 100644
--- a/tokens/color/syntax.md
+++ b/tokens/color/syntax.md
@@ -16,13 +16,19 @@
   <head>
     <title>HTML</title>
     <link rel="stylesheet" href="/styles.css">
+
+    <style>body {width: 500px;}</style>
+    
+    <script type="application/javascript">
+      function $init() {return true;}
+    </script>
   </head>
   <body>
     <header>
       <h1>Tags</h1>
     </header>
     <main>
-      <!-- main content here -->
+      <p checked class="title" id='title'><!-- main content here --></p>
     </main>
   </body>
 </html>
@@ -48,6 +54,7 @@ body, .usertext {
   --heading-1: 30px/32px Helvetica, sans-serif;
 }
 
+@import url(print.css);
 @media print {
   a[href^=http]::after {
     content: attr(href)
@@ -55,6 +62,39 @@ body, .usertext {
 }
 ```
 
+<rh-tab>Less</rh-tab>
+<rh-tab-panel>
+
+```less
+@import “fruits”; 
+
+@rhythm: 1.5em; 
+
+@media screen and (min-resolution: 2dppx) { 
+  body {font-size: 125%} 
+} 
+
+section > .foo + #bar:hover [href*=“less”] { 
+  margin: @rhythm 0 0 @rhythm; 
+  padding: calc(5% + 20px); 
+  background: #f00ba7 url(http://placehold.alpha-centauri/42.png) no-repeat; 
+  background-image: linear-gradient(-135deg, wheat, fuchsia) !important; 
+  background-blend-mode: multiply; 
+} 
+
+@font-face { 
+  font-family: /* ? */ ‘Omega’; 
+  src: url(‘../fonts/omega-webfont.woff?v=2.0.2’); 
+} 
+
+.icon-baz::before { 
+  display: inline-block; 
+  font-family: “Omega”, Alpha, sans-serif; 
+  content: “\f085”; 
+  color: rgba(98, 76 /* or 54 */, 231, .75); 
+}
+```
+
 </rh-tab-panel>
 
 <rh-tab>TypeScript</rh-tab>

From 358915056e8e1b296b7d3715c76ec5ff59425006 Mon Sep 17 00:00:00 2001
From: marionnegp <mapatel@redhat.com>
Date: Tue, 27 Feb 2024 17:12:44 -0500
Subject: [PATCH 4/5] Squashed commit of the following:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

commit f54e53e2838be71c322d45c585b0d7e5532850b2
Author: Marionne Patel <95588923+marionnegp@users.noreply.github.com>
Date:   Mon Feb 26 11:13:00 2024 -0500

    feat: update danger status tokens (#131)

    * feat: change value of --rh-color-status-danger-on-light

    * feat: add --rh-color-icon-status color tokens

    * fix: add `on-dark` for warning icon color

    * feat: add changeset

commit b64dd326b86c5135ed851270eb01e8d1ce2dd684
Author: Marionne Patel <95588923+marionnegp@users.noreply.github.com>
Date:   Mon Jan 15 09:31:06 2024 -0500

    feat: add status color tokens (#124)

    * feat: add status color tokens, fix a duplicated red orange value, change the max width of the copy button to show full token name, and change order of categories on Netlify page

    * feat: add descriptions

    * docs: add changeset

    * feat: group surface status colors with other surface tokens

    * fix: remove space

    * feat: change neutral status to default and note status to info

    * feat: remove caution status colors and add -status to border and surface status tokens

    * feat: update changeset

    ---------

    Co-authored-by: Benny Powers <web@bennypowers.com>

commit 9539e1d0fe25a314432d07e6c4945ac079aafea6
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Wed Dec 13 10:59:13 2023 +0200

    chore: prepare release (#125)

    Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

commit 3c18e2ca40a4bf6c9c38b231e85e8ae5141123e3
Author: Benny Powers <web@bennypowers.com>
Date:   Wed Dec 13 10:18:26 2023 +0200

    fix: allow component token names

commit a5dfee53734e3aceccc14969eaabc1fbf9a15a06
Author: Marionne Patel <95588923+marionnegp@users.noreply.github.com>
Date:   Wed Dec 6 07:05:03 2023 -0500

    feat: create a new folder under assets to house breakpoint images (#120)

    Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>

commit b020c49acf46fd4eb4be5d8e594b5190369aabb5
Author: Mark Caron <markcaron@users.noreply.github.com>
Date:   Wed Dec 6 03:45:56 2023 -0500

    docs: update README.md (#122)

    Adding stylized alert/admonition for the NOTE

commit 4c64dfcf497e666b8b92872a9457befcdd3f7a49
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Mon Dec 4 12:58:55 2023 -0500

    chore: prepare release (#115)

    Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

commit 975984650f95ef3d64d52e020d09ddaa7d141700
Author: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
Date:   Mon Dec 4 16:59:42 2023 +0200

    docs: correct stylelint rule name (#121)

commit 41125df96f17897f5fcf63f39875e6bb6ade691b
Author: Marionne Patel <95588923+marionnegp@users.noreply.github.com>
Date:   Sun Dec 3 03:23:12 2023 -0500

    feat: update crayon colors with new brand colors (#119)

    * feat: update crayon colors with new brand colors

    * feat: update semantic token values with new crayon tokens

    * fix: fix typo in interactive tokens file, add code comments

    * feat: add changeset with crayon color updates

    * feat: add semantic token value changes to changeset

    * feat: update token names in stylelint README migration example

    * fix: remove empty keys

    * feat: replace crayon color tables with migration rules and list of tokens new to 2.0

    * feat: added use cases when applicable, fixed a blue migration rule, and updated a brand token values

    * docs: apply suggestions from code review

    * docs: update .changeset/add-new-brand-colors.md

    ---------

    Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>

commit c793fd88e31defa5251ec440a14aa43de1ede813
Author: Benny Powers <bennypowers@users.noreply.github.com>
Date:   Thu Jun 8 19:14:14 2023 +0300

    feat(editor): make css var fallback values placeholders (#114)

    * feat(editor): make css var fallback values placeholders

    This lets users more easily choose between the fallback and non-fallback forms
    ```css
    padding: var(--rh-space-xs, 4px);
    margin: var(--rh-space-xs);
    ```

    * docs: add changeset

commit b0592384919e9c0c52629d44fbd413680a2438d1
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Thu May 25 10:56:22 2023 -0400

    chore: prepare release (#112)

    Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

commit f820df63b2701cc0452c02303546a04d5db063c4
Author: Steven Spriggs <steven.spriggs@gmail.com>
Date:   Thu May 25 10:54:24 2023 -0400

    fix: ensure cjs files are included in package (#111)

    * fix: ensure cjs files are included in package

    * chore: update changeset

    * chore: update changeset

commit fa738704ff5c74b224bb4da61cc488297d7e23f2
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Wed May 24 11:06:04 2023 -0400

    chore: prepare release (#109)

    Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

commit a777f24cc9be0e6ce6e4c6abc98bc9a829c58122
Author: Michael Potter <mgp140@gmail.com>
Date:   Wed May 24 11:03:58 2023 -0400

    fix: missing file exports (#108)

    * fix: made typescript compile a dep of style-dictionary

    * chore: added changeset

    * chore: changset

commit 1485ceaeda5e8c4d4fca3e6ea04401237a360a6e
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Tue May 23 13:30:26 2023 -0400

    chore: prepare release (#105)

    Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

commit c80fea2a614bb3e56feb8c4a45921dbcbad4e788
Author: Steven Spriggs <steven.spriggs@gmail.com>
Date:   Tue May 23 11:20:40 2023 -0400

    chore: missing script for types in release workflow (#104)

commit 07668634fc1e62a8185e2b4b8286a474665a2c32
Author: Steven Spriggs <steven.spriggs@gmail.com>
Date:   Thu May 18 13:21:25 2023 -0400

    feat: add meta data token export (#103)

    * feat: add meta data token export

    * chore: update comment

    * fix: export entire token object in meta entries

    * docs: update lib/formats/map.js

    * docs: update lib/formats/map.js

    ---------

    Co-authored-by: Benny Powers <bennypowers@users.noreply.github.com>

commit d35d8a271efc9d0124ca25c443ab8e640b6117d2
Author: Ivana Rodriguez <55894965+eyevana@users.noreply.github.com>
Date:   Mon Apr 24 09:33:30 2023 -0400

    fix: plugin filename should match release tag (#102)

    * fix: plugin filename should match release tag

    * fix: throw error if filename doesn't match

    * ci: break out package step and run after version bump
---
 .changeset/kind-singers-count.md              |  17 ++
 .changeset/rich-bags-deliver.md               |  22 ++
 .github/workflows/release.yml                 |   4 +-
 CHANGELOG.md                                  | 241 ++++++++++++++++++
 README.md                                     |   4 +-
 build.js                                      |   2 +
 .../device-rh-breakpoint-2xl.svg              |   0
 .../device-rh-breakpoint-2xs-max.svg          |   0
 .../device-rh-breakpoint-lg-max.svg           |   0
 .../device-rh-breakpoint-lg.svg               |   0
 .../device-rh-breakpoint-md-max.svg           |   0
 .../device-rh-breakpoint-md.svg               |   0
 .../device-rh-breakpoint-sm-max.svg           |   0
 .../device-rh-breakpoint-sm.svg               |   0
 .../device-rh-breakpoint-xl-max.svg           |   0
 .../device-rh-breakpoint-xl.svg               |   0
 .../device-rh-breakpoint-xs-max.svg           |   0
 .../device-rh-breakpoint-xs.svg               |   0
 docs/assets/tokens.css                        |   2 +-
 eleventy.config.cjs                           |   2 +-
 lib/formats/editor.js                         |   2 +-
 lib/formats/map.js                            |  48 ++++
 lib/release.js                                |   7 +
 package.json                                  |  29 ++-
 platforms.yaml                                |   4 +
 plugins/stylelint/README.md                   |  10 +-
 .../stylelint/rules/no-unknown-token-name.cjs |  10 +-
 tokens/color/accent.yml                       |   8 +-
 tokens/color/border.yml                       |  79 +++++-
 tokens/color/brand.yml                        |  16 +-
 tokens/color/canvas.yaml                      |   2 +-
 tokens/color/crayon/blue.yaml                 |  34 +--
 tokens/color/crayon/cyan.yml                  |  20 --
 tokens/color/crayon/gold.yml                  |  16 --
 tokens/color/crayon/gray.yaml                 |  24 +-
 tokens/color/crayon/green.yml                 |  27 +-
 tokens/color/crayon/orange.yml                |  28 +-
 tokens/color/crayon/purple.yaml               |  30 ++-
 tokens/color/crayon/red-orange.yaml           |  22 ++
 tokens/color/crayon/red.yaml                  |  48 ++--
 tokens/color/crayon/teal.yaml                 |  25 ++
 tokens/color/crayon/yellow.yaml               |  24 ++
 tokens/color/icon.yml                         |  42 ++-
 tokens/color/interactive.yaml                 |  16 +-
 tokens/color/status.yaml                      |  45 ++++
 tokens/color/surface.yaml                     |  49 +++-
 tokens/color/text.yaml                        |  10 +-
 47 files changed, 782 insertions(+), 187 deletions(-)
 create mode 100644 .changeset/kind-singers-count.md
 create mode 100644 .changeset/rich-bags-deliver.md
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-2xl.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-2xs-max.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-lg-max.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-lg.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-md-max.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-md.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-sm-max.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-sm.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-xl-max.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-xl.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-xs-max.svg (100%)
 rename docs/assets/{ => breakpoints}/device-rh-breakpoint-xs.svg (100%)
 delete mode 100644 tokens/color/crayon/cyan.yml
 delete mode 100644 tokens/color/crayon/gold.yml
 create mode 100644 tokens/color/crayon/red-orange.yaml
 create mode 100644 tokens/color/crayon/teal.yaml
 create mode 100644 tokens/color/crayon/yellow.yaml
 create mode 100644 tokens/color/status.yaml

diff --git a/.changeset/kind-singers-count.md b/.changeset/kind-singers-count.md
new file mode 100644
index 0000000..db4d028
--- /dev/null
+++ b/.changeset/kind-singers-count.md
@@ -0,0 +1,17 @@
+---
+"@rhds/tokens": minor
+---
+
+Changed value of `--rh-color-status-danger-on-light` from `--rh-color-red-orange-50` to `--rh-color-red-orange-60`
+
+Added the following tokens to use status colors for icons:
+- `--rh-color-icon-status-danger-on-light`
+- `--rh-color-icon-status-danger-on-dark`
+- `--rh-color-icon-status-warning-on-light`
+- `--rh-color-icon-status-warning-on-dark`
+- `--rh-color-icon-status-default-on-light`
+- `--rh-color-icon-status-default-on-dark`
+- `--rh-color-icon-status-info-on-light`
+- `--rh-color-icon-status-info-on-dark`
+- `--rh-color-icon-status-success-on-light`
+- `--rh-color-icon-status-success-on-dark`
\ No newline at end of file
diff --git a/.changeset/rich-bags-deliver.md b/.changeset/rich-bags-deliver.md
new file mode 100644
index 0000000..99f7ee5
--- /dev/null
+++ b/.changeset/rich-bags-deliver.md
@@ -0,0 +1,22 @@
+---
+"@rhds/tokens": minor
+---
+
+Added status tokens
+
+```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);
+  }
+}
+```
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 4900042..56314db 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -21,7 +21,7 @@ jobs:
       - uses: google/wireit@setup-github-actions-caching/v1
 
       - run: npm ci --prefer-offline
-      - run: npm run package # also builds and tests
+      - run: npm run test
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
@@ -46,6 +46,8 @@ jobs:
           echo "$tag"
           echo "::set-output name=tag::$tag"
 
+      - run: npm run package-vscode
+
       - name: Upload release artifact
         uses: actions/github-script@v6
         if: ${{ steps.changesets.outputs.published == 'true' }}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a3323a..1400d5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,246 @@
 # @rhds/tokens
 
+## 2.0.1
+
+### Patch Changes
+
+- 3c18e2c: Stylelint: avoid some false-positives when linting [component token names][wiki].
+
+  [wiki]: https://github.com/RedHat-UX/red-hat-design-system/wiki/CSS-Styles#tokens-and-naming-conventions
+
+## 2.0.0
+
+### Major Changes
+
+- 41125df: # Crayon color updates
+
+  Crayon color token names and values were changed to match the [new Red Hat color palette](https://www.redhat.com/en/about/brand/standards/color).
+
+  To help you make these changes, use the [RHDS Stylelint Plugin](https://github.com/RedHat-UX/red-hat-design-tokens/tree/main/plugins/stylelint).If you'd like more information about Stylelint, visit [stylelint.io](http://stylelint.io/).
+
+  Stylelint's migration rule can take a dictionary of names to migrate, and if it finds one of the specified names, it will automatically replace it with the new one. The rules below indicate how color tokens in 1.0 map to those in 2.0 and can be copied and pasted into your own repo.
+
+  ```yaml
+  rules:
+    rhds/no-unknown-token-names:
+      - true
+      - migrations:
+          # reds
+          --rh-color-red-50: --rh-color-red-10
+          --rh-color-red-100: --rh-color-red-20
+          --rh-color-red-200: --rh-color-red-30
+          --rh-color-red-300: --rh-color-red-40
+          --rh-color-red-400: --rh-color-red-50
+          --rh-color-red-500: --rh-color-red-50
+          --rh-color-red-600: --rh-color-red-60
+          --rh-color-red-700: --rh-color-red 60
+          --rh-color-red-800: --rh-color-red-70
+          # oranges
+          --rh-color-orange-50: --rh-color-orange-10
+          --rh-color-orange-100: --rh-color-orange-30
+          --rh-color-orange-300: --rh-color-orange-40
+          --rh-color-orange-500: --rh-color-orange-60
+          --rh-color-orange-700: --rh-color-orange-70
+          # yellows (previously golds)
+          --rh-color-gold-50: --rh-color-yellow-10
+          --rh-color-gold-400: --rh-color-yellow-40
+          --rh-color-gold-600: --rh-color-yellow-70
+          # greens
+          --rh-color-green-50: --rh-color-green-10
+          --rh-color-green-100: --rh-color-green-20
+          --rh-color-green-500: --rh-color-green-60
+          --rh-color-green-600: --rh-color-green-70
+          # teals (previously cyans)
+          --rh-color-cyan-50: --rh-color-teal-10
+          --rh-color-cyan-100: --rh-color-teal-30
+          --rh-color-cyan-300: --rh-color-teal-50
+          --rh-color-cyan-400: --rh-color-teal-60
+          --rh-color-cyan-500: --rh-color-teal-70
+          # blues
+          --rh-color-blue-50: --rh-color-blue-10
+          --rh-color-blue-100: --rh-color-blue-20
+          --rh-color-blue-200: --rh-color-blue-30
+          --rh-color-blue-250: --rh-color-blue-40
+          --rh-color-blue-400: --rh-color-blue-50
+          --rh-color-blue-500: --rh-color-blue-60
+          --rh-color-blue-600: --rh-color-blue-70
+          # purples
+          --rh-color-purple-50: --rh-color-purple-10
+          --rh-color-purple-100: --rh-color-purple-20
+          --rh-color-purple-300: --rh-color-purple-40
+          --rh-color-purple-500: --rh-color-purple-60
+          --rh-color-purple-700: --rh-color-purple-70
+          # grays
+          --rh-color-gray-05: --rh-color-gray-10
+          --rh-color-gray-10: --rh-color-gray-20
+          --rh-color-gray-20: --rh-color-gray-30
+          --rh-color-gray-30: --rh-color-gray-40
+          --rh-color-gray-40: --rh-color-gray-50
+          --rh-color-gray-50: --rh-color-gray-60
+          --rh-color-gray-60: --rh-color-gray-70
+          --rh-color-gray-70: --rh-color-gray-80
+          --rh-color-gray-80: --rh-color-gray-90
+          --rh-color-gray-90: --rh-color-gray-95
+          --rh-color-black: --rh-color-gray-100
+  ```
+
+  There are several new crayon color tokens that have been added and do not directly map to a 1.0 token. These include:
+
+  - `--rh-color-red-orange-10`
+  - `--rh-color-red-orange-20`
+  - `--rh-color-red-orange-30`
+  - `--rh-color-red-orange-40`
+  - `--rh-color-red-orange-50`
+
+  - `--rh-color-orange-20`
+  - `--rh-color-orange-50`
+
+  - `--rh-color-yellow-20`
+  - `--rh-color-yellow-30`
+  - `--rh-color-yellow-50`
+  - `--rh-color-yellow-60`
+
+  - `--rh-color-green-30`
+  - `--rh-color-green-40`
+  - `--rh-color-green-50`
+
+  - `--rh-color-teal-20`
+  - `--rh-color-teal-40`
+
+  - `--rh-color-purple-30`
+  - `--rh-color-purple-50`
+
+  ## Semantic token value changes
+
+  The following semantic token values changed, but the token names did not. In many cases, you may automatically migrate these tokens using the `rhds/token-values` stylelint rule.
+
+  ```yaml
+  rules:
+    rhds/token-values: true
+  ```
+
+  ### Accent
+
+  | Semantic token          | Old crayon token value | New crayon token value |
+  | ----------------------- | ---------------------- | ---------------------- |
+  | `accent-base-on-light`  | `blue-400`             | `blue-50`              |
+  | `accent-base-on-dark`   | `blue-200`             | `blue-30`              |
+  | `accent-brand-on-light` | `red-500`              | `brand-red-on-light`   |
+  | `accent-brand-on-dark`  | `red-400`              | `brand-red-on-dark`    |
+
+  ### Border
+
+  | Semantic token                | Old crayon token value | New crayon token value |
+  | ----------------------------- | ---------------------- | ---------------------- |
+  | `border-strong-on-light`      | `gray-90`              | `gray-95`              |
+  | `border-strong-on-dark`       | `white`                | `white`                |
+  | `border-subtle-on-light`      | `gray-20`              | `gray-30`              |
+  | `border-subtle-on-dark`       | `gray-40`              | `gray-50`              |
+  | `border-interactive-on-light` | `blue-400`             | `blue-50`              |
+  | `border-interactive-on-dark`  | `blue-200`             | `blue-30`              |
+
+  ### Brand
+
+  | Semantic token       | Old crayon token value | New crayon token value |
+  | -------------------- | ---------------------- | ---------------------- |
+  | `brand-red-lightest` | `red-100`              | `red-10`               |
+  | `brand-red-lighter`  | `red-200`              | `red-20`               |
+  | `brand-red-light`    | `red-300`              | `red-40`               |
+  | `brand-red-dark`     | `red-600`              | `red-60`               |
+  | `brand-red-darker`   | `red-700`              | `red-70`               |
+  | `brand-red-darkest`  | `red-800`              | `red-70`               |
+  | `brand-red-on-light` | `red-500`              | `red-50`               |
+  | `brand-red-on-dark`  | `red-400`              | `red-50`               |
+
+  ### Canvas
+
+  | Semantic token | Old crayon token value | New crayon token value |
+  | -------------- | ---------------------- | ---------------------- |
+  | `canvas-white` | `white`                | `white`                |
+  | `canvas-black` | `gray-90`              | `gray-95`              |
+
+  ### Icon
+
+  | Semantic token            | Old crayon token value | New crayon token value |
+  | ------------------------- | ---------------------- | ---------------------- |
+  | `icon-primary-on-light`   | `brand-red-on-light`   | `brand-red-on-light`   |
+  | `icon-primary-on-dark`    | `brand-red-on-dark`    | `brand-red-on-dark`    |
+  | `icon-secondary-on-light` | `gray-90`              | `gray-95`              |
+  | `icon-secondary-on-dark`  | `white`                | `gray-50`              |
+  | `icon-subtle`             | `gray-40`              | `gray-50`              |
+  | `icon-subtle-hover`       | `gray-30`              | `gray-40`              |
+
+  ### Interactive
+
+  | Semantic token                | Old crayon token value | New crayon token value |
+  | ----------------------------- | ---------------------- | ---------------------- |
+  | `interactive-blue-lightest`   | `blue-100`             | `blue-20`              |
+  | `interactive-blue-lighter`    | `blue-200`             | `blue-30`              |
+  | `interactive-blue-darker`     | `blue-400`             | `blue-50`              |
+  | `interactive-blue-darkest`    | `blue-500`             | `blue-70`              |
+  | `interactive-purple-lightest` | `purple-100`           | `purple-10`            |
+  | `interactive-purple-lighter`  | `purple-300`           | `purple-30`            |
+  | `interactive-purple-darker`   | `purple-500`           | `purple-50`            |
+  | `interactive-purple-darkest`  | `purple-700`           | `purple-70`            |
+
+  ### Surface
+
+  | Semantic token     | Old crayon token value | New crayon token value |
+  | ------------------ | ---------------------- | ---------------------- |
+  | `surface-lightest` | `white`                | `white`                |
+  | `surface-lighter`  | `gray-05`              | `gray-10`              |
+  | `surface-light`    | `gray-10`              | `gray-20`              |
+  | `surface-dark`     | `gray-60`              | `gray-70`              |
+  | `surface-dark-alt` | `gray-70`              | `gray-80`              |
+  | `surface-darker`   | `gray-80`              | `gray-90`              |
+  | `surface-darkest`  | `gray-90`              | `gray-95`              |
+
+  ### Text
+
+  | Semantic token            | Old crayon token value | New crayon token value |
+  | ------------------------- | ---------------------- | ---------------------- |
+  | `text-primary-on-light`   | `gray-90`              | `gray-95`              |
+  | `text-primary-on-dark`    | `white`                | `white`                |
+  | `text-secondary-on-light` | `gray-50`              | `gray-60`              |
+  | `text-secondary-on-dark`  | `gray-20`              | `gray-30`              |
+  | `text-brand-on-light`     | `red-500`              | `brand-red-on-light`   |
+  | `text-brand-on-dark`      | `red-400`              | `brand-red-on-dark`    |
+
+### Minor Changes
+
+- c793fd8: Makes css property fallbacks a snippet placeholder, letting users more easily
+  choose between the fallback and non-fallback forms
+  ```css
+  padding: var(--rh-space-xs, 4px);
+  margin: var(--rh-space-xs);
+  ```
+
+## 1.1.2
+
+### Patch Changes
+
+- f820df6: Added `js/**/*.cjs` to files entry points patterns array
+
+## 1.1.1
+
+### Patch Changes
+
+- a777f24: Fixes missing file exports
+
+## 1.1.0
+
+### Minor Changes
+
+- 0766863: Adds token meta data export.
+
+  ```js
+  import { tokens } from "@rhds/tokens/meta.js";
+
+  const family = tokens.get("--rh-font-family-body-text");
+  console.log(family.$description);
+  // 'The font family used for body text'
+  ```
+
 ## 1.0.0
 
 ### Major Changes
diff --git a/README.md b/README.md
index a7df6d9..e7994d2 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,9 @@ import { ColorBlue300 } from '@rhds/tokens/values.js';
 
 html`<span style="color: ${ColorBlue300}">I'm blue</span>`;
 ```
-**NOTE**: We *strongly* recommend using CSS variables (and accompanying snippets)
+> :warning: **NOTE**
+>
+> We *strongly* recommend using CSS variables (and accompanying snippets)
 wherever, instead of importing tokens as JavaScript objects.
 
 ### Stylelint Plugin
diff --git a/build.js b/build.js
index 1b10fea..fda5317 100644
--- a/build.js
+++ b/build.js
@@ -42,6 +42,8 @@ export function build() {
     .registerFormat(Formats.prismCss)
     .registerFormat(Formats.mapEs)
     .registerFormat(Formats.mapCjs)
+    .registerFormat(Formats.metaMapEs)
+    .registerFormat(Formats.metaMapCjs)
     .registerFormat(Formats.modules)
     .registerFormat(Formats.vscodeSnippets)
     .registerFormat(Formats.textmateSnippets)
diff --git a/docs/assets/device-rh-breakpoint-2xl.svg b/docs/assets/breakpoints/device-rh-breakpoint-2xl.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-2xl.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-2xl.svg
diff --git a/docs/assets/device-rh-breakpoint-2xs-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-2xs-max.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-2xs-max.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-2xs-max.svg
diff --git a/docs/assets/device-rh-breakpoint-lg-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-lg-max.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-lg-max.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-lg-max.svg
diff --git a/docs/assets/device-rh-breakpoint-lg.svg b/docs/assets/breakpoints/device-rh-breakpoint-lg.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-lg.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-lg.svg
diff --git a/docs/assets/device-rh-breakpoint-md-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-md-max.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-md-max.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-md-max.svg
diff --git a/docs/assets/device-rh-breakpoint-md.svg b/docs/assets/breakpoints/device-rh-breakpoint-md.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-md.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-md.svg
diff --git a/docs/assets/device-rh-breakpoint-sm-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-sm-max.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-sm-max.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-sm-max.svg
diff --git a/docs/assets/device-rh-breakpoint-sm.svg b/docs/assets/breakpoints/device-rh-breakpoint-sm.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-sm.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-sm.svg
diff --git a/docs/assets/device-rh-breakpoint-xl-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-xl-max.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-xl-max.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-xl-max.svg
diff --git a/docs/assets/device-rh-breakpoint-xl.svg b/docs/assets/breakpoints/device-rh-breakpoint-xl.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-xl.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-xl.svg
diff --git a/docs/assets/device-rh-breakpoint-xs-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-xs-max.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-xs-max.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-xs-max.svg
diff --git a/docs/assets/device-rh-breakpoint-xs.svg b/docs/assets/breakpoints/device-rh-breakpoint-xs.svg
similarity index 100%
rename from docs/assets/device-rh-breakpoint-xs.svg
rename to docs/assets/breakpoints/device-rh-breakpoint-xs.svg
diff --git a/docs/assets/tokens.css b/docs/assets/tokens.css
index e3878e6..47f217d 100644
--- a/docs/assets/tokens.css
+++ b/docs/assets/tokens.css
@@ -185,7 +185,7 @@ code {
 .token:is(.value, .name) .copy-button {
   background-color: var(--rh-color-surface-lighter);
   overflow-x: hidden;
-  max-width: 350px;
+  max-width: 400px;
   white-space: pre;
   text-overflow: ellipsis;
 }
diff --git a/eleventy.config.cjs b/eleventy.config.cjs
index 51ca399..988c353 100644
--- a/eleventy.config.cjs
+++ b/eleventy.config.cjs
@@ -176,7 +176,7 @@ module.exports = function(eleventyConfig) {
               ${isColor && token.path.includes('text') ? 'Aa'
               : isFont ? (docs?.example ?? token.attributes?.aliases?.[0] ?? 'Aa')
               : name === 'breakpoint' ? `
-                <img src="assets/device-${token.name}.svg" role="presentation">`
+                <img src="assets/breakpoints/device-${token.name}.svg" role="presentation">`
               : docs?.example ?? ''}
               </samp>
             </td>
diff --git a/lib/formats/editor.js b/lib/formats/editor.js
index 18f01d4..b44c05a 100644
--- a/lib/formats/editor.js
+++ b/lib/formats/editor.js
@@ -32,7 +32,7 @@ export const vscodeSnippets = {
               token.name.replaceAll('-', ''),
               token.value?.startsWith?.('#') ? token.value.replace(/^#/, '') : null
             ].filter(Boolean),
-            body: [`var(--${token.name}, ${token.value})`],
+            body: [`var(--${token.name}\${1:, ${token.value}})$2`],
             description: token.$description,
           },
         ];
diff --git a/lib/formats/map.js b/lib/formats/map.js
index 33fb414..b5a0d2d 100644
--- a/lib/formats/map.js
+++ b/lib/formats/map.js
@@ -3,6 +3,8 @@ const { fileHeader } = StyleDictionary.formatHelpers;
 
 const makeEntries = dictionary => dictionary.allTokens.map(x => [`--${x.name}`, x.value]);
 
+const makeMetaEntries = dictionary => dictionary.allTokens.map(x => [`--${x.name}`, x]);
+
 /**
  * JavaScript token map
  * @type {import('style-dictionary').Format}
@@ -23,6 +25,30 @@ export const mapEs = {
   },
 };
 
+
+/**
+ * JavaScript token map
+ * @type {import('style-dictionary').Format}
+ * @example Importing token objects in JavaScript modules
+ *          ```js
+ *          import { tokens } from '@rhds/tokens/meta.js';
+ *
+ *          const family = tokens.get('--rh-font-family-body-text');
+ *          console.log(family.$description);
+ *          // 'The font family used for body text'
+ * ```
+ */
+export const metaMapEs = {
+  name: 'javascript/meta-map',
+  formatter({ file, dictionary }) {
+    return [
+      fileHeader({ file }),
+      `export const tokens = new Map(${JSON.stringify(makeMetaEntries(dictionary), null, 2)});`,
+    ].join('\n');
+  },
+};
+
+
 /**
  * CommonJS token map
  * @type {import('style-dictionary').Format}
@@ -40,3 +66,25 @@ export const mapCjs = {
       .formatter(...args)
       .replace('export const tokens', 'exports.tokens'),
 };
+
+/**
+ * CommonJS token map
+ * @type {import('style-dictionary').Format}
+ * @example Importing token objects in CommonJS modules
+ *          ```js
+ *          import { tokens } from '@rhds/tokens/meta.js';
+ *
+ *          const family = tokens.get('--rh-font-family-body-text');
+ *          console.log(family.$description);
+ *          // 'The font family used for body text'
+ *          ```
+ */
+export const metaMapCjs = {
+  name: 'javascript/meta-map-cjs',
+  formatter: (...args) =>
+    metaMapEs
+      .formatter(...args)
+      .replace('export const tokens', 'exports.tokens'),
+};
+
+
diff --git a/lib/release.js b/lib/release.js
index 7b941a4..fef3a71 100644
--- a/lib/release.js
+++ b/lib/release.js
@@ -46,6 +46,13 @@ export async function release({ core, github, tag, workspace }) {
       throw new Error('Could not find release');
     }
 
+    // Filename should match release tag
+    const version = filename.slice(22, -5);
+    const releaseVersion = tag.slice(1);
+    if (version !== releaseVersion) {
+      throw new Error('Filename version does not match release tag');
+    }
+
     const response = await backoff(() =>
       github.rest.repos.getReleaseByTag({ owner, repo, tag }));
 
diff --git a/package.json b/package.json
index 97191da..77cf7bb 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,17 @@
 {
   "name": "@rhds/tokens",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "description": "Red Hat Design System Tokens",
   "scripts": {
     "build": "wireit",
     "11ty": "eleventy",
-    "package": "wireit",
+    "package-vscode": "wireit",
     "style-dictionary": "wireit",
     "start": "wireit",
     "lint": "eslint lib plugins test docs",
     "format": "eslint --fix lib plugins test docs",
-    "test": "wireit"
+    "test": "wireit",
+    "compile": "wireit"
   },
   "type": "module",
   "main": "js/tokens.cjs",
@@ -21,6 +22,10 @@
       "require": "./js/tokens.cjs",
       "types": "./js/tokens.d.ts"
     },
+    "./meta.js": {
+      "import": "./js/meta.js",
+      "require": "./js/meta.cjs"
+    },
     "./json/*": {
       "require": "./json/*"
     },
@@ -76,7 +81,7 @@
     "css",
     "editor",
     "plugins",
-    "js/**/*.{js,d.ts}",
+    "js/**/*.{js,d.ts,cjs}",
     "json",
     "scss"
   ],
@@ -87,7 +92,7 @@
   "wireit": {
     "build": {
       "dependencies": [
-        "package",
+        "package-vscode",
         "11ty"
       ]
     },
@@ -124,26 +129,24 @@
       ],
       "dependencies": [
         "lint",
-        "style-dictionary"
+        "compile"
       ]
     },
-    "types": {
+    "compile": {
       "command": "tsc -m es2022 --target es2022 --moduleResolution nodenext -d ./js/*.ts",
       "dependencies": [
         "style-dictionary"
       ]
     },
-    "package": {
+    "package-vscode": {
       "command": "cd editor/vscode && vsce package",
-      "dependencies": [
-        "style-dictionary",
-        "types",
-        "test"
-      ],
       "files": [
         "editor/vscode/package.json",
         "editor/vscode/snippets.json"
       ],
+      "dependencies": [
+        "compile"
+      ],
       "output": [
         "*.vsix"
       ]
diff --git a/platforms.yaml b/platforms.yaml
index b06fe68..5f3167a 100644
--- a/platforms.yaml
+++ b/platforms.yaml
@@ -71,6 +71,10 @@ map:
       format: javascript/map
     - destination: tokens.cjs
       format: javascript/map-cjs
+    - destination: meta.js
+      format: javascript/meta-map
+    - destination: meta.cjs
+      format: javascript/meta-map-cjs
 
 js:
   transformGroup: js
diff --git a/plugins/stylelint/README.md b/plugins/stylelint/README.md
index 002865b..1aa4c89 100644
--- a/plugins/stylelint/README.md
+++ b/plugins/stylelint/README.md
@@ -11,7 +11,7 @@ plugins:
 # Make sure to activate the rule:
 rules:
   rhds/token-values: true
-  rhds/no-unknown-token-value: true
+  rhds/no-unknown-token-name: true
 ```
 
 Be sure to configure your editor to fix stylelint issues on save:
@@ -25,7 +25,7 @@ Validates that the fallback values for tokens correspond with the values
 specified in the token sources. Automatically fixed incorrect values. This rule 
 has no options.
 
-### `no-unknown-token-value`
+### `no-unknown-token-name`
 Validates CSS Custom Property names beginning with `--rh` are legit token names. 
 
 #### Options
@@ -34,9 +34,9 @@ specified names, it will automatically replace it with the new one.
 
 ```yaml
 rules:
-  rhds/no-unknown-token-value:
+  rhds/no-unknown-token-name:
     - true
     - migrations:
-      # instances of black-900 will be replaced with gray-90
-      --rh-color-black-900: --rh-color-gray-90
+      # instances of gray-90 will be replaced with gray-95
+      --rh-color-gray-90: --rh-color-gray-95
 ```
diff --git a/plugins/stylelint/rules/no-unknown-token-name.cjs b/plugins/stylelint/rules/no-unknown-token-name.cjs
index b2efd01..4c743f1 100644
--- a/plugins/stylelint/rules/no-unknown-token-name.cjs
+++ b/plugins/stylelint/rules/no-unknown-token-name.cjs
@@ -1,3 +1,4 @@
+const path = require('node:path');
 const { tokens } = require('@rhds/tokens');
 const stylelint = require('stylelint');
 const declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex');
@@ -16,6 +17,10 @@ const meta = {
 /** @type {import('stylelint').Plugin} */
 const ruleFunction = (_, opts, ctx) => {
   return (root, result) => {
+    // here we assume a file structure of */rh-tagname/rh-tagname.css
+    const tagName = path.dirname(root.source.input.file)
+      .split(path.sep)
+      .findLast(x => x.startsWith('rh-'));
     const validOptions = stylelint.utils.validateOptions(
       result,
       ruleName,
@@ -36,7 +41,10 @@ const ruleFunction = (_, opts, ctx) => {
         parsedValue.walk(parsed => {
           if (parsed.type === 'function' && parsed.value === 'var') {
             const [{ value }] = parsed.nodes ?? [];
-            if (value.startsWith('--rh') && !tokens.has(value) || migrations.has(value)) {
+            if (value.startsWith('--rh') &&
+                !value.startsWith(`--${tagName}`) &&
+                !tokens.has(value) ||
+                migrations.has(value)) {
               const message = `Expected ${value} to be a known token name`;
               const { nodes: [{ sourceIndex, sourceEndIndex }] } = parsed;
               const declIndex = declarationValueIndex(node);
diff --git a/tokens/color/accent.yml b/tokens/color/accent.yml
index 02962b5..7cdec5e 100644
--- a/tokens/color/accent.yml
+++ b/tokens/color/accent.yml
@@ -7,15 +7,15 @@ color:
 
     base:
       on-light:
-        $value: '{color.blue.400}'
+        $value: '{color.blue.50}'
         $description: Inline link (light theme)
       on-dark:
-        $value: '{color.blue.200}'
+        $value: '{color.blue.30}'
         $description: Inline link (dark theme)
     brand:
       on-light:
-        $value: '{color.red.500}'
+        $value: '{color.brand.red.on-light}'
         $description: Brand red (light theme)
       on-dark:
-        $value: '{color.red.400}'
+        $value: '{color.brand.red.on-dark}'
         $description: Brand red (dark theme)
diff --git a/tokens/color/border.yml b/tokens/color/border.yml
index 48240e3..1fc2b53 100644
--- a/tokens/color/border.yml
+++ b/tokens/color/border.yml
@@ -9,7 +9,7 @@ color:
 
     strong:
       on-light:
-        $value: '{color.gray.90}'
+        $value: '{color.gray.95}'
         $description: Strong border color (light theme)
         attributes:
           category: border
@@ -23,13 +23,13 @@ color:
 
     subtle:
       on-light:
-        $value: '{color.gray.20}'
+        $value: '{color.gray.30}'
         $description: Subtle border color (light theme)
         attributes:
           category: border
           type: color
       on-dark:
-        $value: '{color.gray.40}'
+        $value: '{color.gray.50}'
         $description: Subtle border color (dark theme)
         attributes:
           category: border
@@ -37,14 +37,81 @@ color:
 
     interactive:
       on-light:
-        $value: '{color.blue.400}'
+        $value: '{color.blue.50}'
         $description: Interactive border color (light theme)
         attributes:
           category: border
           type: color
       on-dark:
-        $value: '{color.blue.200}'
+        $value: '{color.blue.30}'
         $description: Interactive border color (dark theme)
         attributes:
           category: border
-          type: color
\ No newline at end of file
+          type: color
+
+    status:
+      danger:
+        on-light:
+          $value: '{color.red-orange.50}'
+          $description: Danger status border color (light theme)
+          attributes:
+            category: border
+            type: color
+        on-dark:
+          $value: '{color.red-orange.40}'
+          $description: Danger status border color (dark theme)
+          attributes:
+            category: border
+            type: color
+      warning:
+        on-light:
+          $value: '{color.orange.50}'
+          $description: Warning status border color (light theme)
+          attributes:
+            category: border
+            type: color
+        on-dark:
+          $value: '{color.orange.40}'
+          $description: Warning status border color (dark theme)
+          attributes:
+            category: border
+            type: color
+      default:
+        on-light:
+          $value: '{color.gray.60}'
+          $description: Default status border color (light theme)
+          attributes:
+            category: border
+            type: color
+        on-dark:
+          $value: '{color.gray.40}'
+          $description: Default status border color (dark theme)
+          attributes:
+            category: border
+            type: color
+      info:
+        on-light:
+          $value: '{color.purple.50}'
+          $description: Info status border color (light theme)
+          attributes:
+            category: border
+            type: color
+        on-dark:
+          $value: '{color.purple.30}'
+          $description: Info status border color (dark theme)
+          attributes:
+            category: border
+            type: color
+      success:
+        on-light:
+          $value: '{color.green.60}'
+          $description: Success status border color (light theme)
+          attributes:
+            category: border
+            type: color
+        on-dark:
+          $value: '{color.green.40}'
+          $description: Success status border color (dark theme)
+          attributes:
+            category: border
+            type: color
\ No newline at end of file
diff --git a/tokens/color/brand.yml b/tokens/color/brand.yml
index 43ef15f..fe787f0 100644
--- a/tokens/color/brand.yml
+++ b/tokens/color/brand.yml
@@ -15,29 +15,29 @@ color:
             [Brand standards](https://www.redhat.com/en/about/brand/standards/color) page.
 
       lightest:
-        $value: '{color.red.100}'
+        $value: '{color.red.20}'
         $description: Lightest brand red
       lighter:
-        $value: '{color.red.200}'
+        $value: '{color.red.30}'
         $description: lighter brand red
       light:
-        $value: '{color.red.300}'
+        $value: '{color.red.40}'
         $description: Light brand red
 
       dark:
-        $value: '{color.red.600}'
+        $value: '{color.red.60}'
         $description: Dark brand red/Brand red hover
       darker:
-        $value: '{color.red.700}'
+        $value: '{color.red.70}'
         $description: Darker brand red
       darkest:
-        $value: '{color.red.800}'
+        $value: '{color.red.70}'
         $description: Darkest brand red
 
       on-dark:
-        $value: '{color.red.400}'
+        $value: '{color.red.50}'
         $description: Brand red on dark background
       on-light:
-        $value: '{color.red.500}'
+        $value: '{color.red.50}'
         $description: Brand red on light background
 
diff --git a/tokens/color/canvas.yaml b/tokens/color/canvas.yaml
index b2c203b..b117079 100644
--- a/tokens/color/canvas.yaml
+++ b/tokens/color/canvas.yaml
@@ -10,5 +10,5 @@ color:
       $value: '{color.white}'
       $description: Primary canvas (light theme)
     black:
-      $value: '{color.gray.90}'
+      $value: '{color.gray.95}'
       $description: Primary canvas (dark theme)
diff --git a/tokens/color/crayon/blue.yaml b/tokens/color/crayon/blue.yaml
index 28d3b23..78f843c 100644
--- a/tokens/color/crayon/blue.yaml
+++ b/tokens/color/crayon/blue.yaml
@@ -2,23 +2,25 @@ color:
   blue:
     $extensions:
       com.redhat.ux:
-        order: 301
-    50:
-      $value: '#e7f1fa'
+        order: 306
+    10:
+      $value: '#E0F0FF'
       $description: Alert - Info background
-    100:
-      $value: '#bee1f4'
+    20:
+      $value: '#B9DAFC'
       $description: Label - Filled (Blue) border color
-    200:
-      $value: '#73bcf7'
-    250:
-      $value: '#2b9af3'
+    30:
+      $value: '#92C5F9'
+      $description: Inline link (dark theme)
+    40:
+      $value: '#4394E5'
       $description: Alert - Info accent
-    400:
-      $value: '#0066cc'
+    50:
+      $value: '#0066CC'
       $description: Label - Filled (Blue) accent color
-    500:
-      $value: '#004080'
-    600:
-      $value: '#002952'
-      $description: Alert - Info title text
+    60:
+      $value: '#004D99'
+      $description: Inline link hover (light theme)
+    70:
+      $value: '#003366'
+      $description: 	Alert - Info title text
\ No newline at end of file
diff --git a/tokens/color/crayon/cyan.yml b/tokens/color/crayon/cyan.yml
deleted file mode 100644
index 7111ddf..0000000
--- a/tokens/color/crayon/cyan.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-color:
-  cyan:
-    $extensions:
-      com.redhat.ux:
-        order: 302
-    50:
-      $value: '#f2f9f9'
-      $description: Alert - Default background
-    100:
-      $value: '#a2d9d9'
-      $description: Label (Cyan) border color
-    300:
-      $value: '#009596'
-      $description: Alert - Default accent
-    400:
-      $value: '#005f60'
-      $description: Alert - Default accent
-    500:
-      $value: '#003737'
-      $description: Alert - Default title text
diff --git a/tokens/color/crayon/gold.yml b/tokens/color/crayon/gold.yml
deleted file mode 100644
index ca2f57e..0000000
--- a/tokens/color/crayon/gold.yml
+++ /dev/null
@@ -1,16 +0,0 @@
-color:
-  gold:
-    $extensions:
-      com.redhat.ux:
-        order: 303
-    50:
-      $value: '#fdf7e7'
-      $description: Alert - Warning background
-    300:
-      $value: '#f4c145'
-    400:
-      $value: '#f0ab00'
-      $description: Alert - Warning accent
-    600:
-      $value: '#795600'
-      $description: Alert - Warning title text
diff --git a/tokens/color/crayon/gray.yaml b/tokens/color/crayon/gray.yaml
index 580f5d5..3ad7fbe 100644
--- a/tokens/color/crayon/gray.yaml
+++ b/tokens/color/crayon/gray.yaml
@@ -13,52 +13,52 @@ color:
           In addition to white and black, each theme features various shades of gray.
           Be mindful of accessibility when using text or components on top of shades of gray.
 
-    '05':
+    '10':
       $value: '#F2F2F2'
       $description: Tertiary surface (light theme)
       attributes:
         type: gray
-    '10':
+    '20':
       $value: '#E0E0E0'
       $description: Secondary surface (light theme)
       attributes:
         type: gray
-    '20':
+    '30':
       $value: '#C7C7C7'
       $description: Subtle borders (light theme)
       attributes:
         type: gray
-    '30':
+    '40':
       $value: '#A3A3A3'
       $description: Subtle icon (hover state)
       attributes:
         type: gray
-    '40':
+    '50':
       $value: '#707070'
       $description: Subtle icon
       attributes:
         type: gray
-    '50':
+    '60':
       $value: '#4D4D4D'
       $description: Secondary text (light theme)
       attributes:
         type: gray
-    '60':
+    '70':
       $value: '#383838'
       $description: Tertiary surface (dark theme)
       attributes:
         type: gray
-    '70':
+    '80':
       $value: '#292929'
-      $description: 
+      $description: Alternative tertiary surface (not available for use with context provider)
       attributes:
         type: gray
-    '80':
+    '90':
       $value: '#1F1F1F'
       $description: Secondary surface (dark theme)
       attributes:
         type: gray
-    '90':
+    '95':
       $value: '#151515'
       $description: Primary surface (dark theme) or primary text (light theme)
       attributes:
@@ -68,4 +68,4 @@ color:
     $value: '#000000'
     $description: Brand black (avoid using)
     attributes:
-      type: gray
+      type: gray
\ No newline at end of file
diff --git a/tokens/color/crayon/green.yml b/tokens/color/crayon/green.yml
index 08e8532..a712a9d 100644
--- a/tokens/color/crayon/green.yml
+++ b/tokens/color/crayon/green.yml
@@ -3,15 +3,24 @@ color:
     $extensions:
       com.redhat.ux:
         order: 304
-    50:
-      $value: '#f3faf2'
-      $description: alert - success background
-    100:
-      $value: '#bde5b8'
+        description: >-
+          The green color is primarily used to indicate a success state, but it can also be used sparingly in other situations where green is needed.
+    10:
+      $value: '#E9F7DF'
+      $description: Alert - success background
+    20:
+      $value: '#D1F1BB'
       $description: Label - Filled (Green) border color
-    500:
-      $value: '#3e8635'
+    30:
+      $value: '#AFDC8F'
+    40:
+      $value: '#87BB62'
+    50:
+      $value: '#63993D'
+      $description:
+    60:
+      $value: '#3D7317'
       $description: Alert - Success accent
-    600:
-      $value: '#1e4f18'
+    70:
+      $value: '#204D00'
       $description: Alert - Success title text
diff --git a/tokens/color/crayon/orange.yml b/tokens/color/crayon/orange.yml
index 8f25c14..0a8956e 100644
--- a/tokens/color/crayon/orange.yml
+++ b/tokens/color/crayon/orange.yml
@@ -2,19 +2,23 @@ color:
   orange:
     $extensions:
       com.redhat.ux:
-        order: 305
-    50:
-      $value: '#fff6ec'
+        order: 302
+    10:
+      $value: '#FFE8CC'
       $description: Label - Filled (Orange) background color
-    100:
-      $value: '#f4b678'
+    20:
+      $value: '#FCCB8F'
+    30:
+      $value: '#F8AE54'
       $description: Label - Filled (Orange) border color
-    300:
-      $value: '#ec7a08'
+    40:
+      $value: '#F5921B'
       $description: Label - Filled (Orange) accent color
-    500:
-      $value: '#8f4700'
+    50:
+      $value: '#CA6C0F'
       $description: Label - Filled (Orange) accent color
-    700:
-      $value: '#3b1f00'
-      $description: Label - Filled (Orange) text color
+    60:
+      $value: '#9E4A06'
+    70:
+      $value: '#732E00'
+      $description: 	Label - Filled (Orange) text color
\ No newline at end of file
diff --git a/tokens/color/crayon/purple.yaml b/tokens/color/crayon/purple.yaml
index 34c34a0..8610442 100644
--- a/tokens/color/crayon/purple.yaml
+++ b/tokens/color/crayon/purple.yaml
@@ -2,15 +2,23 @@ color:
   purple:
     $extensions:
       com.redhat.ux:
-        order: 306
-    50:
-      $value: '#f2f0fc'
+        order: 307
+    10:
+      $value: '#ECE6FF'
       $description: Label - Filled (Purple) background color
-    100:
-      $value: '#cbc1ff'
-    300:
-      $value: '#a18fff'
-    500:
-      $value: '#6753ac'
-    700:
-      $value: '#1f0066'
+    20:
+      $value: '#D0C5F4'
+      $description: Inline link visited hover (dark theme)
+    30:
+      $value: '#B6A6E9'
+    40:
+      $value: '#876FD4'
+      $description: Inline link visited (dark theme)
+    50:
+      $value: '#5E40BE'
+    60:
+      $value: '#3D2785'
+      $description: Inline link visited (light theme)
+    70:
+      $value: '#21134D'
+      $description: Inline link visited hover (light theme)
\ No newline at end of file
diff --git a/tokens/color/crayon/red-orange.yaml b/tokens/color/crayon/red-orange.yaml
new file mode 100644
index 0000000..c096215
--- /dev/null
+++ b/tokens/color/crayon/red-orange.yaml
@@ -0,0 +1,22 @@
+color:
+  red-orange:
+    $extensions:
+      com.redhat.ux:
+        order: 301
+        description: >-
+          The red orange color is reserved for danger or error states. Do not use it anywhere else.
+
+    10:
+      $value: '#FFE3D9'
+    20:
+      $value: '#FBBEA8'
+    30:
+      $value: '#F89B78'
+    40:
+      $value: '#F4784A'
+    50:
+      $value: '#F0561D'
+    60:
+      $value: '#B1380B'
+    70:
+      $value: '#731F00'
\ No newline at end of file
diff --git a/tokens/color/crayon/red.yaml b/tokens/color/crayon/red.yaml
index bc3682c..5a9641c 100644
--- a/tokens/color/crayon/red.yaml
+++ b/tokens/color/crayon/red.yaml
@@ -3,30 +3,26 @@ color:
     $extensions:
       com.redhat.ux:
         order: 300
+        description: >-
+          Avoid using *any* red color token for danger or error messaging.
+    10:
+      $value: '#FCE3E3'
+      $description:
+    20:
+      $value: '#FBC5C5'
+      $description: Lightest brand red
+    30:
+      $value: '#F9A8A8'
+      $description: Lighter brand red
+    40:
+      $value: '#F56E6E'
+      $description: Light brand red
     50:
-      $value: '#faeae8'
-      $description: Alert - Critical background
-    100:
-      $value: '#fddbdb'
-      $description: Lightest red
-    200:
-      $value: '#fab6b6'
-      $description: Lighter red
-    300:
-      $value: '#f56d6d'
-      $description: Light red
-    400:
-      $value: '#ff442b'
-      $description: Brand red (dark theme)
-    500:
-      $value: '#ee0000'
-      $description: Brand red (light theme)
-    600:
-      $value: '#be0000'
-      $description: Dark red or brand red hover
-    700:
-      $value: '#8f0000'
-      $description: Darker red
-    800:
-      $value: '#5f0000'
-      $description: Darkest red
+      $value: '#EE0000'
+      $description: Brand red (light and dark theme)
+    60:
+      $value: '#A60000'
+      $description: Dark brand red
+    70:
+      $value: '#5F0000'
+      $description: Darker brand red
\ No newline at end of file
diff --git a/tokens/color/crayon/teal.yaml b/tokens/color/crayon/teal.yaml
new file mode 100644
index 0000000..3b7a927
--- /dev/null
+++ b/tokens/color/crayon/teal.yaml
@@ -0,0 +1,25 @@
+# Teal replaces cyan from RHDS Tokens 1.0
+
+color:
+  teal:
+    $extensions:
+      com.redhat.ux:
+        order: 305
+    10:
+      $value: '#DAF2F2'
+      $description: Alert - Default background
+    20:
+      $value: '#B9E5E5'
+    30:
+      $value: '#9AD8D8'
+      $description: Label (Cyan) border color
+    40:
+      $value: '#63BDBD'
+    50:
+      $value: '#37A3A3'
+      $description: Alert - Default accent
+    60:
+      $value: '#147878'
+    70:
+      $value: '#004D4D'
+      $description: Alert - Default title text
\ No newline at end of file
diff --git a/tokens/color/crayon/yellow.yaml b/tokens/color/crayon/yellow.yaml
new file mode 100644
index 0000000..da6fc13
--- /dev/null
+++ b/tokens/color/crayon/yellow.yaml
@@ -0,0 +1,24 @@
+#Yellow replaces gold from RHDS Tokens 1.0
+
+color:
+  yellow:
+    $extensions:
+      com.redhat.ux:
+        order: 303
+    10:
+      $value: '#FFF4CC'
+      $description: Alert - Warning background
+    20:
+      $value: '#FFE072'
+    30:
+      $value: '#FFCC17'
+    40:
+      $value: '#DCA614'
+      $description: 	Alert - Warning accent
+    50:
+      $value: '#B98412'
+    60:
+      $value: '#96640F'
+    70:
+      $value: '#73480B'
+      $description: Alert - Warning title text
\ No newline at end of file
diff --git a/tokens/color/icon.yml b/tokens/color/icon.yml
index 5e6e234..f01ac26 100644
--- a/tokens/color/icon.yml
+++ b/tokens/color/icon.yml
@@ -20,7 +20,7 @@ color:
 
     secondary:
       on-light:
-        $value: '{color.gray.90}'
+        $value: '{color.gray.95}'
         attributes:
           category: icon
           type: color
@@ -33,13 +33,49 @@ color:
     subtle:
       # @see https://github.com/amzn/style-dictionary/issues/716#issuecomment-943673202
       _:
-        $value: '{color.gray.40}'
+        $value: '{color.gray.50}'
         attributes:
           category: icon
           type: color
       hover:
-        $value: '{color.gray.30}'
+        $value: '{color.gray.40}'
         attributes:
           category: icon
           type: color
 
+    status:
+      danger:
+        on-light:
+          $value: '{color.red-orange.50}'
+          $description: Danger status icon color (light theme)
+        on-dark:
+          $value: '{color.red-orange.40}'
+          $description: Danger status icon color (dark theme)
+      warning:
+        on-light:
+          $value: '{color.orange.50}'
+          $description: Warning status icon color (light theme)
+        on-dark:
+          $value: '{color.orange.40}'
+          $description: Warning status icon color (dark theme)
+      default:
+        on-light:
+          $value: '{color.gray.60}'
+          $description: Default status icon color (light theme)
+        on-dark:
+          $value: '{color.gray.40}'
+          $description: Default status icon color (dark theme)
+      info:
+        on-light:
+          $value: '{color.purple.50}'
+          $description: Info status icon color (light theme)
+        on-dark:
+          $value: '{color.purple.30}'
+          $description: Info status icon color (dark theme)
+      success:
+        on-light:
+          $value: '{color.green.60}'
+          $description: Success status icon color (light theme)
+        on-dark:
+          $value: '{color.green.40}'
+          $description: Success status icon color (dark theme)
\ No newline at end of file
diff --git a/tokens/color/interactive.yaml b/tokens/color/interactive.yaml
index 793ec6e..9f63f20 100644
--- a/tokens/color/interactive.yaml
+++ b/tokens/color/interactive.yaml
@@ -9,28 +9,28 @@ color:
 
     blue:
       lightest:
-        $value: '{color.blue.100}'
+        $value: '{color.blue.20}'
         $description: Inline link hover (dark theme)
       lighter:
-        $value: '{color.blue.200}'
+        $value: '{color.blue.30}'
         $description: Inline link (dark theme)
       darker:
-        $value: '{color.blue.400}'
+        $value: '{color.blue.50}'
         $description: Inline link (light theme)
       darkest:
-        $value: '{color.blue.500}'
+        $value: '{color.blue.70}'
         $description: Inline link hover (light theme)
 
     purple:
       lightest:
-        $value: '{color.purple.100}'
+        $value: '{color.purple.10}'
         $description: Inline link visited hover (dark theme)
       lighter:
-        $value: '{color.purple.300}'
+        $value: '{color.purple.30}'
         $description: Inline link visited (dark theme)
       darker:
-        $value: '{color.purple.500}'
+        $value: '{color.purple.50}'
         $description: Inline link visited (light theme)
       darkest:
-        $value: '{color.purple.700}'
+        $value: '{color.purple.70}'
         $description: Inline link visited hover (light theme)
diff --git a/tokens/color/status.yaml b/tokens/color/status.yaml
new file mode 100644
index 0000000..1d42bd0
--- /dev/null
+++ b/tokens/color/status.yaml
@@ -0,0 +1,45 @@
+color:
+  status:
+    $extensions:
+      com.redhat.ux:
+        order: 500
+
+    danger:
+      on-light:
+        $value: '{color.red-orange.60}'
+        $description: Danger accent color (light theme)
+      on-dark:
+        $value: '{color.red-orange.40}'
+        $description: Danger accent color (dark theme)
+
+    warning:
+      on-light:
+        $value: '{color.orange.50}'
+        $description: Warning accent color (light theme)
+      on-dark:
+        $value: '{color.orange.40}'
+        $description: Warning accent color (dark theme)
+
+    default:
+      on-light:
+        $value: '{color.gray.60}'
+        $description: Default accent color (light theme)
+      on-dark:
+        $value: '{color.gray.40}'
+        $description: Default accent color (dark theme)
+
+    info:
+      on-light:
+        $value: '{color.purple.50}'
+        $description: Info accent color (light theme)
+      on-dark:
+        $value: '{color.purple.30}'
+        $description: Info accent color (dark theme)
+
+    success:
+      on-light:
+        $value: '{color.green.60}'
+        $description: Success accent color (light theme)
+      on-dark:
+        $value: '{color.green.40}'
+        $description: Success accent color (dark theme)
diff --git a/tokens/color/surface.yaml b/tokens/color/surface.yaml
index 63e6182..1c8c54a 100644
--- a/tokens/color/surface.yaml
+++ b/tokens/color/surface.yaml
@@ -8,20 +8,57 @@ color:
       $value: '{color.white}'
       $description: Primary surface (light theme)
     lighter:
-      $value: '{color.gray.05}'
+      $value: '{color.gray.10}'
       $description: Tertiary surface (light theme)
     light:
-      $value: '{color.gray.10}'
+      $value: '{color.gray.20}'
       $description: Secondary surface (light theme)
     dark:
-      $value: '{color.gray.60}'
+      $value: '{color.gray.70}'
       $description: Tertiary surface (dark theme)
     dark-alt:
-      $value: '{color.gray.70}'
+      $value: '{color.gray.80}'
       $description: Alternative tertiary surface (not available for use with context provider)
     darker:
-      $value: '{color.gray.80}'
+      $value: '{color.gray.90}'
       $description: Secondary surface (dark theme)
     darkest:
-      $value: '{color.gray.90}'
+      $value: '{color.gray.95}'
       $description: Primary surface (dark theme)
+
+    status:
+      danger:
+        on-light:
+          $value: '{color.red-orange.10}'
+          $description: Danger status surface color (light theme)
+        on-dark:
+          $value: '{color.red-orange.70}'
+          $description: Danger status surface color (dark theme)
+      warning:
+        on-light:
+          $value: '{color.orange.10}'
+          $description: Warning status surface color (light theme)
+        on-dark:
+          $value: '{color.orange.70}'
+          $description: Warning status surface color (dark theme)
+      default:
+        on-light:
+          $value: '{color.gray.10}'
+          $description: Default status surface color (light theme)
+        on-dark:
+          $value: '{color.gray.80}'
+          $description: Default status surface color (dark theme)
+      info:
+        on-light:
+          $value: '{color.purple.10}'
+          $description: Info status surface color (light theme)
+        on-dark:
+          $value: '{color.purple.60}'
+          $description: Info status surface color (dark theme)
+      success:
+        on-light:
+          $value: '{color.green.10}'
+          $description: Success status surface color (light theme)
+        on-dark:
+          $value: '{color.green.70}'
+          $description: Success status surface color (dark theme)
diff --git a/tokens/color/text.yaml b/tokens/color/text.yaml
index 4f0654c..b3c0d6a 100644
--- a/tokens/color/text.yaml
+++ b/tokens/color/text.yaml
@@ -28,7 +28,7 @@ color:
 
     primary:
       on-light:
-        $value: '{color.gray.90}'
+        $value: '{color.gray.95}'
         $description: Primary text color for light theme
         attributes:
           category: typography
@@ -41,26 +41,26 @@ color:
           type: color
     secondary:
       on-light:
-        $value: '{color.gray.50}'
+        $value: '{color.gray.60}'
         $description: Secondary text color for light theme
         attributes:
           category: typography
           type: color
       on-dark:
-        $value: '{color.gray.20}'
+        $value: '{color.gray.30}'
         $description: Secondary text color for dark theme
         attributes:
           category: typography
           type: color
     brand:
       on-light:
-        $value: '{color.red.500}'
+        $value: '{color.brand.red.on-light}'
         $description: Brand text color for light theme
         attributes:
           category: typography
           type: color
       on-dark:
-        $value: '{color.red.400}'
+        $value: '{color.brand.red.on-dark}'
         $description: Brand text color for dark theme
         attributes:
           category: typography

From 4fe57b0ad7675025cd9e3af3e0767e87c1482315 Mon Sep 17 00:00:00 2001
From: marionnegp <mapatel@redhat.com>
Date: Thu, 7 Mar 2024 14:23:46 -0500
Subject: [PATCH 5/5] feat: add light theme syntax tokens

---
 tokens/color/syntax.yaml | 152 ++++++++++++++++-----------------------
 1 file changed, 60 insertions(+), 92 deletions(-)

diff --git a/tokens/color/syntax.yaml b/tokens/color/syntax.yaml
index fab09ba..9221002 100644
--- a/tokens/color/syntax.yaml
+++ b/tokens/color/syntax.yaml
@@ -5,129 +5,97 @@ color:
         heading: Syntax Highlighting
         descriptionFile: syntax.md
 
-    background:
-      light:
-        $value: '{color.black.150}'
-      dark:
-        $value: '{color.black.800}'
-
-    color:
-      light:
-        $value: '{color.black.900}'
-      dark:
-        $value: '{color.black.300}'
+    default:
+      on-light:
+        $value: '{color.gray.95}'
+        $description: 
 
-    boolean:
+    background:
       on-light:
-        $value: '{color.orange.500}'
-      on-dark:
-        $value: '{color.orange.300}'
+        $value: '{color.gray.10}'
+        $description: 
 
-    title:
-      $extensions:
-        com.prismjs:
-          name: class-name
+    selected-text-background:
       on-light:
-        $value: '{color.purple.500}'
-      on-dark:
-        $value: '{color.gold.300}'
+        $value: '{color.blue.10}'
+        $description: 
 
-    constant:
+    comment:
       on-light:
-        $value: '{color.purple.500}'
+        $value: '{color.gray.60}'
+        $description: 
 
-    function:
+    property:
       on-light:
-        $value: '{color.red.500}'
+        $value: '{color.purple.50}'
+        $description: 
 
     keyword:
       on-light:
-        $value: '{color.magenta.500}'
-      on-dark:
-        $value: '{color.purple.300}'
+        $value: '{color.blue.60}'
+        $description: 
 
-    number:
+    tag:
       on-light:
-        $value: '{color.orange.500}'
-      on-dark:
-        $value: '{color.orange.300}'
+        $value: '{color.purple.50}'
+        $description: 
 
-    operator:
+    selector:
       on-light:
-        $value: '{color.cyan.500}'
+        $value: '{color.teal.60}'
+        $description: 
 
-    selector-tag:
+    boolean:
       on-light:
-        $value: '{color.red.600}'
-      on-dark:
-        $value: '{color.red.400}'
+        $value: '{color.purple.50}'
+        $description: 
 
-    built_in:
-      on-light:
-        $value: '{color.blue.500}'
-      on-dark:
-        $value: '{color.blue.100}'
-    property:
+    constant:
       on-light:
-        $value: '{color.blue.500}'
-      on-dark:
-        $value: '{color.black.300}'
+        $value: '{color.purple.50}'
+        $description: 
 
     punctuation:
       on-light:
-        $value: '{color.black.900}'
-      on-dark:
-        $value: '{color.black.300}'
+        $value: '{color.gray.60}'
+        $description: 
 
-    literal:
-      on-light:
-        $value: '{color.orange.500}'
-      on-dark:
-        $value: '{color.orange.300}'
-    regex:
+    number:
       on-light:
-        $value: '{color.orange.500}'
+        $value: '{color.purple.50}'
+        $description: 
 
-    symbol:
+    attribute:
       on-light:
-        $value: '{color.green.500}'
+        $value: '{color.teal.60}'
+        $description: 
 
-    tag:
-      on-light:
-        $value: '{color.black.600}'
-      on-dark:
-        $value: '{color.black.500}'
-    name:
+    string:
       on-light:
-        $value: '{color.red.600}'
-      on-dark:
-        $value: '{color.red.400}'
-    meta:
+        $value: '{color.teal.60}'
+        $description: 
+
+    symbol:
       on-light:
-        $value: '{color.blue.500}'
-      on-dark:
-        $value: '{color.blue.100}'
-    comment:
+        $value: '{color.purple.50}'
+        $description: 
+
+    variable:
       on-light:
-        $value: '{color.black.600}'
-      on-dark:
-        $value: '{color.black.500}'
-    attr:
+        $value: '{color.orange.60}'
+        $description: 
+
+    operator:
       on-light:
-        $value: '{color.orange.500}'
-      on-dark:
-        $value: '{color.orange.300}'
-    string:
+        $value: '{color.yellow.60}'
+        $description: 
+
+    function:
       on-light:
-        $value: '{color.green.500}'
-      on-dark:
-        $value: '{color.light-green.400}'
+        $value: '{color.red.60}'
+        $description: 
 
-    attribute:
-      on-dark:
-        $value: '{color.blue.100}'
-    variable:
+    regex:
       on-light:
-        $value: '{color.red.600}'
-      on-dark:
-        $value: '{color.red.400}'
+        $value: '{color.orange.60}'
+        $description: 
\ No newline at end of file