@fairgarden/design 0.1.0-0.canary.0

package/utils/type.module.css

@@ -0,0 +1,342 @@
+/*
+ * Type roles (§1.5.6, §3.3). Compose into a module part, in a
+ * top-level rule outside any @layer (Lightning CSS rejects nested composes):
+ *   .label { composes: typeButton from '../../utils/type.module.css'; }
+ * Sizes are rem tokens (fluid 360 → 1024 px); leading unitless; tracking em.
+ * Every role publishes --type-weight and --type-weight-floor so typeMuted
+ * can step muted text down by --fgd-muted-weight-step on dark scopes without
+ * the component knowing the mode [D170, D175].
+ * Print sizes come from the print remap of the size tokens (print.css).
+ */
+@layer base {
+  .typeDisplayXl {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-display-xl);
+    line-height: var(--fgd-leading-display);
+    letter-spacing: var(--font-letterspacing-0-5);
+  }
+
+  .typeDisplay {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-display);
+    line-height: var(--font-lineheight-0);
+    letter-spacing: var(--font-letterspacing-0-5);
+  }
+
+  .typeH2 {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-h2);
+    line-height: var(--font-lineheight-0);
+    letter-spacing: 0;
+  }
+
+  .typeItemhead {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-itemhead);
+    line-height: var(--font-lineheight-0);
+    letter-spacing: 0;
+  }
+
+  .typeKicker {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-kicker);
+    line-height: var(--font-lineheight-0);
+    letter-spacing: 0;
+  }
+
+  .typeSubhead {
+    --type-weight: var(--font-weight-6);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-subhead);
+    line-height: var(--font-lineheight-1);
+    letter-spacing: 0;
+  }
+
+  .typeLead {
+    --type-weight: var(--font-weight-4);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-lead);
+    line-height: var(--font-lineheight-3);
+    letter-spacing: 0;
+  }
+
+  .typeQuote {
+    --type-weight: var(--font-weight-5);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-display);
+    font-style: italic;
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-quote);
+    line-height: var(--font-lineheight-1);
+    letter-spacing: 0;
+  }
+
+  .typeBody {
+    --type-weight: var(--font-weight-4);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-text);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-body);
+    line-height: var(--fgd-leading-reading);
+    letter-spacing: 0;
+    font-variant-numeric: var(--fgd-numerals-prose);
+  }
+
+  .typeBodyUi {
+    --type-weight: var(--font-weight-4);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-body-ui);
+    line-height: var(--font-lineheight-3);
+    letter-spacing: 0;
+  }
+
+  /* Serif in light scopes, UI sans in dark scopes via --fgd-font-fine [D152]. */
+  .typeSecondaryName {
+    --type-weight: var(--font-weight-4);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-fine);
+    font-style: italic;
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-body-ui);
+    line-height: var(--font-lineheight-2);
+    letter-spacing: 0;
+  }
+
+  .typeFootnote {
+    --type-weight: var(--font-weight-4);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-fine);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-footnote);
+    line-height: var(--font-lineheight-3);
+    letter-spacing: 0;
+    font-variant-numeric: var(--fgd-numerals-prose);
+  }
+
+  /* Button labels: title case, authored; no tracking, no caps [D160]. */
+  .typeButtonLg {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-button-lg);
+    line-height: var(--fgd-leading-display);
+    letter-spacing: 0;
+    text-transform: none;
+  }
+
+  .typeButton {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-button);
+    line-height: var(--fgd-leading-display);
+    letter-spacing: 0;
+    text-transform: none;
+  }
+
+  .typeButtonSm {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-label);
+    line-height: var(--fgd-leading-display);
+    letter-spacing: 0;
+    text-transform: none;
+  }
+
+  .typeFieldLabel {
+    --type-weight: var(--font-weight-6);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-button);
+    line-height: var(--font-lineheight-1);
+    letter-spacing: 0;
+    text-transform: none;
+  }
+
+  /* Caps for wayfinding only; author sentence case, CSS sets the caps. */
+  .typeLabel {
+    --type-weight: var(--font-weight-6);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-label);
+    line-height: var(--font-lineheight-1);
+    letter-spacing: var(--font-letterspacing-3);
+    text-transform: uppercase;
+  }
+
+  .typeEyebrow {
+    --type-weight: var(--font-weight-6);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-eyebrow);
+    line-height: var(--font-lineheight-1);
+    letter-spacing: var(--font-letterspacing-4);
+    text-transform: uppercase;
+  }
+
+  .typeCaption {
+    --type-weight: var(--font-weight-4);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-caption);
+    line-height: var(--font-lineheight-2);
+    letter-spacing: 0;
+  }
+
+  .typeSmall {
+    --type-weight: var(--font-weight-4);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-label);
+    line-height: var(--font-lineheight-2);
+    letter-spacing: 0;
+  }
+
+  .typeData {
+    --type-weight: var(--font-weight-4);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-mono);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-caption);
+    line-height: var(--fgd-leading-compact);
+    letter-spacing: 0;
+    font-variant-numeric: var(--fgd-numerals-data);
+  }
+
+  /* Large mono readout: the Number Field `readout` kind (§10.4), tabular so digits never shift. */
+  .typeReadout {
+    --type-weight: var(--font-weight-4);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-mono);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-h2);
+    line-height: var(--fgd-leading-display);
+    letter-spacing: 0;
+    font-variant-numeric: var(--fgd-numerals-data);
+  }
+
+  .typeUrl {
+    --type-weight: var(--font-weight-4);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-mono);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-url);
+    line-height: var(--font-lineheight-1);
+    letter-spacing: 0;
+    overflow-wrap: anywhere;
+  }
+
+  /* System serif fallbacks never set stats; the display stack leads. Display-xl on screen, 24 pt in print. */
+  .typeStat {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-stat);
+    line-height: var(--fgd-leading-display);
+    letter-spacing: var(--font-letterspacing-0-5);
+    font-variant-numeric: var(--fgd-numerals-data);
+  }
+
+  .typeStatCompact {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-h2);
+    line-height: var(--fgd-leading-display);
+    letter-spacing: 0;
+    font-variant-numeric: var(--fgd-numerals-data);
+  }
+
+  /* Bold lead that opens a paragraph; keeps its paragraph's size. */
+  .typeRunin {
+    --type-weight: var(--font-weight-7);
+    --type-weight-floor: 400;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+  }
+
+  .typeMarquee {
+    --type-weight: var(--font-weight-8);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-marquee);
+    line-height: var(--fgd-leading-display);
+    letter-spacing: var(--font-letterspacing-2);
+    text-transform: uppercase;
+  }
+
+  .typeLockupCaps {
+    --type-weight: var(--font-weight-9);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-ui);
+    font-weight: var(--type-weight);
+    font-size: var(--fgd-font-size-display);
+    line-height: var(--font-lineheight-00);
+    letter-spacing: 0;
+    text-transform: uppercase;
+  }
+
+  .typeLockupAccent {
+    --type-weight: var(--font-weight-8);
+    --type-weight-floor: 100;
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-accent-settings);
+    font-style: italic;
+    font-weight: var(--type-weight);
+    font-size: calc(var(--fgd-font-size-display) * var(--fgd-lockup-accent-factor));
+    line-height: var(--font-lineheight-00);
+    letter-spacing: 0;
+  }
+
+  /*
+   * Muted text: --role-muted, one weight lighter on dark scopes, floored at
+   * 400 below ~16 px. Compose after the role (it is declared last so it wins).
+   */
+  .typeMuted {
+    color: var(--role-muted);
+    font-weight: max(
+      var(--type-weight-floor, 400),
+      calc(var(--type-weight, 400) - var(--fgd-muted-weight-step))
+    );
+  }
+}

