@filipgutica/design-system 1.0.0 → 1.1.0

package/README.md

@@ -11,11 +11,13 @@ Filip's design language for any framework: the spec, the tokens, the component c
 | Path | What it holds |
 | --- | --- |
 | `language/` | The payload: `DESIGN.md`, `components.md`, `decisions.md`, `visualizations.md`, `tokens.css`, the catalogue (`components.html`), example pages, visualization helpers, and the Graphite Indigo editor theme |
-| `tokens/graphite-indigo.json` | The Graphite Indigo token values |
-| `scripts/build-tokens.mjs` | The token generator |
-| `tests/` | Guard tests for the payload and the tokens |
+| `tokens/graphite-indigo.json` | The Graphite Indigo token values: the only place a value lives |
+| `scripts/build-tokens.mjs` | The token generator: writes `language/tokens.css` and `dist/` |
+| `dist/` | Generated token files for the class flavour, theme overrides, JSON, and JavaScript |
+| `fonts/` | IBM Plex latin `woff2` files, `fonts.css`, and their OFL licences |
+| `tests/` | Guard tests for the payload and the tokens, and the React smoke test |
 
-`language/tokens.css` is a hand copy of the token values. The generator does not write it yet. Its command line still reads ui's `src/theme.css` and writes ui's files, so run it in ui until the JSON takes in the values that only `theme.css` defines. Until then, `tests/token-agreement.test.mjs` holds `tokens.css` to the JSON wherever both define a value.
+To change a value, edit the JSON and run `pnpm tokens:build`. `pnpm tokens:check` fails when a generated file is stale.
 
 ## Install
 
