@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/utils/reset.css

@@ -14,13 +14,20 @@
     margin: 0;
   }
 
+  /*
+   * The page's scrollbar gutter is always reserved [D201], so the content
+   * never moves sideways when the scrollbar comes or goes: a popup's scroll
+   * lock hiding it, a popup or a filter changing the page's height. With
+   * overlay scrollbars nothing is reserved.
+   */
   :where(html) {
+    scrollbar-gutter: stable;
     -webkit-text-size-adjust: none;
     text-size-adjust: none;
     block-size: 100%;
     color: var(--primary12);
     background-color: var(--role-ground);
-    font-family: var(--ds-font-ui);
+    font-family: var(--fgd-font-ui);
     font-size: 100%;
     line-height: var(--font-lineheight-3);
     tab-size: 2;
@@ -99,7 +106,7 @@
     color: inherit;
     text-decoration-line: underline;
     text-decoration-color: var(--role-accent);
-    text-decoration-thickness: var(--ds-stroke-1-5);
+    text-decoration-thickness: var(--border-size-1-5);
     text-underline-offset: 0.15em;
   }
 

package/utils/roles.css

@@ -23,7 +23,16 @@
  * whose rest face is --role-halo (the slider thumb): --primary3 where soft
  * fills apply, --role-halo (no change) where they drop, so the face never
  * turns the ground color [D181]. --secondary-hover is the per-scale lighter
- * neighbour (step 10 in a dark scope) that the scales module publishes.
+ * neighbour (step 10 in a dark scope; step 8 where 10 would drop a white
+ * label below 4.5:1) that the scales module publishes.
+ *
+ * Selection mark, light page grounds (§1.4.7): the secondary's own
+ * contrast ink where it carries text on step 9 (--secondary-light-mark,
+ * which each secondary scales class publishes: --yellow12 8.68 on pollen,
+ * --purple1 5.07 on heather, --indigo1 5.12 for an indigo override), else
+ * --primary12 (P12*: green, blue, orange; red's is glyph-only). So an
+ * overridden secondary never leaves --primary12 on a fill it fails, e.g.
+ * --olive12 on --indigo9 at 3.13:1 (§9.5).
  *
  * Text-bearing selection: --role-select-text / -label / -edge / -hover, for
  * a selected state that carries words (option pill, filter chip with a
@@ -32,9 +41,22 @@
  * only); glyph-only marks (✓, ●, thumbs) keep --role-select there
  * [decided by orchestrator; flagged for user review, §1.8].
  *
+ * Danger [D192]: destructive actions are red. --danger1…12 is the §1.5.4
+ * danger status scale (red), published on every scope so it resolves in
+ * that scope's mode. --role-danger / -label / -edge / -hover are the
+ * destructive solid Button's fill, label, edge and hover fill (the Menu's
+ * destructive highlight takes the fill and label); --role-danger-text is
+ * the danger ink on the ground (outline and text Button labels, Menu and
+ * Toast labels). Light scopes: fill --danger11 with --danger1 (5.11:1;
+ * light 9 and 10 carry no text), hover --danger12 (the lighter 10 drops
+ * the label to 4.28:1, so it takes the darker neighbour, as D181's step-10
+ * rule does). Dark scopes: fill --danger9 with --danger1 (4.75), hover
+ * --danger10 (5.57). Where red text fails (leaf, clay, royal) the label
+ * falls back to --primary12 and the red stays in the edge and glyph.
+ *
  * Charts [D125]: --role-series-odd is the odd series slots' ink,
  * --secondary11 on light base grounds (and a `white` plate) and --primary12
