feat(01-design-tokens-rams-foundation-01): Telemetry Rams token package — tokens, self-hosted fonts, v4 build
- 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
This commit is contained in:
araharah-executor
Generated
+1210
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,96 @@
|
|||||||
|
/*
|
||||||
|
* @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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,158 @@
|
|||||||
|
/*
|
||||||
|
* @araharah/theme — Telemetry Rams design tokens
|
||||||
|
* ------------------------------------------------------------------
|
||||||
|
* Single source of truth for every numeric design value in araharah.
|
||||||
|
* Vocabulary is copied VERBATIM from the frontmatter of
|
||||||
|
* stitch_minimalist_route_navigator/telemetry_rams/DESIGN.md (D-02:
|
||||||
|
* mockup markup maps 1:1 — bg-signal-orange, px-margin, gap-space-md…).
|
||||||
|
*
|
||||||
|
* Values live ONLY here (D-07). Docs describe principles and point to
|
||||||
|
* this package; they never restate hex codes, sizes, or spacing.
|
||||||
|
*
|
||||||
|
* @theme static — v4 tree-shakes unused theme variables by default;
|
||||||
|
* `static` forces every token into the compiled output so the package
|
||||||
|
* is consumable as plain CSS custom properties by any later phase
|
||||||
|
* (D-01), including the MapLibre basemap derivation (D-09).
|
||||||
|
*/
|
||||||
|
|
||||||
|
@theme static {
|
||||||
|
/* — Colors: Material-style neutrals + Rams brand (verbatim, 55) — */
|
||||||
|
--color-surface: #fff8f0;
|
||||||
|
--color-surface-dim: #e0d9cd;
|
||||||
|
--color-surface-bright: #fff8f0;
|
||||||
|
--color-surface-container-lowest: #ffffff;
|
||||||
|
--color-surface-container-low: #faf3e6;
|
||||||
|
--color-surface-container: #f5ede0;
|
||||||
|
--color-surface-container-high: #efe7db;
|
||||||
|
--color-surface-container-highest: #e9e2d5;
|
||||||
|
--color-on-surface: #1e1b14;
|
||||||
|
--color-on-surface-variant: #564335;
|
||||||
|
--color-inverse-surface: #333028;
|
||||||
|
--color-inverse-on-surface: #f7f0e3;
|
||||||
|
--color-outline: #897363;
|
||||||
|
--color-outline-variant: #dcc1af;
|
||||||
|
--color-surface-tint: #914c00;
|
||||||
|
--color-primary: #914c00;
|
||||||
|
--color-on-primary: #ffffff;
|
||||||
|
--color-primary-container: #eb8008;
|
||||||
|
--color-on-primary-container: #522900;
|
||||||
|
--color-inverse-primary: #ffb77f;
|
||||||
|
--color-secondary: #5f5e5e;
|
||||||
|
--color-on-secondary: #ffffff;
|
||||||
|
--color-secondary-container: #e2dfde;
|
||||||
|
--color-on-secondary-container: #636262;
|
||||||
|
--color-tertiary: #676013;
|
||||||
|
--color-on-tertiary: #ffffff;
|
||||||
|
--color-tertiary-container: #b7ad59;
|
||||||
|
--color-on-tertiary-container: #464000;
|
||||||
|
--color-error: #ba1a1a;
|
||||||
|
--color-on-error: #ffffff;
|
||||||
|
--color-error-container: #ffdad6;
|
||||||
|
--color-on-error-container: #93000a;
|
||||||
|
--color-primary-fixed: #ffdcc3;
|
||||||
|
--color-primary-fixed-dim: #ffb77f;
|
||||||
|
--color-on-primary-fixed: #2f1500;
|
||||||
|
--color-on-primary-fixed-variant: #6e3900;
|
||||||
|
--color-secondary-fixed: #e5e2e1;
|
||||||
|
--color-secondary-fixed-dim: #c8c6c5;
|
||||||
|
--color-on-secondary-fixed: #1c1b1b;
|
||||||
|
--color-on-secondary-fixed-variant: #474746;
|
||||||
|
--color-tertiary-fixed: #f0e58a;
|
||||||
|
--color-tertiary-fixed-dim: #d3c972;
|
||||||
|
--color-on-tertiary-fixed: #1f1c00;
|
||||||
|
--color-on-tertiary-fixed-variant: #4e4800;
|
||||||
|
--color-background: #fff8f0;
|
||||||
|
--color-on-background: #1e1b14;
|
||||||
|
--color-surface-variant: #e9e2d5;
|
||||||
|
/* Rams brand core (verbatim casing from the design doc) */
|
||||||
|
--color-signal-orange: #EB8008;
|
||||||
|
--color-matte-black: #1A1A1A;
|
||||||
|
--color-soft-beige: #D9D2C6;
|
||||||
|
--color-functional-red: #ED3F1C;
|
||||||
|
--color-olive-green: #736B1E;
|
||||||
|
--color-chassis-subtle: #CCC4B5;
|
||||||
|
--color-surface-dark: #121212;
|
||||||
|
--color-pure-white: #FFFFFF;
|
||||||
|
|
||||||
|
/* — Spacing: 8px baseline grid (verbatim; never recomputed — D-07) — */
|
||||||
|
--spacing-gutter: 1rem;
|
||||||
|
--spacing-gutter-desktop: 1.5rem;
|
||||||
|
--spacing-margin: 1rem;
|
||||||
|
--spacing-margin-desktop: 2rem;
|
||||||
|
--spacing-space-xs: 0.25rem;
|
||||||
|
--spacing-space-sm: 0.5rem;
|
||||||
|
--spacing-space-md: 1rem;
|
||||||
|
--spacing-space-lg: 1.5rem;
|
||||||
|
--spacing-space-xl: 2rem;
|
||||||
|
--spacing-space-2xl: 3rem;
|
||||||
|
|
||||||
|
/* — Type families: Geist (body) + Space Grotesk (headlines/telemetry).
|
||||||
|
sans aliases Geist; mono aliases Space Grotesk so the mockups'
|
||||||
|
font-mono telemetry labels render in a self-hosted Rams grotesk
|
||||||
|
(D-10, D-16) instead of a system monospace. — */
|
||||||
|
--font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
|
||||||
|
--font-geist: "Geist", ui-sans-serif, system-ui, sans-serif;
|
||||||
|
--font-space-grotesk: "Space Grotesk", "Geist", ui-sans-serif, system-ui, sans-serif;
|
||||||
|
--font-mono: "Space Grotesk", "Geist", ui-monospace, monospace;
|
||||||
|
|
||||||
|
/* — Radius: absolute zero roundedness (design doc, Shapes). Every
|
||||||
|
token-driven rounded-* utility compiles to 0. NOTE: v4's
|
||||||
|
rounded-none/rounded-full are literal built-ins, not var-driven. — */
|
||||||
|
--radius-DEFAULT: 0px;
|
||||||
|
--radius-xs: 0px;
|
||||||
|
--radius-sm: 0px;
|
||||||
|
--radius-md: 0px;
|
||||||
|
--radius-lg: 0px;
|
||||||
|
--radius-xl: 0px;
|
||||||
|
--radius-2xl: 0px;
|
||||||
|
--radius-3xl: 0px;
|
||||||
|
--radius-4xl: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* — Typography scale (verbatim values from the design doc frontmatter) —
|
||||||
|
* Compound custom properties per type token: consume as
|
||||||
|
*
|
||||||
|
* .headline { font: var(--type-headline-md);
|
||||||
|
* letter-spacing: var(--type-headline-md-tracking); }
|
||||||
|
*
|
||||||
|
* font shorthand composes weight + size/line-height + family; the
|
||||||
|
* -tracking companion carries the letter-spacing (not expressible in
|
||||||
|
* the font shorthand). Later plans build sheet/specimen classes on
|
||||||
|
* these vars.
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
/* Space Grotesk — display + headlines */
|
||||||
|
--type-display-lg: 700 48px/52px var(--font-space-grotesk);
|
||||||
|
--type-display-lg-tracking: -0.04em;
|
||||||
|
--type-display-lg-mobile: 700 36px/40px var(--font-space-grotesk);
|
||||||
|
--type-display-lg-mobile-tracking: -0.03em;
|
||||||
|
--type-headline-lg: 700 32px/38px var(--font-space-grotesk);
|
||||||
|
--type-headline-lg-tracking: -0.03em;
|
||||||
|
--type-headline-lg-mobile: 700 24px/30px var(--font-space-grotesk);
|
||||||
|
--type-headline-lg-mobile-tracking: -0.02em;
|
||||||
|
--type-headline-md: 600 20px/26px var(--font-space-grotesk);
|
||||||
|
--type-headline-md-tracking: -0.02em;
|
||||||
|
--type-headline-sm: 600 16px/22px var(--font-space-grotesk);
|
||||||
|
--type-headline-sm-tracking: -0.01em;
|
||||||
|
|
||||||
|
/* Geist — body */
|
||||||
|
--type-body-lg: 400 16px/24px var(--font-geist);
|
||||||
|
--type-body-lg-tracking: -0.01em;
|
||||||
|
--type-body-md: 400 14px/20px var(--font-geist);
|
||||||
|
--type-body-md-tracking: 0em;
|
||||||
|
--type-body-sm: 400 12px/16px var(--font-geist);
|
||||||
|
--type-body-sm-tracking: 0.01em;
|
||||||
|
|
||||||
|
/* Labels (uppercase, expanded tracking per design doc) */
|
||||||
|
--type-label-lg: 700 14px/18px var(--font-space-grotesk);
|
||||||
|
--type-label-lg-tracking: 0.06em;
|
||||||
|
--type-label-md: 600 12px/16px var(--font-geist);
|
||||||
|
--type-label-md-tracking: 0.04em;
|
||||||
|
--type-label-sm: 700 10px/12px var(--font-geist);
|
||||||
|
--type-label-sm-tracking: 0.08em;
|
||||||
|
|
||||||
|
/* Telemetry counters */
|
||||||
|
--type-telemetry-num: 700 28px/32px var(--font-space-grotesk);
|
||||||
|
--type-telemetry-num-tracking: -0.03em;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user