@@ -23,7 +25,17 @@ Filip's design language for any framework: the spec, the tokens, the component c
 npm install @filipgutica/design-system
 ```
 
-Read files from `node_modules/@filipgutica/design-system/language/`. For example, link `language/tokens.css` from a standalone HTML page.
+| Import | What it is |
+| --- | --- |
+| `@filipgutica/design-system/tokens.css` | The tokens with their standalone names. Dark mode follows `prefers-color-scheme`; set `data-theme="light"` or `"dark"` on `<html>` to override it. |
+| `@filipgutica/design-system/class/base.css`, `class/themes/*.css` | The same values with `@filipgutica/ui`'s names, for apps that toggle a `.dark` class on `<html>`. Use one flavour per app. |
+| `@filipgutica/design-system/themes/*.css` | A theme's identity inputs (hue pair and fonts), loaded after `tokens.css`. |
+| `@filipgutica/design-system/fonts.css` | IBM Plex Sans and Mono. |
+| `@filipgutica/design-system` | `tokens` (resolved values per theme and mode) and `cssVar(name)`, with types. |
+| `@filipgutica/design-system/tokens.json` | The resolved values as JSON. |
+| `@filipgutica/design-system/language/*` | The spec, catalogue, and example pages. |
+
+In a React app, import `tokens.css` and `fonts.css` once in the entry and write `var(--text)` in styles, or `cssVar('text')` in TypeScript. `tests/react-smoke/` is a working example.
 
 ## Develop
 
@@ -33,7 +45,7 @@ pnpm install --frozen-lockfile
 pnpm verify
 ```
 
-`pnpm verify` runs the tests, `pnpm pack --dry-run`, and `publint`.
+`pnpm verify` checks the generated files, runs the tests and the React smoke test, then `pnpm pack --dry-run` and `publint`. The smoke test needs Chromium: `pnpm exec playwright install chromium`.
 
 ## Release
 
@@ -47,8 +59,8 @@ Commits follow Conventional Commits, and CI checks them with commitlint. Do not
 
 ## History
 
-`language/` came from `host-config/design-language/` in [filip-stack](https://github.com/filipgutica/filip-stack), with its history. The token JSON and generator came from [ui](https://github.com/filipgutica/ui).
+`language/` came from `host-config/design-language/` in [filip-stack](https://github.com/filipgutica/filip-stack), with its history. The token JSON, generator, and fonts came from [ui](https://github.com/filipgutica/ui).
 
 ## License
 
-MIT. The editor theme in `language/themes/graphite-indigo/` derives from Visual Studio Code's default themes; see its `LICENSE` and `THIRD_PARTY_NOTICES.md`.
+MIT. The IBM Plex fonts in `fonts/` are under the SIL Open Font License; see the `OFL-*.txt` files beside them. The editor theme in `language/themes/graphite-indigo/` derives from Visual Studio Code's default themes; see its `LICENSE` and `THIRD_PARTY_NOTICES.md`.

package/dist/class/base.css

@@ -0,0 +1,188 @@
+/* Generated from tokens/graphite-indigo.json by scripts/build-tokens.mjs in @filipgutica/design-system. Do not edit.
+ * Base tokens for the class flavour: toggle .dark on <html> for dark mode.
+ * Keep exactly one :root.dark block: sites copy it into a <noscript> prefers-color-scheme rule. */
+
+:root {
+  color-scheme: light;
+  --color-project: #4b45d1;
+  --color-project-dark: #a5a1ff;
+  --color-bg: #f4f5f6;
+  --color-surface: #e9ebed;
+  --color-surface-raised: #fbfbfc;
+  --color-surface-muted: #e2e5e8;
+  --color-text: #101315;
+  --color-muted: #50575e;
+  --color-link: #0b5f7c;
+  --color-accent: var(--color-project);
+  --color-accent-text: var(--color-bg);
+  --color-focus: var(--color-accent);
+  --color-border: #6d747b;
+  --color-border-subtle: #d3d8dd;
+  --color-button-bg: var(--color-accent);
+  --color-button-text: var(--color-accent-text);
+  --color-button-hover: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
+  --color-input-bg: var(--color-surface-raised);
+  --color-input-text: var(--color-text);
+  --color-input-border: var(--color-border);
+  --color-input-placeholder: var(--color-muted);
+  --color-row-hover: #e2e5e8;
+  --color-row-selected: var(--color-surface-raised);
+  --color-row-selected-text: var(--color-text);
+  --color-code: var(--color-surface);
+  --color-code-text: var(--color-text);
+  --color-syntax-comment: #626772;
+  --color-syntax-keyword: #715b42;
+  --color-syntax-string: #346347;
+  --color-syntax-number: #86532e;
+  --color-syntax-function: var(--color-syntax-keyword);
+  --color-syntax-type: var(--color-syntax-number);
+  --color-syntax-variable: var(--color-code-text);
+  --color-syntax-operator: var(--color-muted);
+  --color-syntax-punctuation: var(--color-muted);
+  --color-syntax-tag: var(--color-syntax-keyword);
+  --color-syntax-attribute: var(--color-syntax-number);
+  --color-error: #bd342b;
+  --color-warning: #86532e;
+  --color-success: #157249;
+  --color-info: #175cd3;
+  --color-progress: var(--color-accent);
+  --color-error-surface: #efe4e4;
+  --color-warning-surface: #e7e2de;
+  --color-success-surface: #d9e5e1;
+  --color-info-surface: #d9e3f2;
+  --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px var(--color-border-subtle);
+  --color-status-text: var(--color-text);
+  --color-terminal: #0a0c0e;
+  --color-terminal-text: #e6e9eb;
+  --color-terminal-border: #2a3036;
+  --color-terminal-caption: #13171a;
+  --color-terminal-caption-text: #c9d0d6;
+  --color-accent-hover: var(--color-text);
+  --color-command-bg: color-mix(in srgb, var(--color-project) 25%, #101010);
+  --color-command-border: transparent;
+  --color-well: var(--color-surface-muted);
+  --color-field-bg: var(--color-surface-raised);
+  --color-field-edge: var(--color-border-subtle);
+  --shadow-field: none;
+  --color-control-thumb: var(--color-surface-raised);
+  --color-nav-current: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-raised));
+  --color-overlay: rgb(0 0 0 / 42%);
+  --shadow-field-focus: inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 18%, transparent);
+  --shadow-field-focus-invalid: inset 0 0 0 2px color-mix(in srgb, var(--color-error) 18%, transparent);
+  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+  --radius-inline: 6px;
+  --radius-control: 999px;
+  --radius-field: 10px;
+  --radius-panel: 16px;
+  --shadow-nav-current-dark: 0 1px 2px rgb(0 0 0 / 25%);
+  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+  --focus-width: 2px;
+  --focus-offset: 3px;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-md: 0.875rem;
+  --text-lg: 1rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --leading-tight: 1.25;
+  --leading: 1.6;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --text-code: 0.84375rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --control-sm: 2rem;
+  --control-md: 2.25rem;
+  --control-lg: 2.75rem;
+  --measure: 68ch;
+  --page-max: 960px;
+  --sidebar: 224px;
+  --radius-pill: 999px;
+  --shadow-raise: 0 1px 2px rgb(16 24 40 / 12%), 0 0 0 1px rgb(16 24 40 / 6%);
+  --shadow-surface: 0 1px 2px rgb(16 24 40 / 6%), 0 0 0 1px rgb(16 24 40 / 6%);
+  --shadow-sink: inset 1.2px 1.2px 3.6px rgb(130 142 158 / 35%), inset -1.2px -1.2px 3.6px rgb(255 255 255 / 80%);
+  --shadow-nav-current: 0 1px 3px rgb(130 142 158 / 40%);
+  --duration-fast: 120ms;
+  --duration: 180ms;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --color-shadow: rgb(16 24 40 / 10%);
+  --shadow-control: none;
+}
+
+:root.dark {
+  color-scheme: dark;
+  --color-project: var(--color-project-dark);
+  --color-project-dark: #a5a1ff;
+  --color-bg: #0d1012;
+  --color-surface: #13171a;
+  --color-surface-raised: #181d21;
+  --color-surface-muted: #20262b;
+  --color-text: #e6e9eb;
+  --color-muted: #9aa3ab;
+  --color-link: #67c1df;
+  --color-accent: var(--color-project);
+  --color-accent-text: var(--color-bg);
+  --color-border: #78818a;
+  --color-border-subtle: #262d33;
+  --color-button-bg: var(--color-accent);
+  --color-button-text: var(--color-accent-text);
+  --color-button-hover: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
+  --color-input-bg: var(--color-surface-raised);
+  --color-input-text: var(--color-text);
+  --color-input-border: var(--color-border);
+  --color-input-placeholder: var(--color-muted);
+  --color-row-hover: #20262b;
+  --color-row-selected: var(--color-surface-raised);
+  --color-row-selected-text: var(--color-text);
+  --color-code: var(--color-surface);
+  --color-code-text: var(--color-text);
+  --color-syntax-comment: #a0a6b1;
+  --color-syntax-keyword: #d8c2a5;
+  --color-syntax-string: #a8bd9c;
+  --color-syntax-number: #d5b98c;
+  --color-syntax-function: var(--color-syntax-keyword);
+  --color-syntax-type: var(--color-syntax-number);
+  --color-syntax-variable: var(--color-code-text);
+  --color-syntax-operator: var(--color-muted);
+  --color-syntax-punctuation: var(--color-muted);
+  --color-syntax-tag: var(--color-syntax-keyword);
+  --color-syntax-attribute: var(--color-syntax-number);
+  --color-error: #f0776c;
+  --color-warning: #e2a54b;
+  --color-success: #4cc38a;
+  --color-info: #84adff;
+  --color-progress: var(--color-accent);
+  --color-error-surface: #312020;
+  --color-warning-surface: #2f281b;
+  --color-success-surface: #172d25;
+  --color-info-surface: #202938;
+  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border-subtle);
+  --color-status-text: var(--color-text);
+  --color-terminal: #0a0c0e;
+  --color-terminal-text: #e6e9eb;
+  --color-terminal-border: #2a3036;
+  --color-terminal-caption: #13171a;
+  --color-terminal-caption-text: #c9d0d6;
+  --color-accent-hover: var(--color-text);
+  --color-command-bg: color-mix(in srgb, var(--color-project) 16%, black);
+  --color-command-border: color-mix(in srgb, var(--color-project) 28%, black);
+  --color-well: color-mix(in srgb, var(--color-bg) 87.5%, black);
+  --color-field-bg: var(--color-well);
+  --shadow-field: var(--shadow-sink);
+  --color-control-thumb: color-mix(in srgb, var(--color-surface-raised) 88%, white);
+  --color-nav-current: color-mix(in srgb, var(--color-accent) 20%, transparent);
+  --color-overlay: rgb(0 0 0 / 62%);
+  --shadow-raise: inset 0 1px 0 rgb(255 255 255 / 7%), 0 1px 2px rgb(0 0 0 / 45%);
+  --shadow-surface: 0 0 0 1px rgb(255 255 255 / 6%);
+  --shadow-sink: inset 1.2px 1.2px 3.6px rgb(0 0 0 / 55%), inset -1.2px -1.2px 3.6px rgb(255 255 255 / 5%);
+  --shadow-nav-current: var(--shadow-nav-current-dark);
+  --color-shadow: rgb(0 0 0 / 32%);
+}

