@mercury-fx/ui 2.4.0

package/src/styles/tokens.css

@@ -0,0 +1,438 @@
+/*
+  Mercury Design System — Colors & Type
+  Safe to import standalone. Light theme is the default.
+*/
+
+/* ==========================================================
+   FONTS
+   DM Sans — local (Regular 400, Semibold 500)
+   DM Mono / DM Serif Display
+   ========================================================== */
+/* DM Sans — brand-hosted (Regular/Medium/Bold × Normal/Italic) */
+@font-face {
+  font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
+  src: local("DMSans-Regular"), local("DM Sans Regular"),
+       url("fonts/DMSans-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap;
+  src: local("DMSans-Italic"), local("DM Sans Italic"),
+       url("fonts/DMSans-Italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
+  src: local("DMSans-Medium"), local("DM Sans Medium"),
+       url("fonts/DMSans-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Sans"; font-style: italic; font-weight: 500; font-display: swap;
+  src: local("DMSans-MediumItalic"), local("DM Sans Medium Italic"),
+       url("fonts/DMSans-MediumItalic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
+  src: local("DMSans-Bold"), local("DM Sans Bold"),
+       url("fonts/DMSans-Bold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Sans"; font-style: italic; font-weight: 700; font-display: swap;
+  src: local("DMSans-BoldItalic"), local("DM Sans Bold Italic"),
+       url("fonts/DMSans-BoldItalic.woff2") format("woff2");
+}
+/* DM Mono — brand-hosted (Light/Regular/Medium × Normal/Italic) */
+@font-face {
+  font-family: "DM Mono"; font-style: normal; font-weight: 300; font-display: swap;
+  src: local("DMMono-Light"), url("fonts/DMMono-Light.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Mono"; font-style: italic; font-weight: 300; font-display: swap;
+  src: local("DMMono-LightItalic"), url("fonts/DMMono-LightItalic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
+  src: local("DMMono-Regular"), url("fonts/DMMono-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Mono"; font-style: italic; font-weight: 400; font-display: swap;
+  src: local("DMMono-Italic"), url("fonts/DMMono-Italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
+  src: local("DMMono-Medium"), url("fonts/DMMono-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Mono"; font-style: italic; font-weight: 500; font-display: swap;
+  src: local("DMMono-MediumItalic"), url("fonts/DMMono-MediumItalic.woff2") format("woff2");
+}
+/* DM Serif Display — brand-hosted */
+@font-face {
+  font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
+  src: local("DMSerifDisplay-Regular"), local("DM Serif Display Regular"),
+       url("fonts/DMSerifDisplay-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap;
+  src: local("DMSerifDisplay-Italic"), local("DM Serif Display Italic"),
+       url("fonts/DMSerifDisplay-Italic.woff2") format("woff2");
+}
+
+/* ==========================================================
+   COLOR SCALES (RGB triplets — use rgb(var(--name)) )
+   Radix-style 12-step scales. Step 9 = solid brand; 1-3 = bg,
+   4-8 = interactive surfaces, 10-12 = text & accents.
+   ========================================================== */
+:root, .light-theme {
+  /* Slate — neutrals */
+  --slate-1:  252 252 253;
+  --slate-2:  249 249 251;
+  --slate-3:  240 240 243;
+  --slate-4:  232 232 236;
+  --slate-5:  224 225 230;
+  --slate-6:  217 217 224;
+  --slate-7:  205 206 214;
+  --slate-8:  185 187 198;
+  --slate-9:  139 141 152;
+  --slate-10: 128 131 141;
+  --slate-11:  96 100 108;
+  --slate-12:  28  32  36;
+
+  /* Iris — brand */
+  --iris-1:  253 253 255;
+  --iris-2:  248 248 255;
+  --iris-3:  240 241 254;
+  --iris-4:  230 231 255;
+  --iris-5:  218 220 255;
+  --iris-6:  203 205 255;
+  --iris-7:  184 186 248;
+  --iris-8:  155 158 240;
+  --iris-9:   91  91 214;
+  --iris-10:  81  81 205;
+  --iris-11:  87  83 198;
+  --iris-12:  39  41  98;
+
+  /* Indigo — active / info / link */
+  --indigo-1:  253 253 254;
+  --indigo-2:  247 249 255;
+  --indigo-3:  237 242 254;
+  --indigo-4:  225 233 255;
+  --indigo-5:  210 222 255;
+  --indigo-6:  193 208 255;
+  --indigo-7:  171 189 249;
+  --indigo-8:  141 164 239;
+  --indigo-9:   62  99 221;
+  --indigo-10:  51  88 212;
+  --indigo-11:  13 116 206;
+  --indigo-12:  31  45  92;
+
+  /* Green — positive */
+  --green-9:  48 164 108;
+  /* Red — negative */
+  --red-9:   229  72  77;
+  /* Orange — caution */
+  --orange-9: 247 107  21;
+  /* Plum — discovery */
+  --plum-9:  171  74 186;
+
+  /* Extra status scales — needed for full semantic coverage */
+  --green-3:  221 243 228;   --green-11: 24 128 56;
+  --red-3:    255 229 232;   --red-11:   205 43 49;
+  --orange-3: 255 231 214;   --orange-11: 204 77  6;
+  --plum-3:   244 226 248;   --plum-11:  149 62 163;
+
+  /* ===== SEMANTIC TOKENS ===============================================
+     Naming: <role>-<intent>-<variant>-<state>
+     role     = bg | fg | border | shadow
+     intent   = primary, secondary, tertiary, brand, active, positive,
+                negative, caution, discovery, info, inverse, disabled
+     variant  = solid (default) | subtle | muted
+     state    = default | hover | pressed | disabled
+     Use:  background: rgb(var(--bg-brand));
+           background: rgb(var(--bg-hover));   // alpha variant
+     ==================================================================== */
+
+  /* ---- Surfaces / backgrounds ---- */
+  --bg-primary:          var(--slate-1);   /* page */
+  --bg-secondary:        var(--slate-2);   /* raised surface */
+  --bg-tertiary:         var(--slate-3);   /* sunken / code block */
+  --bg-elevated:         var(--slate-1);   /* popover / modal */
+  --bg-inverse:          var(--slate-12);
+  --bg-inverse-hover:    var(--slate-11);
+  --bg-inverse-pressed:  var(--slate-10);
+  --bg-disabled:         var(--slate-3);
+
+  /* Alpha scrims — use as `rgb(var(--bg-hover))` with r g b / a syntax */
+  --bg-hover:       28 32 36 / 0.06;
+  --bg-pressed:     28 32 36 / 0.12;
+  --bg-selected:    91 91 214 / 0.10;
+  --bg-backdrop:    28 32 36 / 0.56;
+  --bg-overlay:     28 32 36 / 0.32;
+
+  /* ---- Brand ---- */
+  --bg-brand:           var(--iris-9);
+  --bg-brand-hover:     var(--iris-10);
+  --bg-brand-pressed:   var(--iris-11);
+  --bg-brand-subtle:    var(--iris-3);     /* tint bg for chips, callouts */
+  --bg-brand-muted:     var(--iris-4);     /* interactive subtle surface */
+
+  /* ---- Active / interactive (controls, links, focus) ---- */
+  --bg-active:          var(--indigo-9);
+  --bg-active-hover:    var(--indigo-10);
+  --bg-active-subtle:   var(--indigo-3);
+
+  /* ---- Status ---- */
+  --bg-positive:        var(--green-9);
+  --bg-positive-subtle: var(--green-3);
+  --bg-negative:        var(--red-9);
+  --bg-negative-subtle: var(--red-3);
+  --bg-caution:         var(--orange-9);
+  --bg-caution-subtle:  var(--orange-3);
+  --bg-discovery:       var(--plum-9);
+  --bg-discovery-subtle:var(--plum-3);
+  --bg-info:            var(--indigo-9);
+  --bg-info-subtle:     var(--indigo-3);
+
+  /* ---- Foregrounds (text + icon) ---- */
+  --fg-primary:       var(--slate-12);   /* body text */
+  --fg-secondary:     var(--slate-11);   /* muted text */
+  --fg-tertiary:      var(--slate-10);   /* placeholder / hint */
+  --fg-disabled:      var(--slate-8);
+  --fg-inverse:       var(--slate-1);
+  --fg-on-brand:      var(--slate-1);    /* text on bg-brand */
+  --fg-on-active:     var(--slate-1);
+  --fg-on-positive:   var(--slate-1);
+  --fg-on-negative:   var(--slate-1);
+  --fg-on-caution:    var(--slate-12);   /* orange needs dark ink */
+  --fg-on-discovery:  var(--slate-1);
+
+  --fg-brand:         var(--iris-11);
+  --fg-brand-hover:   var(--iris-10);
+  --fg-active:        var(--indigo-11);
+  --fg-link:          var(--indigo-11);
+  --fg-link-hover:    var(--indigo-10);
+  --fg-link-visited:  var(--plum-11);
+  --fg-positive:      var(--green-11);
+  --fg-negative:      var(--red-11);
+  --fg-caution:       var(--orange-11);
+  --fg-discovery:     var(--plum-11);
+  --fg-info:          var(--indigo-11);
+
+  /* ---- Borders ---- */
+  --border-primary:     var(--slate-6);   /* default hairline */
+  --border-secondary:   var(--slate-5);   /* subtle divider */
+  --border-strong:      var(--slate-7);   /* emphasized */
+  --border-disabled:    var(--slate-5);
+  --border-focus:       var(--indigo-9);
+  --border-active:      var(--indigo-9);
+  --border-brand:       var(--iris-9);
+  --border-inverse:     var(--slate-12);
+  --border-positive:    var(--green-9);
+  --border-negative:    var(--red-9);
+  --border-caution:     var(--orange-9);
+  --border-discovery:   var(--plum-9);
+
+  /* Focus ring — use as `box-shadow: 0 0 0 3px rgb(var(--ring-focus));` */
+  --ring-focus:       62 99 221 / 0.4;
+  --ring-negative:    229 72 77 / 0.4;
+
+  /* ---- Type families ---- */
+  --font-primary:   "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-secondary: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-display:   "DM Serif Display", Georgia, "Times New Roman", serif;
+
+  --fw-regular:    400;
+  --fw-medium:     500;
+  --fw-semi-bold:  600;
+  --fw-bold:       700;
+  --fw-black:      900;
+
+  /* ---- Type scale ---- */
+  --text-body-100-size: 10px; --text-body-100-lh: 12px;
+  --text-body-200-size: 12px; --text-body-200-lh: 16px;
+  --text-body-300-size: 14px; --text-body-300-lh: 20px;
+  --text-body-400-size: 16px; --text-body-400-lh: 24px;
+  --text-body-500-size: 18px; --text-body-500-lh: 28px;
+
+  --text-heading-100-size: 18px; --text-heading-100-lh: 28px;
+  --text-heading-200-size: 24px; --text-heading-200-lh: 32px;
+  --text-heading-300-size: 36px; --text-heading-300-lh: 40px;
+  --text-heading-400-size: 48px; --text-heading-400-lh: 56px;
+  --text-heading-500-size: 72px; --text-heading-500-lh: 80px;
+
+  /* ---- Radii ---- */
+  --radius-2:  2px;
+  --radius-4:  4px;
+  --radius-6:  6px;
+  --radius-8:  8px;
+  --radius-12: 12px;
+  --radius-16: 16px;
+  --radius-20: 20px;
+  --radius-24: 24px;
+  --radius-32: 32px;
+  --radius-full: 9999px;
+
+  /* ---- Spacing ---- */
+  --space-2: 2px;  --space-4: 4px;  --space-6: 6px;  --space-8: 8px;
+  --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px;
+  --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px;
+  --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px;
+  --space-72: 72px; --space-80: 80px; --space-96: 96px; --space-128: 128px;
+
+  /* ---- Elevation (two-layer shadows) ---- */
+  --shadow-100:
+    0 1px 2px 0 rgb(28 32 36 / 0.06),
+    0 0 0 0 rgb(28 32 36 / 0);
+  --shadow-200:
+    0 4px 8px -4px rgb(28 32 36 / 0.1),
+    0 2px 4px -2px rgb(28 32 36 / 0.04);
+  --shadow-300:
+    0 12px 16px -4px rgb(28 32 36 / 0.08),
+    0 4px 8px -2px rgb(28 32 36 / 0.04);
+  --shadow-400:
+    0 20px 24px -4px rgb(28 32 36 / 0.08),
+    0 8px 8px -4px rgb(28 32 36 / 0.04);
+  --shadow-500:
+    0 24px 48px -12px rgb(28 32 36 / 0.16);
+  --shadow-600:
+    0 32px 64px -12px rgb(28 32 36 / 0.16);
+}
+
+/* ==========================================================
+   DARK THEME — overrides scales + bg-hover/backdrop shadow tints
+   Matches the upstream dark-theme block.
+   ========================================================== */
+.dark-theme {
+  /* Status scales — dark variants */
+  --green-3:  22 57 38;   --green-11: 78 212 136;
+  --red-3:    61 25 30;   --red-11:   255 125 133;
+  --orange-3: 63 36 17;   --orange-11: 255 160 87;
+  --plum-3:   58 29 65;   --plum-11:  211 131 228;
+
+  --slate-1:  17  17  19;
+  --slate-2:  24  25  27;
+  --slate-3:  33  34  37;
+  --slate-4:  39  42  45;
+  --slate-5:  46  49  53;
+  --slate-6:  54  58  63;
+  --slate-7:  67  72  78;
+  --slate-8:  90  97 105;
+  --slate-9: 105 110 119;
+  --slate-10: 119 123 132;
+  --slate-11: 176 180 186;
+  --slate-12: 237 238 240;
+
+  --iris-1:   19  19  30;
+  --iris-2:   23  22  37;
+  --iris-3:   32  34  72;
+  --iris-4:   38  42 101;
+  --iris-5:   48  51 116;
+  --iris-6:   61  62 130;
+  --iris-7:   74  74 149;
+  --iris-8:   89  88 177;
+  --iris-9:   91  91 214;
+  --iris-10: 110 106 222;
+  --iris-11: 177 169 255;
+  --iris-12: 224 223 254;
+
+  --indigo-9:  62  99 221;
+  --indigo-10: 84 114 228;
+  --indigo-11: 158 177 255;
+  --indigo-12: 214 225 255;
+
+  --bg-hover:      237 238 240 / 0.06;
+  --bg-pressed:    237 238 240 / 0.12;
+  --bg-selected:   91 91 214 / 0.18;
+  --bg-backdrop:   0 0 0 / 0.72;
+  --bg-overlay:    0 0 0 / 0.48;
+  --ring-focus:    110 106 222 / 0.4;
+  --ring-negative: 255 125 133 / 0.4;
+
+  /* Dark-mode on-caution flips back to dark ink on lighter orange? no — in
+     dark mode orange-9 is still vivid; on-caution stays dark. */
+
+  --shadow-100: 0 1px 2px 0 rgb(0 0 0 / 0.24);
+  --shadow-200: 0 4px 8px -4px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.16);
+  --shadow-300: 0 12px 16px -4px rgb(0 0 0 / 0.32), 0 4px 8px -2px rgb(0 0 0 / 0.16);
+  --shadow-400: 0 20px 24px -4px rgb(0 0 0 / 0.32), 0 8px 8px -4px rgb(0 0 0 / 0.16);
+  --shadow-500: 0 24px 48px -12px rgb(0 0 0 / 0.64);
+  --shadow-600: 0 32px 64px -12px rgb(0 0 0 / 0.64);
+}
+
+/* ==========================================================
+   SEMANTIC TYPE ELEMENTS
+   Apply heading/body scale to raw HTML tags.
+   ========================================================== */
+html, body {
+  font-family: var(--font-primary);
+  background: rgb(var(--bg-primary));
+  color: rgb(var(--fg-primary));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+h1, .h1 {
+  font-family: var(--font-secondary);
+  font-weight: var(--fw-bold);
+  font-size: var(--text-heading-500-size);
+  line-height: var(--text-heading-500-lh);
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+h2, .h2 {
+  font-family: var(--font-secondary);
+  font-weight: var(--fw-bold);
+  font-size: var(--text-heading-400-size);
+  line-height: var(--text-heading-400-lh);
+  letter-spacing: -0.015em;
+  margin: 0;
+}
+h3, .h3 {
+  font-family: var(--font-secondary);
+  font-weight: var(--fw-bold);
+  font-size: var(--text-heading-300-size);
+  line-height: var(--text-heading-300-lh);
+  margin: 0;
+}
+h4, .h4 {
+  font-family: var(--font-primary);
+  font-weight: var(--fw-bold);
+  font-size: var(--text-heading-200-size);
+  line-height: var(--text-heading-200-lh);
+  margin: 0;
+}
+h5, .h5 {
+  font-family: var(--font-primary);
+  font-weight: var(--fw-bold);
+  font-size: var(--text-heading-100-size);
+  line-height: var(--text-heading-100-lh);
+  margin: 0;
+}
+
+.text-body-100 { font: var(--fw-regular) var(--text-body-100-size)/var(--text-body-100-lh) var(--font-primary); }
+.text-body-200 { font: var(--fw-regular) var(--text-body-200-size)/var(--text-body-200-lh) var(--font-primary); }
+.text-body-300 { font: var(--fw-regular) var(--text-body-300-size)/var(--text-body-300-lh) var(--font-primary); }
+.text-body-400 { font: var(--fw-regular) var(--text-body-400-size)/var(--text-body-400-lh) var(--font-primary); }
+.text-body-500 { font: var(--fw-regular) var(--text-body-500-size)/var(--text-body-500-lh) var(--font-primary); }
+
+p       { font: var(--fw-regular) var(--text-body-400-size)/var(--text-body-400-lh) var(--font-primary); margin: 0 0 var(--space-16); color: rgb(var(--fg-primary)); text-wrap: pretty; }
+small   { font: var(--fw-regular) var(--text-body-200-size)/var(--text-body-200-lh) var(--font-primary); color: rgb(var(--fg-secondary)); }
+code, kbd, pre, samp {
+  font-family: var(--font-secondary);
+  font-size: var(--text-body-300-size);
+  line-height: var(--text-body-300-lh);
+}
+code { background: rgb(var(--bg-tertiary)); padding: 2px 6px; border-radius: var(--radius-4); }
+pre  { background: rgb(var(--bg-tertiary)); padding: var(--space-16); border-radius: var(--radius-8); overflow: auto; }
+
+a { color: rgb(var(--fg-link)); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+.display {
+  font-family: var(--font-display);
+  font-weight: var(--fw-regular);
+  font-size: clamp(48px, 8vw, 96px);
+  line-height: 1.05;
+  letter-spacing: -0.01em;
+}
+
+::selection { background: rgb(var(--iris-5)); color: rgb(var(--fg-primary)); }