wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
101 lines
4.7 KiB
CSS
101 lines
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);
|
||
}
|