rift-ds 1.0.0

package/tokens/tokens-primitives.css

@@ -0,0 +1,213 @@
+/* ============================================
+   PRIMITIVE TOKENS
+   Source of truth — raw values only
+   Do not use these directly in components
+   ============================================ */
+
+:root {
+  /* ============================================
+     COLOR PRIMITIVES
+     ============================================ */
+
+  /* Neutral Scale
+     Alpha variants follow the -aNN grammar: NN is the alpha × 100, so
+     --primitive-neutral-09-a80 is neutral-09 at 80% opacity. */
+  --primitive-neutral-00: #FFFFFF;
+  --primitive-neutral-00-a01: rgba(255, 255, 255, 0.01);
+  --primitive-neutral-00-a60: rgba(255, 255, 255, 0.6);
+  --primitive-neutral-00-a90: rgba(255, 255, 255, 0.9);
+  --primitive-neutral-01: #F1F1F1;
+  --primitive-neutral-01-a01: rgba(241, 241, 241, 0.01);
+  --primitive-neutral-01-a60: rgba(241, 241, 241, 0.6);
+  --primitive-neutral-01-a82: rgba(241, 241, 241, 0.82);
+  --primitive-neutral-02: #D6D6D6;
+  --primitive-neutral-02-a80: rgba(214, 214, 214, 0.8);
+  --primitive-neutral-03: #BCBCBC;
+  --primitive-neutral-03-a80: rgba(188, 188, 188, 0.8);
+  --primitive-neutral-04: #A2A2A2;
+  --primitive-neutral-05: #888888;
+  --primitive-neutral-06: #6D6D6D;
+  --primitive-neutral-07: #303030;
+  --primitive-neutral-07-a80: rgba(48, 48, 48, 0.8);
+  --primitive-neutral-08: #232323;
+  --primitive-neutral-08-a80: rgba(35, 35, 35, 0.8);
+  --primitive-neutral-09: #0E0E0E;
+  --primitive-neutral-09-a01: rgba(14, 14, 14, 0.01);
+  --primitive-neutral-09-a80: rgba(14, 14, 14, 0.8);
+  --primitive-neutral-09-a60: rgba(14, 14, 14, 0.6);
+  --primitive-neutral-09-a66: rgba(14, 14, 14, 0.66);
+  --primitive-neutral-10: #050505;
+  --primitive-neutral-10-a60: rgba(5, 5, 5, 0.6);
+  --primitive-neutral-10-a01: rgba(5, 5, 5, 0.01);
+  --primitive-neutral-11: #000000;
+
+  /* Chromatic ramps, 00–11. Step 07 is each ramp's key colour; relative
+     luminance decreases strictly from 00 down to 11 (build-enforced by
+     scripts/validate-theme-mirrors.mjs).
+
+     The 00 and 11 end caps are generated, not drawn: blended gamma-aware
+     in sRGB (linearize each channel, lerp linearly, delinearize) —
+       00 = mix(white → step 01) at t = 0.45
+       11 = mix(step 10 → black) at t = 0.38 (≈62% of step 10's luminance)
+     Orange, yellow and green 05/06 are gamma-aware interpolations of
+     04 → 07 at t = 1/3 and 2/3 (the hand-drawn steps sat darker than the
+     07 key, kinking the ramps); every other step is the original drawn
+     value. */
+
+  /* Red Scale */
+  --primitive-red-00: #FEF8FA;
+  --primitive-red-01: #FDEFF3;
+  --primitive-red-02: #FAD3DD;
+  --primitive-red-03: #F8B7C7;
+  --primitive-red-04: #F69BB1;
+  --primitive-red-05: #F37F9B;
+  --primitive-red-06: #F16385;
+  --primitive-red-07: #EF476F;
+  --primitive-red-08: #C93A5C;
+  --primitive-red-09: #8E2641;
+  --primitive-red-10: #571727;
+  --primitive-red-11: #45101D;
+
+  /* Orange Scale */
+  --primitive-orange-00: #FFFAF7;
+  --primitive-orange-01: #FFF3EC;
+  --primitive-orange-02: #FBD9C5;
+  --primitive-orange-03: #F6B794;
+  --primitive-orange-04: #F1996E;
+  --primitive-orange-05: #F09263;
+  --primitive-orange-06: #F08A56;
+  --primitive-orange-07: #EF8247;
+  --primitive-orange-08: #C65E33;
+  --primitive-orange-09: #8F4324;
+  --primitive-orange-10: #552716;
+  --primitive-orange-11: #431D0F;
+
+  /* Yellow Scale */
+  --primitive-yellow-00: #FFFCF6;
+  --primitive-yellow-01: #FFF9EA;
+  --primitive-yellow-02: #FFF0C9;
+  --primitive-yellow-03: #FFE5A3;
+  --primitive-yellow-04: #FFD97F;
+  --primitive-yellow-05: #FFD677;
+  --primitive-yellow-06: #FFD46F;
+  --primitive-yellow-07: #FFD166;
+  --primitive-yellow-08: #C49A3E;
+  --primitive-yellow-09: #8A6B2A;
+  --primitive-yellow-10: #544016;
+  --primitive-yellow-11: #42320F;
+
+  /* Green Scale */
+  --primitive-green-00: #F7FEFB;
+  --primitive-green-01: #ECFCF7;
+  --primitive-green-02: #CEF6E8;
+  --primitive-green-03: #9DEBD4;
+  --primitive-green-04: #6DE0C0;
+  --primitive-green-05: #5ADDB6;
+  --primitive-green-06: #41D9AC;
+  --primitive-green-07: #06D6A0;
+  --primitive-green-08: #05A67C;
+  --primitive-green-09: #03765A;
+  --primitive-green-10: #024336;
+  --primitive-green-11: #01342A;
+
+  /* Teal Scale */
+  --primitive-teal-00: #F7FBFD;
+  --primitive-teal-01: #ECF7FB;
+  --primitive-teal-02: #CFEAF3;
+  --primitive-teal-03: #9ED4E5;
+  --primitive-teal-04: #6DBCD6;
+  --primitive-teal-05: #3CA5C6;
+  --primitive-teal-06: #2C9AB9;
+  --primitive-teal-07: #118AB2;
+  --primitive-teal-08: #0E6E8F;
+  --primitive-teal-09: #0A4E66;
+  --primitive-teal-10: #052F3E;
+  --primitive-teal-11: #032430;
+
+  /* Blue Scale */
+  --primitive-blue-00: #F8FAFE;
+  --primitive-blue-01: #EEF3FD;
+  --primitive-blue-02: #D3DDF8;
+  --primitive-blue-03: #AABCEF;
+  --primitive-blue-04: #7F99E3;
+  --primitive-blue-05: #5475D4;
+  --primitive-blue-06: #345AC4;
+  --primitive-blue-07: #1E47B0;
+  --primitive-blue-08: #163789;
+  --primitive-blue-09: #0F265E;
+  --primitive-blue-10: #081633;
+  --primitive-blue-11: #050F27;
+
+  /* Purple Scale */
+  --primitive-purple-00: #FBF8FF;
+  --primitive-purple-01: #F7F0FE;
+  --primitive-purple-02: #E6D2FB;
+  --primitive-purple-03: #CFABF7;
+  --primitive-purple-04: #B785F0;
+  --primitive-purple-05: #A86AE8;
+  --primitive-purple-06: #9754DC;
+  --primitive-purple-07: #9E47EF;
+  --primitive-purple-08: #7434B3;
+  --primitive-purple-09: #52247D;
+  --primitive-purple-10: #31164A;
+  --primitive-purple-11: #260F3A;
+
+  /* True Black */
+  --primitive-true-black: #000000;
+  --primitive-true-black-semi: rgba(0, 0, 0, 0.5);
+  --primitive-true-black-strong: rgba(0, 0, 0, 0.7);
+
+  /* ============================================
+     SPACING PRIMITIVES
+     ============================================ */
+
+  /* Spacing / Radius */
+  --primitive-radius-050: 2px;
+  --primitive-radius-100: 4px;
+  --primitive-radius-200: 8px;
+  --primitive-radius-300: 12px;
+  --primitive-radius-400: 16px;
+  --primitive-radius-600: 24px;
+  --primitive-radius-1200: 48px;
+  --primitive-radius-pill: 999px;
+  /* The composer shell's corner: concentric with the 40px send button it
+     wraps (half the button + the padding-sm ring + the border width).
+     Held as a resolved constant so consumers re-theme it like any other
+
+  /* Padding */
+  --primitive-padding-050: 2px;
+  --primitive-padding-100: 4px;
+  --primitive-padding-150: 6px;
+  --primitive-padding-200: 8px;
+  --primitive-padding-300: 12px;
+  --primitive-padding-400: 16px;
+  --primitive-padding-500: 20px;
+  --primitive-padding-1000: 40px;
+  --primitive-padding-1500: 60px;
+
+  /* Border width */
+  --primitive-border-025: 1px;
+  --primitive-border-050: 2px;
+
+  /* Icon size
+     The scale starts at 20px because that is the floor of the Material
+     Symbols variable font's `opsz` (optical size) axis — see the fvar
+     range 20..48. Below 20 the axis clamps and optical sizing silently
+     stops tracking, so smaller icons cannot be drawn correctly. */
+  --primitive-icon-500: 20px;
+  --primitive-icon-600: 24px;
+  --primitive-icon-800: 32px;
+  --primitive-icon-1200: 48px;
+
+  /* Gap */
+  --primitive-gap-050: 2px;
+  --primitive-gap-100: 4px;
+  --primitive-gap-200: 8px;
+  --primitive-gap-300: 12px;
+  --primitive-gap-400: 16px;
+  --primitive-gap-500: 20px;
+  --primitive-gap-1000: 40px;
+  --primitive-gap-1500: 60px;
+  --primitive-gap-2000: 80px;
+  --primitive-gap-3000: 120px;
+}

