@robr0/design-system 0.1.0

package/tokens/tokens-light.css

@@ -0,0 +1,159 @@
+/* ============================================
+   SEMANTIC TOKENS — LIGHT THEME
+   These are what components use
+   Always reference these, never primitives
+   Every value chains to tokens-primitives.css
+   (validated by scripts/validate-token-references.mjs)
+   ============================================ */
+
+[data-theme="light"], :root {
+  /* Text */
+  --color-text-primary: var(--primitive-neutral-10);
+  --color-text-secondary: var(--primitive-neutral-07);
+  --color-text-tertiary: var(--primitive-neutral-06);
+  --color-text-inverse: var(--primitive-neutral-04);
+  --color-text-on-inverse: var(--primitive-neutral-01);
+
+  /* Icon */
+  --color-icon-primary: var(--primitive-neutral-06);
+  --color-icon-secondary: var(--primitive-neutral-04);
+
+  /* Background - Page */
+  --color-bg-page-primary: var(--primitive-neutral-00);
+  --color-bg-page-inverse: var(--primitive-neutral-10);
+
+  /* Background - Container */
+  --color-bg-container-primary: var(--primitive-neutral-01);
+  --color-bg-container-primary-transparent: var(--primitive-neutral-01-transparent);
+  --color-bg-container-primary-semi: var(--primitive-neutral-01-semi);
+  --color-bg-container-secondary: var(--primitive-neutral-02);
+  --color-bg-container-tertiary: var(--primitive-neutral-03);
+  --color-bg-container-inverse: var(--primitive-neutral-09);
+  --color-bg-container-border: var(--primitive-neutral-02);
+
+  /* Divider */
+  --color-divider: var(--primitive-neutral-02-semi);
+
+  /* Overlay & controls */
+  --color-scrim: var(--primitive-true-black-semi);
+  --color-control-thumb: var(--primitive-neutral-00);
+
+  /* Elevation — the only shadows in the system (floating surfaces + modals) */
+  --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+  /* Action - Primary */
+  --color-action-primary-bg: var(--primitive-teal-07);
+  --color-action-primary-bg-hover: var(--primitive-teal-08);
+  --color-action-primary-bg-active: var(--primitive-teal-09);
+  --color-action-primary-text: var(--primitive-teal-02);
+  --color-action-primary-text-active: var(--primitive-neutral-01);
+  --color-action-primary-text-secondary: var(--primitive-teal-10);
+  --color-action-primary-text-tertiary: var(--primitive-teal-07);
+  --color-action-primary-border: var(--primitive-teal-09);
+  --color-action-primary-border-secondary: var(--primitive-teal-06);
+  --color-action-primary-border-tertiary: var(--primitive-teal-04);
+
+  /* Action - Icon */
+  --color-action-icon-default: var(--primitive-neutral-10);
+  --color-action-icon-active: var(--primitive-teal-02);
+
+  /* Action - Passive (Secondary button) */
+  --color-action-passive-text: var(--primitive-neutral-10);
+  --color-action-passive-bg: var(--primitive-neutral-01-transparent);
+  --color-action-passive-bg-hover: var(--primitive-neutral-02-semi);
+  --color-action-passive-bg-active: var(--primitive-neutral-03-semi);
+
+  /* Core colours */
+  --color-core-ui-primary: var(--primitive-teal-07);
+  --color-core-ui-secondary: var(--primitive-teal-10);
+  --color-core-accent-coral: var(--primitive-red-07);
+  --color-core-accent-violet: var(--primitive-purple-07);
+  --color-core-accent-cobalt: var(--primitive-blue-07);
+  --color-core-accent-amber: var(--primitive-orange-07);
+  --color-core-accent-gold: var(--primitive-yellow-07);
+  --color-core-accent-mint: var(--primitive-green-07);
+
+  /* Status - Positive */
+  --color-status-positive-bg: var(--primitive-green-01);
+  --color-status-positive-border: var(--primitive-green-07);
+  --color-status-positive-text: var(--primitive-green-10);
+
+  /* Status - Warning */
+  --color-status-warning-bg: var(--primitive-orange-01);
+  --color-status-warning-border: var(--primitive-orange-07);
+  --color-status-warning-text: var(--primitive-orange-10);
+
+  /* Status - Error */
+  --color-status-error-bg: var(--primitive-red-01);
+  --color-status-error-border: var(--primitive-red-07);
+  --color-status-error-text: var(--primitive-red-10);
+
+  /* Status - Info */
+  --color-status-info-bg: var(--primitive-blue-01);
+  --color-status-info-border: var(--primitive-blue-07);
+  --color-status-info-text: var(--primitive-blue-10);
+
+  /* Status - Neutral */
+  --color-status-neutral-bg: var(--primitive-neutral-02);
+  --color-status-neutral-border: var(--primitive-neutral-07);
+  --color-status-neutral-text: var(--primitive-neutral-08);
+
+  /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
+  --color-chart-contribution-0: var(--color-bg-container-primary);
+  --color-chart-contribution-1: var(--primitive-green-02);
+  --color-chart-contribution-2: var(--primitive-green-04);
+  --color-chart-contribution-3: var(--primitive-green-07);
+  --color-chart-contribution-4: var(--primitive-green-09);
+
+  /* Input */
+  --color-input-text-primary: var(--primitive-neutral-10);
+  --color-input-text-placeholder: var(--primitive-neutral-06);
+  --color-input-text-disabled: var(--primitive-neutral-04);
+  --color-input-text-inverse: var(--primitive-neutral-04);
+  --color-input-border-primary: var(--primitive-neutral-02);
+  --color-input-border-hover: var(--primitive-teal-04);
+  --color-input-border-selected: var(--primitive-teal-06);
+  --color-input-border-disabled: var(--primitive-neutral-03);
+  --color-input-bg-primary: var(--primitive-neutral-00);
+  --color-input-bg-disabled: var(--primitive-neutral-02);
+
+  /* Spacing (from primitives) */
+  --radius-xxs: var(--primitive-radius-xxs);
+  --radius-xs: var(--primitive-radius-xs);
+  --radius-sm: var(--primitive-radius-sm);
+  --radius-md: var(--primitive-radius-md);
+  --radius-lg: var(--primitive-radius-lg);
+  --radius-xl: var(--primitive-radius-xl);
+  --radius-xxl: var(--primitive-radius-xxl);
+  --radius-full: var(--primitive-radius-full);
+
+  --padding-xxxs: var(--primitive-padding-xxxs);
+  --padding-xxs: var(--primitive-padding-xxs);
+  --padding-xs: var(--primitive-padding-xs);
+  --padding-sm: var(--primitive-padding-sm);
+  --padding-sm-md: var(--primitive-padding-sm-md);
+  --padding-md: var(--primitive-padding-md);
+  --padding-lg: var(--primitive-padding-lg);
+  --padding-xl: var(--primitive-padding-xl);
+
+  --border-xs: var(--primitive-border-xs);
+  --border-md: var(--primitive-border-md);
+
+  /* Icon size — theme-independent, so defined here only (like radius and
+     padding) rather than duplicated into tokens-dark.css. Components set
+     `--icon-size` to one of these; .material-symbols-rounded reads it for
+     font-size, box size, and optical size together. */
+  --icon-size-sm: var(--primitive-icon-sm);   /* 20px — compact controls */
+  --icon-size-md: var(--primitive-icon-md);   /* 24px — default */
+  --icon-size-lg: var(--primitive-icon-lg);   /* 32px — feature */
+  --icon-size-xl: var(--primitive-icon-xl);   /* 48px — marketing */
+
+  --gap-xxs: var(--primitive-gap-xxs);
+  --gap-xs: var(--primitive-gap-xs);
+  --gap-sm: var(--primitive-gap-sm);
+  --gap-sm-md: var(--primitive-gap-sm-md);
+  --gap-md: var(--primitive-gap-md);
+  --gap-lg: var(--primitive-gap-lg);
+  --gap-xl: var(--primitive-gap-xl);
+}

