nexu-io--open-design
wehub-resource-sync
101 行
4.7 KiB
CSS
101 行
4.7 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
|
* design-systems/_schema/defaults.css
|
|
*
|
|
* Fallback values for every Layer A2 token in the shared schema.
|
|
*
|
|
* What this file is FOR:
|
|
* - A human-readable mirror of the `fallback` field on every A2
|
|
* entry in `tokens.schema.ts`. Reviewers can scan real CSS and
|
|
* spot weird defaults faster than they can read a TS array.
|
|
* - The future input to the derive script (PR-B): when a brand's
|
|
* DESIGN.md does not specify an A2 token, the script copies the
|
|
* declaration from this file into the brand's tokens.css.
|
|
*
|
|
* What this file is NOT FOR:
|
|
* - Runtime cascade. Artifacts are generated by agents pasting one
|
|
* brand's :root block into a single <style>. There is no global
|
|
* stylesheet that loads alongside the brand. A brand's tokens.css
|
|
* must therefore declare every A2 token directly — this file
|
|
* never reaches the browser.
|
|
*
|
|
* Drift contract:
|
|
* The `design-system: A2 defaults parity` guard check asserts that
|
|
* each declaration here matches the `fallback` field on the
|
|
* corresponding entry in `tokens.schema.ts`. Update both together.
|
|
*
|
|
* Tokens absent from this file:
|
|
* - A1-identity tokens (--bg, --fg, --accent, font stacks) have no
|
|
* defensible cross-brand default; brands must author them.
|
|
* - A1-structure tokens (type scale, container, section-y) are
|
|
* structural decisions that vary per brand by design.
|
|
* - B-slot tokens (--fg-2, --meta, --surface-warm, --border-soft)
|
|
* resolve via `var()` aliasing inside each brand's tokens.css,
|
|
* not via this file.
|
|
* - C-extension tokens are brand-specific and have no shared
|
|
* default by definition.
|
|
* ─────────────────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
/* Accent states (over --accent bg). The black-mix formulas work for
|
|
mid-luminance accents; brands with very dark or very light accents
|
|
should override the value with a hand-picked one (e.g. kami binds
|
|
--accent-hover to var(--accent) because ink-blue cannot darken
|
|
further visibly). */
|
|
--accent-on: #ffffff;
|
|
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
|
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
|
|
|
/* Semantic state. Reserve under 5% of any surface area; not all
|
|
brands need these — print-first kami inherits defaults rather than
|
|
designing custom warm equivalents. */
|
|
--success: #16a34a;
|
|
--warn: #eab308;
|
|
--danger: #dc2626;
|
|
|
|
/* Monospace. Every brand uses kbd / tabular-nums / code somewhere;
|
|
CJK brands override with a stack that includes their preferred
|
|
CJK monospace face (kami adds TsangerJinKai02 / Source Han Serif). */
|
|
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
|
|
|
/* Base spacing scale on a 4px grid. Identical across default and
|
|
kami today. Brands with a print-rooted rhythm (different physical
|
|
paper sizes) may rebind these wholesale; keep the names stable. */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-12: 48px;
|
|
|
|
/* Radius scale. Pill is functionally fixed at 9999px; the small /
|
|
medium / large tiers are defaults that brands routinely override
|
|
to express softness or sharpness as part of brand mood. */
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-pill: 9999px;
|
|
|
|
/* Elevation. Three sanctioned levels (no fourth — that is
|
|
neumorphism territory). Brands forbidding blur shadows (kami,
|
|
paper, editorial) override --elev-raised with a whisper or
|
|
ring-only treatment. */
|
|
--elev-flat: none;
|
|
--elev-ring: 0 0 0 1px var(--border);
|
|
--elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
|
|
|
|
/* Focus. Implemented as a box-shadow so it layers outside the
|
|
element without affecting layout. Brands forbidding cool-blue
|
|
glows must override; rebind via accent or a hand-picked ring. */
|
|
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
|
|
|
/* Motion. Two durations + one easing curve, per the anti-ai-slop
|
|
"short, purposeful transitions (150–250ms) with stable easing"
|
|
contract. Add a third duration only when a real interaction
|
|
needs it; do not invent --motion-slow speculatively. */
|
|
--motion-fast: 150ms;
|
|
--motion-base: 200ms;
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
}
|