bytelyst/learning_ai_common_plat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(design-tokens): add --bl-* alias layer to all 10 product CSS files + generator

Browse Source 
Root cause: @bytelyst/ui components reference --bl-* tokens (e.g. --bl-accent,
--bl-bg-canvas) but only tokens.css (MindLyst) and chronomind.css had these
aliases. All other 10 product CSS files fell back to hardcoded defaults,
making shared components unstyled.

Changes:
- actiontrail.css: --bl-* → --at-*
- flowmonk.css: --bl-* → --fm-*
- jarvisjr.css: --bl-* → --jj-*
- localllmlab.css: --bl-* → --llm-*
- localmemgpt.css: --bl-* → --lmg-*
- lysnrai.css: --bl-* → --lys-*
- mindlyst.css: --bl-* → --ml-*
- nomgap.css: --bl-* → --ng-*
- notelett.css: --bl-* → --nl-*
- peakpulse.css: --bl-* → --pp-*
- generate.ts: generateProductCSS() now emits --bl-* aliases automatically

31 aliases per file covering: surfaces, borders, text, accent, info/success/
warning/danger, focus ring, overlay scrim.
This commit is contained in:
saravanakumardb1 2026-05-14 20:33:40 -07:00
parent 9350829345
commit dc8161b382
11 changed files with 354 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/design-tokens/generated/actiontrail.css
View File

