@fairgarden/design 0.1.0-0.canary.0

package/utils/Ornament.js

@@ -0,0 +1,160 @@
+'use client';
+import * as React from 'react';
+import { secondaryScaleVariants } from './scales';
+import { useScope } from './scope';
+import { MARKER_PX } from './tokens';
+import styles from './ornament.module.css';
+const r = (value) => Math.round(value * 100) / 100;
+/** A marker's box in px: its token size (§1.5.16). */
+function markerPx(kind, size) {
+    if (kind === 'waypoint')
+        return MARKER_PX.waypoint;
+    if (kind === 'current')
+        return MARKER_PX.current;
+    if (size === 'timeline')
+        return MARKER_PX.timeline;
+    return kind === 'origin' ? MARKER_PX.trail : MARKER_PX.arrowHead;
+}
+/**
+ * One marker's shape, centered in its `px` box, its stroke inside the box.
+ * The terminal is an equilateral outline pointing along `angle` (degrees,
+ * 0 = the inline end, 90 = down).
+ */
+function markerShape(kind, px, angle) {
+    const c = px / 2;
+    const inset = MARKER_PX.stroke / 2;
+    switch (kind) {
+        case 'origin':
+            return React.createElement("circle", { cx: c, cy: c, r: r(c - inset) });
+        case 'waypoint': {
+            const a = inset;
+            const b = px - inset;
+            return React.createElement("path", { d: `M${a} ${a} ${b} ${b}M${b} ${a} ${a} ${b}` });
+        }
+        case 'terminal': {
+            const base = px - MARKER_PX.stroke;
+            const height = (base * Math.sqrt(3)) / 2;
+            const tip = r(c + height / 2);
+            const back = r(c - height / 2);
+            return (React.createElement("path", { d: `M${tip} ${c}L${back} ${r(c - base / 2)}L${back} ${r(c + base / 2)}Z`, transform: angle === 0 ? undefined : `rotate(${angle} ${c} ${c})` }));
+        }
+        case 'current':
+            return React.createElement("circle", { cx: c, cy: c, r: c });
+    }
+}
+const markerClass = {
+    origin: styles.markerOrigin,
+    waypoint: styles.markerWaypoint,
+    terminal: styles.markerTerminal,
+    current: styles.markerCurrent,
+};
+/**
+ * A §4.7 marker (`marker-origin`, `marker-waypoint`, `marker-terminal`,
+ * `marker-current`) as its own inline SVG, drawn in `currentColor` at its
+ * token size. Decorative; say the state in words.
+ */
+export function Marker(props) {
+    const { kind, size = 'trail', angle = 90, className, ...rest } = props;
+    const px = markerPx(kind, size);
+    const timeline = size === 'timeline' && (kind === 'origin' || kind === 'terminal');
+    return (React.createElement("svg", { "aria-hidden": "true", focusable: "false", ...rest, viewBox: `0 0 ${px} ${px}`, className: [markerClass[kind], timeline ? styles.markerTimeline : null, className]
+            .filter(Boolean)
+            .join(' ') }, markerShape(kind, px, angle)));
+}
+/**
+ * `marker-index` (§4.7.5, §8.10): a 24 px numbered circle, a `--primary1`
+ * face with a `--primary12` edge and a zero-padded `type-label` numeral.
+ * Numbering runs continuously across one figure.
+ */
+export function MarkerIndex(props) {
+    const { value, digits = 2, className, ...rest } = props;
+    return (React.createElement("span", { ...rest, className: className ? `${styles.markerIndex} ${className}` : styles.markerIndex }, String(value).padStart(digits, '0')));
+}
+/**
+ * The rank numeral of a ranked list (§8.4, §12.11): `type-body-ui` data
+ * numerals in `--role-muted`, no period, end-aligned in a 2.5ch column.
+ */
+export function MarkerRank(props) {
+    const { value, className, ...rest } = props;
+    return (React.createElement("span", { ...rest, className: className ? `${styles.markerRank} ${className}` : styles.markerRank }, value));
+}
+/*
+ * Hand-set library paths (§4.7.1): freehand, no straight run over ≈ 40 px,
+ * the phase starting on a full dash at the origin. `short-tail` (120 × 60)
+ * wanders and turns down into its terminal, pointing at what follows below
+ * (the empty state's action). `entry` (176 × 56) loops once near its start
+ * (≈ 22 × 40 px), then runs level into a label at its inline end; the label
+ * sits --fgd-space-halo past the terminal.
+ */
+const trails = {
+    'short-tail': {
+        width: 120,
+        height: 60,
+        d: 'M12.5 12C24 9 32 21 46 19C60 17 62 5 76 7C92 9 88 29 100 32C106 34 108 38 108 44',
+        origin: { x: 5, y: 12 },
+        terminal: { x: 108, y: 52, angle: 90 },
+    },
+    entry: {
+        width: 176,
+        height: 56,
+        d: 'M12.5 44C26 44 38 41 46 31C55 20 58 4 49 3C39 2 32 21 44 35C52 45 70 46 88 41C104 36 118 45 134 41C146 38 154 39 163 40',
+        origin: { x: 5, y: 44 },
+        terminal: { x: 171, y: 40, angle: 0 },
+    },
+};
+/**
+ * `ornament-trail` (§4.7.1): the system's signature line ornament, a
+ * freehand `line-dashed` path in `--role-accent` (`--primary12` on the
+ * saturated fields) from a `marker-origin` circle to a `marker-terminal`
+ * triangle. The element's one ornament; decorative (`aria-hidden`).
+ */
+export function OrnamentTrail(props) {
+    const { shape = 'short-tail', flip = false, className, ...rest } = props;
+    const trail = trails[shape];
+    const origin = MARKER_PX.trail;
+    const terminal = MARKER_PX.arrowHead;
+    return (React.createElement("svg", { "aria-hidden": "true", focusable: "false", width: trail.width, height: trail.height, ...rest, viewBox: `0 0 ${trail.width} ${trail.height}`, className: className ? `${styles.ornamentTrail} ${className}` : styles.ornamentTrail },
+        React.createElement("g", { transform: flip ? `matrix(-1 0 0 1 ${trail.width} 0)` : undefined },
+            React.createElement("path", { className: styles.ornamentTrailPath, d: trail.d, vectorEffect: "non-scaling-stroke" }),
+            React.createElement("g", { className: styles.trailMarker, transform: `translate(${trail.origin.x - origin / 2} ${trail.origin.y - origin / 2})` }, markerShape('origin', origin, 0)),
+            React.createElement("g", { className: styles.trailMarker, transform: `translate(${trail.terminal.x - terminal / 2} ${trail.terminal.y - terminal / 2})` }, markerShape('terminal', terminal, trail.terminal.angle)))));
+}
+/*
+ * The blob mount's hand-cut disc (§6.6): a closed curve through nine points
+ * at uneven angles and radii in a 136 × 130 box. The under-disc is the same
+ * curve scaled 1.04 and turned 8° about the centre, so its crescents vary
+ * between about 2 and 6 px.
+ */
+const BLOB_WIDTH = 136;
+const BLOB_HEIGHT = 130;
+const BLOB_PATH = 'M136 65C135.9 78.1 130.2 93.3 120.2 104C110.3 114.8 90.6 127.1 76.3 129.5C61.9 132 46.1 125.9 34.2 118.8C22.3 111.7 9.3 100.1 4.7 87C0.2 73.9 1.4 53.6 7 40.2C12.5 26.8 25.4 12.6 38.2 6.6C51 0.5 70.1 0.7 84 3.8C97.8 7 112.4 15.2 121 25.4C129.7 35.6 136.1 51.9 136 65Z';
+const BLOB_UNDER = 'translate(68 65) rotate(8) scale(1.04) translate(-68 -65)';
+/** The grounds that take the mount (§6.6, §1.5.16): the page grounds and the night band. */
+const MOUNT_TONES = new Set(['light-base', 'tinted', 'dark-base']);
+/**
+ * `ornament-blob` (§6.6, §1.5.16): the blob mount, a flat hand-cut disc
+ * in `--secondary9` over a larger, turned under-disc in `--secondary7`,
+ * holding a centred mark in `--secondary-contrast`. Once per page, at a
+ * fixed 136 × 130 px. On `forest` and the solid fields the mount is omitted
+ * and the bare mark takes the scope's one ink [D14, D162]. In print the
+ * discs drop and the mark prints black. Decorative: the discs are
+ * `aria-hidden`; give a meaningful mark its own text alternative.
+ */
+export function OrnamentBlob(props) {
+    const { secondary, className, children, ...rest } = props;
+    const { tone } = useScope();
+    const mounted = MOUNT_TONES.has(tone);
+    return (React.createElement("span", { ...rest, className: [
+            styles.ornamentBlob,
+            mounted ? null : styles.blobOmitted,
+            secondary ? secondaryScaleVariants[secondary] : null,
+            className,
+        ]
+            .filter(Boolean)
+            .join(' ') },
+        mounted ? (React.createElement("svg", { className: styles.blobDiscs, width: BLOB_WIDTH, height: BLOB_HEIGHT, viewBox: `0 0 ${BLOB_WIDTH} ${BLOB_HEIGHT}`, "aria-hidden": "true", focusable: "false" },
+            React.createElement("path", { className: styles.blobUnder, d: BLOB_PATH, transform: BLOB_UNDER }),
+            React.createElement("path", { className: styles.blobFront, d: BLOB_PATH }))) : null,
+        children != null ? React.createElement("span", { className: styles.blobMark }, children) : null));
+}
+//# sourceMappingURL=Ornament.js.map

