feat: syntax tokens

RedHat-UX · Jan 26, 2023 · d4333d5 · d4333d5
1 parent b4df78c
commit d4333d5
Show file tree

Hide file tree

Showing 9 changed files with 266 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}'
+