- * elsewhere (§8.7); the --ds-series-fill / --ds-series-pattern switches
+ * elsewhere (§8.7); the --fgd-series-fill / --fgd-series-pattern switches
  * (tokens.css) pick the sequential cells' screen fill or one-ink pattern.
  */
 @layer roles {
@@ -125,12 +147,36 @@
     --role-select-text-hover: var(--role-select-hover);
     /* Charts: one ink off the light base grounds (§8.7) [D125]. */
     --role-series-odd: var(--primary12);
+    /*
+     * Danger [D192]: the danger scale (red, §1.5.4), then the light map
+     * (the light page grounds and light islands): fill --danger11 with
+     * --danger1 (5.11:1), edge = fill (4.54–5.11:1 on the eight grounds),
+     * hover --danger12 (label 12.19), text --danger11 (4.54–5.11; 4.57 on
+     * the outline's --primary3 hover fill).
+     */
+    --danger1: var(--red1);
+    --danger2: var(--red2);
+    --danger3: var(--red3);
+    --danger4: var(--red4);
+    --danger5: var(--red5);
+    --danger6: var(--red6);
+    --danger7: var(--red7);
+    --danger8: var(--red8);
+    --danger9: var(--red9);
+    --danger10: var(--red10);
+    --danger11: var(--red11);
+    --danger12: var(--red12);
+    --role-danger: var(--danger11);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger11);
+    --role-danger-hover: var(--danger12);
+    --role-danger-text: var(--danger11);
     /* Switches (tokens.css): shaped edges only on the night band in light mode [D179]. */
-    --ds-edge-shaped: none;
-    --ds-link-hover-line: none;
-    --ds-soft-hover-line: none;
-    --ds-series-fill: none;
-    --ds-series-pattern: inline;
+    --fgd-edge-shaped: none;
+    --fgd-link-hover-line: none;
+    --fgd-soft-hover-line: none;
+    --fgd-series-fill: none;
+    --fgd-series-pattern: inline;
   }
 
   /* Tone-resolved aliases [D155, D141]. */
@@ -140,8 +186,8 @@
     --role-status-fill: var(--secondary4);
     /* Two-ink charts: odd slots --secondary11 and the sequential screen fills, in both modes (§8.7). */
     --role-series-odd: var(--secondary11);
-    --ds-series-fill: inline;
-    --ds-series-pattern: none;
+    --fgd-series-fill: inline;
+    --fgd-series-pattern: none;
   }
 
   [data-tone='tinted'] {
@@ -160,12 +206,18 @@
   [data-tone='solid-dark'] {
     --role-soft-hover: var(--role-ground);
     --role-soft-hover-face: var(--role-halo);
-    --ds-soft-hover-line: underline;
+    --fgd-soft-hover-line: underline;
   }
 
   /* Dark fixed scopes: a pill fill that reaches 3:1 is its own edge. */
   [data-scheme='dark'] {
     --role-pill-edge: var(--secondary9);
+    /* Danger, dark map [D192]: fill --danger9 with --danger1 (4.75), hover --danger10 (5.57); night: edge 4.50, text 8.36. */
+    --role-danger: var(--danger9);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger9);
+    --role-danger-hover: var(--danger10);
+    --role-danger-text: var(--danger11);
   }
 
   [data-tone='solid-light'],
@@ -175,7 +227,7 @@
     /* One ink [D14]: link hover is that ink plus the underline; selection hovers the inverse pair [D181]. */
     --role-link-hover: var(--primary12);
     --role-select-hover: var(--primary11);
-    --ds-link-hover-line: underline;
+    --fgd-link-hover-line: underline;
     /* The ink pill. */
     --role-pill: var(--primary12);
     --role-pill-label: var(--role-inverse);
@@ -246,7 +298,7 @@
     --role-grain-light: var(--primary4);
     --role-grain-dark: var(--primary1);
     /* The one seam tone separates (from a light page ground): the shaped edge may sit here [D179]. */