package/utils/Ornament.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ornament.js","sourceRoot":"","sources":["../src/utils/Ornament.tsx"],"names":[],"mappings":"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"}

package/utils/StatusGlyph.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export type Status = 'info' | 'success' | 'warning' | 'danger';
+/** §1.5.4 status scales, passed as the host's computed secondary [D129]. */
+export declare const statusScales: {
+    readonly info: "indigo";
+    readonly success: "green";
+    readonly warning: "amber";
+    readonly danger: "red";
+};
+/** The glyph's accessible name: the status in words, so it is never shape or color alone. */
+export declare const statusLabels: Record<Status, string>;
+/** Props for StatusGlyph: SVG props (without `children`), the status and its accessible name. */
+export type StatusGlyphProps = Omit<React.ComponentProps<'svg'>, 'children'> & {
+    status: Status;
+    /**
+     * Accessible name, normally the status word. Omit it, or pass `null`, when
+     * an adjacent word already names the status: the glyph is then hidden from
+     * assistive technology.
+     */
+    label?: string | null;
+};
+/** A §1.5.4 status glyph, drawn custom with its inner mark [D58]. */
+export declare function StatusGlyph({ status, label, ...rest }: StatusGlyphProps): React.JSX.Element;
+//# sourceMappingURL=StatusGlyph.d.ts.map

