@ponchia/ui 0.4.0 → 0.5.0

package/solid/index.js

@@ -7,7 +7,8 @@
  * `solid-js` is an optional peer dependency.
  *
  * Behaviors delegate from a root (default `document`); call a primitive once in
- * a component that owns the relevant subtree, `{ root: el }` to scope it.
+ * a component that owns the relevant subtree, and pass a root resolver to scope
+ * it when the element is assigned by Solid's ref lifecycle.
  *
  *   import { useDialog, useToast } from '@ponchia/ui/solid';
  *   function App() {
@@ -31,14 +32,36 @@ import {
   initDialog,
   initCarousel,
   initDotGlyph,
+  initLegend,
+  initConnectors,
+  initSpotlight,
+  initCrosshair,
+  initCommand,
   toast,
 } from '../behaviors/index.js';
 
+function resolveMaybe(v) {
+  return typeof v === 'function' ? v() : v;
+}
+
+function resolveRoot(root) {
+  const value = resolveMaybe(root);
+  if (value && typeof value === 'object' && 'current' in value) return value.current;
+  return value;
+}
+
+function resolveOpts(opts) {
+  const value = resolveMaybe(opts);
+  if (!value || typeof value !== 'object') return undefined;
+  const root = resolveRoot(value.root);
+  return root ? { ...value, root } : { ...value, root: undefined };
+}
+
 /** Run a delegated behavior for the component's lifetime (init on mount, its
- *  returned cleanup on dispose). */
+ *  returned cleanup on dispose). Options resolve on mount, after refs exist. */
 export function useBrontoBehavior(init, opts) {
   onMount(() => {
-    const cleanup = init(opts);
+    const cleanup = init(resolveOpts(opts));
     if (typeof cleanup === 'function') onCleanup(cleanup);
   });
 }
@@ -55,6 +78,11 @@ export const useTabs = (opts) => useBrontoBehavior(initTabs, opts);
 export const useDialog = (opts) => useBrontoBehavior(initDialog, opts);
 export const useCarousel = (opts) => useBrontoBehavior(initCarousel, opts);
 export const useDotGlyph = (opts) => useBrontoBehavior(initDotGlyph, opts);
+export const useLegend = (opts) => useBrontoBehavior(initLegend, opts);
+export const useConnectors = (opts) => useBrontoBehavior(initConnectors, opts);
+export const useSpotlight = (opts) => useBrontoBehavior(initSpotlight, opts);
+export const useCrosshair = (opts) => useBrontoBehavior(initCrosshair, opts);
+export const useCommand = (opts) => useBrontoBehavior(initCommand, opts);
 
 /** The `toast()` imperative (no lifecycle of its own). */
 export const useToast = () => toast;

package/tokens/index.d.ts

@@ -4,8 +4,8 @@
 export type ThemeName = 'light' | 'dark';
 
 export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--mono' | '--sans' | '--dot-font' | '--display' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--z-base' | '--z-raised' | '--z-sticky' | '--z-overlay' | '--z-popover' | '--z-toast' | '--accent-1' | '--accent-2' | '--accent-3' | '--accent-4' | '--accent-5' | '--accent-6' | '--surface-1' | '--surface-2' | '--surface-3' | '--surface-4' | '--surface-5' | '--surface-6' | '--bronto-color-bg' | '--bronto-color-surface' | '--bronto-color-surface-raised' | '--bronto-color-border' | '--bronto-color-border-strong' | '--bronto-color-text' | '--bronto-color-text-muted' | '--bronto-color-action' | '--bronto-color-on-action' | '--bronto-color-focus' | '--bronto-color-success' | '--bronto-color-warning' | '--bronto-color-danger' | '--bronto-color-info' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