@ -78,6 +78,36 @@
--at-motion-base: 220ms;
--at-motion-slow: 320ms;
--at-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── @bytelyst/ui alias layer (--bl-* → --at-*) ──────────────── */
--bl-bg-canvas: var(--at-bg-canvas);
--bl-bg-elevated: var(--at-bg-elevated);
--bl-surface-card: var(--at-surface-card);
--bl-surface-muted: var(--at-surface-muted);
--bl-surface-highlight: color-mix(in oklab, var(--at-surface-muted) 82%, white);
--bl-surface-overlay: color-mix(in oklab, var(--at-bg-canvas) 88%, transparent);
--bl-input: color-mix(in oklab, var(--at-surface-muted) 76%, var(--at-bg-canvas));
--bl-border: var(--at-border-default);
--bl-border-strong: var(--at-border-strong);
--bl-border-subtle: color-mix(in oklab, var(--at-border-default) 62%, transparent);
--bl-text-primary: var(--at-text-primary);
--bl-text-secondary: var(--at-text-secondary);
--bl-text-tertiary: var(--at-text-tertiary);
--bl-text-quiet: color-mix(in oklab, var(--at-text-secondary) 78%, var(--at-bg-canvas));
--bl-accent: var(--at-accent-primary);
--bl-accent-foreground: var(--at-bg-canvas);
--bl-accent-muted: color-mix(in oklab, var(--at-accent-primary) 16%, transparent);
--bl-info: var(--at-accent-primary);
--bl-info-muted: color-mix(in oklab, var(--at-accent-primary) 14%, transparent);
--bl-success: var(--at-success);
--bl-success-muted: color-mix(in oklab, var(--at-success) 14%, transparent);
--bl-warning: var(--at-warning);
--bl-warning-muted: color-mix(in oklab, var(--at-warning) 14%, transparent);
--bl-danger: var(--at-danger);
--bl-danger-muted: color-mix(in oklab, var(--at-danger) 14%, transparent);
--bl-danger-foreground: var(--at-bg-canvas);
--bl-focus-ring: var(--at-focus-ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--at-accent-primary) 18%, transparent);
--bl-overlay-scrim: var(--at-overlay-scrim);
}
[data-theme="light"] {

30
packages/design-tokens/generated/flowmonk.css
View File

@ -80,6 +80,36 @@
--fm-motion-base: 220ms;
--fm-motion-slow: 320ms;
--fm-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── @bytelyst/ui alias layer (--bl-* → --fm-*) ──────────────── */
--bl-bg-canvas: var(--fm-bg-canvas);
--bl-bg-elevated: var(--fm-bg-elevated);
--bl-surface-card: var(--fm-surface-card);
--bl-surface-muted: var(--fm-surface-muted);
--bl-surface-highlight: color-mix(in oklab, var(--fm-surface-muted) 82%, white);
--bl-surface-overlay: color-mix(in oklab, var(--fm-bg-canvas) 88%, transparent);
--bl-input: color-mix(in oklab, var(--fm-surface-muted) 76%, var(--fm-bg-canvas));
--bl-border: var(--fm-border-default);
--bl-border-strong: var(--fm-border-strong);
--bl-border-subtle: color-mix(in oklab, var(--fm-border-default) 62%, transparent);
--bl-text-primary: var(--fm-text-primary);
--bl-text-secondary: var(--fm-text-secondary);
--bl-text-tertiary: var(--fm-text-tertiary);
--bl-text-quiet: color-mix(in oklab, var(--fm-text-secondary) 78%, var(--fm-bg-canvas));
--bl-accent: var(--fm-accent-primary);
--bl-accent-foreground: var(--fm-bg-canvas);
--bl-accent-muted: color-mix(in oklab, var(--fm-accent-primary) 16%, transparent);
--bl-info: var(--fm-accent-primary);
--bl-info-muted: color-mix(in oklab, var(--fm-accent-primary) 14%, transparent);
--bl-success: var(--fm-success);
--bl-success-muted: color-mix(in oklab, var(--fm-success) 14%, transparent);
--bl-warning: var(--fm-warning);
--bl-warning-muted: color-mix(in oklab, var(--fm-warning) 14%, transparent);
--bl-danger: var(--fm-danger);
--bl-danger-muted: color-mix(in oklab, var(--fm-danger) 14%, transparent);
--bl-danger-foreground: var(--fm-bg-canvas);
--bl-focus-ring: var(--fm-focus-ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--fm-accent-primary) 18%, transparent);
--bl-overlay-scrim: var(--fm-overlay-scrim);
}
[data-theme="light"] {

30
packages/design-tokens/generated/jarvisjr.css
View File

@ -69,6 +69,36 @@
--jj-motion-base: 220ms;
--jj-motion-slow: 320ms;
--jj-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── @bytelyst/ui alias layer (--bl-* → --jj-*) ──────────────── */
--bl-bg-canvas: var(--jj-bg-canvas);
--bl-bg-elevated: var(--jj-bg-elevated);
--bl-surface-card: var(--jj-surface-card);
--bl-surface-muted: var(--jj-surface-muted);
--bl-surface-highlight: color-mix(in oklab, var(--jj-surface-muted) 82%, white);
--bl-surface-overlay: color-mix(in oklab, var(--jj-bg-canvas) 88%, transparent);
--bl-input: color-mix(in oklab, var(--jj-surface-muted) 76%, var(--jj-bg-canvas));
--bl-border: var(--jj-border-default);
--bl-border-strong: var(--jj-border-strong);
--bl-border-subtle: color-mix(in oklab, var(--jj-border-default) 62%, transparent);
--bl-text-primary: var(--jj-text-primary);
--bl-text-secondary: var(--jj-text-secondary);
--bl-text-tertiary: var(--jj-text-tertiary);
--bl-text-quiet: color-mix(in oklab, var(--jj-text-secondary) 78%, var(--jj-bg-canvas));
--bl-accent: var(--jj-accent-primary);
--bl-accent-foreground: var(--jj-bg-canvas);
--bl-accent-muted: color-mix(in oklab, var(--jj-accent-primary) 16%, transparent);
--bl-info: var(--jj-accent-primary);
--bl-info-muted: color-mix(in oklab, var(--jj-accent-primary) 14%, transparent);
--bl-success: var(--jj-success);
--bl-success-muted: color-mix(in oklab, var(--jj-success) 14%, transparent);
--bl-warning: var(--jj-warning);
--bl-warning-muted: color-mix(in oklab, var(--jj-warning) 14%, transparent);
--bl-danger: var(--jj-danger);
--bl-danger-muted: color-mix(in oklab, var(--jj-danger) 14%, transparent);
--bl-danger-foreground: var(--jj-bg-canvas);
--bl-focus-ring: var(--jj-focus-ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--jj-accent-primary) 18%, transparent);
--bl-overlay-scrim: var(--jj-overlay-scrim);
}
[data-theme="light"] {

30
packages/design-tokens/generated/localllmlab.css
View File

@ -75,6 +75,36 @@
--llm-motion-base: 220ms;
--llm-motion-slow: 320ms;
--llm-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── @bytelyst/ui alias layer (--bl-* → --llm-*) ──────────────── */
--bl-bg-canvas: var(--llm-bg-canvas);
--bl-bg-elevated: var(--llm-bg-elevated);
--bl-surface-card: var(--llm-surface-card);
--bl-surface-muted: var(--llm-surface-muted);
--bl-surface-highlight: color-mix(in oklab, var(--llm-surface-muted) 82%, white);
--bl-surface-overlay: color-mix(in oklab, var(--llm-bg-canvas) 88%, transparent);
--bl-input: color-mix(in oklab, var(--llm-surface-muted) 76%, var(--llm-bg-canvas));
--bl-border: var(--llm-border-default);
--bl-border-strong: var(--llm-border-strong);
--bl-border-subtle: color-mix(in oklab, var(--llm-border-default) 62%, transparent);
--bl-text-primary: var(--llm-text-primary);
--bl-text-secondary: var(--llm-text-secondary);
--bl-text-tertiary: var(--llm-text-tertiary);
--bl-text-quiet: color-mix(in oklab, var(--llm-text-secondary) 78%, var(--llm-bg-canvas));
--bl-accent: var(--llm-accent-primary);
--bl-accent-foreground: var(--llm-bg-canvas);
--bl-accent-muted: color-mix(in oklab, var(--llm-accent-primary) 16%, transparent);
--bl-info: var(--llm-accent-primary);
--bl-info-muted: color-mix(in oklab, var(--llm-accent-primary) 14%, transparent);
--bl-success: var(--llm-success);
--bl-success-muted: color-mix(in oklab, var(--llm-success) 14%, transparent);
--bl-warning: var(--llm-warning);
--bl-warning-muted: color-mix(in oklab, var(--llm-warning) 14%, transparent);
--bl-danger: var(--llm-danger);
--bl-danger-muted: color-mix(in oklab, var(--llm-danger) 14%, transparent);
--bl-danger-foreground: var(--llm-bg-canvas);
--bl-focus-ring: var(--llm-focus-ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--llm-accent-primary) 18%, transparent);
--bl-overlay-scrim: var(--llm-overlay-scrim);
}
[data-theme="light"] {

30
packages/design-tokens/generated/localmemgpt.css
View File

@ -74,6 +74,36 @@
--lmg-motion-base: 220ms;
--lmg-motion-slow: 320ms;
--lmg-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── @bytelyst/ui alias layer (--bl-* → --lmg-*) ──────────────── */
--bl-bg-canvas: var(--lmg-bg-canvas);
--bl-bg-elevated: var(--lmg-bg-elevated);
--bl-surface-card: var(--lmg-surface-card);
--bl-surface-muted: var(--lmg-surface-muted);
--bl-surface-highlight: color-mix(in oklab, var(--lmg-surface-muted) 82%, white);
--bl-surface-overlay: color-mix(in oklab, var(--lmg-bg-canvas) 88%, transparent);
--bl-input: color-mix(in oklab, var(--lmg-surface-muted) 76%, var(--lmg-bg-canvas));
--bl-border: var(--lmg-border-default);
--bl-border-strong: var(--lmg-border-strong);
--bl-border-subtle: color-mix(in oklab, var(--lmg-border-default) 62%, transparent);
--bl-text-primary: var(--lmg-text-primary);
--bl-text-secondary: var(--lmg-text-secondary);
--bl-text-tertiary: var(--lmg-text-tertiary);
--bl-text-quiet: color-mix(in oklab, var(--lmg-text-secondary) 78%, var(--lmg-bg-canvas));
--bl-accent: var(--lmg-accent-primary);
--bl-accent-foreground: var(--lmg-bg-canvas);
--bl-accent-muted: color-mix(in oklab, var(--lmg-accent-primary) 16%, transparent);
--bl-info: var(--lmg-accent-primary);
--bl-info-muted: color-mix(in oklab, var(--lmg-accent-primary) 14%, transparent);
--bl-success: var(--lmg-success);
--bl-success-muted: color-mix(in oklab, var(--lmg-success) 14%, transparent);
--bl-warning: var(--lmg-warning);
--bl-warning-muted: color-mix(in oklab, var(--lmg-warning) 14%, transparent);
--bl-danger: var(--lmg-danger);
--bl-danger-muted: color-mix(in oklab, var(--lmg-danger) 14%, transparent);
--bl-danger-foreground: var(--lmg-bg-canvas);
--bl-focus-ring: var(--lmg-focus-ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--lmg-accent-primary) 18%, transparent);
--bl-overlay-scrim: var(--lmg-overlay-scrim);
}
[data-theme="light"] {

30
packages/design-tokens/generated/lysnrai.css
View File

@ -67,6 +67,36 @@
--lys-motion-base: 220ms;
--lys-motion-slow: 320ms;
--lys-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── @bytelyst/ui alias layer (--bl-* → --lys-*) ──────────────── */
--bl-bg-canvas: var(--lys-bg-canvas);
--bl-bg-elevated: var(--lys-bg-elevated);
--bl-surface-card: var(--lys-surface-card);
--bl-surface-muted: var(--lys-surface-muted);
--bl-surface-highlight: color-mix(in oklab, var(--lys-surface-muted) 82%, white);
--bl-surface-overlay: color-mix(in oklab, var(--lys-bg-canvas) 88%, transparent);
--bl-input: color-mix(in oklab, var(--lys-surface-muted) 76%, var(--lys-bg-canvas));
--bl-border: var(--lys-border-default);
--bl-border-strong: var(--lys-border-strong);
--bl-border-subtle: color-mix(in oklab, var(--lys-border-default) 62%, transparent);
--bl-text-primary: var(--lys-text-primary);
--bl-text-secondary: var(--lys-text-secondary);
--bl-text-tertiary: var(--lys-text-tertiary);
--bl-text-quiet: color-mix(in oklab, var(--lys-text-secondary) 78%, var(--lys-bg-canvas));
--bl-accent: var(--lys-accent-primary);
--bl-accent-foreground: var(--lys-bg-canvas);
--bl-accent-muted: color-mix(in oklab, var(--lys-accent-primary) 16%, transparent);
--bl-info: var(--lys-accent-primary);
--bl-info-muted: color-mix(in oklab, var(--lys-accent-primary) 14%, transparent);
--bl-success: var(--lys-success);
--bl-success-muted: color-mix(in oklab, var(--lys-success) 14%, transparent);
--bl-warning: var(--lys-warning);
--bl-warning-muted: color-mix(in oklab, var(--lys-warning) 14%, transparent);
--bl-danger: var(--lys-danger);
--bl-danger-muted: color-mix(in oklab, var(--lys-danger) 14%, transparent);
--bl-danger-foreground: var(--lys-bg-canvas);
--bl-focus-ring: var(--lys-focus-ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--lys-accent-primary) 18%, transparent);
--bl-overlay-scrim: var(--lys-overlay-scrim);
}
[data-theme="light"] {

30
packages/design-tokens/generated/mindlyst.css
View File

@ -70,6 +70,36 @@
--ml-motion-base: 220ms;
--ml-motion-slow: 320ms;
--ml-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── @bytelyst/ui alias layer (--bl-* → --ml-*) ──────────────── */
--bl-bg-canvas: var(--ml-bg-canvas);
--bl-bg-elevated: var(--ml-bg-elevated);
--bl-surface-card: var(--ml-surface-card);
--bl-surface-muted: var(--ml-surface-muted);
--bl-surface-highlight: color-mix(in oklab, var(--ml-surface-muted) 82%, white);
--bl-surface-overlay: color-mix(in oklab, var(--ml-bg-canvas) 88%, transparent);
--bl-input: color-mix(in oklab, var(--ml-surface-muted) 76%, var(--ml-bg-canvas));
--bl-border: var(--ml-border-default);
--bl-border-strong: var(--ml-border-strong);
--bl-border-subtle: color-mix(in oklab, var(--ml-border-default) 62%, transparent);
--bl-text-primary: var(--ml-text-primary);
--bl-text-secondary: var(--ml-text-secondary);
--bl-text-tertiary: var(--ml-text-tertiary);
--bl-text-quiet: color-mix(in oklab, var(--ml-text-secondary) 78%, var(--ml-bg-canvas));
--bl-accent: var(--ml-accent-primary);
--bl-accent-foreground: var(--ml-bg-canvas);
--bl-accent-muted: color-mix(in oklab, var(--ml-accent-primary) 16%, transparent);
--bl-info: var(--ml-accent-primary);
--bl-info-muted: color-mix(in oklab, var(--ml-accent-primary) 14%, transparent);
--bl-success: var(--ml-success);
--bl-success-muted: color-mix(in oklab, var(--ml-success) 14%, transparent);
--bl-warning: var(--ml-warning);
--bl-warning-muted: color-mix(in oklab, var(--ml-warning) 14%, transparent);
--bl-danger: var(--ml-danger);
--bl-danger-muted: color-mix(in oklab, var(--ml-danger) 14%, transparent);
--bl-danger-foreground: var(--ml-bg-canvas);
--bl-focus-ring: var(--ml-focus-ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--ml-accent-primary) 18%, transparent);
--bl-overlay-scrim: var(--ml-overlay-scrim);
}
[data-theme="light"] {

30
packages/design-tokens/generated/nomgap.css
View File

@ -70,6 +70,36 @@
--ng-motion-base: 220ms;
--ng-motion-slow: 320ms;
--ng-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── @bytelyst/ui alias layer (--bl-* → --ng-*) ──────────────── */
--bl-bg-canvas: var(--ng-bg-canvas);
--bl-bg-elevated: var(--ng-bg-elevated);
--bl-surface-card: var(--ng-surface-card);
--bl-surface-muted: var(--ng-surface-muted);
--bl-surface-highlight: color-mix(in oklab, var(--ng-surface-muted) 82%, white);
--bl-surface-overlay: color-mix(in oklab, var(--ng-bg-canvas) 88%, transparent);
--bl-input: color-mix(in oklab, var(--ng-surface-muted) 76%, var(--ng-bg-canvas));
--bl-border: var(--ng-border-default);
--bl-border-strong: var(--ng-border-strong);
--bl-border-subtle: color-mix(in oklab, var(--ng-border-default) 62%, transparent);
--bl-text-primary: var(--ng-text-primary);
--bl-text-secondary: var(--ng-text-secondary);
--bl-text-tertiary: var(--ng-text-tertiary);
--bl-text-quiet: color-mix(in oklab, var(--ng-text-secondary) 78%, var(--ng-bg-canvas));
--bl-accent: var(--ng-accent-primary);
--bl-accent-foreground: var(--ng-bg-canvas);
--bl-accent-muted: color-mix(in oklab, var(--ng-accent-primary) 16%, transparent);
--bl-info: var(--ng-accent-primary);
--bl-info-muted: color-mix(in oklab, var(--ng-accent-primary) 14%, transparent);
--bl-success: var(--ng-success);
--bl-success-muted: color-mix(in oklab, var(--ng-success) 14%, transparent);
--bl-warning: var(--ng-warning);
--bl-warning-muted: color-mix(in oklab, var(--ng-warning) 14%, transparent);
--bl-danger: var(--ng-danger);
--bl-danger-muted: color-mix(in oklab, var(--ng-danger) 14%, transparent);
--bl-danger-foreground: var(--ng-bg-canvas);
--bl-focus-ring: var(--ng-focus-ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--ng-accent-primary) 18%, transparent);
--bl-overlay-scrim: var(--ng-overlay-scrim);
}
[data-theme="light"] {

30
packages/design-tokens/generated/notelett.css
View File

@ -75,6 +75,36 @@
--nl-motion-base: 220ms;
--nl-motion-slow: 320ms;
--nl-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── @bytelyst/ui alias layer (--bl-* → --nl-*) ──────────────── */
--bl-bg-canvas: var(--nl-bg-canvas);
--bl-bg-elevated: var(--nl-bg-elevated);
--bl-surface-card: var(--nl-surface-card);
--bl-surface-muted: var(--nl-surface-muted);
--bl-surface-highlight: color-mix(in oklab, var(--nl-surface-muted) 82%, white);
--bl-surface-overlay: color-mix(in oklab, var(--nl-bg-canvas) 88%, transparent);
--bl-input: color-mix(in oklab, var(--nl-surface-muted) 76%, var(--nl-bg-canvas));
--bl-border: var(--nl-border-default);
--bl-border-strong: var(--nl-border-strong);
--bl-border-subtle: color-mix(in oklab, var(--nl-border-default) 62%, transparent);
--bl-text-primary: var(--nl-text-primary);
--bl-text-secondary: var(--nl-text-secondary);
--bl-text-tertiary: var(--nl-text-tertiary);
--bl-text-quiet: color-mix(in oklab, var(--nl-text-secondary) 78%, var(--nl-bg-canvas));
--bl-accent: var(--nl-accent-primary);
--bl-accent-foreground: var(--nl-bg-canvas);
--bl-accent-muted: color-mix(in oklab, var(--nl-accent-primary) 16%, transparent);
--bl-info: var(--nl-accent-primary);
--bl-info-muted: color-mix(in oklab, var(--nl-accent-primary) 14%, transparent);
--bl-success: var(--nl-success);
--bl-success-muted: color-mix(in oklab, var(--nl-success) 14%, transparent);
--bl-warning: var(--nl-warning);
--bl-warning-muted: color-mix(in oklab, var(--nl-warning) 14%, transparent);
--bl-danger: var(--nl-danger);
--bl-danger-muted: color-mix(in oklab, var(--nl-danger) 14%, transparent);
--bl-danger-foreground: var(--nl-bg-canvas);
--bl-focus-ring: var(--nl-focus-ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--nl-accent-primary) 18%, transparent);
--bl-overlay-scrim: var(--nl-overlay-scrim);
}
[data-theme="light"] {

30
packages/design-tokens/generated/peakpulse.css
View File

@ -70,6 +70,36 @@
--pp-motion-base: 220ms;
--pp-motion-slow: 320ms;
--pp-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── @bytelyst/ui alias layer (--bl-* → --pp-*) ──────────────── */
--bl-bg-canvas: var(--pp-bg-canvas);
--bl-bg-elevated: var(--pp-bg-elevated);
--bl-surface-card: var(--pp-surface-card);
--bl-surface-muted: var(--pp-surface-muted);
--bl-surface-highlight: color-mix(in oklab, var(--pp-surface-muted) 82%, white);
--bl-surface-overlay: color-mix(in oklab, var(--pp-bg-canvas) 88%, transparent);
--bl-input: color-mix(in oklab, var(--pp-surface-muted) 76%, var(--pp-bg-canvas));
--bl-border: var(--pp-border-default);
--bl-border-strong: var(--pp-border-strong);
--bl-border-subtle: color-mix(in oklab, var(--pp-border-default) 62%, transparent);
--bl-text-primary: var(--pp-text-primary);
--bl-text-secondary: var(--pp-text-secondary);
--bl-text-tertiary: var(--pp-text-tertiary);
--bl-text-quiet: color-mix(in oklab, var(--pp-text-secondary) 78%, var(--pp-bg-canvas));
--bl-accent: var(--pp-accent-primary);
--bl-accent-foreground: var(--pp-bg-canvas);
--bl-accent-muted: color-mix(in oklab, var(--pp-accent-primary) 16%, transparent);
--bl-info: var(--pp-accent-primary);
--bl-info-muted: color-mix(in oklab, var(--pp-accent-primary) 14%, transparent);
--bl-success: var(--pp-success);
--bl-success-muted: color-mix(in oklab, var(--pp-success) 14%, transparent);
--bl-warning: var(--pp-warning);
--bl-warning-muted: color-mix(in oklab, var(--pp-warning) 14%, transparent);
--bl-danger: var(--pp-danger);
--bl-danger-muted: color-mix(in oklab, var(--pp-danger) 14%, transparent);
--bl-danger-foreground: var(--pp-bg-canvas);
--bl-focus-ring: var(--pp-focus-ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--pp-accent-primary) 18%, transparent);
--bl-overlay-scrim: var(--pp-overlay-scrim);
}
[data-theme="light"] {

54
packages/design-tokens/scripts/generate.ts
View File

@ -476,6 +476,60 @@ function generateProductCSS(productId: string, prefix: string, colorsKey: string
lines.push(` --${prefix}-motion-${key}: ${value}ms;`);
}
lines.push(` --${prefix}-easing-standard: ${tokens.motion.easing.standard};`);
lines.push('');
// @bytelyst/ui alias layer — maps --bl-* → product --{prefix}-* so shared
// components resolve the correct product-scoped tokens.
lines.push(` /* ── @bytelyst/ui alias layer (--bl-* → --${prefix}-*) ──────────────── */`);
lines.push(` --bl-bg-canvas: var(--${prefix}-bg-canvas);`);
lines.push(` --bl-bg-elevated: var(--${prefix}-bg-elevated);`);
lines.push(` --bl-surface-card: var(--${prefix}-surface-card);`);
lines.push(` --bl-surface-muted: var(--${prefix}-surface-muted);`);
lines.push(
` --bl-surface-highlight: color-mix(in oklab, var(--${prefix}-surface-muted) 82%, white);`
);
lines.push(
` --bl-surface-overlay: color-mix(in oklab, var(--${prefix}-bg-canvas) 88%, transparent);`
);
lines.push(
` --bl-input: color-mix(in oklab, var(--${prefix}-surface-muted) 76%, var(--${prefix}-bg-canvas));`
);
lines.push(` --bl-border: var(--${prefix}-border-default);`);
lines.push(` --bl-border-strong: var(--${prefix}-border-strong);`);
lines.push(
` --bl-border-subtle: color-mix(in oklab, var(--${prefix}-border-default) 62%, transparent);`
);
lines.push(` --bl-text-primary: var(--${prefix}-text-primary);`);
lines.push(` --bl-text-secondary: var(--${prefix}-text-secondary);`);
lines.push(` --bl-text-tertiary: var(--${prefix}-text-tertiary);`);
lines.push(
` --bl-text-quiet: color-mix(in oklab, var(--${prefix}-text-secondary) 78%, var(--${prefix}-bg-canvas));`
);
lines.push(` --bl-accent: var(--${prefix}-accent-primary);`);
lines.push(` --bl-accent-foreground: var(--${prefix}-bg-canvas);`);
lines.push(
` --bl-accent-muted: color-mix(in oklab, var(--${prefix}-accent-primary) 16%, transparent);`
);
lines.push(` --bl-info: var(--${prefix}-accent-primary);`);
lines.push(
` --bl-info-muted: color-mix(in oklab, var(--${prefix}-accent-primary) 14%, transparent);`
);
lines.push(` --bl-success: var(--${prefix}-success);`);
lines.push(
` --bl-success-muted: color-mix(in oklab, var(--${prefix}-success) 14%, transparent);`
);
lines.push(` --bl-warning: var(--${prefix}-warning);`);
lines.push(
` --bl-warning-muted: color-mix(in oklab, var(--${prefix}-warning) 14%, transparent);`
);
lines.push(` --bl-danger: var(--${prefix}-danger);`);
lines.push(` --bl-danger-muted: color-mix(in oklab, var(--${prefix}-danger) 14%, transparent);`);
lines.push(` --bl-danger-foreground: var(--${prefix}-bg-canvas);`);
lines.push(` --bl-focus-ring: var(--${prefix}-focus-ring);`);
lines.push(
` --bl-focus-ring-muted: color-mix(in oklab, var(--${prefix}-accent-primary) 18%, transparent);`
);
lines.push(` --bl-overlay-scrim: var(--${prefix}-overlay-scrim);`);
lines.push('}', '');