package/utils/StatusGlyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusGlyph.d.ts","sourceRoot":"","sources":["../src/utils/StatusGlyph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE9D,4EAA4E;AAC5E,eAAO,MAAM,YAAY;;;;;CAKsB,CAAA;AAE/C,6FAA6F;AAC7F,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK/C,CAAA;AA+BD,iGAAiG;AACjG,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,MAAM,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,CAAA;AAED,qEAAqE;AACrE,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,qBAWvE"}

package/utils/StatusGlyph.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+/** §1.5.4 status scales, passed as the host's computed secondary [D129]. */
+export const statusScales = {
+    info: 'indigo',
+    success: 'green',
+    warning: 'amber',
+    danger: 'red',
+};
+/** The glyph's accessible name: the status in words, so it is never shape or color alone. */
+export const statusLabels = {
+    info: 'Information',
+    success: 'Success',
+    warning: 'Warning',
+    danger: 'Error',
+};
+const glyphs = {
+    info: (React.createElement(React.Fragment, null,
+        React.createElement("circle", { cx: "10", cy: "10", r: "8.25", stroke: "currentColor" }),
+        React.createElement("path", { d: "M10 9v5", fill: "none", stroke: "currentColor" }),
+        React.createElement("circle", { cx: "10", cy: "6.25", r: "1", fill: "currentColor", stroke: "none" }))),
+    success: (React.createElement(React.Fragment, null,
+        React.createElement("circle", { cx: "10", cy: "10", r: "9", fill: "currentColor", stroke: "none" }),
+        React.createElement("path", { d: "M6.25 10.25l2.5 2.5 5-5", fill: "none" }))),
+    warning: (React.createElement(React.Fragment, null,
+        React.createElement("path", { d: "M10 2.75 18 16.75H2z", fill: "currentColor", stroke: "currentColor" }),
+        React.createElement("path", { d: "M10 7.5v4", fill: "none" }),
+        React.createElement("circle", { cx: "10", cy: "14.25", r: "1", stroke: "none" }))),
+    danger: (React.createElement(React.Fragment, null,
+        React.createElement("path", { d: "M10 1.5 18.5 10 10 18.5 1.5 10z", fill: "currentColor", stroke: "currentColor" }),
+        React.createElement("path", { d: "m7.5 7.5 5 5m0-5-5 5", fill: "none" }))),
+};
+/** A §1.5.4 status glyph, drawn custom with its inner mark [D58]. */
+export function StatusGlyph({ status, label, ...rest }) {
+    const a11y = label == null
+        ? { 'aria-hidden': true }
+        : { role: 'img', 'aria-label': label };
+    return (React.createElement("svg", { viewBox: "0 0 20 20", focusable: "false", ...a11y, ...rest }, glyphs[status]));
+}
+//# sourceMappingURL=StatusGlyph.js.map

