├── .nvmrc
├── lib
    ├── preprocessors.ts
    ├── rename-cjs.ts
    ├── transforms.ts
    ├── formats
    │   ├── editor.ts
    │   ├── editor
    │   │   ├── lib.ts
    │   │   ├── textmate.ts
    │   │   ├── vscode.ts
    │   │   ├── nvim-colorizer.ts
    │   │   └── hexokinase.ts
    │   ├── docs.ts
    │   ├── lit.ts
    │   ├── rhds.ts
    │   ├── modules.ts
    │   └── map.ts
    ├── actions.ts
    ├── formats.ts
    ├── file-header.ts
    ├── transforms
    │   ├── px-numeric.ts
    │   ├── media.ts
    │   ├── remToPx.ts
    │   └── color.ts
    ├── markdown.ts
    ├── preprocessors
    │   ├── value.ts
    │   └── split-colors.ts
    ├── actions
    │   ├── compile.ts
    │   ├── copy-assets.ts
    │   ├── description-file.ts
    │   └── write-vsix-manifest.ts
    ├── transform-groups.ts
    ├── filters.ts
    ├── predicates.ts
    └── release.ts
├── plugins
    ├── stylelint.ts
    ├── stylelint
    │   ├── rules.ts
    │   ├── README.md
    │   └── rules
    │   │   ├── no-unknown-token-name.ts
    │   │   ├── deprecated.ts
    │   │   └── token-values.ts
    └── stylelint.cts
├── tokens
    ├── animation.yml
    ├── font
    │   ├── letter-spacing.yml
    │   ├── font.yml
    │   ├── line-height.yml
    │   ├── weight.yml
    │   ├── size.yml
    │   └── family.yml
    ├── color
    │   ├── brand.md
    │   ├── color.yml
    │   ├── canvas.yaml
    │   ├── crayon
    │   │   ├── red-orange.yaml
    │   │   ├── yellow.yaml
    │   │   ├── teal.yaml
    │   │   ├── orange.yml
    │   │   ├── purple.yaml
    │   │   ├── blue.yaml
    │   │   ├── green.yml
    │   │   ├── red.yaml
    │   │   └── gray.yaml
    │   ├── interactive.md
    │   ├── brand.yml
    │   ├── accent.yml
    │   ├── text.yaml
    │   ├── status.yaml
    │   ├── surface.yaml
    │   ├── icon.yml
    │   └── border.yml
    ├── media.md
    ├── opacity.yml
    ├── border.yml
    ├── shadow.yml
    ├── length
    │   ├── length.yaml
    │   ├── icon.yml
    │   └── space.yaml
    ├── media.yml
    ├── breakpoints.md
    └── breakpoints.yml
├── tsconfig.json
├── .changeset
    └── config.json
├── .gitignore
├── tsconfig.cjs.json
├── docs
    ├── assets
    │   ├── breakpoints
    │   │   ├── device-rh-breakpoint-xs.svg
    │   │   ├── device-rh-breakpoint-2xs-max.svg
    │   │   ├── device-rh-breakpoint-2xl.svg
    │   │   ├── device-rh-breakpoint-xl-max.svg
    │   │   ├── device-rh-breakpoint-xl.svg
    │   │   ├── device-rh-breakpoint-lg-max.svg
    │   │   ├── device-rh-breakpoint-sm.svg
    │   │   ├── device-rh-breakpoint-xs-max.svg
    │   │   ├── device-rh-breakpoint-md.svg
    │   │   ├── device-rh-breakpoint-sm-max.svg
    │   │   ├── device-rh-breakpoint-lg.svg
    │   │   └── device-rh-breakpoint-md-max.svg
    │   ├── script.js
    │   └── demo-styles.css
    └── index.html
├── tsconfig.output.json
├── .github
    └── workflows
    │   ├── test.yml
    │   ├── figma.yml
    │   └── release.yml
├── eslint.config.js
├── LICENSE
├── eleventy.config.ts
├── test
    ├── stylelint.token-values.test.ts
    └── stylelint.no-unknown-token-name.test.ts
├── CONTRIBUTING.md
├── platforms.yaml
├── README.md
└── package.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | v24.0.1
2 | 


--------------------------------------------------------------------------------
/lib/preprocessors.ts:
--------------------------------------------------------------------------------
1 | export * from './preprocessors/value.ts';
2 | export * from './preprocessors/split-colors.ts';
3 | 


--------------------------------------------------------------------------------
/lib/rename-cjs.ts:
--------------------------------------------------------------------------------
1 | import { glob, rename } from 'node:fs/promises';
2 | 
3 | for await (const file of glob('./plugins/cjs/**/*.js')) {
4 |   await rename(file, file.replace('.js', '.cjs'));
5 | }
6 | 


--------------------------------------------------------------------------------
/lib/transforms.ts:
--------------------------------------------------------------------------------
1 | export * from './transforms/color.ts';
2 | export * from './transforms/remToPx.ts';
3 | export * from './transforms/px-numeric.ts';
4 | export * from './transforms/media.ts';
5 | 


--------------------------------------------------------------------------------
/lib/formats/editor.ts:
--------------------------------------------------------------------------------
1 | export * from './editor/vscode.ts';
2 | export * from './editor/textmate.ts';
3 | export * from './editor/hexokinase.ts';
4 | export * from './editor/nvim-colorizer.ts';
5 | 
6 | 


--------------------------------------------------------------------------------
/lib/actions.ts:
--------------------------------------------------------------------------------
1 | export * from './actions/compile.ts';
2 | export * from './actions/copy-assets.ts';
3 | export * from './actions/description-file.ts';
4 | export * from './actions/write-vsix-manifest.ts';
5 | 


--------------------------------------------------------------------------------
/plugins/stylelint.ts:
--------------------------------------------------------------------------------
1 | import rules from './stylelint/rules.js';
2 | import stylelint from 'stylelint';
3 | 
4 | export default rules.map(ruleFunction =>
5 |   stylelint.createPlugin(ruleFunction.ruleName, ruleFunction));
6 | 


--------------------------------------------------------------------------------
/tokens/animation.yml:
--------------------------------------------------------------------------------
 1 | animation:
 2 |   speed:
 3 |     $type: duration
 4 |     $value: 0.3s
 5 |   timing:
 6 |     $type: cubicBezier
 7 |     $value:
 8 |       - 0.465
 9 |       - 0.183
10 |       - 0.153
11 |       - 0.946
12 | 


--------------------------------------------------------------------------------
/lib/formats.ts:
--------------------------------------------------------------------------------
1 | export * from './formats/lit.ts';
2 | export * from './formats/map.ts';
3 | export * from './formats/modules.ts';
4 | export * from './formats/docs.ts';
5 | export * from './formats/editor.ts';
6 | export * from './formats/rhds.ts';
7 | 


--------------------------------------------------------------------------------
/tokens/font/letter-spacing.yml:
--------------------------------------------------------------------------------
1 | letter-spacing:
2 |   body:
3 |     text:
4 |       $value: 0.0125rem
5 |       $description: Extra letter spacing for small body text sizes
6 |       attributes:
7 |         category: typography
8 |         type: letter-spacing
9 | 


--------------------------------------------------------------------------------
/tokens/font/font.yml:
--------------------------------------------------------------------------------
1 | font:
2 |   $extensions:
3 |     com.redhat.ux:
4 |       heading: Typography
5 |       description: >-
6 |         To learn more about how to use text, visit the
7 |         [typography page](https://ux.redhat.com/foundations/typography).
8 | 


--------------------------------------------------------------------------------
/plugins/stylelint/rules.ts:
--------------------------------------------------------------------------------
 1 | import TokenValues from './rules/token-values.js';
 2 | import NoUnknownTokenName from './rules/no-unknown-token-name.js';
 3 | import Deprecated from './rules/deprecated.js';
 4 | 
 5 | export default [
 6 |   TokenValues,
 7 |   NoUnknownTokenName,
 8 |   Deprecated,
 9 | ];
10 | 


--------------------------------------------------------------------------------
/tokens/color/brand.md:
--------------------------------------------------------------------------------
1 | The primary brand color is red, it brings boldness and helps guide the eye or highlight important information.
2 | 
3 | To learn more about how the red color is used, visit the [Brand standards][standards] page.
4 | 
5 | [standards]: https://www.redhat.com/en/about/brand/standards/color
6 | 
7 | 


--------------------------------------------------------------------------------
/tokens/color/color.yml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   $extensions:
 4 |     com.redhat.ux:
 5 |       heading: Global color
 6 |       description: >-
 7 |         Color helps create consistent experiences across web properties. Various colors are
 8 |         available in two themes, light and dark.
 9 | 
10 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "moduleResolution": "nodenext",
 4 |     "module": "nodenext",
 5 |     "skipLibCheck": true,
 6 |     "noEmit": true,
 7 |     "resolveJsonModule": true,
 8 |     "allowImportingTsExtensions": true,
 9 |     "rewriteRelativeImportExtensions": true
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json",
 3 |   "changelog": "@changesets/cli/changelog",
 4 |   "commit": false,
 5 |   "fixed": [],
 6 |   "linked": [],
 7 |   "access": "restricted",
 8 |   "baseBranch": "main",
 9 |   "updateInternalDependencies": "patch",
10 |   "ignore": []
11 | }


--------------------------------------------------------------------------------
/tokens/media.md:
--------------------------------------------------------------------------------
 1 | For use in templating systems and JavaScript modules. We recommend against 
 2 | importing tokens
 3 | directly into components. These are directly derived from [breakpoints](#breakpoints).
 4 | 
 5 | ```html
 6 | <link rel="stylesheet"
 7 |       href="large-screen.css"
 8 |       media="{{ tokens.get('--rh-media-lg') }}"
 9 | ```
10 | 


--------------------------------------------------------------------------------
/lib/file-header.ts:
--------------------------------------------------------------------------------
 1 | import type { FileHeader } from 'style-dictionary/types';
 2 | 
 3 | /**
 4 |  * Copy the repo license (MIT) into file headers
 5 |  * @param defaultMessage previous headers
 6 |  */
 7 | export const legal: FileHeader =
 8 |   defaultMessage => [
 9 |     ...defaultMessage,
10 |     '',
11 |     `@license Copyright (c) 2022 Red Hat UX MIT License`,
12 |   ];
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | .DS_Store
 4 | .wireit
 5 | 
 6 | build/**/*
 7 | 
 8 | editor/**/*
 9 | js/**/*
10 | json/**/*
11 | css/**/*
12 | scss/**/*
13 | design/**/*
14 | plugins/cjs
15 | plugins/**/*.cjs
16 | plugins/**/*.cjs.map
17 | plugins/**/*.d.cts
18 | plugins/**/*.js
19 | plugins/**/*.js.map
20 | plugins/**/*.d.ts
21 | test/**/*.js
22 | test/**/*.js.map
23 | test/**/*.d.ts
24 | 


--------------------------------------------------------------------------------
/tsconfig.cjs.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": [
 3 |     "./plugins"
 4 |   ],
 5 |   "extends": "./tsconfig.output.json",
 6 |   "compilerOptions": {
 7 |     "esModuleInterop": true,
 8 |     "outDir": "./plugins/cjs",
 9 |     "module": "CommonJS",
10 |     "moduleResolution": "Node",
11 |     "lib": [
12 |       "es2023"
13 |     ],
14 |     "paths": {
15 |       "@rhds/tokens": [
16 |         "./js/tokens.cjs"
17 |       ]
18 |     }
19 |   },
20 | }
21 | 


--------------------------------------------------------------------------------
/lib/transforms/px-numeric.ts:
--------------------------------------------------------------------------------
 1 | import type { Transform } from 'style-dictionary/types';
 2 | 
 3 | /**
 4 |  * Add px values as numbers at the `px` attribute
 5 |  */
 6 | export const pxNumeric: Transform = {
 7 |   name: 'attribute/px',
 8 |   type: 'attribute',
 9 |   filter: token => token.$value?.endsWith?.('px'),
10 |   transform(token) {
11 |     const px = parseFloat(token.$value);
12 |     return { ...token.attributes, px };
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-xs.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 420 708" xmlns="http://www.w3.org/2000/svg">
2 |     <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="82" ry="6.82"/>
3 |     <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="50" ry="6.82"/>
4 |     <circle fill="#fff" cx="215" cy="666" r="25"/>
5 | </svg>
6 | 
7 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-2xs-max.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 420 708" xmlns="http://www.w3.org/2000/svg">
2 |     <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="82" ry="6.82"/>
3 |     <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="50" ry="6.82"/>
4 |     <circle fill="#fff" cx="215" cy="666" r="25"/>
5 | </svg>
6 | 
7 | 


--------------------------------------------------------------------------------
/tsconfig.output.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": [
 3 |     "./css/",
 4 |     "./js/",
 5 |     "./plugins/",
 6 |     "./test/"
 7 |   ],
 8 |   "compilerOptions": {
 9 |     "moduleResolution": "nodenext",
10 |     "rewriteRelativeImportExtensions": true,
11 |     "resolveJsonModule": true,
12 |     "allowImportingTsExtensions": true,
13 |     "module": "nodenext",
14 |     "skipLibCheck": true,
15 |     "declaration": true,
16 |     "inlineSourceMap": true,
17 |   },
18 | }
19 | 


--------------------------------------------------------------------------------
/lib/formats/editor/lib.ts:
--------------------------------------------------------------------------------
 1 | import type { DesignToken } from 'style-dictionary/types';
 2 | 
 3 | import { isThemeColorToken } from '../../predicates.ts';
 4 | import { getLightDarkValue } from '../../transforms.ts';
 5 | 
 6 | /**
 7 |  * @param token
 8 |  * @returns textmate snippet format first stop containing fallback value
 9 |  */
10 | export function getValueFallback(token: DesignToken): string {
11 |   return `\${1:, ${isThemeColorToken(token) ? getLightDarkValue(token) : token.$value}}`;
12 | }
13 | 
14 | 


--------------------------------------------------------------------------------
/tokens/color/canvas.yaml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   canvas:
 4 |     $extensions:
 5 |       com.redhat.ux:
 6 |         order: 200
 7 |         description: >-
 8 |           The canvas tokens should be used for page backgrounds only. To add a background to contained sections, use a surface token.
 9 | 
10 |     white:
11 |       $value: '{color.white}'
12 |       $description: Primary canvas (light theme)
13 |     black:
14 |       $value: '{color.gray.95}'
15 |       $description: Primary canvas (dark theme)
16 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-2xl.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1468 1143.05" xmlns="http://www.w3.org/2000/svg">
2 |     <g transform="translate(534.2 -521.42)">
3 |         <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="1368" height="800" x="-484.21" y="571.42" ry="12.83"/>
4 |         <rect fill="#000" width="297.09" height="202.29" x="51.25" y="1397.37" ry="12.17"/>
5 |         <rect fill="#000" width="706.06" height="69.01" x="-153.24" y="1595.47" ry="12.17"/>
6 |     </g>
7 | </svg>
8 | 
9 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-xl-max.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1468 1143.05" xmlns="http://www.w3.org/2000/svg">
2 |     <g transform="translate(534.2 -521.42)">
3 |         <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="1368" height="800" x="-484.21" y="571.42" ry="12.83"/>
4 |         <rect fill="#000" width="297.09" height="202.29" x="51.25" y="1397.37" ry="12.17"/>
5 |         <rect fill="#000" width="706.06" height="69.01" x="-153.24" y="1595.47" ry="12.17"/>
6 |     </g>
7 | </svg>
8 | 
9 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-xl.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1292.24 1100.76" xmlns="http://www.w3.org/2000/svg">
2 |     <g transform="translate(536.97 -518.66)">
3 |         <rect fill="#fff" stroke="#000" stroke-width="92.2352" paint-order="stroke markers fill" width="1200" height="768" x="-490.85" y="564.78" ry="11.21"/>
4 |         <rect fill="#000" width="297.09" height="202.29" x="-39.4" y="1352.32" ry="12.17"/>
5 |         <rect fill="#000" width="706.06" height="69.01" x="-243.88" y="1550.42" ry="12.17"/>
6 |     </g>
7 | </svg>
8 | 
9 | 


--------------------------------------------------------------------------------
/lib/markdown.ts:
--------------------------------------------------------------------------------
 1 | import markdownit from 'markdown-it';
 2 | import hljs from 'highlight.js';
 3 | 
 4 | export const md = markdownit({
 5 |   html: true,
 6 |   linkify: true,
 7 |   highlight(str, language) {
 8 |     if (hljs.getLanguage(language)) {
 9 |       try {
10 |         return hljs.highlight(str, { language }).value;
11 |       } catch (e) {
12 |         // don't swallow error output
13 |         // eslint-disable-next-line no-console
14 |         console.error(e);
15 |         return str;
16 |       }
17 |     }
18 |   },
19 | });
20 | 
21 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-lg-max.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 1292.24 1100.76" xmlns="http://www.w3.org/2000/svg">
2 |     <g transform="translate(536.97 -518.66)">
3 |         <rect fill="#fff" stroke="#000" stroke-width="92.2352" paint-order="stroke markers fill" width="1200" height="768" x="-490.85" y="564.78" ry="11.21"/>
4 |         <rect fill="#000" width="297.09" height="202.29" x="-39.4" y="1352.32" ry="12.17"/>
5 |         <rect fill="#000" width="706.06" height="69.01" x="-243.88" y="1550.42" ry="12.17"/>
6 |     </g>
7 | </svg>
8 | 
9 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-sm.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 708 420" xmlns="http://www.w3.org/2000/svg">
2 |     <g transform="rotate(90 354 354)">
3 |         <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="82" ry="6.82"/>
4 |         <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="50" ry="6.82"/>
5 |         <circle fill="#fff" paint-order="stroke markers fill" cx="215" cy="666" r="25"/>
6 |     </g>
7 | </svg>
8 | 
9 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-xs-max.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 708 420" xmlns="http://www.w3.org/2000/svg">
2 |     <g transform="rotate(90 354 354)">
3 |         <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="82" ry="6.82"/>
4 |         <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="50" ry="6.82"/>
5 |         <circle fill="#fff" paint-order="stroke markers fill" cx="215" cy="666" r="25"/>
6 |     </g>
7 | </svg>
8 | 
9 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: Test
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     types:
 6 |       - opened
 7 |       - reopened
 8 |       - synchronize
 9 |       - ready_for_review
10 |       - auto_merge_enabled
11 |   push:
12 |     branches:
13 |       - main
14 | 
15 | jobs:
16 |   test:
17 |     runs-on: ubuntu-latest
18 |     steps:
19 |       - uses: actions/checkout@v3
20 |       - uses: actions/setup-node@v3
21 |         with:
22 |           node-version-file: .nvmrc
23 |           cache: npm
24 | 
25 |       - run: npm ci --prefer-offline
26 |       - run: npm test
27 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import globals from 'globals';
 2 | import pfeconfig from '@patternfly/eslint-config-elements';
 3 | 
 4 | export default [
 5 |   ...pfeconfig,
 6 |   {
 7 |     ignores: [
 8 |       '**/*.ya?ml',
 9 |       '**/*.yml',
10 |       '**/*.yaml',
11 |       '**/*.js',
12 |       'js/*.ts',
13 |       '!docs/**/*.js',
14 |       '**/*.css',
15 |       '**/*.svg',
16 |       '**/*.md',
17 |     ],
18 |   },
19 |   {
20 |     languageOptions: {
21 |       globals: {
22 |         ...globals.node,
23 |         globalThis: false,
24 |       },
25 |     },
26 |   },
27 | ];
28 | 


--------------------------------------------------------------------------------
/tokens/color/crayon/red-orange.yaml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   red-orange:
 4 |     $extensions:
 5 |       isCrayon: true
 6 |       com.redhat.ux:
 7 |         order: 301
 8 |         description: >-
 9 |           The red orange color is reserved for danger or error states. Do not use it anywhere else.
10 | 
11 |     10:
12 |       $value: '#FFE3D9'
13 |     20:
14 |       $value: '#FBBEA8'
15 |     30:
16 |       $value: '#F89B78'
17 |     40:
18 |       $value: '#F4784A'
19 |     50:
20 |       $value: '#F0561D'
21 |     60:
22 |       $value: '#B1380B'
23 |     70:
24 |       $value: '#731F00'
25 | 


--------------------------------------------------------------------------------
/tokens/font/line-height.yml:
--------------------------------------------------------------------------------
 1 | line-height:
 2 |   $extensions:
 3 |     com.redhat.ux:
 4 |       heading: Line height
 5 |       example: Line<br/>height
 6 | 
 7 |   heading:
 8 |     $value: 1.3
 9 |     $description: Line height for headings
10 |     attributes:
11 |       category: typography
12 |       type: line-height
13 |   body-text:
14 |     $value: 1.5
15 |     $description: Line height for body text
16 |     attributes:
17 |       category: typography
18 |       type: line-height
19 |   code:
20 |     $value: 1.5
21 |     $description: Line height for code
22 |     attributes:
23 |       category: typography
24 |       type: line-height
25 | 


--------------------------------------------------------------------------------
/lib/preprocessors/value.ts:
--------------------------------------------------------------------------------
 1 | import type { PreprocessedTokens } from 'style-dictionary';
 2 | import type { Preprocessor } from 'style-dictionary/types';
 3 | 
 4 | export const $value: Preprocessor = {
 5 |   name: '$value',
 6 |   preprocessor(dictionary) {
 7 |     function addValueFrom$value(slice: PreprocessedTokens) {
 8 |       Object.values(slice).forEach(kiddo => {
 9 |         if (typeof kiddo === 'object') {
10 |           addValueFrom$value(kiddo);
11 |         }
12 |       });
13 | 
14 |       if ('$value' in slice) {
15 |         slice.value = slice.$value;
16 |       }
17 | 
18 |       return slice;
19 |     }
20 | 
21 |     return addValueFrom$value(dictionary);
22 |   },
23 | };
24 | 


--------------------------------------------------------------------------------
/lib/actions/compile.ts:
--------------------------------------------------------------------------------
 1 | import type { Action } from 'style-dictionary/types';
 2 | 
 3 | import { $ } from 'execa';
 4 | 
 5 | import { rm } from 'node:fs/promises';
 6 | 
 7 | const rel = (path: string) => new URL(path, import.meta.url);
 8 | 
 9 | const files = [
10 |   rel('../../js/tokens.d.ts'),
11 |   rel('../../js/meta.d.ts'),
12 |   rel('../../plugins/stylelint.d.cts'),
13 | ];
14 | 
15 | /**
16 |  * Write declaration file for JS token map
17 |  */
18 | export const compile: Action = {
19 |   name: 'compile',
20 |   async do() {
21 |     await $`tsc -p tsconfig.output.json`;
22 |   },
23 |   async undo() {
24 |     for (const url of files) {
25 |       await rm(url);
26 |     }
27 |   },
28 | };
29 | 


--------------------------------------------------------------------------------
/tokens/color/crayon/yellow.yaml:
--------------------------------------------------------------------------------
 1 | #Yellow replaces gold from RHDS Tokens 1.0
 2 | 
 3 | color:
 4 |   $type: color
 5 |   yellow:
 6 |     $extensions:
 7 |       isCrayon: true
 8 |       com.redhat.ux:
 9 |         order: 303
10 |     10:
11 |       $value: '#FFF4CC'
12 |       $description: Alert - Warning background
13 |     20:
14 |       $value: '#FFE072'
15 |     30:
16 |       $value: '#FFCC17'
17 |     40:
18 |       $value: '#DCA614'
19 |       $description: 	Alert - Warning accent
20 |     50:
21 |       $value: '#B98412'
22 |     60:
23 |       $value: '#96640F'
24 |     70:
25 |       $value: '#73480B'
26 |       $description: Alert - Warning title text
27 |     80:
28 |       $value: '#54330B'
29 | 


--------------------------------------------------------------------------------
/lib/formats/docs.ts:
--------------------------------------------------------------------------------
 1 | import type { Format } from 'style-dictionary/types';
 2 | import type { UserConfig } from '@11ty/eleventy';
 3 | 
 4 | import { createRequire } from 'node:module';
 5 | 
 6 | /**
 7 |  * Generates a single-file web page to demonstrate token values
 8 |  */
 9 | export const docsPage: Format = {
10 |   name: 'html/docs',
11 |   format() {
12 |     const require = createRequire(import.meta.url);
13 |     const Eleventy = require('@11ty/eleventy');
14 |     const eleventy = new Eleventy('.', 'build', {
15 |       config(eleventyConfig: UserConfig) {
16 |         eleventyConfig.addPlugin(require('../../plugins/11ty.cjs'));
17 |       },
18 |     });
19 |     eleventy.write();
20 |   },
21 | };
22 | 


--------------------------------------------------------------------------------
/lib/transforms/media.ts:
--------------------------------------------------------------------------------
 1 | import type { Transform } from 'style-dictionary/types';
 2 | 
 3 | import * as Predicates from '../predicates.ts';
 4 | 
 5 | /**
 6 |  * Transforms which build media queries
 7 |  */
 8 | export const mediaQuery: Transform = {
 9 |   name: 'media-query/css',
10 |   type: 'value',
11 |   transitive: true,
12 |   filter: Predicates.isMediaQuery,
13 |   transform(token) {
14 |     const minWidth = token.$value['min-width'];
15 |     const maxWidth = token.$value['max-width'];
16 |     const string = [
17 |       minWidth && `(min-width: ${minWidth})`,
18 |       maxWidth && `(max-width: ${maxWidth})`,
19 |     ].filter(Boolean).join(' and ');
20 |     token.$value = string;
21 |     return string;
22 |   },
23 | };
24 | 
25 | 


--------------------------------------------------------------------------------
/tokens/color/crayon/teal.yaml:
--------------------------------------------------------------------------------
 1 | # Teal replaces cyan from RHDS Tokens 1.0
 2 | 
 3 | color:
 4 |   $type: color
 5 |   teal:
 6 |     $extensions:
 7 |       isCrayon: true
 8 |       com.redhat.ux:
 9 |         order: 305
10 |     10:
11 |       $value: '#DAF2F2'
12 |       $description: Alert - Default background
13 |     20:
14 |       $value: '#B9E5E5'
15 |     30:
16 |       $value: '#9AD8D8'
17 |       $description: Label (Cyan) border color
18 |     40:
19 |       $value: '#63BDBD'
20 |     50:
21 |       $value: '#37A3A3'
22 |       $description: Alert - Default accent
23 |     60:
24 |       $value: '#147878'
25 |     70:
26 |       $value: '#004D4D'
27 |       $description: Alert - Default title text
28 |     80:
29 |       $value: '#003333'
30 | 


--------------------------------------------------------------------------------
/tokens/opacity.yml:
--------------------------------------------------------------------------------
 1 | opacity:
 2 |   0:
 3 |     $value: 0%
 4 |     $description: 0% opacity
 5 |   10:
 6 |     $value: 10%
 7 |     $description: 10% opacity
 8 |   20:
 9 |     $value: 20%
10 |     $description: 20% opacity
11 |   30:
12 |     $value: 30%
13 |     $description: 30% opacity
14 |   40:
15 |     $value: 40%
16 |     $description: 40% opacity
17 |   50:
18 |     $value: 50%
19 |     $description: 50% opacity
20 |   60:
21 |     $value: 60%
22 |     $description: 60% opacity
23 |   70:
24 |     $value: 70%
25 |     $description: 70% opacity
26 |   80:
27 |     $value: 80%
28 |     $description: 80% opacity
29 |   90:
30 |     $value: 90%
31 |     $description: 90% opacity
32 |   100:
33 |     $value: 100%
34 |     $description: 100% opacity
35 | 


--------------------------------------------------------------------------------
/lib/transforms/remToPx.ts:
--------------------------------------------------------------------------------
 1 | import type { Transform } from 'style-dictionary/types';
 2 | 
 3 | /**
 4 |  * Add px values for rem-based tokens, assuming default 16px base px font size
 5 |  */
 6 | export const remToPx: Transform = {
 7 |   name: 'remToPx/css',
 8 |   type: 'attribute',
 9 |   transitive: true,
10 |   filter: token => token.$value?.endsWith?.('rem'),
11 |   transform(token, options) {
12 |     const val = parseFloat(token.$value);
13 |     const baseFont = options?.basePxFontSize || 16;
14 |     if (Number.isNaN(val)) {
15 |       throw new Error(`Invalid Number: '${token.name}: ${token.$value}' is not a valid number, cannot transform to 'px' \n`);
16 |     }
17 |     const px = `${(val * baseFont).toFixed(0)}px`;
18 |     return { ...token.attributes, px };
19 |   },
20 | };
21 | 


--------------------------------------------------------------------------------
/tokens/color/crayon/orange.yml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   orange:
 4 |     $extensions:
 5 |       isCrayon: true
 6 |       com.redhat.ux:
 7 |         order: 302
 8 |     10:
 9 |       $value: '#FFE8CC'
10 |       $description: Label - Filled (Orange) background color
11 |     20:
12 |       $value: '#FCCB8F'
13 |     30:
14 |       $value: '#F8AE54'
15 |       $description: Label - Filled (Orange) border color
16 |     40:
17 |       $value: '#F5921B'
18 |       $description: Label - Filled (Orange) accent color
19 |     50:
20 |       $value: '#CA6C0F'
21 |       $description: Label - Filled (Orange) accent color
22 |     60:
23 |       $value: '#9E4A06'
24 |     70:
25 |       $value: '#732E00'
26 |       $description: Label - Filled (Orange) text color
27 |     80:
28 |       $value: '#4D1F00'
29 | 


--------------------------------------------------------------------------------
/tokens/color/crayon/purple.yaml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   purple:
 4 |     $extensions:
 5 |       isCrayon: true
 6 |       com.redhat.ux:
 7 |         order: 307
 8 |     10:
 9 |       $value: '#ECE6FF'
