From d4333d542e3ced0358afb492b1329cfb1af1b0e7 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 11 Jan 2023 10:52:33 +0200 Subject: [PATCH] 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 @@ + @@ -62,6 +63,7 @@

Contents

  • Color
  • Box Shadow
  • Typography
    • +
  • Syntax
  • Borders
  • Opacity
  • Spacers
    • @@ -123,10 +125,11 @@

    Overview#

    {% 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 + + + + HTML + + + +
    +

    Tags

    +
    +
    +

    Text

    +
    + + +``` + +```typescript +@customElement('rh-jazz-hands') +export class RhJazzHands extends LitElement { + @colorContextConsumer() private on: ColorTheme = 'light'; + + render() { + const { on } = this; + return html` + + `; + } +} +``` + +```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}' +