package/utils/StatusGlyph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusGlyph.js","sourceRoot":"","sources":["../src/utils/StatusGlyph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,4EAA4E;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,KAAK;CACgC,CAAA;AAE/C,6FAA6F;AAC7F,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,OAAO;CAChB,CAAA;AAED,MAAM,MAAM,GAAoC;IAC9C,IAAI,EAAE,CACJ;QACE,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,GAAG;QACzD,8BAAM,CAAC,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,GAAG;QACtD,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,GAAG,CACnE,CACJ;IACD,OAAO,EAAE,CACP;QACE,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,GAAG;QAClE,8BAAM,CAAC,EAAC,yBAAyB,EAAC,IAAI,EAAC,MAAM,GAAG,CAC/C,CACJ;IACD,OAAO,EAAE,CACP;QACE,8BAAM,CAAC,EAAC,sBAAsB,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,GAAG;QAC3E,8BAAM,CAAC,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,GAAG;QAClC,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,MAAM,GAAG,CAChD,CACJ;IACD,MAAM,EAAE,CACN;QACE,8BAAM,CAAC,EAAC,iCAAiC,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,cAAc,GAAG;QACtF,8BAAM,CAAC,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,GAAG,CAC5C,CACJ;CACF,CAAA;AAaD,qEAAqE;AACrE,MAAM,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAoB;IACtE,MAAM,IAAI,GACR,KAAK,IAAI,IAAI;QACX,CAAC,CAAE,EAAE,aAAa,EAAE,IAAI,EAAY;QACpC,CAAC,CAAE,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAY,CAAA;IAErD,OAAO,CACL,6BAAK,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,OAAO,KAAK,IAAI,KAAM,IAAI,IAC1D,MAAM,CAAC,MAAM,CAAC,CACX,CACP,CAAA;AACH,CAAC"}

package/utils/assignRef.d.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react';
+/**
+ * Writes a node to a consumer's ref (callback or object), for a component
+ * that also keeps its own ref to the same node. Not exported from any index.
+ */
+export declare function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null): void;
+//# sourceMappingURL=assignRef.d.ts.map

package/utils/assignRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignRef.d.ts","sourceRoot":"","sources":["../src/utils/assignRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,QAG1E"}

package/utils/assignRef.js

@@ -0,0 +1,11 @@
+/**
+ * Writes a node to a consumer's ref (callback or object), for a component
+ * that also keeps its own ref to the same node. Not exported from any index.
+ */
+export function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+//# sourceMappingURL=assignRef.js.map

package/utils/assignRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assignRef.js","sourceRoot":"","sources":["../src/utils/assignRef.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAI,GAA6B,EAAE,KAAe;IACzE,IAAI,OAAO,GAAG,KAAK,UAAU;QAAE,GAAG,CAAC,KAAK,CAAC,CAAA;SACpC,IAAI,GAAG;QAAG,GAAiC,CAAC,OAAO,GAAG,KAAK,CAAA;AAClE,CAAC"}

package/utils/className.d.ts

@@ -0,0 +1,10 @@
+/** Base UI's `className`: a string, or a function of the part's state. */
+export type StateClassName<State> = string | ((state: State) => string | undefined) | undefined;
+/**
+ * Appends a consumer's `className` (string or state function) to a CVA
+ * result, keeping the function form so Base UI can call it with the state.
+ */
+export declare function resolveClassName<State>(className: StateClassName<State>, build: (extra?: string) => string): string | ((state: State) => string);
+/** Space-joins the truthy class names. */
+export declare function cx(...names: Array<string | false | null | undefined>): string;
+//# sourceMappingURL=className.d.ts.map