10 |       $description: Label - Filled (Purple) background color
11 |     20:
12 |       $value: '#D0C5F4'
13 |       $description: Inline link visited hover (dark theme)
14 |     30:
15 |       $value: '#B6A6E9'
16 |     40:
17 |       $value: '#876FD4'
18 |       $description: Inline link visited (dark theme)
19 |     50:
20 |       $value: '#5E40BE'
21 |     60:
22 |       $value: '#3D2785'
23 |       $description: Inline link visited (light theme)
24 |     70:
25 |       $value: '#21134D'
26 |       $description: Inline link visited hover (light theme)
27 |     80:
28 |       $value: '#1B0D33'
29 | 


--------------------------------------------------------------------------------
/tokens/color/crayon/blue.yaml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   blue:
 4 |     $extensions:
 5 |       isCrayon: true
 6 |       com.redhat.ux:
 7 |         order: 306
 8 |     10:
 9 |       $value: '#E0F0FF'
10 |       $description: Alert - Info background
11 |     20:
12 |       $value: '#B9DAFC'
13 |       $description: Label - Filled (Blue) border color
14 |     30:
15 |       $value: '#92C5F9'
16 |       $description: Inline link (dark theme)
17 |     40:
18 |       $value: '#4394E5'
19 |       $description: Alert - Info accent
20 |     50:
21 |       $value: '#0066CC'
22 |       $description: Label - Filled (Blue) accent color
23 |     60:
24 |       $value: '#004D99'
25 |       $description: Inline link hover (light theme)
26 |     70:
27 |       $value: '#003366'
28 |       $description: Alert - Info title text
29 | 


--------------------------------------------------------------------------------
/tokens/color/crayon/green.yml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   green:
 4 |     $extensions:
 5 |       isCrayon: true
 6 |       com.redhat.ux:
 7 |         order: 304
 8 |         description: >-
 9 |           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 |     10:
11 |       $value: '#E9F7DF'
12 |       $description: Alert - success background
13 |     20:
14 |       $value: '#D1F1BB'
15 |       $description: Label - Filled (Green) border color
16 |     30:
17 |       $value: '#AFDC8F'
18 |     40:
19 |       $value: '#87BB62'
20 |     50:
21 |       $value: '#63993D'
22 |     60:
23 |       $value: '#3D7317'
24 |       $description: Alert - Success accent
25 |     70:
26 |       $value: '#204D00'
27 |       $description: Alert - Success title text
28 | 


--------------------------------------------------------------------------------
/lib/formats/editor/textmate.ts:
--------------------------------------------------------------------------------
 1 | import type { Format } from 'style-dictionary/types';
 2 | import { getValueFallback } from './lib.ts';
 3 | /**
 4 |  * Exports textmate-style snippets for editor support
 5 |  * @example ```snippets
 6 |  *          snippet --rh-color-black
 7 |  *            var(--rh-color-black, #000)
 8 |  *          ```
 9 |  */
