/* SPDX-License-Identifier: Apache-2.0 */ /* SPDX-FileCopyrightText: 2026 The 25-ji-code-de Team */ /* VENDORED —— sekai-design tokens/contract.css @ cbbb0ec * * 与上游逐字相同（除本注释）。内容取自**提交树** * （git show cbbb0ec:tokens/contract.css），不是工作区 —— 上游正在开发， * 工作区随时和任何一个 commit 都对不上，标了 commit 就得名副其实。 * * **不要在这里改任何值。** 要改就改 sekai-design，再整体同步过来。 * 一份设计系统被各仓各改一点，就退化成了各仓各有一份 —— * 这正是本生态在 auth 客户端上已经踩过的坑（五份漂移的实现）。 * * 四个文件分开放，是为了让每一个都能和上游的同名文件逐字比对： * 等 sekai-design 推上 GitHub 打了 tag，就能给每个文件加 * @sekai-vendor 标记，接进 .github 的每日漂移检查。 * 拼成一个文件的话那个比对做不了。 */ /* ============================================================ SEKAI Design System — Layer 1: The semantic contract ------------------------------------------------------------ Every world MUST define every token in this file. Component CSS is only ever allowed to reference these names — never a world file, never a raw hex. COLOR RULE (one rule, no exceptions): Palette tokens hold a SPACE-SEPARATED RGB TRIPLET and are always consumed as rgb(var(--sekai-x) / ). There are no hex twins. This is deliberate: sekai-pass's own CSS_REFACTOR_PLAN.md documents --error-color drifting between `#e57373` and `229 115 115` because two spellings existed. One spelling cannot drift. Two companions to that rule: --sekai-*-a a bare number, the world's default alpha for that role (line, scrim). --sekai-hairline* a ready-made `1px solid rgb(...)` shorthand, because it appears ~50 times and every hand-written copy is a chance to drift. ============================================================ */ :root { /* Fallback world = world-system. Attaching .world-system or .world-night to / overrides these wholesale. */ /* ---------- Canvas ladder ---------- Defined by ROLE, not by lightness direction. world-system climbs lighter as it rises (#0b0b0e -> #17171c -> #202025); world-night climbs *darker* (#50476a -> #3f355b -> #2b2633). Both are internally consistent, and both read as "raised" because elevation in this system comes from shadow + hairline, not from fill lightness. */ --sekai-canvas: 11 11 14; /* page field */ --sekai-surface: 23 23 28; /* default panel sitting on the canvas */ --sekai-surface-raised: 32 32 37; /* a plane above --sekai-surface */ --sekai-surface-sunken: 17 17 20; /* a well: inputs, code, tracks */ --sekai-surface-hover: 42 42 48; /* solid hover fill */ /* ---------- Lines ---------- Three jobs, not one: line hairline around cards, inputs, chips strong the same hairline, emphasized (hover / focus-adjacent) divider structural rules between layout regions (bar bottoms, sidebar edges). world-system draws these with the same grey as `line`; world-night draws them dark while its `line` is white-at-low-alpha. Collapsing the two would make one of the worlds wrong. */ --sekai-line: 42 42 48; --sekai-line-a: 1; --sekai-line-strong: 61 61 70; --sekai-line-strong-a: 1; --sekai-divider: 42 42 48; --sekai-divider-a: 1; /* ---------- Foreground ---------- */ --sekai-fg: 226 226 230; --sekai-fg-muted: 117 117 122; --sekai-fg-subtle: 90 90 96; --sekai-fg-on-accent: 26 26 30; /* text sitting ON an accent fill */ /* ---------- Accent ---------- Two accents, two jobs — this is the shared shape both source designs already had: accent bright, interactive: focus rings, icons, CTAs accent-deep structural: the 3-4px strips, gradient caps */ --sekai-accent: 164 140 214; --sekai-accent-hover: 189 166 232; --sekai-accent-deep: 89 68 131; /* Which accent a SOLID fill uses, and what colour survives on top of it. These differ per world because the worlds' accents differ in lightness: world-system fills with its light accent and sets dark text (Pass's own `--button-color: #1a1a1e`); world-night fills with the deeper accent and sets white (nightcord's own .sekai-update-btn). Both land on legible contrast; neither is a compromise. */ --sekai-accent-fill: 164 140 214; /* ---------- Signal & semantics ---------- Identical across worlds on purpose: a system whose "danger" changes hue per theme is two systems. */ --sekai-signal: 255 85 0; /* live / recording / AI. Never decorative. */ --sekai-danger: 229 115 115; --sekai-success: 129 199 132; --sekai-warning: 250 166 26; --sekai-info: 56 189 248; /* ---------- Scrim ---------- */ --sekai-scrim: 20 20 25; --sekai-scrim-a: 0.92; /* ---------- Radius register ---------- The one non-colour thing a world is allowed to re-point. Controls are 4px in the terminal register, 6px in the ambient one; panels agree at 8px. Components reference these, not the raw scale, so a world shifts its whole feel without touching component CSS. */ --sekai-radius-control: var(--sekai-radius-xs); --sekai-radius-panel: var(--sekai-radius-md); /* ---------- Control voice ---------- Whether buttons and tabs speak in the machine voice. Pass's buttons are UPPERCASE / 700 / 1px-tracked; nightcord's are sentence-case / 600. Same component, world-appropriate register — this is the token that carries that difference, so no component ever needs a world-specific rule. */ --sekai-control-transform: uppercase; --sekai-control-tracking: var(--sekai-tracking-wider); --sekai-control-weight: var(--sekai-weight-bold); /* ---------- Derived shorthands ---------- */ --sekai-hairline: 1px solid rgb(var(--sekai-line) / var(--sekai-line-a)); --sekai-hairline-strong: 1px solid rgb(var(--sekai-line-strong) / var(--sekai-line-strong-a)); --sekai-hairline-divider: 1px solid rgb(var(--sekai-divider) / var(--sekai-divider-a)); --sekai-focus-ring: 0 0 0 2px rgb(var(--sekai-accent) / 0.15); --sekai-glow-accent: 0 4px 20px rgb(var(--sekai-accent) / 0.3); --sekai-glow-signal: 0 0 4px rgb(var(--sekai-signal) / 1); /* ---------- Device sub-theme ---------- The walkman/DAW audio player is deliberately a FOREIGN OBJECT: a physical device sitting inside the UI, not a surface of it. It keeps its matte-black chassis in both worlds. Scoped to .sekai-device — see DESIGN_SYSTEM.md §6.7. */ --sekai-device-chassis: 30 30 36; /* #1e1e24 */ --sekai-device-panel: 35 35 41; /* #232329 */ --sekai-device-screen: 10 10 12; /* #0a0a0c */ --sekai-device-line: 51 51 51; /* #333 */ --sekai-device-fg: 208 208 208; --sekai-device-fg-dim: 80 80 80; --sekai-device-key: 51 51 51; --sekai-device-key-hover: 68 68 68; }