/* Onyx design-token layer. Keyed by [data-theme] on the root element. Token names map 1:1 to the colour palette in state/theme.rs. The Night/Day toggle UI is not wired yet; this layer only defines tokens. */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/JetBrainsMono-Medium.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/JetBrainsMono-Bold.woff2") format("woff2"); } /* `:root` carries the Night palette as the default, so an unset or unknown [data-theme] value still resolves every token instead of rendering unstyled. */ :root, [data-theme="night"] { --color-bg: #0e1014; --color-panel: #15181f; --color-panel2: #1a1d25; --color-border: #262a33; --color-border-soft: #1f222a; --color-text: #e6e8ed; --color-text-dim: #9aa0ab; --color-text-mute: #5a5f6a; --color-brand: #10a37f; --color-brand-soft: rgba(16, 163, 127, 0.16); --color-accent: #7fc6ff; --color-accent-bg: rgba(127, 198, 255, 0.12); --color-sel-bg: rgba(127, 198, 255, 0.14); --color-danger: #ff6a5b; --color-warn: #e0a060; --color-ok: #2dd070; --color-purple: #8a8fff; --color-card-bg: #15181f; --color-card-border: #262a33; --color-rail: #0a0c10; --color-foot: #0a0c10; --color-sidebar: #0a0c10; /* canonical name for the rail/foot chrome surface */ /* Additional base tokens consumed by the component primitives. */ --color-brand-border: rgba(16, 163, 127, 0.33); --color-ok-soft: rgba(45, 208, 112, 0.10); --color-ok-border: rgba(45, 208, 112, 0.33); --color-hover-bg: rgba(255, 255, 255, 0.04); --color-code-bg: rgba(255, 255, 255, 0.07); /* Translation status — per-locale state colours. */ --color-status-approved: #2dd070; --color-status-fuzzy: #e0a060; --color-status-review: #8a8fff; --color-status-missing: #7a7a7a; --color-status-error: #ff6a5b; /* Status pill soft fill / border — the colour at ~13% / ~33% alpha. */ --color-status-approved-soft: rgba(45, 208, 112, 0.13); --color-status-approved-border: rgba(45, 208, 112, 0.33); --color-status-fuzzy-soft: rgba(224, 160, 96, 0.13); --color-status-fuzzy-border: rgba(224, 160, 96, 0.33); --color-status-review-soft: rgba(138, 143, 255, 0.13); --color-status-review-border: rgba(138, 143, 255, 0.33); --color-status-missing-soft: rgba(122, 122, 122, 0.13); --color-status-missing-border: rgba(122, 122, 122, 0.33); --color-status-error-soft: rgba(255, 106, 91, 0.13); --color-status-error-border: rgba(255, 106, 91, 0.33); /* ICU placeholder chips — argument / hash / branch families. Hash chip uses vivid amber in night mode for contrast against dark panel. */ --color-chip-arg: #2dd4a8; --color-chip-arg-bg: rgba(16, 163, 127, 0.18); --color-chip-arg-border: rgba(16, 163, 127, 0.45); --color-chip-hash: #f59e0b; --color-chip-hash-bg: rgba(245, 158, 11, 0.16); --color-chip-hash-border: rgba(245, 158, 11, 0.42); --color-chip-branch: #c08cff; --color-chip-branch-bg: rgba(192, 140, 255, 0.16); --color-chip-branch-border: rgba(192, 140, 255, 0.42); /* Drop-zone background — subtle brand tint for drag-over states. */ --color-drop-bg: rgba(16, 163, 127, 0.06); /* Pinned-card directional shadows (cast while sticky card is stuck). */ --shadow-pinned-down: 0 9px 12px -7px rgba(0, 0, 0, 0.70); --shadow-pinned-up: 0 -9px 12px -7px rgba(0, 0, 0, 0.70); /* Omnibox dropdown elevation. */ --shadow-dropdown: 0 18px 50px rgba(40, 35, 25, 0.22); /* Interaction-state tints. Layered over a control's own background via an inset box-shadow (see the global rules below) so the same tokens read correctly on transparent, solid and translucent fills. */ --om-hover: rgba(255, 255, 255, 0.10); --om-press: rgba(0, 0, 0, 0.30); --om-focus: var(--color-brand); --om-focus-soft: var(--color-brand-soft); --font-sans: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } [data-theme="day"] { --color-bg: #fbfaf6; --color-panel: #fffefb; --color-panel2: #f7f5ef; --color-border: #e7e3da; --color-border-soft: #efece4; --color-text: #221f1a; --color-text-dim: #5a5750; --color-text-mute: #9a9588; --color-brand: #10a37f; --color-brand-soft: rgba(16, 163, 127, 0.10); --color-accent: #0e63d8; --color-accent-bg: rgba(14, 99, 216, 0.08); --color-sel-bg: rgba(14, 99, 216, 0.08); --color-danger: #c1392b; --color-warn: #b87333; --color-ok: #1f9d55; --color-purple: #5a5fc8; --color-card-bg: #fffefb; --color-card-border: #ebe7df; --color-rail: #f0f1f4; --color-foot: #f0f1f4; --color-sidebar: #f0f1f4; /* canonical name for the rail/foot chrome surface */ /* Additional base tokens consumed by the component primitives. */ --color-brand-border: rgba(16, 163, 127, 0.33); --color-ok-soft: rgba(31, 157, 85, 0.12); --color-ok-border: rgba(31, 157, 85, 0.33); --color-hover-bg: rgba(0, 0, 0, 0.03); --color-code-bg: rgba(0, 0, 0, 0.06); /* Translation status — per-locale state colours. */ --color-status-approved: #1f9d55; --color-status-fuzzy: #b87333; --color-status-review: #5a5fc8; --color-status-missing: #9a9a9a; --color-status-error: #c1392b; /* Status pill soft fill / border — the colour at ~13% / ~33% alpha. */ --color-status-approved-soft: rgba(31, 157, 85, 0.13); --color-status-approved-border: rgba(31, 157, 85, 0.33); --color-status-fuzzy-soft: rgba(184, 115, 51, 0.13); --color-status-fuzzy-border: rgba(184, 115, 51, 0.33); --color-status-review-soft: rgba(90, 95, 200, 0.13); --color-status-review-border: rgba(90, 95, 200, 0.33); --color-status-missing-soft: rgba(154, 154, 154, 0.13); --color-status-missing-border: rgba(154, 154, 154, 0.33); --color-status-error-soft: rgba(193, 57, 43, 0.13); --color-status-error-border: rgba(193, 57, 43, 0.33); /* ICU placeholder chips — argument / hash / branch families. */ --color-chip-arg: #0d8a6a; --color-chip-arg-bg: rgba(16, 163, 127, 0.12); --color-chip-arg-border: rgba(16, 163, 127, 0.32); --color-chip-hash: #b87333; --color-chip-hash-bg: rgba(184, 115, 51, 0.14); --color-chip-hash-border: rgba(184, 115, 51, 0.32); --color-chip-branch: #7c3aed; --color-chip-branch-bg: rgba(124, 58, 237, 0.10); --color-chip-branch-border: rgba(124, 58, 237, 0.32); /* Drop-zone background. */ --color-drop-bg: rgba(16, 163, 127, 0.06); /* Pinned-card directional shadows — lighter on the warm day palette. */ --shadow-pinned-down: 0 9px 12px -7px rgba(40, 33, 20, 0.22); --shadow-pinned-up: 0 -9px 12px -7px rgba(40, 33, 20, 0.22); /* Omnibox dropdown elevation (same value as Night for now). */ --shadow-dropdown: 0 18px 50px rgba(40, 35, 25, 0.22); --om-hover: rgba(0, 0, 0, 0.06); --om-press: rgba(0, 0, 0, 0.12); --om-focus: var(--color-brand); --om-focus-soft: var(--color-brand-soft); --font-sans: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } /* Theme-independent tokens: type scale, spacing, radius, and the density-driven row height carry no per-theme variant. The density axis flips --row-h only. */ :root { /* ── Type scale — 11 steps from the design Typography section ─────────── Sizes match the design TYPE array exactly; "mono" = size, not font-family. Use text-{name} utilities; pair with leading-editor for editor surfaces. */ --text-micro: 9.5px; /* micro badges */ --text-badge: 10px; /* badges */ --text-caption: 10.5px; /* uppercase labels · mono captions */ --text-label: 11px; /* card labels */ --text-sub: 11.5px; /* row subtext */ --text-code: 12px; /* mono keys / code display */ --text-preview: 12.5px; /* search · previews */ --text-body: 13px; /* base body */ --text-editor: 14px; /* editor text · titles */ --text-wordmark: 17px; /* brand wordmark */ --text-kpi: 28px; /* KPI value */ /* ── Leading — design-paired line-heights ─────────────────────────────── Only editor gets a custom token; all other UI text uses leading-normal (Tailwind default 1.5) or explicit leading-* overrides as needed. */ --leading-editor: 1.7; /* contenteditable editor areas · branch slices */ /* ── Spacing — 2px rhythm (design SPACE array, t-shirt names) ────────── Sits alongside Tailwind's numeric defaults: p-md, gap-lg, px-3xl, etc. Odd optical values in the UI (5/7/9/11/13px) snap to ±1px of a step. */ --space-2xs: 2px; /* micro inset · segmented control · 2px gaps */ --space-xs: 4px; /* badge / tag padding · tight gaps */ --space-sm: 6px; /* icon↔label gap · compact field padding */ --space-md: 8px; /* default element gap · header-bar gap */ --space-lg: 10px; /* nav-brand gap · card inner padding */ --space-xl: 12px; /* toolbar py · code padding · row py */ --space-2xl: 14px; /* row padding-x · demo gap */ --space-3xl: 16px; /* card padding-x · grid gap */ --space-4xl: 20px; /* rail / nav-column padding */ --space-5xl: 24px; /* panel / section inner padding */ --space-6xl: 32px; /* large layout gaps · modal padding */ /* ── Radius scale ───────────────────────────────────────────────────── */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-pill: 999px; --row-h: 52px; /* density: Normal */ } /* Density axis — Compact shrinks the list-row height. Mirrored onto the root element from the density signal (see state/theme.rs). */ [data-density="compact"] { --row-h: 44px; } /* html + body fill the full viewport; the app's outer grid uses height:100%. */ html, body { height: 100%; margin: 0; } /* Apply base tokens to so all children inherit without extra selectors. */ body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); } /* ── Interaction states ───────────────────────────────────────────────────── hover · active (pressed) · focus, applied globally so every control responds without per-element wiring. Hover and press tints are painted with an inset box-shadow so they layer over each control's own background colour instead of replacing it; the tint values come from the --om-* tokens set per theme above. Helper classes opt non-button elements in: .om-hoverable — labels / links that should behave like a button .om-navbtn — solid nav-rail tiles (motion reads better than a tint) .om-chip / .ce-chip — translucent chips (brighten + lift instead of tint) */ button, select, .om-row, .om-chip, .ce-chip, .om-hoverable, .om-navbtn { transition: box-shadow 120ms ease, filter 120ms ease, transform 120ms ease, background-color 120ms ease, border-color 120ms ease, opacity 120ms ease; } button:not(:disabled):hover, .om-hoverable:hover, .om-row:hover { box-shadow: inset 0 0 0 999px var(--om-hover, rgba(255, 255, 255, 0.10)); } button:not(:disabled):active, .om-hoverable:active, .om-row:active { box-shadow: inset 0 0 0 999px var(--om-press, rgba(0, 0, 0, 0.30)); filter: brightness(0.97); } button:focus-visible, .om-hoverable:focus-visible, .om-row:focus-visible { outline: 2px solid var(--om-focus, #10a37f); outline-offset: 1px; } /* Chips — a flat tint reads poorly on a translucent fill, so brighten + scale. Scale grows evenly from the centre; no translateY lift (which would anchor the bottom edge). */ .om-chip:hover, .ce-chip:hover { filter: brightness(1.16); transform: scale(1.05); } /* Inert chip renders (read-only surfaces like the compact reference) reuse the chip look but are not clickable: suppress the hover motion and the pointer cursor set by the per-family rules. The `title` tooltip still shows on hover — that is the only hover affordance an inert chip keeps. */ .ce-chip.ce-chip-inert, .ce-chip.ce-chip-inert:hover { cursor: default; filter: none; transform: none; } /* Nav-rail tiles — solid colours need motion to read; works in any theme. Scale grows evenly from the centre in all directions; no translateY lift. */ .om-navbtn:hover { transform: scale(1.08); filter: brightness(1.16); } .om-navbtn:active { transform: scale(0.94); filter: brightness(0.93); } /* Plural/select branch slices — soft brand ring on keyboard focus. */ .ce-slice:focus { box-shadow: 0 0 0 2px var(--om-focus-soft, rgba(16, 163, 127, 0.18)); } /* Disabled controls never show the interactive cursor. */ button:disabled { cursor: not-allowed; } /* ── ChipEditor surface ───────────────────────────────────────────────────── `.ce-slice` — the contenteditable root div. `.ce-chip` — every non-editable inline chip (base). `.ce-chip-{arg|hash|plural|select}` — per-family colour overrides. `.ce-chip-fmt` — the secondary format label inside an arg chip. `[data-empty]::before` — placeholder text when the slice is empty. */ .ce-slice { white-space: pre-wrap; word-break: break-word; } .ce-slice[data-empty]::before { content: attr(data-placeholder); color: var(--color-text-mute); font-style: italic; } /* Live insertion caret shown while dragging a placeholder over the text — marks the EXACT spot the chip will land (placeholders can't be typed, so this is the only way to position them). Brand-keyed so it themes with the rest of the app. */ .ce-drop-caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: text-bottom; margin: 0 -1px; border-radius: 1px; /* off-scale: hairline cap on a 2px bar — no radius token fits */ background: var(--color-brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand) 28%, transparent); animation: ce-drop-blink 0.75s steps(2, start) infinite; pointer-events: none; } @keyframes ce-drop-blink { 50% { opacity: 0.3; } } /* The slice currently under a placeholder drag — a soft brand wash + inset ring so it reads as the active drop target among sibling branch slices. */ .ce-slice-droptarget { background: color-mix(in srgb, var(--color-brand) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 37%, transparent); border-radius: var(--radius-sm); } /* In-editor chips use `inline-block`, NOT `inline-flex`: Firefox draws the `contenteditable` caret *inside* an `inline-flex` `contenteditable="false"` atom even when the selection is logically beside it (anchor on `.ce-slice`, offset after the chip). Chrome/Brave render correctly either way. The chip content is a single inline line, so flexbox was unnecessary. The draggable palette chips (`.om-chip`, outside the editable) stay `inline-flex`. */ .ce-chip { display: inline-block; padding: 1px 9px; margin: 0 2px; border-radius: var(--radius-pill); font-size: 0.86em; font-weight: 600; vertical-align: baseline; cursor: default; user-select: none; white-space: nowrap; line-height: 1.5; } /* Palette/toolbox chips (`.om-chip.ce-chip`, outside the editable) are a flex row: drag-handle + label + subtitle on ONE line. The base `.ce-chip` `inline-block` above (the Firefox in-editor caret fix) would otherwise let that inline content wrap to two lines when a chip is narrowed in the wrapping palette. Higher specificity (two classes) wins regardless of source order, and only matches palette chips — in-editor `.ce-chip`s keep `inline-block`. */ .om-chip.ce-chip { display: inline-flex; } .ce-chip-arg { background: var(--color-chip-arg-bg); color: var(--color-chip-arg); border: 1px solid var(--color-chip-arg-border); cursor: pointer; } .ce-chip-hash { background: var(--color-chip-hash-bg); color: var(--color-chip-hash); border: 1px solid var(--color-chip-hash-border); font-family: var(--font-mono); cursor: pointer; } .ce-chip-plural, .ce-chip-select { background: var(--color-chip-branch-bg); color: var(--color-chip-branch); border: 1px solid var(--color-chip-branch-border); cursor: pointer; } .ce-chip-fmt { opacity: 0.55; font-weight: 500; font-size: 0.9em; margin-left: 2px; } /* Selected chip — uses each family's own border colour for the ring so arg (green), hash (amber), and plural/select (purple) stay visually coherent. */ .ce-chip-arg.ce-chip-selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chip-arg) 55%, transparent); filter: brightness(1.05); } .ce-chip-hash.ce-chip-selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chip-hash) 55%, transparent); filter: brightness(1.05); } .ce-chip-plural.ce-chip-selected, .ce-chip-select.ce-chip-selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chip-branch) 55%, transparent); filter: brightness(1.05); }