@ponchia/ui 0.3.6 → 0.4.1

package/tokens/index.js

@@ -56,10 +56,10 @@ export const cssVars = {
     '--z-overlay': '30',
     '--z-popover': '50',
     '--z-toast': '60',
-    '--accent-1': 'color-mix(in srgb, var(--accent) 8%, var(--bg))',
-    '--accent-2': 'color-mix(in srgb, var(--accent) 16%, var(--bg))',
-    '--accent-3': 'color-mix(in srgb, var(--accent) 32%, var(--bg))',
-    '--accent-4': 'color-mix(in srgb, 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 +102,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)',
@@ -109,8 +110,6 @@ export const cssVars = {
     '--success-soft': 'rgb(47, 125, 79, 0.12)',
     '--warning': '#806414',
     '--warning-soft': 'rgb(128, 100, 20, 0.13)',
-    '--orange': '#a85f32',
-    '--orange-soft': 'rgb(168, 95, 50, 0.13)',
     '--danger': '#c01622',
     '--danger-soft': 'rgb(192, 22, 34, 0.1)',
     '--info': '#1f63c4',
@@ -126,18 +125,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)',
@@ -145,8 +145,6 @@ export const cssVars = {
     '--success-soft': 'rgb(78, 194, 126, 0.14)',
     '--warning': '#d8bd72',
     '--warning-soft': 'rgb(216, 189, 114, 0.14)',
-    '--orange': '#d08c5b',
-    '--orange-soft': 'rgb(208, 140, 91, 0.15)',
     '--danger': '#ff4d54',
     '--danger-soft': 'rgb(255, 77, 84, 0.15)',
     '--info': '#6fb0e6',

package/tokens/index.json

@@ -39,10 +39,10 @@
       "--z-overlay": "30",
       "--z-popover": "50",
       "--z-toast": "60",
-      "--accent-1": "color-mix(in srgb, var(--accent) 8%, var(--bg))",
-      "--accent-2": "color-mix(in srgb, var(--accent) 16%, var(--bg))",
-      "--accent-3": "color-mix(in srgb, var(--accent) 32%, var(--bg))",
-      "--accent-4": "color-mix(in srgb, 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)",
@@ -91,8 +92,6 @@
       "--success-soft": "rgb(47, 125, 79, 0.12)",
       "--warning": "#806414",
       "--warning-soft": "rgb(128, 100, 20, 0.13)",
-      "--orange": "#a85f32",
-      "--orange-soft": "rgb(168, 95, 50, 0.13)",
       "--danger": "#c01622",
       "--danger-soft": "rgb(192, 22, 34, 0.1)",
       "--info": "#1f63c4",
@@ -107,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)",
@@ -126,8 +126,6 @@
       "--success-soft": "rgb(78, 194, 126, 0.14)",
       "--warning": "#d8bd72",
       "--warning-soft": "rgb(216, 189, 114, 0.14)",
-      "--orange": "#d08c5b",
-      "--orange-soft": "rgb(208, 140, 91, 0.15)",
       "--danger": "#ff4d54",
       "--danger-soft": "rgb(255, 77, 84, 0.15)",
       "--info": "#6fb0e6",
@@ -182,10 +180,10 @@
       "z-overlay": "30",
       "z-popover": "50",
       "z-toast": "60",
-      "accent-1": "color-mix(in srgb, var(--accent) 8%, var(--bg))",
-      "accent-2": "color-mix(in srgb, var(--accent) 16%, var(--bg))",
-      "accent-3": "color-mix(in srgb, var(--accent) 32%, var(--bg))",
-      "accent-4": "color-mix(in srgb, 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)",
@@ -228,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)",
@@ -235,8 +234,6 @@
         "success-soft": "rgb(47, 125, 79, 0.12)",
         "warning": "#806414",
         "warning-soft": "rgb(128, 100, 20, 0.13)",
-        "orange": "#a85f32",
-        "orange-soft": "rgb(168, 95, 50, 0.13)",
         "danger": "#c01622",
         "danger-soft": "rgb(192, 22, 34, 0.1)",
         "info": "#1f63c4",
@@ -251,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)",
@@ -270,8 +268,6 @@
         "success-soft": "rgb(78, 194, 126, 0.14)",
         "warning": "#d8bd72",
         "warning-soft": "rgb(216, 189, 114, 0.14)",