-    --ds-edge-shaped: block;
+    --fgd-edge-shaped: block;
   }
 
   [data-ground='forest'] {
@@ -268,7 +320,7 @@
     --role-grain-light: var(--primary8);
     --role-grain-dark: var(--primary6);
     --role-disabled-edge: var(--primary12); /* one text ink [D85, D115] */
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='leaf'] {
@@ -287,7 +339,7 @@
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary8);
     --role-grain-dark: var(--secondary10);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='amber'] {
@@ -306,7 +358,7 @@
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary6);
     --role-grain-dark: var(--secondary8);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='clay'] {
@@ -325,7 +377,7 @@
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary8);
     --role-grain-dark: var(--secondary10);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='pink'] {
@@ -343,7 +395,7 @@
     --role-action-label: var(--primary1);
     --role-action-edge: var(--primary12);
     --role-grain-light: var(--secondary7);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='royal'] {
@@ -361,7 +413,7 @@
     --role-action-label: var(--secondary-contrast);
     --role-action-edge: var(--secondary9);
     --role-grain-dark: var(--secondary7);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
   }
 
   [data-ground='brick'] {
@@ -382,7 +434,39 @@
     --role-status-text: var(--secondary12);
     --role-grain-light: var(--secondary8);
     --role-grain-dark: var(--secondary6);
-    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+    --fgd-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  /*
+   * Danger on the fields [D192]. The fill stays the mode's red (--danger11
+   * light, --danger9 dark), which sits near the field's own lightness, so
+   * the edge steps out: --danger11 on forest (4.00) and brick (3.76),
+   * --danger12 on royal (4.47), leaf (3.94), amber (7.28), clay (4.19) and
+   * pink (5.35). Danger text is --danger12 where it reaches 4.5:1 (forest
+   * 6.16, brick 5.80, amber, pink); on leaf (3.94), clay (4.19) and royal
+   * (4.47) it is the field's one ink, --primary12, and the red stays in the
+   * edge and the glyph (≥ 3:1).
+   */
+  [data-ground='forest'],
+  [data-ground='royal'],
+  [data-ground='brick'],
+  [data-ground='leaf'],
+  [data-ground='amber'],
+  [data-ground='clay'],
+  [data-ground='pink'] {
+    --role-danger-edge: var(--danger12);
+    --role-danger-text: var(--danger12);
+  }
+
+  [data-ground='forest'],
+  [data-ground='brick'] {
+    --role-danger-edge: var(--danger11);
+  }
+
+  [data-ground='royal'],
+  [data-ground='leaf'],
+  [data-ground='clay'] {
+    --role-danger-text: var(--primary12);
   }
 
   /*
@@ -399,7 +483,7 @@
    */
   [data-theme='dark']:not([data-ground]) [data-ground='night'] {
     --role-seam: var(--primary12);
-    --ds-edge-shaped: none;
+    --fgd-edge-shaped: none;
   }
 
   /*
@@ -430,7 +514,7 @@
     --role-pill: var(--secondary9);
     --role-pill-label: var(--secondary-contrast);
     --role-pill-edge: var(--secondary9);
-    --ds-link-hover-line: none;
+    --fgd-link-hover-line: none;
   }
 
   [data-theme='dark'] [data-ground='white'][data-scheme='page'] {
@@ -466,14 +550,14 @@
     --role-select-text-label: var(--role-select-mark);
     --role-select-text-edge: var(--role-select-edge);
     --role-select-text-hover: var(--role-select-hover);
-    --ds-link-hover-line: none;
+    --fgd-link-hover-line: none;
   }
 
   [data-theme='dark'] [data-ground='rose'][data-scheme='page'],
   [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
     /* No text-safe accent (--red9 4.17, --purple10 3.55): links stay ink, and hover adds the underline [D176, D181]. */
     --role-link-hover: var(--primary12);
-    --ds-link-hover-line: underline;
+    --fgd-link-hover-line: underline;
   }
 
   [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
@@ -488,6 +572,31 @@
     --role-pill-edge: var(--primary12);
   }
 