package/utils/className.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"className.d.ts","sourceRoot":"","sources":["../src/utils/className.ts"],"names":[],"mappings":"AAOA,0EAA0E;AAC1E,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAA;AAE/F;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EACpC,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,EAChC,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,GAChC,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,CAKrC;AAED,0CAA0C;AAC1C,wBAAgB,EAAE,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,CAE7E"}

package/utils/className.js

@@ -0,0 +1,21 @@
+/*
+ * Class-name helpers shared by every component. Not exported from any
+ * index. CVA builds each part's own classes; these join a consumer's
+ * `className` after them (§1.11.3), keeping Base UI's state-function form
+ * (§1.11.4).
+ */
+/**
+ * Appends a consumer's `className` (string or state function) to a CVA
+ * result, keeping the function form so Base UI can call it with the state.
+ */
+export function resolveClassName(className, build) {
+    if (typeof className === 'function') {
+        return (state) => build(className(state));
+    }
+    return build(className);
+}
+/** Space-joins the truthy class names. */
+export function cx(...names) {
+    return names.filter(Boolean).join(' ');
+}
+//# sourceMappingURL=className.js.map

package/utils/className.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"className.js","sourceRoot":"","sources":["../src/utils/className.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAC9B,SAAgC,EAChC,KAAiC;IAEjC,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE,CAAC;QACpC,OAAO,CAAC,KAAY,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;IAClD,CAAC;IACD,OAAO,KAAK,CAAC,SAAS,CAAC,CAAA;AACzB,CAAC;AAED,0CAA0C;AAC1C,MAAM,UAAU,EAAE,CAAC,GAAG,KAA+C;IACnE,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACxC,CAAC"}

package/utils/colors/amber.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --amber1: #fefdfb;
+    --amber2: #fefbe9;
+    --amber3: #fff7c2;
+    --amber4: #ffee9c;
+    --amber5: #fbe577;
+    --amber6: #f3d673;
+    --amber7: #e9c162;
+    --amber8: #e2a336;
+    --amber9: #ffc53d;
+    --amber10: #ffba18;
+    --amber11: #ab6400;
+    --amber12: #4f3422;
+    --amber-contrast: var(--amber12);
+    --amber-hover: var(--amber6);
+
+    @media (color-gamut: p3) {
+      --amber1: color(display-p3 0.995 0.992 0.985);
+      --amber2: color(display-p3 0.994 0.986 0.921);
+      --amber3: color(display-p3 0.994 0.969 0.782);
+      --amber4: color(display-p3 0.989 0.937 0.65);
+      --amber5: color(display-p3 0.97 0.902 0.527);
+      --amber6: color(display-p3 0.936 0.844 0.506);
+      --amber7: color(display-p3 0.89 0.762 0.443);
+      --amber8: color(display-p3 0.85 0.65 0.3);
+      --amber9: color(display-p3 1 0.77 0.26);
+      --amber10: color(display-p3 0.959 0.741 0.274);
+      --amber11: color(display-p3 0.64 0.4 0);
+      --amber12: color(display-p3 0.294 0.208 0.145);
+    }
+  }
+
+  [data-theme="dark"] {
+    --amber1: #16120c;
+    --amber2: #1d180f;
+    --amber3: #302008;
+    --amber4: #3f2700;
+    --amber5: #4d3000;
+    --amber6: #5c3d05;
+    --amber7: #714f19;
+    --amber8: #8f6424;
+    --amber9: #ffc53d;
+    --amber10: #ffd60a;
+    --amber11: #ffca16;
+    --amber12: #ffe7b3;
+    --amber-contrast: var(--amber1);
+    --amber-hover: var(--amber10);
+
+    @media (color-gamut: p3) {
+      --amber1: color(display-p3 0.082 0.07 0.05);
+      --amber2: color(display-p3 0.111 0.094 0.064);
+      --amber3: color(display-p3 0.178 0.128 0.049);
+      --amber4: color(display-p3 0.239 0.156 0);
+      --amber5: color(display-p3 0.29 0.193 0);
+      --amber6: color(display-p3 0.344 0.245 0.076);
+      --amber7: color(display-p3 0.422 0.314 0.141);
+      --amber8: color(display-p3 0.535 0.399 0.189);
+      --amber9: color(display-p3 1 0.77 0.26);
+      --amber10: color(display-p3 1 0.87 0.15);
+      --amber11: color(display-p3 1 0.8 0.29);
+      --amber12: color(display-p3 0.984 0.909 0.726);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --amber1: #16120c;
+      --amber2: #1d180f;
+      --amber3: #302008;
+      --amber4: #3f2700;
+      --amber5: #4d3000;
+      --amber6: #5c3d05;
+      --amber7: #714f19;
+      --amber8: #8f6424;
+      --amber9: #ffc53d;
+      --amber10: #ffd60a;
+      --amber11: #ffca16;
+      --amber12: #ffe7b3;
+      --amber-contrast: var(--amber1);
+      --amber-hover: var(--amber10);
+
+      @media (color-gamut: p3) {
+        --amber1: color(display-p3 0.082 0.07 0.05);
+        --amber2: color(display-p3 0.111 0.094 0.064);
+        --amber3: color(display-p3 0.178 0.128 0.049);
+        --amber4: color(display-p3 0.239 0.156 0);
+        --amber5: color(display-p3 0.29 0.193 0);
+        --amber6: color(display-p3 0.344 0.245 0.076);
+        --amber7: color(display-p3 0.422 0.314 0.141);
+        --amber8: color(display-p3 0.535 0.399 0.189);
+        --amber9: color(display-p3 1 0.77 0.26);
+        --amber10: color(display-p3 1 0.87 0.15);
+        --amber11: color(display-p3 1 0.8 0.29);
+        --amber12: color(display-p3 0.984 0.909 0.726);
+      }
+    }
+  }
+}