package/tokens/tokens-typography.css

@@ -0,0 +1,210 @@
+/* ============================================
+   TYPOGRAPHY TOKENS
+   Font families, sizes, weights, line heights
+   All typography styles from Figma design system
+   ============================================ */
+
+:root {
+  /* ============================================
+     FONT FAMILIES
+     ============================================ */
+
+  --font-family-primary: 'Nunito Sans', sans-serif;
+
+  /* Family roles. Every type-scale step chains to one of these two
+     aliases: the display and heading tiers read the heading role, the
+     body tiers (Title Body through Caption) read the body role. Both
+     default to the primary family, so this system stays one typeface and
+     overriding --font-family-primary still re-fonts everything at once —
+     a consumer who wants a display face over a text face overrides the
+     roles separately instead. */
+  --font-family-heading: var(--font-family-primary);
+  --font-family-body: var(--font-family-primary);
+
+  /* The one sanctioned monospace stack — CodeBlock, ToolCall names, and
+     Prose inline code. Anything monospace references this token. */
+  --font-family-code: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
+    monospace;
+
+  /* ============================================
+     TYPE SCALE LADDERS
+     The sizes and pixel line-heights every style bundle below
+     resolves through — rank = px / 4 x 100, the same rule as the
+     spacing scale. Override a ladder step and every tier that
+     reads it rescales together; the display tiers' unitless
+     leadings (0.92-1.15) are ratios, not lengths, and stay in
+     their bundles.
+     ============================================ */
+
+  --font-size-300: 12px;
+  --font-size-350: 14px;
+  --font-size-400: 16px;
+  --font-size-550: 22px;
+  --font-size-600: 24px;
+  --font-size-650: 26px;
+  --font-size-750: 30px;
+  --font-size-1000: 40px;
+  --font-size-1200: 48px;
+  --font-size-1400: 56px;
+  --font-size-1600: 64px;
+  --font-size-2400: 96px;
+  --font-size-2900: 116px;
+  --font-size-3300: 132px;
+
+  --font-line-height-400: 16px;
+  --font-line-height-500: 20px;
+  --font-line-height-600: 24px;
+  --font-line-height-700: 28px;
+  --font-line-height-800: 32px;
+  --font-line-height-900: 36px;
+  --font-line-height-1100: 44px;
+
+  /* ============================================
+     DISPLAY STYLES (Large headlines)
+
+     Leading is unitless across this tier and loosens as the size drops:
+     0.92 on Mega, 1.05 on Display 1, 1.1 on Display 2. A display line
+     set solid reads as a poster on one line and as a stack on two, and
+     these headlines wrap — a page title is a sentence, not a word. The
+     ratios are the smallest step that opens a wrapped title without
+     costing the tier its density.
+     ============================================ */
+
+  /* Mega 1 - Largest display text */
+  --font-mega-1-family: var(--font-family-heading);
+  --font-mega-1-size: var(--font-size-3300);
+  --font-mega-1-weight: 300;
+  --font-mega-1-line-height: 0.92;
+  --font-mega-1-letter-spacing: 0.02em; /* 2% */
+
+  /* Mega 2 */
+  --font-mega-2-family: var(--font-family-heading);
+  --font-mega-2-size: var(--font-size-2900);
+  --font-mega-2-weight: 300;
+  --font-mega-2-line-height: 0.92;
+  --font-mega-2-letter-spacing: 0.02em; /* 2% */
+
+  /* Display 1 */
+  --font-display-1-family: var(--font-family-heading);
+  --font-display-1-size: var(--font-size-2400);
+  --font-display-1-weight: 300;
+  --font-display-1-line-height: 1.05;
+  --font-display-1-letter-spacing: 0.02em; /* 2% */
+
+  /* Display 2 */
+  --font-display-2-family: var(--font-family-heading);
+  --font-display-2-size: var(--font-size-1600);
+  --font-display-2-weight: 300;
+  --font-display-2-line-height: 1.1;
+  --font-display-2-letter-spacing: 0.015em; /* 1.5% */
+
+  /* Sub Display */
+  --font-sub-display-family: var(--font-family-heading);
+  --font-sub-display-size: var(--font-size-750);
+  --font-sub-display-weight: 300;
+  --font-sub-display-line-height: var(--font-line-height-1100);
+  --font-sub-display-letter-spacing: 0.015em; /* 1.5% */
+
+  /* ============================================
+     HEADING STYLES
+     ============================================ */
+
+  /* Heading 1 */
+  --font-heading-1-family: var(--font-family-heading);
+  --font-heading-1-size: var(--font-size-750);
+  --font-heading-1-weight: 600;
+  --font-heading-1-line-height: var(--font-line-height-1100);
+  --font-heading-1-letter-spacing: 0.015em; /* 1.5% */
+
+  /* Heading 2 */
+  --font-heading-2-family: var(--font-family-heading);
+  --font-heading-2-size: var(--font-size-650);
+  --font-heading-2-weight: 600;
+  --font-heading-2-line-height: var(--font-line-height-800);
+  --font-heading-2-letter-spacing: 0.015em; /* 1.5% */
+
+  /* Heading 3 */
+  --font-heading-3-family: var(--font-family-heading);
+  --font-heading-3-size: var(--font-size-550);
+  --font-heading-3-weight: 600;
+  --font-heading-3-line-height: var(--font-line-height-700);
+  --font-heading-3-letter-spacing: 0.015em; /* 1.5% */
+
+  /* ============================================
+     BODY TEXT STYLES
+     ============================================ */
+
+  /* Title Body */
+  --font-title-body-family: var(--font-family-body);
+  --font-title-body-size: var(--font-size-400);
+  --font-title-body-weight: 600;
+  --font-title-body-line-height: var(--font-line-height-600);
+  --font-title-body-letter-spacing: -0.01em; /* -1% */
+
+  /* Paragraph Em (emphasis — medium weight, between paragraph and title body) */
+  --font-paragraph-emphasis-family: var(--font-family-body);
+  --font-paragraph-emphasis-size: var(--font-size-400);
+  --font-paragraph-emphasis-weight: 500;
+  --font-paragraph-emphasis-line-height: var(--font-line-height-600);
+  --font-paragraph-emphasis-letter-spacing: -0.01em; /* -1% */
+
+  /* Paragraph */
+  --font-paragraph-family: var(--font-family-body);
+  --font-paragraph-size: var(--font-size-400);
+  --font-paragraph-weight: 400;
+  --font-paragraph-line-height: var(--font-line-height-600);
+  --font-paragraph-letter-spacing: 0;
+
+  /* Paragraph SM */
+  --font-paragraph-sm-family: var(--font-family-body);
+  --font-paragraph-sm-size: var(--font-size-350);
+  --font-paragraph-sm-weight: 400;
+  --font-paragraph-sm-line-height: var(--font-line-height-500);
+  --font-paragraph-sm-letter-spacing: 0;
+
+  /* Paragraph SM Em (emphasis — medium weight small paragraph) */
+  --font-paragraph-sm-emphasis-family: var(--font-family-body);
+  --font-paragraph-sm-emphasis-size: var(--font-size-350);
+  --font-paragraph-sm-emphasis-weight: 500;
+  --font-paragraph-sm-emphasis-line-height: var(--font-line-height-500);
+  --font-paragraph-sm-emphasis-letter-spacing: 0;
+
+  /* Overline — the uppercase label face: an eyebrow over a title, a map
+     callout's place name, a code block's language chip. Small and bold with
+     open tracking, because capitals at this size need air to stay legible.
+     Pair with text-transform: uppercase at the use site — the tokens set the
+     metrics, never the casing. */
+  --font-overline-family: var(--font-family-body);
+  --font-overline-size: var(--font-size-350);
+  --font-overline-weight: 600;
+  --font-overline-line-height: var(--font-line-height-500);
+  --font-overline-letter-spacing: 0.08em; /* +8% */
+
+  /* Caption — the floor of the scale. Footnotes and disclaimers: a line the
+     reader should be able to find but never has to read to use the screen.
+     Never on a control, never for running text. */
+  --font-caption-family: var(--font-family-body);
+  --font-caption-size: var(--font-size-300);
+  --font-caption-weight: 400;
+  --font-caption-line-height: var(--font-line-height-400);
+  --font-caption-letter-spacing: 0;
+}
+
+/* ============================================
+   RESPONSIVE COLLAPSE
+   The display tier steps down once, at 768px — the token layer's only
+   breakpoint. Headings and body never step; weights and letter-spacing
+   never change at any breakpoint (weight contrast is the hierarchy rule).
+   ============================================ */
+
+@media (max-width: 768px) {
+  :root {
+    --font-mega-1-size: var(--font-size-1600);
+    --font-mega-2-size: var(--font-size-1400);
+    --font-display-1-size: var(--font-size-1200);
+    --font-display-2-size: var(--font-size-1000);
+    --font-display-2-line-height: 1.15;
+    --font-sub-display-size: var(--font-size-600);
+    --font-sub-display-line-height: var(--font-line-height-900);
+  }
+}

package/tokens/tokens.css

@@ -0,0 +1,11 @@
+/* ============================================
+   TOKENS — MAIN ENTRY POINT
+   Import this file once in your app
+   Order matters: primitives first, then themes
+   ============================================ */
+
+@import './tokens-primitives.css';
+@import './tokens-typography.css';
+@import './tokens-motion.css';
+@import './tokens-light.css';
+@import './tokens-dark.css';