/* ──────────────────────────────────────────────────────────────────────────── DESIGN TOKEN PRIMITIVES — CBAR Design System ──────────────────────────────────────────────────────────────────────────── Generated from the CBAR Design System Figma file (4OGDh57IOKbrIz0NqpoQvB, "Design System" page) via the Figma REST API. This file is the single source of truth for every raw design value in the kit: colour ramps, spacing, radii, type, elevation, motion. It is MACHINE-OWNED. The `figma-sync` skill rewrites it wholesale, so: • Do not add component-specific rules here — only `--ui-*` primitives. • Do not reference these primitives from component code. Components use the semantic layer in theme.css (`bg-background`, `text-primary`, …). That indirection is what lets a Figma re-sync restyle the whole kit without touching a single .tsx file. Colours are oklch: perceptually uniform, so a ramp built by walking the lightness channel stays visually even, and hue rotations do not shift apparent brightness. Every value below was converted from the sRGB the API returned and verified against the hex Figma prints under its own swatches. ──────────────────────────────────────────────────────────────────────────── */ :root { /* ── Neutral ───────────────────────────────────────────────────────────── Pure grey — CBAR carries no hue in this ramp (chroma is exactly 0). It defines the endpoints 0 and 1000 explicitly, so both ship. */ --ui-color-neutral-0: oklch(1 0 0); /* #FFFFFF */ --ui-color-neutral-50: oklch(0.982 0 0); /* #F9F9F9 */ --ui-color-neutral-100: oklch(0.955 0 0); /* #F0F0F0 */ --ui-color-neutral-200: oklch(0.922 0 0); /* #E5E5E5 */ --ui-color-neutral-300: oklch(0.87 0 0); /* #D4D4D4 */ --ui-color-neutral-400: oklch(0.715 0 0); /* #A3A3A3 */ --ui-color-neutral-500: oklch(0.573 0 0); /* #787878 */ --ui-color-neutral-600: oklch(0.398 0 0); /* #474747 */ --ui-color-neutral-700: oklch(0.321 0 0); /* #333333 */ --ui-color-neutral-800: oklch(0.252 0 0); /* #222222 */ --ui-color-neutral-900: oklch(0.205 0 0); /* #171717 */ --ui-color-neutral-950: oklch(0.145 0 0); /* interpolyasiya — CBAR 900 və 1000 arasında */ --ui-color-neutral-1000: oklch(0 0 0); /* #000000 */ /* ── Brand (CBAR "Primary") ────────────────────────────────────────────── The institutional navy. Note the ramp is not a smooth lightness walk: 50–400 are tints of a lighter blue, then 500 drops sharply to the brand navy #004976. That discontinuity is CBAR's, reproduced as-is. */ --ui-color-brand-50: oklch(0.968 0.012 231.7); /* #EDF6FB */ --ui-color-brand-100: oklch(0.925 0.025 229.1); /* #D6EAF4 */ --ui-color-brand-200: oklch(0.851 0.05 229.7); /* #ADD5E9 */ --ui-color-brand-300: oklch(0.762 0.075 230.7); /* #7FBBD9 */ --ui-color-brand-400: oklch(0.668 0.097 231.9); /* #4F9FC6 */ --ui-color-brand-500: oklch(0.392 0.098 244.9); /* #004976 */ --ui-color-brand-600: oklch(0.356 0.091 245.6); /* #003F68 */ --ui-color-brand-700: oklch(0.319 0.083 246.5); /* #00355A */ --ui-color-brand-800: oklch(0.278 0.073 247.3); /* #002A4A */ --ui-color-brand-900: oklch(0.233 0.062 247.5); /* #001F39 */ --ui-color-brand-950: oklch(0.165 0.046 247.5); /* interpolyasiya — CBAR 900-də bitir */ /* ── Secondary (CBAR "Secondary") ──────────────────────────────────────── Turquoise. Reachable through the `colorPalette` prop. */ --ui-color-secondary-50: oklch(0.972 0.018 184.3); /* #E9FAF7 */ --ui-color-secondary-100: oklch(0.937 0.038 182.4); /* #CFF3EC */ --ui-color-secondary-200: oklch(0.883 0.069 180); /* #A6E8DA */ --ui-color-secondary-300: oklch(0.836 0.096 179.7); /* #7DDECB */ --ui-color-secondary-400: oklch(0.793 0.112 180.7); /* #5AD3BF */ --ui-color-secondary-500: oklch(0.756 0.112 181.9); /* #4BC7B5 */ --ui-color-secondary-600: oklch(0.71 0.106 182.5); /* #43B7A7 */ --ui-color-secondary-700: oklch(0.555 0.097 186.5); /* #00857C */ --ui-color-secondary-800: oklch(0.374 0.066 184.4); /* #004C45 */ --ui-color-secondary-900: oklch(0.352 0.046 186.7); /* #1A433F */ /* ── Tertiary (CBAR "brand/tertiary") ──────────────────────────────────── Cyan. Named for the Figma *variable* (`brand/tertiary/*`), which is the authoritative name. CBAR's published *style* for the same ramp is called "Third", and the kit used to follow it — the earlier extraction went through the REST API, where `/variables/local` is Enterprise-only (403), so style names were all it could see. The `--ui-color-third-*` aliases below keep that spelling working. */ --ui-color-tertiary-50: oklch(0.955 0.023 220.7); /* #E0F4FB */ --ui-color-tertiary-100: oklch(0.884 0.054 225); /* #B3E1F4 */ --ui-color-tertiary-200: oklch(0.806 0.086 224.3); /* #80CCE9 */ --ui-color-tertiary-300: oklch(0.792 0.114 226.2); /* #5FCAF3 */ --ui-color-tertiary-400: oklch(0.683 0.126 229.2); /* #26A7D7 */ --ui-color-tertiary-500: oklch(0.575 0.127 237.5); /* #0082BA */ --ui-color-tertiary-600: oklch(0.59 0.116 230.2); /* #0889B5 */ --ui-color-tertiary-700: oklch(0.485 0.095 230); /* #06688A */ --ui-color-tertiary-800: oklch(0.396 0.07 219.1); /* #044F60 */ --ui-color-tertiary-900: oklch(0.289 0.049 214.4); /* #02313A */ /* DEPRECATED — the pre-rename spelling of the ramp above. Kept so a kit published before the rename keeps compiling; slated for removal in the next major. Nothing inside this kit references these. */ --ui-color-third-50: var(--ui-color-tertiary-50); --ui-color-third-100: var(--ui-color-tertiary-100); --ui-color-third-200: var(--ui-color-tertiary-200); --ui-color-third-300: var(--ui-color-tertiary-300); --ui-color-third-400: var(--ui-color-tertiary-400); --ui-color-third-500: var(--ui-color-tertiary-500); --ui-color-third-600: var(--ui-color-tertiary-600); --ui-color-third-700: var(--ui-color-tertiary-700); --ui-color-third-800: var(--ui-color-tertiary-800); --ui-color-third-900: var(--ui-color-tertiary-900); /* ── Red / Green / Yellow ──────────────────────────────────────────────── Shipped under CBAR's own names because `colorPalette` exposes them that way, then aliased below to the kit's status names. */ --ui-color-red-50: oklch(0.971 0.013 17.4); /* #FEF2F2 */ --ui-color-red-100: oklch(0.936 0.031 17.7); /* #FEE2E2 */ --ui-color-red-200: oklch(0.885 0.059 18.3); /* #FECACA */ --ui-color-red-300: oklch(0.808 0.103 19.6); /* #FCA5A5 */ --ui-color-red-400: oklch(0.711 0.166 22.2); /* #F87171 */ --ui-color-red-500: oklch(0.637 0.208 25.3); /* #EF4444 */ --ui-color-red-600: oklch(0.6 0.246 29.2); /* #F00000 */ --ui-color-red-700: oklch(0.442 0.163 27.1); /* #991919 */ --ui-color-red-800: oklch(0.291 0.095 25.3); /* #511111 */ --ui-color-red-900: oklch(0.216 0.059 23.4); /* #300C0C */ --ui-color-green-50: oklch(0.982 0.018 155.8); /* #F0FDF4 */ --ui-color-green-100: oklch(0.962 0.043 156.7); /* #DCFCE7 */ --ui-color-green-200: oklch(0.925 0.081 156); /* #BBF7D0 */ --ui-color-green-300: oklch(0.871 0.136 154.4); /* #86EFAC */ --ui-color-green-400: oklch(0.8 0.182 151.7); /* #4ADE80 */ --ui-color-green-500: oklch(0.723 0.192 149.6); /* #22C55E */ --ui-color-green-600: oklch(0.627 0.17 149.2); /* #16A34A */ --ui-color-green-700: oklch(0.458 0.117 150.3); /* #116932 */ --ui-color-green-800: oklch(0.364 0.082 152.6); /* #124A28 */ --ui-color-green-900: oklch(0.242 0.055 154.1); /* #042713 */ /* CBAR's own amber, from `Color/Foundation` → `yellow/*`. It is NOT a Tailwind-style yellow: the whole ramp is softer and browner, and it is not a monotonic lightness walk — 500 (#F3C67F) is *lighter* and less saturated than 400 (#F2C952), because CBAR uses 500 as a warning *surface* rather than as the middle of a scale. That discontinuity is reproduced as-is. The kit shipped a Tailwind yellow here until now. The Figma file carries two yellow collections — this one, which every warning semantic aliases to, and a stale `Yellow` collection nothing references — and the earlier extraction picked the wrong one. (Careful editing this: a `star slash` sequence anywhere in here closes the comment early and silently eats the first declaration below it.) */ --ui-color-yellow-50: oklch(0.98 0.018 86.1); /* #FEF8EB */ --ui-color-yellow-100: oklch(0.973 0.069 103.2); /* #FEF9C3 */ --ui-color-yellow-200: oklch(0.917 0.095 93.3); /* #F9E39A */ --ui-color-yellow-300: oklch(0.888 0.13 94.9); /* #F5D96E */ --ui-color-yellow-400: oklch(0.85 0.142 89.8); /* #F2C952 */ --ui-color-yellow-500: oklch(0.851 0.103 78.1); /* #F3C67F */ --ui-color-yellow-600: oklch(0.762 0.114 81.5); /* #D6AA57 */ --ui-color-yellow-700: oklch(0.725 0.136 83.1); /* #CF9D2B */ --ui-color-yellow-800: oklch(0.516 0.087 72.9); /* #865F28 */ --ui-color-yellow-900: oklch(0.389 0.068 75); /* #5A3F15 */ /* The two roles CBAR paints every warning surface and warning label with. They were off-ramp one-offs while the ramp above was a Tailwind yellow; now that it is CBAR's own, they are exactly steps 500 and 800 and are kept as aliases — theme.css reads them by role, and the name says which of the two a component means. */ --ui-color-yellow-surface: var(--ui-color-yellow-500); /* #F3C67F */ --ui-color-yellow-ink: var(--ui-color-yellow-800); /* #865F28 */ /* ── Status aliases ────────────────────────────────────────────────────── theme.css maps semantic roles onto these names. They are aliases, not copies, so a re-sync moves the status colours with their source ramp. */ --ui-color-danger-100: var(--ui-color-red-100); --ui-color-danger-300: var(--ui-color-red-300); --ui-color-danger-500: var(--ui-color-red-500); --ui-color-danger-700: var(--ui-color-red-700); --ui-color-danger-900: var(--ui-color-red-900); --ui-color-success-100: var(--ui-color-green-100); --ui-color-success-300: var(--ui-color-green-300); --ui-color-success-500: var(--ui-color-green-500); --ui-color-success-700: var(--ui-color-green-700); --ui-color-success-900: var(--ui-color-green-900); --ui-color-warning-100: var(--ui-color-yellow-100); --ui-color-warning-300: var(--ui-color-yellow-300); --ui-color-warning-500: var(--ui-color-yellow-500); --ui-color-warning-700: var(--ui-color-yellow-700); --ui-color-warning-900: var(--ui-color-yellow-900); /* ── Data visualisation ────────────────────────────────────────────────── DERIVED, not sourced: CBAR's file defines no chart palette. These are the five steps from CBAR's own ramps whose lightness sits closest together (0.64–0.72) while their hues stay far apart, so no series reads louder than another. Replace them if CBAR publishes a chart palette later. */ --ui-color-chart-1: var(--ui-color-brand-400); --ui-color-chart-2: var(--ui-color-secondary-600); --ui-color-chart-3: var(--ui-color-green-500); --ui-color-chart-4: var(--ui-color-yellow-600); --ui-color-chart-5: var(--ui-color-red-500); /* ── Radius ────────────────────────────────────────────────────────────── CBAR's ladder is not a uniform progression (6 → 8 → 12 → 16, i.e. +2 then +4 then +4), so these are explicit values rather than the calc() chain the kit used to derive from a single base. --ui-radius stays as the "one knob" for anything that wants the default corner. */ --ui-radius-none: 0; --ui-radius-2xs: 0.125rem; /* 2px */ --ui-radius-xs: 0.25rem; /* 4px — buttons, inputs, badges */ --ui-radius-sm: 0.375rem; /* 6px */ --ui-radius-md: 0.5rem; /* 8px — avatars, icon buttons */ --ui-radius-lg: 0.75rem; /* 12px */ --ui-radius-xl: 1rem; /* 16px */ --ui-radius-2xl: 1.25rem; /* 20px */ --ui-radius-3xl: 1.5rem; /* 24px */ --ui-radius-4xl: 2rem; /* 32px */ --ui-radius-full: 9999px; /* CBAR "pill" (999px) */ --ui-radius: var(--ui-radius-lg); /* ── Spacing ───────────────────────────────────────────────────────────── CBAR's scale is step × 4px across all 35 rungs (0 → 384px), which is exactly the base the kit already used. Unchanged. */ --ui-space-base: 0.25rem; /* ── Typography ────────────────────────────────────────────────────────── CBAR sets everything in DM Sans (400 / 500 / 600). The kit ships no font files — load the face in the consuming app (Google Fonts or self-hosted) and this stack picks it up; the system fallbacks keep text readable until it lands. CBAR defines no monospace face, so the kit's stack stands. */ --ui-font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ui-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* ── Elevation ─────────────────────────────────────────────────────────── UNMAPPED: CBAR's file defines no elevation scale — the only shadow effect anywhere in it is a 1px inner shadow used as a border. The kit's own two-layer shadows stand (tight contact shadow + soft ambient; a single blurred shadow reads as a grey smudge). Retinted onto CBAR's neutral. */ --ui-shadow-xs: 0 1px 2px 0 oklch(0.145 0 0 / 0.05); --ui-shadow-sm: 0 1px 2px -1px oklch(0.145 0 0 / 0.1), 0 1px 3px 0 oklch(0.145 0 0 / 0.1); --ui-shadow-md: 0 2px 4px -2px oklch(0.145 0 0 / 0.1), 0 4px 6px -1px oklch(0.145 0 0 / 0.1); --ui-shadow-lg: 0 4px 6px -4px oklch(0.145 0 0 / 0.1), 0 10px 15px -3px oklch(0.145 0 0 / 0.1); --ui-shadow-xl: 0 8px 10px -6px oklch(0.145 0 0 / 0.1), 0 20px 25px -5px oklch(0.145 0 0 / 0.1); /* ── Motion ────────────────────────────────────────────────────────────── UNMAPPED: Figma stores easing only on prototype transitions, and CBAR's file has none. The kit's values stand — durations short enough to feel instant, with an asymmetric standard ease so movement starts fast and settles gently. */ --ui-duration-fast: 120ms; --ui-duration-base: 180ms; --ui-duration-slow: 280ms; --ui-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ui-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* ── Stacking ──────────────────────────────────────────────────────────── UNMAPPED: not a Figma concept. Named layers stop overlay z-index from becoming a guessing game. */ --ui-z-dropdown: 1000; --ui-z-sticky: 1100; --ui-z-overlay: 1200; --ui-z-modal: 1300; --ui-z-popover: 1400; --ui-z-toast: 1500; --ui-z-tooltip: 1600; }