package/utils/colors/amberDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --amber1: #16120c;
+    --amber2: #1d180f;
+    --amber3: #302008;
+    --amber4: #3f2700;
+    --amber5: #4d3000;
+    --amber6: #5c3d05;
+    --amber7: #714f19;
+    --amber8: #8f6424;
+    --amber9: #ffc53d;
+    --amber10: #ffd60a;
+    --amber11: #ffca16;
+    --amber12: #ffe7b3;
+    --amber-contrast: var(--amber1);
+    --amber-hover: var(--amber10);
+
+    @media (color-gamut: p3) {
+      --amber1: color(display-p3 0.082 0.07 0.05);
+      --amber2: color(display-p3 0.111 0.094 0.064);
+      --amber3: color(display-p3 0.178 0.128 0.049);
+      --amber4: color(display-p3 0.239 0.156 0);
+      --amber5: color(display-p3 0.29 0.193 0);
+      --amber6: color(display-p3 0.344 0.245 0.076);
+      --amber7: color(display-p3 0.422 0.314 0.141);
+      --amber8: color(display-p3 0.535 0.399 0.189);
+      --amber9: color(display-p3 1 0.77 0.26);
+      --amber10: color(display-p3 1 0.87 0.15);
+      --amber11: color(display-p3 1 0.8 0.29);
+      --amber12: color(display-p3 0.984 0.909 0.726);
+    }
+  }
+
+  [data-theme="light"] {
+    --amber1: #fefdfb;
+    --amber2: #fefbe9;
+    --amber3: #fff7c2;
+    --amber4: #ffee9c;
+    --amber5: #fbe577;
+    --amber6: #f3d673;
+    --amber7: #e9c162;
+    --amber8: #e2a336;
+    --amber9: #ffc53d;
+    --amber10: #ffba18;
+    --amber11: #ab6400;
+    --amber12: #4f3422;
+    --amber-contrast: var(--amber12);
+    --amber-hover: var(--amber6);
+
+    @media (color-gamut: p3) {
+      --amber1: color(display-p3 0.995 0.992 0.985);
+      --amber2: color(display-p3 0.994 0.986 0.921);
+      --amber3: color(display-p3 0.994 0.969 0.782);
+      --amber4: color(display-p3 0.989 0.937 0.65);
+      --amber5: color(display-p3 0.97 0.902 0.527);
+      --amber6: color(display-p3 0.936 0.844 0.506);
+      --amber7: color(display-p3 0.89 0.762 0.443);
+      --amber8: color(display-p3 0.85 0.65 0.3);
+      --amber9: color(display-p3 1 0.77 0.26);
+      --amber10: color(display-p3 0.959 0.741 0.274);
+      --amber11: color(display-p3 0.64 0.4 0);
+      --amber12: color(display-p3 0.294 0.208 0.145);
+    }
+  }
+
+  @media print {
+    :root {
+      --amber1: #fefdfb;
+      --amber2: #fefbe9;
+      --amber3: #fff7c2;
+      --amber4: #ffee9c;
+      --amber5: #fbe577;
+      --amber6: #f3d673;
+      --amber7: #e9c162;
+      --amber8: #e2a336;
+      --amber9: #ffc53d;
+      --amber10: #ffba18;
+      --amber11: #ab6400;
+      --amber12: #4f3422;
+      --amber-contrast: var(--amber12);
+      --amber-hover: var(--amber6);
+
+      @media (color-gamut: p3) {
+        --amber1: color(display-p3 0.995 0.992 0.985);
+        --amber2: color(display-p3 0.994 0.986 0.921);
+        --amber3: color(display-p3 0.994 0.969 0.782);
+        --amber4: color(display-p3 0.989 0.937 0.65);
+        --amber5: color(display-p3 0.97 0.902 0.527);
+        --amber6: color(display-p3 0.936 0.844 0.506);
+        --amber7: color(display-p3 0.89 0.762 0.443);
+        --amber8: color(display-p3 0.85 0.65 0.3);
+        --amber9: color(display-p3 1 0.77 0.26);
+        --amber10: color(display-p3 0.959 0.741 0.274);
+        --amber11: color(display-p3 0.64 0.4 0);
+        --amber12: color(display-p3 0.294 0.208 0.145);
+      }
+    }
+  }
+}