-export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
-export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
+export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-ramp-end' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
+export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-ramp-end' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
 
 /** Exact mirror of the :root blocks in css/tokens.css (literal keys). */
 export declare const cssVars: {
@@ -15,7 +15,7 @@ export declare const cssVars: {
 };
 
 export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'mono' | 'sans' | 'dot-font' | 'display' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'z-base' | 'z-raised' | 'z-sticky' | 'z-overlay' | 'z-popover' | 'z-toast' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-4' | 'surface-5' | 'surface-6' | 'bronto-color-bg' | 'bronto-color-surface' | 'bronto-color-surface-raised' | 'bronto-color-border' | 'bronto-color-border-strong' | 'bronto-color-text' | 'bronto-color-text-muted' | 'bronto-color-action' | 'bronto-color-on-action' | 'bronto-color-focus' | 'bronto-color-success' | 'bronto-color-warning' | 'bronto-color-danger' | 'bronto-color-info' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
-export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-strong' | 'accent-text' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft' | 'info' | 'info-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
+export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-ramp-end' | 'accent-strong' | 'accent-text' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft' | 'info' | 'info-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
 
 /** Ergonomic view derived from {@link cssVars} (`--` prefix stripped). */
 export declare const tokens: {

package/tokens/index.js

@@ -4,16 +4,20 @@
  * For consumers that need token values in JS rather than CSS: charting,
  * canvas, inline styles, theme-aware logic, Style Dictionary / Figma sync.
  *
- * `cssVars` is the canonical, exact mirror of the :root blocks in
- * css/tokens.css — keyed by the real custom-property name, values are
- * the verbatim CSS strings. scripts/check-tokens.mjs fails CI if this
- * drifts from the stylesheet, so the two cannot silently diverge.
+ * `cssVars` is the SINGLE SOURCE of truth for token values — keyed by the
+ * real custom-property name, values are the verbatim CSS strings. The four
+ * :root palette blocks of css/tokens.css are GENERATED from it
+ * (scripts/gen-tokens-css.mjs), so the dark palette is authored once here
+ * rather than in three places (the two CSS dark blocks + a JS mirror).
+ * scripts/check-tokens.mjs fails CI if css/tokens.css drifts from this model.
  *
  * `tokens` is an ergonomic view derived programmatically from `cssVars`
  * (no second hand-maintained copy, so nothing to keep in sync).
  */
 
-/** Exact mirror of css/tokens.css. Do not reshape — the sync check is literal. */
+/** Single source for token values; the css/tokens.css palette blocks are
+ *  generated from this (scripts/gen-tokens-css.mjs). Edit values here, then run
+ *  `npm run tokens:css:build`. Do not reshape — the generators consume it literally. */
 export const cssVars = {
   // Global :root — scales, shared with both themes.
   global: {
@@ -56,10 +60,10 @@ export const cssVars = {
     '--z-overlay': '30',
     '--z-popover': '50',
     '--z-toast': '60',
-    '--accent-1': 'color-mix(in oklch, var(--accent) 8%, var(--bg))',
-    '--accent-2': 'color-mix(in oklch, var(--accent) 16%, var(--bg))',
-    '--accent-3': 'color-mix(in oklch, var(--accent) 32%, var(--bg))',
-    '--accent-4': 'color-mix(in oklch, var(--accent) 60%, var(--bg))',
+    '--accent-1': 'color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))',
+    '--accent-2': 'color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))',
+    '--accent-3': 'color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))',
+    '--accent-4': 'color-mix(in oklch, var(--accent) 60%, var(--accent-ramp-end))',
     '--accent-5': 'var(--accent)',
     '--accent-6': 'var(--accent-strong)',
     '--surface-1': 'var(--bg)',
@@ -102,6 +106,7 @@ export const cssVars = {
     '--text-soft': '#353533',
     '--text-dim': '#686863',
     '--accent': '#d71921',
+    '--accent-ramp-end': '#ffffff',
     '--accent-strong': 'color-mix(in srgb, var(--accent) 83%, #000)',
     '--accent-text': 'var(--accent-strong)',
     '--accent-soft': 'color-mix(in srgb, var(--accent) 10%, transparent)',
@@ -124,18 +129,19 @@ export const cssVars = {
   },
   // Dark palette — both the prefers-color-scheme and [data-theme='dark'] blocks.
   dark: {
-    '--bg': '#000000',
-    '--bg-elevated': '#0a0a0a',
+    '--bg': '#121212',
+    '--bg-elevated': '#181818',
     '--bg-accent': 'color-mix(in srgb, var(--accent) 8%, transparent)',
-    '--panel': '#0c0c0c',
-    '--panel-strong': '#141414',
-    '--panel-soft': '#1a1a1a',
-    '--line': '#2a2a2a',
-    '--line-strong': '#444444',
-    '--text': '#f2f2f2',
-    '--text-soft': '#c4c4c4',
-    '--text-dim': '#858585',
+    '--panel': '#1c1c1c',
+    '--panel-strong': '#222222',
+    '--panel-soft': '#242424',
+    '--line': '#383838',
+    '--line-strong': '#555555',
+    '--text': '#e6e6e6',
+    '--text-soft': '#c8c8c8',
+    '--text-dim': '#a0a0a0',
     '--accent': '#ff3b41',
+    '--accent-ramp-end': '#000000',
     '--accent-strong': 'color-mix(in srgb, var(--accent) 84%, #fff)',
     '--accent-text': 'var(--accent-strong)',
     '--accent-soft': 'color-mix(in srgb, var(--accent) 14%, transparent)',

package/tokens/index.json

@@ -39,10 +39,10 @@
       "--z-overlay": "30",
       "--z-popover": "50",
       "--z-toast": "60",
-      "--accent-1": "color-mix(in oklch, var(--accent) 8%, var(--bg))",
-      "--accent-2": "color-mix(in oklch, var(--accent) 16%, var(--bg))",
-      "--accent-3": "color-mix(in oklch, var(--accent) 32%, var(--bg))",
-      "--accent-4": "color-mix(in oklch, var(--accent) 60%, var(--bg))",
+      "--accent-1": "color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))",
+      "--accent-2": "color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))",
+      "--accent-3": "color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))",
+      "--accent-4": "color-mix(in oklch, var(--accent) 60%, var(--accent-ramp-end))",
       "--accent-5": "var(--accent)",
       "--accent-6": "var(--accent-strong)",
       "--surface-1": "var(--bg)",
@@ -84,6 +84,7 @@
       "--text-soft": "#353533",
       "--text-dim": "#686863",
       "--accent": "#d71921",
+      "--accent-ramp-end": "#ffffff",
       "--accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
       "--accent-text": "var(--accent-strong)",
       "--accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
@@ -105,18 +106,19 @@
       "--shadow-raised": "0 0 0 1px var(--line-strong)"
     },
     "dark": {
-      "--bg": "#000000",
-      "--bg-elevated": "#0a0a0a",
+      "--bg": "#121212",
+      "--bg-elevated": "#181818",
       "--bg-accent": "color-mix(in srgb, var(--accent) 8%, transparent)",
-      "--panel": "#0c0c0c",
-      "--panel-strong": "#141414",
-      "--panel-soft": "#1a1a1a",
-      "--line": "#2a2a2a",
-      "--line-strong": "#444444",
-      "--text": "#f2f2f2",
-      "--text-soft": "#c4c4c4",
-      "--text-dim": "#858585",
+      "--panel": "#1c1c1c",
+      "--panel-strong": "#222222",
+      "--panel-soft": "#242424",
+      "--line": "#383838",
+      "--line-strong": "#555555",
+      "--text": "#e6e6e6",
+      "--text-soft": "#c8c8c8",
+      "--text-dim": "#a0a0a0",
       "--accent": "#ff3b41",
+      "--accent-ramp-end": "#000000",
       "--accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
       "--accent-text": "var(--accent-strong)",
       "--accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
@@ -178,10 +180,10 @@
       "z-overlay": "30",
       "z-popover": "50",
       "z-toast": "60",
-      "accent-1": "color-mix(in oklch, var(--accent) 8%, var(--bg))",
-      "accent-2": "color-mix(in oklch, var(--accent) 16%, var(--bg))",
-      "accent-3": "color-mix(in oklch, var(--accent) 32%, var(--bg))",
-      "accent-4": "color-mix(in oklch, var(--accent) 60%, var(--bg))",
+      "accent-1": "color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))",
+      "accent-2": "color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))",
+      "accent-3": "color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))",
+      "accent-4": "color-mix(in oklch, var(--accent) 60%, var(--accent-ramp-end))",
       "accent-5": "var(--accent)",
       "accent-6": "var(--accent-strong)",
       "surface-1": "var(--bg)",
@@ -224,6 +226,7 @@
         "text-soft": "#353533",
         "text-dim": "#686863",
         "accent": "#d71921",
+        "accent-ramp-end": "#ffffff",
         "accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
         "accent-text": "var(--accent-strong)",
         "accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
@@ -245,18 +248,19 @@
         "shadow-raised": "0 0 0 1px var(--line-strong)"
       },
       "dark": {
-        "bg": "#000000",
-        "bg-elevated": "#0a0a0a",
+        "bg": "#121212",
+        "bg-elevated": "#181818",
         "bg-accent": "color-mix(in srgb, var(--accent) 8%, transparent)",
-        "panel": "#0c0c0c",
-        "panel-strong": "#141414",
-        "panel-soft": "#1a1a1a",
-        "line": "#2a2a2a",
-        "line-strong": "#444444",
-        "text": "#f2f2f2",
-        "text-soft": "#c4c4c4",
-        "text-dim": "#858585",
+        "panel": "#1c1c1c",
+        "panel-strong": "#222222",
+        "panel-soft": "#242424",
+        "line": "#383838",
+        "line-strong": "#555555",
+        "text": "#e6e6e6",
+        "text-soft": "#c8c8c8",
+        "text-dim": "#a0a0a0",
         "accent": "#ff3b41",
+        "accent-ramp-end": "#000000",
         "accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
         "accent-text": "var(--accent-strong)",
         "accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",

package/tokens/resolved.json

@@ -1,10 +1,10 @@
 {
   "$comment": "@ponchia/ui colour tokens resolved to static values per theme (var() + sRGB/OKLCH color-mix() evaluated at build). For non-CSS render targets: MapLibre/canvas/WebGL/SVG. Generated from tokens/index.js — do not edit by hand; run `npm run resolved:build`. Drift-checked in CI.",
   "light": {
-    "--accent-1": "#f6e5e2",
-    "--accent-2": "#f6d6d2",
-    "--accent-3": "#f5b8b1",
-    "--accent-4": "#ed8378",
+    "--accent-1": "#ffefed",
+    "--accent-2": "#ffe0db",
+    "--accent-3": "#fbc0b9",
+    "--accent-4": "#f1877d",
     "--accent-5": "#d71921",
     "--accent-6": "#b2151b",
     "--surface-1": "#f4f4f2",
@@ -44,6 +44,7 @@
     "--text-soft": "#353533",
     "--text-dim": "#686863",
     "--accent": "#d71921",
+    "--accent-ramp-end": "#ffffff",
     "--accent-strong": "#b2151b",
     "--accent-text": "#b2151b",
     "--accent-soft": "rgba(215, 25, 33, 0.1)",
@@ -69,19 +70,19 @@
     "--accent-4": "#80191c",
     "--accent-5": "#ff3b41",
     "--accent-6": "#ff5a5f",
-    "--surface-1": "#000000",
-    "--surface-2": "#0a0a0a",
-    "--surface-3": "#0c0c0c",
-    "--surface-4": "#1a1a1a",
-    "--surface-5": "#2a2a2a",
-    "--surface-6": "#444444",
-    "--bronto-color-bg": "#000000",
-    "--bronto-color-surface": "#0c0c0c",
-    "--bronto-color-surface-raised": "#141414",
-    "--bronto-color-border": "#2a2a2a",
-    "--bronto-color-border-strong": "#444444",
-    "--bronto-color-text": "#f2f2f2",
-    "--bronto-color-text-muted": "#858585",
+    "--surface-1": "#121212",
+    "--surface-2": "#181818",
+    "--surface-3": "#1c1c1c",
+    "--surface-4": "#242424",
+    "--surface-5": "#383838",
+    "--surface-6": "#555555",
+    "--bronto-color-bg": "#121212",
+    "--bronto-color-surface": "#1c1c1c",
+    "--bronto-color-surface-raised": "#222222",
+    "--bronto-color-border": "#383838",
+    "--bronto-color-border-strong": "#555555",
+    "--bronto-color-text": "#e6e6e6",
+    "--bronto-color-text-muted": "#a0a0a0",
     "--bronto-color-action": "#ff3b41",
     "--bronto-color-on-action": "#000000",
     "--bronto-color-focus": "#ff3b41",
@@ -89,23 +90,24 @@
     "--bronto-color-warning": "#d8bd72",
     "--bronto-color-danger": "#ff4d54",
     "--bronto-color-info": "#6fb0e6",
-    "--surface": "#0c0c0c",
-    "--surface-raised": "#141414",
-    "--surface-muted": "#1a1a1a",
-    "--border": "#2a2a2a",
-    "--border-strong": "#444444",
-    "--bg": "#000000",
-    "--bg-elevated": "#0a0a0a",
+    "--surface": "#1c1c1c",
+    "--surface-raised": "#222222",
+    "--surface-muted": "#242424",
+    "--border": "#383838",
+    "--border-strong": "#555555",
+    "--bg": "#121212",
+    "--bg-elevated": "#181818",
     "--bg-accent": "rgba(255, 59, 65, 0.08)",
-    "--panel": "#0c0c0c",
-    "--panel-strong": "#141414",
-    "--panel-soft": "#1a1a1a",
-    "--line": "#2a2a2a",
-    "--line-strong": "#444444",
-    "--text": "#f2f2f2",
-    "--text-soft": "#c4c4c4",
-    "--text-dim": "#858585",
+    "--panel": "#1c1c1c",
+    "--panel-strong": "#222222",
+    "--panel-soft": "#242424",
+    "--line": "#383838",
+    "--line-strong": "#555555",
+    "--text": "#e6e6e6",
+    "--text-soft": "#c8c8c8",
+    "--text-dim": "#a0a0a0",
     "--accent": "#ff3b41",
+    "--accent-ramp-end": "#000000",
     "--accent-strong": "#ff5a5f",
     "--accent-text": "#ff5a5f",
     "--accent-soft": "rgba(255, 59, 65, 0.14)",

package/tokens/tokens.dtcg.json

@@ -225,28 +225,28 @@
         "$type": "color",
         "$value": null,
         "$extensions": {
-          "com.ponchia.css": "color-mix(in oklch, var(--accent) 8%, var(--bg))"
+          "com.ponchia.css": "color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))"
         }
       },
       "2": {
         "$type": "color",
         "$value": null,
         "$extensions": {
-          "com.ponchia.css": "color-mix(in oklch, var(--accent) 16%, var(--bg))"
+          "com.ponchia.css": "color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))"
         }
       },
       "3": {
         "$type": "color",
         "$value": null,
         "$extensions": {
-          "com.ponchia.css": "color-mix(in oklch, var(--accent) 32%, var(--bg))"
+          "com.ponchia.css": "color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))"
         }
       },
       "4": {
         "$type": "color",
         "$value": null,
         "$extensions": {
-          "com.ponchia.css": "color-mix(in oklch, var(--accent) 60%, var(--bg))"
+          "com.ponchia.css": "color-mix(in oklch, var(--accent) 60%, var(--accent-ramp-end))"
         }
       },
       "5": {
@@ -508,6 +508,10 @@
           "$type": "color",
           "$value": "#d71921"
         },
+        "ramp-end": {
+          "$type": "color",
+          "$value": "#ffffff"
+        },
         "strong": {
           "$type": "color",
           "$value": null,
@@ -626,11 +630,11 @@
       "bg": {
         "DEFAULT": {
           "$type": "color",
-          "$value": "#000000"
+          "$value": "#121212"
         },
         "elevated": {
           "$type": "color",
-          "$value": "#0a0a0a"
+          "$value": "#181818"
         },
         "accent": {
           "$type": "color",
@@ -643,39 +647,39 @@
       "panel": {
         "DEFAULT": {
           "$type": "color",
-          "$value": "#0c0c0c"
+          "$value": "#1c1c1c"
         },
         "strong": {
           "$type": "color",
-          "$value": "#141414"
+          "$value": "#222222"
         },
         "soft": {
           "$type": "color",
-          "$value": "#1a1a1a"
+          "$value": "#242424"
         }
       },
       "line": {
         "DEFAULT": {
           "$type": "color",
-          "$value": "#2a2a2a"
+          "$value": "#383838"
         },
         "strong": {
           "$type": "color",
-          "$value": "#444444"
+          "$value": "#555555"
         }
       },
       "text": {
         "DEFAULT": {
           "$type": "color",
-          "$value": "#f2f2f2"
+          "$value": "#e6e6e6"
         },
         "soft": {
           "$type": "color",
-          "$value": "#c4c4c4"
+          "$value": "#c8c8c8"
         },
         "dim": {
           "$type": "color",
-          "$value": "#858585"
+          "$value": "#a0a0a0"
         }
       },
       "accent": {
@@ -683,6 +687,10 @@
           "$type": "color",
           "$value": "#ff3b41"
         },
+        "ramp-end": {
+          "$type": "color",
+          "$value": "#000000"
+        },
         "strong": {
           "$type": "color",
           "$value": null,