package/utils/useColorScheme.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+export type ColorScheme = 'light' | 'dark';
+/**
+ * Reports the color scheme in effect at an element [D158], mirroring the CSS
+ * precedence: the nearest ancestor's `data-theme`, else the OS preference,
+ * else light. Re-evaluates when either changes. Server rendering assumes
+ * light. An escape hatch for non-CSS consumers only (canvas, map tiles,
+ * embeds, raster swaps, the theme-color meta): no component uses it to
+ * choose colors.
+ */
+export declare function useColorScheme(ref?: RefObject<Element | null>): ColorScheme;
+//# sourceMappingURL=useColorScheme.d.ts.map

package/utils/useColorScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.d.ts","sourceRoot":"","sources":["../src/utils/useColorScheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAA;AAEtD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAe1C;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,WAAW,CAqB3E"}

package/utils/useColorScheme.js

@@ -0,0 +1,43 @@
+'use client';
+import { useEffect, useState } from 'react';
+// The follow-OS query, screen only, so print always reads light (§1.11.9).
+const DARK_QUERY = 'only screen and (prefers-color-scheme: dark)';
+function resolve(element) {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return 'light';
+    }
+    const start = element ?? document.documentElement;
+    const theme = start.closest('[data-theme]')?.getAttribute('data-theme');
+    if (theme === 'dark' || theme === 'light')
+        return theme;
+    return window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light';
+}
+/**
+ * Reports the color scheme in effect at an element [D158], mirroring the CSS
+ * precedence: the nearest ancestor's `data-theme`, else the OS preference,
+ * else light. Re-evaluates when either changes. Server rendering assumes
+ * light. An escape hatch for non-CSS consumers only (canvas, map tiles,
+ * embeds, raster swaps, the theme-color meta): no component uses it to
+ * choose colors.
+ */
+export function useColorScheme(ref) {
+    const [scheme, setScheme] = useState('light');
+    useEffect(() => {
+        const update = () => setScheme(resolve(ref?.current));
+        update();
+        const media = window.matchMedia(DARK_QUERY);
+        media.addEventListener('change', update);
+        const observer = new MutationObserver(update);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme'],
+            subtree: true,
+        });
+        return () => {
+            media.removeEventListener('change', update);
+            observer.disconnect();
+        };
+    }, [ref]);
+    return scheme;
+}
+//# sourceMappingURL=useColorScheme.js.map