package/tokens/tokens-motion.css

@@ -0,0 +1,68 @@
+/* ============================================
+   MOTION TOKENS
+   Durations and easing curves for transitions
+   and animations. Theme-agnostic (no light/dark
+   split) — defined once in :root, like typography.
+   ============================================ */
+
+:root {
+  /* ============================================
+     DURATIONS — CORE
+     The day-to-day scale. Most transitions use
+     base; fast is for hover feedback, slow for
+     structural changes, slower for page reveals.
+     ============================================ */
+
+  --motion-duration-fast: 150ms;     /* Quick feedback: hovers, icons, tooltips */
+  --motion-duration-base: 200ms;     /* Default for color/opacity/border transitions */
+  --motion-duration-slow: 300ms;     /* Structural: accordion, sidebar, toast enter */
+  --motion-duration-slower: 600ms;   /* Deliberate page-entrance reveals */
+
+  /* ============================================
+     DURATIONS — EXTENDED
+     Special-purpose timings; not part of the
+     day-to-day scale.
+     ============================================ */
+
+  --motion-duration-deliberate: 400ms;    /* Carousel slide */
+  --motion-duration-loop-spin: 1000ms;    /* Spinner rotation */
+  --motion-duration-loop-shimmer: 1800ms; /* Skeleton shimmer */
+
+  /* ============================================
+     EASINGS
+     ============================================ */
+
+  --motion-ease-standard: ease;                                /* General default */
+  --motion-ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);      /* Size/layout changes */
+  --motion-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);       /* Decelerate for enter animations */
+  --motion-ease-linear: linear;                                /* Continuous loops: spinner, progress */
+  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* Playful overshoot: toggle thumb */
+}
+
+/* ============================================
+   REDUCED MOTION
+   Token collapse covers token-consuming CSS;
+   the universal guard covers components still
+   on hardcoded timings.
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-fast: 0.01ms;
+    --motion-duration-base: 0.01ms;
+    --motion-duration-slow: 0.01ms;
+    --motion-duration-slower: 0.01ms;
+    --motion-duration-deliberate: 0.01ms;
+    --motion-duration-loop-spin: 0.01ms;
+    --motion-duration-loop-shimmer: 0.01ms;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/tokens/tokens-primitives.css

@@ -0,0 +1,176 @@
+/* ============================================
+   PRIMITIVE TOKENS
+   Source of truth — raw values only
+   Do not use these directly in components
+   ============================================ */
+
+:root {
+  /* ============================================
+     COLOR PRIMITIVES
+     ============================================ */
+
+  /* Neutral Scale */
+  --primitive-neutral-00: #FFFFFF;
+  --primitive-neutral-01: #F1F1F1;
+  --primitive-neutral-01-transparent: rgba(241, 241, 241, 0.01);
+  --primitive-neutral-01-semi: rgba(241, 241, 241, 0.6);
+  --primitive-neutral-02: #D6D6D6;
+  --primitive-neutral-02-semi: rgba(214, 214, 214, 0.8);
+  --primitive-neutral-03: #BCBCBC;
+  --primitive-neutral-03-semi: 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-semi: rgba(48, 48, 48, 0.8);
+  --primitive-neutral-08: #232323;
+  --primitive-neutral-08-semi: rgba(35, 35, 35, 0.8);
+  --primitive-neutral-09: #0E0E0E;
+  --primitive-neutral-09-transparent: rgba(14, 14, 14, 0.01);
+  --primitive-neutral-09-semi: rgba(14, 14, 14, 0.8);
+  --primitive-neutral-09-semi-transparent: rgba(14, 14, 14, 0.6);
+  --primitive-neutral-10: #050505;
+  --primitive-neutral-10-semi: rgba(5, 5, 5, 0.6);
+  --primitive-neutral-10-subtle: rgba(5, 5, 5, 0.01);
+  --primitive-neutral-11: #000000;
+
+  /* Red Scale */
+  --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;
+
+  /* Orange Scale */
+  --primitive-orange-01: #FFF3EC;
+  --primitive-orange-02: #FBD9C5;
+  --primitive-orange-03: #F6B794;
+  --primitive-orange-04: #F1996E;
+  --primitive-orange-05: #E98256;
+  --primitive-orange-06: #E07045;
+  --primitive-orange-07: #EF8247;
+  --primitive-orange-08: #C65E33;
+  --primitive-orange-09: #8F4324;
+  --primitive-orange-10: #552716;
+
+  /* Yellow Scale */
+  --primitive-yellow-01: #FFF9EA;
+  --primitive-yellow-02: #FFF0C9;
+  --primitive-yellow-03: #FFE5A3;
+  --primitive-yellow-04: #FFD97F;
+  --primitive-yellow-05: #F2C55E;
+  --primitive-yellow-06: #E0B654;
+  --primitive-yellow-07: #FFD166;
+  --primitive-yellow-08: #C49A3E;
+  --primitive-yellow-09: #8A6B2A;
+  --primitive-yellow-10: #544016;
+
+  /* Green Scale */
+  --primitive-green-01: #ECFCF7;
+  --primitive-green-02: #CEF6E8;
+  --primitive-green-03: #9DEBD4;
+  --primitive-green-04: #6DE0C0;
+  --primitive-green-05: #3ED4AA;
+  --primitive-green-06: #1FCB9A;
+  --primitive-green-07: #06D6A0;
+  --primitive-green-08: #05A67C;
+  --primitive-green-09: #03765A;
+  --primitive-green-10: #024336;
+
+  /* Teal Scale */
+  --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;
+
+  /* Blue Scale */
+  --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;
+
+  /* Purple Scale */
+  --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;
+
+  /* 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-xxs: 2px;
+  --primitive-radius-xs: 4px;
+  --primitive-radius-sm: 8px;
+  --primitive-radius-md: 12px;
+  --primitive-radius-lg: 16px;
+  --primitive-radius-xl: 24px;
+  --primitive-radius-xxl: 48px;
+  --primitive-radius-full: 999px;
+
+  /* Padding */
+  --primitive-padding-xxxs: 2px;
+  --primitive-padding-xxs: 4px;
+  --primitive-padding-xs: 6px;
+  --primitive-padding-sm: 8px;
+  --primitive-padding-sm-md: 12px;
+  --primitive-padding-md: 16px;
+  --primitive-padding-lg: 20px;
+  --primitive-padding-xl: 40px;
+  --primitive-padding-xxl: 60px;
+
+  /* Border width */
+  --primitive-border-xs: 1px;
+  --primitive-border-md: 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-sm: 20px;
+  --primitive-icon-md: 24px;
+  --primitive-icon-lg: 32px;
+  --primitive-icon-xl: 48px;
+
+  /* Gap */
+  --primitive-gap-xxs: 2px;
+  --primitive-gap-xs: 4px;
+  --primitive-gap-sm: 8px;
+  --primitive-gap-sm-md: 12px;
+  --primitive-gap-md: 16px;
+  --primitive-gap-lg: 20px;
+  --primitive-gap-xl: 40px;
+  --primitive-gap-xxl: 60px;
+  --primitive-gap-xxxl: 80px;
+  --primitive-gap-xxxxl: 120px;
+}

