@fairgarden/design 0.1.0-alpha.1 → 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

@@ -56,7 +56,7 @@
  *
  * 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 {
@@ -172,11 +172,11 @@
     --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]. */
@@ -186,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'] {
@@ -206,7 +206,7 @@
   [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. */
@@ -227,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);
@@ -298,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'] {
@@ -320,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'] {
@@ -339,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'] {
@@ -358,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'] {
@@ -377,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'] {
@@ -395,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'] {
@@ -413,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'] {
@@ -434,7 +434,7 @@
     --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] */
   }
 
   /*
@@ -483,7 +483,7 @@
    */
   [data-theme='dark']:not([data-ground]) [data-ground='night'] {
     --role-seam: var(--primary12);
-    --ds-edge-shaped: none;
+    --fgd-edge-shaped: none;
   }
 
   /*
@@ -514,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'] {
@@ -550,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'] {
@@ -619,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'] {
@@ -654,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'] {
@@ -678,7 +678,7 @@
 
     :root:not([data-theme='light']) [data-ground='night'] {
       --role-seam: var(--primary12);
-      --ds-edge-shaped: none;
+      --fgd-edge-shaped: none;
     }
   }
 
@@ -712,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'],
@@ -751,7 +751,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='rose'],
@@ -794,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/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.
  */

package/utils/syntax.module.css

@@ -0,0 +1,92 @@
+/*
+ * Syntax tiers for highlighted code outside a Code Block: inline code in
+ * prose and the type signatures in API tables (starry-night `pl-*` and the
+ * docs pipeline's `fgd-*` classes). Compose `syntax` into the part that
+ * holds the code, in a top-level rule outside any @layer:
+ *   .code { composes: syntax from '../../utils/syntax.module.css'; }
+ * Scoped to `.syntax`, so it never reaches a Code Block, whose own rules
+ * color its source. The same three tiers as the Code Block: the ink, the
+ * secondary step 12 and the primary step 11, with weight and slant telling
+ * the rest apart. Print turns every step black; weight and slant remain.
+ */
+@layer base {
+  .syntax :global(.pl-c) {
+    color: var(--primary11);
+    font-style: italic;
+  }
+
+  .syntax :global(.pl-ba),
+  .syntax :global(.pl-sg),
+  .syntax :global(.fgd-pu),
+  .syntax :global(.fgd-ae),
+  .syntax :global(.fgd-td) {
+    color: var(--primary11);
+    font-style: normal;
+  }
+
+  /* Keywords and tags. */
+  .syntax :global(.pl-k),
+  .syntax :global(.pl-ent),
+  .syntax :global(.fgd-jt),
+  .syntax :global(.fgd-ht),
+  .syntax :global(.fgd-this) {
+    color: var(--secondary12);
+    font-weight: var(--font-weight-7);
+  }
+
+  /* Constants: numbers, booleans, null, built-in types, CSS values. */
+  .syntax :global(.pl-c1),
+  .syntax :global(.pl-s .pl-v),
+  .syntax :global(.fgd-num),
+  .syntax :global(.fgd-bool),
+  .syntax :global(.fgd-n),
+  .syntax :global(.fgd-cv),
+  .syntax :global(.fgd-bt) {
+    color: var(--secondary12);
+    font-weight: var(--font-weight-4);
+    font-style: normal;
+  }
+
+  /* Strings: the ink, oblique. */
+  .syntax :global(.pl-s),
+  .syntax :global(.pl-pds),
+  .syntax :global(.pl-sr),
+  .syntax :global(.fgd-av),
+  .syntax :global(.fgd-ps) {
+    color: var(--primary12);
+    font-style: italic;
+  }
+
+  /* Functions and entity names: the ink, heavy. */
+  .syntax :global(.pl-e),
+  .syntax :global(.pl-en),
+  .syntax :global(.pl-v),
+  .syntax :global(.pl-smw),
+  .syntax :global(.fgd-jv) {
+    color: var(--primary12);
+    font-weight: var(--font-weight-7);
+  }
+
+  /* Plain identifiers and code inside a string: the ink. */
+  .syntax :global(.pl-smi),
+  .syntax :global(.pl-s .pl-s1),
+  .syntax :global(.fgd-op),
+  .syntax :global(.fgd-ak),
+  .syntax :global(.fgd-da),
+  .syntax :global(.fgd-cp),
+  .syntax :global(.fgd-te),
+  .syntax :global(.fgd-jsx) {
+    color: var(--primary12);
+    font-style: normal;
+  }
+
+  .syntax :global(.pl-mh),
+  .syntax :global(.pl-mb),
+  .syntax :global(.pl-ms) {
+    font-weight: var(--font-weight-7);
+  }
+
+  .syntax :global(.pl-mi) {
+    font-style: italic;
+  }
+}

package/utils/theme.css

@@ -8,21 +8,21 @@
   :root,
   [data-theme='light'] {
     color-scheme: light;
-    --ds-font-fine: var(--ds-font-text);
-    --ds-muted-weight-step: 0;
+    --fgd-font-fine: var(--fgd-font-text);
+    --fgd-muted-weight-step: 0;
   }
 
   [data-theme='dark'] {
     color-scheme: dark;
-    --ds-font-fine: var(--ds-font-ui);
-    --ds-muted-weight-step: 100;
+    --fgd-font-fine: var(--fgd-font-ui);
+    --fgd-muted-weight-step: 100;
   }
 
   @media only screen and (prefers-color-scheme: dark) {
     :root:not([data-theme='light']) {
       color-scheme: dark;
-      --ds-font-fine: var(--ds-font-ui);
-      --ds-muted-weight-step: 100;
+      --fgd-font-fine: var(--fgd-font-ui);
+      --fgd-muted-weight-step: 100;
     }
   }
 }