@borisj74/bv-ds 0.1.1 → 0.1.3

package/src/components/TableHeaderLabel/TableHeaderLabel.tsx

@@ -22,7 +22,7 @@ function ArrowIcon({ arrow }: { arrow: Exclude<TableHeaderLabelArrow, "none"> })
 }
 
 /**
- * Column-header label — `text-xs` semibold in `text-quaternary` (→ `text-tertiary`
+ * Column-header label — `text-xs` semibold in `text-text-quaternary` (→ `text-text-tertiary`
  * on hover), with an optional sort `arrow` and trailing `helpIcon` slot. Consumed
  * by `TableHeaderCell`.
  */

package/src/components/Toggle/Toggle.tsx

@@ -22,7 +22,7 @@ const KNOB: Record<ToggleSize, string> = { sm: "size-4", md: "size-5" };
 const TRAVEL: Record<ToggleSize, string> = { sm: "translate-x-4", md: "translate-x-5" };
 
 /**
- * Switch toggle. `default` = filled track (`bg-brand-solid` when on); `slim` = a
+ * Switch toggle. `default` = filled track (`bg-bg-brand-solid` when on); `slim` = a
  * thinner track with a bordered knob (uses the `toggle-slim-border-pressed`
  * tokens when on). The `_Toggle base` control is inline (not a separate export).
  * Controlled via `checked`/`onCheckedChange`; optional `label`/`supportingText`.

package/src/components/Tooltip/Tooltip.tsx

@@ -30,7 +30,7 @@ const ARROW_POS: Record<Exclude<TooltipArrow, "none">, string> = {
 };
 
 /**
- * Presentational tooltip bubble (dark `bg-primary-solid`, white text). `text` is
+ * Presentational tooltip bubble (dark `bg-bg-primary-solid`, white text). `text` is
  * the heading; `supportingText` adds a second `utility-neutral-300` line (max
  * 296px). `arrow` positions a small pointer on the bubble edge (rendered as a
  * rotated square). Positioning relative to a trigger is the caller's job.

package/src/components/TreeViewItem/TreeViewItem.tsx

@@ -27,7 +27,7 @@ export interface TreeViewItemProps extends Omit<HTMLAttributes<HTMLDivElement>,
 /**
  * One row of a `TreeView`. Composes `TreeViewConnector` for the `level` indent
  * guides, plus an optional expand chevron, `checkbox`, `icon` and label. Selected
- * → `bg-secondary`; hover → `bg-primary-hover`. Width is fluid (parent controls).
+ * → `bg-bg-secondary`; hover → `bg-bg-primary-hover`. Width is fluid (parent controls).
  */
 export function TreeViewItem({
   size = "sm",

package/src/components/VerificationCodeInput/VerificationCodeInput.tsx

@@ -27,7 +27,7 @@ const CELL: Record<VerificationCodeSize, string> = {
  * OTP-style verification code input. `digits` 4 or 6 separate single-character
  * cells (6 shows a centre "-" separator); large display typography
  * (`display-lg`/`display-xl`). Controlled via `value`/`onChange`; auto-advances
- * focus on entry and steps back on backspace. Cell borders use `border-primary`
+ * focus on entry and steps back on backspace. Cell borders use `border-border-primary`
  * (= `utility-neutral-300` #d4d4d4, same value).
  */
 export function VerificationCodeInput({

package/src/index.ts

@@ -62,6 +62,7 @@ export * from "./components/DropdownMenuHeader";
 export * from "./components/DropdownMenuItemInsetIcon";
 export * from "./components/DropdownMenuListItem";
 export * from "./components/EmptyState";
+export * from "./components/FeaturedIcon";
 export * from "./components/FeedItemBase";
 export * from "./components/FileUpload";
 export * from "./components/FileUploadBase";

package/tailwind-preset.js

@@ -1,227 +1,238 @@
 // Shareable Tailwind preset — token names traced from design.md, confirmed
 // against the live Figma file via figma-map.md token pulls. Consumers extend
 // their own tailwind.config.js with this preset so generated class names
-// (bg-brand-solid, text-secondary, p-md, etc.) match the design tokens
-// directly rather than arbitrary values.
+// match the design tokens directly.
 //
 // Usage in a consuming app's tailwind.config.js:
 //   const dsPreset = require("@borisj74/bv-ds/tailwind-preset");
 //   module.exports = { presets: [dsPreset], content: [...] };
 //
-// PEER DEPENDENCY — Recharts: chart components (_ChartMini, and the deferred
-// Line/bar/Pie/Radar wrappers) require `recharts` (>=2) installed in the
-// consuming app. Optional peer dependency: install it only if you use the chart
-// components. Recharts color props take hex strings, so those components read
-// token hex values from this preset directly (not Tailwind class names).
+// KEY NAMING — v0.1.2 fix:
+// Colors are nested under their category group (bg, text, border, fg).
+// Tailwind joins group + key with a hyphen at class-generation time:
+//   colors.bg["brand-solid"]   → bg-bg-brand-solid   ✓
+//   colors.text["secondary"]   → text-text-secondary  ✓
+//   colors.border["primary"]   → border-border-primary ✓
+// This prevents cross-category collisions (text-secondary #404040 vs
+// bg-secondary #fafafa) that caused the doubled-prefix bug in v0.1.1.
+//
+// Components must use the doubled-prefix form in className:
+//   bg-bg-brand-solid, text-text-secondary, border-border-primary, etc.
+//
+// PEER DEPENDENCY — Recharts requires `recharts` (>=2) in consuming app.
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   theme: {
     extend: {
       colors: {
-        // Text — design.md §2 "Color — Text"
-        "text-primary": "#171717",
-        "text-primary-on-brand": "#ffffff",
-        "text-secondary": "#404040",
-        "text-secondary-hover": "#262626",
-        "text-secondary-on-brand": "#e9d7fe",
-        "text-tertiary": "#525252",
-        "text-tertiary-hover": "#404040",
-        "text-tertiary-on-brand": "#e9d7fe",
-        "text-quaternary": "#737373",
-        "text-quaternary-on-brand": "#d6bbfb",
-        "text-white": "#ffffff",
-        "text-placeholder": "#737373",
-        "text-brand-primary": "#42307d",
-        "text-brand-secondary": "#6941c6",
-        "text-brand-secondary-hover": "#53389e",
-        "text-brand-tertiary": "#7f56d9",
-        "text-brand-tertiary-alt": "#7f56d9",
-        "text-error-primary": "#dc2626",
-        "text-warning-primary": "#ca8a04",
-        "text-success-primary": "#16a34a",
 
-        // Background — design.md §2 "Color — Background"
-        "bg-primary": "#ffffff",
-        "bg-primary-alt": "#ffffff",
-        "bg-primary-hover": "#fafafa",
-        "bg-primary-solid": "#0a0a0a",
-        "bg-secondary": "#fafafa",
-        "bg-secondary-alt": "#fafafa",
-        "bg-secondary-hover": "#f5f5f5",
-        "bg-secondary-solid": "#525252",
-        "bg-tertiary": "#f5f5f5",
-        "bg-quaternary": "#e5e5e5",
-        "bg-overlay": "#0a0a0a",
-        "bg-brand-primary": "#f9f5ff",
-        "bg-brand-primary-alt": "#f9f5ff",
-        "bg-brand-secondary": "#f4ebff",
-        "bg-brand-solid": "#7f56d9",
-        "bg-brand-solid-hover": "#6941c6",
-        "bg-error-primary": "#fef2f2",
-        "bg-error-secondary": "#fee2e2",
-        "bg-error-solid": "#dc2626",
-        "bg-error-solid-hover": "#b91c1c",
-        "bg-warning-primary": "#fefce8",
-        "bg-warning-secondary": "#fef9c3",
-        "bg-warning-solid": "#ca8a04",
-        "bg-success-primary": "#f0fdf4",
-        "bg-success-secondary": "#dcfce7",
-        "bg-success-solid": "#16a34a",
+        // ── Background tokens ─────────────────────────────────────────────
+        // Usage: bg-bg-primary, bg-bg-brand-solid, bg-bg-error-solid, etc.
+        bg: {
+          "primary":              "#ffffff",
+          "primary-alt":          "#ffffff",
+          "primary-hover":        "#fafafa",
+          "primary-solid":        "#0a0a0a",
+          "secondary":            "#fafafa",
+          "secondary-alt":        "#fafafa",
+          "secondary-hover":      "#f5f5f5",
+          "secondary-solid":      "#525252",
+          "tertiary":             "#f5f5f5",
+          "quaternary":           "#e5e5e5",
+          "overlay":              "#0a0a0a",
+          "brand-primary":        "#f9f5ff",
+          "brand-primary-alt":    "#f9f5ff",
+          "brand-secondary":      "#f4ebff",
+          "brand-solid":          "#7f56d9",
+          "brand-solid-hover":    "#6941c6",
+          "brand-section":        "#53389e",
+          "brand-section-subtle": "#6941c6",
+          "error-primary":        "#fef2f2",
+          "error-secondary":      "#fee2e2",
+          "error-solid":          "#dc2626",
+          "error-solid-hover":    "#b91c1c",
+          "warning-primary":      "#fefce8",
+          "warning-secondary":    "#fef9c3",
+          "warning-solid":        "#ca8a04",
+          "success-primary":      "#f0fdf4",
+          "success-secondary":    "#dcfce7",
+          "success-solid":        "#16a34a",
+        },
+
+        // ── Text tokens ───────────────────────────────────────────────────
+        // Usage: text-text-primary, text-text-secondary, text-text-brand-secondary, etc.
+        text: {
+          "primary":                "#171717",
+          "primary-on-brand":       "#ffffff",
+          "secondary":              "#404040",
+          "secondary-hover":        "#262626",
+          "secondary-on-brand":     "#e9d7fe",
+          "tertiary":               "#525252",
+          "tertiary-hover":         "#404040",
+          "tertiary-on-brand":      "#e9d7fe",
+          "quaternary":             "#737373",
+          "quaternary-on-brand":    "#d6bbfb",
+          "white":                  "#ffffff",
+          "placeholder":            "#737373",
+          "brand-primary":          "#42307d",
+          "brand-secondary":        "#6941c6",
+          "brand-secondary-hover":  "#53389e",
+          "brand-tertiary":         "#7f56d9",
+          "brand-tertiary-alt":     "#7f56d9",
+          "error-primary":          "#dc2626",
+          "warning-primary":        "#ca8a04",
+          "success-primary":        "#16a34a",
+        },
 
-        // Border — design.md §2 "Color — Border"
-        "border-primary": "#d4d4d4",
-        "border-secondary": "#e5e5e5",
-        "border-secondary-alt": "rgba(0,0,0,0.1)",
-        "border-tertiary": "#f5f5f5",
-        "border-brand": "#9e77ed",
-        "border-brand-alt": "#7f56d9",
-        "border-error": "#ef4444",
-        "border-error-subtle": "#fca5a5",
+        // ── Border tokens ─────────────────────────────────────────────────
+        // Usage: border-border-primary, border-border-brand, etc.
+        border: {
+          "primary":              "#d4d4d4",
+          "secondary":            "#e5e5e5",
+          "secondary-alt":        "rgba(0,0,0,0.1)",
+          "tertiary":             "#f5f5f5",
+          "brand":                "#9e77ed",
+          "brand-alt":            "#7f56d9",
+          "error":                "#ef4444",
+          "error-subtle":         "#fca5a5",
+        },
 
-        // Foreground (icons) — design.md §2 "Color — Foreground"
-        "fg-primary": "#171717",
-        "fg-secondary": "#404040",
-        "fg-secondary-hover": "#262626",
-        "fg-tertiary": "#525252",
-        "fg-tertiary-hover": "#404040",
-        "fg-quaternary": "#a3a3a3",
-        "fg-quaternary-hover": "#737373",
-        "fg-white": "#ffffff",
-        "fg-brand-primary": "#7f56d9",
-        "fg-brand-primary-alt": "#7f56d9",
-        "fg-brand-secondary": "#9e77ed",
-        "fg-brand-secondary-alt": "#9e77ed",
-        "fg-error-primary": "#dc2626",
-        "fg-error-secondary": "#ef4444",
-        "fg-warning-primary": "#ca8a04",
-        "fg-warning-secondary": "#eab308",
-        "fg-success-primary": "#16a34a",
-        "fg-success-secondary": "#22c55e",
+        // ── Foreground / icon tokens ──────────────────────────────────────
+        // Usage: text-fg-primary, bg-fg-brand-primary, etc.
+        fg: {
+          "primary":              "#171717",
+          "secondary":            "#404040",
+          "secondary-hover":      "#262626",
+          "tertiary":             "#525252",
+          "tertiary-hover":       "#404040",
+          "quaternary":           "#a3a3a3",
+          "quaternary-hover":     "#737373",
+          "white":                "#ffffff",
+          "brand-primary":        "#7f56d9",
+          "brand-primary-alt":    "#7f56d9",
+          "brand-secondary":      "#9e77ed",
+          "brand-secondary-alt":  "#9e77ed",
+          "error-primary":        "#dc2626",
+          "error-secondary":      "#ef4444",
+          "warning-primary":      "#ca8a04",
+          "warning-secondary":    "#eab308",
+          "success-primary":      "#16a34a",
+          "success-secondary":    "#22c55e",
+        },
 
-        // Utility colors — Component colors/Utility/<Family>/utility-<family>-<shade>
-        // Harvested live from Figma (Badge node 1046:3819 + Calendar event
-        // 7991:78181). NOTE: Figma's actual family names are color names
-        // (yellow/green/red/neutral), NOT the semantic Warning/Success/Error/Gray
-        // aliases — using the real names so utility-* classes round-trip to the
-        // file. Shades included are those Figma actually defines per family — a
-        // superset of the requested 50/200/400/500/700 (also 100/600 and
-        // neutral-300) because Charts/Calendar consume them. Emerald/Amber have
-        // no -400 in the source; omitted rather than invented. The full -100
-        // ramp is now filled for all 14 families; slate-100 (#f1f5f9) and
-        // sky-100 (#e0f2fe) were derived from Tailwind's palette (every other
-        // slate/sky shade matched Tailwind exactly) since they weren't in a
-        // Figma var dump — all other -100s came straight from Figma.
-        "utility-brand-50": "#f9f5ff",
-        "utility-brand-100": "#f4ebff",
-        "utility-brand-200": "#e9d7fe",
-        "utility-brand-400": "#b692f6",
-        "utility-brand-500": "#9e77ed",
-        "utility-brand-600": "#7f56d9",
-        "utility-brand-700": "#6941c6",
-        "utility-yellow-50": "#fefce8",
-        "utility-yellow-100": "#fef9c3",
-        "utility-yellow-200": "#fef08a",
-        "utility-yellow-400": "#facc15",
-        "utility-yellow-500": "#eab308",
-        "utility-yellow-600": "#ca8a04",
-        "utility-yellow-700": "#a16207",
-        // NOTE: Figma's `utility-success-*` naming maps to `utility-green-*` here —
-        // use `utility-green-*` consistently (no `utility-success-*` keys exist).
-        "utility-green-50": "#f0fdf4",
-        "utility-green-100": "#dcfce7",
-        "utility-green-200": "#bbf7d0",
-        "utility-green-400": "#4ade80",
-        "utility-green-500": "#22c55e",
-        "utility-green-600": "#16a34a",
-        "utility-green-700": "#15803d",
-        "utility-slate-50": "#f8fafc",
-        "utility-slate-100": "#f1f5f9",
-        "utility-slate-200": "#e2e8f0",
-        "utility-slate-400": "#94a3b8",
-        "utility-slate-500": "#64748b",
-        "utility-slate-700": "#334155",
-        "utility-sky-50": "#f0f9ff",
-        "utility-sky-100": "#e0f2fe",
-        "utility-sky-200": "#bae6fd",
-        "utility-sky-400": "#38bdf8",
-        "utility-sky-500": "#0ea5e9",
-        "utility-sky-700": "#0369a1",
-        "utility-indigo-50": "#eef2ff",
-        "utility-indigo-100": "#e0e7ff",
-        "utility-indigo-200": "#c7d2fe",
-        "utility-indigo-400": "#818cf8",
-        "utility-indigo-500": "#6366f1",
-        "utility-indigo-600": "#4f46e5",
-        "utility-indigo-700": "#4338ca",
-        "utility-purple-50": "#faf5ff",
-        "utility-purple-100": "#f3e8ff",
-        "utility-purple-200": "#e9d5ff",
-        "utility-purple-400": "#c084fc",
-        "utility-purple-500": "#a855f7",
-        "utility-purple-600": "#9333ea",
-        "utility-purple-700": "#7e22ce",
-        "utility-blue-50": "#eff6ff",
-        "utility-blue-100": "#dbeafe",
-        "utility-blue-200": "#bfdbfe",
-        "utility-blue-400": "#60a5fa",
-        "utility-blue-500": "#3b82f6",
-        "utility-blue-600": "#2563eb",
-        "utility-blue-700": "#1d4ed8",
-        "utility-pink-50": "#fdf2f8",
-        "utility-pink-100": "#fce7f3",
-        "utility-pink-200": "#fbcfe8",
-        "utility-pink-400": "#f472b6",
-        "utility-pink-500": "#ec4899",
-        "utility-pink-600": "#db2777",
-        "utility-pink-700": "#be185d",
-        "utility-orange-50": "#fff7ed",
-        "utility-orange-100": "#ffedd5",
-        "utility-orange-200": "#fed7aa",
-        "utility-orange-400": "#fb923c",
-        "utility-orange-500": "#f97316",
-        "utility-orange-600": "#ea580c",
-        "utility-orange-700": "#c2410c",
-        "utility-red-50": "#fef2f2",
-        "utility-red-100": "#fee2e2",
-        "utility-red-200": "#fecaca",
-        "utility-red-400": "#f87171",
-        "utility-red-500": "#ef4444",
-        "utility-red-600": "#dc2626",
-        "utility-red-700": "#b91c1c",
-        "utility-neutral-50": "#fafafa",
-        "utility-neutral-100": "#f5f5f5",
-        "utility-neutral-200": "#e5e5e5",
-        "utility-neutral-300": "#d4d4d4",
-        "utility-neutral-400": "#a3a3a3",
-        "utility-neutral-500": "#737373",
-        "utility-neutral-600": "#525252",
-        "utility-neutral-700": "#404040",
-        "utility-emerald-50": "#ecfdf5",
-        "utility-emerald-100": "#d1fae5",
-        "utility-emerald-200": "#a7f3d0",
-        "utility-emerald-500": "#10b981",
-        "utility-emerald-600": "#059669",
-        "utility-emerald-700": "#047857",
-        "utility-amber-50": "#fffbeb",
-        "utility-amber-100": "#fef3c7",
-        "utility-amber-200": "#fde68a",
-        "utility-amber-500": "#f59e0b",
-        "utility-amber-600": "#d97706",
-        "utility-amber-700": "#b45309",
-        // Alpha overlays (Component colors/Alpha) — confirmed values
-        "alpha-white-10": "rgba(255,255,255,0.10)",
-        "alpha-white-90": "rgba(255,255,255,0.90)",
-        "alpha-black-10": "rgba(0,0,0,0.10)",
-        "alpha-black-100": "rgba(0,0,0,1.00)",
-        // Component colors/Components/Sliders — confirmed via get_variable_defs (node 1086:534)
-        "slider-handle-bg": "#ffffff",
-        "slider-handle-border": "#7f56d9",
-        // Component colors/Components/Toggles — confirmed via get_variable_defs (node 1102:4208).
-        // Slim toggle pressed track border; Default toggle uses bg-brand-solid/-hover.
-        "toggle-slim-border-pressed": "#7f56d9",
+        // ── Utility palette ───────────────────────────────────────────────
+        // Usage: bg-utility-brand-50, text-utility-neutral-700, etc.
+        // Flat — no collision risk since all keys share the "utility-" prefix.
+        "utility-brand-50":       "#f9f5ff",
+        "utility-brand-100":      "#f4ebff",
+        "utility-brand-200":      "#e9d7fe",
+        "utility-brand-400":      "#b692f6",
+        "utility-brand-500":      "#9e77ed",
+        "utility-brand-600":      "#7f56d9",
+        "utility-brand-700":      "#6941c6",
+        "utility-yellow-50":      "#fefce8",
+        "utility-yellow-100":     "#fef9c3",
+        "utility-yellow-200":     "#fef08a",
+        "utility-yellow-400":     "#facc15",
+        "utility-yellow-500":     "#eab308",
+        "utility-yellow-600":     "#ca8a04",
+        "utility-yellow-700":     "#a16207",
+        "utility-green-50":       "#f0fdf4",
+        "utility-green-100":      "#dcfce7",
+        "utility-green-200":      "#bbf7d0",
+        "utility-green-400":      "#4ade80",
+        "utility-green-500":      "#22c55e",
+        "utility-green-600":      "#16a34a",
+        "utility-green-700":      "#15803d",
+        "utility-slate-50":       "#f8fafc",
+        "utility-slate-100":      "#f1f5f9",
+        "utility-slate-200":      "#e2e8f0",
+        "utility-slate-400":      "#94a3b8",
+        "utility-slate-500":      "#64748b",
+        "utility-slate-700":      "#334155",
+        "utility-sky-50":         "#f0f9ff",
+        "utility-sky-100":        "#e0f2fe",
+        "utility-sky-200":        "#bae6fd",
+        "utility-sky-400":        "#38bdf8",
+        "utility-sky-500":        "#0ea5e9",
+        "utility-sky-700":        "#0369a1",
+        "utility-indigo-50":      "#eef2ff",
+        "utility-indigo-100":     "#e0e7ff",
+        "utility-indigo-200":     "#c7d2fe",
+        "utility-indigo-400":     "#818cf8",
+        "utility-indigo-500":     "#6366f1",
+        "utility-indigo-600":     "#4f46e5",
+        "utility-indigo-700":     "#4338ca",
+        "utility-purple-50":      "#faf5ff",
+        "utility-purple-100":     "#f3e8ff",
+        "utility-purple-200":     "#e9d5ff",
+        "utility-purple-400":     "#c084fc",
+        "utility-purple-500":     "#a855f7",
+        "utility-purple-600":     "#9333ea",
+        "utility-purple-700":     "#7e22ce",
+        "utility-blue-50":        "#eff6ff",
+        "utility-blue-100":       "#dbeafe",
+        "utility-blue-200":       "#bfdbfe",
+        "utility-blue-400":       "#60a5fa",
+        "utility-blue-500":       "#3b82f6",
+        "utility-blue-600":       "#2563eb",
+        "utility-blue-700":       "#1d4ed8",
+        "utility-pink-50":        "#fdf2f8",
+        "utility-pink-100":       "#fce7f3",
+        "utility-pink-200":       "#fbcfe8",
+        "utility-pink-400":       "#f472b6",
+        "utility-pink-500":       "#ec4899",
+        "utility-pink-600":       "#db2777",
+        "utility-pink-700":       "#be185d",
+        "utility-orange-50":      "#fff7ed",
+        "utility-orange-100":     "#ffedd5",
+        "utility-orange-200":     "#fed7aa",
+        "utility-orange-400":     "#fb923c",
+        "utility-orange-500":     "#f97316",
+        "utility-orange-600":     "#ea580c",
+        "utility-orange-700":     "#c2410c",
+        "utility-red-50":         "#fef2f2",
+        "utility-red-100":        "#fee2e2",
+        "utility-red-200":        "#fecaca",
+        "utility-red-400":        "#f87171",
+        "utility-red-500":        "#ef4444",
+        "utility-red-600":        "#dc2626",
+        "utility-red-700":        "#b91c1c",
+        "utility-neutral-50":     "#fafafa",
+        "utility-neutral-100":    "#f5f5f5",
+        "utility-neutral-200":    "#e5e5e5",
+        "utility-neutral-300":    "#d4d4d4",
+        "utility-neutral-400":    "#a3a3a3",
+        "utility-neutral-500":    "#737373",
+        "utility-neutral-600":    "#525252",
+        "utility-neutral-700":    "#404040",
+        "utility-emerald-50":     "#ecfdf5",
+        "utility-emerald-100":    "#d1fae5",
+        "utility-emerald-200":    "#a7f3d0",
+        "utility-emerald-500":    "#10b981",
+        "utility-emerald-600":    "#059669",
+        "utility-emerald-700":    "#047857",
+        "utility-amber-50":       "#fffbeb",
+        "utility-amber-100":      "#fef3c7",
+        "utility-amber-200":      "#fde68a",
+        "utility-amber-500":      "#f59e0b",
+        "utility-amber-600":      "#d97706",
+        "utility-amber-700":      "#b45309",
+
+        // ── Alpha overlays ────────────────────────────────────────────────
+        "alpha-white-10":         "rgba(255,255,255,0.10)",
+        "alpha-white-90":         "rgba(255,255,255,0.90)",
+        "alpha-black-10":         "rgba(0,0,0,0.10)",
+        "alpha-black-100":        "rgba(0,0,0,1.00)",
+
+        // ── Component-specific tokens ─────────────────────────────────────
+        "slider-handle-bg":                 "#ffffff",
+        "slider-handle-border":             "#7f56d9",
+        "toggle-slim-border-pressed":       "#7f56d9",
         "toggle-slim-border-pressed-hover": "#6941c6",
       },
+
       spacing: {
         none: "0px",
         xxs: "2px",
@@ -240,21 +251,23 @@ module.exports = {
         "9xl": "96px",
         "10xl": "128px",
         "11xl": "160px",
-        // Layout container tokens (Alert / Header navigation / Page header)
         "container-padding-desktop": "32px",
         "container-padding-mobile": "16px",
       },
+
       maxWidth: {
         "container-max-width-desktop": "1280px",
         "width-lg": "640px",
       },
+
       boxShadow: {
-        // design.md §2 — base outer drop + the three-layer skeuomorphic stack
-        // (Shadows/shadow-xs-skeuomorphic).
         xs: "0px 1px 2px 0px rgba(0,0,0,0.05)",
         skeuomorphic:
           "0px 1px 2px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px rgba(0,0,0,0.05), inset 0px 0px 0px 1px rgba(0,0,0,0.18)",
+        lg: "0px 12px 16px -4px rgba(0,0,0,0.08), 0px 4px 6px -2px rgba(0,0,0,0.03), 0px 2px 2px -1px rgba(0,0,0,0.04)",
+        xl: "0px 20px 24px -4px rgba(0,0,0,0.08), 0px 8px 8px -4px rgba(0,0,0,0.03), 0px 3px 1.5px -1.5px rgba(0,0,0,0.04)",
       },
+
       borderRadius: {
         none: "0px",
         xxs: "2px",
@@ -268,10 +281,12 @@ module.exports = {
         "4xl": "24px",
         full: "9999px",
       },
+
       fontFamily: {
         body: ["Inter", "sans-serif"],
         display: ["Inter", "sans-serif"],
       },
+
       fontSize: {
         xs: ["12px", { lineHeight: "18px" }],
         sm: ["14px", { lineHeight: "20px" }],
@@ -284,9 +299,7 @@ module.exports = {
         "display-lg": ["48px", { lineHeight: "60px", letterSpacing: "-2px" }],
         "display-xl": ["60px", { lineHeight: "72px", letterSpacing: "-2px" }],
       },
-      // Figma "Backdrop blurs/backdrop-blur-md" = radius 16 (Tailwind's default
-      // backdrop-blur-md is 12px). backdrop-blur-* are Tailwind v3 core utilities
-      // (enabled by default); this just aligns the md value to the design token.
+
       backdropBlur: {
         md: "16px",
       },