/* ============================================================================= Staple Design System — merged token set ("middle ground") ----------------------------------------------------------------------------- SOURCE OF TRUTH FOR NOMENCLATURE + SHARED VALUES: staple-new-dashboard/src/index.css (cloned here as ./index.css) This file MERGES that authoritative token set with the Clipper Kit v2.0 tokens (./clipper-kit-v2-tokens.css). The rules used: 1. index.css naming + values SUPERSEDE Clipper for every shared token. 2. Repetitive Clipper tokens are dropped and renamed to index nomenclature. 3. Clipper-only tokens (no index equivalent) are appended, themed for light / dark / high-contrast. Use this file for NEW screens: — app-style dark (next-themes) — prototype-style dark — prototype-style high contrast then reference tokens with var(--token). Clipper → index rename map (for porting Clipper component CSS): --bg → --background --fg → --foreground --primary-fg → --primary-foreground --muted-fg → --muted-foreground --accent (#f9fbfb)→ --accent (index value supersedes) --border-strong → --input (shadcn: input/control border) --focus → --ring --font-body → --font-sans --font-mono → --font-mono (now Menlo per index, not JetBrains) --on-primary → --primary-foreground --on-destructive → --destructive-foreground --on-success → --success-foreground --on-warning → --warning-foreground --radius-base(8) → --radius-md (8px, index) --radius (10px) = --radius-lg --shadow-sm/md/lg/xl → index's (flat by design; see elevation note below) Clipper-only tokens kept (index has no equivalent): --font-display, --info*, --link, soft semantic surfaces (--*-bg / --*-border), the 24-colour badge palette, --switcher-*, --accordion-*, --chart-label/-text, --header-* (now aliased to core tokens), --cmd-highlight, --focus-ring*, --shadow-toggle, --dfp-*, the spacing / radius-extras / z-index / transition scales. ============================================================================= */ :root { /* ===== CORE — staple-new-dashboard/src/index.css (oklch, authoritative) ===== */ --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.25 0.04 215.63); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.04 215.63); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.04 215.63); --primary: oklch(0.33 0.06 221.21); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.97 0 228.43); --secondary-foreground: oklch(0.3 0.01 223.65); --muted: oklch(0.97 0 228.43); --muted-foreground: oklch(0.55 0.03 215); --accent: oklch(0.97 0.02 218.55); --accent-foreground: oklch(0.25 0.04 215.63); --destructive: oklch(0.58 0.24 29.5); --destructive-foreground: oklch(1 0 0); --success: oklch(0.62 0.15 150); --success-foreground: oklch(1 0 0); --warning: oklch(0.78 0.16 75); --warning-foreground: oklch(0.27 0.05 70); --border: oklch(0.97 0 228.43); --input: oklch(0.86 0.01 205.73); --ring: oklch(0.41 0.06 216.95); --chart-1: oklch(0.73 0.15 232.94); --chart-2: oklch(0.6 0.14 153.3); --chart-3: oklch(0.64 0.18 43.3); --chart-4: oklch(0.59 0.22 1.12); --chart-5: oklch(0.65 0.22 312.06); --sidebar: oklch(0.99 0 196.26); --sidebar-foreground: oklch(0.3 0.01 223.65); --sidebar-primary: oklch(0.33 0.06 220.9); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.97 0.02 218.55); --sidebar-accent-foreground: oklch(0.25 0.04 215.63); --sidebar-border: oklch(0.93 0 214.04); --sidebar-ring: oklch(0.33 0.06 221.21); /* Fonts (index nomenclature; fallbacks added for standalone prototypes) */ --font-sans: "Noto Sans Variable", "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: Georgia, serif; --font-mono: Menlo, monospace; /* Shadows — index ships these flat (zero-opacity) by design. For Clipper-style elevation see the opt-in block near the bottom. */ --shadow-2xs: 0 1px 0px 0px oklch(0.68 0.16 243.35 / 0); --shadow-xs: 0 1px 0px 0px oklch(0.68 0.16 243.35 / 0); --shadow-sm: 0 1px 0px 0px oklch(0.68 0.16 243.35 / 0), 0 1px 2px -1px oklch(0.68 0.16 243.35 / 0); --shadow: 0 1px 0px 0px oklch(0.68 0.16 243.35 / 0), 0 1px 2px -1px oklch(0.68 0.16 243.35 / 0); --shadow-md: 0 1px 0px 0px oklch(0.68 0.16 243.35 / 0), 0 2px 4px -1px oklch(0.68 0.16 243.35 / 0); --shadow-lg: 0 1px 0px 0px oklch(0.68 0.16 243.35 / 0), 0 4px 6px -1px oklch(0.68 0.16 243.35 / 0); --shadow-xl: 0 1px 0px 0px oklch(0.68 0.16 243.35 / 0), 0 8px 10px -1px oklch(0.68 0.16 243.35 / 0); --shadow-2xl: 0 1px 0px 0px oklch(0.68 0.16 243.35 / 0); /* Radius scale — index defines --radius + sm/md/lg/xl (calc); Clipper extras appended */ --radius-sm: calc(var(--radius) - 4px); /* 6px */ --radius-md: calc(var(--radius) - 2px); /* 8px */ --radius-lg: var(--radius); /* 10px */ --radius-xl: calc(var(--radius) + 4px); /* 14px */ --radius-xs: 2px; /* Clipper-only */ --radius-2xl: 16px; /* Clipper-only */ --radius-3xl: 24px; /* Clipper-only */ --radius-full: 999px; /* Clipper-only */ /* ===== EXTENSIONS — Clipper Kit v2.0 (no index.css equivalent) ===== */ /* Display font — index has no display slot */ --font-display: "Fraunces", "Times New Roman", serif; /* Info (semantic) + link — not present in index.css */ --info: #387ff9; --info-bg: #e3f0fe; --info-border: #b7d6fd; --link: #2562ee; /* Soft semantic surfaces — index only ships solid colour + foreground */ --destructive-bg: #ffeaea; --destructive-border: #fdc7c7; --success-bg: #e8f7ee; --success-border: #bce5cd; --warning-bg: #fef0e1; --warning-border: #fbd7ae; /* Badge palette — 24 colours (foreground / soft bg / border) */ --teal: #0f766e; --teal-bg: #ccfbf1; --teal-border: #99f6e4; --cyan: #0e7490; --cyan-bg: #cffafe; --cyan-border: #a5f3fc; --indigo: #4338ca; --indigo-bg: #e0e7ff; --indigo-border: #c7d2fe; --pink: #be185d; --pink-bg: #fce7f3; --pink-border: #fbcfe8; --rose: #be123c; --rose-bg: #ffe4e6; --rose-border: #fecdd3; --amber: #b45309; --amber-bg: #fef3c7; --amber-border: #fde68a; --lime: #4d7c0f; --lime-bg: #ecfccb; --lime-border: #d9f99d; --emerald: #047857; --emerald-bg: #d1fae5; --emerald-border: #a7f3d0; --violet: #6d28d9; --violet-bg: #ede9fe; --violet-border: #ddd6fe; --fuchsia: #a21caf; --fuchsia-bg: #fae8ff; --fuchsia-border: #f5d0fe; --sky: #0369a1; --sky-bg: #e0f2fe; --sky-border: #bae6fd; --slate: #475569; --slate-bg: #f1f5f9; --slate-border: #e2e8f0; --gold: #a16207; --gold-bg: #fef9c3; --gold-border: #fef08a; --crimson: #b91c1c; --crimson-bg: #fee2e2; --crimson-border: #fecaca; --sage: #3d6b50; --sage-bg: #e8f5e9; --sage-border: #c8e6c9; --purple: #6c45c1; --purple-bg: #ede9fc; --purple-border: #d8cef7; --orange: #c25e1f; --orange-bg: #fef0e1; --orange-border: #fbd7ae; --blue: #2562ee; --blue-bg: #e3f0fe; --blue-border: #b7d6fd; /* Component tokens */ --switcher-on: var(--primary); --switcher-off: #a9b6b7; --switcher-thumb: #fff; --accordion-stroke: #e4e8e9; --accordion-bg: #f4f6f7; --chart-label: #08272e; --chart-text: #637477; --cmd-highlight: #f0f7ff; /* Header chrome — aliased to core tokens so it follows every theme automatically */ --header-bg: var(--background); --header-fg: var(--foreground); --header-border: var(--border); --header-icon: var(--muted-foreground); --header-icon-hover: var(--muted); /* Focus rings (index relies on Tailwind ring utilities; kept for prototypes). Derived from --ring / --destructive via color-mix so they follow the theme. */ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent); --focus-ring-error: 0 0 0 3px color-mix(in oklab, var(--destructive) 22%, transparent); --focus-ring-offset: 2px; --shadow-toggle: 0 1px 3px rgba(0, 0, 0, 0.2); /* DFP status-dot colours */ --dfp-ok: #99b7bf; --dfp-confirmed: #3d707c; --dfp-matched: #5ea3fc; --dfp-warn: #f19546; /* Spacing scale (4px base) */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; --space-4xl: 48px; --space-5xl: 64px; --space-6xl: 80px; --space-7xl: 96px; --space-8xl: 128px; /* Z-index scale */ --z-base: 1; --z-sticky: 10; --z-dropdown: 20; --z-overlay: 30; --z-modal: 40; --z-topbar: 50; --z-toast: 60; /* Transition tokens */ --duration-fast: .1s; --duration-base: .15s; --duration-moderate: .2s; --duration-slow: .3s; --ease-default: ease; --ease-out: ease-out; --ease-spring: cubic-bezier(.34, 1.56, .64, 1); } /* ===== DARK — index.css `.dark` core + Clipper dark extensions ===== */ .dark, [data-theme="dark"] { /* CORE (index .dark, oklch) */ --background: oklch(0.24 0.02 218.07); --foreground: oklch(1 0 0); --card: oklch(0.33 0.03 211.65); --card-foreground: oklch(1 0 0); --popover: oklch(0.41 0.04 206.76); --popover-foreground: oklch(1 0 0); --primary: oklch(0.97 0.02 218.55); --primary-foreground: oklch(0.25 0.04 215.63); --secondary: oklch(0.27 0.02 215.06); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.27 0.02 215.06); --muted-foreground: oklch(0.86 0.03 213.74); --accent: oklch(0.33 0.03 211.65); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.79 0.12 22.06); --destructive-foreground: oklch(1 0 0); --success: oklch(0.72 0.16 152); --success-foreground: oklch(0.24 0.02 218.07); --warning: oklch(0.82 0.15 80); --warning-foreground: oklch(0.24 0.02 218.07); --border: oklch(0.33 0.03 211.65); --input: oklch(0.33 0.03 211.65); --ring: oklch(0.97 0.02 218.55); --chart-1: oklch(0.8 0.14 226.69); --chart-2: oklch(0.77 0.15 163.22); --chart-3: oklch(0.79 0.15 78.14); --chart-4: oklch(0.6 0.14 153.3); --chart-5: oklch(0.59 0.22 1.12); --sidebar: oklch(0.24 0.02 218.07); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(0.97 0.02 218.55); --sidebar-primary-foreground: oklch(0.25 0.04 215.63); --sidebar-accent: oklch(0.33 0.03 211.65); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.41 0.06 216.95); --sidebar-ring: oklch(0.97 0.02 218.55); /* EXTENSIONS (Clipper dark) */ --info: #92c4fe; --info-bg: rgba(146,196,254,.12); --info-border: rgba(146,196,254,.25); --link: #92c4fe; --destructive-bg: rgba(255,94,89,.12); --destructive-border: rgba(255,94,89,.25); --success-bg: rgba(142,231,181,.12); --success-border: rgba(142,231,181,.25); --warning-bg: rgba(246,187,123,.12); --warning-border: rgba(246,187,123,.25); --teal: #5eead4; --teal-bg: rgba(94,234,212,.12); --teal-border: rgba(94,234,212,.25); --cyan: #67e8f9; --cyan-bg: rgba(103,232,249,.12); --cyan-border: rgba(103,232,249,.25); --indigo: #a5b4fc; --indigo-bg: rgba(165,180,252,.12); --indigo-border: rgba(165,180,252,.25); --pink: #f472b6; --pink-bg: rgba(244,114,182,.12); --pink-border: rgba(244,114,182,.25); --rose: #fb7185; --rose-bg: rgba(251,113,133,.12); --rose-border: rgba(251,113,133,.25); --amber: #fbbf24; --amber-bg: rgba(251,191,36,.12); --amber-border: rgba(251,191,36,.25); --lime: #a3e635; --lime-bg: rgba(163,230,53,.12); --lime-border: rgba(163,230,53,.25); --emerald: #6ee7b7; --emerald-bg: rgba(110,231,183,.12); --emerald-border: rgba(110,231,183,.25); --violet: #a78bfa; --violet-bg: rgba(167,139,250,.12); --violet-border: rgba(167,139,250,.25); --fuchsia: #e879f9; --fuchsia-bg: rgba(232,121,249,.12); --fuchsia-border: rgba(232,121,249,.25); --sky: #7dd3fc; --sky-bg: rgba(125,211,252,.12); --sky-border: rgba(125,211,252,.25); --slate: #94a3b8; --slate-bg: rgba(148,163,184,.12); --slate-border: rgba(148,163,184,.25); --gold: #facc15; --gold-bg: rgba(250,204,21,.12); --gold-border: rgba(250,204,21,.25); --crimson: #fca5a5; --crimson-bg: rgba(252,165,165,.12); --crimson-border: rgba(252,165,165,.25); --sage: #81c784; --sage-bg: rgba(129,199,132,.12); --sage-border: rgba(129,199,132,.25); --purple: #c4b0f0; --purple-bg: rgba(196,176,240,.12); --purple-border: rgba(196,176,240,.25); --orange: #f6bb7b; --orange-bg: rgba(246,187,123,.12); --orange-border: rgba(246,187,123,.25); --blue: #92c4fe; --blue-bg: rgba(146,196,254,.12); --blue-border: rgba(146,196,254,.25); --switcher-off: #4a5c5f; --switcher-thumb: #182225; --accordion-stroke: #2c5156; --accordion-bg: #19292d; --chart-label: #fcfdfd; --chart-text: #aabcbe; --cmd-highlight: rgba(153,183,191,.12); --shadow-toggle: 0 1px 3px rgba(0,0,0,.35); --dfp-ok: #99b7bf; --dfp-confirmed: #66a3b0; --dfp-matched: #7ab8ff; --dfp-warn: #f5a95e; } /* ===== HIGH CONTRAST — Clipper-only mode (index has none; core values derived) ===== */ [data-theme="high-contrast"] { /* CORE (derived from Clipper high-contrast palette) */ --background: #000; --foreground: #fff; --card: #000; --card-foreground: #fff; --popover: #000; --popover-foreground: #fff; --primary: #66d9ef; --primary-foreground: #000; --secondary: #1a1a1a; --secondary-foreground: #fff; --muted: #1a1a1a; --muted-foreground: #e0e0e0; --accent: #111; --accent-foreground: #fff; --destructive: #ff4444; --destructive-foreground: #000; --success: #44ff88; --success-foreground: #000; --warning: #ffbb33; --warning-foreground: #000; --border: #666; --input: #999; --ring: #66d9ef; --chart-1: #66d9ef; --chart-2: #44ff88; --chart-3: #ffbb33; --chart-4: #ff79c6; --chart-5: #a78bfa; --sidebar: #000; --sidebar-foreground: #fff; --sidebar-primary: #66d9ef; --sidebar-primary-foreground: #000; --sidebar-accent: #1a1a1a; --sidebar-accent-foreground: #fff; --sidebar-border: #666; --sidebar-ring: #66d9ef; /* EXTENSIONS (Clipper high-contrast) */ --info: #44aaff; --info-bg: #002244; --info-border: #44aaff; --link: #88ccff; --destructive-bg: #330000; --destructive-border: #ff4444; --success-bg: #003300; --success-border: #44ff88; --warning-bg: #332200; --warning-border: #ffbb33; --teal: #5eead4; --teal-bg: #0a2e2a; --teal-border: #5eead4; --cyan: #67e8f9; --cyan-bg: #0a2a30; --cyan-border: #67e8f9; --indigo: #a5b4fc; --indigo-bg: #1a1a3a; --indigo-border: #a5b4fc; --pink: #f472b6; --pink-bg: #2a0a1a; --pink-border: #f472b6; --rose: #fb7185; --rose-bg: #2a0a0f; --rose-border: #fb7185; --amber: #fbbf24; --amber-bg: #2a2000; --amber-border: #fbbf24; --lime: #a3e635; --lime-bg: #1a2a00; --lime-border: #a3e635; --emerald: #6ee7b7; --emerald-bg: #002a1a; --emerald-border: #6ee7b7; --violet: #a78bfa; --violet-bg: #1a0a2a; --violet-border: #a78bfa; --fuchsia: #e879f9; --fuchsia-bg: #2a0a2a; --fuchsia-border: #e879f9; --sky: #7dd3fc; --sky-bg: #002030; --sky-border: #7dd3fc; --slate: #cbd5e1; --slate-bg: #111; --slate-border: #cbd5e1; --gold: #facc15; --gold-bg: #2a2000; --gold-border: #facc15; --crimson: #fca5a5; --crimson-bg: #2a0a0a; --crimson-border: #fca5a5; --sage: #81c784; --sage-bg: #0a2a0a; --sage-border: #81c784; --purple: #c4b0f0; --purple-bg: #1a0a2a; --purple-border: #c4b0f0; --orange: #f6bb7b; --orange-bg: #2a1a00; --orange-border: #f6bb7b; --blue: #92c4fe; --blue-bg: #001a30; --blue-border: #92c4fe; --switcher-off: #666; --switcher-thumb: #000; --accordion-stroke: #666; --accordion-bg: #1a1a1a; --chart-label: #fff; --chart-text: #ccc; --cmd-highlight: rgba(102,217,239,.15); --shadow-toggle: 0 1px 3px rgba(255,255,255,.2); --dfp-ok: #5eead4; --dfp-confirmed: #66d9ef; --dfp-matched: #7dd3fc; --dfp-warn: #fbbf24; } /* ----------------------------------------------------------------------------- OPTIONAL: Clipper elevation. index.css ships --shadow-sm/md/lg/xl flat (zero-opacity). Overlay components ported from Clipper (dialogs, dropdowns, toasts, popovers) need real shadows. Uncomment to restore the Clipper elevation scale across all themes. ----------------------------------------------------------------------------- :root { --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 30px rgba(0,0,0,.12); --shadow-xl: 0 20px 60px rgba(0,0,0,.15); } .dark, [data-theme="dark"] { --shadow-sm: 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 12px rgba(0,0,0,.3); --shadow-lg: 0 8px 30px rgba(0,0,0,.4); --shadow-xl: 0 20px 60px rgba(0,0,0,.5); } [data-theme="high-contrast"] { --shadow-sm: 0 1px 2px rgba(255,255,255,.1); --shadow-md: 0 4px 12px rgba(255,255,255,.08); --shadow-lg: 0 8px 30px rgba(255,255,255,.06); --shadow-xl: 0 20px 60px rgba(255,255,255,.05); } ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Tailwind v4 mapping (mirrors index.css @theme inline, plus --color-info / --color-link). Ignored by browsers when this file is used as plain CSS, so it is harmless in standalone prototypes and active in a Tailwind v4 build. Badge-palette colours are available directly via var(--teal) … var(--blue). ----------------------------------------------------------------------------- */ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-info: var(--info); --color-link: var(--link); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-sans: var(--font-sans); --font-mono: var(--font-mono); --font-serif: var(--font-serif); --radius-sm: var(--radius-sm); --radius-md: var(--radius-md); --radius-lg: var(--radius-lg); --radius-xl: var(--radius-xl); --shadow-2xs: var(--shadow-2xs); --shadow-xs: var(--shadow-xs); --shadow-sm: var(--shadow-sm); --shadow: var(--shadow); --shadow-md: var(--shadow-md); --shadow-lg: var(--shadow-lg); --shadow-xl: var(--shadow-xl); --shadow-2xl: var(--shadow-2xl); }