@mirror-physics/fractal-ui 0.1.1

package/dist/tokens.css

@@ -0,0 +1,670 @@
+/* =========================================
+   Design System Color Tokens
+   =========================================
+
+   IMPORTANT: Never use primitives (Layer 1) directly in component code.
+   Always reference semantic tokens (Layer 2). If a semantic token doesn't
+   exist for your use case, add one here that maps to a primitive.
+*/
+
+:root {
+  /* ============================================================
+     LAYER 1: PRIMITIVES — Color Scales (0–900)
+     ============================================================ */
+
+  /* Grey — true neutral UI scale, very slight cool lean */
+  --grey-0: #FEFEFE;
+  --grey-50: #FAFAFA;
+  --grey-100: #F2F2F3;
+  --grey-200: #E6E6E7;
+  --grey-300: #D4D4D6;
+  --grey-400: #929295;
+  --grey-500: #6F6F72;
+  --grey-600: #565659;
+  --grey-700: #404042;
+  --grey-800: #2D2D2F;
+  --grey-900: #1C1C1E;
+
+  /* Blue */
+  --blue-0: #FCFFFF;
+  --blue-50: #F1FEFF;
+  --blue-100: #E0F1F4;
+  --blue-200: #BFDFE6;
+  --blue-300: #9FCEDB;
+  --blue-400: #6BAFC4;
+  --blue-500: #047897;
+  --blue-600: #025F78;
+  --blue-700: #054F6A;
+  --blue-800: #044055;
+  --blue-900: #03303F;
+
+  /* Pink */
+  --pink-0: #FFFCFE;
+  --pink-50: #FFF9FF;
+  --pink-100: #F5E8F3;
+  --pink-200: #F5B8EE;
+  --pink-300: #EFA0E6;
+  --pink-400: #D966CC;
+  --pink-500: #A81696;
+  --pink-600: #8A1079;
+  --pink-700: #6C0B5E;
+  --pink-800: #55094B;
+  --pink-900: #3E0638;
+
+  /* Orange */
+  --orange-0: #FFFCFB;
+  --orange-50: #FFF9F5;
+  --orange-100: #FAEADE;
+  --orange-200: #EED4BF;
+  --orange-300: #DBB397;
+  --orange-400: #CC8F66;
+  --orange-500: #9A5E2A;
+  --orange-600: #74431A;
+  --orange-700: #563010;
+  --orange-800: #3D2009;
+  --orange-900: #281204;
+
+  /* Green */
+  --green-0: #F5FEF9;
+  --green-50: #F2FEF8;
+  --green-100: #E0F4EA;
+  --green-200: #C0E5D2;
+  --green-300: #98D4B6;
+  --green-400: #3EA676;
+  --green-500: #0A7B54;
+  --green-600: #066141;
+  --green-700: #044F34;
+  --green-800: #033F29;
+  --green-900: #022F1E;
+
+  /* Red */
+  --red-0: #FFFBFB;
+  --red-50: #FFF5F5;
+  --red-100: #FBE0E0;
+  --red-200: #F0C4C4;
+  --red-300: #E09C9C;
+  --red-400: #CC6464;
+  --red-500: #A11B1B;
+  --red-600: #811212;
+  --red-700: #660D0D;
+  --red-800: #500A0A;
+  --red-900: #3B0707;
+
+  /* Yellow (400 is bg-only per warm-hue exception) */
+  --yellow-0: #FFFEFB;
+  --yellow-50: #FFFDF5;
+  --yellow-100: #FBF2DA;
+  --yellow-200: #F0E2B8;
+  --yellow-300: #DBCA8A;
+  --yellow-400: #C0A64E;
+  --yellow-500: #866B0E;
+  --yellow-600: #6A5308;
+  --yellow-700: #534005;
+  --yellow-800: #403103;
+  --yellow-900: #2E2302;
+
+  /* Purple */
+  --purple-0: #FDFCFF;
+  --purple-50: #FAF7FF;
+  --purple-100: #F0E8FE;
+  --purple-200: #DFD0FC;
+  --purple-300: #C9B0F8;
+  --purple-400: #A882F2;
+  --purple-500: #8B5CF6;
+  --purple-600: #7240D9;
+  --purple-700: #5B2FB5;
+  --purple-800: #462493;
+  --purple-900: #331A6E;
+
+  /* ============================================================
+     LAYER 2: SEMANTIC TOKENS — Purpose-driven
+     ============================================================ */
+
+  /* ---- Core ---- */
+  --bg-canvas: var(--grey-0);
+  --bg-surface-1: var(--grey-50);
+  --bg-surface-2: var(--grey-200);
+  --bg-surface-3: var(--grey-400);
+  --bg-inverse: var(--grey-800);
+  --bg-inverse-subtle: var(--grey-700);
+  --bg-inverse-surface: var(--grey-600);
+  --overlay: rgba(28, 28, 24, 0.5);
+  --transparent: rgba(255, 255, 255, 0);
+
+  /* Hover */
+  --hover-surface: var(--grey-100);
+  --hover-on-surface: var(--grey-50);
+  --hover-canvas: var(--grey-100);
+
+  /* Navigation */
+  --nav-surface: var(--grey-100);
+  --nav-border: var(--grey-200);
+  --nav-hover: var(--grey-200);
+  --nav-selected: var(--grey-300);
+
+  /* ---- Foreground (text, icons, UI marks) ---- */
+  --fg-primary: var(--grey-900);
+  --fg-secondary: var(--grey-600);
+  --fg-tertiary: var(--grey-500);
+  --fg-disabled: var(--grey-300);
+  --fg-placeholder: var(--grey-400);
+  --fg-inverse: var(--grey-50);
+  --fg-inverse-secondary: var(--grey-300);
+
+  /* ---- Borders ---- */
+  --border-subtle: var(--grey-200);
+  --border-default: var(--grey-300);
+  --border-strong: var(--grey-400);
+  --border-focus: var(--blue-500);
+  --border-inverse: rgba(255, 255, 255, 0.12);
+  --border-inverse-strong: rgba(255, 255, 255, 0.20);
+
+  /* ---- Accent (Blue) ---- */
+  --accent-default: var(--blue-500);
+  --accent-hover: var(--blue-400);
+  --accent-subtle: var(--blue-200);
+  --accent-surface-stroke: var(--blue-100);
+  --accent-surface-hover: var(--blue-100);
+  --accent-surface: var(--blue-50);
+  --accent-text: var(--blue-900);
+  --accent-bg: var(--blue-0);
+
+  /* ---- Success (Green) ---- */
+  --success-default: var(--green-500);
+  --success-hover: var(--green-400);
+  --success-subtle: var(--green-200);
+  --success-surface-stroke: var(--green-100);
+  --success-surface-hover: var(--green-100);
+  --success-surface: var(--green-50);
+  --success-text: var(--green-900);
+  --success-bg: var(--green-0);
+
+  /* ---- Error (Red) ---- */
+  --error-default: var(--red-500);
+  --error-hover: var(--red-400);
+  --error-subtle: var(--red-200);
+  --error-surface-stroke: var(--red-100);
+  --error-surface-hover: var(--red-100);
+  --error-surface: var(--red-50);
+  --error-text: var(--red-900);
+  --error-bg: var(--red-0);
+  --danger-button-fg: var(--red-500);
+  --danger-button-surface: var(--red-100);
+  --danger-button-surface-hover: var(--red-200);
+
+  /* ---- Warning (Yellow) ---- */
+  --warning-default: var(--yellow-500);
+  --warning-hover: var(--yellow-400);
+  --warning-subtle: var(--yellow-200);
+  --warning-surface-stroke: var(--yellow-100);
+  --warning-surface-hover: var(--yellow-100);
+  --warning-surface: var(--yellow-50);
+  --warning-text: var(--yellow-900);
+  --warning-bg: var(--yellow-0);
+
+  /* ---- Pink ---- */
+  --pink-default: var(--pink-500);
+  --pink-hover: var(--pink-400);
+  --pink-subtle: var(--pink-200);
+  --pink-surface-stroke: var(--pink-100);
+  --pink-surface-hover: var(--pink-100);
+  --pink-surface: var(--pink-50);
+  --pink-text: var(--pink-900);
+  --pink-bg: var(--pink-0);
+
+  /* ---- Orange ---- */
+  --orange-default: var(--orange-500);
+  --orange-hover: var(--orange-400);
+  --orange-subtle: var(--orange-200);
+  --orange-surface-stroke: var(--orange-100);
+  --orange-surface-hover: var(--orange-100);
+  --orange-surface: var(--orange-50);
+  --orange-text: var(--orange-900);
+  --orange-bg: var(--orange-0);
+  --orange-disabled: var(--orange-300);
+
+  /* ---- Purple ---- */
+  --purple-default: var(--purple-500);
+  --purple-hover: var(--purple-400);
+  --purple-subtle: var(--purple-200);
+  --purple-surface-stroke: var(--purple-100);
+  --purple-surface-hover: var(--purple-100);
+  --purple-surface: var(--purple-50);
+  --purple-text: var(--purple-900);
+  --purple-bg: var(--purple-0);
+
+  /* ---- Border Shorthands ---- */
+  --border-dashed-green: 1px dashed var(--green-500);
+  --border-dashed-orange: 1px dashed var(--orange-500);
+  --border-dashed-subtle: 1px dashed var(--border-subtle);
+
+  /* ============================================================
+     EXPRESSIVE COLOR SCHEMES
+     Vivid backgrounds, borders, and surfaces used for themed
+     cards, sections, and highlights (from website color system).
+     ============================================================ */
+
+  --scheme-blue-bg:     #D6F2F9;
+  --scheme-blue-border: #047897;
+  --scheme-blue-surface: #ECFBFF;
+
+  --scheme-pink-bg:     #FEE5FB;
+  --scheme-pink-border: #C55FB8;
+  --scheme-pink-surface: #FFF7FE;
+
+  --scheme-green-bg:     #D4F4E1;
+  --scheme-green-border: #1F8A4A;
+  --scheme-green-surface: #F3FFF8;
+
+  --scheme-orange-bg:     #FAE0CB;
+  --scheme-orange-border: #7F4308;
+  --scheme-orange-surface: #FFF8F3;
+
+  --scheme-yellow-bg:     #FFEFCC;
+  --scheme-yellow-border: #C9A00C;
+  --scheme-yellow-surface: #FFFDF5;
+
+  /* ============================================================
+     PALETTE COLORS — Strong fills for buttons and filled badges.
+     pl-[color]-strong   = button fill (rest)
+     pl-[color]-strong-hover = button fill (hover)
+     pl-[color]-md       = medium tone (subtle badge bg)
+     pl-[color]-light    = very light bg
+     ============================================================ */
+
+  --pl-blue-strong:       #047897;
+  --pl-blue-strong-hover: #036580;
+  --pl-blue-md:           #BFDFE6;
+  --pl-blue-light:        #FCFFFF;
+
+  --pl-pink-strong:       #C55FB8;
+  --pl-pink-strong-hover: #A84D9D;
+  --pl-pink-md:           #EECAEA;
+  --pl-pink-light:        #FFFCFF;
+
+  --pl-green-strong:       #0D843D;
+  --pl-green-strong-hover: #0A6B31;
+  --pl-green-md:           #AFE1C3;
+  --pl-green-light:        #F8FEFA;
+
+  --pl-orange-strong:       #7F4308;
+  --pl-orange-strong-hover: #693706;
+  --pl-orange-md:           #EED4BF;
+  --pl-orange-light:        #FFF9F5;
+
+  --pl-yellow-strong:       #816500;
+  --pl-yellow-strong-hover: #735A00;
+  --pl-yellow-md:           #E2E0A7;
+  --pl-yellow-light:        #FFFDF5;
+
+  --pl-red-strong:       #840D0F;
+  --pl-red-strong-hover: #6B0A0C;
+  --pl-red-md:           #EBC6C7;
+  --pl-red-light:        #FFF4F4;
+}
+
+/* ============================================================
+   DARK MODE — Semantic token overrides
+   Primitives stay identical. Only the semantic mappings change.
+   ============================================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* ---- Core ---- */
+    --bg-canvas: var(--grey-900);
+    --bg-surface-1: var(--grey-800);
+    --bg-surface-2: var(--grey-700);
+    --bg-surface-3: var(--grey-600);
+    --bg-inverse: var(--grey-50);
+    --bg-inverse-subtle: var(--grey-100);
+    --bg-inverse-surface: var(--grey-200);
+    --overlay: rgba(0, 0, 0, 0.6);
+    --transparent: rgba(0, 0, 0, 0);
+
+    /* Hover */
+    --hover-surface: var(--grey-700);
+    --hover-on-surface: var(--grey-800);
+    --hover-canvas: var(--grey-700);
+
+    /* Navigation */
+    --nav-surface: var(--grey-700);
+    --nav-border: var(--grey-600);
+    --nav-hover: var(--grey-600);
+    --nav-selected: var(--grey-500);
+
+    /* ---- Foreground (text, icons, UI marks) ---- */
+    --fg-primary: var(--grey-50);
+    --fg-secondary: var(--grey-200);
+    --fg-tertiary: var(--grey-300);
+    --fg-disabled: var(--grey-600);
+    --fg-placeholder: var(--grey-500);
+    --fg-inverse: var(--grey-900);
+    --fg-inverse-secondary: var(--grey-600);
+
+    /* ---- Borders ---- */
+    --border-subtle: var(--grey-700);
+    --border-default: var(--grey-600);
+    --border-strong: var(--grey-500);
+    --border-focus: var(--blue-400);
+    --border-inverse: rgba(0, 0, 0, 0.12);
+    --border-inverse-strong: rgba(0, 0, 0, 0.20);
+
+    /* ---- Accent (Blue) ---- */
+    --accent-default: var(--blue-400);
+    --accent-hover: var(--blue-300);
+    --accent-subtle: var(--blue-700);
+    --accent-surface-stroke: var(--blue-700);
+    --accent-surface-hover: var(--blue-700);
+    --accent-surface: var(--blue-800);
+    --accent-text: var(--blue-100);
+    --accent-bg: var(--blue-900);
+
+    /* ---- Success (Green) ---- */
+    --success-default: var(--green-400);
+    --success-hover: var(--green-300);
+    --success-subtle: var(--green-700);
+    --success-surface-stroke: var(--green-700);
+    --success-surface-hover: var(--green-700);
+    --success-surface: var(--green-800);
+    --success-text: var(--green-100);
+    --success-bg: var(--green-900);
+
+    /* ---- Error (Red) ---- */
+    --error-default: var(--red-400);
+    --error-hover: var(--red-300);
+    --error-subtle: var(--red-700);
+    --error-surface-stroke: var(--red-700);
+    --error-surface-hover: var(--red-700);
+    --error-surface: var(--red-800);
+    --error-text: var(--red-100);
+    --error-bg: var(--red-900);
+    --danger-button-fg: var(--red-300);
+    --danger-button-surface: var(--red-800);
+    --danger-button-surface-hover: var(--red-700);
+
+    /* ---- Warning (Yellow) ---- */
+    --warning-default: var(--yellow-400);
+    --warning-hover: var(--yellow-300);
+    --warning-subtle: var(--yellow-700);
+    --warning-surface-stroke: var(--yellow-700);
+    --warning-surface-hover: var(--yellow-700);
+    --warning-surface: var(--yellow-800);
+    --warning-text: var(--yellow-100);
+    --warning-bg: var(--yellow-900);
+
+    /* ---- Pink ---- */
+    --pink-default: var(--pink-400);
+    --pink-hover: var(--pink-300);
+    --pink-subtle: var(--pink-700);
+    --pink-surface-stroke: var(--pink-700);
+    --pink-surface-hover: var(--pink-700);
+    --pink-surface: var(--pink-800);
+    --pink-text: var(--pink-100);
+    --pink-bg: var(--pink-900);
+
+    /* ---- Orange ---- */
+    --orange-default: var(--orange-400);
+    --orange-hover: var(--orange-300);
+    --orange-subtle: var(--orange-700);
+    --orange-surface-stroke: var(--orange-700);
+    --orange-surface-hover: var(--orange-700);
+    --orange-surface: var(--orange-800);
+    --orange-text: var(--orange-100);
+    --orange-bg: var(--orange-900);
+    --orange-disabled: var(--orange-600);
+
+    /* ---- Purple ---- */
+    --purple-default: var(--purple-400);
+    --purple-hover: var(--purple-300);
+    --purple-subtle: var(--purple-700);
+    --purple-surface-stroke: var(--purple-700);
+    --purple-surface-hover: var(--purple-700);
+    --purple-surface: var(--purple-800);
+    --purple-text: var(--purple-100);
+    --purple-bg: var(--purple-900);
+
+    /* ---- Border Shorthands ---- */
+    --border-dashed-green: 1px dashed var(--green-400);
+    --border-dashed-orange: 1px dashed var(--orange-400);
+    --border-dashed-subtle: 1px dashed var(--border-subtle);
+  }
+}
+
+/* =========================================
+   Typography - Font Declarations & Tokens
+   ========================================= */
+
+/* ---- Custom Font Declarations ---- */
+@font-face {
+  font-family: 'Figtree';
+  src: url('./assets/typography/Figtree-VariableFont_wght.ttf') format('truetype-variations');
+  font-weight: 300 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('./assets/typography/GeistMono-VariableFont_wght.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Math & Greek fallback. Figtree and Geist Mono have no glyphs for Greek
+   letters (α, β, Δ, π, …) or math operators (∑, ∫, ∂, ∇, ≈, √, …), which
+   appear constantly in scientific / chemistry reports. Noto Sans Math is
+   listed after the primary faces so the browser borrows it per-glyph only
+   for the symbols Figtree/Geist Mono lack — normal Latin text still renders
+   in Figtree. See typography-guide.md → Math & Greek Fallback. */
+@font-face {
+  font-family: 'Noto Sans Math';
+  src: url('./assets/typography/NotoSansMath-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ---- Font Family Variables ---- */
+:root {
+  --font-sans: 'Figtree', 'Noto Sans Math', system-ui, sans-serif;
+  --font-mono: 'Geist Mono', 'Noto Sans Math', monospace;
+}
+
+/* ---- Base Reset ---- */
+body {
+  font-family: var(--font-sans);
+}
+
+/* =========================================
+   Typographic Tokens
+   ========================================= */
+
+/* ---- Display ---- */
+.display-01 {
+  font-family: var(--font-sans);
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.display-02 {
+  font-family: var(--font-sans);
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+/* ---- Headers ---- */
+.header-01 {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.header-02 {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.header-03 {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+/* ---- Body ---- */
+.body-01 {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.body-02 {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+/* ---- Caption ---- */
+.caption-01 {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+/* ---- Label ---- */
+.label-01 {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+/* ---- Meta ---- */
+.meta-01 {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+/* ---- Code ---- */
+.code-01 {
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.code-02 {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.code-03 {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+:root {
+    /* ---- Border Radius ---- */
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+
+    /* ---- Spacing (8pt Grid) ---- */
+    --space-0: 0px;
+    --space-1: 4px;    /* fine-tuning inside components */
+    --space-2: 8px;    /* tight spacing, icon gaps */
+    --space-3: 12px;   /* label-to-input gap */
+    --space-4: 16px;   /* default internal padding */
+    --space-5: 20px;   /* compact section spacing */
+    --space-6: 24px;   /* card padding, form field gaps */
+    --space-7: 32px;   /* section spacing */
+    --space-8: 40px;   /* large section gaps */
+    --space-9: 48px;   /* section dividers */
+    --space-10: 64px;  /* page section spacing */
+    --space-11: 80px;  /* hero spacing */
+    --space-12: 96px;  /* major page divisions */
+    --space-13: 128px; /* page-level whitespace */
+
+    /* ---- Responsive Breakpoints ---- */
+    --bp-sm: 640px;    /* mobile landscape */
+    --bp-md: 768px;    /* tablet portrait */
+    --bp-lg: 1024px;   /* tablet landscape / small desktop */
+    --bp-xl: 1280px;   /* desktop */
+    --bp-2xl: 1536px;  /* large desktop */
+
+    /* ---- Shadows ---- */
+    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
+    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+    --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
+    --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
+    --shadow-xl: 0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);
+
+    /* ---- Layout Constants ---- */
+    --panel-width: 256px;
+  }
+
+/* =========================================
+   Design System Motion Tokens
+   =========================================
+
+   IMPORTANT: Use these tokens for all transitions and animations.
+   Never use raw CSS easing keywords (ease, ease-out, etc.) or
+   hardcoded cubic-bezier values — reference these variables instead.
+*/
+
+:root {
+  /* ============================================================
+     EASING FUNCTIONS
+     ============================================================ */
+
+  /* Entering elements — snappy deceleration */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Exiting elements — gentle acceleration */
+  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+
+  /* Repositioning / state changes */
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* ============================================================
+     DURATION TOKENS
+     ============================================================ */
+
+  /* Interactive — hover, press, toggle */
+  --duration-fast: 120ms;
+
+  /* Tooltips, dropdowns, small reveals */
+  --duration-normal: 200ms;
+
+  /* Modals, panels, page transitions */
+  --duration-slow: 300ms;
+
+  /* Ambient loops — breathing, shimmer */
+  --duration-ambient: 1500ms;
+
+  /* ============================================================
+     STAGGER
+     ============================================================ */
+
+  --stagger-step: 60ms;
+}