package/tokens/tokens-typography.css

@@ -0,0 +1,116 @@
+/* ============================================
+   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;
+
+  /* ============================================
+     DISPLAY STYLES (Large headlines)
+     ============================================ */
+
+  /* Mega 1 - Largest display text */
+  --font-mega-1-family: var(--font-family-primary);
+  --font-mega-1-size: 132px;
+  --font-mega-1-weight: 300;
+  --font-mega-1-line-height: 0.85;
+  --font-mega-1-letter-spacing: 0.02em; /* 2% */
+
+  /* Mega 2 */
+  --font-mega-2-family: var(--font-family-primary);
+  --font-mega-2-size: 116px;
+  --font-mega-2-weight: 300;
+  --font-mega-2-line-height: 0.85;
+  --font-mega-2-letter-spacing: 0.02em; /* 2% */
+
+  /* Display 1 */
+  --font-display-1-family: var(--font-family-primary);
+  --font-display-1-size: 96px;
+  --font-display-1-weight: 300;
+  --font-display-1-line-height: 1;
+  --font-display-1-letter-spacing: 0.02em; /* 2% */
+
+  /* Display 2 */
+  --font-display-2-family: var(--font-family-primary);
+  --font-display-2-size: 64px;
+  --font-display-2-weight: 300;
+  --font-display-2-line-height: 1;
+  --font-display-2-letter-spacing: 0.015em; /* 1.5% */
+
+  /* Sub Display */
+  --font-sub-display-family: var(--font-family-primary);
+  --font-sub-display-size: 30px;
+  --font-sub-display-weight: 300;
+  --font-sub-display-line-height: 44px;
+  --font-sub-display-letter-spacing: 0.015em; /* 1.5% */
+
+  /* ============================================
+     HEADING STYLES
+     ============================================ */
+
+  /* Heading 1 */
+  --font-heading-1-family: var(--font-family-primary);
+  --font-heading-1-size: 30px;
+  --font-heading-1-weight: 600;
+  --font-heading-1-line-height: 44px;
+  --font-heading-1-letter-spacing: 0.015em; /* 1.5% */
+
+  /* Heading 2 */
+  --font-heading-2-family: var(--font-family-primary);
+  --font-heading-2-size: 26px;
+  --font-heading-2-weight: 600;
+  --font-heading-2-line-height: 32px;
+  --font-heading-2-letter-spacing: 0.015em; /* 1.5% */
+
+  /* Heading 3 */
+  --font-heading-3-family: var(--font-family-primary);
+  --font-heading-3-size: 22px;
+  --font-heading-3-weight: 600;
+  --font-heading-3-line-height: 28px;
+  --font-heading-3-letter-spacing: 0.015em; /* 1.5% */
+
+  /* ============================================
+     BODY TEXT STYLES
+     ============================================ */
+
+  /* Title Body */
+  --font-title-body-family: var(--font-family-primary);
+  --font-title-body-size: 16px;
+  --font-title-body-weight: 600;
+  --font-title-body-line-height: 24px;
+  --font-title-body-letter-spacing: -0.01em; /* -1% */
+
+  /* Paragraph Em (emphasis — medium weight, between paragraph and title body) */
+  --font-paragraph-em-family: var(--font-family-primary);
+  --font-paragraph-em-size: 16px;
+  --font-paragraph-em-weight: 500;
+  --font-paragraph-em-line-height: 24px;
+  --font-paragraph-em-letter-spacing: -0.01em; /* -1% */
+
+  /* Paragraph */
+  --font-paragraph-family: var(--font-family-primary);
+  --font-paragraph-size: 16px;
+  --font-paragraph-weight: 400;
+  --font-paragraph-line-height: 24px;
+  --font-paragraph-letter-spacing: 0;
+
+  /* Paragraph SM */
+  --font-paragraph-sm-family: var(--font-family-primary);
+  --font-paragraph-sm-size: 14px;
+  --font-paragraph-sm-weight: 400;
+  --font-paragraph-sm-line-height: 20px;
+  --font-paragraph-sm-letter-spacing: 0;
+
+  /* Paragraph SM Em (emphasis — medium weight small paragraph) */
+  --font-paragraph-sm-em-family: var(--font-family-primary);
+  --font-paragraph-sm-em-size: 14px;
+  --font-paragraph-sm-em-weight: 500;
+  --font-paragraph-sm-em-line-height: 20px;
+  --font-paragraph-sm-em-letter-spacing: 0;
+}

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';