110 lines
3.6 KiB
CSS
110 lines
3.6 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";
|
|
@import "./components.css";
|
|
|
|
/*
|
|
* Class candidates (D-02, D-06): the four mockup screens are the
|
|
* read-only vocabulary reference — their markup files are 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 scope is deliberately narrow (WR-01): ONLY the four mockup
|
|
* markup files are explicit sources, and the theme toolchain's own
|
|
* text (scripts/, basemap/) is excluded from the auto-scan — prose
|
|
* must never mint utility classes (the bare `shadow`/`blur`/`rounded`
|
|
* strays previously compiled from design-doc and audit prose).
|
|
*/
|
|
@source "../../stitch_minimalist_route_navigator/active_route_guidance/code.html";
|
|
@source "../../stitch_minimalist_route_navigator/community_incident_reporter/code.html";
|
|
@source "../../stitch_minimalist_route_navigator/navigate_map_overview/code.html";
|
|
@source "../../stitch_minimalist_route_navigator/telegram_live_traffic_feed/code.html";
|
|
@source not "../scripts";
|
|
@source not "../basemap";
|
|
@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);
|
|
}
|
|
}
|