package/dist/class/themes/graphite-indigo.css

@@ -0,0 +1,133 @@
+/* Generated from tokens/graphite-indigo.json by scripts/build-tokens.mjs in @filipgutica/design-system. Do not edit.
+ * Opt-in Graphite Indigo roles for the class flavour. Import after class/base.css (theme.css in @filipgutica/ui).
+ * Dark mode uses the same .dark class as the base. Keep exactly one :root.dark block:
+ * sites copy it into a <noscript> prefers-color-scheme rule. */
+
+:root {
+  color-scheme: light;
+  --color-project: #4b45d1;
+  --color-project-dark: #a5a1ff;
+  --color-bg: #f4f5f6;
+  --color-surface: #e9ebed;
+  --color-surface-raised: #fbfbfc;
+  --color-surface-muted: #e2e5e8;
+  --color-text: #101315;
+  --color-muted: #50575e;
+  --color-link: #0b5f7c;
+  --color-accent: var(--color-project);
+  --color-accent-text: var(--color-bg);
+  --color-focus: var(--color-accent);
+  --color-border: #6d747b;
+  --color-border-subtle: #d3d8dd;
+  --color-button-bg: var(--color-accent);
+  --color-button-text: var(--color-accent-text);
+  --color-button-hover: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
+  --color-input-bg: var(--color-surface-raised);
+  --color-input-text: var(--color-text);
+  --color-input-border: var(--color-border);
+  --color-input-placeholder: var(--color-muted);
+  --color-row-hover: #e2e5e8;
+  --color-row-selected: var(--color-surface-raised);
+  --color-row-selected-text: var(--color-text);
+  --color-code: var(--color-surface);
+  --color-code-text: var(--color-text);
+  --color-syntax-comment: #626772;
+  --color-syntax-keyword: #715b42;
+  --color-syntax-string: #346347;
+  --color-syntax-number: #86532e;
+  --color-syntax-function: var(--color-syntax-keyword);
+  --color-syntax-type: var(--color-syntax-number);
+  --color-syntax-variable: var(--color-code-text);
+  --color-syntax-operator: var(--color-muted);
+  --color-syntax-punctuation: var(--color-muted);
+  --color-syntax-tag: var(--color-syntax-keyword);
+  --color-syntax-attribute: var(--color-syntax-number);
+  --color-error: #bd342b;
+  --color-warning: #86532e;
+  --color-success: #157249;
+  --color-info: #175cd3;
+  --color-progress: var(--color-accent);
+  --color-error-surface: #efe4e4;
+  --color-warning-surface: #e7e2de;
+  --color-success-surface: #d9e5e1;
+  --color-info-surface: #d9e3f2;
+  --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px var(--color-border-subtle);
+  --color-status-text: var(--color-text);
+  --color-terminal: #0a0c0e;
+  --color-terminal-text: #e6e9eb;
+  --color-terminal-border: #2a3036;
+  --color-terminal-caption: #13171a;
+  --color-terminal-caption-text: #c9d0d6;
+  --color-accent-hover: var(--color-text);
+  --color-command-bg: color-mix(in srgb, var(--color-project) 25%, #101010);
+  --color-command-border: transparent;
+  --text-3xl: 2.75rem;
+  --text-reading: 1rem;
+  --text-display: 3.5rem;
+  --text-display-sm: 2.125rem;
+  --tracking-tight: -0.03em;
+  --space-20: 5rem;
+  --space-24: 6rem;
+  --row: 2.25rem;
+  --page-wide: 1120px;
+}
+
+:root.dark {
+  color-scheme: dark;
+  --color-project: var(--color-project-dark);
+  --color-project-dark: #a5a1ff;
+  --color-bg: #0d1012;
+  --color-surface: #13171a;
+  --color-surface-raised: #181d21;
+  --color-surface-muted: #20262b;
+  --color-text: #e6e9eb;
+  --color-muted: #9aa3ab;
+  --color-link: #67c1df;
+  --color-accent: var(--color-project);
+  --color-accent-text: var(--color-bg);
+  --color-focus: var(--color-accent);
+  --color-border: #78818a;
+  --color-border-subtle: #262d33;
+  --color-button-bg: var(--color-accent);
+  --color-button-text: var(--color-accent-text);
+  --color-button-hover: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
+  --color-input-bg: var(--color-surface-raised);
+  --color-input-text: var(--color-text);
+  --color-input-border: var(--color-border);
+  --color-input-placeholder: var(--color-muted);
+  --color-row-hover: #20262b;
+  --color-row-selected: var(--color-surface-raised);
+  --color-row-selected-text: var(--color-text);
+  --color-code: var(--color-surface);
+  --color-code-text: var(--color-text);
+  --color-syntax-comment: #a0a6b1;
+  --color-syntax-keyword: #d8c2a5;
+  --color-syntax-string: #a8bd9c;
+  --color-syntax-number: #d5b98c;
+  --color-syntax-function: var(--color-syntax-keyword);
+  --color-syntax-type: var(--color-syntax-number);
+  --color-syntax-variable: var(--color-code-text);
+  --color-syntax-operator: var(--color-muted);
+  --color-syntax-punctuation: var(--color-muted);
+  --color-syntax-tag: var(--color-syntax-keyword);
+  --color-syntax-attribute: var(--color-syntax-number);
+  --color-error: #f0776c;
+  --color-warning: #e2a54b;
+  --color-success: #4cc38a;
+  --color-info: #84adff;
+  --color-progress: var(--color-accent);
+  --color-error-surface: #312020;
+  --color-warning-surface: #2f281b;
+  --color-success-surface: #172d25;
+  --color-info-surface: #202938;
+  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border-subtle);
+  --color-status-text: var(--color-text);
+  --color-terminal: #0a0c0e;
+  --color-terminal-text: #e6e9eb;
+  --color-terminal-border: #2a3036;
+  --color-terminal-caption: #13171a;
+  --color-terminal-caption-text: #c9d0d6;
+  --color-accent-hover: var(--color-text);
+  --color-command-bg: color-mix(in srgb, var(--color-project) 16%, black);
+  --color-command-border: color-mix(in srgb, var(--color-project) 28%, black);
+}

