feat: syntax tokens

build.js

@@ -38,6 +38,8 @@ export function build() {
     .registerTransformGroup(TransformGroups.js)
     .registerTransformGroup(TransformGroups.sketch)
     .registerFormat(Formats.litCss)
+    .registerFormat(Formats.highlightjsCss)
+    .registerFormat(Formats.prismCss)
     .registerFormat(Formats.mapEs)
     .registerFormat(Formats.mapCjs)
     .registerFormat(Formats.metaMapEs)
@@ -60,12 +62,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;

docs/assets/styles.css

@@ -0,0 +1,22 @@
+#syntax .description {
+  padding: var(--rh-space-lg, 16px);
+  display: flex;
+  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);
+}

docs/assets/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;

docs/assets/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';
 

docs/index.html

@@ -15,6 +15,10 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;500;700&family=Noto+Sans+JP:wght@300;500;700&family=Noto+Sans+KR:wght@300;500;700&family=Noto+Sans+Malayalam:wght@300;500;700&family=Noto+Sans+SC:wght@300;500;700&family=Noto+Sans+TC:wght@300;500;700&family=Noto+Sans+Tamil:wght@300;500;700&family=Noto+Sans+Thai:wght@300;500;700&display=swap"> 
     <link rel="stylesheet" href="https://ga.jspm.io/npm:@rhds/[email protected]/elements/rh-footer/rh-footer-lightdom.css">
     <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">
+    <link rel="stylesheet" href="/assets/highlightjs.css">
     <link rel="stylesheet" href="/assets/tokens.css">
 
     <script type="importmap">{{ importMap | dump | safe }}</script>
@@ -52,6 +56,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>
@@ -113,10 +118,13 @@ <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 = ['line-height', 'color.text'] %}
+
+      {% category path = 'color.syntax' %}
+
       {% category path = 'border',
                   include = 'color.border' %}
       {% category path = 'opacity' %}

eleventy.config.cjs

@@ -10,12 +10,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',
     ]);

lib/actions.js

@@ -147,7 +147,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) {
@@ -156,7 +156,7 @@ function writeDescription(parent) {
   }
   for (const value of Object.values(parent)) {
     if (typeof value === 'object' && value) {
-      writeDescription(value);
+      mutateTokensAddingDescriptions(value);
     }
   }
 }
@@ -165,7 +165,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);
   }
 };

lib/formats.js

@@ -3,3 +3,5 @@ export * from './formats/map.js';
 export * from './formats/modules.js';
 export * from './formats/docs.js';
 export * from './formats/editor.js';
+export * from './formats/highlightjs.js';
+export * from './formats/prism.js';

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');
+  },
+};

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 => `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'),
+};

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');
@@ -25,6 +33,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';