anentrypoint-design 0.0.120 → 0.0.121

package/colors_and_type.css

@@ -1,226 +1,226 @@
-/* ============================================================
-   247420 design system — colors + type
-   Calm, readable, scope-prefixed at build time.
-   Source-of-truth tokens. Component sheet lives in app-shell.css.
-   ============================================================ */
-
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
-
-:root {
-  /* Paper / Ink — cool stone scale; lets lore palette pop. */
-  --paper:       #F6F5F1;
-  --paper-2:     #ECEBE6;
-  --paper-3:     #DFDED9;
-  --ink:         #131318;
-  --ink-2:       #25252C;
-  --ink-3:       #6A6A70;
-
-  /* Lore palette */
-  --green:       #247420;
-  --green-2:     #3A9A34;
-  --green-deep:  #133F10;
-  --green-tint:  #D9E5C8;
-  --purple:      #420247;
-  --purple-2:    #7F18A4;
-  --purple-deep: #28002B;
-  --purple-tint: #E4D3E5;
-  --mascot:      #E84B8A;
-  --mascot-2:    #FF3CA7;
-  --mascot-tint: #F5D2DF;
-
-  /* Signals */
-  --sun:         #F5C344;
-  --flame:       #FF5A1F;
-  --sky:         #3A6EFF;
-  --warn:        #E0241A;
-  --live:        var(--green);
-
-  /* Semantic surfaces */
-  --bg:          var(--paper);
-  --bg-2:        var(--paper-2);
-  --bg-3:        var(--paper-3);
-  --fg:          var(--ink);
-  --fg-2:        var(--ink-2);
-  --fg-3:        var(--ink-3);
-
-  --accent:      var(--green);
-  --accent-fg:   var(--paper);
-  --accent-tint: color-mix(in oklab, var(--accent) 18%, var(--bg));
-
-  --panel-bg:     var(--bg);
-  --panel-bg-2:   var(--bg-2);
-  --panel-accent: var(--accent);
-  --panel-0:      var(--bg);
-  --panel-1:      var(--bg-2);
-  --panel-2:      var(--bg-3);
-  --panel-3:      color-mix(in oklab, var(--fg) 12%, transparent);
-  --panel-text:   var(--fg);
-  --panel-text-2: var(--fg-2);
-  --panel-text-3: var(--fg-3);
-  --panel-accent-2: var(--accent-bright, var(--accent));
-  --panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent);
-
-  /* Type — one family, used purposefully. Space Grotesk for everything
-     non-mono. The display/narrow aliases stay so consumers that reference
-     them keep working; they just resolve to the body font now. */
-  --ff-display:  'Space Grotesk', system-ui, sans-serif;
-  --ff-narrow:   'Space Grotesk', system-ui, sans-serif;
-  --ff-body:     'Space Grotesk', system-ui, sans-serif;
-  --ff-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
-
-  --fs-micro:    11px;
-  --fs-tiny:     12px;
-  --fs-xs:       13px;
-  --fs-sm:       14px;
-  --fs-body:     16px;
-  --fs-lg:       18px;
-  --fs-xl:       21px;
-  --fs-h4:       clamp(19px, 1.8cqi, 24px);
-  --fs-h3:       clamp(22px, 2.4cqi, 30px);
-  --fs-h2:       clamp(28px, 3.6cqi, 44px);
-  --fs-h1:       clamp(34px, 5cqi, 64px);
-  --fs-hero:     clamp(42px, 7cqi, 96px);
-  --fs-mega:     clamp(56px, 11cqi, 168px);
-
-  --lh-tight:    1.05;
-  --lh-snug:     1.2;
-  --lh-base:     1.55;
-  --lh-long:     1.7;
-
-  --tr-caps:     0.06em;
-  --tr-label:    0.10em;
-  --tr-tight:    -0.02em;
-  --tr-tighter:  -0.03em;
-
-  /* Spacing (8pt) */
-  --space-0:     0;
-  --space-1:     4px;
-  --space-2:     8px;
-  --space-3:     16px;
-  --space-4:     24px;
-  --space-5:     32px;
-  --space-6:     48px;
-  --space-7:     64px;
-  --space-8:     96px;
-  --space-9:     128px;
-  --space-10:    192px;
-
-  --density:     1;
-  --pad-y:       calc(var(--space-5) * var(--density));
-  --pad-x:       calc(var(--space-5) * var(--density));
-  --gutter:      calc(var(--space-4) * var(--density));
-
-  /* Borders — chunky or none */
-  --bw-hair:     1px;
-  --bw-rule:     2px;
-  --bw-chunk:    4px;
-  --bw-slab:     8px;
-
-  --rule:        color-mix(in oklab, currentColor 14%, transparent);
-  --rule-strong: color-mix(in oklab, currentColor 28%, transparent);
-
-  --r-1:         10px;
-  --r-2:         14px;
-  --r-3:         22px;
-  --r-4:         32px;
-  --r-pill:      999px;
-
-  --dur-snap:    80ms;
-  --dur-base:    160ms;
-  --dur-slow:    280ms;
-  --ease:        cubic-bezier(0.2, 0, 0, 1);
-
-  --z-header:    100;
-  --z-overlay:   1000;
-
-  --measure:     68ch;
-}
-
-[data-theme="ink"] {
-  --bg:        var(--ink);
-  --bg-2:      var(--ink-2);
-  --bg-3:      #34343C;
-  --fg:        var(--paper);
-  --fg-2:      var(--paper-2);
-  --fg-3:      #9A9AA2;
-  --panel-bg:  var(--bg);
-  --panel-bg-2: var(--bg-2);
-  --panel-0:   var(--bg);
-  --panel-1:   var(--bg-2);
-  --panel-2:   var(--bg-3);
-  --panel-3:   color-mix(in oklab, var(--fg) 20%, transparent);
-  --panel-text:   var(--fg);
-  --panel-text-2: var(--fg-2);
-  --panel-text-3: var(--fg-3);
-  --accent:    var(--accent-bright, var(--green-2));
-  --accent-fg: var(--ink);
-}
-
-@media (prefers-color-scheme: dark) {
-  [data-theme="auto"] {
-    --bg:        var(--ink);
-    --bg-2:      var(--ink-2);
-    --bg-3:      #34343C;
-    --fg:        var(--paper);
-    --fg-2:      var(--paper-2);
-    --fg-3:      #9A9AA2;
-    --panel-bg:  var(--bg);
-    --panel-bg-2: var(--bg-2);
-    --panel-0:   var(--bg);
-    --panel-1:   var(--bg-2);
-    --panel-2:   var(--bg-3);
-    --panel-3:   color-mix(in oklab, var(--fg) 20%, transparent);
-    --panel-text:   var(--fg);
-    --panel-text-2: var(--fg-2);
-    --panel-text-3: var(--fg-3);
-    --accent:    var(--accent-bright, var(--green-2));
-    --accent-fg: var(--ink);
-  }
-}
-
-/* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g.
-   mount() added the class to an inner element while the ancestor html
-   already had it), the inner element would otherwise re-trigger the root
-   light defaults and detach from the ancestor's data-theme override. Force
-   the inner element to inherit the ancestor's resolved tokens. */
-.ds-247420 .ds-247420 {
-  --bg:        inherit;
-  --bg-2:      inherit;
-  --bg-3:      inherit;
-  --fg:        inherit;
-  --fg-2:      inherit;
-  --fg-3:      inherit;
-  --panel-bg:  inherit;
-  --panel-bg-2: inherit;
-  --accent:    inherit;
-  --accent-fg: inherit;
-  --panel-1:   inherit;
-  --panel-2:   inherit;
-  --panel-3:   inherit;
-  --panel-text: inherit;
-  --panel-text-2: inherit;
-  --panel-text-3: inherit;
-  --panel-accent-2: inherit;
-  --panel-shadow: inherit;
-}
-
-[data-density="compact"]     { --density: 0.75; }
-[data-density="comfortable"] { --density: 1; }
-[data-density="spacious"]    { --density: 1.35; }
-
-[data-accent="green"]  { --accent: var(--green);  --accent-bright: var(--green-2);  --accent-fg: var(--paper); --panel-accent: var(--green);  }
-[data-accent="purple"] { --accent: var(--purple); --accent-bright: #C277FF;         --accent-fg: var(--paper); --panel-accent: var(--purple); }
-[data-accent="mascot"] { --accent: var(--mascot); --accent-bright: var(--mascot-2); --accent-fg: var(--ink);   --panel-accent: var(--mascot); }
-
-/* Type-scale modifier — opt-in body/lg/xl bump for surfaces that want denser
-   or larger reading sizes without a custom override. */
-[data-typescale="sm"] { --fs-body: 15px; --fs-lg: 17px; --fs-xl: 20px; }
-[data-typescale="lg"] { --fs-body: 17px; --fs-lg: 20px; --fs-xl: 24px; }
-
-/* Debug grid overlay — 8px mascot grid. Toggle via class on any container. */
-.with-grid-overlay {
-  background-image:
-    linear-gradient(to right, rgba(232,75,138,0.15) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(232,75,138,0.15) 1px, transparent 1px);
-  background-size: 8px 8px;
-}
+/* ============================================================
+   247420 design system — colors + type
+   Calm, readable, scope-prefixed at build time.
+   Source-of-truth tokens. Component sheet lives in app-shell.css.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+
+:root {
+  /* Paper / Ink — cool stone scale; lets lore palette pop. */
+  --paper:       #F6F5F1;
+  --paper-2:     #ECEBE6;
+  --paper-3:     #DFDED9;
+  --ink:         #131318;
+  --ink-2:       #25252C;
+  --ink-3:       #6A6A70;
+
+  /* Lore palette */
+  --green:       #247420;
+  --green-2:     #3A9A34;
+  --green-deep:  #133F10;
+  --green-tint:  #D9E5C8;
+  --purple:      #420247;
+  --purple-2:    #7F18A4;
+  --purple-deep: #28002B;
+  --purple-tint: #E4D3E5;
+  --mascot:      #E84B8A;
+  --mascot-2:    #FF3CA7;
+  --mascot-tint: #F5D2DF;
+
+  /* Signals */
+  --sun:         #F5C344;
+  --flame:       #FF5A1F;
+  --sky:         #3A6EFF;
+  --warn:        #E0241A;
+  --live:        var(--green);
+
+  /* Semantic surfaces */
+  --bg:          var(--paper);
+  --bg-2:        var(--paper-2);
+  --bg-3:        var(--paper-3);
+  --fg:          var(--ink);
+  --fg-2:        var(--ink-2);
+  --fg-3:        var(--ink-3);
+
+  --accent:      var(--green);
+  --accent-fg:   var(--paper);
+  --accent-tint: color-mix(in oklab, var(--accent) 18%, var(--bg));
+
+  --panel-bg:     var(--bg);
+  --panel-bg-2:   var(--bg-2);
+  --panel-accent: var(--accent);
+  --panel-0:      var(--bg);
+  --panel-1:      var(--bg-2);
+  --panel-2:      var(--bg-3);
+  --panel-3:      color-mix(in oklab, var(--fg) 12%, transparent);
+  --panel-text:   var(--fg);
+  --panel-text-2: var(--fg-2);
+  --panel-text-3: var(--fg-3);
+  --panel-accent-2: var(--accent-bright, var(--accent));
+  --panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent);
+
+  /* Type — one family, used purposefully. Space Grotesk for everything
+     non-mono. The display/narrow aliases stay so consumers that reference
+     them keep working; they just resolve to the body font now. */
+  --ff-display:  'Space Grotesk', system-ui, sans-serif;
+  --ff-narrow:   'Space Grotesk', system-ui, sans-serif;
+  --ff-body:     'Space Grotesk', system-ui, sans-serif;
+  --ff-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
+
+  --fs-micro:    11px;
+  --fs-tiny:     12px;
+  --fs-xs:       13px;
+  --fs-sm:       14px;
+  --fs-body:     16px;
+  --fs-lg:       18px;
+  --fs-xl:       21px;
+  --fs-h4:       clamp(19px, 1.8cqi, 24px);
+  --fs-h3:       clamp(22px, 2.4cqi, 30px);
+  --fs-h2:       clamp(28px, 3.6cqi, 44px);
+  --fs-h1:       clamp(34px, 5cqi, 64px);
+  --fs-hero:     clamp(42px, 7cqi, 96px);
+  --fs-mega:     clamp(56px, 11cqi, 168px);
+
+  --lh-tight:    1.05;
+  --lh-snug:     1.2;
+  --lh-base:     1.55;
+  --lh-long:     1.7;
+
+  --tr-caps:     0.06em;
+  --tr-label:    0.10em;
+  --tr-tight:    -0.02em;
+  --tr-tighter:  -0.03em;
+
+  /* Spacing (8pt) */
+  --space-0:     0;
+  --space-1:     4px;
+  --space-2:     8px;
+  --space-3:     16px;
+  --space-4:     24px;
+  --space-5:     32px;
+  --space-6:     48px;
+  --space-7:     64px;
+  --space-8:     96px;
+  --space-9:     128px;
+  --space-10:    192px;
+
+  --density:     1;
+  --pad-y:       calc(var(--space-5) * var(--density));
+  --pad-x:       calc(var(--space-5) * var(--density));
+  --gutter:      calc(var(--space-4) * var(--density));
+
+  /* Borders — chunky or none */
+  --bw-hair:     1px;
+  --bw-rule:     2px;
+  --bw-chunk:    4px;
+  --bw-slab:     8px;
+
+  --rule:        color-mix(in oklab, currentColor 14%, transparent);
+  --rule-strong: color-mix(in oklab, currentColor 28%, transparent);
+
+  --r-1:         10px;
+  --r-2:         14px;
+  --r-3:         22px;
+  --r-4:         32px;
+  --r-pill:      999px;
+
+  --dur-snap:    80ms;
+  --dur-base:    160ms;
+  --dur-slow:    280ms;
+  --ease:        cubic-bezier(0.2, 0, 0, 1);
+
+  --z-header:    100;
+  --z-overlay:   1000;
+
+  --measure:     68ch;
+}
+
+[data-theme="ink"] {
+  --bg:        var(--ink);
+  --bg-2:      var(--ink-2);
+  --bg-3:      #34343C;
+  --fg:        var(--paper);
+  --fg-2:      var(--paper-2);
+  --fg-3:      #9A9AA2;
+  --panel-bg:  var(--bg);
+  --panel-bg-2: var(--bg-2);
+  --panel-0:   var(--bg);
+  --panel-1:   var(--bg-2);
+  --panel-2:   var(--bg-3);
+  --panel-3:   color-mix(in oklab, var(--fg) 20%, transparent);
+  --panel-text:   var(--fg);
+  --panel-text-2: var(--fg-2);
+  --panel-text-3: var(--fg-3);
+  --accent:    var(--accent-bright, var(--green-2));
+  --accent-fg: var(--ink);
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-theme="auto"] {
+    --bg:        var(--ink);
+    --bg-2:      var(--ink-2);
+    --bg-3:      #34343C;
+    --fg:        var(--paper);
+    --fg-2:      var(--paper-2);
+    --fg-3:      #9A9AA2;
+    --panel-bg:  var(--bg);
+    --panel-bg-2: var(--bg-2);
+    --panel-0:   var(--bg);
+    --panel-1:   var(--bg-2);
+    --panel-2:   var(--bg-3);
+    --panel-3:   color-mix(in oklab, var(--fg) 20%, transparent);
+    --panel-text:   var(--fg);
+    --panel-text-2: var(--fg-2);
+    --panel-text-3: var(--fg-3);
+    --accent:    var(--accent-bright, var(--green-2));
+    --accent-fg: var(--ink);
+  }
+}
+
+/* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g.
+   mount() added the class to an inner element while the ancestor html
+   already had it), the inner element would otherwise re-trigger the root
+   light defaults and detach from the ancestor's data-theme override. Force
+   the inner element to inherit the ancestor's resolved tokens. */
+.ds-247420 .ds-247420 {
+  --bg:        inherit;
+  --bg-2:      inherit;
+  --bg-3:      inherit;
+  --fg:        inherit;
+  --fg-2:      inherit;
+  --fg-3:      inherit;
+  --panel-bg:  inherit;
+  --panel-bg-2: inherit;
+  --accent:    inherit;
+  --accent-fg: inherit;
+  --panel-1:   inherit;
+  --panel-2:   inherit;
+  --panel-3:   inherit;
+  --panel-text: inherit;
+  --panel-text-2: inherit;
+  --panel-text-3: inherit;
+  --panel-accent-2: inherit;
+  --panel-shadow: inherit;
+}
+
+[data-density="compact"]     { --density: 0.75; }
+[data-density="comfortable"] { --density: 1; }
+[data-density="spacious"]    { --density: 1.35; }
+
+[data-accent="green"]  { --accent: var(--green);  --accent-bright: var(--green-2);  --accent-fg: var(--paper); --panel-accent: var(--green);  }
+[data-accent="purple"] { --accent: var(--purple); --accent-bright: #C277FF;         --accent-fg: var(--paper); --panel-accent: var(--purple); }
+[data-accent="mascot"] { --accent: var(--mascot); --accent-bright: var(--mascot-2); --accent-fg: var(--ink);   --panel-accent: var(--mascot); }
+
+/* Type-scale modifier — opt-in body/lg/xl bump for surfaces that want denser
+   or larger reading sizes without a custom override. */
+[data-typescale="sm"] { --fs-body: 15px; --fs-lg: 17px; --fs-xl: 20px; }
+[data-typescale="lg"] { --fs-body: 17px; --fs-lg: 20px; --fs-xl: 24px; }
+
+/* Debug grid overlay — 8px mascot grid. Toggle via class on any container. */
+.with-grid-overlay {
+  background-image:
+    linear-gradient(to right, rgba(232,75,138,0.15) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(232,75,138,0.15) 1px, transparent 1px);
+  background-size: 8px 8px;
+}