-        "orange": "#d08c5b",
-        "orange-soft": "rgb(208, 140, 91, 0.15)",
         "danger": "#ff4d54",
         "danger-soft": "rgb(255, 77, 84, 0.15)",
         "info": "#6fb0e6",

package/tokens/resolved.json

@@ -1,10 +1,10 @@
 {
-  "$comment": "@ponchia/ui colour tokens resolved to static values per theme (var() + sRGB 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.",
+  "$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": "#f2e2e1",
-    "--accent-2": "#efd1d1",
-    "--accent-3": "#ebaeaf",
-    "--accent-4": "#e37175",
+    "--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)",
@@ -51,8 +52,6 @@
     "--success-soft": "rgba(47, 125, 79, 0.12)",
     "--warning": "#806414",
     "--warning-soft": "rgba(128, 100, 20, 0.13)",
-    "--orange": "#a85f32",
-    "--orange-soft": "rgba(168, 95, 50, 0.13)",
     "--danger": "#c01622",
     "--danger-soft": "rgba(192, 22, 34, 0.1)",
     "--info": "#1f63c4",
@@ -65,25 +64,25 @@
     "--focus-ring": "#d71921"
   },
   "dark": {
-    "--accent-1": "#140505",
-    "--accent-2": "#29090a",
-    "--accent-3": "#521315",
-    "--accent-4": "#992327",
+    "--accent-1": "#020000",
+    "--accent-2": "#0d0101",
+    "--accent-3": "#330506",
+    "--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",
@@ -91,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)",
@@ -115,8 +115,6 @@
     "--success-soft": "rgba(78, 194, 126, 0.14)",
     "--warning": "#d8bd72",
     "--warning-soft": "rgba(216, 189, 114, 0.14)",
-    "--orange": "#d08c5b",
-    "--orange-soft": "rgba(208, 140, 91, 0.15)",
     "--danger": "#ff4d54",
     "--danger-soft": "rgba(255, 77, 84, 0.15)",
     "--info": "#6fb0e6",

package/tokens/skins.d.ts

@@ -0,0 +1,27 @@
+/** @ponchia/ui — GENERATED from tokens/skins.js by scripts/gen-skins.mjs.
+ *  Do not edit by hand; run `npm run skins:build`. Drift-checked in CI. */
+
+/** Every display-colorway name @ponchia/ui ships (literal union). Use as a
+ *  type for a `data-bronto-skin` value (`const s: SkinName = 'amber-crt'`). */
+export type SkinName =
+  | 'amber-crt'
+  | 'e-ink'
+  | 'phosphor-green';
+
+/** A colorway: a display label + per-theme custom-property overrides (CSS
+ *  value strings). `light`/`dark` always set `--accent`; `dark` may add a
+ *  display knob such as `--dotmatrix-glow`. */
+export interface Skin {
+  label: string;
+  light: Record<string, string>;
+  dark: Record<string, string>;
+}
+
+/** The frozen name→colorway registry. */
+export declare const skins: Record<SkinName, Skin>;
+
+/** Every colorway name, frozen and sorted. */
+export declare const SKIN_NAMES: readonly SkinName[];
+
+declare const _default: Record<SkinName, Skin>;
+export default _default;

package/tokens/skins.js

