forked from c-fu/arah2
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
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