package/dist/themes/graphite-indigo.css

@@ -0,0 +1,9 @@
+/* Generated from tokens/graphite-indigo.json by scripts/build-tokens.mjs in @filipgutica/design-system. Do not edit.
+ * The graphite-indigo identity inputs for tokens.css. Load after tokens.css. */
+
+:root {
+  --project: #4b45d1;
+  --project-dark: #a5a1ff;
+  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+}

package/dist/tokens.d.ts

@@ -0,0 +1,117 @@
+// Generated from tokens/graphite-indigo.json by scripts/build-tokens.mjs. Do not edit.
+/** A token name: its CSS variable in tokens.css without the leading dashes. */
+export type TokenName =
+  | 'project'
+  | 'project-dark'
+  | 'font-sans'
+  | 'font-mono'
+  | 'bg'
+  | 'surface'
+  | 'surface-raised'
+  | 'surface-hover'
+  | 'field'
+  | 'field-bg'
+  | 'field-edge'
+  | 'field-shadow'
+  | 'control-thumb'
+  | 'nav-current'
+  | 'nav-current-text'
+  | 'segmented-current-text'
+  | 'row-hover'
+  | 'row-selected'
+  | 'border-subtle'
+  | 'border'
+  | 'text'
+  | 'text-muted'
+  | 'overlay'
+  | 'accent'
+  | 'accent-text'
+  | 'accent-hover'
+  | 'button-hover'
+  | 'link'
+  | 'focus'
+  | 'focus-width'
+  | 'focus-offset'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'success-soft'
+  | 'warning-soft'
+  | 'danger-soft'
+  | 'info-soft'
+  | 'command-bg'
+  | 'command-border'
+  | 'terminal'
+  | 'terminal-text'
+  | 'terminal-border'
+  | 'terminal-caption'
+  | 'terminal-caption-text'
+  | 'terminal-shadow-nav-current'
+  | 'code-bg'
+  | 'code-text'
+  | 'code-key'
+  | 'code-string'
+  | 'code-number'
+  | 'code-comment'
+  | 'text-xs'
+  | 'text-sm'
+  | 'text-md'
+  | 'text-lg'
+  | 'text-xl'
+  | 'text-2xl'
+  | 'text-3xl'
+  | 'text-reading'
+  | 'text-display'
+  | 'text-display-sm'
+  | 'leading-tight'
+  | 'leading'
+  | 'weight-regular'
+  | 'weight-medium'
+  | 'weight-semibold'
+  | 'tracking-tight'
+  | 'text-code'
+  | 'space-1'
+  | 'space-2'
+  | 'space-3'
+  | 'space-4'
+  | 'space-5'
+  | 'space-6'
+  | 'space-8'
+  | 'space-12'
+  | 'space-16'
+  | 'space-20'
+  | 'space-24'
+  | 'control-sm'
+  | 'control-md'
+  | 'control-lg'
+  | 'row'
+  | 'measure'
+  | 'page-max'
+  | 'page-wide'
+  | 'sidebar'
+  | 'radius-sm'
+  | 'radius-md'
+  | 'radius-lg'
+  | 'radius-field'
+  | 'radius-pill'
+  | 'shadow-raise'
+  | 'shadow-surface'
+  | 'shadow-sink'
+  | 'shadow-popover'
+  | 'shadow-nav-current'
+  | 'field-shadow-focus'
+  | 'field-shadow-focus-invalid'
+  | 'duration-fast'
+  | 'duration'
+  | 'ease-out'
+
+export type ThemeName = 'graphite-indigo'
+
+/** Resolved values, as getComputedStyle reports them on the root element. */
+export declare const tokens: {
+  themes: Record<ThemeName, { light: Record<TokenName, string>, dark: Record<TokenName, string> }>
+}
+
+/** The var() reference for a token, such as cssVar('text') for 'var(--text)'. */
+export declare const cssVar: <Name extends TokenName>(name: Name) => `var(--${Name})`