+  /*
+   * Danger on the page grounds, dark mode [D192]: fill --danger9 with
+   * --danger1 (4.75), edge = fill (3.77–4.80 against the eight dark
+   * grounds), hover --danger10 (5.57), text --danger11 (6.99–8.92).
+   */
+  :root[data-theme='dark'],
+  [data-theme='dark'] [data-ground][data-scheme='page'] {
+    --role-danger: var(--danger9);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger9);
+    --role-danger-hover: var(--danger10);
+    --role-danger-text: var(--danger11);
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']),
+    :root:not([data-theme='light']) [data-ground][data-scheme='page'] {
+      --role-danger: var(--danger9);
+      --role-danger-label: var(--danger1);
+      --role-danger-edge: var(--danger9);
+      --role-danger-hover: var(--danger10);
+      --role-danger-text: var(--danger11);
+    }
+  }
+
   @media only screen and (prefers-color-scheme: dark) {
     :root:not([data-theme='light']),
     :root:not([data-theme='light']) [data-ground='paper'][data-scheme='page'],
@@ -510,7 +619,7 @@
       --role-pill: var(--secondary9);
       --role-pill-label: var(--secondary-contrast);
       --role-pill-edge: var(--secondary9);
-      --ds-link-hover-line: none;
+      --fgd-link-hover-line: none;
     }
 
     :root:not([data-theme='light']) [data-ground='white'][data-scheme='page'] {
@@ -545,14 +654,14 @@
       --role-select-text-label: var(--role-select-mark);
       --role-select-text-edge: var(--role-select-edge);
       --role-select-text-hover: var(--role-select-hover);
-      --ds-link-hover-line: none;
+      --fgd-link-hover-line: none;
     }
 
     :root:not([data-theme='light']) [data-ground='rose'][data-scheme='page'],
     :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
       /* No text-safe accent (--red9 4.17, --purple10 3.55): links stay ink, and hover adds the underline [D176, D181]. */
       --role-link-hover: var(--primary12);
-      --ds-link-hover-line: underline;
+      --fgd-link-hover-line: underline;
     }
 
     :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
@@ -569,7 +678,7 @@
 
     :root:not([data-theme='light']) [data-ground='night'] {
       --role-seam: var(--primary12);
-      --ds-edge-shaped: none;
+      --fgd-edge-shaped: none;
     }
   }
 
@@ -592,7 +701,7 @@
     --role-tint: var(--primary5);
     --role-accent: var(--secondary11);
     --role-select: var(--secondary9);
-    --role-select-mark: var(--primary12);
+    --role-select-mark: var(--secondary-light-mark, var(--primary12));
     --role-select-edge: var(--secondary11);
     --role-action: var(--secondary9);
     --role-action-label: var(--secondary-contrast);
@@ -603,7 +712,7 @@
     --role-pill: var(--secondary9);
     --role-pill-label: var(--secondary-contrast);
     --role-pill-edge: var(--secondary11);
-    --ds-link-hover-line: none;
+    --fgd-link-hover-line: none;
   }
 
   [data-ground='white'],
@@ -631,7 +740,7 @@
     --role-tint: var(--primary5);
     --role-accent: var(--secondary11);
     --role-select: var(--secondary9);
-    --role-select-mark: var(--primary12);
+    --role-select-mark: var(--secondary-light-mark, var(--primary12));
     --role-select-edge: var(--secondary11);
     --role-action: var(--secondary9);
     --role-action-label: var(--secondary-contrast);
@@ -642,15 +751,7 @@
     --role-pill: var(--secondary9);
     --role-pill-label: var(--secondary-contrast);
     --role-pill-edge: var(--secondary11);
-    --ds-link-hover-line: none;
-  }
-
-  [data-ground='pollen'],
-  :root [data-theme='light'] [data-ground='pollen'][data-scheme='page'],
-  [data-ground='heather'],
-  :root [data-theme='light'] [data-ground='heather'][data-scheme='page'] {
-    /* Selection mark: the scale's own contrast ink (--yellow12 8.68, --purple1 5.07). */
-    --role-select-mark: var(--secondary-contrast);
+    --fgd-link-hover-line: none;
   }
 
   [data-ground='rose'],
@@ -677,6 +778,15 @@
     --role-select-text-hover: var(--primary11);
   }
 
