/* ========================================================================== Mauqe V2 — Design Tokens Single source of truth for colour, type, space, radius, elevation, motion. Everything downstream references these variables. Never hard-code a value. Themes are applied by setting `data-theme="light|dark"` on . Direction is applied by setting `dir="rtl|ltr"` on . Org branding overrides only --brand-* and is injected inline at render time. ========================================================================== */ :root { /* ---- Neutral ramp (cool grey) ------------------------------------- */ --n-0: #ffffff; --n-25: #fbfcfd; --n-50: #f6f8fa; --n-100: #eef1f5; --n-150: #e7ebf1; --n-200: #dde3ea; --n-300: #c6cfdb; --n-400: #98a4b6; /* --n-450 exists for the same kind of reason --n-550 does, one step down. --border-strong is the edge of every control in the product — the input, the select, the textarea, the search box, the checkbox, the radio, the switch track, the secondary button — and WCAG 2.2 §1.4.11 asks 3:1 of the boundary of a user-interface component. --n-300 measured 1.57:1 on white and --n-400 measures 2.56:1, so neither existing step could carry it; this one is 3.03:1. internal/theme derives exactly this colour for Clear, whose neutral is this ramp, so the themed and unthemed halves of the product now draw the same line. */ --n-450: #8995a8; --n-500: #6d7b8f; /* --n-550 exists for one reason: --n-500 on white is 4.30:1, just under the 4.5:1 AA floor for body-sized text, and --fg-subtle carries captions, helper text and placeholders. Collapsing --fg-subtle into --fg-muted would have met AA by deleting a level of hierarchy; this keeps three distinct text weights (muted 6.69:1, subtle 4.64:1, disabled — decorative only). */ --n-550: #687687; --n-600: #505d70; --n-700: #3b4657; --n-800: #262e3c; --n-900: #161c27; --n-950: #0c1017; /* ---- Brand ramp (indigo). Org branding overrides --brand-500/600. -- */ --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-200: #c7d2fe; --brand-300: #a5b4fc; --brand-400: #818cf8; --brand-500: #6366f1; --brand-600: #4f46e5; --brand-700: #4338ca; --brand-800: #3730a3; --brand-900: #2f2a80; /* ---- Semantic hues ------------------------------------------------- */ --ok-50: #ecfdf3; --ok-100: #d1fadf; --ok-500: #12b76a; --ok-600: #039855; --ok-700: #027a48; --warn-50: #fffaeb; --warn-100:#fef0c7; --warn-500:#f79009; --warn-600:#dc6803; --warn-700:#b54708; --bad-50: #fef3f2; --bad-100: #fee4e2; --bad-500: #f04438; --bad-600: #d92d20; --bad-700: #b42318; --info-50: #eff8ff; --info-100:#d1e9ff; --info-500:#2e90fa; --info-600:#1570ef; --info-700:#175cd3; /* Accent hues used by charts, board columns and category chips — the workspace's own ramp, for pages no app theme dresses. internal/theme replaces all ten inside an app. The order is NOT what the comment here used to claim. Measured, adjacent pairs run from 1.04:1 (--acc-4 beside --acc-5) to 2.08:1, and --acc-3, --acc-9 and --acc-10 sit at 2.05–2.35:1 against a white card, under the 3:1 WCAG asks of a graphical object. internal/theme's derived ramp now clears 1.31:1 adjacent and 3.13:1 against the card in all eight presets; bringing these ten up to that needs new colours, not a re-sort, and these ten are also the identity of every existing board column and chip — so it is a deliberate design decision rather than a token edit. Left as it is, and recorded here so the next person measures instead of trusting the comment. */ --acc-1: #6366f1; --acc-2: #12b76a; --acc-3: #f79009; --acc-4: #2e90fa; --acc-5: #ee46bc; --acc-6: #06aed4; --acc-7: #f04438; --acc-8: #7a5af8; --acc-9: #66c61c; --acc-10:#eaaa08; /* ---- Typography ---------------------------------------------------- */ --font-sans: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* The face headings and stat figures are set in. Identical to the body face until a theme says otherwise, which is how `font: serif` can give Paper serif headings, and `font: mono-accent` give Steel monospaced figures, without either of them naming a component. A theme that changes it names an Arabic face inside the same stack, because a browser falls back per character and a Latin-only serif renders Arabic in whatever it likes. */ --font-display: var(--font-sans); /* Type scale — 1.200 minor third, 14px base. Sized for dense business UI. */ --t-2xs: 0.6875rem; /* 11px micro labels, table meta */ --t-xs: 0.75rem; /* 12px captions, helper text */ --t-sm: 0.8125rem; /* 13px secondary body, table cells */ --t-md: 0.875rem; /* 14px BASE body / controls */ --t-lg: 1rem; /* 16px emphasised body, card titles */ --t-xl: 1.125rem; /* 18px section headings */ --t-2xl: 1.375rem; /* 22px page titles */ --t-3xl: 1.75rem; /* 28px hero / empty-state titles */ --t-4xl: 2.25rem; /* 36px marketing */ --lh-tight: 1.25; --lh-snug: 1.4; --lh-base: 1.55; --lh-loose: 1.7; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --tracking-tight: -0.011em; --tracking-wide: 0.02em; /* ---- Space scale (4px base) ---------------------------------------- */ --s-0: 0; --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.25rem; /* 20 */ --s-6: 1.5rem; /* 24 */ --s-8: 2rem; /* 32 */ --s-10: 2.5rem; /* 40 */ --s-12: 3rem; /* 48 */ --s-16: 4rem; /* 64 */ --s-20: 5rem; /* 80 */ /* ---- Boundaries ----------------------------------------------------- */ /* One token for the weight of every container edge, so a theme's `contrast: high` can thicken all of them at once. WCAG asks 3:1 of a UI boundary; a heavier line is how you reach it without drawing a black box around everything. */ --border-w: 1px; /* Text on a brand-coloured fill. Deliberately not --fg-onbrand: the status fills (--ok-solid, --bad-solid) are fixed colours that always take white, while --brand-solid may be a colour someone pasted out of their logo. A theme picks whichever of light and dark can actually be read on it. */ --brand-on: var(--fg-onbrand); /* What sits behind the page — a wash, a grid, or nothing. Separate from --bg-app because that one has to stay a *colour*: the builder canvas and the published header both compose with it, and color-mix() on a gradient is not a value. */ --bg-app-image: none; /* ---- Radius --------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-full: 999px; /* The corner of a thing you operate that is one line tall: the button, the input, the select, the search box, the segmented control. It is --r-md everywhere except under a theme whose radius axis is `full`, which is the only place the two can differ and the reason this token exists. Without it "fully round controls" reached --r-md, and --r-md is worn by the alert, the textarea, the app tile, `pre`, .nav-item, .board-card and .cmdk-item as well — so choosing Coral rendered a two-line alert as a 68px stadium and a four-row textarea as a 112px one. A theme is not allowed to name a component (see internal/theme), so the distinction has to live in the token vocabulary or it cannot be made at all. The textarea stays on --r-md on purpose: it is a control, and it is a box that grows, and height is exactly what the distinction is about. */ --r-control: 8px; /* ---- Layout metrics ------------------------------------------------- */ --topbar-h: 56px; --sidebar-w: 248px; --sidebar-w-sm: 64px; --inspector-w: 340px; --palette-w: 264px; --content-max: 1180px; --prose-max: 68ch; --tap-min: 44px; /* minimum touch target */ /* ---- Motion --------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-1: 90ms; --dur-2: 150ms; --dur-3: 240ms; --dur-4: 380ms; --z-base: 0; --z-sticky: 100; --z-drawer: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; } /* ========================================================================== Light theme (default) ========================================================================== */ :root, [data-theme="light"] { color-scheme: light; --bg-app: var(--n-50); /* page background behind everything */ --bg-surface: var(--n-0); /* cards, panels, tables */ --bg-raised: var(--n-0); /* popovers, modals — sits above surface */ --bg-sunken: var(--n-100); /* wells, code blocks, canvas */ --bg-subtle: var(--n-50); /* zebra rows, hovered list items */ --bg-hover: var(--n-100); --bg-active: var(--n-150); --bg-inverse: var(--n-900); --fg-strong: var(--n-900); /* headings */ --fg-default: var(--n-800); /* body */ --fg-muted: var(--n-600); /* secondary */ --fg-subtle: var(--n-500); /* captions, placeholders */ --fg-disabled: var(--n-400); --fg-inverse: var(--n-0); --fg-onbrand: #ffffff; --border: var(--n-200); /* Not --n-300: a control's edge is a UI boundary and 1.57:1 is not one. See --n-450. --border and --border-subtle divide containers, which is a different job with a different floor, and they are unchanged. */ --border-strong: var(--n-450); --border-subtle: var(--n-150); --brand-fg: var(--brand-700); --brand-bg: var(--brand-50); --brand-bg-2: var(--brand-100); --brand-solid: var(--brand-600); --brand-solid-h: var(--brand-700); --brand-ring: color-mix(in srgb, var(--brand-500) 40%, transparent); --ok-fg: var(--ok-700); --ok-bg: var(--ok-50); --ok-solid: var(--ok-600); --ok-border: #a6f4c5; --warn-fg: var(--warn-700); --warn-bg: var(--warn-50); --warn-solid: var(--warn-600); --warn-border: #fedf89; --bad-fg: var(--bad-700); --bad-bg: var(--bad-50); --bad-solid: var(--bad-600); --bad-border: #fecdca; --info-fg: var(--info-700); --info-bg: var(--info-50); --info-solid: var(--info-600); --info-border: #b2ddff; --sh-1: 0 1px 2px rgba(16, 24, 40, 0.05); --sh-2: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06); --sh-3: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06); --sh-4: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); --sh-5: 0 20px 24px -4px rgba(16, 24, 40, 0.10), 0 8px 8px -4px rgba(16, 24, 40, 0.04); --sh-focus: 0 0 0 3px var(--brand-ring); --canvas-grid: rgba(16, 24, 40, 0.055); --overlay: rgba(12, 16, 23, 0.45); --skeleton: linear-gradient(90deg, var(--n-100) 25%, var(--n-150) 37%, var(--n-100) 63%); } /* ========================================================================== Dark theme — not an inversion. Surfaces get lighter as they rise, borders carry the structure, and brand/semantic hues are lifted for AA contrast. ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --bg-app: #0b0f16; --bg-surface: #131924; --bg-raised: #1a2130; --bg-sunken: #090d13; --bg-subtle: #171e2b; --bg-hover: #1e2635; --bg-active: #263041; --bg-inverse: var(--n-100); --fg-strong: #f2f5f9; --fg-default: #dde3ec; --fg-muted: #9fadc0; --fg-subtle: #7a8799; --fg-disabled: #55616f; --fg-inverse: var(--n-900); --fg-onbrand: #ffffff; --border: #262f3f; /* 3.10:1 on --bg-surface. #364154 was 1.71:1 — see the light half. */ --border-strong: #5b6879; --border-subtle: #1d2534; --brand-fg: #a5b4fc; --brand-bg: rgba(99, 102, 241, 0.14); --brand-bg-2: rgba(99, 102, 241, 0.22); --brand-solid: var(--brand-500); --brand-solid-h: var(--brand-400); --brand-ring: color-mix(in srgb, var(--brand-400) 45%, transparent); --ok-fg: #6ce9a6; --ok-bg: rgba(18, 183, 106, 0.14); --ok-solid: var(--ok-500); --ok-border: rgba(18,183,106,0.32); --warn-fg: #fec84b; --warn-bg: rgba(247, 144, 9, 0.14); --warn-solid: var(--warn-500); --warn-border: rgba(247,144,9,0.32); --bad-fg: #fda29b; --bad-bg: rgba(240, 68, 56, 0.14); --bad-solid: var(--bad-500); --bad-border: rgba(240,68,56,0.32); --info-fg: #84caff; --info-bg: rgba(46, 144, 250, 0.14); --info-solid: var(--info-500); --info-border: rgba(46,144,250,0.32); --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40); --sh-2: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.30); --sh-3: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.35); --sh-4: 0 12px 16px -4px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.30); --sh-5: 0 20px 24px -4px rgba(0, 0, 0, 0.60), 0 8px 8px -4px rgba(0, 0, 0, 0.35); --sh-focus: 0 0 0 3px var(--brand-ring); --canvas-grid: rgba(255, 255, 255, 0.05); --overlay: rgba(0, 0, 0, 0.62); --skeleton: linear-gradient(90deg, #1a2130 25%, #232c3d 37%, #1a2130 63%); } /* Follow the OS when no explicit choice has been stored. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg-app: #0b0f16; --bg-surface: #131924; --bg-raised: #1a2130; --bg-sunken: #090d13; --bg-subtle: #171e2b; --bg-hover: #1e2635; --bg-active: #263041; --bg-inverse: var(--n-100); --fg-strong: #f2f5f9; --fg-default: #dde3ec; --fg-muted: #9fadc0; --fg-subtle: #7a8799; --fg-disabled: #55616f; --fg-inverse: var(--n-900); --border: #262f3f; --border-strong: #5b6879; --border-subtle: #1d2534; --brand-fg: #a5b4fc; --brand-bg: rgba(99,102,241,0.14); --brand-bg-2: rgba(99,102,241,0.22); --brand-solid: var(--brand-500); --brand-solid-h: var(--brand-400); --ok-fg:#6ce9a6; --ok-bg:rgba(18,183,106,0.14); --ok-border:rgba(18,183,106,0.32); --warn-fg:#fec84b;--warn-bg:rgba(247,144,9,0.14); --warn-border:rgba(247,144,9,0.32); --bad-fg:#fda29b; --bad-bg:rgba(240,68,56,0.14); --bad-border:rgba(240,68,56,0.32); --info-fg:#84caff;--info-bg:rgba(46,144,250,0.14);--info-border:rgba(46,144,250,0.32); --sh-1: 0 1px 2px rgba(0,0,0,0.40); --sh-2: 0 1px 3px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.30); --sh-3: 0 4px 8px -2px rgba(0,0,0,0.55), 0 2px 4px -2px rgba(0,0,0,0.35); --sh-4: 0 12px 16px -4px rgba(0,0,0,0.55), 0 4px 6px -2px rgba(0,0,0,0.30); --sh-5: 0 20px 24px -4px rgba(0,0,0,0.60), 0 8px 8px -4px rgba(0,0,0,0.35); --canvas-grid: rgba(255,255,255,0.05); --overlay: rgba(0,0,0,0.62); --skeleton: linear-gradient(90deg,#1a2130 25%,#232c3d 37%,#1a2130 63%); } } /* ========================================================================== Direction-aware logical helpers. All layout CSS uses logical properties (inline-start/end) so RTL needs no mirrored stylesheet. --dir-flip is for transforms that must mirror. ========================================================================== */ :root { --dir-flip: 1; } [dir="rtl"] { --dir-flip: -1; } /* Density: compact mode tightens the whole app for data-heavy screens. */ [data-density="compact"] { --row-h: 34px; --ctl-h: 32px; --ctl-h-sm: 26px; --pad-card: var(--s-4); } :root, [data-density="cozy"] { --row-h: 44px; --ctl-h: 38px; --ctl-h-sm: 30px; --pad-card: var(--s-5); }