package/utils/colors/amberLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --amber1: #fefdfb;
+    --amber2: #fefbe9;
+    --amber3: #fff7c2;
+    --amber4: #ffee9c;
+    --amber5: #fbe577;
+    --amber6: #f3d673;
+    --amber7: #e9c162;
+    --amber8: #e2a336;
+    --amber9: #ffc53d;
+    --amber10: #ffba18;
+    --amber11: #ab6400;
+    --amber12: #4f3422;
+    --amber-contrast: var(--amber12);
+    --amber-hover: var(--amber6);
+
+    @media (color-gamut: p3) {
+      --amber1: color(display-p3 0.995 0.992 0.985);
+      --amber2: color(display-p3 0.994 0.986 0.921);
+      --amber3: color(display-p3 0.994 0.969 0.782);
+      --amber4: color(display-p3 0.989 0.937 0.65);
+      --amber5: color(display-p3 0.97 0.902 0.527);
+      --amber6: color(display-p3 0.936 0.844 0.506);
+      --amber7: color(display-p3 0.89 0.762 0.443);
+      --amber8: color(display-p3 0.85 0.65 0.3);
+      --amber9: color(display-p3 1 0.77 0.26);
+      --amber10: color(display-p3 0.959 0.741 0.274);
+      --amber11: color(display-p3 0.64 0.4 0);
+      --amber12: color(display-p3 0.294 0.208 0.145);
+    }
+  }
+
+  [data-theme="dark"] {
+    --amber1: #16120c;
+    --amber2: #1d180f;
+    --amber3: #302008;
+    --amber4: #3f2700;
+    --amber5: #4d3000;
+    --amber6: #5c3d05;
+    --amber7: #714f19;
+    --amber8: #8f6424;
+    --amber9: #ffc53d;
+    --amber10: #ffd60a;
+    --amber11: #ffca16;
+    --amber12: #ffe7b3;
+    --amber-contrast: var(--amber1);
+    --amber-hover: var(--amber10);
+
+    @media (color-gamut: p3) {
+      --amber1: color(display-p3 0.082 0.07 0.05);
+      --amber2: color(display-p3 0.111 0.094 0.064);
+      --amber3: color(display-p3 0.178 0.128 0.049);
+      --amber4: color(display-p3 0.239 0.156 0);
+      --amber5: color(display-p3 0.29 0.193 0);
+      --amber6: color(display-p3 0.344 0.245 0.076);
+      --amber7: color(display-p3 0.422 0.314 0.141);
+      --amber8: color(display-p3 0.535 0.399 0.189);
+      --amber9: color(display-p3 1 0.77 0.26);
+      --amber10: color(display-p3 1 0.87 0.15);
+      --amber11: color(display-p3 1 0.8 0.29);
+      --amber12: color(display-p3 0.984 0.909 0.726);
+    }
+  }
+}