+  /* Danger under a light preview wrapper: the light map again [D192]. */
+  :root [data-theme='light'] [data-ground][data-scheme='page'] {
+    --role-danger: var(--danger11);
+    --role-danger-label: var(--danger1);
+    --role-danger-edge: var(--danger11);
+    --role-danger-hover: var(--danger12);
+    --role-danger-text: var(--danger11);
+  }
+
   /*
    * The night band under a light preview wrapper keeps its light-mode seam
    * and shaped edge. Like the dark rule, only the page's mode counts, never
@@ -684,6 +794,6 @@
    */
   :root [data-theme='light']:not([data-ground]) [data-ground='night'] {
     --role-seam: var(--role-ground);
-    --ds-edge-shaped: block;
+    --fgd-edge-shaped: block;
   }
 }

package/utils/scales.module.css

@@ -5,6 +5,9 @@
  * No mode logic: the Radix variables resolve to whatever mode is in effect.
  * action<Scale> publishes a scope's action scale: Ground, and the overlay
  * roots that declare their own scope, so a popup never inherits the root's.
+ * --secondary-light-mark: the light-scope mark on step 9, the scale's own
+ * contrast ink where it carries text, else `initial` so the role maps fall
+ * back to --primary12 (§1.4.7).
  */
 @layer scales {
   .primaryAmber {
@@ -549,6 +552,7 @@
     --secondary12: var(--amber12);
     --secondary-contrast: var(--amber-contrast);
     --secondary-hover: var(--amber-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryBlue {
@@ -566,6 +570,7 @@
     --secondary12: var(--blue12);
     --secondary-contrast: var(--blue-contrast);
     --secondary-hover: var(--blue-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryBronze {
@@ -583,6 +588,7 @@
     --secondary12: var(--bronze12);
     --secondary-contrast: var(--bronze-contrast);
     --secondary-hover: var(--bronze-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryBrown {
@@ -600,6 +606,7 @@
     --secondary12: var(--brown12);
     --secondary-contrast: var(--brown-contrast);
     --secondary-hover: var(--brown-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryCrimson {
@@ -617,6 +624,7 @@
     --secondary12: var(--crimson12);
     --secondary-contrast: var(--crimson-contrast);
     --secondary-hover: var(--crimson-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryCyan {
@@ -634,6 +642,7 @@
     --secondary12: var(--cyan12);
     --secondary-contrast: var(--cyan-contrast);
     --secondary-hover: var(--cyan-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryGold {
@@ -651,6 +660,7 @@
     --secondary12: var(--gold12);
     --secondary-contrast: var(--gold-contrast);
     --secondary-hover: var(--gold-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryGrass {
@@ -668,6 +678,7 @@
     --secondary12: var(--grass12);
     --secondary-contrast: var(--grass-contrast);
     --secondary-hover: var(--grass-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryGray {
@@ -685,6 +696,7 @@
     --secondary12: var(--gray12);
     --secondary-contrast: var(--gray-contrast);
     --secondary-hover: var(--gray-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryGreen {
@@ -702,6 +714,7 @@
     --secondary12: var(--green12);
     --secondary-contrast: var(--green-contrast);
     --secondary-hover: var(--green-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryIndigo {
@@ -719,6 +732,7 @@
     --secondary12: var(--indigo12);
     --secondary-contrast: var(--indigo-contrast);
     --secondary-hover: var(--indigo-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryIris {
@@ -736,6 +750,7 @@
     --secondary12: var(--iris12);
     --secondary-contrast: var(--iris-contrast);
     --secondary-hover: var(--iris-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryJade {
@@ -753,6 +768,7 @@
     --secondary12: var(--jade12);
     --secondary-contrast: var(--jade-contrast);
     --secondary-hover: var(--jade-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryLime {
@@ -770,6 +786,7 @@
     --secondary12: var(--lime12);
     --secondary-contrast: var(--lime-contrast);
     --secondary-hover: var(--lime-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryMauve {
@@ -787,6 +804,7 @@
     --secondary12: var(--mauve12);
     --secondary-contrast: var(--mauve-contrast);
     --secondary-hover: var(--mauve-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryMint {
@@ -804,6 +822,7 @@
     --secondary12: var(--mint12);
     --secondary-contrast: var(--mint-contrast);
     --secondary-hover: var(--mint-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryOlive {
@@ -821,6 +840,7 @@
     --secondary12: var(--olive12);
     --secondary-contrast: var(--olive-contrast);
     --secondary-hover: var(--olive-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryOrange {
@@ -838,6 +858,7 @@
     --secondary12: var(--orange12);
     --secondary-contrast: var(--orange-contrast);
     --secondary-hover: var(--orange-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryPink {
@@ -855,6 +876,7 @@
     --secondary12: var(--pink12);
     --secondary-contrast: var(--pink-contrast);
     --secondary-hover: var(--pink-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryPlum {
@@ -872,6 +894,7 @@
     --secondary12: var(--plum12);
     --secondary-contrast: var(--plum-contrast);
     --secondary-hover: var(--plum-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryPurple {
@@ -889,6 +912,7 @@
     --secondary12: var(--purple12);
     --secondary-contrast: var(--purple-contrast);
     --secondary-hover: var(--purple-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryRed {
@@ -906,6 +930,7 @@
     --secondary12: var(--red12);
     --secondary-contrast: var(--red-contrast);
     --secondary-hover: var(--red-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryRuby {
@@ -923,6 +948,7 @@
     --secondary12: var(--ruby12);
     --secondary-contrast: var(--ruby-contrast);
     --secondary-hover: var(--ruby-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondarySage {
@@ -940,6 +966,7 @@
     --secondary12: var(--sage12);
     --secondary-contrast: var(--sage-contrast);
     --secondary-hover: var(--sage-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondarySand {
@@ -957,6 +984,7 @@
     --secondary12: var(--sand12);
     --secondary-contrast: var(--sand-contrast);
     --secondary-hover: var(--sand-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondarySky {
@@ -974,6 +1002,7 @@
     --secondary12: var(--sky12);
     --secondary-contrast: var(--sky-contrast);
     --secondary-hover: var(--sky-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondarySlate {
@@ -991,6 +1020,7 @@
     --secondary12: var(--slate12);
     --secondary-contrast: var(--slate-contrast);
     --secondary-hover: var(--slate-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryTeal {
@@ -1008,6 +1038,7 @@
     --secondary12: var(--teal12);
     --secondary-contrast: var(--teal-contrast);
     --secondary-hover: var(--teal-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryTomato {
@@ -1025,6 +1056,7 @@
     --secondary12: var(--tomato12);
     --secondary-contrast: var(--tomato-contrast);
     --secondary-hover: var(--tomato-hover);
+    --secondary-light-mark: initial;
   }
 
   .secondaryViolet {
@@ -1042,6 +1074,7 @@
     --secondary12: var(--violet12);
     --secondary-contrast: var(--violet-contrast);
     --secondary-hover: var(--violet-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .secondaryYellow {
@@ -1059,6 +1092,7 @@
     --secondary12: var(--yellow12);
     --secondary-contrast: var(--yellow-contrast);
     --secondary-hover: var(--yellow-hover);
+    --secondary-light-mark: var(--secondary-contrast);
   }
 
   .actionAmber {

package/utils/seriesPatterns.js

@@ -57,10 +57,10 @@ export function safeId(reactId, lead) {
     return `${lead}${reactId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
 }
 /*
- * §1.5.9 geometry, px: hatch 1 px lines at --ds-hatch-pitch 6 px, measured
+ * §1.5.9 geometry, px: hatch 1 px lines at --fgd-hatch-pitch 6 px, measured
  * perpendicular to the lines (an SVG pattern rotates an exact 6 px tile, so
- * it needs no 8 px CSS tile); dot screens --ds-dotscreen-dot 1.25 px or
- * --ds-dotscreen-dot-heavy 2 px at --ds-dotscreen-pitch-1/-2/-3 (6/5/4 px).
+ * it needs no 8 px CSS tile); dot screens --fgd-dotscreen-dot 1.25 px or
+ * --fgd-dotscreen-dot-heavy 2 px at --fgd-dotscreen-pitch-1/-2/-3 (6/5/4 px).
  * SVG pattern attributes cannot read custom properties, so the values are
  * mirrored here.
  */