10 | export const textmateSnippets: Format = {
11 |   name: 'editor/snippets/textmate',
12 |   format: ({ dictionary }) =>
13 |     dictionary.allTokens.reduce((snippets, token) => `${snippets}${token.$description ? `
14 | # ${token.$description}` : ''}
15 | snippet ${token.name.replaceAll('-', '')}
16 |   var(--${token.name}${getValueFallback(token)})$2${!token.$value?.startsWith?.('#') ? '' : `
17 | snippet ${token.$value.replace(/^#/, '')}
18 |   var(--${token.name}\${1:, ${token.$value}})$2`}`, '').trimStart(),
19 | };
20 | 


--------------------------------------------------------------------------------
/lib/formats/lit.ts:
--------------------------------------------------------------------------------
 1 | import type { Format } from 'style-dictionary/types';
 2 | import { fileHeader, formattedVariables } from 'style-dictionary/utils';
 3 | 
 4 | export function constructStyleSheet(css: string) {
 5 |   return `import { css } from 'lit'; export default css\`${css.trimEnd()}\`;`;
 6 | }
 7 | /**
 8 |  * Lit CSS object
 9 |  * @example ```js
10 |  * import { resetStyles } from '@rhds/tokens/reset.css.js';
11 |  *
12 |  * class RhJazzHands extends LitElement {
13 |  *   // reset all RHDS variables to defaults
14 |  *   static styles = [resetStyles];
15 |  * }
16 |  * ```
17 |  */
18 | export const litCss: Format = {
19 |   name: 'css/lit',
20 |   format: async ({ file, dictionary, options }) =>
21 |     `${await fileHeader({ file })}${constructStyleSheet(/* css */`
22 | :host {
23 | ${formattedVariables({ format: 'css', dictionary, ...options })}
24 | }`)}`,
25 | };
26 | 


--------------------------------------------------------------------------------
/lib/transform-groups.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Transforms to apply to s/css outputs
 3 |  */
 4 | export const css = {
 5 |   name: 'css',
 6 |   transforms: [
 7 |     'media-query/css',
 8 |     'attribute/cti',
 9 |     'attribute/color',
10 |     'attribute/px',
11 |     'name/kebab',
12 |     'time/seconds',
13 |     'html/icon',
14 |     'color/css',
15 |     'color/css/hsl',
16 |     'color/css/rgb',
17 |     'color/css/themetokens',
18 |   ],
19 | };
20 | 
21 | /**
22 |  * Transforms to apply to js outputs
23 |  */
24 | export const js = {
25 |   name: 'js',
26 |   transforms: css.transforms,
27 | };
28 | 
29 | /**
30 |  * Transforms to apply to Sketch palette output
31 |  */
32 | export const sketch = {
33 |   name: 'sketch',
34 |   transforms: [
35 |     'attribute/cti',
36 |     'attribute/color',
37 |     'attribute/px',
38 |     'name/kebab',
39 |     'color/sketch',
40 |   ],
41 | };
42 | 


--------------------------------------------------------------------------------
/tokens/border.yml:
--------------------------------------------------------------------------------
 1 | border:
 2 |   width:
 3 |     $type: dimension
 4 |     $extensions:
 5 |       com.redhat.ux:
 6 |         heading: Width
 7 |     sm:
 8 |       $value: '{length.4xs}'
 9 |       $description: '1px border width; Example: Secondary CTA or Button'
10 |     md:
11 |       $value: '{length.3xs}'
12 |       $description: '2px border width: Example: Alert'
13 |     lg:
14 |       $value: '{length.2xs}'
15 |       $description: '3px border width: Example: Expanded Accordion panel'
16 | 
17 |   radius:
18 |     $extensions:
19 |       com.redhat.ux:
20 |         heading: Radius
21 | 
22 |     sharp:
23 |       $value: 0.0px
24 |       $description: Border radius reset
25 |     default:
26 |       $description: '3px border radius; Example: Card'
27 |       $value: '{length.2xs}'
28 |     pill:
29 |       $value: '{length.4xl}'
30 |       $description: 'Pill border radius; Example: Label'
31 | 
32 | 


--------------------------------------------------------------------------------
/tokens/color/crayon/red.yaml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   red:
 4 |     $extensions:
 5 |       isCrayon: true
 6 |       com.redhat.ux:
 7 |         order: 300
 8 |         description: >-
 9 |           Avoid using *any* red color token for danger or error messaging.
10 |     10:
11 |       $value: '#FCE3E3'
12 |     20:
13 |       $value: '#FBC5C5'
14 |       $description: Lightest brand red
15 |     30:
16 |       $value: '#F9A8A8'
17 |       $description: Lighter brand red
18 |     40:
19 |       $value: '#F56E6E'
20 |       $description: Light brand red
21 |     50:
22 |       $value: '#EE0000'
23 |       $description: Brand red (light and dark theme)
24 |     60:
25 |       $value: '#A60000'
26 |       $description: Dark brand red
27 |     70:
28 |       $value: '#5F0000'
29 |       $description: Darker brand red
30 |     80:
31 |       $value: '#3F0000'
32 |       $description: Darkest brand red
33 | 


--------------------------------------------------------------------------------
/tokens/shadow.yml:
--------------------------------------------------------------------------------
 1 | box-shadow:
 2 |   $type: shadow
 3 |   sm:
 4 |     $description: Small box shadow
 5 |     $value:
 6 |       offsetX: '0'
 7 |       offsetY: '{length.3xs}'
 8 |       blur: '{length.xs}'
 9 |       spread: '0'
10 |       color: rgba(21, 21, 21, 0.2)
11 |   md:
12 |     $description: Medium box shadow
13 |     $value:
14 |       offsetX: '0'
15 |       offsetY: '{length.xs}'
16 |       blur: '{length.sm}'
17 |       spread: '{length.4xs}'
18 |       color: rgba(21, 21, 21, 0.25)
19 |   lg:
20 |     $description: Large box shadow
21 |     $value:
22 |       offsetX: '0'
23 |       offsetY: '{length.sm}'
24 |       blur: '{length.md}'
25 |       spread: '{length.3xs}'
26 |       color: rgba(21, 21, 21, 0.3)
27 |   xl:
28 |     $description: Extra large box shadow
29 |     $value:
30 |       offsetX: '0'
31 |       offsetY: '{length.md}'
32 |       blur: '{length.xl}'
33 |       spread: '{length.2xs}'
34 |       color: rgba(21, 21, 21, 0.35)
35 | 


--------------------------------------------------------------------------------
/lib/formats/editor/vscode.ts:
--------------------------------------------------------------------------------
 1 | import type { Format } from 'style-dictionary/types';
 2 | import { getValueFallback } from './lib.ts';
 3 | 
 4 | /**
 5 |  * Exports VSCode-style snippets for editor support
 6 |  */
 7 | export const vscodeSnippets: Format = {
 8 |   name: 'editor/snippets/vscode',
 9 |   format: ({ dictionary }) =>
10 |     JSON.stringify(Object.fromEntries(
11 |       dictionary.allTokens.map(token => {
12 |         return [
13 |           token.title ?? token.name,
14 |           {
15 |             scope: 'css,scss',
16 |             prefix: [
17 |               // `--${token.name}`,
18 |               token.name.replaceAll('-', ''),
19 |               token.$value?.startsWith?.('#') ? token.$value.replace(/^#/, '') : null,
20 |             ].filter(Boolean),
21 |             body: [`var(--${token.name}${getValueFallback(token)})$2`],
22 |             description: token.$description,
23 |           },
24 |         ];
25 |       })), null, 2),
26 | };
27 | 


--------------------------------------------------------------------------------
/lib/filters.ts:
--------------------------------------------------------------------------------
 1 | import type { Filter } from 'style-dictionary/types';
 2 | 
 3 | import * as Predicates from './predicates.ts';
 4 | 
 5 | /**
 6 |  * Match tokens which contain `-color-` in the css variable name
 7 |  */
 8 | export const isColor: Filter = {
 9 |   name: 'isColor',
10 |   filter(token) {
11 |     return Object.values(token.attributes).includes('color');
12 |   },
13 | };
14 | 
15 | export const isThemeColorToken: Filter = {
16 |   name: 'isThemeColorToken',
17 |   filter: Predicates.isThemeColorToken,
18 | };
19 | 
20 | export const isNotThemeColorToken: Filter = {
21 |   name: 'isNotThemeColorToken',
22 |   filter: Predicates.isNotThemeColorToken,
23 | };
24 | 
25 | export const isLightThemeColorToken: Filter = {
26 |   name: 'isLightThemeColorToken',
27 |   filter: Predicates.isLightThemeColorToken,
28 | };
29 | 
30 | export const isDarkThemeColorToken: Filter = {
31 |   name: 'isDarkThemeColorToken',
32 |   filter: Predicates.isDarkThemeColorToken,
33 | };
34 | 


--------------------------------------------------------------------------------
/tokens/length/length.yaml:
--------------------------------------------------------------------------------
 1 | length:
 2 |   $type: dimension
 3 | 
 4 |   4xs:
 5 |     $value: 1px
 6 |     $description: 1px length token
 7 |   3xs:
 8 |     $value: 2px
 9 |     $description: 2px length token
10 |   2xs:
11 |     $value: 3px
12 |     $description: 3px length token
13 |   xs:
14 |     $value: 4px
15 |     $description: 4px length token
16 |   sm:
17 |     $value: 6px
18 |     $description: 6px length token
19 |   md:
20 |     $value: 8px
21 |     $description: 8px length token
22 |   lg:
23 |     $value: 16px
24 |     $description: 16px length token
25 |   xl:
26 |     $value: 24px
27 |     $description: 24px length token
28 |   2xl:
29 |     $value: 32px
30 |     $description: 32px length token
31 |   3xl:
32 |     $value: 48px
33 |     $description: 48px length token
34 |   4xl:
35 |     $value: 64px
36 |     $description: 64px length token
37 |   5xl:
38 |     $value: 80px
39 |     $description: 80px length token
40 |   6xl:
41 |     $value: 96px
42 |     $description: 96px length token
43 |   7xl:
44 |     $value: 128px
45 |     $description: 128px length token
46 | 


--------------------------------------------------------------------------------
/.github/workflows/figma.yml:
--------------------------------------------------------------------------------
 1 | name: Figma
 2 | 
 3 | on: 
 4 |   workflow_dispatch:
 5 |     inputs: 
 6 |       file_id:
 7 |         description: 'Figma file ID'
 8 |         required: true
 9 |       figma_token:
10 |         description: 'Figma API token'
11 |         required: true
12 |       style_dictionary_url: 
13 |         description: 'Style Dictionary URL'
14 |         required: true
15 | 
16 | jobs:
17 |   add-collection-to-figma:
18 |     # Prevents changesets action from creating a PR on forks
19 |     if: github.repository == 'RedHat-UX/red-hat-design-tokens'
20 |     runs-on: ubuntu-latest
21 |     steps:
22 |       - uses: actions/checkout@v4
23 |       - uses: brianferry/figma-create@v1.0
24 |         with:
25 |           api_token: ${{ github.event.inputs.figma_token }}
26 |           file_id: ${{ github.event.inputs.file_id }}
27 |           style_dictionary_url: ${{ github.event.inputs.style_dictionary_url }}
28 |       - name: Archive Figma Tokens Payload
29 |         uses: actions/upload-artifact@v4
30 |         with:
31 |           name: figma-tokens
32 |           path: build/
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Red Hat UX
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/lib/actions/copy-assets.ts:
--------------------------------------------------------------------------------
 1 | import type { Action } from 'style-dictionary/types';
 2 | 
 3 | import { copyFile, mkdir, rmdir, rm, readdir } from 'node:fs/promises';
 4 | 
 5 | import { fileURLToPath } from 'node:url';
 6 | 
 7 | const rel = (path: string) => new URL(path, import.meta.url);
 8 | const DOCS_STYLES_IN = fileURLToPath(rel('../../docs/styles.css'));
 9 | const DOCS_STYLES_OUT = fileURLToPath(rel('../../build/styles.css'));
10 | const ASSETS_IN_DIR = rel('../../docs/assets/');
11 | const ASSETS_OUT_DIR = rel('../../build/assets/');
12 | 
13 | /**
14 |  * Copy web assets to build dir
15 |  */
16 | export const copyAssets: Action = {
17 |   name: 'copy-assets',
18 |   async do() {
19 |     await copyFile(DOCS_STYLES_IN, DOCS_STYLES_OUT);
20 |     await mkdir(ASSETS_IN_DIR, { recursive: true });
21 |     await mkdir(ASSETS_OUT_DIR, { recursive: true });
22 |     for (const asset of await readdir(ASSETS_IN_DIR)) {
23 |       await copyFile(
24 |         new URL(`./${asset}`, ASSETS_IN_DIR.href),
25 |         new URL(`./${asset}`, ASSETS_OUT_DIR.href),
26 |       );
27 |     }
28 |   },
29 |   async undo() {
30 |     await rmdir(ASSETS_OUT_DIR, { recursive: true });
31 |     await rm(DOCS_STYLES_OUT, { force: true });
32 |   },
33 | };
34 | 
35 | 


--------------------------------------------------------------------------------
/tokens/media.yml:
--------------------------------------------------------------------------------
 1 | media:
 2 |   $type: mediaQuery
 3 |   $extensions:
 4 |     com.redhat.ux:
 5 |       use: breakpoint
 6 |       heading: Media Queries
 7 |       descriptionFile: media.md
 8 | 
 9 |   xs:
10 |     $description: Mobile portrait
11 |     $value:
12 |       min-width: '{breakpoint.xs}'
13 |     $extensions:
14 |       com.redhat.ux:
15 |         title: Extra Small
16 |   sm:
17 |     $description: Mobile landscape
18 |     $value:
19 |       min-width: '{breakpoint.sm}'
20 |     $extensions:
21 |       com.redhat.ux:
22 |         title: Small
23 |   md:
24 |     $description: Tablet portrait
25 |     $value:
26 |       min-width: '{breakpoint.md}'
27 |     $extensions:
28 |       com.redhat.ux:
29 |         title: Medium
30 |   lg:
31 |     $description: Tablet landscape
32 |     $value:
33 |       min-width: '{breakpoint.lg}'
34 |     $extensions:
35 |       com.redhat.ux:
36 |         title: Large
37 |   xl:
38 |     $description: Desktop small
39 |     $value:
40 |       min-width: '{breakpoint.xl}'
41 |     $extensions:
42 |       com.redhat.ux:
43 |         title: Extra Large
44 |   2xl:
45 |     $description: Desktop Large
46 |     $value:
47 |       min-width: '{breakpoint.2xl}'
48 |     $extensions:
49 |       com.redhat.ux:
50 |         title: Extra Extra Large
51 | 


--------------------------------------------------------------------------------
/tokens/color/interactive.md:
--------------------------------------------------------------------------------
 1 | Each theme features two shades of blue, one for Link and Focus states and one for Hover
 2 | and Active states. Use the `--rh-interactive-(blue|purple)-(normal|emphasized)` theme
 3 | tokens in order to style content of themable containers like `<rh-surface>`
 4 | 
 5 | ```html
 6 | <rh-surface color-palette="lighter">
 7 |   <p>Use <a href="#">theme tokens</a> for best results.<p>
 8 |   <rh-card color-palette="darkest">
 9 |     <p>That way, colours respond to their parents' <code>color-palette</code>
10 |        Without requiring <a href="#">custom CSS</a></p>
11 |   </rh-card>
12 | </rh-surface>
13 | ```
14 | 
15 | ```css
16 | rh-surface {
17 |  & a {
18 |     color: var(--rh-color-interactive-primary-default);
19 |     &:hover { color: var(--rh-color-interactive-primary-hover); }
20 |     &:focus-within { color: var(--rh-color-interactive-primary-focus); }
21 |     &:active { color: var(--rh-color-interactive-primary-active); }
22 |     &:visited {
23 |       color: var(--rh-color-interactive-primary-visited);
24 |       &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
25 |       &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
26 |       &:active { color: var(--rh-color-interactive-primary-visited-active); }
27 |     }
28 |   }
29 | }
30 | ```
31 | 
32 | 


--------------------------------------------------------------------------------
/tokens/breakpoints.md:
--------------------------------------------------------------------------------
 1 | When layouts change in size responding to screen size, visual elements may 
 2 | adjust their
 3 | size, hide, or otherwise adapt to compensate for gains or losses in screen real estate.
 4 | 
 5 | Red Hat's breakpoint tokens represent the **minimum**
 6 | [CSS pixel](https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel) width of a device's
 7 | screen, corresponding to the `min-width` media query so for example a device with a
 8 | screen width less than the `--rh-breakpoint-xs` token is considered a mobile
 9 | device in portrait mode, whereas a device with a screen width greater than the
10 | `--rh-breakpoint-xl` token is considered a desktop with a large screen.
11 | 
12 | Since CSS currently does not allow custom properties in media queries, these tokens must be
13 | uses in preprocessors or templating systems, or imported into JavaScript modules. We
14 | recommend against importing these token values directly into components. In Red Hat's
15 | Design System, we import them into a
16 | [reactive controller](https://lit.dev/docs/composition/controllers/) which exposes
17 | information about the screen size through a JavaScript API.
18 | 
19 | See also [media queries](#media-queries).
20 | 
21 | ```js
22 | static styles = css`
23 |   @media (max-width: ${Breakpointxs}) {
24 |     /* ... mobile portrait styles */
25 |   }
26 | `;
27 | ```
28 | 


--------------------------------------------------------------------------------
/eleventy.config.ts:
--------------------------------------------------------------------------------
 1 | import type UserConfig from '@11ty/eleventy';
 2 | 
 3 | import { Generator } from '@jspm/generator';
 4 | import { PreviewPagePlugin } from './lib/11ty/preview-page-plugin.ts';
 5 | 
 6 | export default function(eleventyConfig: UserConfig) {
 7 |   eleventyConfig.addPlugin(PreviewPagePlugin);
 8 |   eleventyConfig.setServerPassthroughCopyBehavior('passthrough');
 9 |   eleventyConfig.addWatchTarget('lib/**/*.{js,ts}');
10 |   eleventyConfig.addWatchTarget('tokens/**/*.{yml,yaml}');
11 |   eleventyConfig.addWatchTarget('plugins/**/*.{cjs,js}');
12 |   eleventyConfig.addPassthroughCopy({
13 |     'docs/assets': 'assets',
14 |     'css/': 'assets/packages/@rhds/tokens/css/',
15 |     'node_modules/@rhds/icons': 'assets/packages/@rhds/icons',
16 |     'node_modules/@rhds/elements': 'assets/packages/@rhds/elements',
17 |   });
18 |   eleventyConfig.addGlobalData('importMap', async function() {
19 |     const generator = new Generator();
20 |     await generator.install([
21 |       '@rhds/elements',
22 |       '@rhds/elements/rh-footer/rh-footer-universal.js',
23 |       '@rhds/elements/rh-tooltip/rh-tooltip.js',
24 |       '@rhds/elements/rh-card/rh-card.js',
25 |       '@rhds/elements/rh-switch/rh-switch.js',
26 |       '@rhds/elements/rh-surface/rh-surface.js',
27 |     ]);
28 |     return generator.getMap();
29 |   });
30 |   return {
31 |     htmlTemplateEngine: 'njk',
32 |     dir: {
33 |       input: 'docs',
34 |       output: 'build',
35 |     },
36 |   };
37 | };
38 | 


--------------------------------------------------------------------------------
/plugins/stylelint/README.md:
--------------------------------------------------------------------------------
 1 | # RHDS Stylelint Plugin
 2 | 
 3 | ```yaml
 4 | # .stylelintrc.yml
 5 | extends: stylelint-config-standard
 6 | 
 7 | # add the plugin:
 8 | plugins:
 9 |   - ./node_modules/@rhds/tokens/plugins/stylelint.js
10 | 
11 | # Make sure to activate the rule:
12 | rules:
13 |   rhds/token-values: true
14 |   rhds/no-unknown-token-name: true
15 | ```
16 | 
17 | Be sure to configure your editor to fix stylelint issues on save:
18 | - [neovim lsp](https://github.com/neovim/nvim-lspconfig/pull/2089)
19 | - [vscode](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint#editor.codeactionsonsave)
20 | 
21 | ## Rules
22 | 
23 | ### `deprecated`
24 | Replaces deprecated tokens with their new versions.
25 | 
26 | ### `token-values`
27 | Validates that the fallback values for tokens correspond with the values 
28 | specified in the token sources. Automatically fixed incorrect values. This rule 
29 | has no options.
30 | 
31 | ### `no-unknown-token-name`
32 | Validates CSS Custom Property names beginning with `--rh` are legit token names. 
33 | 
34 | #### Options
35 | This rule can take a dictionary of names to migrate, and if it finds one of the 
36 | specified names, it will automatically replace it with the new one.
37 | 
38 | ```yaml
39 | rules:
40 |   rhds/no-unknown-token-name:
41 |     - true
42 |     - allowed:
43 |       - --rh-icon-color
44 |       migrations:
45 |       # instances of gray-90 will be replaced with gray-95
46 |       --rh-color-gray-90: --rh-color-gray-95
47 | ```
48 | 


--------------------------------------------------------------------------------
/tokens/color/brand.yml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   brand:
 4 |     $extensions:
 5 |       com.redhat.ux:
 6 |         order: 0
 7 |         descriptionFile: brand.md
 8 | 
 9 |     red:
10 |       _:
11 |         $value:
12 |           - '{color.brand.red.on-light}'
13 |           - '{color.brand.red.on-dark}'
14 |         $description: >-
15 |           Responsive `brand-red` color value. Typically read only - use a themable container e.g. `<rh-surface>`
16 |           Resolves to `--rh-color-brand-red-on-light` on a themable container with a light color palette
17 |           and `--rh-color-brand-red-on-dark` on a themable container with a dark color palette.
18 | 
19 |       on-light:
20 |         $value: '{color.red.50}'
21 |         $description: Brand red on light background
22 |       on-dark:
23 |         $value: '{color.red.50}'
24 |         $description: Brand red on dark background
25 | 
26 |       lightest:
27 |         $value: '{color.red.20}'
28 |         $description: Lightest brand red
29 |       lighter:
30 |         $value: '{color.red.30}'
31 |         $description: Lighter brand red
32 |       light:
33 |         $value: '{color.red.40}'
34 |         $description: Light brand red
35 | 
36 |       dark:
37 |         $value: '{color.red.60}'
38 |         $description: Dark brand red/Brand red hover
39 |       darker:
40 |         $value: '{color.red.70}'
41 |         $description: Darker brand red
42 |       darkest:
43 |         $value: '{color.red.80}'
44 |         $description: Darkest brand red
45 | 
46 | 
47 | 


--------------------------------------------------------------------------------
/tokens/length/icon.yml:
--------------------------------------------------------------------------------
 1 | size:
 2 |   $type: dimension
 3 |   icon:
 4 |     $extensions:
 5 |       com.redhat.ux:
 6 |         heading: Icon
 7 | 
 8 |     '01':
 9 |       $value: '{length.lg}'
10 |       $description: 16px icon box
11 |       attributes:
12 |         category: icon
13 |         type: size
14 |     '02':
15 |       $value: '{length.xl}'
16 |       $description: 24px icon box
17 |       attributes:
18 |         category: icon
19 |         type: size
20 |     '03':
21 |       $value: '{length.2xl}'
22 |       $description: 32px icon box
23 |       attributes:
24 |         category: icon
25 |         type: size
26 |     '04':
27 |       $value: 40px
28 |       $description: 40px icon box
29 |       attributes:
30 |         category: icon
31 |         type: size
32 |     '05':
33 |       $value: '{length.3xl}'
34 |       $description: 48px icon box
35 |       attributes:
36 |         category: icon
37 |         type: size
38 |     '06':
39 |       $value: '{length.4xl}'
40 |       $description: 64px icon box
41 |       attributes:
42 |         category: icon
43 |         type: size
44 |     '07':
45 |       $value: '{length.5xl}'
46 |       $description: 80px icon box
47 |       attributes:
48 |         category: icon
49 |         type: size
50 |     '08':
51 |       $value: '{length.6xl}'
52 |       $description: 96px icon box
53 |       attributes:
54 |         category: icon
55 |         type: size
56 |     '09':
57 |       $value: '{length.7xl}'
58 |       $description: 128px icon box
59 |       attributes:
60 |         category: icon
61 |         type: size
62 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-md.svg:
--------------------------------------------------------------------------------
 1 | <svg viewBox="0 0 868 1143.3" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="102" ry="12.17"/>
 3 |     <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="50" ry="12.17"/>
 4 |     <g transform="translate(-351.27 -189.13) scale(3.19053)">
 5 |         <path fill="#020202" d="M157.29 163.47h60.27a8.66 8.66 0 0 0 8.66-8.66v-51.24a8.66 8.66 0 0 0-8.66-8.66h-60.27a8.66 8.66 0 0 0-8.67 8.66v51.24a8.66 8.66 0 0 0 8.67 8.66zm179.61 63.5h-54.71a8.66 8.66 0 0 0-8.66 8.66V355.6a8.66 8.66 0 0 0 8.66 8.66h54.7a8.66 8.66 0 0 0 8.67-8.66V235.63a8.66 8.66 0 0 0-8.67-8.66z"/>
 6 |         <path fill="#020202" d="M341.4 87.59h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.65h91.53a8.32 8.32 0 1 0 0-16.65zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm-99.85 66.57h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.65z"/>
 7 |         <path fill="#020202" d="M241.55 320.58h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm99.85-166.42H148.62a8.32 8.32 0 1 0 0 16.64H341.4a8.32 8.32 0 1 0 0-16.64z"/>
 8 |     </g>
 9 |     <circle fill="#fff" cx="430.46" cy="1092" r="30"/>
10 | </svg>
11 | 
12 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-sm-max.svg:
--------------------------------------------------------------------------------
 1 | <svg viewBox="0 0 868 1143.3" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="102" ry="12.17"/>
 3 |     <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="50" ry="12.17"/>
 4 |     <g transform="translate(-351.27 -189.13) scale(3.19053)">
 5 |         <path fill="#020202" d="M157.29 163.47h60.27a8.66 8.66 0 0 0 8.66-8.66v-51.24a8.66 8.66 0 0 0-8.66-8.66h-60.27a8.66 8.66 0 0 0-8.67 8.66v51.24a8.66 8.66 0 0 0 8.67 8.66zm179.61 63.5h-54.71a8.66 8.66 0 0 0-8.66 8.66V355.6a8.66 8.66 0 0 0 8.66 8.66h54.7a8.66 8.66 0 0 0 8.67-8.66V235.63a8.66 8.66 0 0 0-8.67-8.66z"/>
 6 |         <path fill="#020202" d="M341.4 87.59h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.65h91.53a8.32 8.32 0 1 0 0-16.65zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm-99.85 66.57h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.65z"/>
 7 |         <path fill="#020202" d="M241.55 320.58h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm99.85-166.42H148.62a8.32 8.32 0 1 0 0 16.64H341.4a8.32 8.32 0 1 0 0-16.64z"/>
 8 |     </g>
 9 |     <circle fill="#fff" cx="430.46" cy="1092" r="30"/>
10 | </svg>
11 | 
12 | 


--------------------------------------------------------------------------------
/tokens/color/accent.yml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   accent:
 4 |     $extensions:
 5 |       com.redhat.ux:
 6 |         order: 10
 7 |         collapse: true
 8 | 
 9 |     base:
10 |       _:
11 |         $value:
12 |           - '{color.accent.base.on-light}'
13 |           - '{color.accent.base.on-dark}'
14 |         $description: >-
15 |           Responsive `accent-base` color value. Typically read only - use a themable container e.g. `<rh-surface>`
16 |           Resolves to `--rh-color-accent-base-on-light` on a themable container with a light color palette
17 |           and `--rh-color-accent-base-on-dark` on a themable container with a dark color palette.
18 |       on-light:
19 |         $value: '{color.blue.50}'
20 |         $description: Inline link (light theme)
21 |       on-dark:
22 |         $value: '{color.blue.30}'
23 |         $description: Inline link (dark theme)
24 | 
25 |     brand:
26 |       _:
27 |         $value:
28 |           - '{color.accent.brand.on-light}'
29 |           - '{color.accent.brand.on-dark}'
30 |         $description: >-
31 |           Responsive `accent-brand` color value. Typically read only - use a themable container e.g. `<rh-surface>`.
32 |           Resolves to `--rh-color-accent-brand-on-light` on a themable container with a light color palette
33 |           and `--rh-color-accent-brand-on-dark` on a themable container with a dark color palette.
34 |       on-light:
35 |         $value: '{color.brand.red.on-light}'
36 |         $description: Brand red (light theme)
37 |       on-dark:
38 |         $value: '{color.brand.red.on-dark}'
39 |         $description: Brand red (dark theme)
40 | 
41 | 


--------------------------------------------------------------------------------
/tokens/font/weight.yml:
--------------------------------------------------------------------------------
 1 | font:
 2 |   weight:
 3 |     $type: fontWeight
 4 |     $extensions:
 5 |       com.redhat.ux:
 6 |         heading: Font weights
 7 | 
 8 |     body-text:
 9 |       $extensions:
10 |         com.redhat.ux:
11 |           heading: Font weights (body)
12 |       regular:
13 |         $description: Regular font weight
14 |         $value: 400
15 |         attributes:
16 |           category: typography
17 |       medium:
18 |         $description: Medium font weight
19 |         $value: 500
20 |         attributes:
21 |           category: typography
22 | 
23 |     code:
24 |       $extensions:
25 |         com.redhat.ux:
26 |           heading: Font weights (code)
27 |           fontFamily: var(--rh-font-family-code)
28 |       regular:
29 |         $description: Regular font weight
30 |         $value: 400
31 |         attributes:
32 |           category: typography
33 |       medium:
34 |         $description: Medium font weight
35 |         $value: 500
36 |         attributes:
37 |           category: typography
38 | 
39 |     heading:
40 |       $extensions:
41 |         com.redhat.ux:
42 |           heading: Font weights (headings)
43 |           fontFamily: var(--rh-font-family-heading)
44 |       regular:
45 |         $description: Regular font weight for headings
46 |         $value: 400
47 |         attributes:
48 |           category: typography
49 |       medium:
50 |         $description: Medium font weight for headings
51 |         $value: 500
52 |         attributes:
53 |           category: typography
54 |       bold:
55 |         $description: Bold font weight for headings
56 |         $value: 700
57 |         attributes:
58 |           category: typography
59 | 


--------------------------------------------------------------------------------
/lib/formats/editor/nvim-colorizer.ts:
--------------------------------------------------------------------------------
 1 | import type { Token } from 'style-dictionary';
 2 | import type { Format } from 'style-dictionary/types';
 3 | 
 4 | import { isColor, isDeprecatedRGBHSL, not } from '../../predicates.ts';
 5 | 
 6 | /**
 7 |  * Recursively creates a list of entries matching token names with values
 8 |  * @param token token to match against
 9 |  */
10 | function pairNameWithVal(token: Token) {
11 |   if (typeof token.$value === 'string') {
12 |     const varName = `--rh-${token.path.filter(x => x !== '_').join('-')}`;
13 |     const refName =
14 |            typeof token.original?.$value === 'string'
15 |         && token.original?.$value?.startsWith('{') ? token.original.$value.replace(/\._}$/, '}')
16 |       : `{${token.path.reduce((a, b) => `${a}.${b}`, '')}}`.replace(/^\{\./, '{');
17 |     const value = token.$value.match(/#\w{6}/)?.pop() ?? token.$value
18 |     if (!value.startsWith('#'))
19 |       return []
20 |     else {
21 |       return [
22 |         [refName, value],
23 |         [varName, value],
24 |       ];
25 |     }
26 |   } else if (token.$value) {
27 |     return Object.fromEntries(Object.entries(token.$value)
28 |         .map(pairNameWithVal));
29 |   } else {
30 |     return [];
31 |   }
32 | }
33 | 
34 | /**
35 |  * Exports [vim-hexokinase](https://github.com/RRethy/vim-hexokinase)
36 |  * custom patterns for token refs e.g. `{color.gray.90}`
37 |  */
38 | export const nvimColorizer: Format = {
39 |   name: 'editor/neovim/colorizer',
40 |   format: ({ dictionary }) =>
41 |     JSON.stringify(Object.fromEntries(dictionary.allTokens
42 |             .filter(isColor)
43 |             .filter(not(isDeprecatedRGBHSL))
44 |             .flatMap(pairNameWithVal)
45 |             .sort()), null, 2),
46 | };
47 | 


--------------------------------------------------------------------------------
/lib/actions/description-file.ts:
--------------------------------------------------------------------------------
 1 | import type { Token } from 'style-dictionary';
 2 | import type { Action } from 'style-dictionary/types';
 3 | 
 4 | import { readFile, writeFile, rm } from 'node:fs/promises';
 5 | 
 6 | import { dirname, join } from 'node:path';
 7 | import { fileURLToPath } from 'node:url';
 8 | 
 9 | const rel = (path: string) => new URL(path, import.meta.url);
10 | const OUTPUT_JSON_URL = rel('../../json/rhds.tokens.json');
11 | const EXT_KEY = 'com.redhat.ux';
12 | 
13 | function getFilePathGuess(collection: Token) {
14 |   return Object.values(collection ?? {}).reduce((path, val) =>
15 |       path || (val && typeof val !== 'object') ? path
16 |     : (val && '$value' in val) ? val.filePath
17 |     : getFilePathGuess(val), '');
18 | }
19 | 
20 | function getDescription(collection) {
21 |   const {
22 |     filePath = getFilePathGuess(collection),
23 |     descriptionFile,
24 |   } = collection.$extensions[EXT_KEY];
25 |   return readFile(join(process.cwd(), dirname(filePath), descriptionFile), 'utf-8');
26 | }
27 | 
28 | function writeDescription(parent) {
29 |   if (EXT_KEY in (parent?.$extensions ?? {})) {
30 |     const { descriptionFile } = parent.$extensions[EXT_KEY];
31 |     if (descriptionFile) {
32 |       parent.$extensions[EXT_KEY].description ??= getDescription(parent);
33 |     }
34 |   }
35 |   for (const value of Object.values(parent)) {
36 |     if (typeof value === 'object' && value) {
37 |       writeDescription(value);
38 |     }
39 |   }
40 | }
41 | 
42 | export const descriptionFile: Action = {
43 |   name: 'descriptionFile',
44 |   async do() {
45 |     const json = JSON.parse(await readFile(OUTPUT_JSON_URL, 'utf8') as unknown as string);
46 |     writeDescription(json);
47 |     await writeFile(OUTPUT_JSON_URL, JSON.stringify(json, null, 2));
48 |   },
49 |   async undo() {
50 |     await rm(OUTPUT_JSON_URL);
51 |   },
52 | };
53 | 


--------------------------------------------------------------------------------
/plugins/stylelint.cts:
--------------------------------------------------------------------------------
 1 | import { Plugin } from 'stylelint';
 2 | 
 3 | import stylelint from 'stylelint';
 4 | 
 5 | // TODO: remove cjs plugin for 2.0
 6 | export = [
 7 |   {
 8 |     ruleName: 'rhds/token-values',
 9 | 
10 |     meta: {
11 |       url: 'https://github.com/RedHat-UX/red-hat-design-tokens/tree/main/plugins/stylelint/rules/token-values.ts',
12 |       fixable: true,
13 |     },
14 | 
15 |     rule: () => {
16 |       function ruleFunction(primary, secondary, options) {
17 |         return async (root, result) => {
18 |           const mod = await import('./stylelint/rules/token-values.js');
19 |           const rule = mod.default(primary, secondary, options);
20 |           return rule(root, result);
21 |         };
22 |       }
23 | 
24 |       ruleFunction.messages = stylelint.utils.ruleMessages('rhds/token-values', {
25 |         expected: 'Expected ...',
26 |       });
27 | 
28 |       ruleFunction.meta = {
29 |         url: 'https://github.com/RedHat-UX/red-hat-design-tokens/tree/main/plugins/stylelint/rules/token-values.ts',
30 |         fixable: true,
31 |       };
32 | 
33 |       return ruleFunction;
34 |     },
35 |   } as Plugin,
36 |   {
37 |     ruleName: 'rhds/no-unknown-token-name',
38 | 
39 |     rule: () => {
40 |       function ruleFunction(primary, secondary, options) {
41 |         return async (root, result) => {
42 |           const mod = await import('./stylelint/rules/no-unknown-token-name.js');
43 |           const rule = mod.default(primary, secondary, options);
44 |           return rule(root, result);
45 |         };
46 |       }
47 | 
48 |       ruleFunction.messages = stylelint.utils.ruleMessages('rhds/no-unknown-token-name', {
49 |         expected: 'Expected ...',
50 |       });
51 | 
52 |       ruleFunction.meta = {
53 |         url: 'https://github.com/RedHat-UX/red-hat-design-tokens/tree/main/plugins/stylelint/rules/no-unknown-token-name.ts',
54 |         fixable: true,
55 |       };
56 | 
57 |       return ruleFunction;
58 |     },
59 |   } as Plugin,
60 | ];
61 | 


--------------------------------------------------------------------------------
/lib/preprocessors/split-colors.ts:
--------------------------------------------------------------------------------
 1 | import type { Config, Token, Tokens } from 'style-dictionary';
 2 | import type { Preprocessor } from 'style-dictionary/types';
 3 | 
 4 | import { readdir } from 'node:fs/promises';
 5 | 
 6 | const crayonFiles = await readdir(new URL('../../tokens/color/crayon', import.meta.url));
 7 | const CRAYONS = new Set(crayonFiles.map(x => x.replace(/\.ya?ml/, '')));
 8 | CRAYONS.add('white');
 9 | CRAYONS.add('black');
10 | 
11 | function splitColorsRecurse(slice: Tokens | Token, opts: Config) {
12 |   for (const key in slice) {
13 |     if (Object.prototype.hasOwnProperty.call(slice, key)) {
14 |       const token = slice[key];
15 |       if (typeof token !== 'object' || token === null) {
16 |         continue;
17 |       } else if (key === 'white' || key === 'black') {
18 |         const $value = `{color.${key}}`;
19 |         slice[`${key}-hsl`] = { $value };
20 |         slice[`${key}-rgb`] = { $value };
21 |       } else if (token.$extensions?.isCrayon) {
22 |         for (const tkey in token) {
23 |           if (token[tkey]?.$value) {
24 |             const $value = `{color.${key}.${tkey}}`;
25 |             const tname = `--rh-color-${key}-${tkey}`;
26 |             token[`${tkey}-hsl`] = { $value, $deprecated: `Use color transforms instead e.g. hsla(from var(${tname}) h s l / 10%)` };
27 |             token[`${tkey}-rgb`] = { $value, $deprecated: `Use color transforms instead e.g. rgba(from var(${tname}) r g b / 10%)` };
28 |           }
29 |         }
30 |       } else if (typeof token === 'object') {
31 |         splitColorsRecurse(token, opts);
32 |       } else {
33 |         continue;
34 |       }
35 |     }
36 |   }
37 | }
38 | 
39 | /** Splits color tokens it finds, generating `-rgb` and `-hsl` variants */
40 | export const splitColors: Preprocessor = {
41 |   name: 'split-colors',
42 |   async preprocessor(dictionary, opts) {
43 |     // create a copy in which we will do mutations
44 |     const copy = structuredClone(dictionary);
45 |     splitColorsRecurse(copy, opts);
46 |     return copy;
47 |   },
48 | };
49 | 


--------------------------------------------------------------------------------
/tokens/color/crayon/gray.yaml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   white:
 4 |     $description: 'Lightest surface (light theme) or primary text (dark theme)'
 5 |     $value: '#ffffff'
 6 |     attributes:
 7 |       type: gray
 8 | 
 9 |   gray:
10 |     $extensions:
11 |       isCrayon: true
12 |       com.redhat.ux:
13 |         order: 390
14 |         description: >-
15 |           In addition to white and black, each theme features various shades of gray.
16 |           Be mindful of accessibility when using text or components on top of shades of gray.
17 | 
18 |     10:
19 |       $value: '#F2F2F2'
20 |       $description: Tertiary surface (light theme)
21 |       attributes:
22 |         type: gray
23 |     20:
24 |       $value: '#E0E0E0'
25 |       $description: Secondary surface (light theme)
26 |       attributes:
27 |         type: gray
28 |     30:
29 |       $value: '#C7C7C7'
30 |       $description: Subtle borders (light theme)
31 |       attributes:
32 |         type: gray
33 |     40:
34 |       $value: '#A3A3A3'
35 |       $description: Subtle icon (hover state)
36 |       attributes:
37 |         type: gray
38 |     50:
39 |       $value: '#707070'
40 |       $description: Subtle icon
41 |       attributes:
42 |         type: gray
43 |     60:
44 |       $value: '#4D4D4D'
45 |       $description: Secondary text (light theme)
46 |       attributes:
47 |         type: gray
48 |     70:
49 |       $value: '#383838'
50 |       $description: Tertiary surface (dark theme)
51 |       attributes:
52 |         type: gray
53 |     80:
54 |       $value: '#292929'
55 |       $description: Alternative tertiary surface (not available for use with context provider)
56 |       attributes:
57 |         type: gray
58 |     90:
59 |       $value: '#1F1F1F'
60 |       $description: Secondary surface (dark theme)
61 |       attributes:
62 |         type: gray
63 |     95:
64 |       $value: '#151515'
65 |       $description: Primary surface (dark theme) or primary text (light theme)
66 |       attributes:
67 |         type: gray
68 | 
69 |   black:
70 |     $value: '#000000'
71 |     $description: Brand black (avoid using)
72 |     attributes:
73 |       type: gray
74 | 


--------------------------------------------------------------------------------
/tokens/length/space.yaml:
--------------------------------------------------------------------------------
 1 | space:
 2 |   $type: dimension
 3 |   $extensions:
 4 |     com.redhat.ux:
 5 |       description: >-
 6 |         Spacers are visual cues used to define fixed amounts of space between elements.
 7 |         They make it easy for designers to maintain consistent spacing across components and
 8 |         patterns as well as simplify the handoff process between designers and developers.
 9 |         Consistent spacing helps maintain balance and rhythm across the system.
10 | 
11 |   xs:
12 |     $value: '{length.xs}'
13 |     $description: 4px spacer
14 |     $extensions:
15 |       com.redhat.ux:
16 |         color: '#ec861b'
17 |   sm:
18 |     $value: '{length.sm}'
19 |     $description: 6px spacer
20 |     $extensions:
21 |       com.redhat.ux:
22 |         color: '#f3d53c'
23 |   md:
24 |     $value: '{length.md}'
25 |     $description: 8px spacer
26 |     $extensions:
27 |       com.redhat.ux:
28 |         color: '#9bd917'
29 |   lg:
30 |     $value: '{length.lg}'
31 |     $description: 16px spacer
32 |     $extensions:
33 |       com.redhat.ux:
34 |         color: '#51a549'
35 |   xl:
36 |     $value: '{length.xl}'
37 |     $description: 24px spacer
38 |     $extensions:
39 |       com.redhat.ux:
40 |         color: '#1b8793'
41 |   2xl:
42 |     $value: '{length.2xl}'
43 |     $description: 32px spacer
44 |     $extensions:
45 |       com.redhat.ux:
46 |         color: '#1893d2'
47 |   3xl:
48 |     $value: '{length.3xl}'
49 |     $description: 48px spacer
50 |     $extensions:
51 |       com.redhat.ux:
52 |         color: '#6743c6'
53 |   4xl:
54 |     $value: '{length.4xl}'
55 |     $description: 64px spacer
56 |     $extensions:
57 |       com.redhat.ux:
58 |         color: '#341974'
59 |   5xl:
60 |     $value: '{length.5xl}'
61 |     $description: 80px spacer
62 |     $extensions:
63 |       com.redhat.ux:
64 |         color: '#b300b3'
65 |   6xl:
66 |     $value: '{length.6xl}'
67 |     $description: 96px spacer
68 |     $extensions:
69 |       com.redhat.ux:
70 |         color: '#f279a1'
71 |   7xl:
72 |     $value: '{length.7xl}'
73 |     $description: 128px spacer
74 |     $extensions:
75 |       com.redhat.ux:
76 |         color: '#bf1d1d'
77 | 


--------------------------------------------------------------------------------
/lib/actions/write-vsix-manifest.ts:
--------------------------------------------------------------------------------
 1 | import type { Action } from 'style-dictionary/types';
 2 | 
 3 | import { readFile, copyFile, mkdir, writeFile, rm } from 'node:fs/promises';
 4 | 
 5 | import { dirname } from 'node:path';
 6 | import { fileURLToPath } from 'node:url';
 7 | 
 8 | const rel = (path: string) => new URL(path, import.meta.url);
 9 | const PACKAGE_JSON_URL = rel('../../package.json');
10 | 
11 | const LICENSE_URL = rel('../../LICENSE');
12 | const VSCODE_LICENSE_URL = rel('../../editor/vscode/LICENSE');
13 | const README_URL = rel('../../LICENSE');
14 | const VSCODE_README_URL = rel('../../editor/vscode/README.md');
15 | const VSIX_MANIFEST_URL = rel('../../editor/vscode/package.json');
16 | 
17 | const { version } = JSON.parse(
18 |   await readFile(PACKAGE_JSON_URL, 'utf-8') as unknown as string
19 | );
20 | 
21 | /**
22 |  * Write VSCode package manifest
23 |  */
24 | export const writeVSIXManifest: Action = {
25 |   name: 'writeVSIXManifest',
26 |   async do() {
27 |     await mkdir(dirname(fileURLToPath(VSIX_MANIFEST_URL)), { recursive: true });
28 |     await copyFile(LICENSE_URL, VSCODE_LICENSE_URL);
29 |     await copyFile(README_URL, VSCODE_README_URL);
30 |     await writeFile(VSIX_MANIFEST_URL, JSON.stringify({
31 |       name: 'red-hat-design-tokens',
32 |       version,
33 |       publisher: 'Red Hat UX',
34 |       engines: { vscode: '^1.63.0' },
35 |       license: 'MIT',
36 |       description: 'Red Hat Design System Tokens',
37 |       homepage: 'https://ux.redhat.com',
38 |       displayName: 'Red Hat Design Tokens',
39 |       categories: ['Snippets'],
40 |       contributes: {
41 |         snippets: [
42 |           { language: 'css', path: './snippets.json' },
43 |           { language: 'scss', path: './snippets.json' },
44 |         ],
45 |       },
46 |       bugs: {
47 |         url: 'https://github.com/redhat-ux/red-hat-design-tokens/issues',
48 |       },
49 |       repository: {
50 |         type: 'git',
51 |         url: 'https://github.com/redhat-ux/red-hat-design-tokens',
52 |       },
53 |     }, null, 2), 'utf8');
54 |   },
55 |   async undo() {
56 |     await rm(VSIX_MANIFEST_URL);
57 |     await rm(VSCODE_LICENSE_URL);
58 |     await rm(VSCODE_README_URL);
59 |   },
60 | };
61 | 
62 | 


--------------------------------------------------------------------------------
/lib/predicates.ts:
--------------------------------------------------------------------------------
 1 | import type { Token } from 'style-dictionary';
 2 | 
 3 | export type Predicate = (token: Token) => boolean;
 4 | 
 5 | export const and = (p: Predicate, q: Predicate): Predicate => x => p(x) && q(x);
 6 | export const not = (p: Predicate): Predicate => x => !p(x);
 7 | 
 8 | export const isColor: Predicate = token =>
 9 |   token.$type === 'color';
10 | 
11 | export const isDeprecatedRGBHSL: Predicate = token =>
12 |   !!token.path.at(-1).match(/rgb|hsl/);
13 | 
14 | export const isBreakpoint: Predicate = token =>
15 |   token.path.includes('breakpoint');
16 | 
17 | export const isMobile: Predicate = token =>
18 |   token.path.includes('mobile');
19 | 
20 | export const isTablet: Predicate = token =>
21 |   token.path.includes('tablet');
22 | 
23 | export const isShadow: Predicate = token =>
24 |   token.$type === 'shadow';
25 | 
26 | export const isCubicBezier: Predicate = token =>
27 |   token.$type === 'cubicBezier';
28 | 
29 | export const isFontFamily: Predicate = token =>
30 |   token.$type === 'fontFamily';
31 | 
32 | export const isFontWeight: Predicate = token =>
33 |   token.$type === 'fontWeight';
34 | 
35 | export const isMediaQuery: Predicate = token =>
36 |   token.$type === 'mediaQuery';
37 | 
38 | export const hasExtensions: Predicate = token =>
39 |   !!token.$extensions;
40 | 
41 | export const isDescription = and(
42 |   hasExtensions,
43 |   token =>
44 |     token.path.at(-1) === 'description',
45 | );
46 | 
47 | export const hasDescription = and(
48 |   hasExtensions,
49 |   token =>
50 |     token.$extensions['com.redhat.ux'].description,
51 | );
52 | 
53 | export const isThemeColorToken: Predicate = token =>
54 |   isColor(token) && Array.isArray(token.original?.$value);
55 | 
56 | export const isNotThemeColorToken = not(isThemeColorToken);
57 | 
58 | export const isLightThemeColorToken = and(
59 |   isColor,
60 |   token =>
61 |     token.path.at(-1) === ('on-light'),
62 | );
63 | 
64 | const ColorPalettes = [
65 |   'lightest',
66 |   'lighter',
67 |   'light',
68 |   'dark',
69 |   'darker',
70 |   'darkest',
71 | ];
72 | 
73 | export const isSurfaceColorPaletteToken: Predicate = token =>
74 |   token.path.at(1) === 'surface'
75 |     && ColorPalettes.includes(token.path.at(-1));
76 | 
77 | export const isDarkThemeColorToken = and(
78 |   isColor,
79 |   token =>
80 |     token.path.at(-1) === ('on-dark'),
81 | );
82 | 


--------------------------------------------------------------------------------
/lib/transforms/color.ts:
--------------------------------------------------------------------------------
 1 | import type { Transform } from 'style-dictionary/types';
 2 | import type { Token } from 'style-dictionary';
 3 | 
 4 | import Color from 'tinycolor2';
 5 | import { isColor, isThemeColorToken } from '../predicates.ts';
 6 | 
 7 | /**
 8 |  * Add HEX, RGB, HSL, HSV, and isLight (boolean) to colour types
 9 |  */
10 | export const colorFormats: Transform = {
11 |   name: 'attribute/color',
12 |   type: 'attribute',
13 |   filter: isColor,
14 |   transform(token) {
15 |     const color = Color(token.$value);
16 |     const { h, s, l, a } = color.toHsl();
17 |     return {
18 |       hex: color.toHex(),
19 |       rgb: color.toRgb(),
20 |       hsl: { h, s: s * 100, l: l * 100, a },
21 |       hsv: color.toHsv(),
22 |       isLight: color.isLight(),
23 |     };
24 |   },
25 | };
26 | 
27 | /**
28 |  * Use HSL values
29 |  */
30 | export const hslValue: Transform = {
31 |   name: 'color/css/hsl',
32 |   transitive: true,
33 |   type: 'value',
34 |   filter: x => isColor(x) && x.path.at(-1).endsWith('hsl'),
35 |   transform(token) {
36 |     const { h, s, l } = token.attributes.hsl as { h: string; s: string; l: string };
37 |     token.$value = `${h} ${s}% ${l}%`;
38 |     return token.$value;
39 |   },
40 | };
41 | 
42 | /**
43 |  * Use rgb values
44 |  */
45 | export const rgbValue: Transform = {
46 |   name: 'color/css/rgb',
47 |   transitive: true,
48 |   type: 'value',
49 |   filter: x => isColor(x) && x.path.at(-1).endsWith('rgb'),
50 |   transform(token) {
51 |     const { r, g, b } = token.attributes.rgb as { r: string; g: string; b: string };
52 |     token.$value = `${r} ${g} ${b}`;
53 |     return token.$value;
54 |   },
55 | };
56 | 
57 | const deref = (name: string, value: string | number) =>
58 |   `var(--rh-${name.replace(/[{}]/g, '').split('.').join('-')}, ${value})`;
59 | 
60 | export function getLightDarkValue(token: Token) {
61 |   if (typeof token.$value === 'string' && token.$value.startsWith('light-dark')) {
62 |     return token.$value;
63 |   } else {
64 |     const [light] = token.$value;
65 |     const dark = token.$value.at(-1);
66 |     const [lightRef] = token.original.$value;
67 |     const darkRef = token.original.$value.at(-1);
68 |     return `light-dark(${deref(lightRef, light)}, ${deref(darkRef, dark)})`;
69 |   }
70 | }
71 | 
72 | /**
73 |  * Theme tokens
74 |  */
75 | export const themeTokens: Transform = {
76 |   name: 'color/css/themetokens',
77 |   type: 'value',
78 |   transitive: true,
79 |   filter: isThemeColorToken,
80 |   transform(token) {
81 |     return getLightDarkValue(token);
82 |   },
83 | };
84 | 
85 | 


--------------------------------------------------------------------------------
/plugins/stylelint/rules/no-unknown-token-name.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from 'stylelint';
 2 | 
 3 | import { dirname, sep } from 'node:path';
 4 | import { tokens, type TokenName } from '@rhds/tokens';
 5 | 
 6 | import stylelint from 'stylelint';
 7 | import parser from 'postcss-value-parser';
 8 | 
 9 | const ruleName = 'rhds/no-unknown-token-name';
10 | 
11 | const messages = stylelint.utils.ruleMessages(ruleName, {
12 |   expected: 'Expected ...',
13 | });
14 | 
15 | const meta = {
16 |   url: 'https://github.com/RedHat-UX/red-hat-design-tokens/tree/main/plugins/stylelint/rules/no-unknown-token-name.ts',
17 |   fixable: true,
18 | };
19 | 
20 | const ruleFunction: Rule = (_, opts) => {
21 |   return (root, result) => {
22 |     // here we assume a file structure of */rh-tagname/rh-tagname.css
23 |     const tagName = dirname(root.source.input.file)
24 |         .split(sep)
25 |         .findLast(x => x.startsWith('rh-'));
26 |     const validOptions = stylelint.utils.validateOptions(result, ruleName);
27 | 
28 |     if (!validOptions) {
29 |       return;
30 |     }
31 | 
32 |     const migrations = new Map(Object.entries(opts?.migrations ?? {}));
33 |     const allowed = new Set(opts?.allowed ?? []);
34 | 
35 |     root.walk(node => {
36 |       if (node.type === 'decl') {
37 |         const parsedValue = parser(node.value);
38 |         parsedValue.walk(parsed => {
39 |           if (parsed.type === 'function' && parsed.value === 'var') {
40 |             const [child] = parsed.nodes ?? [];
41 |             const { value } = child;
42 |             if (value.startsWith('--rh')
43 |                 && !value.startsWith(`--${tagName}`)
44 |                 && !tokens.has(value)
45 |                 && !allowed.has(value)
46 |                 || migrations.has(value)) {
47 |               const message = `Expected ${value} to be a known token name`;
48 |               stylelint.utils.report({
49 |                 node,
50 |                 message,
51 |                 ruleName,
52 |                 result,
53 |                 word: value,
54 |                 index: child.sourceIndex,
55 |                 endIndex: child.sourceEndIndex,
56 |                 fix() {
57 |                   if (migrations.has(value)) {
58 |                     node.value = node.value.replace(value, migrations.get(value) as `--rh-${string}`);
59 |                   }
60 |                 },
61 |               });
62 |             }
63 |           }
64 |         });
65 |       }
66 |     });
67 |   };
68 | };
69 | 
70 | ruleFunction.ruleName = ruleName;
71 | ruleFunction.messages = messages;
72 | ruleFunction.meta = meta;
73 | 
74 | export default ruleFunction;
75 | 


--------------------------------------------------------------------------------
/test/stylelint.token-values.test.ts:
--------------------------------------------------------------------------------
 1 | import type tape from 'tape';
 2 | 
 3 | import describe from 'tape-describe';
 4 | 
 5 | import { tokens } from '@rhds/tokens';
 6 | 
 7 | import stylelint from 'stylelint';
 8 | 
 9 | async function getAutofixedCSS(codeFilename: string, code: string) {
10 |   const result = await stylelint.lint({
11 |     code,
12 |     codeFilename,
13 |     fix: true,
14 |     config: {
15 |       rules: { 'rhds/token-values': true },
16 |       plugins: ['./plugins/stylelint.js'],
17 |     },
18 |   });
19 |   return result.code;
20 | }
21 | 
22 | describe('token-values', (test: typeof tape) => {
23 |   test('simple value', async t => {
24 |     t.plan(1);
25 |     const xl = tokens.get('--rh-space-xl');
26 |     const lg = tokens.get('--rh-space-lg');
27 |     const inputcss = `a { padding: var(--rh-space-xl, ${lg}); }`;
28 |     const expected = `a { padding: var(--rh-space-xl, ${xl}); }`;
29 |     const actual = await getAutofixedCSS('simple.css', inputcss);
30 |     t.isEqual(actual, expected, 'corrects simple value');
31 |   });
32 | 
33 |   test('simple list', async t => {
34 |     t.plan(1);
35 |     const xl = tokens.get('--rh-space-xl');
36 |     const lg = tokens.get('--rh-space-lg');
37 |     const inputcss = `a { padding: var(--rh-space-xl, ${xl}) var(--rh-space-lg, ${xl}); }`;
38 |     const expected = `a { padding: var(--rh-space-xl, ${xl}) var(--rh-space-lg, ${lg}); }`;
39 |     const actual = await getAutofixedCSS('simple.css', inputcss);
40 |     t.isEqual(actual, expected, 'corrects list values');
41 |   });
42 | 
43 |   test('nested custom property value', async t => {
44 |     t.plan(1);
45 |     const xl = tokens.get('--rh-space-xl');
46 |     const lg = tokens.get('--rh-space-lg');
47 |     const inputcss = `a { padding: var(--_padding: var(--rh-space-lg, ${xl})); }`;
48 |     const expected = `a { padding: var(--_padding: var(--rh-space-lg, ${lg})); }`;
49 |     const actual = await getAutofixedCSS('nested.css', inputcss);
50 |     t.isEqual(actual, expected, 'corrects nested value');
51 |   });
52 | 
53 |   test('list with nested custom property value', async t => {
54 |     t.plan(1);
55 |     const xl = tokens.get('--rh-space-xl');
56 |     const lg = tokens.get('--rh-space-lg');
57 |     const inputcss = `a { padding: var(--_padding-inline: var(--rh-space-lg, ${xl})) var(--_padding-block: var(--rh-space-lg, ${xl})); }`;
58 |     const expected = `a { padding: var(--_padding-inline: var(--rh-space-lg, ${lg})) var(--_padding-block: var(--rh-space-lg, ${lg})); }`;
59 |     const actual = await getAutofixedCSS('list-nested.css', inputcss);
60 |     t.isEqual(actual, expected);
61 |   });
62 | });
63 | 


--------------------------------------------------------------------------------
/docs/assets/script.js:
--------------------------------------------------------------------------------
 1 | import '@rhds/elements';
 2 | 
 3 | for (const button of document.querySelectorAll('.copy-button')) {
 4 |   button.addEventListener('click', async function(event) {
 5 |     const text = event.target.closest('[data-copy]')?.dataset?.copy ?? button.textContent;
 6 |     await navigator.clipboard.writeText(text.trim());
 7 |   });
 8 | }
 9 | 
10 | for (const details of document.querySelectorAll('.variants details')) {
11 |   details.addEventListener('toggle', function(event) {
12 |     event.target.closest('tr.variants')?.classList.toggle('open', event.target.open);
13 |   });
14 | }
15 | 
16 | document.getElementById('global-palette')
17 |     .addEventListener('submit', e => e.preventDefault());
18 | 
19 | const modeSwitch = document.getElementById('mode-switch');
20 | 
21 | const surface = document.getElementById('main-surface');
22 | 
23 | modeSwitch.addEventListener('change', function(event) {
24 |   const next = event.target.checked ? 'darkest' : 'lightest';
25 |   surface.colorPalette = next;
26 | });
27 | 
28 | // START HACK remove after merging themes into rhds
29 | const hackables = document.querySelectorAll('rh-surface:not(#main-header),rh-card');
30 | const adopted = new WeakSet();
31 | 
32 | async function hack(element) {
33 |   await element.updateComplete;
34 |   element.shadowRoot.firstElementChild.classList.add('on');
35 |   if (!element.on || element === surface) {
36 |     element.shadowRoot.firstElementChild.classList.remove('light');
37 |     element.shadowRoot.firstElementChild.classList.remove('dark');
38 |     element.shadowRoot.firstElementChild.classList.add(
39 |       (element.colorPalette || 'lightest').replace(/er|est/, ''),
40 |     );
41 |   }
42 | }
43 | 
44 | async function adopt(element) {
45 |   if (!adopted.has(element)) {
46 |     adopted.add(element);
47 |     await element.updateComplete;
48 |     element.shadowRoot.adoptedStyleSheets = [
49 |       ...element.shadowRoot.adoptedStyleSheets,
50 |       styleSheet,
51 |     ];
52 |   }
53 | }
54 | 
55 | function hackEm() {
56 |   for (const element of hackables) {
57 |     adopt(element);
58 |     hack(element);
59 |   }
60 | }
61 | 
62 | const asText = response => response.text();
63 | const providerStyles =
64 |   await fetch('/assets/packages/@rhds/tokens/css/color-context-provider.css').then(asText);
65 | const consumerStyles =
66 |   await fetch('/assets/packages/@rhds/tokens/css/color-context-consumer.css').then(asText);
67 | const styleSheet = new CSSStyleSheet();
68 | styleSheet.replaceSync([providerStyles, consumerStyles].join('\n'));
69 | 
70 | hackEm();
71 | modeSwitch.addEventListener('change', hackEm);
72 | 
73 | // END HACK
74 | 


--------------------------------------------------------------------------------
/plugins/stylelint/rules/deprecated.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from 'stylelint';
 2 | 
 3 | import { tokens, type TokenName } from '@rhds/tokens/meta.js';
 4 | 
 5 | import stylelint from 'stylelint';
 6 | import parser from 'postcss-value-parser';
 7 | 
 8 | const ruleName = 'rhds/deprecated';
 9 | 
10 | const messages = stylelint.utils.ruleMessages(ruleName, {
11 |   expected: '...',
12 | });
13 | 
14 | const meta = {
15 |   url: 'https://github.com/RedHat-UX/red-hat-design-tokens/tree/main/plugins/stylelint/rules/deprecated.ts',
16 |   fixable: true,
17 | };
18 | 
19 | function isVarCall(parsedNode: parser.Node): parsedNode is parser.FunctionNode {
20 |   return parsedNode.type === 'function'
21 |     && parsedNode.value === 'var';
22 | }
23 | 
24 | const ruleFunction: Rule = () => {
25 |   return (root, result) => {
26 |     const validOptions = stylelint.utils.validateOptions(result, ruleName);
27 | 
28 |     if (!validOptions) {
29 |       return;
30 |     }
31 | 
32 |     root.walk(node => {
33 |       if (node.type === 'decl') {
34 |         const parsedValue = parser(node.value);
35 |         parsedValue.walk(parsedNode => {
36 |           if (isVarCall(parsedNode)) {
37 |             const [value, ...fallback] = parsedNode.nodes ?? [];
38 |             const { value: name } = value;
39 |             if (tokens.has(name as TokenName)) {
40 |               const expected = tokens.get(name as TokenName);
41 |               if (expected?.$deprecated) {
42 |                 const replacement = `--rh-${expected.original.$value.toString().replace(/{(.*)}/, '$1').replaceAll('.', '-')}`;
43 |                 const message = `${name} is deprecated, use ${replacement} instead`;
44 |                 stylelint.utils.report({
45 |                   node,
46 |                   message,
47 |                   ruleName,
48 |                   result,
49 |                   word: name,
50 |                   index: value.sourceIndex,
51 |                   endIndex: value.sourceEndIndex,
52 |                   fix() {
53 |                     const prefix = node.value.slice(0, parsedNode.sourceIndex);
54 |                     const infix = `var(${replacement}${fallback?.map(node => node.value)?.join('') ?? ''})`;
55 |                     const suffix = node.value.slice(parsedNode.sourceEndIndex);
56 |                     node.value = `${prefix}${infix}${suffix}`;
57 |                   },
58 |                 });
59 |               }
60 |             }
61 |           }
62 |         });
63 |       }
64 |     });
65 |   };
66 | };
67 | 
68 | ruleFunction.ruleName = ruleName;
69 | ruleFunction.messages = messages;
70 | ruleFunction.meta = meta;
71 | 
72 | export default ruleFunction;
73 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   release:
10 |     # Prevents changesets action from creating a PR on forks
11 |     if: github.repository == 'RedHat-UX/red-hat-design-tokens'
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |       - uses: actions/setup-node@v3
16 |         with:
17 |           node-version-file: .nvmrc
18 |           cache: npm
19 | 
20 |       # Set up GitHub Actions caching for Wireit.
21 |       - uses: google/wireit@setup-github-actions-caching/v2
22 | 
23 |       - run: npm ci --prefer-offline
24 |       - run: npm test
25 |       - run: npm run build
26 | 
27 |       - name: Create Release Pull Request or Publish to npm
28 |         id: changesets
29 |         uses: changesets/action@v1
30 |         with:
31 |           publish: npx changeset publish
32 |           commit: "chore: prepare release"
33 |           title: "chore: prepare release"
34 |         env:
35 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
36 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
37 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
38 | 
39 |       # changesets action outputs `publishedPackages` in the format
40 |       #   [{"name": "@xx/xx", "version": "1.2.0"}, {"name": "@xx/xy", "version": "0.8.9"}]
41 |       # The following step converts that list of objects to a single string of form "1.0.0-beta.0"
42 |       - name: Transform Tags
43 |         id: get-tag
44 |         if: ${{ steps.changesets.outputs.published == 'true' }}
45 |         run: |
46 |           tag=$(echo '${{ steps.changesets.outputs.publishedPackages }}' | jq -c '.[0].version')
47 |           echo "$tag"
48 |           echo "::set-output name=tag::$tag"
49 | 
50 |       - run: npm run package-vscode
51 | 
52 |       - name: Upload release artifact
53 |         uses: actions/github-script@v6
54 |         if: ${{ steps.changesets.outputs.published == 'true' }}
55 |         with:
56 |           debug: ${{ secrets.ACTIONS_RUNNER_DEBUG }}
57 |           github-token: ${{ secrets.GITHUB_TOKEN }}
58 |           script: |
59 |             const workspace = '${{ github.workspace }}';
60 |             const tag = 'v' + ${{ steps.get-tag.outputs.tag }};
61 |             const { release } = await import('${{ github.workspace }}/lib/release.js');
62 |             await release({ core, github, tag, workspace });
63 | 
64 |       - name: Publish VSCode
65 |         if: ${{ steps.changesets.outputs.published == 'true' }}
66 |         run: |
67 |           cd editor/vscode
68 |           npx vsce publish --pre-release
69 |         env:
70 |           VSCE_PAT: ${{ secrets.VSCE_PAT }}
71 | 


--------------------------------------------------------------------------------
/lib/release.ts:
--------------------------------------------------------------------------------
 1 | import { readFile, readdir } from 'node:fs/promises';
 2 | 
 3 | const vscodeDir = new URL('../editor/vscode/', import.meta.url);
 4 | 
 5 | const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
 6 | 
 7 | /**
 8 |  * Wait exponentially longer, by seconds, each time we fail to fetch the release
 9 |  * @param  fn async function to be backed off
10 |  * @param  retries current count of retries
11 |  * @param  max Max number of retries
12 |  */
13 | async function backoff<T>(fn: (...args: any[]) => T, retries = 0, max = 10): Promise<T> {
14 |   try {
15 |     return await fn();
16 |   } catch (e) {
17 |     if (retries > max) {
18 |       throw e;
19 |     } else {
20 |       await sleep(2 ** retries * 1000);
21 |       return backoff(fn, retries + 1);
22 |     }
23 |   }
24 | }
25 | 
26 | /**
27 |  * Github actions script to upload and release a VSIX bundle
28 |  * @param args
29 |  * @param args.core github core api
30 |  * @param args.github github github api
31 |  * @param args.tag commit tag
32 |  * @param args.workspace cwd
33 |  */
34 | export async function release({ core, github, tag, workspace }) {
35 |   const owner = 'RedHat-UX';
36 |   const repo = 'red-hat-design-tokens';
37 | 
38 |   core.debug({ workspace, owner, repo, vscodeDir, tag });
39 | 
40 |   try {
41 |     const files = await readdir(vscodeDir);
42 | 
43 |     core.debug({ files });
44 | 
45 |     const filename = files.find(file => file.endsWith('vsix'));
46 | 
47 |     core.debug({ filename });
48 | 
49 |     if (!filename) {
50 |       throw new Error('Could not find release');
51 |     }
52 | 
53 |     // Filename should match release tag
54 |     const version = filename.slice(22, -5);
55 |     const releaseVersion = tag.slice(1);
56 |     if (version !== releaseVersion) {
57 |       throw new Error('Filename version does not match release tag');
58 |     }
59 | 
60 |     const response = await backoff(() =>
61 |       github.rest.repos.getReleaseByTag({ owner, repo, tag }));
62 | 
63 |     const release = response.data;
64 | 
65 |     // Delete any existing asset with that name
66 |     for (const asset of release.assets ?? []) {
67 |       if (asset.name === filename) {
68 |         core.info(`Found ${filename} for ${tag}, deleting`);
69 |         await github.rest.repos.deleteReleaseAsset({ owner, repo, asset_id: asset.id });
70 |       }
71 |     }
72 | 
73 |     // Upload the all-repo bundle to the release
74 |     const data = await readFile(new URL(`./${filename}`, vscodeDir));
75 | 
76 |     core.info(`Uploading ${filename} to ${tag}`);
77 | 
78 |     await github.rest.repos.uploadReleaseAsset({
79 |       tag, release_id: release.id,
80 |       owner, repo,
81 |       name: filename, data,
82 |     });
83 |   } catch (error) {
84 |     core.error(error);
85 |   }
86 | }
87 | 


--------------------------------------------------------------------------------
/tokens/breakpoints.yml:
--------------------------------------------------------------------------------
  1 | breakpoint:
  2 |   $type: dimension
  3 |   $extensions:
  4 |     com.redhat.ux:
  5 |       use: breakpoint
  6 |       heading: Breakpoints
  7 |       descriptionFile: breakpoints.md
  8 | 
  9 |   2xsMax:
 10 |     $value: 575px
 11 |     $description: Mobile portrait (max-width)
 12 |     $extensions:
 13 |       com.redhat.ux:
 14 |         title: Extra Extra Small (max-width)
 15 |     attributes:
 16 |       category: media
 17 |   xs:
 18 |     $value: 576px
 19 |     $description: Mobile portrait
 20 |     $extensions:
 21 |       com.redhat.ux:
 22 |         title: Extra Small
 23 |     attributes:
 24 |       category: media
 25 |   xsMax:
 26 |     $value: 767px
 27 |     $description: Mobile landscape (max-width)
 28 |     $extensions:
 29 |       com.redhat.ux:
 30 |         title: Extra Small (max-width)
 31 |     attributes:
 32 |       category: media
 33 |   sm:
 34 |     $value: 768px
 35 |     $description: Mobile landscape
 36 |     $extensions:
 37 |       com.redhat.ux:
 38 |         title: Small
 39 |     attributes:
 40 |       category: media
 41 |   smMax:
 42 |     $value: 991px
 43 |     $description: Mobile landscape (max-width)
 44 |     $extensions:
 45 |       com.redhat.ux:
 46 |         title: Small (max-width)
 47 |     attributes:
 48 |       category: media
 49 |   md:
 50 |     $value: 992px
 51 |     $description: Tablet portrait
 52 |     $extensions:
 53 |       com.redhat.ux:
 54 |         title: Medium
 55 |     attributes:
 56 |       category: media
 57 |   mdMax:
 58 |     $value: 1199px
 59 |     $description: Tablet portrait (max-width)
 60 |     $extensions:
 61 |       com.redhat.ux:
 62 |         title: Medium (max-width)
 63 |     attributes:
 64 |       category: media
 65 |   lg:
 66 |     $value: 1200px
 67 |     $description: Tablet landscape
 68 |     $extensions:
 69 |       com.redhat.ux:
 70 |         title: Large
 71 |     attributes:
 72 |       category: media
 73 |   lgMax:
 74 |     $value: 1439px
 75 |     $description: Tablet landscape (max-width)
 76 |     $extensions:
 77 |       com.redhat.ux:
 78 |         title: Large (max-width)
 79 |     attributes:
 80 |       category: media
 81 |   xl:
 82 |     $value: 1440px
 83 |     $description: Desktop small
 84 |     $extensions:
 85 |       com.redhat.ux:
 86 |         title: Extra Large
 87 |     attributes:
 88 |       category: media
 89 |   xlMax:
 90 |     $value: 1679px
 91 |     $description: Desktop small (max-width)
 92 |     $extensions:
 93 |       com.redhat.ux:
 94 |         title: Extra Large (max-width)
 95 |     attributes:
 96 |       category: media
 97 |   2xl:
 98 |     $value: 1680px
 99 |     $description: Desktop large
100 |     $extensions:
101 |       com.redhat.ux:
102 |         title: Extra Extra Large
103 |     attributes:
104 |       category: media
105 | 


--------------------------------------------------------------------------------
/plugins/stylelint/rules/token-values.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from 'stylelint';
 2 | 
 3 | import { tokens } from '@rhds/tokens';
 4 | 
 5 | import stylelint from 'stylelint';
 6 | import parser from 'postcss-value-parser';
 7 | 
 8 | const ruleName = 'rhds/token-values';
 9 | 
10 | const messages = stylelint.utils.ruleMessages(ruleName, {
11 |   expected: 'Expected ...',
12 | });
13 | 
14 | const meta = {
15 |   url: 'https://github.com/RedHat-UX/red-hat-design-tokens/tree/main/plugins/stylelint/rules/token-values.ts',
16 |   fixable: true,
17 | };
18 | 
19 | function isVarCall(parsedNode: parser.Node): parsedNode is parser.FunctionNode {
20 |   return parsedNode.type === 'function'
21 |     && parsedNode.value === 'var'
22 |     && parsedNode.nodes.length > 1;
23 | }
24 | 
25 | const ruleFunction: Rule = () => {
26 |   return (root, result) => {
27 |     const validOptions = stylelint.utils.validateOptions(result, ruleName);
28 | 
29 |     if (!validOptions) {
30 |       return;
31 |     }
32 | 
33 |     root.walk(node => {
34 |       if (node.type === 'decl') {
35 |         const parsedValue = parser(node.value);
36 |         parsedValue.walk(parsedNode => {
37 |           if (isVarCall(parsedNode)) {
38 |             const [value, , ...values] = parsedNode.nodes ?? [];
39 |             const { value: name } = value;
40 |             if (tokens.has(name)) {
41 |               const actual = parser.stringify(values);
42 |               const expected = tokens.get(name);
43 |               if (expected === null && actual == null) {
44 |                 return;
45 |               } else if ((expected as string)?.toString() !== actual) {
46 |                 const message =
47 |                     expected === null ? `Expected ${name} to not have a fallback value`
48 |                   : `Expected ${name} to equal ${expected}`;
49 |                 stylelint.utils.report({
50 |                   node,
51 |                   message,
52 |                   ruleName,
53 |                   result,
54 |                   word: name,
55 |                   index: value.sourceIndex,
56 |                   endIndex: value.sourceEndIndex,
57 |                   fix() {
58 |                     const prefix = node.value.slice(0, parsedNode.sourceIndex);
59 |                     let infix = `var(${name}, ${expected})`;
60 |                     const suffix = node.value.slice(parsedNode.sourceEndIndex);
61 |                     if (expected === null) {
62 |                       infix = `var(${name})`;
63 |                     }
64 |                     node.value = `${prefix}${infix}${suffix}`;
65 |                   },
66 |                 });
67 |               }
68 |             }
69 |           }
70 |         });
71 |       }
72 |     });
73 |   };
74 | };
75 | 
76 | ruleFunction.ruleName = ruleName;
77 | ruleFunction.messages = messages;
78 | ruleFunction.meta = meta;
79 | 
80 | export default ruleFunction;
81 | 


--------------------------------------------------------------------------------
/lib/formats/rhds.ts:
--------------------------------------------------------------------------------
 1 | import type { DesignToken, Format } from 'style-dictionary/types';
 2 | import type { Dictionary } from 'style-dictionary';
 3 | import { fileHeader, getReferences } from 'style-dictionary/utils';
 4 | import { isSurfaceColorPaletteToken, isThemeColorToken } from '../predicates.ts';
 5 | import { constructStyleSheet } from './lit.ts';
 6 | 
 7 | function dereferenceToken(token: DesignToken, dictionary: Dictionary) {
 8 |   const references = getReferences(token, dictionary.unfilteredTokens);
 9 |   if (references.length > 1) {
10 |     // eslint-disable-next-line no-console
11 |     console.warn(`WARNING: ${token.name} has multiple references: ${references.map(r => r.name)}`);
12 |   }
13 |   const [first] = references;
14 |   return first;
15 | }
16 | 
17 | function getThemeTokensForConsumer(dictionary: Dictionary) {
18 |   return dictionary.allTokens.filter(isThemeColorToken).map(token => {
19 |     switch (token.name) {
20 |       case 'rh-color-surface': return /* css */`\
21 |   --rh-color-surface:
22 |     light-dark(
23 |       var(--rh-color-surface-lightest, ${dictionary.allTokens.find(x => x.name === 'rh-color-surface-lightest').$value}),
24 |       var(--rh-color-surface-darkest, ${dictionary.allTokens.find(x => x.name === 'rh-color-surface-darkest').$value})
25 |     );`;
26 |     }
27 | 
28 |     const [light, dark] = token.original.$value.map(x => dereferenceToken(x, dictionary));
29 | 
30 |     return /* css */`\
31 |   --${token.name}:
32 |     light-dark(
33 |       var(--${light.name}, ${light.$value}),
34 |       var(--${dark.name}, ${dark.$value})
35 |     );`;
36 |   }).join('\n');
37 | }
38 | 
39 | function consumer(dictionary: Dictionary) {
40 |   return /* css*/`
41 | :root {\n${getThemeTokensForConsumer(dictionary)}\n}
42 | `;
43 | }
44 | 
45 | function provider({ allTokens }: Dictionary) {
46 |   const surfaceTokens = allTokens.filter(isSurfaceColorPaletteToken);
47 |   return /* css*/`
48 | :host { color-scheme: inherit; }
49 | :host([color-palette^="dark"]) { color-scheme: only dark; }
50 | :host([color-palette^="light"]) { color-scheme: only light; }
51 | ${surfaceTokens.map(({ name, path, $value }) => /* css */`
52 | :host([color-palette="${path.at(-1)}"]) { --rh-color-surface: var(--${name}, ${$value}); }`.trimStart()).join('\n')}`;
53 | }
54 | 
55 | const formatter = (fn: (d: Dictionary) => string) =>
56 |   async ({ file, dictionary }) =>
57 |     `${await fileHeader({ file })}${fn(dictionary)}`;
58 | 
59 | export const cssRhdsDefaultTheme: Format = {
60 |   name: 'css/rhds/default-theme',
61 |   format: formatter(consumer),
62 | };
63 | 
64 | export const jsRhdsDefaultTheme: Format = {
65 |   name: 'js/rhds/default-theme',
66 |   format: formatter(x => constructStyleSheet(consumer(x))),
67 | };
68 | 
69 | export const cssRhdsColorPalette: Format = {
70 |   name: 'css/rhds/color-palette',
71 |   format: formatter(provider),
72 | };
73 | 
74 | export const jsRhdsColorPalette: Format = {
75 |   name: 'js/rhds/color-palette',
76 |   format: formatter(x => constructStyleSheet(provider(x))),
77 | };
78 | 


--------------------------------------------------------------------------------
/lib/formats/editor/hexokinase.ts:
--------------------------------------------------------------------------------
 1 | import type { Token } from 'style-dictionary';
 2 | import type { Format } from 'style-dictionary/types';
 3 | 
 4 | import { isColor, isDeprecatedRGBHSL, not } from '../../predicates.ts';
 5 | 
 6 | /**
 7 |  * Recursively creates a list of entries matching token names with values
 8 |  * @param token token to match against
 9 |  */
10 | function pairRefNameWithValue(token: Token) {
11 |   if (typeof token.$value === 'string') {
12 |     const name =
13 |            typeof token.original?.$value === 'string'
14 |         && token.original?.$value?.startsWith('{') ? token.original.$value.replace(/\._}$/, '}')
15 |       : `{${token.path.reduce((a, b) => `${a}.${b}`, '')}}`.replace(/^\{\./, '{');
16 |     return [[name, token.$value]];
17 |   } else if (token.$value) {
18 |     return Object.fromEntries(Object.entries(token.$value)
19 |         .map(pairRefNameWithValue));
20 |   } else {
21 |     return [];
22 |   }
23 | }
24 | 
25 | /**
26 |  * Recursively creates a list of entries matching token names with values
27 |  * @param token token to match against
28 |  */
29 | function pairVarNameWithValue(token: Token) {
30 |   if (typeof token.$value === 'string') {
31 |     const name = `--rh-${token.path.filter(x => x !== '_').join('-')}`;
32 |     console.log(token.$value, token.$value.match(/#\w{6}/));
33 |     return [[name, token.$value.match(/#\w{6}/)?.pop() ?? token.$value]];
34 |   } else if (token.$value) {
35 |     return Object.fromEntries(Object.entries(token.$value)
36 |         .map(pairVarNameWithValue));
37 |   } else {
38 |     return [];
39 |   }
40 | }
41 | 
42 | /**
43 |  * `{color.`
44 |  * capture group 1: **WORD** (_>= 1x_)
45 |  * `.`
46 |  * capture group 2: **0-9** (_1-3x_)
47 |  * `}`
48 |  */
49 | const COLOR_REF_RE = /{color(\.[\w-]+)+}/;
50 | const COLOR_VAR_RE = /var\(--rh-color(-[\w-]+)+\)/;
51 | const STRIP_SLS_RE = /^\/|\/$/g;
52 | 
53 | const patternize = (re: RegExp) => re.toString().replace(STRIP_SLS_RE, '');
54 | 
55 | /**
56 |  * Exports [vim-hexokinase](https://github.com/RRethy/vim-hexokinase)
57 |  * custom patterns for token refs e.g. `{color.gray.90}`
58 |  */
59 | export const hexokinaseRefs: Format = {
60 |   name: 'editor/hexokinase/refs',
61 |   format: ({ dictionary }) =>
62 |     JSON.stringify({
63 |       regex_pattern: patternize(COLOR_REF_RE),
64 |       colour_table: Object.fromEntries(
65 |         dictionary.allTokens
66 |             .filter(isColor)
67 |             .filter(not(isDeprecatedRGBHSL))
68 |             .flatMap(pairRefNameWithValue)
69 |             .sort()),
70 |     }, null, 2),
71 | };
72 | 
73 | /**
74 |  * Exports [vim-hexokinase](https://github.com/RRethy/vim-hexokinase)
75 |  * custom patterns for token refs e.g. `{color.gray.90}`
76 |  */
77 | export const hexokinaseVars: Format = {
78 |   name: 'editor/hexokinase/vars',
79 |   format: ({ dictionary }) =>
80 |     JSON.stringify({
81 |       regex_pattern: patternize(COLOR_VAR_RE),
82 |       colour_table: Object.fromEntries(
83 |         dictionary.allTokens
84 |             .filter(isColor)
85 |             .filter(not(isDeprecatedRGBHSL))
86 |             .flatMap(pairVarNameWithValue)
87 |             .sort()),
88 |     }, null, 2),
89 | };
90 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-lg.svg:
--------------------------------------------------------------------------------
 1 | <svg viewBox="0 0 1144 868" xmlns="http://www.w3.org/2000/svg">
 2 |     <g transform="rotate(90 572 572)">
 3 |         <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="102" ry="12.17"/>
 4 |         <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="50" ry="12.17"/>
 5 |         <g transform="rotate(-90 603.2 725.35) scale(2.43045)">
 6 |             <path fill="#020202" d="M157.29 163.47h60.27a8.66 8.66 0 0 0 8.66-8.66v-51.24a8.66 8.66 0 0 0-8.66-8.66h-60.27a8.66 8.66 0 0 0-8.67 8.66v51.24a8.66 8.66 0 0 0 8.67 8.66zm179.61 63.5h-54.71a8.66 8.66 0 0 0-8.66 8.66V355.6a8.66 8.66 0 0 0 8.66 8.66h54.7a8.66 8.66 0 0 0 8.67-8.66V235.63a8.66 8.66 0 0 0-8.67-8.66z"/>
 7 |             <path fill="#020202" d="M341.4 87.59h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.65h91.53a8.32 8.32 0 1 0 0-16.65zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm-99.85 66.57h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.65z"/>
 8 |             <path fill="#020202" d="M241.55 320.58h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm99.85-166.42H148.62a8.32 8.32 0 1 0 0 16.64H341.4a8.32 8.32 0 1 0 0-16.64z"/>
 9 |         </g>
10 |         <circle fill="#fff" cx="430.46" cy="1092" r="30"/>
11 |         <path fill="#020202" stroke-width="2.63288" d="M90.8 113.92v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73S90.8 100.8 90.8 113.92zm80.48 0v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.49 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
12 |         <path fill="#020202" stroke-width="2.63288" d="M332.25 113.92v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.49 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
13 |         <path fill="#020202" stroke-width="2.63288" d="M493.22 113.92v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.48 0v261.06c0 13.12 9.05 23.74 20.23 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
14 |         <path fill="#020202" stroke-width="2.63288" d="M654.2 113.92v261.06c0 13.12 9.04 23.74 20.22 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.48 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
15 |         <path fill="#fff" stroke="#000" stroke-width="10" paint-order="stroke markers fill" d="M759.62 440.3H103.06"/>
16 |     </g>
17 | </svg>
18 | 
19 | 


--------------------------------------------------------------------------------
/docs/assets/breakpoints/device-rh-breakpoint-md-max.svg:
--------------------------------------------------------------------------------
 1 | <svg viewBox="0 0 1144 868" xmlns="http://www.w3.org/2000/svg">
 2 |     <g transform="rotate(90 572 572)">
 3 |         <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="102" ry="12.17"/>
 4 |         <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="50" ry="12.17"/>
 5 |         <g transform="rotate(-90 603.2 725.35) scale(2.43045)">
 6 |             <path fill="#020202" d="M157.29 163.47h60.27a8.66 8.66 0 0 0 8.66-8.66v-51.24a8.66 8.66 0 0 0-8.66-8.66h-60.27a8.66 8.66 0 0 0-8.67 8.66v51.24a8.66 8.66 0 0 0 8.67 8.66zm179.61 63.5h-54.71a8.66 8.66 0 0 0-8.66 8.66V355.6a8.66 8.66 0 0 0 8.66 8.66h54.7a8.66 8.66 0 0 0 8.67-8.66V235.63a8.66 8.66 0 0 0-8.67-8.66z"/>
 7 |             <path fill="#020202" d="M341.4 87.59h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.65h91.53a8.32 8.32 0 1 0 0-16.65zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm-99.85 66.57h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.65z"/>
 8 |             <path fill="#020202" d="M241.55 320.58h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm99.85-166.42H148.62a8.32 8.32 0 1 0 0 16.64H341.4a8.32 8.32 0 1 0 0-16.64z"/>
 9 |         </g>
10 |         <circle fill="#fff" cx="430.46" cy="1092" r="30"/>
11 |         <path fill="#020202" stroke-width="2.63288" d="M90.8 113.92v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73S90.8 100.8 90.8 113.92zm80.48 0v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.49 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
12 |         <path fill="#020202" stroke-width="2.63288" d="M332.25 113.92v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.49 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
13 |         <path fill="#020202" stroke-width="2.63288" d="M493.22 113.92v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.48 0v261.06c0 13.12 9.05 23.74 20.23 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
14 |         <path fill="#020202" stroke-width="2.63288" d="M654.2 113.92v261.06c0 13.12 9.04 23.74 20.22 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.48 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
15 |         <path fill="#fff" stroke="#000" stroke-width="10" paint-order="stroke markers fill" d="M759.62 440.3H103.06"/>
16 |     </g>
17 | </svg>
18 | 
19 | 


--------------------------------------------------------------------------------
/lib/formats/modules.ts:
--------------------------------------------------------------------------------
 1 | import type { Format } from 'style-dictionary/types';
 2 | import type { Token } from 'style-dictionary';
 3 | 
 4 | import { mkdir, writeFile } from 'node:fs/promises';
 5 | import { join, dirname } from 'node:path';
 6 | 
 7 | import * as Predicates from '../predicates.ts';
 8 | 
 9 | import { fileHeader } from 'style-dictionary/utils';
10 | import { colorFormats } from '../transforms.ts';
11 | 
12 | function camelcase(str: string): string {
13 |   const a = str.toLowerCase()
14 |       .replace(/[-_\s.]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');
15 |   return a.substring(0, 1).toLowerCase() + a.substring(1);
16 | }
17 | 
18 | function deserializeShadow(x: Token) {
19 |   if (typeof x.$value === 'object') {
20 |     return JSON.stringify(x.$value);
21 |   } else {
22 |     const [offsetX, offsetY, blur, spread, color] = x.$value.split(' ');
23 |     return JSON.stringify({ offsetX, offsetY, blur, spread, color });
24 |   }
25 | }
26 | 
27 | const capitalize = (x: string) => `${x.at(0).toUpperCase()}${x.slice(1)}`;
28 | 
29 | function mediaRef(x: Token) {
30 |   const values = [];
31 |   const stringified = JSON.stringify(x.original.$value, (_, value) => {
32 |     const [, inner] = value?.match?.(/^\{(.*)\}$/) ?? [];
33 |     if (inner) {
34 |       const v = inner.split('.').map(capitalize).join('');
35 |       values.push(v);
36 |       return v.replace(/"(.*)"/, '$1');
37 |     } else {
38 |       return value;
39 |     }
40 |   });
41 |   const r = `${stringified.replace(new RegExp(`"(${values.join('|')})"`), '$1')} as const`;
42 |   return r;
43 | }
44 | 
45 | /**
46 |  * Per-category javascript modules
47 |  * @example ```js
48 |  *          import { Red300 } from '@rhds/tokens/color.js';
49 |  *          ```
50 |  */
51 | export const modules: Format = {
52 |   name: 'javascript/modules',
53 |   async format({ file, dictionary, platform, options }) {
54 |     const categories = new Set(dictionary.allTokens.map(x => x.attributes.category));
55 |     for (const name of categories) {
56 |       const outpath = join(process.cwd(), platform.buildPath, `${name}.ts`);
57 |       const category = dictionary
58 |           .allTokens
59 |           .filter(x => x.attributes?.category === name)
60 |       // don't output -rgb and -hsl tokens, because colours here are structured data which includes hsl and rgb values
61 |           .filter(x => !Predicates.isColor(x) || !x.name.match(/(rgb|hsl)$/i));
62 |       const defs = category
63 |           .map(x => {
64 |             const value =
65 |               Predicates.isColor(x) ? JSON.stringify(colorFormats.transform(
66 |                 structuredClone(x),
67 |                 platform,
68 |                 options,
69 |               ))
70 |             : Predicates.isShadow(x) ? deserializeShadow(x)
71 |             : Predicates.isMediaQuery(x) ? mediaRef(x)
72 |             : JSON.stringify(x.$value);
73 |             return `export const ${capitalize(camelcase(x.name))}${Predicates.isColor(x) ? ': Color' : ''} = ${value};`;
74 |           });
75 |       const hasColors = category.some(x => Predicates.isColor(x));
76 |       const contents = [
77 |         await fileHeader({ file }),
78 |         ...!hasColors ? [] : ['import type { Color } from "./tokens.js";'],
79 |         ...defs,
80 |       ].join('\n');
81 | 
82 |       await mkdir(dirname(outpath), { recursive: true });
83 |       await writeFile(outpath, contents, 'utf8');
84 |     }
85 |     const content = [
86 |       await fileHeader({ file }),
87 |       ...Array.from(categories, x => `export * from './${x}.js';`),
88 |     ].join('\n');
89 |     return content;
90 |   },
91 | };
92 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | # Contributing
  2 | Contributions to Red Hat's design tokens are welcome, and must abide by our [code of conduct](https://github.com/RedHat-UX/red-hat-design-system/blob/main/CODE_OF_CONDUCT.md).
  3 | 
  4 | ## Getting Started
  5 | 
  6 | ```sh
  7 | npm ci
  8 | npm run style-dictionary
  9 | ```
 10 | 
 11 | <small>
 12 | 
 13 | If you receive an error `Package libsecret-1 was not found in the pkg-config search path.` when
 14 | running `npm ci`, you may need to install `libsecret` sources. This is necessary to package and
 15 | publish VSCode snippets.
 16 | 
 17 | Fedora/RHEL:
 18 | ```sh
 19 | sudo dnf install libsecret-devel
 20 | ```
 21 | Debian/Ubuntu:
 22 | ```sh
 23 | sudo apt-get install libsecret-1-dev
 24 | ```
 25 | Arch:
 26 | ```sh
 27 | sudo pacman -S libsecret
 28 | ```
 29 | 
 30 | </small>
 31 | 
 32 | You should see something like this output:
 33 | ```
 34 | ```css
 35 | ✔︎ css/global.css
 36 | ✔︎ css/shared.css
 37 | ✔︎ css/reset.css.js
 38 | 
 39 | scss
 40 | ✔︎ scss/_variables.scss
 41 | 
 42 | json
 43 | ✔︎ json/rhds.tokens.json
 44 | 
 45 | js
 46 | ✔︎ js/rhds.tokens.js
 47 | ✔︎ js/tokens.d.ts
 48 | ✔︎ js/tokens.cjs
 49 | ✔︎ js/tokens.d.cts
 50 | 
 51 | html
 52 | ✔︎ build/index.html
 53 | 
 54 | editor
 55 | ✔︎ editor/vscode.json
 56 | ✔︎ editor/hexokinase.json
 57 | ```
 58 | 
 59 | ## Dev Server
 60 | 
 61 | To build automatically whenever you save inputs or the config file, open a terminal and run
 62 | 
 63 | ```sh
 64 | npm run build watch
 65 | ```
 66 | 
 67 | To develop tokens against a dev server / demo, run the above command, then in a separate terminal run
 68 | 
 69 | ```sh
 70 | npm run start
 71 | ```
 72 | 
 73 | ## Defining Tokens
 74 | 
 75 | Tokens are defined in [YAML](https://yaml.org) files, following the [Design Tokens Draft Community Group Report](https://design-tokens.github.io/community-group/format/).
 76 | 
 77 | ### YAML Notes
 78 | YAML strings do not need to be quoted, unless they start with a special character. Therefore, `$description`s should not be quoted, but color values and references should.
 79 | 
 80 | If a token has both a value _and_ nested tokens, e.g. `rh-color-brand-red` and `rh-color-brand-red-lighter`, then the top-level value must be defined under `_`. This is a workaround, and will likely become unnecessary if any when [style-dictionary adopts the draft community group report on token format](https://github.com/amzn/style-dictionary/issues/643#issuecomment-1143493745).
 81 | 
 82 | ```yaml
 83 | color:
 84 |   red:
 85 |     # Hex values must be quoted
 86 |     50:
 87 |       $value: "#faeae8"
 88 |       # Comments should not be quoted
 89 |       $description: Danger Alert background
 90 |     100:
 91 |       $value: "#fddbdb"
 92 |     200:
 93 |       $value: "#fab6b6"
 94 |     300:
 95 |       $value: "#f56d6d"
 96 |     400:
 97 |       $value: "#ee0000"
 98 |     500:
 99 |       $value: "#be0000"
100 |     600:
101 |       $value: "#8f0000"
102 |     700:
103 |       $value: "#5f0000"
104 | 
105 |   brand:
106 |     red:
107 |       # parent values must be defined under `_`
108 |       _:
109 |         # value aliases must be quoted
110 |         $value: "{color.red.400}"
111 |         $description: Brand red
112 |       lightest:
113 |         $value: "{color.red.100}"
114 |         $description: Lightest brand red
115 |       lighter:
116 |         $value: "{color.red.200}"
117 |         $description: lighter brand red
118 |       light:
119 |         $value: "{color.red.300}"
120 |         $description: Light brand red
121 |       dark:
122 |         $value: "{color.red.500}"
123 |         $description: Dark brand red/Brand red hover
124 |       darker:
125 |         $value: "{color.red.600}"
126 |         $description: Darker brand red
127 |       darkest:
128 |         $value: "{color.red.700}"
129 |         $description: Darkest brand red
130 | ```
131 | 


--------------------------------------------------------------------------------
/tokens/font/size.yml:
--------------------------------------------------------------------------------
  1 | font:
  2 |   size:
  3 |     $type: dimension
  4 | 
  5 |     body-text:
  6 |       $extensions:
  7 |         com.redhat.ux:
  8 |           heading: Font size (text)
  9 |           example: Aa
 10 |       xs:
 11 |         $value: 0.75rem
 12 |         $description: 12px font size
 13 |         attributes:
 14 |           category: typography
 15 |           type: font-size
 16 |       sm:
 17 |         $value: 0.875rem
 18 |         $description: 14px font size
 19 |         attributes:
 20 |           category: typography
 21 |           type: font-size
 22 |       md:
 23 |         $value: 1rem
 24 |         $description: 16px font size
 25 |         attributes:
 26 |           category: typography
 27 |           type: font-size
 28 |       lg:
 29 |         $value: 1.125rem
 30 |         $description: 18px font size
 31 |         attributes:
 32 |           category: typography
 33 |           type: font-size
 34 |       xl:
 35 |         $value: 1.25rem
 36 |         $description: 20px font size
 37 |         attributes:
 38 |           category: typography
 39 |           type: font-size
 40 |       2xl:
 41 |         $value: 1.5rem
 42 |         $description: 24px font size
 43 |         attributes:
 44 |           category: typography
 45 |           type: font-size
 46 | 
 47 |     code:
 48 |       $extensions:
 49 |         com.redhat.ux:
 50 |           heading: Font size (code)
 51 |           fontFamily: var(--rh-font-family-code)
 52 |       xs:
 53 |         $value: '{font.size.body-text.xs}'
 54 |         $description: 12px font size
 55 |         attributes:
 56 |           category: typography
 57 |           type: font-size
 58 |       sm:
 59 |         $value: '{font.size.body-text.sm}'
 60 |         $description: 14px font size
 61 |         attributes:
 62 |           category: typography
 63 |           type: font-size
 64 |       md:
 65 |         $value: '{font.size.body-text.md}'
 66 |         $description: 16px font size
 67 |         attributes:
 68 |           category: typography
 69 |           type: font-size
 70 |       lg:
 71 |         $value: '{font.size.body-text.lg}'
 72 |         $description: 18px font size
 73 |         attributes:
 74 |           category: typography
 75 |           type: font-size
 76 |       xl:
 77 |         $value: '{font.size.body-text.xl}'
 78 |         $description: 20px font size
 79 |         attributes:
 80 |           category: typography
 81 |           type: font-size
 82 |       2xl:
 83 |         $value: '{font.size.body-text.2xl}'
 84 |         $description: 24px font size
 85 |         attributes:
 86 |           category: typography
 87 |           type: font-size
 88 | 
 89 |     heading:
 90 |       $extensions:
 91 |         com.redhat.ux:
 92 |           heading: Font size (headings)
 93 |           fontFamily: var(--rh-font-family-heading)
 94 |       xs:
 95 |         $value: 1.25rem
 96 |         $description: h6 heading font size
 97 |         attributes:
 98 |           category: typography
 99 |           type: font-size
100 |       sm:
101 |         $value: 1.5rem
102 |         $description: h5 heading font size
103 |         attributes:
104 |           category: typography
105 |           type: font-size
106 |       md:
107 |         $value: 1.75rem
108 |         $description: h4 heading font size
109 |         attributes:
110 |           category: typography
111 |           type: font-size
112 |       lg:
113 |         $value: 2.25rem
114 |         $description: h3 heading font size
115 |         attributes:
116 |           category: typography
117 |           type: font-size
118 |       xl:
119 |         $value: 2.5rem
120 |         $description: h2 heading font size
121 |         attributes:
122 |           category: typography
123 |           type: font-size
124 |       2xl:
125 |         $value: 3rem
126 |         $description: h1 heading font size
127 |         attributes:
128 |           category: typography
129 |           type: font-size
130 | 
131 | 


--------------------------------------------------------------------------------
/platforms.yaml:
--------------------------------------------------------------------------------
  1 | css:
  2 |   transformGroup: css
  3 |   buildPath: css/
  4 |   prefix: rh
  5 |   files:
  6 |     - destination: global.css
  7 |       format: css/variables
  8 |       filter: isNotThemeColorToken
  9 |       options:
 10 |         fileHeader: redhat/legal
 11 |         selector: ':root'
 12 |         formatting:
 13 |           commentPosition: above
 14 |     - destination: shared.css
 15 |       format: css/variables
 16 |       filter: isNotThemeColorToken
 17 |       options:
 18 |         fileHeader: redhat/legal
 19 |         selector: ':host'
 20 |         formatting:
 21 |           commentPosition: above
 22 |     - destination: reset.css.ts
 23 |       format: css/lit
 24 |       filter: isNotThemeColorToken
 25 |       options:
 26 |         fileHeader: redhat/legal
 27 |         selector: ':host'
 28 |         formatting:
 29 |           commentPosition: above
 30 |     - destination: default-theme.css
 31 |       format: css/rhds/default-theme
 32 |       options:
 33 |         fileHeader: redhat/legal
 34 |         formatting:
 35 |           commentPosition: above
 36 |     - destination: default-theme.css.ts
 37 |       format: js/rhds/default-theme
 38 |       options:
 39 |         fileHeader: redhat/legal
 40 |         formatting:
 41 |           commentPosition: above
 42 |     - destination: color-palette.css
 43 |       format: css/rhds/color-palette
 44 |       options:
 45 |         fileHeader: redhat/legal
 46 |         formatting:
 47 |           commentPosition: above
 48 |     - destination: color-palette.css.ts
 49 |       format: js/rhds/color-palette
 50 |       options:
 51 |         fileHeader: redhat/legal
 52 |         formatting:
 53 |           commentPosition: above
 54 | 
 55 | scss:
 56 |   transformGroup: css
 57 |   buildPath: scss/
 58 |   prefix: rh
 59 |   files:
 60 |     - destination: _variables.scss
 61 |       filter: isNotThemeColorToken
 62 |       format: scss/variables
 63 |       options:
 64 |         fileHeader: redhat/legal
 65 | 
 66 | json:
 67 |   transformGroup: css
 68 |   buildPath: json/
 69 |   prefix: rh
 70 |   actions:
 71 |     - descriptionFile
 72 |   files:
 73 |     - destination: rhds.tokens.flat.json
 74 |       format: json/flat
 75 |       options:
 76 |         fileHeader: redhat/legal
 77 |         outputReferences: true
 78 |     - destination: rhds.tokens.json
 79 |       format: json
 80 |       options:
 81 |         fileHeader: redhat/legal
 82 |         outputReferences: true
 83 |     - destination: ../build/rhds.tokens.json
 84 |       format: json
 85 |       options:
 86 |         fileHeader: redhat/legal
 87 |         outputReferences: true
 88 | 
 89 | map:
 90 |   transformGroup: css
 91 |   buildPath: js/
 92 |   prefix: rh
 93 |   actions:
 94 |     - compile
 95 |   files:
 96 |     - destination: tokens.ts
 97 |       format: typescript/map
 98 |     - destination: tokens.cjs
 99 |       format: javascript/map-cjs
100 |     - destination: meta.ts
101 |       format: typescript/meta-map
102 |     - destination: meta.cjs
103 |       format: javascript/meta-map-cjs
104 | 
105 | js:
106 |   transformGroup: js
107 |   buildPath: js/
108 |   files:
109 |     - destination: values.js
110 |       format: javascript/modules
111 |       options:
112 |         fileHeader: redhat/legal
113 | 
114 | editor:
115 |   transformGroup: css
116 |   buildPath: editor/
117 |   prefix: rh
118 |   actions:
119 |     - writeVSIXManifest
120 |   files:
121 |     - destination: vscode/snippets.json
122 |       format: editor/snippets/vscode
123 |     - destination: textmate/css.snippets
124 |       format: editor/snippets/textmate
125 |     - destination: neovim/hexokinase-refs.json
126 |       format: editor/hexokinase/refs
127 |     - destination: neovim/hexokinase-vars.json
128 |       format: editor/hexokinase/vars
129 |     - destination: neovim/nvim-colorizer.json
130 |       format: editor/neovim/colorizer
131 | 
132 | sketch:
133 |   transformGroup: sketch
134 |   buildPath: design/sketch/
135 |   prefix: rh
136 |   files:
137 |     - destination: rhds.sketchpalette
138 |       format: sketch/palette/v2
139 |       filter: isColor
140 | 


--------------------------------------------------------------------------------
/tokens/color/text.yaml:
--------------------------------------------------------------------------------
 1 | color:
 2 |   $type: color
 3 |   text:
 4 |     $extensions:
 5 |       com.redhat.ux:
 6 |         heading: Text color
 7 |         collapse: true
 8 |         description: >-
 9 |           Each theme features two shades of gray for text, Primary and Secondary.
10 | 
11 |           #### Accessibility
12 | 
13 |           Contrast is important when choosing colors for UI elements for visitors.
14 |           Awareness of standards and best practices is the key to an accessible color palette.
15 |           We are committed to complying with the [Web Content Accessibility Guidelines AA][wcag]
16 |           standard contrast ratios. We choose colors that support usability by ensuring sufficient
17 |           color contrast between elements so that visitors with low vision can browse our web
18 |           properties.
19 | 
20 |           ##### Text on backgrounds
21 | 
22 |           Black text should be used on light backgrounds and vice versa. If a page features both
23 |           light and dark themes, UI elements and text should be placed on contrasting background
24 |           colors. Layouts with colored backgrounds or a photo changes the rules regarding the
25 |           placement of text, so use white or black text for body copy applications.
26 | 
27 | 
28 |           [wcag]: https://www.w3.org/WAI/WCAG2AA-Conformance.html
29 | 
30 |     primary:
31 |       _:
32 |         $value:
33 |           - '{color.text.primary.on-light}'
34 |           - '{color.text.primary.on-dark}'
35 |         $description: >-
36 |           Responsive `text-primary` color value. Typically read only - use a themable container e.g. `<rh-surface>`
37 |           Resolves to `--rh-color-text-primary-on-light` on a themable container with a light color palette
38 |           and `--rh-color-text-primary-on-dark` on a themable container with a dark color palette.
39 |       on-light:
40 |         $value: '{color.gray.95}'
41 |         $description: Primary text color for light theme
42 |         attributes:
43 |           category: typography
44 |           type: color
45 |       on-dark:
46 |         $value: '{color.white}'
47 |         $description: Primary text color for dark theme
48 |         attributes:
49 |           category: typography
50 |           type: color
51 |     secondary:
52 |       _:
53 |         $value:
54 |           - '{color.text.secondary.on-light}'
55 |           - '{color.text.secondary.on-dark}'
56 |         $description: >-
57 |           Responsive `text-secondary` color value. Typically read only - use a themable container e.g. `<rh-surface>`
58 |           Resolves to `--rh-color-text-secondary-on-light` on a themable container with a light color palette
59 |           and `--rh-color-text-secondary-on-dark` on a themable container with a dark color palette.
60 |       on-light:
61 |         $value: '{color.gray.60}'
62 |         $description: Secondary text color for light theme
63 |         attributes:
64 |           category: typography
65 |           type: color
66 |       on-dark:
67 |         $value: '{color.gray.30}'
68 |         $description: Secondary text color for dark theme
69 |         attributes:
70 |           category: typography
71 |           type: color
72 |     brand:
73 |       _:
74 |         $value:
75 |           - '{color.text.brand.on-light}'
76 |           - '{color.text.brand.on-dark}'
77 |         $description: >-
78 |           Responsive `text-brand` color value. Typically read only - use a themable container e.g. `<rh-surface>`
79 |           Resolves to `--rh-color-text-brand-on-light` on a themable container with a light color palette
80 |           and `--rh-color-text-brand-on-dark` on a themable container with a dark color palette.
81 |       on-light:
82 |         $value: '{color.brand.red.on-light}'
83 |         $description: Brand text color for light theme
84 |         attributes:
85 |           category: typography
86 |           type: color
87 |       on-dark:
88 |         $value: '{color.brand.red.on-dark}'
89 |         $description: Brand text color for dark theme
90 |         attributes:
91 |           category: typography
92 |           type: color
93 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Red Hat Design Tokens
  2 | 
  3 | [Design Tokens](https://design-tokens.github.io/community-group/format/) for Red Hat's [Digital Design System](https://ux.redhat.com).
  4 | 
  5 | ## 🚚 Installation
  6 | ```sh
  7 | npm i @rhds/tokens
  8 | ```
  9 | 
 10 | ## 🎭 Usage
 11 | We use [style-dictionary](https://amzn.github.io/style-dictionary/) to transform our tokens into multiple formats and helpers.
 12 | 
 13 | ### Global CSS
 14 | Apply defaults to the document root by importing the global stylesheet:
 15 | ```html
 16 | <link rel="stylesheet" href="/url/to/@rhds/tokens/css/global.css">
 17 | <style>
 18 |   :is(h1, h2, h3, h4, h5, h6) {
 19 |     font-family: var(--rh-font-family-heading);
 20 |   }
 21 | </style>
 22 | ```
 23 | 
 24 | ### Shadow Root Reset
 25 | Reset a component's styles (preventing inheritance) by adding `resetStyles` to it's static Constructible Style Sheet list:
 26 | ```ts
 27 | import { resetStyles } from '@rhds/tokens/css/reset.css.js';
 28 | import style from './rh-jazz-hands.css';
 29 | 
 30 | @customElement('rh-jazz-hands')
 31 | export class RhJazzHands extends LitElement {
 32 |   static readonly styles = [resetStyles, style];
 33 | }
 34 | ```
 35 | 
 36 | ### JavaScript Objects
 37 | Import tokens as JavaScript objects:
 38 | ```js
 39 | import { tokens } from '@rhds/tokens';
 40 | 
 41 | html`<span style="color: ${tokens.get('--rh-color-blue-300')}">I'm blue</span>`;
 42 | ```
 43 | or for tree-shakable imports:
 44 | ```js
 45 | import { ColorBlue300 } from '@rhds/tokens/values.js';
 46 | 
 47 | html`<span style="color: ${ColorBlue300}">I'm blue</span>`;
 48 | ```
 49 | > :warning: **NOTE**
 50 | >
 51 | > We *strongly* recommend using CSS variables (and accompanying snippets)
 52 | wherever, instead of importing tokens as JavaScript objects.
 53 | 
 54 | ### Stylelint Plugin
 55 | 
 56 | Install the stylelint plugin to automatically correct token values in your files.
 57 | 
 58 | See the [Stylelint Plugin README](./plugins/stylelint/README.md) for more info.
 59 | 
 60 | ### 11ty Plugin
 61 | 
 62 | The experimental 11ty plugin lets you display token values in an 11ty site.
 63 | 
 64 | ### Editor Snippets
 65 | Editor snippets complete prefixes like `--rh-color-brand` to their CSS custom properties, complete with fallback, e.g.
 66 | ```css
 67 | color: var(--rh-color-brand, #ee0000);
 68 | ```
 69 | 
 70 | They also provide reverse lookup, so if you want to choose between _all_ the tokens with value `#e00`, you can do so by completing the prefix `e00`.
 71 | 
 72 | Load snippets in **VSCode**:
 73 | Download the VSIX bundle from [the releases page](https://github.com/redhat-ux/red-hat-design-tokens/releases).
 74 | Or, search the VSCode marketplace for [`Red Hat Design Tokens`](https://marketplace.visualstudio.com/search?term=%40category%3A%22snippets%22%20%22Red%20Hat%20Design%20Tokens%22&target=VSCode&category=All%20categories&sortBy=Relevance)
 75 | 
 76 | Load snippets in **neovim** via LuaSnip:
 77 | ```lua
 78 | require 'luasnip.loaders.from_vscode'.lazy_load { paths = {
 79 |   -- Path to the built project, perhaps in your `node_modules`
 80 |   '~/Developer/redhat-ux/red-hat-design-tokens/editor/vscode'
 81 | } }
 82 | ```
 83 | 
 84 | ### `vim-hexokinase`
 85 | Vim users can load the [vim-hexokinase](https://github.com/RRethy/vim-hexokinase) plugin to display colour swatches
 86 | next to their encoded values in their editor. Use the following config (lua syntax, for neovim users) to configure
 87 | hexokinase to display colour values next to colour aliases like `{color.brand.red}`
 88 | 
 89 | ```lua
 90 | vim.g.Hexokinase_optInPatterns = {
 91 |   'full_hex', 'triple_hex',
 92 |   'rgb', 'rgba',
 93 |   'hsl', 'hsla',
 94 |   'colour_names',
 95 | }
 96 | 
 97 | vim.g.Hexokinase_ftOptOutPatterns = {
 98 |   json = { 'colour_names' },
 99 |   yaml = { 'colour_names' },
100 | }
101 | 
102 | vim.g.Hexokinase_palettes = {
103 |   -- replace with path to the built tokens package on your drive
104 |   vim.fn.expand'~/Developer/redhat-ux/red-hat-design-tokens/editor/neovim/hexokinase.json'
105 | }
106 | ```
107 | 
108 | ## 🏆 Contributing
109 | See [CONTRIBUTING.md](./CONTRIBUTING.md)
110 | 
111 | 


--------------------------------------------------------------------------------
/tokens/font/family.yml:
--------------------------------------------------------------------------------
  1 | font:
  2 |   family:
  3 |     $type: fontFamily
  4 |     $extensions:
  5 |       com.redhat.ux:
  6 |         heading: Font family
  7 |         description: |-
  8 |           [Red Hat Fonts](https://github.com/RedHatOfficial/RedHatFont), designed by Jeremy Mickel
  9 |           and released under Open Font License, form the typographic basis for the Red Hat Design
 10 |           System. Pages using non-latin characters should fall back to
 11 |           [Noto Sans](https://notofonts.github.io/). By loading language-specific Noto
 12 |           Sans fonts, <abbr title="Red Hat Design System">RHDS</abbr> can accomodate mixed-language
 13 |           content including <span lang="ar">العربية</span>, <span lang="he">עברית</span>,
 14 |           <span lang="jp">日本語</span>, <span lang="kr">조선말</span>, <span lang="ml">മലയാളം</span>,
 15 |           <span lang="zh">汉语</span>, <span lang="zh">漢語</span>, or <span lang="th">ภาษาไทย</span>.
 16 | 
 17 |           Users may load those fonts from Google Fonts, for example with this HTML snippet pasted
 18 |           into the `<head>`:
 19 | 
 20 |           ```html
 21 |           <link rel="preconnect" href="https://fonts.googleapis.com">
 22 |           <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 23 |           <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@500;700&family=Noto+Sans+JP:wght@500;700&family=Noto+Sans+KR:wght@500;700&family=Noto+Sans+Malayalam:wght@500;700&family=Noto+Sans+SC:wght@500;700&family=Noto+Sans+TC:wght@500;700&family=Noto+Sans+Tamil:wght@500;700&family=Noto+Sans+Thai:wght@500;700&display=swap" rel="stylesheet">
 24 |           ```
 25 | 
 26 |     heading:
 27 |       $description: Heading font family
 28 |       $extensions:
 29 |         com.redhat.ux:
 30 |           example: Display
 31 |       $value:
 32 |         - RedHatDisplay
 33 |         - Red Hat Display
 34 |         - Helvetica
 35 |         - Arial
 36 |         - sans-serif
 37 |       attributes:
 38 |         category: typography
 39 |         type: font-family
 40 |     body-text:
 41 |       $description: Body text font family
 42 |       $extensions:
 43 |         com.redhat.ux:
 44 |           example: Body text
 45 |       $value:
 46 |         - RedHatText
 47 |         - Red Hat Text
 48 |         - Helvetica
 49 |         - Arial
 50 |         - sans-serif
 51 |       attributes:
 52 |         category: typography
 53 |         type: font-family
 54 |     code:
 55 |       $description: Code font family
 56 |       $extensions:
 57 |         com.redhat.ux:
 58 |           example: Code
 59 |       $value:
 60 |         - RedHatMono
 61 |         - Red Hat Mono
 62 |         - Courier New
 63 |         - Courier
 64 |         - monospace
 65 |       attributes:
 66 |         category: typography
 67 |         type: font-family
 68 |     lang-ar:
 69 |       $description: Arabic font family
 70 |       $extensions:
 71 |         com.redhat.ux:
 72 |           example: Arabic
 73 |       $value:
 74 |         - Noto Sans Arabic
 75 |       attributes:
 76 |         category: typography
 77 |         type: font-family
 78 |     lang-he:
 79 |       $description: Hebrew font family
 80 |       $extensions:
 81 |         com.redhat.ux:
 82 |           example: Hebrew
 83 |       $value:
 84 |         - Noto Sans Hebrew
 85 |       attributes:
 86 |         category: typography
 87 |         type: font-family
 88 |     lang-ja:
 89 |       $description: Japanese font family
 90 |       $extensions:
 91 |         com.redhat.ux:
 92 |           example: Japanese
 93 |       $value:
 94 |         - Noto Sans JP
 95 |       attributes:
 96 |         category: typography
 97 |         type: font-family
 98 |     lang-ko:
 99 |       $description: Korean font family
100 |       $extensions:
101 |         com.redhat.ux:
102 |           example: Korean
103 |       $value:
104 |         - Noto Sans KR
105 |       attributes:
106 |         category: typography
107 |         type: font-family
108 |     lang-hi:
109 |       $description: Malayalam font family
110 |       $extensions:
111 |         com.redhat.ux:
112 |           example: Malayalam
113 |       $value:
114 |         - Noto Sans Malayalam
115 |       attributes:
116 |         category: typography
117 |         type: font-family
118 |     lang-th:
119 |       $description: Thai font family
120 |       $extensions:
121 |         com.redhat.ux:
122 |           example: Thai
123 |       $value:
124 |         - Noto Sans Thai
125 |       attributes:
126 |         category: typography
127 |         type: font-family
128 |     lang-zh-cn:
129 |       $description: Simplified Chinese font family
130 |       $extensions:
131 |         com.redhat.ux:
132 |           example: Simplified Chinese
133 |       $value:
134 |         - Noto Sans SC
135 |       attributes:
136 |         category: typography
137 |         type: font-family
138 |     lang-zh-hk:
139 |       $description: Traditional Chinese font family
140 |       $extensions:
141 |         com.redhat.ux:
142 |           example: Traditional Chinese
143 |       $value:
144 |         - Noto Sans TC
145 |       attributes:
146 |         category: typography
147 |         type: font-family


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "@rhds/tokens",
  3 |   "version": "3.0.2",
  4 |   "description": "Red Hat Design System Tokens",
  5 |   "scripts": {
  6 |     "build": "wireit",
  7 |     "11ty": "wireit",
  8 |     "package-vscode": "wireit",
  9 |     "style-dictionary": "wireit",
 10 |     "start": "wireit",
 11 |     "lint": "eslint lib plugins test docs",
 12 |     "format": "eslint --fix lib plugins test docs",
 13 |     "test": "wireit"
 14 |   },
 15 |   "type": "module",
 16 |   "main": "js/tokens.cjs",
 17 |   "module": "js/tokens.js",
 18 |   "types": "js/tokens.d.ts",
 19 |   "designTokensLanguageServer": {
 20 |     "prefix": "rh",
 21 |     "tokensFiles": [
 22 |       "./tokens/**/*.yaml",
 23 |       "./tokens/**/*.yml"
 24 |     ]
 25 |   },
 26 |   "exports": {
 27 |     ".": {
 28 |       "import": "./js/tokens.js",
 29 |       "require": "./js/tokens.cjs",
 30 |       "types": "./js/tokens.d.ts"
 31 |     },
 32 |     "./meta.js": {
 33 |       "import": "./js/meta.js",
 34 |       "require": "./js/meta.cjs",
 35 |       "types": "./js/meta.d.ts"
 36 |     },
 37 |     "./json/*": {
 38 |       "require": "./json/*"
 39 |     },
 40 |     "./plugins/stylelint.js": "./plugins/stylelint.js",
 41 |     "./css/*": "./css/*",
 42 |     "./values.js": {
 43 |       "import": "./js/values.js",
 44 |       "require": "./js/values.cjs",
 45 |       "types": "./js/values.d.ts"
 46 |     },
 47 |     "./animation.js": {
 48 |       "import": "./js/animation.js",
 49 |       "types": "./js/animation.d.ts"
 50 |     },
 51 |     "./border.js": {
 52 |       "import": "./js/border.js",
 53 |       "types": "./js/border.d.ts"
 54 |     },
 55 |     "./box-shadow.js": {
 56 |       "import": "./js/box-shadow.js",
 57 |       "types": "./js/box-shadow.d.ts"
 58 |     },
 59 |     "./color.js": {
 60 |       "import": "./js/color.js",
 61 |       "types": "./js/color.d.ts"
 62 |     },
 63 |     "./icon.js": {
 64 |       "import": "./js/icon.js",
 65 |       "types": "./js/icon.d.ts"
 66 |     },
 67 |     "./length.js": {
 68 |       "import": "./js/length.js",
 69 |       "types": "./js/length.d.ts"
 70 |     },
 71 |     "./media.js": {
 72 |       "import": "./js/media.js",
 73 |       "types": "./js/media.d.ts"
 74 |     },
 75 |     "./opacity.js": {
 76 |       "import": "./js/opacity.js",
 77 |       "types": "./js/opacity.d.ts"
 78 |     },
 79 |     "./space.js": {
 80 |       "import": "./js/space.js",
 81 |       "types": "./js/space.d.ts"
 82 |     },
 83 |     "./typography.js": {
 84 |       "import": "./js/typography.js",
 85 |       "types": "./js/typography.d.ts"
 86 |     }
 87 |   },
 88 |   "files": [
 89 |     "css",
 90 |     "editor",
 91 |     "plugins/**/*.{js,cjs,d.ts,d,cts,map}",
 92 |     "js/**/*.{js,d.ts,cjs,map}",
 93 |     "json",
 94 |     "scss"
 95 |   ],
 96 |   "publishConfig": {
 97 |     "access": "public",
 98 |     "registry": "https://registry.npmjs.org/"
 99 |   },
100 |   "wireit": {
101 |     "build": {
102 |       "dependencies": [
103 |         "style-dictionary",
104 |         "package-vscode",
105 |         "11ty"
106 |       ]
107 |     },
108 |     "11ty": {
109 |       "command": "NODE_OPTIONS=\"--import tsx\" eleventy --config=eleventy.config.ts",
110 |       "dependencies": [
111 |         "style-dictionary"
112 |       ],
113 |       "output": [
114 |         "build/**/*"
115 |       ]
116 |     },
117 |     "style-dictionary": {
118 |       "command": "node --experimental-strip-types build.ts",
119 |       "files": [
120 |         "tokens/**/*",
121 |         "docs/**/*",
122 |         "lib/**/*",
123 |         "platforms.yaml",
124 |         "build.ts"
125 |       ],
126 |       "output": [
127 |         "build/**",
128 |         "css/**",
129 |         "editor/**",
130 |         "js/**",
131 |         "json/**",
132 |         "scss/**",
133 |         "plugins/**/*.{js,map,d.ts,d.cts}",
134 |         "test/**/*.{js,map,d.ts}"
135 |       ]
136 |     },
137 |     "start": {
138 |       "command": "NODE_OPTIONS=\"--import tsx\" npx eleventy --config=eleventy.config.ts --watch --serve",
139 |       "service": true
140 |     },
141 |     "test": {
142 |       "command": "tape-es 'test/*.ts' | tap-difflet",
143 |       "files": [
144 |         "**/*.test.{ts,js}",
145 |         "test/**/*.{ts,js}",
146 |         "plugins/**/*.js",
147 |         "tokens/**/*.ya?ml"
148 |       ],
149 |       "dependencies": [
150 |         "build"
151 |       ]
152 |     },
153 |     "package-vscode": {
154 |       "command": "cd editor/vscode && vsce package",
155 |       "files": [
156 |         "editor/vscode/package.json",
157 |         "editor/vscode/snippets.json"
158 |       ],
159 |       "dependencies": [
160 |         "style-dictionary"
161 |       ],
162 |       "output": [
163 |         "*.vsix"
164 |       ]
165 |     }
166 |   },
167 |   "peerDependencies": {
168 |     "lit": "^3.0.0"
169 |   },
170 |   "devDependencies": {
171 |     "@11ty/eleventy": "^3.0.0",
172 |     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
173 |     "@changesets/cli": "^2.29.4",
174 |     "@eslint/eslintrc": "^3.3.0",
175 |     "@eslint/js": "^9.22.0",
176 |     "@jspm/generator": "^2.5.1",
177 |     "@patternfly/eslint-config-elements": "^4.0.0",
178 |     "@rhds/elements": "^2.1.2",
179 |     "@rhds/icons": "^1.2.0",
180 |     "@types/node": "^22.13.10",
181 |     "@types/tape": "^5.8.1",
182 |     "css-tree": "^3.1.0",
183 |     "deepmerge": "^4.3.1",
184 |     "eslint": "^9.22.0",
185 |     "execa": "^9.5.2",
186 |     "globals": "^16.0.0",
187 |     "highlight.js": "^11.11.1",
188 |     "markdown-it": "^14.1.0",
189 |     "postcss-value-parser": "^4.2.0",
190 |     "style-dictionary": "^4.3.3",
191 |     "stylelint": "^16.16.0",
192 |     "tap-difflet": "^0.7.2",
193 |     "tape-describe": "^1.0.3",
194 |     "tape-es": "^1.2.17",
195 |     "tsx": "^4.19.3",
196 |     "typescript": "^5.8.2",
197 |     "vsce": "^2.15.0",
198 |     "wireit": "^0.14.12",
199 |     "yaml": "^2.7.0"
200 |   }
201 | }
202 | 


--------------------------------------------------------------------------------
/test/stylelint.no-unknown-token-name.test.ts:
--------------------------------------------------------------------------------
  1 | import type tape from 'tape';
  2 | 
  3 | import describe from 'tape-describe';
  4 | 
  5 | import stylelint from 'stylelint';
  6 | 
  7 | async function runRule(codeFilename: string, code: string) {
  8 |   return stylelint.lint({
  9 |     code,
 10 |     codeFilename,
 11 |     config: {
 12 |       rules: { 'rhds/no-unknown-token-name': true },
 13 |       plugins: ['./plugins/stylelint.js'],
 14 |     },
 15 |   });
 16 | }
 17 | 
 18 | async function getAutofixedCSS(codeFilename: string, code: string) {
 19 |   const result = await stylelint.lint({
 20 |     code,
 21 |     codeFilename,
 22 |     fix: true,
 23 |     config: {
 24 |       rules: { 'rhds/no-unknown-token-name': [true, { migrations: {
 25 |         '--rh-color-black-900': '--rh-color-grey-900',
 26 |         '--rh-color-black-100': '--rh-color-grey-100',
 27 |       } }] },
 28 |       plugins: ['./plugins/stylelint.js'],
 29 |     },
 30 |   });
 31 |   return result.code;
 32 | }
 33 | 
 34 | describe('no-unknown-token-name', (test: typeof tape) => {
 35 |   test('simple list with typo in one name', async t => {
 36 |     t.plan(3);
 37 |     const { errored, results: [{ warnings: [warning, ...rest] }] } =
 38 |     await runRule('simple-list.css', `
 39 | a {
 40 |   padding: var(--rh-space-xl) var(--rh-space-xx);
 41 | }`);
 42 | 
 43 |     t.true(errored, 'errors');
 44 |     t.equal(rest.length, 0, 'gives a single warning');
 45 | 
 46 |     t.deepEqual(warning, {
 47 |       line: 3,
 48 |       column: 35,
 49 |       endLine: 3,
 50 |       endColumn: 48,
 51 |       fix: undefined,
 52 |       rule: 'rhds/no-unknown-token-name',
 53 |       severity: 'error',
 54 |       text: 'Expected --rh-space-xx to be a known token name',
 55 |       url: undefined,
 56 |     }, 'provides detail');
 57 |   });
 58 | 
 59 |   test('simple list with typo in two names', async t => {
 60 |     t.plan(5);
 61 |     const { errored, results: [{ warnings: [warning1, warning2, ...rest] }] } =
 62 |     await runRule('typo-list.css', `
 63 | a {
 64 |   padding: var(--rh-leng-xl) var(--rh-space-xx);
 65 | }`);
 66 |     t.true(errored, 'errors');
 67 |     t.equal(rest.length, 0, 'gives only two warnings');
 68 |     t.notDeepEqual(warning1, warning2, 'provides separate warnings');
 69 | 
 70 |     t.deepEqual(warning1, {
 71 |       line: 3,
 72 |       column: 16,
 73 |       endLine: 3,
 74 |       endColumn: 28,
 75 |       fix: undefined,
 76 |       rule: 'rhds/no-unknown-token-name',
 77 |       severity: 'error',
 78 |       text: 'Expected --rh-leng-xl to be a known token name',
 79 |       url: undefined,
 80 |     }, 'provides detail for first error');
 81 | 
 82 |     t.deepEqual(warning2, {
 83 |       line: 3,
 84 |       column: 34,
 85 |       endLine: 3,
 86 |       endColumn: 47,
 87 |       fix: undefined,
 88 |       rule: 'rhds/no-unknown-token-name',
 89 |       severity: 'error',
 90 |       text: 'Expected --rh-space-xx to be a known token name',
 91 |       url: undefined,
 92 |     }, 'provides detail for second error');
 93 |   });
 94 | 
 95 |   test('nested custom property value', async t => {
 96 |     t.plan(3);
 97 |     const { errored, results: [{ warnings: [warning, ...rest] }] } =
 98 |     await runRule('nested.css', `
 99 | a {
100 |   padding: var(--_padding: var(--rh-space-xx));
101 | }`);
102 | 
103 |     t.true(errored, 'errors');
104 |     t.equal(rest.length, 0, 'gives a single warning');
105 | 
106 |     t.deepEqual(warning, {
107 |       line: 3,
108 |       column: 32,
109 |       endLine: 3,
110 |       endColumn: 45,
111 |       fix: undefined,
112 |       rule: 'rhds/no-unknown-token-name',
113 |       severity: 'error',
114 |       text: 'Expected --rh-space-xx to be a known token name',
115 |       url: undefined,
116 |     }, 'provides detail');
117 |   });
118 | 
119 |   test('list with nested custom property value', async t => {
120 |     t.plan(5);
121 |     const { errored, results: [{ warnings: [warning1, warning2, ...rest] }] } =
122 |     await runRule('list-nested.css', `
123 | a {
124 |    padding: var(--_padding-inline: var(--rh-space-ll)) var(--_padding-block: var(--rh-length-ll));
125 | }`);
126 | 
127 |     t.true(errored, 'errors');
128 |     t.equal(rest.length, 0, 'gives only two warnings');
129 |     t.notDeepEqual(warning1, warning2, 'provides separate warnings');
130 | 
131 |     t.deepEqual(warning1, {
132 |       line: 3,
133 |       column: 40,
134 |       endLine: 3,
135 |       endColumn: 53,
136 |       fix: undefined,
137 |       rule: 'rhds/no-unknown-token-name',
138 |       severity: 'error',
139 |       text: 'Expected --rh-space-ll to be a known token name',
140 |       url: undefined,
141 |     }, 'provides detail for first error');
142 | 
143 |     t.deepEqual(warning2, {
144 |       line: 3,
145 |       column: 82,
146 |       endLine: 3,
147 |       endColumn: 96,
148 |       fix: undefined,
149 |       rule: 'rhds/no-unknown-token-name',
150 |       severity: 'error',
151 |       text: 'Expected --rh-length-ll to be a known token name',
152 |       url: undefined,
153 |     }, 'provides detail for second error');
154 |   });
155 | 
156 |   test('migrating names', async t => {
157 |     t.plan(3);
158 |     const inputval = `a { color: var(--rh-color-black-900); }`;
159 |     const expecval = `a { color: var(--rh-color-grey-900); }`;
160 |     t.isEqual(await getAutofixedCSS('migrating-simple.css', inputval), expecval, 'simple value');
161 | 
162 |     const inputnest = `a { color: var(--_color: var(--rh-color-black-900)); }`;
163 |     const expecnest = `a { color: var(--_color: var(--rh-color-grey-900)); }`;
164 |     t.isEqual(await getAutofixedCSS('migrating-nested.css', inputnest), expecnest, 'nested custom property value');
165 | 
166 |     const inputlistnest = `a { --colors: var(--_color, var(--rh-color-black-900)) var(--_color-bg: var(--rh-color-black-100)); }`;
167 |     const expeclistnest = `a { --colors: var(--_color, var(--rh-color-grey-900)) var(--_color-bg: var(--rh-color-grey-100)); }`;
168 |     t.isEqual(await getAutofixedCSS('migrating-list-nested.css', inputlistnest), expeclistnest, 'list with nested custom property value');
169 |   });
170 | });
171 | 


--------------------------------------------------------------------------------
/tokens/color/status.yaml:
--------------------------------------------------------------------------------
  1 | color:
  2 |   $type: color
  3 |   status:
  4 |     $extensions:
  5 |       com.redhat.ux:
  6 |         order: 500
  7 | 
  8 |     danger:
  9 |       $description: >-
 10 |         Represents an action which could have destructive consequences, e.g. deleting a file.
 11 |       _:
 12 |         $value:
 13 |           - '{color.status.danger.on-light}'
 14 |           - '{color.status.danger.on-dark}'
 15 |         $description: >-
 16 |           Responsive `status-danger` color value. Typically read-only – use a themable container, e.g. `<rh-surface>`.
 17 |           Resolves to `--rh-color-status-danger-on-light` on a themable container with a light color palette
 18 |           and `--rh-color-status-danger-on-dark` on a themable container with a dark color palette.
 19 |       on-light:
 20 |         $value: '{color.red-orange.60}'
 21 |         $description: Danger status color (light theme)
 22 |       on-dark:
 23 |         $value: '{color.red-orange.50}'
 24 |         $description: Danger status color (dark theme)
 25 | 
 26 |     caution:
 27 |       $description: >-
 28 |         Represents an action or notice which should immediately draw the attention
 29 |       _:
 30 |         $value:
 31 |           - '{color.status.caution.on-light}'
 32 |           - '{color.status.caution.on-dark}'
 33 |         $description: >-
 34 |           Responsive `status-caution` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 35 |           Resolves to `--rh-color-status-caution-on-light` on a themable container with a light color palette
 36 |           and `--rh-color-status-caution-on-dark` on a themable container with a dark color palette.
 37 |       on-light:
 38 |         $value: '{color.orange.50}'
 39 |         $description: Caution status color (light theme)
 40 |       on-dark:
 41 |         $value: '{color.orange.40}'
 42 |         $description: Caution status color (dark theme)
 43 | 
 44 |     warning:
 45 |       $description: >-
 46 |         Represents an action or notice which elicits a warning of potential danger
 47 |       _:
 48 |         $value:
 49 |           - '{color.status.warning.on-light}'
 50 |           - '{color.status.warning.on-dark}'
 51 |         $description: >-
 52 |           Responsive `status-warning` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 53 |           Resolves to `--rh-color-status-warning-on-light` on a themable container with a light color palette
 54 |           and `--rh-color-status-warning-on-dark` on a themable container with a dark color palette.
 55 |       on-light:
 56 |         $value: '{color.yellow.40}'
 57 |         $description: Warning status color (light theme)
 58 |       on-dark:
 59 |         $value: '{color.yellow.30}'
 60 |         $description: Warning status color (dark theme)
 61 | 
 62 |     neutral:
 63 |       $description: >-
 64 |         Represents an action or notice which has neither positive nor negative connotations,
 65 |         is neither explicitly constructive or explicitly destructive.
 66 |       _:
 67 |         $value:
 68 |           - '{color.status.neutral.on-light}'
 69 |           - '{color.status.neutral.on-dark}'
 70 |         $description: >-
 71 |           Responsive `status-neutral` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 72 |           Resolves to `--rh-color-status-neutral-on-light` on a themable container with a light color palette
 73 |           and `--rh-color-status-neutral-on-dark` on a themable container with a dark color palette.
 74 |       on-light:
 75 |         $value: '{color.gray.60}'
 76 |         $description: Neutral accent color (light theme)
 77 |       on-dark:
 78 |         $value: '{color.gray.30}'
 79 |         $description: Neutral accent color (dark theme)
 80 | 
 81 |     # note token should be phased out in the next major release.
 82 |     note:
 83 |       $description: >-
 84 |         Represents an action or notice which is informational, or a tip on how best to complete a task.
 85 |       _:
 86 |         $value:
 87 |           - '{color.status.note.on-light}'
 88 |           - '{color.status.note.on-dark}'
 89 |         $description: >-
 90 |           Responsive `status-note` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 91 |           Resolves to `--rh-color-status-note-on-light` on a themable container with a light color palette
 92 |           and `--rh-color-status-note-on-dark` on a themable container with a dark color palette.
 93 |       on-light:
 94 |         $value: '{color.status.info.on-light}'
 95 |         $description: Note/tip status color (light theme)
 96 |       on-dark:
 97 |         $value: '{color.status.info.on-dark}'
 98 |         $description: Note/tip status color (dark theme)
 99 | 
100 |     # info token should be used in place of note token.
101 |     info:
102 |       $description: >-
103 |         Represents an action or notice which is informational, or a tip on how best to complete a task.
104 |       _:
105 |         $value:
106 |           - '{color.status.info.on-light}'
107 |           - '{color.status.info.on-dark}'
108 |         $description: >-
109 |           Responsive `status-info` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
110 |           Resolves to `--rh-color-status-info-on-light` on a themable container with a light color palette
111 |           and `--rh-color-status-info-on-dark` on a themable container with a dark color palette.
112 |       on-light:
113 |         $value: '{color.purple.50}'
114 |         $description: Info status color (light theme)
115 |       on-dark:
116 |         $value: '{color.purple.30}'
117 |         $description: Info status color (dark theme)
118 | 
119 |     success:
120 |       $description: >-
121 |         Represents a notice of success.
122 |       _:
123 |         $value:
124 |           - '{color.status.success.on-light}'
125 |           - '{color.status.success.on-dark}'
126 |         $description: >-
127 |           Responsive `status-success` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
128 |           Resolves to `--rh-color-status-success-on-light` on a themable container with a light color palette
129 |           and `--rh-color-status-success-on-dark` on a themable container with a dark color palette.
130 |       on-light:
131 |         $value: '{color.green.60}'
132 |         $description: Success status color (light theme)
133 |       on-dark:
134 |         $value: '{color.green.40}'
135 |         $description: Success status color (dark theme)
136 | 


--------------------------------------------------------------------------------
/lib/formats/map.ts:
--------------------------------------------------------------------------------
  1 | import type { Dictionary, Format } from 'style-dictionary/types';
  2 | 
  3 | import { fileHeader } from 'style-dictionary/utils';
  4 | 
  5 | const makeTokensRecord = (dictionary: Dictionary) =>
  6 |   Object.fromEntries(dictionary.allTokens.map(x => [`--${x.name}`, x.$value]));
  7 | 
  8 | const makeMetaRecord = (dictionary: Dictionary) =>
  9 |   Object.fromEntries(dictionary.allTokens.map(x => [`--${x.name}`, x]));
 10 | 
 11 | const TYPE_EXPORT = /* typescript */`
 12 | import type { TokenName, DesignToken } from './tokens.js';
 13 | export type * from './tokens.js';
 14 | `;
 15 | 
 16 | /**
 17 |  * JavaScript token map
 18 |  * @example ```js
 19 |  * import { tokens } from '@rhds/tokens';
 20 |  *
 21 |  * const fontfamilyCssString = tokens.get('--rh-font-family-body-text');
 22 |  * // e.g. 'RedHatText, "Red Hat Text", sans-serif';
 23 |  * ```
 24 |  */
 25 | export const mapTs: Format = {
 26 |   name: 'typescript/map',
 27 |   async format({ file, dictionary }) {
 28 |     const stringTokens = dictionary.allTokens.filter(x => typeof x.$value === 'string');
 29 |     const numberTokens = dictionary.allTokens.filter(x => typeof x.$value === 'number');
 30 |     const tokenNameUnion = dictionary.allTokens.map(x => `'--${x.name}'`).join(' | ');
 31 |     return [
 32 |       await fileHeader({ file }),
 33 |       /* typescript */`\
 34 | export type TokenName = ${tokenNameUnion};
 35 | 
 36 | export type TokenValue = string | number;
 37 | 
 38 | export interface Color {
 39 |   isLight: boolean;
 40 |   hex: string;
 41 |   rgb: { r: number; g: number; b: number; a: number; };
 42 |   hsl: { h: number; s: number; l: number; a: number; };
 43 |   hsv: { h: number; s: number; v: number; a: number; };
 44 | }
 45 | 
 46 | export interface DesignToken<V = any> {
 47 |   value?: V;
 48 |   $value?: V;
 49 |   type?: string;
 50 |   $type?: string;
 51 |   $description?: string;
 52 |   name?: string;
 53 |   comment?: string;
 54 |   themeable?: boolean;
 55 |   attributes?: Record<string, unknown>;
 56 |   isSource?: boolean;
 57 |   original?: Partial<DesignToken>;
 58 |   [key: string]: any;
 59 | }
 60 | 
 61 | class TokenMap {
 62 |   #map: Map<TokenName, TokenValue>;
 63 |   get size(): number { return this.#map.size; }
 64 |   [Symbol.iterator]() { return this.#map[Symbol.iterator](); }
 65 |   constructor(entries: Record<TokenName, TokenValue>) { this.#map = new Map(Object.entries(entries)) as Map<TokenName, TokenValue>; }
 66 |   get(key: ${stringTokens.map(x => `'--${x.name}'`).join(' | ')}): string;
 67 |   get(key: ${numberTokens.map(x => `'--${x.name}'`).join(' | ')}): number;
 68 |   get(key: TokenName): TokenValue;
 69 |   get(key: string): undefined;
 70 |   get(key: TokenName): TokenValue { return this.#map.get(key as TokenName); }
 71 |   has(key: TokenName): true;
 72 |   has(key: string): false;
 73 |   has(key: string): boolean { return this.#map.has(key as TokenName); }
 74 |   keys() { return this.#map.keys(); }
 75 |   values() { return this.#map.values(); }
 76 |   entries() { return this.#map.entries(); }
 77 |   forEach(fn: (value: TokenValue, key: TokenName, map: TokenMap) => void, thisArg?: any): void {
 78 |     this.#map.forEach((v, k) => { fn.call(thisArg, v, k, this); });
 79 |   }
 80 | }
 81 | 
 82 | export const tokens = new TokenMap(${JSON.stringify(makeTokensRecord(dictionary), null, 2)} as const);`,
 83 |     ].join('\n');
 84 |   },
 85 | };
 86 | 
 87 | /**
 88 |  * JavaScript token map
 89 |  * @example Importing token objects in JavaScript modules
 90 |  *          ```js
 91 |  *          import { tokens } from '@rhds/tokens/meta.js';
 92 |  *
 93 |  *          const family = tokens.get('--rh-font-family-body-text');
 94 |  *          console.log(family.$description);
 95 |  *          // 'The font family used for body text'
 96 |  * ```
 97 |  */
 98 | export const metaMapTs: Format = {
 99 |   name: 'typescript/meta-map',
100 |   async format({ file, dictionary }) {
101 |     const stringTokens = dictionary.allTokens.filter(x => typeof x.$value === 'string');
102 |     const numberTokens = dictionary.allTokens.filter(x => typeof x.$value === 'number');
103 |     return [
104 |       await fileHeader({ file }),
105 |       TYPE_EXPORT,
106 |       /* typescript */`\
107 | class TokenMetaMap {
108 |   #map: Map<TokenName, DesignToken>;
109 |   get size(): number { return this.#map.size; }
110 |   [Symbol.iterator]() { return this.#map[Symbol.iterator](); }
111 |   constructor(entries: Record<TokenName, DesignToken>) { this.#map = new Map(Object.entries(entries)) as Map<TokenName, DesignToken>; }
112 |   get(key: ${stringTokens.map(x => `'--${x.name}'`).join(' | ')}): DesignToken<string>;
113 |   get(key: ${numberTokens.map(x => `'--${x.name}'`).join(' | ')}): DesignToken<number>;
114 |   get(key: TokenName): DesignToken;
115 |   get(key: string): null;
116 |   get(key: TokenName): DesignToken { return this.#map.get(key); }
117 |   has(key: TokenName): true;
118 |   has(key: string): false;
119 |   has(key: string): boolean { return this.#map.has(key as TokenName); }
120 |   keys() { return this.#map.keys(); }
121 |   values() { return this.#map.values(); }
122 |   entries() { return this.#map.entries(); }
123 |   forEach(fn: (value: DesignToken, key: TokenName, map: TokenMetaMap) => void, thisArg?: any): void {
124 |     this.#map.forEach((v, k) => { fn.call(thisArg, v, k, this); });
125 |   }
126 | }
127 | 
128 | export const tokens = new TokenMetaMap(${JSON.stringify(makeMetaRecord(dictionary), null, 2)});`,
129 |     ].join('\n');
130 |   },
131 | };
132 | 
133 | 
134 | /**
135 |  * CommonJS token map
136 |  * @example ```js
137 |  * const { tokens } = require('@rhds/tokens');
138 |  *
139 |  * const fontfamilyCssString = tokens.get('--rh-font-family-body-text');
140 |  * // e.g. 'RedHatText, "Red Hat Text", sans-serif';
141 |  * ```
142 |  */
143 | export const mapCjs: Format = {
144 |   name: 'javascript/map-cjs',
145 |   format: async (...args) =>
146 |     (await mapTs
147 |         .format(...args) as string)
148 |         .replace('export const tokens', 'exports.tokens'),
149 | };
150 | 
151 | /**
152 |  * CommonJS token map
153 |  * @example Importing token objects in CommonJS modules
154 |  *          ```js
155 |  *          import { tokens } from '@rhds/tokens/meta.js';
156 |  *
157 |  *          const family = tokens.get('--rh-font-family-body-text');
158 |  *          console.log(family.$description);
159 |  *          // 'The font family used for body text'
160 |  *          ```
161 |  */
162 | export const metaMapCjs: Format = {
163 |   name: 'javascript/meta-map-cjs',
164 |   format: async (...args) =>
165 |     (await metaMapTs
166 |         .format(...args) as string)
167 |         .replace(TYPE_EXPORT, '')
168 |         .replace('export const tokens', 'exports.tokens'),
169 | };
170 | 


--------------------------------------------------------------------------------
/tokens/color/surface.yaml:
--------------------------------------------------------------------------------
  1 | color:
  2 |   $type: color
  3 |   surface:
  4 |     $extensions:
  5 |       com.redhat.ux:
  6 |         order: 250
  7 |     _:
  8 |       $value:
  9 |         - '{color.surface.lightest}'
 10 |         - '{color.surface.lighter}'
 11 |         - '{color.surface.light}'
 12 |         - '{color.surface.dark}'
 13 |         - '{color.surface.darker}'
 14 |         - '{color.surface.darkest}'
 15 |       $description: >-
 16 |         Responsive `surface` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 17 |         Resolves to the surface color corresponding to the surface' color palette.
 18 | 
 19 |     lightest:
 20 |       $value: '{color.white}'
 21 |       $description: Primary surface (light theme)
 22 |     lighter:
 23 |       $value: '{color.gray.10}'
 24 |       $description: Tertiary surface (light theme)
 25 |     light:
 26 |       $value: '{color.gray.20}'
 27 |       $description: Secondary surface (light theme)
 28 |     dark:
 29 |       $value: '{color.gray.70}'
 30 |       $description: Tertiary surface (dark theme)
 31 |     dark-alt:
 32 |       $value: oklch(from(--rh-color-surface-dark) calc(l * 0.82) c h)
 33 |       $deprecated: >
 34 |         Theme authors should use --rh-color-surface-dark.
 35 |         Element authors should use oklch(from var(--rh-color-surface-dark) calc(l * 0.82) c h).
 36 |         Alternative tertiary surface (not available for use with context provider)
 37 |     darker:
 38 |       $value: '{color.gray.90}'
 39 |       $description: Secondary surface (dark theme)
 40 |     darkest:
 41 |       $value: '{color.gray.95}'
 42 |       $description: Primary surface (dark theme)
 43 | 
 44 |     status:
 45 |       danger:
 46 |         _:
 47 |           $value:
 48 |             - '{color.surface.status.danger.on-light}'
 49 |             - '{color.surface.status.danger.on-dark}'
 50 |           $description: >-
 51 |             Responsive `surface-status-danger` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 52 |             Resolves to `--rh-color-surface-status-danger-on-light` on a themable container with a light color palette
 53 |             and `--rh-color-surface-status-danger-on-dark` on a themable container with a dark color palette.
 54 |         on-light:
 55 |           $value: '{color.red-orange.10}'
 56 |           $description: Danger status surface color (light theme)
 57 |         on-dark:
 58 |           $value: '{color.red-orange.10}'
 59 |           $description: Danger status surface color (dark theme)
 60 |       caution:
 61 |         _:
 62 |           $value:
 63 |             - '{color.surface.status.caution.on-light}'
 64 |             - '{color.surface.status.caution.on-dark}'
 65 |           $description: >-
 66 |             Responsive `surface-status-caution` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 67 |             Resolves to `--rh-color-surface-status-caution-on-light` on a themable container with a light color palette
 68 |             and `--rh-color-surface-status-caution-on-dark` on a themable container with a dark color palette.
 69 |         on-light:
 70 |           $value: '{color.orange.10}'
 71 |           $description: Caution status surface color (light theme)
 72 |         on-dark:
 73 |           $value: '{color.orange.10}'
 74 |           $description: Caution status surface color (dark theme)
 75 |       warning:
 76 |         _:
 77 |           $value:
 78 |             - '{color.surface.status.warning.on-light}'
 79 |             - '{color.surface.status.warning.on-dark}'
 80 |           $description: >-
 81 |             Responsive `surface-status-warning` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 82 |             Resolves to `--rh-color-surface-status-warning-on-light` on a themable container with a light color palette
 83 |             and `--rh-color-surface-status-warning-on-dark` on a themable container with a dark color palette.
 84 |         on-light:
 85 |           $value: '{color.yellow.10}'
 86 |           $description: Warning status surface color (light theme)
 87 |         on-dark:
 88 |           $value: '{color.yellow.70}'
 89 |           $description: Warning status surface color (dark theme)
 90 |       # remove default during the next major release
 91 |       default:
 92 |         _:
 93 |           $value:
 94 |             - '{color.surface.status.default.on-light}'
 95 |             - '{color.surface.status.default.on-dark}'
 96 |           $description: >-
 97 |             Responsive `surface-status-default` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 98 |             Resolves to `--rh-color-surface-status-default-on-light` on a themable container with a light color palette
 99 |             and `--rh-color-surface-status-default-on-dark` on a themable container with a dark color palette.
100 |         on-light:
101 |           $value: '{color.surface.status.neutral.on-light}'
102 |           $description: Default status surface color (light theme)
103 |         on-dark:
104 |           $value: '{color.surface.status.neutral.on-light}'
105 |           $description: Default status surface color (dark theme)
106 |       # neutral will replace default in next major release
107 |       neutral:
108 |         _:
109 |           $value:
110 |             - '{color.surface.status.neutral.on-light}'
111 |             - '{color.surface.status.neutral.on-dark}'
112 |           $description: >-
113 |             Responsive `surface-status-neutral` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
114 |             Resolves to `--rh-color-surface-status-neutral-on-light` on a themable container with a light color palette
115 |             and `--rh-color-surface-status-neutral-on-dark` on a themable container with a dark color palette.
116 |         on-light:
117 |           $value: '{color.gray.10}'
118 |           $description: Neutral status surface color (light theme)
119 |         on-dark:
120 |           $value: '{color.gray.10}'
121 |           $description: Neutral status surface color (dark theme)
122 |       info:
123 |         _:
124 |           $value:
125 |             - '{color.surface.status.info.on-light}'
126 |             - '{color.surface.status.info.on-dark}'
127 |           $description: >-
128 |             Responsive `surface-status-info` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
129 |             Resolves to `--rh-color-surface-status-info-on-light` on a themable container with a light color palette
130 |             and `--rh-color-surface-status-info-on-dark` on a themable container with a dark color palette.
131 |         on-light:
132 |           $value: '{color.purple.10}'
133 |           $description: Info status surface color (light theme)
134 |         on-dark:
135 |           $value: '{color.purple.10}'
136 |           $description: Info status surface color (dark theme)
137 |       success:
138 |         _:
139 |           $value:
140 |             - '{color.surface.status.success.on-light}'
141 |             - '{color.surface.status.success.on-dark}'
142 |           $description: >-
143 |             Responsive `surface-status-success` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
144 |             Resolves to `--rh-color-surface-status-success-on-light` on a themable container with a light color palette
145 |             and `--rh-color-surface-status-success-on-dark` on a themable container with a dark color palette.
146 |         on-light:
147 |           $value: '{color.green.10}'
148 |           $description: Success status surface color (light theme)
149 |         on-dark:
150 |           $value: '{color.green.10}'
151 |           $description: Success status surface color (dark theme)
152 | 


--------------------------------------------------------------------------------
/tokens/color/icon.yml:
--------------------------------------------------------------------------------
  1 | color:
  2 |   $type: color
  3 |   icon:
  4 |     $extensions:
  5 |       com.redhat.ux:
  6 |         category: icon
  7 |         heading: Color
  8 |         order: 90
  9 | 
 10 |     primary:
 11 |       _:
 12 |         $value:
 13 |           - '{color.icon.primary.on-light}'
 14 |           - '{color.icon.primary.on-dark}'
 15 |         $description: >-
 16 |           Responsive `icon-primary` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 17 |           Resolves to `--rh-color-icon-primary-on-light` on a themable container with a light color palette
 18 |           and `--rh-color-icon-primary-on-dark` on a themable container with a dark color palette.
 19 |       on-light:
 20 |         $value: '{color.brand.red.on-light}'
 21 |         attributes:
 22 |           category: icon
 23 |           type: color
 24 |       on-dark:
 25 |         $value: '{color.brand.red.on-dark}'
 26 |         attributes:
 27 |           category: icon
 28 |           type: color
 29 | 
 30 |     secondary:
 31 |       _:
 32 |         $value:
 33 |           - '{color.icon.secondary.on-light}'
 34 |           - '{color.icon.secondary.on-dark}'
 35 |         $description: >-
 36 |           Responsive `icon-secondary` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 37 |           Resolves to `--rh-color-icon-secondary-on-light` on a themable container with a light color palette
 38 |           and `--rh-color-icon-secondary-on-dark` on a themable container with a dark color palette.
 39 |       on-light:
 40 |         $value: '{color.gray.95}'
 41 |         attributes:
 42 |           category: icon
 43 |           type: color
 44 |       on-dark:
 45 |         $value: '{color.white}'
 46 |         attributes:
 47 |           category: icon
 48 |           type: color
 49 | 
 50 |     subtle:
 51 |       $description: >-
 52 |         Subtle icons (like the close button in the dialog component) are used in both light and
 53 |         dark themes and also have interactive states.
 54 |       # @see https://github.com/amzn/style-dictionary/issues/716#issuecomment-943673202
 55 |       _:
 56 |         $value: '{color.gray.50}'
 57 |         attributes:
 58 |           category: icon
 59 |           type: color
 60 |       hover:
 61 |         $value: '{color.gray.40}'
 62 |         attributes:
 63 |           category: icon
 64 |           type: color
 65 | 
 66 |     status:
 67 |       danger:
 68 |         _:
 69 |           $value:
 70 |             - '{color.icon.status.danger.on-light}'
 71 |             - '{color.icon.status.danger.on-dark}'
 72 |           $description: >-
 73 |             Responsive `icon-status-danger` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 74 |             Resolves to `--rh-color-icon-status-danger-on-light` on a themable container with a light color palette
 75 |             and `--rh-color-icon-status-danger-on-dark` on a themable container with a dark color palette.
 76 |         on-light:
 77 |           $value: '{color.status.danger.on-light}'
 78 |           $description: Danger status icon color (light theme)
 79 |         on-dark:
 80 |           $value: '{color.status.danger.on-dark}'
 81 |           $description: Danger status icon color (dark theme)
 82 |       caution:
 83 |         _:
 84 |           $value:
 85 |             - '{color.icon.status.caution.on-light}'
 86 |             - '{color.icon.status.caution.on-dark}'
 87 |           $description: >-
 88 |             Responsive `icon-status-caution` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 89 |             Resolves to `--rh-color-icon-status-caution-on-light` on a themable container with a light color palette
 90 |             and `--rh-color-icon-status-caution-on-dark` on a themable container with a dark color palette.
 91 |         on-light:
 92 |           $value: '{color.status.caution.on-light}'
 93 |           $description: Caution status icon color (light theme)
 94 |         on-dark:
 95 |           $value: '{color.status.caution.on-dark}'
 96 |           $description: Caution status icon color (dark theme)
 97 |       warning:
 98 |         _:
 99 |           $value:
100 |             - '{color.icon.status.warning.on-light}'
101 |             - '{color.icon.status.warning.on-dark}'
102 |           $description: >-
103 |             Responsive `icon-status-warning` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
104 |             Resolves to `--rh-color-icon-status-warning-on-light` on a themable container with a light color palette
105 |             and `--rh-color-icon-status-warning-on-dark` on a themable container with a dark color palette.
106 |         on-light:
107 |           $value: '{color.status.warning.on-light}'
108 |           $description: Warning status icon color (light theme)
109 |         on-dark:
110 |           $value: '{color.status.warning.on-dark}'
111 |           $description: Warning status icon color (dark theme)
112 |       #default status token should be removed during next major release
113 |       default:
114 |         _:
115 |           $value:
116 |             - '{color.icon.status.default.on-light}'
117 |             - '{color.icon.status.default.on-dark}'
118 |           $description: >-
119 |             Responsive `icon-status-default` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
120 |             Resolves to `--rh-color-icon-status-default-on-light` on a themable container with a light color palette
121 |             and `--rh-color-icon-status-default-on-dark` on a themable container with a dark color palette.
122 |         on-light:
123 |           $value: '{color.icon.status.neutral.on-light}'
124 |           $description: Default status icon color (light theme)
125 |         on-dark:
126 |           $value: '{color.icon.status.neutral.on-light}'
127 |           $description: Default status icon color (dark theme)
128 |       #neutral status token replaces default status token
129 |       neutral:
130 |         _:
131 |           $value:
132 |             - '{color.icon.status.neutral.on-light}'
133 |             - '{color.icon.status.neutral.on-dark}'
134 |           $description: >-
135 |             Responsive `icon-status-neutral` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
136 |             Resolves to `--rh-color-icon-status-neutral-on-light` on a themable container with a light color palette
137 |             and `--rh-color-icon-status-neutral-on-dark` on a themable container with a dark color palette.
138 |         on-light:
139 |           $value: '{color.status.neutral.on-light}'
140 |           $description: Neutral status icon color (light theme)
141 |         on-dark:
142 |           $value: '{color.status.neutral.on-dark}'
143 |           $description: Neutral status icon color (dark theme)
144 |       info:
145 |         _:
146 |           $value:
147 |             - '{color.icon.status.info.on-light}'
148 |             - '{color.icon.status.info.on-dark}'
149 |           $description: >-
150 |             Responsive `icon-status-info` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
151 |             Resolves to `--rh-color-icon-status-info-on-light` on a themable container with a light color palette
152 |             and `--rh-color-icon-status-info-on-dark` on a themable container with a dark color palette.
153 |         on-light:
154 |           $value: '{color.status.info.on-light}'
155 |           $description: Info status icon color (light theme)
156 |         on-dark:
157 |           $value: '{color.status.info.on-dark}'
158 |           $description: Info status icon color (dark theme)
159 |       success:
160 |         _:
161 |           $value:
162 |             - '{color.icon.status.success.on-light}'
163 |             - '{color.icon.status.success.on-dark}'
164 |           $description: >-
165 |             Responsive `icon-status-success` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
166 |             Resolves to `--rh-color-icon-status-success-on-light` on a themable container with a light color palette
167 |             and `--rh-color-icon-status-success-on-dark` on a themable container with a dark color palette.
168 |         on-light:
169 |           $value: '{color.status.success.on-light}'
170 |           $description: Success status icon color (light theme)
171 |         on-dark:
172 |           $value: '{color.status.success.on-dark}'
173 |           $description: Success status icon color (dark theme)
174 | 


--------------------------------------------------------------------------------
/tokens/color/border.yml:
--------------------------------------------------------------------------------
  1 | color:
  2 |   $type: color
  3 |   border:
  4 |     $extensions:
  5 |       com.redhat.ux:
  6 |         category: border
  7 |         collapse: true
  8 |         order: 80
  9 |         heading: Color
 10 | 
 11 |     strong:
 12 |       _:
 13 |         $value:
 14 |           - '{color.border.strong.on-light}'
 15 |           - '{color.border.strong.on-dark}'
 16 |         $description: >-
 17 |           Responsive `border-strong` color value. Typically read only - use a themable container e.g. `<rh-surface>`
 18 |           Resolves to `--rh-color-border-strong-on-light` on a themable container with a light color palette
 19 |           and `--rh-color-border-strong-on-dark` on a themable container with a dark color palette
 20 |       on-light:
 21 |         $value: '{color.gray.95}'
 22 |         $description: Strong border color (light theme)
 23 |         attributes:
 24 |           category: border
 25 |           type: color
 26 |       on-dark:
 27 |         $value: '{color.white}'
 28 |         $description: Strong border color (dark theme)
 29 |         attributes:
 30 |           category: border
 31 |           type: color
 32 | 
 33 |     subtle:
 34 |       _:
 35 |         $value:
 36 |           - '{color.border.subtle.on-light}'
 37 |           - '{color.border.subtle.on-dark}'
 38 |         $description: >-
 39 |           Responsive `border-subtle` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 40 |           Resolves to `--rh-color-border-subtle-on-light` on a themable container with a light color palette
 41 |           and `--rh-color-border-subtle-on-dark` on a themable container with a dark color palette.
 42 |       on-light:
 43 |         $value: '{color.gray.30}'
 44 |         $description: Subtle border color (light theme)
 45 |         attributes:
 46 |           category: border
 47 |           type: color
 48 |       on-dark:
 49 |         $value: '{color.gray.50}'
 50 |         $description: Subtle border color (dark theme)
 51 |         attributes:
 52 |           category: border
 53 |           type: color
 54 | 
 55 |     interactive:
 56 |       _:
 57 |         $value:
 58 |           - '{color.border.interactive.on-light}'
 59 |           - '{color.border.interactive.on-dark}'
 60 |         $description: >-
 61 |           Responsive `border-interactive` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 62 |           Resolves to `--rh-color-border-interactive-on-light` on a themable container with a light color palette
 63 |           and `--rh-color-border-interactive-on-dark` on a themable container with a dark color palette.
 64 |       on-light:
 65 |         $value: '{color.blue.50}'
 66 |         $description: Interactive border color (light theme)
 67 |         attributes:
 68 |           category: border
 69 |           type: color
 70 |       on-dark:
 71 |         $value: '{color.blue.30}'
 72 |         $description: Interactive border color (dark theme)
 73 |         attributes:
 74 |           category: border
 75 |           type: color
 76 | 
 77 |     # remove destructive during next major release
 78 |     destructive:
 79 |       _:
 80 |         $value:
 81 |           - '{color.border.destructive.on-light}'
 82 |           - '{color.border.destructive.on-dark}'
 83 |         $description: >-
 84 |           Responsive `border-destructive` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
 85 |           Resolves to `--rh-color-border-destructive-on-light` on a themable container with a light color palette
 86 |           and `--rh-color-border-destructive-on-dark` on a themable container with a dark color palette.
 87 |       on-light:
 88 |         $value: '{color.border.status.danger.on-light}'
 89 |         $description: Destructive border color (light theme)
 90 |         attributes:
 91 |           category: border
 92 |           type: color
 93 |       on-dark:
 94 |         $value: '{color.border.status.danger.on-dark}'
 95 |         $description: Destructive border color (dark theme)
 96 |         attributes:
 97 |           category: border
 98 |           type: color
 99 |     status:
100 |       # status-danger should replace destructive during next major release
101 |       danger:
102 |         _:
103 |           $value:
104 |             - '{color.border.status.danger.on-light}'
105 |             - '{color.border.status.danger.on-dark}'
106 |           $description: >-
107 |             Responsive `border-danger` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
108 |             Resolves to `--rh-color-border-danger-on-light` on a themable container with a light color palette
109 |             and `--rh-color-border-danger-on-dark` on a themable container with a dark color palette.
110 |         on-light:
111 |           $value: '{color.status.danger.on-light}'
112 |           $description: Danger border color (light theme)
113 |           attributes:
114 |             category: border
115 |             type: color
116 |         on-dark:
117 |           $value: '{color.status.danger.on-dark}'
118 |           $description: Danger border color (dark theme)
119 |           attributes:
120 |             category: border
121 |             type: color
122 |       caution:
123 |         _:
124 |           $value:
125 |             - '{color.border.status.caution.on-light}'
126 |             - '{color.border.status.caution.on-dark}'
127 |           $description: >-
128 |             Responsive `border-caution` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
129 |             Resolves to `--rh-color-border-caution-on-light` on a themable container with a light color palette
130 |             and `--rh-color-border-caution-on-dark` on a themable container with a dark color palette.
131 |         on-light:
132 |           $value: '{color.status.caution.on-light}'
133 |           $description: Caution border color (light theme)
134 |           attributes:
135 |             category: border
136 |             type: color
137 |         on-dark:
138 |           $value: '{color.status.caution.on-dark}'
139 |           $description: Caution border color (dark theme)
140 |           attributes:
141 |             category: border
142 |             type: color
143 |       warning:
144 |         _:
145 |           $value:
146 |             - '{color.border.status.warning.on-light}'
147 |             - '{color.border.status.warning.on-dark}'
148 |           $description: >-
149 |             Responsive `border-warning` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
150 |             Resolves to `--rh-color-border-warning-on-light` on a themable container with a light color palette
151 |             and `--rh-color-border-warning-on-dark` on a themable container with a dark color palette.
152 |         on-light:
153 |           $value: '{color.status.warning.on-light}'
154 |           $description: Warning border color (light theme)
155 |           attributes:
156 |             category: border
157 |             type: color
158 |         on-dark:
159 |           $value: '{color.status.warning.on-dark}'
160 |           $description: Warning border color (dark theme)
161 |           attributes:
162 |             category: border
163 |             type: color
164 |       neutral:
165 |         _:
166 |           $value:
167 |             - '{color.border.status.neutral.on-light}'
168 |             - '{color.border.status.neutral.on-dark}'
169 |           $description: >-
170 |             Responsive `border-neutral` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
171 |             Resolves to `--rh-color-border-neutral-on-light` on a themable container with a light color palette
172 |             and `--rh-color-border-neutral-on-dark` on a themable container with a dark color palette.
173 |         on-light:
174 |           $value: '{color.status.neutral.on-light}'
175 |           $description: Neutral border color (light theme)
176 |           attributes:
177 |             category: border
178 |             type: color
179 |         on-dark:
180 |           $value: '{color.status.neutral.on-dark}'
181 |           $description: Neutral border color (dark theme)
182 |           attributes:
183 |             category: border
184 |             type: color
185 |       info:
186 |         _:
187 |           $value:
188 |             - '{color.border.status.info.on-light}'
189 |             - '{color.border.status.info.on-dark}'
190 |           $description: >-
191 |             Responsive `border-info` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
192 |             Resolves to `--rh-color-border-info-on-light` on a themable container with a light color palette
193 |             and `--rh-color-border-info-on-dark` on a themable container with a dark color palette.
194 |         on-light:
195 |           $value: '{color.status.info.on-light}'
196 |           $description: Info border color (light theme)
197 |           attributes:
198 |             category: border
199 |             type: color
200 |         on-dark:
201 |           $value: '{color.status.info.on-dark}'
202 |           $description: Info border color (dark theme)
203 |           attributes:
204 |             category: border
205 |             type: color
206 |       success:
207 |         _:
208 |           $value:
209 |             - '{color.border.status.success.on-light}'
210 |             - '{color.border.status.success.on-dark}'
211 |           $description: >-
212 |             Responsive `border-success` color value. Typically read-only - use a themable container, e.g. `<rh-surface>`.
213 |             Resolves to `--rh-color-border-success-on-light` on a themable container with a light color palette
214 |             and `--rh-color-border-success-on-dark` on a themable container with a dark color palette.
215 |         on-light:
216 |           $value: '{color.status.success.on-light}'
217 |           $description: Success border color (light theme)
218 |           attributes:
219 |             category: border
220 |             type: color
221 |         on-dark:
222 |           $value: '{color.status.success.on-dark}'
223 |           $description: Success border color (dark theme)
224 |           attributes:
225 |             category: border
226 |             type: color
227 | 


--------------------------------------------------------------------------------
/docs/assets/demo-styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --swatch-size: 350px;
  3 |   font-family: var(--rh-font-family-body-text);
  4 |   font-size: var(--rh-font-size-body-text-lg);
  5 |   line-height: 1.6;
  6 | }
  7 | 
  8 | html,
  9 | body {
 10 |   margin: 0;
 11 |   padding: 0;
 12 | }
 13 | 
 14 | :is(h1,h2,h3,h4,h5,h6) {
 15 |   font-family: var(--rh-font-family-heading);
 16 | }
 17 | 
 18 | #main-header {
 19 |   background: var(--rh-color-gray-90);
 20 |   color: var(--rh-color-text-primary-on-dark);
 21 |   padding: var(--rh-space-xs) var(--rh-space-2xl);
 22 |   display: flex;
 23 |   align-items: center;
 24 |   justify-content: space-between;
 25 |   height: 72px;
 26 |   position: sticky;
 27 |   top: 0;
 28 |   gap: var(--rh-space-lg);
 29 |   z-index: 1000;
 30 |   --rh-icon-size: var(--rh-size-icon-04);
 31 |   & [icon="github"] {
 32 |     color: white;
 33 |   }
 34 |   & svg {
 35 |     height: var(--rh-size-icon-04);
 36 |     color: white;
 37 |   }
 38 |   & form {
 39 |     margin-inline-start: auto;
 40 |     display: flex;
 41 |     align-items: center;
 42 |     gap: var(--rh-space-lg);
 43 |   }
 44 | }
 45 | 
 46 | #main-surface {
 47 |   padding-inline: var(--rh-length-2xl);
 48 |   & aside {
 49 |     float: right;
 50 |     padding-inline: 2em;
 51 |     & :is(ol, ul) {
 52 |       list-style-type: none;
 53 |       padding-inline-start: 0;
 54 |     }
 55 |   }
 56 |   &[color-palette="lightest"] {
 57 |     --_code-background: var(--rh-color-surface-lighter);
 58 |   }
 59 |   &[color-palette="darkest"] {
 60 |     --_code-background: var(--rh-color-surface-dark);
 61 |   }
 62 | }
 63 | 
 64 | #theme-tokens {
 65 |   display: grid;
 66 |   grid-template-columns: 1fr 1fr;
 67 |   gap: var(--rh-space-xl);
 68 | }
 69 | 
 70 | a {
 71 |   color: var(--rh-color-interactive-primary-default);
 72 |   &:hover { color: var(--rh-color-interactive-primary-hover); }
 73 |   &:focus-within { color: var(--rh-color-interactive-primary-focus); }
 74 |   &:active { color: var(--rh-color-interactive-primary-active); }
 75 |   &:visited {
 76 |     color: var(--rh-color-interactive-primary-visited);
 77 |     &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
 78 |     &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
 79 |     &:active { color: var(--rh-color-interactive-primary-visited-active); }
 80 |   }
 81 | }
 82 | 
 83 | h1 {
 84 |   display: contents;
 85 | }
 86 | 
 87 | :is(h1,h2,h3,h4,h5,h6) a {
 88 |   padding-inline-start: 0.5em;
 89 |   opacity: 0;
 90 |   color: var(--rh-color-border-strong-on-light);
 91 | }
 92 | 
 93 | :is(h1,h2,h3,h4,h5,h6):is(:hover, :focus-within) a {
 94 |   opacity: 1;
 95 | }
 96 | 
 97 | rh-tooltip:not(:defined) {
 98 |   display: none;
 99 | }
100 | 
101 | table {
102 |   border-collapse: collapse;
103 |   table-layout: auto;
104 |   width: 100%;
105 |   text-align: start;
106 | }
107 | 
108 | #media table :is(td,th):first-child {
109 |   display: none;
110 | }
111 | 
112 | th {
113 |   text-align: start;
114 | }
115 | 
116 | tr {
117 |   border-bottom: 1px solid var(--rh-color-border-subtle-on-light);
118 | }
119 | 
120 | th, td {
121 |   padding-block: var(--rh-space-sm);
122 |   padding-inline: var(--rh-space-md);
123 | }
124 | 
125 | td:first-child {
126 |   padding-inline-start: var(--rh-space-lg, 16px);
127 | }
128 | 
129 | &.variants {
130 |   & > td {
131 |     vertical-align: top;
132 |   }
133 | 
134 |   & details {
135 |     position: relative;
136 |     & table {
137 |       padding-inline: var(--rh-space-lg);
138 |     }
139 |   }
140 | 
141 |   & summary {
142 |     height: 2.5em;
143 |     width: 2.5em;
144 |     position: absolute;
145 |     translate: 0px -2.25em;
146 |     & rh-tooltip {
147 |       display: block;
148 |       position: absolute;
149 |       inset: 0;
150 |     }
151 |   }
152 | 
153 |   & > td:first-child {
154 |     padding: 0;
155 |   }
156 | }
157 | 
158 | td.token > div {
159 |   display: flex;
160 |   flex-flow: row wrap;
161 |   max-width: 350px;
162 |   gap: var(--rh-space-xs);
163 | }
164 | 
165 | .hex {
166 |   text-transform: uppercase;
167 | }
168 | 
169 | section {
170 |   /* display: grid; */
171 |   gap: var(--rh-space-md);
172 |   grid-template-columns: repeat(auto-fill, var(--swatch-size));
173 |   padding: var(--rh-space-sm);
174 |   align-items: start;
175 | }
176 | 
177 | section section {
178 |   padding: 0;
179 | }
180 | 
181 | article {
182 |   display: grid;
183 |   position: relative;
184 | }
185 | 
186 | section :is(h2, h3, h4, h5, h6) {
187 |   grid-column: -1/1;
188 |   /* text-transform: capitalize; */
189 | }
190 | 
191 | code {
192 |   font-size: var(--rh-font-size-body-text-sm);
193 |   font-weight: var(--rh-font-weight-body-text);
194 | }
195 | 
196 | .comment:empty {
197 |   display: none;
198 | }
199 | 
200 | .copy-button {
201 |   display: inline-flex;
202 |   align-items: center;
203 |   color: inherit;
204 |   border-radius: var(--rh-border-radius-default);
205 |   border-width: 0;
206 |   padding: var(--rh-space-xs);
207 |   background-color: var(--_code-background);
208 |   cursor: pointer;
209 |   & svg {
210 |     width: 24px;
211 |     fill: currentcolor;
212 |   }
213 | }
214 | 
215 | .token:is(.value, .name) .copy-button {
216 |   overflow-x: hidden;
217 |   max-width: 400px;
218 |   white-space: pre;
219 |   text-overflow: ellipsis;
220 | }
221 | 
222 | .token.value .copy-button.color {
223 |   border-radius: var(--rh-border-radius-pill);
224 |   padding-block: 0;
225 | }
226 | 
227 | .token.value .copy-button.color::after {
228 |   content: '';
229 |   display: inline-block;
230 |   border-radius: 100%;
231 |   background-color: var(--color);
232 |   height: .5rem;
233 |   aspect-ratio: 1;
234 |   margin-inline-start: .5rem;
235 | }
236 | 
237 | .copy-button:is(:focus, :active, :hover) {
238 |   opacity: 1;
239 | }
240 | 
241 | .copy-cell {
242 |   text-align: end;
243 |   vertical-align: middle;
244 | }
245 | 
246 | .copy-button {
247 |   color: var(--rh-color-text-secondary);
248 | }
249 | 
250 | .on-dark  {
251 |   background-color: var(--rh-color-surface-dark);
252 |   color: var(--rh-color-text-primary-on-dark);
253 |   & .copy-button {
254 |     --_code-background: var(--rh-color-surface-dark);
255 |     color: var(--rh-color-text-secondary-on-dark);
256 |     &:is(:focus, :active, :hover) {
257 |       background: var(--rh-color-interactive-blue-darker);
258 |     }
259 |   }
260 | }
261 | 
262 | .on-light {
263 |   background-color: var(--rh-color-surface-light);
264 |   color: var(--rh-color-text-primary-on-light);
265 |   & .copy-button {
266 |     --_code-background: var(--rh-color-surface-lighter);
267 |     color: var(--rh-color-text-secondary-on-light);
268 |     &:is(:focus, :active, :hover) {
269 |       background: var(--rh-color-interactive-blue-lighter);
270 |     }
271 |   }
272 | }
273 | 
274 | .font samp {
275 |   font-size: var(--font-size, var(--rh-font-size-heading-md));
276 |   font-family: var(--font-family, var(--rh-font-family-body-text));
277 |   font-weight: var(--font-weight, var(--rh-font-weight-body-text-regular));
278 | }
279 | 
280 | .font.family {
281 |   align-content: center;
282 | }
283 | 
284 | .font :is(samp, .common) {
285 |   text-transform: capitalize;
286 | }
287 | 
288 | .color {
289 |   & samp {
290 |     color: var(--color);
291 |   }
292 | 
293 |   &:not(.border, .text) samp {
294 |     aspect-ratio: 1;
295 |     height: var(--rh-length-xl);
296 |     display: block;
297 |     border-radius: 100%;
298 |     border: 1px solid transparent;
299 |     background: var(--color);
300 |   }
301 | 
302 |   &:not(.border, .text).light samp {
303 |     border-color: var(--rh-color-gray-90);
304 |   }
305 | 
306 |   &.theme .sample .values {
307 |     display: grid;
308 |     grid-auto-flow: column;
309 |     grid-template-rows: 1fr 1fr;
310 |     place-content: center;
311 |     gap: var(--rh-space-md);
312 |     & samp {
313 |       border-width: 8px;
314 |       border-style: solid;
315 |       &:first-child { border-color: var(--rh-color-surface-light) }
316 |       &:last-child { border-color: var(--rh-color-surface-dark) }
317 |     }
318 |   }
319 | }
320 | 
321 | .line-height samp {
322 |   line-height: var(--line-height);
323 | }
324 | 
325 | .box-shadow samp {
326 |   height: var(--rh-length-2xl);
327 |   aspect-ratio: 1;
328 |   border-radius: var(--rh-border-radius-default);
329 |   box-shadow: var(--box-shadow);
330 |   display: block;
331 | }
332 | 
333 | .border samp {
334 |   width: var(--rh-length-2xl);
335 |   aspect-ratio: 2;
336 |   display: block;
337 |   border-style: solid;
338 |   border-width: var(--width, var(--rh-border-width-md));
339 |   border-color: var(--color, var(--rh-color-border-strong-on-light));
340 |   border-radius: var(--radius, var(--rh-border-radius-default));
341 | }
342 | 
343 | .opacity samp {
344 |   opacity: var(--opacity);
345 |   background-color: black;
346 |   display: block;
347 |   width: var(--rh-length-xl);
348 |   aspect-ratio: 1;
349 | }
350 | 
351 | .space samp {
352 |   width: var(--space);
353 |   background-color: black;
354 |   opacity: var(--rh-opacity-60);
355 |   display: block;
356 |   aspect-ratio: 1;
357 | }
358 | 
359 | .length samp {
360 |   width: var(--length);
361 |   background-color: black;
362 |   opacity: var(--rh-opacity-60);
363 |   display: block;
364 |   border-bottom: 2px solid var(--rh-color-border-strong-on-light);
365 |   position: relative;
366 | }
367 | 
368 | .length samp::before,
369 | .length samp::after {
370 |   content: '';
371 |   position: absolute;
372 |   display: block;
373 |   height: 4px;
374 |   width: 0;
375 |   inset-block: -4px;
376 |   border-style: solid;
377 |   border-inline-width: 2px 0;
378 |   border-color: var(--rh-color-border-interactive-on-light);
379 | }
380 | 
381 | .length samp::before {
382 |   inset-inline: -2px 100%;
383 | }
384 | 
385 | .length samp::after {
386 |   inset-inline: 100% 2px;
387 | }
388 | 
389 | .icon:not(.color) samp {
390 |   aspect-ratio: 1;
391 |   display: block;
392 |   width: var(--icon-size);
393 |   border: var(--rh-border-width-md) dotted var(--rh-color-border-strong-on-light);
394 | }
395 | 
396 | #typography {
397 |   --swatch-size: 100%;
398 | }
399 | 
400 | :is(#typography, .box-shadow) .comment {
401 |   display: none;
402 | }
403 | 
404 | .btt {
405 |   text-align: right;
406 |   display: block;
407 | }
408 | 
409 | .language-html .hljs-tag { color: var(--rh-color-blue-500, #004080); }
410 | .language-html .hljs-name { color: var(--rh-color-brand-red-dark, #be0000); }
411 | .language-html .hljs-attr { color: var(--rh-color-orange-300, #ec7a08); }
412 | .language-html .hljs-string { color: var(--rh-color-green-500, #3e8635); }
413 | 
414 | code[class^="language-"] {
415 |   max-width: 100%;
416 |   display: block;
417 |   overflow-x: scroll;
418 | }
419 | 
420 | .breakpoint img {
421 |   max-height: var(--rh-length-3xl);
422 | }
423 | 
424 | dl.grid {
425 |   display: grid;
426 |   grid-template-columns: max-content 1fr;
427 |   gap: 6px 8px;
428 |   align-items: center;
429 | }
430 | 
431 | dl.grid dt {
432 |   font-style: italic;
433 | }
434 | 
435 | dl.grid dt:after {
436 |   content: ': ';
437 | }
438 | 
439 | dl.grid dt,
440 | dl.grid dd {
441 |   margin: 0;
442 |   padding: 0;
443 | }
444 | 
445 | dl.grid dd {
446 |   display: flex;
447 |   align-items: center;
448 | }
449 | 
450 | #theme-link-demo div {
451 |   display: grid;
452 |   gap: var(--rh-space-2xl);
453 |   grid-template-columns: 1fr 1fr;
454 |   padding: var(--rh-space-2xl);
455 |   border-radius: var(--rh-border-radius-default);
456 |   border: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
457 |   & form {
458 |     grid-column: 1/-1;
459 |   }
460 | }
461 | 
462 | .swatches {
463 |   display: grid;
464 |   grid-template-columns: repeat(auto-fill,minmax(200px, auto));
465 |   gap: var(--rh-space-md);
466 |   & figure {
467 |     margin: 0;
468 |     & samp {
469 |       transition: all var(--rh-animation-speed, 0.3s) var(--rh-animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));
470 |       display: block;
471 |       &.swatch {
472 |         padding: var(--rh-space-2xl) var(--rh-space-xl);
473 |         border-radius: var(--rh-border-radius-pill);
474 |         outline: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
475 |       }
476 |       &.font {
477 |         font-size: var(--rh-font-size-heading-lg);
478 |         font-weight: var(--rh-font-weight-heading-bold);
479 |       }
480 |       &:hover,
481 |       &:focus-within {
482 |         outline-width: var(--rh-border-width-lg);
483 |         outline-color: var(--rh-border-color-strong);
484 |       }
485 |     }
486 |   }
487 | }
488 | 
489 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width">
  6 |     <title>Red Hat Design Tokens</title>
  7 |     <link rel="shortcut icon" href="https://ux.redhat.com/assets/logo-red-hat.svg">
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |     <link rel="preconnect" href="https://static.redhat.com">
 10 |     <link rel="preconnect" href="https://ga.jspm.io">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css">
 13 |     <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"> 
 14 |     <link rel="stylesheet" href="/assets/packages/@rhds/elements/rh-footer/rh-footer-lightdom.css">
 15 |     <link rel="stylesheet" href="/assets/packages/@rhds/tokens/css/global.css">
 16 |     <link rel="stylesheet" href="/assets/demo-styles.css">
 17 |     <script type="importmap">
 18 |     {
 19 |       "imports": {
 20 |         "@rhds/": "/assets/packages/@rhds/",
 21 |         "@rhds/elements": "/assets/packages/@rhds/elements/elements.js",
 22 |         "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.7/dist/floating-ui.core.mjs",
 23 |         "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.10/dist/floating-ui.dom.mjs",
 24 |         "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.7/dist/floating-ui.utils.mjs",
 25 |         "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.7/dist/floating-ui.utils.dom.mjs",
 26 |         "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.2/development/index.js",
 27 |         "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
 28 |         "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
 29 |         "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.1/core.js",
 30 |         "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.1/",
 31 |         "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.1/core.js",
 32 |         "@rhds/elements/lib/context/headings/": "https://ga.jspm.io/npm:@rhds/elements@2.0.0/lib/context/headings/",
 33 |         "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.0.0/elements/",
 34 |         "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.1/icons.js",
 35 |         "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.0.1/js/media.js",
 36 |         "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
 37 |         "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
 38 |         "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
 39 |         "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
 40 |         "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
 41 |         "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
 42 |       }
 43 |     }
 44 |     </script>
 45 |     <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
 46 |     <script type="module" src="/assets/script.js"></script>
 47 |   </head>
 48 |   <body>
 49 |     <rh-surface role="banner"
 50 |                 color-palette="darkest"
 51 |                 id="main-header">
 52 |       <h1>
 53 |         <svg version="1.1" x="0" y="0" viewBox="0 0 284 48" style="enable-background:new 0 0 284 48" xml:space="preserve" aria-label="Red Hat Digital Design System">
 54 |           <g transform="translate(-20 -16)">
 55 |             <path style="fill: currentColor" d="M103.2 42.8h5.4c4.2 0 7.4 3.1 7.4 7s-3.2 7-7.4 7h-5.4v-14zm2.9 2.6v8.8h2.5c2.5 0 4.4-1.9 4.4-4.4 0-2.5-1.9-4.5-4.4-4.5h-2.5zM117.6 43.6c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6s-.7 1.6-1.6 1.6c-.9 0-1.6-.7-1.6-1.6zm2.9 13.2h-2.7V46.4h2.7v10.4zM122.2 51.6c0-3 2.4-5.3 5.4-5.3 1 0 2 .3 2.8.8v-.7h2.7v10.4c0 2.8-1.8 4.3-5.2 4.3-1.6 0-3.1-.3-4.3-.9l1-2.1c1.1.6 2.2.8 3.3.8 1.6 0 2.5-.7 2.5-2.1V56c-.8.6-1.8.9-2.9.9-3 0-5.3-2.4-5.3-5.3zm5.7 3c1 0 1.8-.3 2.4-.9v-4.1c-.6-.6-1.5-.9-2.4-.9-1.7 0-3 1.3-3 3 0 1.6 1.3 2.9 3 2.9zM135 43.6c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6s-.7 1.6-1.6 1.6c-.9 0-1.6-.7-1.6-1.6zm2.9 13.2h-2.7V46.4h2.7v10.4zM141.5 48.7h-2.1v-2.3h2.1v-2.7l2.7-.6v3.3h3v2.3h-3v4.6c0 1 .4 1.3 1.4 1.3.5 0 .9-.1 1.5-.2v2.2c-.6.2-1.5.3-2.1.3-2.3 0-3.5-1.1-3.5-3.1v-5.1zM148 53.8c0-2 1.6-3.2 4.3-3.2.9 0 1.7.1 2.5.4v-.7c0-1.2-.7-1.8-2.2-1.8-.9 0-1.9.3-3.2.9l-1-2c1.6-.8 3.1-1.1 4.6-1.1 2.8 0 4.4 1.4 4.4 3.9V57h-2.7v-.7c-.9.6-1.8.9-3 .9-2.1-.2-3.7-1.5-3.7-3.4zm4.6 1.3c.9 0 1.7-.2 2.3-.7v-1.6c-.7-.3-1.4-.4-2.2-.4-1.3 0-2 .5-2 1.3 0 .9.7 1.4 1.9 1.4zM162.4 56.8h-2.7v-14l2.7-.6v14.6zM176.3 56c-.8.7-1.9 1-3 1-3 0-5.3-2.4-5.3-5.4 0-3 2.4-5.3 5.4-5.3 1 0 2 .3 2.8.8v-4.3l2.7-.6v14.6h-2.7V56zm-2.5-1.4c1 0 1.9-.4 2.5-1v-4.1c-.6-.6-1.5-1-2.5-1-1.7 0-3 1.3-3 3 0 1.8 1.3 3.1 3 3.1zM186.3 57c-3.2 0-5.6-2.4-5.6-5.4 0-3 2.3-5.4 5.4-5.4 3 0 5.2 2.4 5.2 5.6v.7h-7.8c.4 1.3 1.5 2.2 3 2.2.9 0 1.7-.3 2.3-.8l1.8 1.6c-1.3 1.1-2.6 1.5-4.3 1.5zm-2.9-6.4h5.1c-.3-1.2-1.3-2.1-2.5-2.1-1.3 0-2.2.8-2.6 2.1zM193.5 53.8c1.2.8 2.3 1.2 3.4 1.2 1.2 0 2-.4 2-1.1 0-.5-.4-.8-1.3-1l-2-.3c-2.1-.3-3.2-1.3-3.2-3 0-2 1.7-3.3 4.3-3.3 1.5 0 3 .4 4.3 1.3l-1.3 1.8c-1.1-.7-2.2-1-3.2-1s-1.6.4-1.6 1 .4.8 1.4 1l2 .3c2 .3 3.2 1.4 3.2 3 0 2-1.9 3.4-4.6 3.4-1.9 0-3.6-.5-4.8-1.4l1.4-1.9zM202.6 43.6c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6s-.7 1.6-1.6 1.6c-.9 0-1.6-.7-1.6-1.6zm3 13.2h-2.7V46.4h2.7v10.4zM207.2 51.6c0-3 2.4-5.3 5.4-5.3 1 0 2 .3 2.8.8v-.7h2.7v10.4c0 2.8-1.8 4.3-5.2 4.3-1.6 0-3.1-.3-4.3-.9l1-2.1c1.1.6 2.2.8 3.3.8 1.6 0 2.5-.7 2.5-2.1V56c-.8.6-1.8.9-2.9.9-2.9 0-5.3-2.4-5.3-5.3zm5.7 3c1 0 1.8-.3 2.4-.9v-4.1c-.6-.6-1.5-.9-2.4-.9-1.7 0-3 1.3-3 3 0 1.6 1.3 2.9 3 2.9zM220.3 46.4h2.7v.8c.8-.7 1.8-1 2.9-1 2.4 0 4.1 1.7 4.1 4.1v6.5h-2.7v-6.1c0-1.3-.8-2.2-2.2-2.2-.9 0-1.7.4-2.1 1v7.2h-2.7V46.4zM236.6 53.8c1.2.8 2.3 1.2 3.4 1.2 1.2 0 2-.4 2-1.1 0-.5-.4-.8-1.3-1l-2-.3c-2.1-.3-3.2-1.3-3.2-3 0-2 1.7-3.3 4.3-3.3 1.5 0 3 .4 4.3 1.3l-1.3 1.8c-1.1-.7-2.2-1-3.2-1s-1.6.4-1.6 1 .4.8 1.4 1l2 .3c2 .3 3.2 1.4 3.2 3 0 2-1.9 3.4-4.6 3.4-1.9 0-3.6-.5-4.8-1.4l1.4-1.9zM248.7 56.9l-4.1-10.5h3l2.6 7.1 3-7.1h3l-4.8 11.2c-1.1 2.5-2.3 3.5-4.6 3.5-.5 0-.9 0-1.2-.1v-2.4c.3.1.5.1 1 .1 1 0 1.7-.5 2.1-1.4v-.4zM257.8 53.8c1.2.8 2.3 1.2 3.4 1.2 1.2 0 2-.4 2-1.1 0-.5-.4-.8-1.3-1l-2-.3c-2.1-.3-3.2-1.3-3.2-3 0-2 1.7-3.3 4.3-3.3 1.5 0 3 .4 4.3 1.3l-1.3 1.8c-1.1-.7-2.2-1-3.2-1s-1.6.4-1.6 1 .4.8 1.4 1l2 .3c2 .3 3.2 1.4 3.2 3 0 2-1.9 3.4-4.6 3.4-1.9 0-3.6-.5-4.8-1.4l1.4-1.9zM268.3 48.7h-2.1v-2.3h2.1v-2.7l2.7-.6v3.3h3v2.3h-3v4.6c0 1 .4 1.3 1.4 1.3.5 0 .9-.1 1.5-.2v2.2c-.6.2-1.5.3-2.1.3-2.3 0-3.5-1.1-3.5-3.1v-5.1zM280.4 57c-3.2 0-5.6-2.4-5.6-5.4 0-3 2.3-5.4 5.4-5.4 3 0 5.2 2.4 5.2 5.6v.7h-7.8c.4 1.3 1.5 2.2 3 2.2.9 0 1.7-.3 2.3-.8l1.8 1.6c-1.4 1.1-2.6 1.5-4.3 1.5zm-2.9-6.4h5.1c-.3-1.2-1.3-2.1-2.5-2.1-1.3 0-2.2.8-2.6 2.1zM287 46.4h2.7v.8c.7-.6 1.7-1 2.7-1 1.3 0 2.4.6 3.1 1.6.8-1 2-1.6 3.4-1.6 2.3 0 4 1.7 4 4.1v6.5h-2.7v-6.1c0-1.3-.8-2.2-2-2.2-.8 0-1.5.4-2 1 0 .2.1.5.1.7v6.5h-2.7v-6.1c0-1.3-.8-2.2-2-2.2-.8 0-1.5.3-1.9.9v7.3H287V46.4zM103.3 20.8h6.4c2.8 0 4.7 1.7 4.7 4.1 0 1.8-1.1 3.3-2.9 3.8l3.1 6h-2.3l-2.9-5.7h-3.9v5.7h-2.1V20.8zm2.1 1.9v4.7h4.1c1.6 0 2.7-.9 2.7-2.3s-1.1-2.3-2.7-2.3h-4.1zM120.6 35c-3 0-5.3-2.3-5.3-5.3 0-2.9 2.2-5.2 5.1-5.2 2.8 0 4.9 2.3 4.9 5.3v.6h-8c.3 1.7 1.7 2.9 3.4 2.9 1 0 1.9-.3 2.6-.9l1.3 1.3c-1.3.9-2.5 1.3-4 1.3zm-3.4-6.1h6c-.3-1.6-1.5-2.7-3-2.7s-2.7 1.1-3 2.7zM135 33.9c-.9.7-1.9 1.1-3.1 1.1-2.9 0-5.1-2.3-5.1-5.3 0-2.9 2.3-5.2 5.2-5.2 1.1 0 2.2.4 3.1 1v-4.7l2-.4v14.4h-2v-.9zm-2.9-.6c1.1 0 2.1-.4 2.8-1.2v-4.6c-.7-.8-1.7-1.2-2.8-1.2-2 0-3.5 1.5-3.5 3.5s1.6 3.5 3.5 3.5zM143.7 20.8h2.1v6h7.4v-6h2.1v14h-2.1v-6.1h-7.4v6.1h-2.1v-14zM157.3 31.9c0-1.9 1.6-3.1 4.1-3.1 1 0 1.9.2 2.8.6v-1.1c0-1.4-.9-2.2-2.5-2.2-.9 0-1.9.3-3.2.9l-.7-1.5c1.5-.7 2.8-1 4.2-1 2.6 0 4.2 1.3 4.2 3.6v6.7h-2V34c-.9.7-1.9 1.1-3.2 1.1-2.2-.1-3.7-1.3-3.7-3.2zm4.2 1.6c1.1 0 2-.3 2.7-1v-1.8c-.8-.4-1.6-.6-2.6-.6-1.5 0-2.4.7-2.4 1.7 0 1.1.9 1.7 2.3 1.7zM169.4 26.3h-2.2v-1.7h2.2V22l2-.5v3.1h3v1.7h-3v5.5c0 1 .4 1.4 1.5 1.4.6 0 1-.1 1.5-.2v1.7c-.5.2-1.3.3-1.9.3-2 0-3-.9-3-2.7v-6z"/>
 56 |             <path style="fill: currentColor" d="M84.9 18.8h1v40h-1z"/>
 57 |             <g transform="translate(19.5 21.5)">
 58 |               <path d="M40.8 14.8c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4C21 20.1 12 12.5 12 10.2c0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"/>
 59 |               <path d="M33.2 20c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9S19.2-.4 17.6-.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" style="fill:#e00"/>
 60 |             </g>
 61 |           </g>
 62 |         </svg>
 63 |       </h1>
 64 |       <form id="global-palette">
 65 |         <label for="mode-switch">Color Palette</label>
 66 |         <rh-switch id="mode-switch">
 67 |           <rh-icon slot="message-off" aria-label="lightest" set="standard" icon="sun"></rh-icon>
 68 |           <rh-icon slot="message-on" aria-label="darkest" set="standard" icon="star"></rh-icon>
 69 |         </rh-switch>
 70 |       </form>
 71 |       <a href="https://github.com/redhat-ux/red-hat-design-tokens">
 72 |         <rh-icon set="social" icon="github" size="lg"></rh-icon>
 73 |       </a>
 74 |     </rh-surface>
 75 |     <rh-surface role="main" id="main-surface">
 76 |       <rh-back-to-top href="#main-surface">Back to top</rh-back-to-top>
 77 |       <aside id="downloads">
 78 |         <nav>
 79 |           <h3>Contents</h3>
 80 |           <ol>
 81 |             <li><a href="#color">Color</a></li>
 82 |             <li><a href="#box-shadow">Box Shadow</a></li>
 83 |             <li><a href="#font">Typography</a></li>
 84 |             <li><a href="#border">Borders</a></li>
 85 |             <li><a href="#opacity">Opacity</a></li>
 86 |             <li><a href="#space">Spacers</a></li>
 87 |             <li><a href="#length">Length</a></li>
 88 |             <li><a href="#icon">Icons</a></li>
 89 |             <li><a href="#breakpoints">Breakpoints</a></li>
 90 |             <li><a href="#media">Media Queries</a></li>
 91 |           </ol>
 92 |           <h3>Downloads</h3>
 93 |           <ul>
 94 |             <li><a href="rhds.tokens.json">Tokens JSON</a></li>
 95 |             <li><a href="rhds.sketchpalette">Sketch Color Palette</a></li>
 96 |             <li><a href="extension.vsix">VSCode Extension</a></li>
 97 |           </ul>
 98 |         </nav>
 99 |       </aside>
100 | 
101 |       <section id="overview">
102 |         <h2>Overview<a href="#overview">#</a></h2>
103 |         <p>
104 |           Design tokens are a way of naming, defining, categorizing, and sharing <em>values</em>
105 |           in a design system. Doing so helps us produce <em>uniform user experiences</em> across
106 |           platforms and teams. Tokens are defined once using a standard syntax, and can be
107 |           transformed by software into a variety of formats and helpers, for multiple platforms.
108 |         </p>
109 | 
110 |         <p>
111 |           An example token is
112 |           <a href="#--rh-color-brand-red-on-dark"><code>--rh-color-brand-red-on-dark</code></a>,
113 |           the version of “Red Hat red” for use on dark backgrounds.
114 |           It has the value <code>#FF442B</code>.
115 |         </p>
116 | 
117 |         <p>
118 |           Tokens are for <em>designers</em> and <em>developers</em>. They aid <em>designers</em>
119 |           by <em>limiting</em> the pool of available style values to the brand standards and by
120 |           <em>standardizing</em> their names and uses. They aid <em>developers</em> in making it
121 |           easier to implement the designers’ specification by referencing well-defined token names.
122 |         </p>
123 | 
124 |         <p>
125 |           A designer might access the tokens in an XD template or via a figma plugin.
126 |           We are researching the best way to make this available across teams and are eager for
127 |           feedback.
128 |         </p>
129 | 
130 |         <p>
131 |           A developer might use them by referencing preloaded <em>CSS custom properties</em>, using
132 |           <em>SCSS variables</em>, or by using <em>editor snippets</em> and <em>lint rules</em> to
133 |           auto-complete variable names in CSS files.
134 |         </p>
135 | 
136 |         <p>
137 |           We want <a href="https://github.com/RedHat-UX/red-hat-design-tokens/discussions">your feedback</a>
138 |           on our tokens! Are there missing values? Do you have an idea for an output format or tool
139 |           integration?
140 |         </p>
141 | 
142 |       </section>
143 | 
144 |       <section id="theme-tokens">
145 |         <rh-card>
146 |           <h2 slot="header" style="color: var(--rh-color-accent-base);">Theme Tokens</h2>
147 |           <p>Use <a href="#">theme tokens</a> for best results.</p>
148 |         </rh-card>
149 |         <rh-card color-palette="darkest">
150 |           <h2 slot="header" style="color: var(--rh-color-accent-base);">Why, though?</h2>
151 |           <p>That way, colours respond to their parents' <code>color-palette</code>
152 |             Without requiring <a href="#">custom CSS</a></p>
153 |           <rh-cta href="#color">Read More</rh-cta>
154 |         </rh-card>
155 |       </section>
156 | 
157 |       {% category path = 'color',
158 |                   exclude = ['border', 'text', 'icon'] %}
159 |       {% category path = 'box-shadow' %}
160 |       {% category path = 'font',
161 |                   include = ['line-height', 'color.text'] %}
162 |       {% category path = 'border',
163 |                   include = 'color.border' %}
164 |       {% category path = 'opacity' %}
165 |       {% category path = 'space' %}
166 |       {% category path = 'length' %}
167 |       {% category path = 'size.icon',
168 |                   name = 'icon',
169 |                   include = 'color.icon' %}
170 |       {% category path = 'breakpoint' %}
171 |       {% category path = 'media' %}
172 | 
173 | 
174 |     </rh-surface>
175 |     <rh-footer-universal>
176 |       <h3 slot="links-primary" hidden>Red Hat legal and privacy links</h3>
177 |       <ul slot="links-primary">
178 |         <li><a href="#">About Red Hat</a></li>
179 |         <li><a href="#">Jobs</a></li>
180 |         <li><a href="#">Events</a></li>
181 |         <li><a href="#">Locations</a></li>
182 |         <li><a href="#">Contact Red Hat</a></li>
183 |         <li><a href="#">Red Hat Blog</a></li>
184 |         <li><a href="#">Cool Stuff Store</a></li>
185 |         <li><a href="#">Diversity, equity, and inclusion</a></li>
186 |       </ul>
187 |       <rh-footer-copyright slot="links-secondary"></rh-footer-copyright>
188 |       <h3 slot="links-secondary" hidden>Red Hat legal and privacy links</h3>
189 |       <ul slot="links-secondary">
190 |         <li><a href="#">Privacy statement</a></li>
191 |         <li><a href="#">Terms of use</a></li>
192 |         <li><a href="#">All policies and guidelines</a></li>
193 |         <li><a href="#">Digital accessibility</a></li>
194 |         <li><a href="#">Cookie preferences</a></li>
195 |       </ul>
196 |       <a href="https://www.redhat.com/en/summit" slot="tertiary">
197 |         <img src="https://access.redhat.com/chrome_themes/nimbus/img/rh-summit-red-a.svg" alt="Red Hat Summit"
198 |           width="73px" loading="lazy">
199 |       </a>
200 |     </rh-footer-universal>
201 |   </body>
202 | </html>
203 | 
204 | 


--------------------------------------------------------------------------------