forked from c-fu/arah2
araharah-executor
2b36b37df1
- tokens.css: @theme static with the full verbatim vocabulary from telemetry_rams/DESIGN.md — 55 colors, 10 spacing (8px grid), 4 font-family aliases, 9 zero-radius tokens; typography scale as :root compound vars (--type-*, 13 tokens x font shorthand + tracking companion) - theme.css: @import tailwindcss + tokens, @source the mockup screens (vocabulary candidates, D-02/D-06) + safelisted font-geist/font-space-grotesk, 7 self-hosted @font-face blocks (Geist 400/500/600/700, Space Grotesk 400/600/700, woff2 from Fontsource, font-display block), Telegram light/dark shell slots (D-04) - fonts: 7 woff2 files under theme/fonts/ (D-16 — no Google Fonts CDN) - package-lock.json: pins tailwindcss 4.3.3 + @tailwindcss/cli 4.3.3 + playwright 1.64.1
97 lines
2.9 KiB
CSS
97 lines
2.9 KiB
CSS
/*
|
|
* @araharah/theme — entry stylesheet (Tailwind v4, CSS-first)
|
|
* ------------------------------------------------------------------
|
|
* Build: npm run build → dist/rams.css (D-17: local npm scripts only)
|
|
* Tokens: @import-ed from tokens.css — the single source of truth
|
|
* for every value (D-01, D-07).
|
|
*
|
|
* No Google Fonts CDN — Geist + Space Grotesk are self-hosted from
|
|
* theme/fonts/ (D-16), fetched from Fontsource static subsets
|
|
* (both typefaces are SIL Open Font License 1.1).
|
|
*/
|
|
|
|
@import "tailwindcss";
|
|
@import "./tokens.css";
|
|
|
|
/*
|
|
* Class candidates (D-02, D-06): the four mockup screens are the
|
|
* read-only vocabulary reference — their markup is scanned so every
|
|
* mockup class compiles from this package; the mockup files themselves
|
|
* are never edited. Family utilities are safelisted explicitly because
|
|
* the mockups address fonts through their inline config instead.
|
|
*/
|
|
@source "../../stitch_minimalist_route_navigator";
|
|
@source inline("font-geist");
|
|
@source inline("font-space-grotesk");
|
|
|
|
/*
|
|
* Self-hosted typefaces — font-display: block (no fallback-font flash;
|
|
* Rams: surfaces behave like machined housing, nothing flickers).
|
|
*/
|
|
@font-face {
|
|
font-family: "Geist";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: block;
|
|
src: url("../fonts/geist/Geist-Regular.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Geist";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: block;
|
|
src: url("../fonts/geist/Geist-Medium.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Geist";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: block;
|
|
src: url("../fonts/geist/Geist-SemiBold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Geist";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: block;
|
|
src: url("../fonts/geist/Geist-Bold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Space Grotesk";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: block;
|
|
src: url("../fonts/space-grotesk/SpaceGrotesk-Regular.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Space Grotesk";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: block;
|
|
src: url("../fonts/space-grotesk/SpaceGrotesk-SemiBold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Space Grotesk";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: block;
|
|
src: url("../fonts/space-grotesk/SpaceGrotesk-Bold.woff2") format("woff2");
|
|
}
|
|
|
|
/*
|
|
* Telegram light/dark shell slots (D-04) — ONLY shell-level surfaces
|
|
* are themeable (background + on-surface text pair). Map cartography
|
|
* stays Rams-constant under both Telegram themes; Phase 3 (PX-02)
|
|
* maps Telegram's theme params onto these two slots.
|
|
*/
|
|
:root {
|
|
--shell-bg: var(--color-surface);
|
|
--shell-on-surface: var(--color-on-surface);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--shell-bg: var(--color-surface-dark);
|
|
--shell-on-surface: var(--color-inverse-on-surface);
|
|
}
|
|
}
|