package/utils/useColorScheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.js","sourceRoot":"","sources":["../src/utils/useColorScheme.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAItD,2EAA2E;AAC3E,MAAM,UAAU,GAAG,8CAA8C,CAAA;AAEjE,SAAS,OAAO,CAAC,OAAmC;IAClD,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACrE,OAAO,OAAO,CAAA;IAChB,CAAC;IACD,MAAM,KAAK,GAAG,OAAO,IAAI,QAAQ,CAAC,eAAe,CAAA;IACjD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAA;IACvE,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,OAAO;QAAE,OAAO,KAAK,CAAA;IACvD,OAAO,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;AACjE,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,GAA+B;IAC5D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAc,OAAO,CAAC,CAAA;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAA;QACrD,MAAM,EAAE,CAAA;QACR,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAA;QAC3C,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QACxC,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAM,CAAC,CAAA;QAC7C,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACzC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;YAC/B,OAAO,EAAE,IAAI;SACd,CAAC,CAAA;QACF,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;YAC3C,QAAQ,CAAC,UAAU,EAAE,CAAA;QACvB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,MAAM,CAAA;AACf,CAAC"}

package/utils/useMediaQuery.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether a media query matches, kept in sync with its `change` events.
+ * False on the server and during hydration, so layouts render mobile first
+ * and motion starts off. For JavaScript that must restate a CSS media tier
+ * or preference; styling itself stays in the module's media queries.
+ */
+export declare function useMediaQuery(query: string): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/utils/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../src/utils/useMediaQuery.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAcpD"}

package/utils/useMediaQuery.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+/**
+ * Whether a media query matches, kept in sync with its `change` events.
+ * False on the server and during hydration, so layouts render mobile first
+ * and motion starts off. For JavaScript that must restate a CSS media tier
+ * or preference; styling itself stays in the module's media queries.
+ */
+export function useMediaQuery(query) {
+    const subscribe = React.useCallback((onChange) => {
+        const media = window.matchMedia(query);
+        media.addEventListener('change', onChange);
+        return () => media.removeEventListener('change', onChange);
+    }, [query]);
+    return React.useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false);
+}
+//# sourceMappingURL=useMediaQuery.js.map

package/utils/useMediaQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.js","sourceRoot":"","sources":["../src/utils/useMediaQuery.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,KAAa;IACzC,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,QAAoB,EAAE,EAAE;QACvB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;QACtC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAC1C,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC5D,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,OAAO,KAAK,CAAC,oBAAoB,CAC/B,SAAS,EACT,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,EACtC,GAAG,EAAE,CAAC,KAAK,CACZ,CAAA;AACH,CAAC"}