From ccee7dfae271db87ef16743d8121789c5116cde6 Mon Sep 17 00:00:00 2001 From: saravanakumardb1 Date: Thu, 28 May 2026 20:50:15 -0700 Subject: [PATCH] feat(tracker-web): extend --bl-* token bridge for adopted components (UX-1.2 ext, CC.2) Map the full @bytelyst/* --bl-* token surface (surfaces, text, danger, success/ warning/info, focus ring, radii, spacing, typography, overlay) onto tracker OKLCH vars so auth-ui/notifications-ui/ui components inherit the theme in light and dark. Adds semantic --success/--warning/--info token defs; all bridge values reference tracker vars or color-mix of them (no standalone color literals). Generated with [Devin](https://cli.devin.ai/docs) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- dashboards/tracker-web/src/app/globals.css | 92 ++++++++++++++++++++-- 1 file changed, 86 insertions(+), 6 deletions(-) diff --git a/dashboards/tracker-web/src/app/globals.css b/dashboards/tracker-web/src/app/globals.css index b207e926..abd68f3c 100644 --- a/dashboards/tracker-web/src/app/globals.css +++ b/dashboards/tracker-web/src/app/globals.css @@ -1,13 +1,14 @@ -@import "tailwindcss"; -@import "tw-animate-css"; +@import 'tailwindcss'; +@import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; + --font-sans: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); @@ -61,6 +62,10 @@ --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); + /* Semantic status colors (token layer) — consumed by the --bl-* bridge below */ + --success: oklch(0.62 0.14 150); + --warning: oklch(0.68 0.15 70); + --info: oklch(0.55 0.13 240); } .dark { @@ -87,21 +92,96 @@ --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); + --success: oklch(0.7 0.15 155); + --warning: oklch(0.75 0.15 75); + --info: oklch(0.65 0.14 240); } -/* Token bridge: map @bytelyst/ui --bl-* tokens to tracker's shadcn-style OKLCH vars */ -:root, .dark { +/* + * Token bridge: map the @bytelyst/* `--bl-*` token surface onto tracker's + * shadcn-style OKLCH vars so every adopted shared component (ui, auth-ui, + * notifications-ui, dashboard-components, charts) inherits the theme in both + * light and dark automatically. Extends the UX-1.2 minimum set (UX-1.2 / CC.2). + * Everything references tracker vars (or color-mix of them) so dark mode flips + * for free; no standalone color literals here. + */ +:root, +.dark { + /* Accent / primary / links */ --bl-accent: var(--primary); --bl-accent-foreground: var(--primary-foreground); + --bl-accent-muted: color-mix(in oklch, var(--primary) 12%, transparent); + --bl-primary: var(--primary); + --bl-link: var(--primary); + + /* Backgrounds & surfaces */ --bl-bg-canvas: var(--background); + --bl-page-bg: var(--background); + --bl-bg-elevated: var(--card); + --bl-surface: var(--card); --bl-surface-card: var(--card); + --bl-surface-sidebar: var(--card); + --bl-surface-highlight: var(--accent); + --bl-surface-hover: var(--accent); + --bl-surface-muted: var(--muted); + + /* Text */ + --bl-text: var(--foreground); --bl-text-primary: var(--foreground); --bl-text-secondary: var(--muted-foreground); --bl-text-tertiary: var(--muted-foreground); + --bl-muted: var(--muted-foreground); + + /* Borders, inputs, focus */ --bl-border: var(--border); + --bl-border-strong: var(--border); + --bl-border-subtle: var(--border); + --bl-input: var(--input); + --bl-focus-ring: var(--ring); + --bl-focus-ring-muted: color-mix(in oklch, var(--ring) 40%, transparent); + + /* Danger / error */ --bl-danger: var(--destructive); + --bl-danger-foreground: var(--primary-foreground); + --bl-danger-border: color-mix(in oklch, var(--destructive) 45%, transparent); + --bl-danger-muted: color-mix(in oklch, var(--destructive) 12%, transparent); + --bl-error: var(--destructive); + + /* Success / warning / info (semantic token layer flips per-theme) */ + --bl-success: var(--success); + --bl-success-border: color-mix(in oklch, var(--success) 45%, transparent); + --bl-success-muted: color-mix(in oklch, var(--success) 12%, transparent); + --bl-warning: var(--warning); + --bl-warning-border: color-mix(in oklch, var(--warning) 45%, transparent); + --bl-warning-muted: color-mix(in oklch, var(--warning) 12%, transparent); + --bl-info: var(--info); + --bl-info-border: color-mix(in oklch, var(--info) 45%, transparent); + --bl-info-muted: color-mix(in oklch, var(--info) 12%, transparent); + + /* Overlay scrim */ + --bl-overlay-scrim: color-mix(in oklch, var(--foreground) 40%, transparent); + + /* Radii */ + --bl-radius: var(--radius-md); --bl-radius-control: var(--radius-md); --bl-radius-card: var(--radius-lg); + --bl-card-radius: var(--radius-lg); + --bl-radius-pill: 9999px; + + /* Spacing */ + --bl-space-2: 0.5rem; + --bl-space-3: 0.75rem; + --bl-space-4: 1rem; + + /* Typography */ + --bl-font: var(--font-sans); + --bl-font-display: var(--font-sans); + + /* Elevation / layout */ + --bl-card-shadow: 0 1px 2px 0 color-mix(in oklch, var(--foreground) 8%, transparent); + --bl-app-sidebar-width: 16rem; + + /* Chart palette */ --bl-chart-1: var(--chart-1); --bl-chart-2: var(--chart-2); --bl-chart-3: var(--chart-3);