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

package/utils/colorsLightDefault.css

@@ -939,7 +939,7 @@
     --gray11: #b4b4b4;
     --gray12: #eeeeee;
     --gray-contrast: #fff;
-    --gray-hover: var(--gray10);
+    --gray-hover: var(--gray8);
     --green1: #0e1512;
     --green2: #121b17;
     --green3: #132d21;
@@ -967,7 +967,7 @@
     --indigo11: #9eb1ff;
     --indigo12: #d6e1ff;
     --indigo-contrast: #fff;
-    --indigo-hover: var(--indigo10);
+    --indigo-hover: var(--indigo8);
     --iris1: #13131e;
     --iris2: #171625;
     --iris3: #202248;
@@ -981,7 +981,7 @@
     --iris11: #b1a9ff;
     --iris12: #e0dffe;
     --iris-contrast: #fff;
-    --iris-hover: var(--iris10);
+    --iris-hover: var(--iris8);
     --jade1: #0d1512;
     --jade2: #121c18;
     --jade3: #0f2e22;
@@ -1023,7 +1023,7 @@
     --mauve11: #b5b2bc;
     --mauve12: #eeeef0;
     --mauve-contrast: #fff;
-    --mauve-hover: var(--mauve10);
+    --mauve-hover: var(--mauve8);
     --mint1: #0e1515;
     --mint2: #0f1b1b;
     --mint3: #092c2b;
@@ -1051,7 +1051,7 @@
     --olive11: #afb5ad;
     --olive12: #eceeec;
     --olive-contrast: #fff;
-    --olive-hover: var(--olive10);
+    --olive-hover: var(--olive8);
     --orange1: #17120e;
     --orange2: #1e160f;
     --orange3: #331e0b;
@@ -1093,7 +1093,7 @@
     --plum11: #e796f3;
     --plum12: #f4d4f4;
     --plum-contrast: #fff;
-    --plum-hover: var(--plum10);
+    --plum-hover: var(--plum8);
     --purple1: #18111b;
     --purple2: #1e1523;
     --purple3: #301c3b;
@@ -1107,7 +1107,7 @@
     --purple11: #d19dff;
     --purple12: #ecd9fa;
     --purple-contrast: #fff;
-    --purple-hover: var(--purple10);
+    --purple-hover: var(--purple8);
     --red1: #191111;
     --red2: #201314;
     --red3: #3b1219;
@@ -1149,7 +1149,7 @@
     --sage11: #adb5b2;
     --sage12: #eceeed;
     --sage-contrast: #fff;
-    --sage-hover: var(--sage10);
+    --sage-hover: var(--sage8);
     --sand1: #111110;
     --sand2: #191918;
     --sand3: #222221;
@@ -1163,7 +1163,7 @@
     --sand11: #b5b3ad;
     --sand12: #eeeeec;
     --sand-contrast: #fff;
-    --sand-hover: var(--sand10);
+    --sand-hover: var(--sand8);
     --sky1: #0d141f;
     --sky2: #111a27;
     --sky3: #112840;
@@ -1191,7 +1191,7 @@
     --slate11: #b0b4ba;
     --slate12: #edeef0;
     --slate-contrast: #fff;
-    --slate-hover: var(--slate10);
+    --slate-hover: var(--slate8);
     --teal1: #0d1514;
     --teal2: #111c1b;
     --teal3: #0d2d2a;
@@ -1233,7 +1233,7 @@
     --violet11: #baa7ff;
     --violet12: #e2ddfe;
     --violet-contrast: #fff;
-    --violet-hover: var(--violet10);
+    --violet-hover: var(--violet8);
     --yellow1: #14120b;
     --yellow2: #1b180f;
     --yellow3: #2d2305;

package/utils/global.css

@@ -3,8 +3,8 @@
 
 /*
  * The design system's global entry point. Import once in the app shell:
- *   import '@fairgarden-private/design/utils/global.css'
- *   import '@fairgarden-private/design/utils/fonts'
+ *   import '@fairgarden/design/utils/global.css'
+ *   import '@fairgarden/design/utils/fonts'
  * Mode strategy: follow-OS (colors.css + theme.css + roles.css).
  */
 
@@ -299,6 +299,8 @@
     --ds-size-control-xl: 56px;
     --ds-size-hit: 44px;
     --ds-size-icon-block: 36px;