@@ -0,0 +1,62 @@
+/**
+ * @ponchia/ui — optional display colorways ("skins").
+ *
+ * The single source for the opt-in `data-bronto-skin` looks (ADR-0001 step 4).
+ * A skin is NOT a second brand colour — it *re-points the one accent* (and the
+ * Tier-3 dot-matrix display knobs) to a different single hue, so the
+ * one-accent-per-scope discipline holds while the palette gains creative range
+ * *across* skins. The neutral canvas, status palette, and every component stay
+ * exactly as they are.
+ *
+ * Accents are authored in **OKLCH** (ADR-0001 step 5 — "OKLCH for new work
+ * first"): perceptually-uniform lightness makes the light/dark pair easy to
+ * reason about, and it is within the package browser floor (Chrome 111+,
+ * Safari 16.4+, Firefox 121+ all support `oklch()` and `color-mix()`).
+ *
+ * Each skin gives a per-theme accent because — exactly like the core red
+ * (#d71921 light / #ff3b41 dark) — one hue cannot stay AA against both a white
+ * and a black button label; the light accent is darker, the dark one brighter.
+ * The derived family (`--accent-strong`/`-text`/`-soft`, `--focus-ring`,
+ * `--bg-accent`, `--field-dot-accent`) recomputes in the browser from the live
+ * `var(--accent)`, so a skin only sets `--accent` plus any display knobs.
+ *
+ * This module is the source for BOTH:
+ *   - css/skins.css           (generated by scripts/gen-skins.mjs, drift-checked)
+ *   - the skin contrast audit (scripts/gen-contrast.mjs gates every skin accent)
+ *
+ * Skins are shipped OPT-IN: a separate `./css/skins.css` entrypoint, never part
+ * of the default `dist/bronto.css` bundle.
+ */
+
+/**
+ * name → { label, light, dark }. `light`/`dark` are CSS custom-property maps
+ * applied under the same conditions as the core light/dark palettes. Keep the
+ * key set of light and dark identical (a drift check enforces it).
+ */
+export const skins = {
+  'amber-crt': {
+    label: 'Amber CRT',
+    // Phosphor amber. Dark+saturated in light theme (AA under a white label),
+    // bright with a warm bloom in dark theme (the classic CRT glow).
+    light: { '--accent': 'oklch(52% 0.11 67deg)' },
+    dark: { '--accent': 'oklch(82% 0.15 82deg)', '--dotmatrix-glow': '0.4em' },
+  },
+  'phosphor-green': {
+    label: 'Phosphor Green',
+    // P1-phosphor green. Same light=dark-ink / dark=bright-glow split.
+    light: { '--accent': 'oklch(52% 0.13 150deg)' },
+    dark: { '--accent': 'oklch(84% 0.19 150deg)', '--dotmatrix-glow': '0.4em' },
+  },
+  'e-ink': {
+    label: 'E-ink',
+    // The opposite move: drop the hue almost entirely → a near-monochrome
+    // ink/paper accent, no glow. The most restrained look in the set.
+    light: { '--accent': 'oklch(34% 0.012 250deg)' },
+    dark: { '--accent': 'oklch(84% 0.008 250deg)' },
+  },
+};
+
+/** Skin names, frozen + sorted. */
+export const SKIN_NAMES = Object.freeze(Object.keys(skins).sort());
+
+export default skins;

package/tokens/tokens.dtcg.json

@@ -225,28 +225,28 @@
         "$type": "color",
         "$value": null,
         "$extensions": {
-          "com.ponchia.css": "color-mix(in srgb, 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 srgb, 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 srgb, 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 srgb, 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,
@@ -550,16 +554,6 @@
           "$value": "rgb(128, 100, 20, 0.13)"
         }
       },
-      "orange": {
-        "DEFAULT": {
-          "$type": "color",
-          "$value": "#a85f32"
-        },
-        "soft": {
-          "$type": "color",
-          "$value": "rgb(168, 95, 50, 0.13)"
-        }
-      },
       "danger": {
         "DEFAULT": {
           "$type": "color",
@@ -636,11 +630,11 @@
       "bg": {
         "DEFAULT": {
           "$type": "color",
-          "$value": "#000000"
+          "$value": "#121212"
         },
         "elevated": {
           "$type": "color",
-          "$value": "#0a0a0a"
+          "$value": "#181818"
         },
         "accent": {
           "$type": "color",
@@ -653,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": {
@@ -693,6 +687,10 @@
           "$type": "color",
           "$value": "#ff3b41"
         },
+        "ramp-end": {
+          "$type": "color",
+          "$value": "#000000"
+        },
         "strong": {
           "$type": "color",
           "$value": null,
@@ -735,16 +733,6 @@
           "$value": "rgb(216, 189, 114, 0.14)"
         }
       },
-      "orange": {
-        "DEFAULT": {
-          "$type": "color",
-          "$value": "#d08c5b"
-        },
-        "soft": {
-          "$type": "color",
-          "$value": "rgb(208, 140, 91, 0.15)"
-        }
-      },
       "danger": {
         "DEFAULT": {
           "$type": "color",