anentrypoint-design 1.0.19 → 1.0.21

package/colors_and_type.css

@@ -92,6 +92,12 @@
      thebird warm-paper preset (5.25:1) while staying visually a clear
      warm red. */
   --warn:        #C41C0C;
+  /* Paired foreground for --warn used as a FILL (a danger button background),
+     not as text-on-paper (--warn's own tuning above). --paper clears 5.97:1
+     on this --warn -- --warn was tuned dark specifically for the text-on-paper
+     direction, so re-using it for the opposite direction (paper text on this
+     as a fill) needs its own token, not a re-derivation of --warn itself. */
+  --warn-fg:     var(--paper);
   /* Syntax-token aliases: light values pass 4.5:1 on paper; the dark blocks
      restore the bright dark-tuned originals. Components reference ONLY these. */
   --code-string:  var(--green);
@@ -180,6 +186,13 @@
   --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);
+  /* Single-layer, half-strength companion to --shadow-1, used ONLY by .panel.
+     .panel already carries a tonal --panel-1 fill and a --rule border; a
+     full --shadow-1 on top made three simultaneous edge/surface signals
+     read as boxed/cardy rather than PilotDeck's flat, near-borderless look.
+     --shadow-1/2/3 stay untouched — they are the real elevation scale for
+     things that must read as floating (dialog/dropdown/tooltip/toast). */
+  --panel-shadow-1: 0 1px 2px color-mix(in oklab, var(--fg) 4%, transparent);
 
   /* Type — system-font stack, no custom web fonts loaded. */
   --ff-display:  system-ui, sans-serif;
@@ -214,7 +227,7 @@
   --fs-h4:       clamp(24px, 2cqi, 28px);
   --fs-h3:       clamp(26px, 2.6cqi, 34px);
   --fs-h2:       clamp(28px, 3.6cqi, 44px);
-  --fs-h1:       clamp(34px, 5cqi, 64px);
+  --fs-h1:       clamp(34px, 4.4cqi, 52px);
   --fs-hero:     clamp(42px, 7cqi, 96px);
   --fs-mega:     clamp(56px, 11cqi, 168px);
   /* Bridges the fixed --fs-* ladder (tops out at --fs-xl, 21px) and the fluid
@@ -234,9 +247,9 @@
      marketing/hero layouts (h1 up to 64px). Application chrome — page titles,
      panel headers — needs a compact ceiling so a PageHeader title doesn't
      dwarf the content. Opt in with `data-typescale="app"` on a container. */
-  --fs-h1-app:   clamp(22px, 2.4cqi, 30px);
-  --fs-h2-app:   clamp(19px, 2cqi, 24px);
-  --fs-h3-app:   clamp(17px, 1.8cqi, 20px);
+  --fs-h1-app:   clamp(22px, 2cqi, 26px);
+  --fs-h2-app:   clamp(18px, 1.6cqi, 21px);
+  --fs-h3-app:   clamp(16px, 1.5cqi, 18px);
   --fs-h4-app:   clamp(15px, 1.6cqi, 17px);
 
   --lh-tight:    1.05;
@@ -283,7 +296,14 @@
   --bw-chunk:    4px;
   --bw-slab:     8px;
 
-  --rule:        color-mix(in oklab, currentColor 14%, transparent);
+  /* Retuned toward PilotDeck's near-borderless whisper: 14% read as a visibly
+     drawn line, not a hairline. 8% keeps the edge perceptible (still enough to
+     separate a --panel-1-filled surface from its --bg backdrop) without
+     competing with the fill + shadow already doing the container-definition
+     work in .panel. --rule-strong is untouched — it is the deliberate
+     stronger variant for places that need a visible seam (table rules, active
+     tab underline), not the ambient panel/card edge. */
+  --rule:        color-mix(in oklab, currentColor 8%, transparent);
   --rule-strong: color-mix(in oklab, currentColor 28%, transparent);
 
   /* Micro rungs below --r-1 — chips, badges, scrollbar thumbs, tick marks
@@ -529,6 +549,10 @@ select:focus-visible {
   /* warn/sky dark-tuned pairs (mirror flame/amber): the :root paper values
      (#E0241A / #3A6EFF) are too dark on ink; these clear AA 4.5:1 on --ink. */
   --warn:      #FF5A52;
+  /* Paired foreground for --warn-as-fill (see :root's --warn-fg comment) --
+     dark theme's --warn is the lighter tuned red, so its fill needs the dark
+     --ink text, the opposite pairing from :root. */
+  --warn-fg:   var(--ink);
   --sky:       #6E9BFF;
   /* Category/heritage dark-tuned pairs (same convention as flame/amber/warn/
      sky above): the :root values are the PAPER tones and go dark-on-dark here.
@@ -617,6 +641,7 @@ select:focus-visible {
     --flame:     #FF5A1F;
     --amber:     #D9A93A;
     --warn:      #FF5A52;
+    --warn-fg:   var(--ink);
     --sky:       #6E9BFF;
     /* Mirrors the [data-theme="ink"] category retune above token-for-token —
        see that block for the measured before/after ratios. */
@@ -662,6 +687,7 @@ select:focus-visible {
   --panel-text-3: inherit;
   --panel-accent-2: inherit;
   --panel-shadow: inherit;
+  --panel-shadow-1: inherit;
   --on-accent: inherit;
   --on-color: inherit;
   --scrim: inherit;
@@ -746,6 +772,7 @@ select:focus-visible {
   --flame:     #ff7b72;
   --amber:     #d29922;
   --warn:      #ff7b72;
+  --warn-fg:   #0d1117;
   --sky:       #58a6ff;
   --mascot-deep: #ff7b72;
   --purple-2:  #d2a8ff;
@@ -781,14 +808,14 @@ select:focus-visible {
   --fs-h4: clamp(22px, 1.9cqi, 24px);
   --fs-h3: clamp(23px, 2.4cqi, 32px);
   --fs-h2: clamp(26px, 3.4cqi, 41px);
-  --fs-h1: clamp(32px, 4.7cqi, 60px);
+  --fs-h1: clamp(32px, 4.2cqi, 48px);
 }
 [data-typescale="lg"] {
   --fs-body: 17px; --fs-lg: 20px; --fs-xl: 24px;
   --fs-h4: clamp(27px, 2.2cqi, 31px);
   --fs-h3: clamp(28px, 2.9cqi, 38px);
   --fs-h2: clamp(31px, 4cqi, 49px);
-  --fs-h1: clamp(38px, 5.6cqi, 71px);
+  --fs-h1: clamp(38px, 4.8cqi, 58px);
 }
 
 /* Debug grid overlay — 8px mascot grid. Toggle via class on any container. */