+    /* The logo mark in a lockup, a prominent mark sized to the header bar: 40 px, 48 px from --lg-n-above, 32 px below --xs-n-below (§1.5.12). */
+    --ds-size-logo: var(--ds-size-control-md);
     --ds-size-bar-utility: 36px;
     --ds-size-art-s: 152px;
     --ds-size-art-l: 312px;
@@ -374,8 +376,15 @@
     }
   }
 
+  @media (max-width: 359.98px) {
+    :root {
+      --ds-size-logo: var(--size-px-7);
+    }
+  }
+
   @media (min-width: 1024px) {
     :root {
+      --ds-size-logo: var(--size-px-8);
       --ds-space-margin: var(--ds-space-40);
       --ds-space-section: var(--size-px-10);
       --ds-ruled-pitch: 29px;
@@ -1403,7 +1412,7 @@
     --gray11: #b4b4b4;
     --gray12: #eeeeee;
     --gray-contrast: #fff;
-    --gray-hover: var(--gray10);
+    --gray-hover: var(--gray8);
     --green1: #0e1512;
     --green2: #121b17;
     --green3: #132d21;
@@ -1431,7 +1440,7 @@
     --indigo11: #9eb1ff;
     --indigo12: #d6e1ff;
     --indigo-contrast: #fff;
-    --indigo-hover: var(--indigo10);
+    --indigo-hover: var(--indigo8);
     --iris1: #13131e;
     --iris2: #171625;
     --iris3: #202248;
@@ -1445,7 +1454,7 @@
     --iris11: #b1a9ff;
     --iris12: #e0dffe;
     --iris-contrast: #fff;
-    --iris-hover: var(--iris10);
+    --iris-hover: var(--iris8);
     --jade1: #0d1512;
     --jade2: #121c18;
     --jade3: #0f2e22;
@@ -1487,7 +1496,7 @@
     --mauve11: #b5b2bc;
     --mauve12: #eeeef0;
     --mauve-contrast: #fff;
-    --mauve-hover: var(--mauve10);
+    --mauve-hover: var(--mauve8);
     --mint1: #0e1515;
     --mint2: #0f1b1b;
     --mint3: #092c2b;
@@ -1515,7 +1524,7 @@
     --olive11: #afb5ad;
     --olive12: #eceeec;
     --olive-contrast: #fff;
-    --olive-hover: var(--olive10);
+    --olive-hover: var(--olive8);
     --orange1: #17120e;
     --orange2: #1e160f;
     --orange3: #331e0b;
@@ -1557,7 +1566,7 @@
     --plum11: #e796f3;
     --plum12: #f4d4f4;
     --plum-contrast: #fff;
-    --plum-hover: var(--plum10);
+    --plum-hover: var(--plum8);
     --purple1: #18111b;
     --purple2: #1e1523;
     --purple3: #301c3b;
@@ -1571,7 +1580,7 @@
     --purple11: #d19dff;
     --purple12: #ecd9fa;
     --purple-contrast: #fff;
-    --purple-hover: var(--purple10);
+    --purple-hover: var(--purple8);
     --red1: #191111;
     --red2: #201314;
     --red3: #3b1219;
@@ -1613,7 +1622,7 @@
     --sage11: #adb5b2;
     --sage12: #eceeed;
     --sage-contrast: #fff;
-    --sage-hover: var(--sage10);
+    --sage-hover: var(--sage8);
     --sand1: #111110;
     --sand2: #191918;
     --sand3: #222221;
@@ -1627,7 +1636,7 @@
     --sand11: #b5b3ad;
     --sand12: #eeeeec;
     --sand-contrast: #fff;
-    --sand-hover: var(--sand10);
+    --sand-hover: var(--sand8);
     --sky1: #0d141f;
     --sky2: #111a27;
     --sky3: #112840;
@@ -1655,7 +1664,7 @@
     --slate11: #b0b4ba;
     --slate12: #edeef0;
     --slate-contrast: #fff;
-    --slate-hover: var(--slate10);
+    --slate-hover: var(--slate8);
     --teal1: #0d1514;
     --teal2: #111c1b;
     --teal3: #0d2d2a;
@@ -1697,7 +1706,7 @@
     --violet11: #baa7ff;
     --violet12: #e2ddfe;
     --violet-contrast: #fff;
-    --violet-hover: var(--violet10);
+    --violet-hover: var(--violet8);
     --yellow1: #14120b;
     --yellow2: #1b180f;
     --yellow3: #2d2305;
@@ -2216,7 +2225,7 @@
       --gray11: #b4b4b4;
       --gray12: #eeeeee;
       --gray-contrast: #fff;
-      --gray-hover: var(--gray10);
+      --gray-hover: var(--gray8);
       --green1: #0e1512;
       --green2: #121b17;
       --green3: #132d21;
@@ -2244,7 +2253,7 @@
       --indigo11: #9eb1ff;
       --indigo12: #d6e1ff;
       --indigo-contrast: #fff;
-      --indigo-hover: var(--indigo10);
+      --indigo-hover: var(--indigo8);
       --iris1: #13131e;
       --iris2: #171625;
       --iris3: #202248;
@@ -2258,7 +2267,7 @@
       --iris11: #b1a9ff;
       --iris12: #e0dffe;
       --iris-contrast: #fff;
-      --iris-hover: var(--iris10);
+      --iris-hover: var(--iris8);
       --jade1: #0d1512;
       --jade2: #121c18;
       --jade3: #0f2e22;
@@ -2300,7 +2309,7 @@
       --mauve11: #b5b2bc;
       --mauve12: #eeeef0;
       --mauve-contrast: #fff;
-      --mauve-hover: var(--mauve10);
+      --mauve-hover: var(--mauve8);
       --mint1: #0e1515;
       --mint2: #0f1b1b;
       --mint3: #092c2b;
@@ -2328,7 +2337,7 @@
       --olive11: #afb5ad;
       --olive12: #eceeec;
       --olive-contrast: #fff;
-      --olive-hover: var(--olive10);
+      --olive-hover: var(--olive8);
       --orange1: #17120e;
       --orange2: #1e160f;
       --orange3: #331e0b;
@@ -2370,7 +2379,7 @@
       --plum11: #e796f3;
       --plum12: #f4d4f4;
       --plum-contrast: #fff;
-      --plum-hover: var(--plum10);
+      --plum-hover: var(--plum8);
       --purple1: #18111b;
       --purple2: #1e1523;
       --purple3: #301c3b;
@@ -2384,7 +2393,7 @@
       --purple11: #d19dff;
       --purple12: #ecd9fa;
       --purple-contrast: #fff;
-      --purple-hover: var(--purple10);
+      --purple-hover: var(--purple8);
       --red1: #191111;
       --red2: #201314;
       --red3: #3b1219;
@@ -2426,7 +2435,7 @@
       --sage11: #adb5b2;
       --sage12: #eceeed;
       --sage-contrast: #fff;
-      --sage-hover: var(--sage10);
+      --sage-hover: var(--sage8);
       --sand1: #111110;
       --sand2: #191918;
       --sand3: #222221;
@@ -2440,7 +2449,7 @@
       --sand11: #b5b3ad;
       --sand12: #eeeeec;
       --sand-contrast: #fff;
-      --sand-hover: var(--sand10);
+      --sand-hover: var(--sand8);
       --sky1: #0d141f;
       --sky2: #111a27;
       --sky3: #112840;
@@ -2468,7 +2477,7 @@
       --slate11: #b0b4ba;
       --slate12: #edeef0;
       --slate-contrast: #fff;
-      --slate-hover: var(--slate10);
+      --slate-hover: var(--slate8);
       --teal1: #0d1514;
       --teal2: #111c1b;
       --teal3: #0d2d2a;
@@ -2510,7 +2519,7 @@
       --violet11: #baa7ff;
       --violet12: #e2ddfe;
       --violet-contrast: #fff;
-      --violet-hover: var(--violet10);
+      --violet-hover: var(--violet8);
       --yellow1: #14120b;
       --yellow2: #1b180f;
       --yellow3: #2d2305;
@@ -2956,7 +2965,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
@@ -2965,6 +2983,19 @@
  * 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
@@ -3058,6 +3089,30 @@
     --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;
@@ -3099,6 +3154,12 @@
   /* 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'],
@@ -3318,6 +3379,38 @@
     --ds-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);
+  }
+
   /*
    * The night band in dark mode [D179]: its seam turns visible as its
    * --primary12 (12.7–16.2:1 against the eight dark page grounds), and its
@@ -3421,6 +3514,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'],
@@ -3525,7 +3643,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);
@@ -3564,7 +3682,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);
@@ -3578,14 +3696,6 @@
     --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);
-  }
-
   [data-ground='rose'],
   :root [data-theme='light'] [data-ground='rose'][data-scheme='page'],
   [data-ground='heather'],
@@ -3610,6 +3720,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