@astryxdesign/theme-neutral 0.7.12-canary.f543ec7 → 0.7.12

package/dist/icons.d.cts

@@ -0,0 +1,2 @@
+import type { IconRegistry } from '@astryxdesign/core/Icon';
+export declare const neutralIconRegistry: IconRegistry;

package/dist/neutral.js

@@ -396,6 +396,9 @@ export const neutralTheme = {
       }
     },
     "segmented-control-item": {
+      "base": {
+        "--color-text-secondary": "light-dark(#474747, #c6c6c6)"
+      },
       "size:sm": {
         "height": "calc(var(--size-element-sm) - 8px)"
       },

package/dist/neutralPalettes.d.cts

@@ -0,0 +1,496 @@
+/** Neutral's reviewed palette, generated from ../palette.config.json. */
+export declare const neutralPalettes: {
+    readonly neutral: {
+        readonly name: "Neutral";
+        readonly light: {
+            readonly "0": "#000000";
+            readonly "5": "#111111";
+            readonly "10": "#1b1b1b";
+            readonly "15": "#262626";
+            readonly "20": "#303030";
+            readonly "25": "#3b3b3b";
+            readonly "30": "#474747";
+            readonly "35": "#525252";
+            readonly "40": "#5e5e5e";
+            readonly "45": "#6a6a6a";
+            readonly "50": "#777777";
+            readonly "55": "#848484";
+            readonly "60": "#919191";
+            readonly "65": "#9e9e9e";
+            readonly "70": "#ababab";
+            readonly "75": "#b9b9b9";
+            readonly "80": "#c6c6c6";
+            readonly "85": "#d4d4d4";
+            readonly "90": "#e2e2e2";
+            readonly "95": "#f1f1f1";
+            readonly "100": "#ffffff";
+        };
+        readonly dark: {
+            readonly "0": "#000000";
+            readonly "5": "#111111";
+            readonly "10": "#1b1b1b";
+            readonly "15": "#262626";
+            readonly "20": "#303030";
+            readonly "25": "#3b3b3b";
+            readonly "30": "#474747";
+            readonly "35": "#525252";
+            readonly "40": "#5e5e5e";
+            readonly "45": "#6a6a6a";
+            readonly "50": "#777777";
+            readonly "55": "#848484";
+            readonly "60": "#919191";
+            readonly "65": "#9e9e9e";
+            readonly "70": "#ababab";
+            readonly "75": "#b9b9b9";
+            readonly "80": "#c6c6c6";
+            readonly "85": "#d4d4d4";
+            readonly "90": "#e2e2e2";
+            readonly "95": "#f1f1f1";
+            readonly "100": "#ffffff";
+        };
+    };
+    readonly red: {
+        readonly name: "Red";
+        readonly light: {
+            readonly "0": "#000000";
+            readonly "5": "#2c0000";
+            readonly "10": "#3e0002";
+            readonly "15": "#500004";
+            readonly "20": "#620008";
+            readonly "25": "#76000c";
+            readonly "30": "#8a0011";
+            readonly "35": "#9e0015";
+            readonly "40": "#af1320";
+            readonly "45": "#c0262c";
+            readonly "50": "#cf3738";
+            readonly "55": "#de4745";
+            readonly "60": "#ed5753";
+            readonly "65": "#fa6762";
+            readonly "70": "#ff7f77";
+            readonly "75": "#ff9890";
+            readonly "80": "#ffaea7";
+            readonly "85": "#ffc4be";
+            readonly "90": "#ffd8d4";
+            readonly "95": "#ffece9";
+            readonly "100": "#ffffff";
+        };
+        readonly dark: {
+            readonly "0": "#000000";
+            readonly "5": "#200908";
+            readonly "10": "#2f1110";
+            readonly "15": "#3d1917";
+            readonly "20": "#4c221f";
+            readonly "25": "#5b2b28";
+            readonly "30": "#6b3431";
+            readonly "35": "#7e3c38";
+            readonly "40": "#92423e";
+            readonly "45": "#a84743";
+            readonly "50": "#be4e49";
+            readonly "55": "#d15752";
+            readonly "60": "#e1645e";
+            readonly "65": "#ee736c";
+            readonly "70": "#fb837b";
+            readonly "75": "#ff9890";
+            readonly "80": "#ffaea7";
+            readonly "85": "#ffc4be";
+            readonly "90": "#ffd8d4";
+            readonly "95": "#ffece9";
+            readonly "100": "#ffffff";
+        };
+    };
+    readonly orange: {
+        readonly name: "Orange";
+        readonly light: {
+            readonly "0": "#000000";
+            readonly "5": "#250500";
+            readonly "10": "#340d00";
+            readonly "15": "#431600";
+            readonly "20": "#521f00";
+            readonly "25": "#622700";
+            readonly "30": "#733100";
+            readonly "35": "#833a00";
+            readonly "40": "#944400";
+            readonly "45": "#a54f00";
+            readonly "50": "#b45c00";
+            readonly "55": "#c76600";
+            readonly "60": "#d97000";
+            readonly "65": "#e97e1d";
+            readonly "70": "#f58d3a";
+            readonly "75": "#ff9e55";
+            readonly "80": "#ffb37e";
+            readonly "85": "#ffc7a1";
+            readonly "90": "#ffdac2";
+            readonly "95": "#ffede1";
+            readonly "100": "#ffffff";
+        };
+        readonly dark: {
+            readonly "0": "#000000";
+            readonly "5": "#1c0c05";
+            readonly "10": "#29160d";
+            readonly "15": "#362014";
+            readonly "20": "#43291c";
+            readonly "25": "#503424";
+            readonly "30": "#603d2a";
+            readonly "35": "#72462d";
+            readonly "40": "#864f2c";
+            readonly "45": "#9b5627";
+            readonly "50": "#af5f1d";
+            readonly "55": "#c2691b";
+            readonly "60": "#d1762b";
+            readonly "65": "#df843f";
+            readonly "70": "#eb9352";
+            readonly "75": "#f7a266";
+            readonly "80": "#ffb37e";
+            readonly "85": "#ffc7a1";
+            readonly "90": "#ffdac2";
+            readonly "95": "#ffede1";
+            readonly "100": "#ffffff";
+        };
+    };
+    readonly yellow: {
+        readonly name: "Yellow";
+        readonly light: {
+            readonly "0": "#000000";
+            readonly "5": "#190f00";
+            readonly "10": "#251a00";
+            readonly "15": "#312400";
+            readonly "20": "#3e2e00";
+            readonly "25": "#4b3900";
+            readonly "30": "#584400";
+            readonly "35": "#664f00";
+            readonly "40": "#745b00";
+            readonly "45": "#836700";
+            readonly "50": "#927300";
+            readonly "55": "#a17f00";
+            readonly "60": "#b18c00";
+            readonly "65": "#c29900";
+            readonly "70": "#d2a700";
+            readonly "75": "#e2b623";
+            readonly "80": "#eec448";
+            readonly "85": "#f8d36a";
+            readonly "90": "#ffe193";
+            readonly "95": "#fff0ca";
+            readonly "100": "#ffffff";
+        };
+        readonly dark: {
+            readonly "0": "#000000";
+            readonly "5": "#161002";
+            readonly "10": "#221b08";
+            readonly "15": "#2d250e";
+            readonly "20": "#392f15";
+            readonly "25": "#453a1c";
+            readonly "30": "#524521";
+            readonly "35": "#615124";
+            readonly "40": "#705c24";
+            readonly "45": "#80681f";
+            readonly "50": "#907316";
+            readonly "55": "#a17f07";
+            readonly "60": "#b18c00";
+            readonly "65": "#be9921";
+            readonly "70": "#cba73d";
+            readonly "75": "#d7b554";
+            readonly "80": "#e3c36c";
+            readonly "85": "#efd284";
+            readonly "90": "#fae19e";
+            readonly "95": "#fff0c8";
+            readonly "100": "#ffffff";
+        };
+    };
+    readonly green: {
+        readonly name: "Green";
+        readonly light: {
+            readonly "0": "#000000";
+            readonly "5": "#001800";
+            readonly "10": "#002400";
+            readonly "15": "#003002";
+            readonly "20": "#003d05";
+            readonly "25": "#00490b";
+            readonly "30": "#0b5615";
+            readonly "35": "#17631e";
+            readonly "40": "#237028";
+            readonly "45": "#2f7d33";
+            readonly "50": "#3c8a3f";
+            readonly "55": "#4a984c";
+            readonly "60": "#59a55b";
+            readonly "65": "#6ab26b";
+            readonly "70": "#7dbe7e";
+            readonly "75": "#90ca90";
+            readonly "80": "#a4d6a3";
+            readonly "85": "#b7e2b6";
+            readonly "90": "#cbeeca";
+            readonly "95": "#defadd";
+            readonly "100": "#ffffff";
+        };
+        readonly dark: {
+            readonly "0": "#000000";
+            readonly "5": "#091409";
+            readonly "10": "#112011";
+            readonly "15": "#192b19";
+            readonly "20": "#223622";
+            readonly "25": "#2b422b";
+            readonly "30": "#344e34";
+            readonly "35": "#3c5c3c";
+            readonly "40": "#436a43";
+            readonly "45": "#497849";
+            readonly "50": "#508651";
+            readonly "55": "#59945a";
+            readonly "60": "#65a266";
+            readonly "65": "#74af75";
+            readonly "70": "#85bb85";
+            readonly "75": "#97c897";
+            readonly "80": "#aad4a9";
+            readonly "85": "#bce0bb";
+            readonly "90": "#ceecce";
+            readonly "95": "#e1f8e0";
+            readonly "100": "#ffffff";
+        };
+    };
+    readonly teal: {
+        readonly name: "Teal";
+        readonly light: {
+            readonly "0": "#000000";
+            readonly "5": "#001612";
+            readonly "10": "#00221c";
+            readonly "15": "#002e27";
+            readonly "20": "#003a32";
+            readonly "25": "#00463d";
+            readonly "30": "#005348";
+            readonly "35": "#006154";
+            readonly "40": "#006e60";
+            readonly "45": "#007c6d";
+            readonly "50": "#008b7a";
+            readonly "55": "#009986";
+            readonly "60": "#01a894";
+            readonly "65": "#34b5a1";
+            readonly "70": "#56c0ae";
+            readonly "75": "#74ccbb";
+            readonly "80": "#90d7c8";
+            readonly "85": "#a9e2d6";
+            readonly "90": "#c1eee4";
+            readonly "95": "#d7f9f2";
+            readonly "100": "#ffffff";
+        };
+        readonly dark: {
+            readonly "0": "#000000";
+            readonly "5": "#071411";
+            readonly "10": "#0f1f1c";
+            readonly "15": "#172a26";
+            readonly "20": "#1f3531";
+            readonly "25": "#28413c";
+            readonly "30": "#2f4e48";
+            readonly "35": "#325b53";
+            readonly "40": "#326a60";
+            readonly "45": "#2d796c";
+            readonly "50": "#248979";
+            readonly "55": "#299786";
+            readonly "60": "#39a593";
+            readonly "65": "#4fb1a0";
+            readonly "70": "#68bdad";
+            readonly "75": "#81c9bb";
+            readonly "80": "#99d5c8";
+            readonly "85": "#b1e0d6";
+            readonly "90": "#c6ece3";
+            readonly "95": "#dbf8f1";
+            readonly "100": "#ffffff";
+        };
+    };
+    readonly cyan: {
+        readonly name: "Cyan";
+        readonly light: {
+            readonly "0": "#000000";
+            readonly "5": "#00151b";
+            readonly "10": "#002028";
+            readonly "15": "#002c35";
+            readonly "20": "#003743";
+            readonly "25": "#004351";
+            readonly "30": "#00505f";
+            readonly "35": "#005d6e";
+            readonly "40": "#006a7d";
+            readonly "45": "#00788d";
+            readonly "50": "#00859d";
+            readonly "55": "#0093ad";
+            readonly "60": "#00a2be";
+            readonly "65": "#29afcb";
+            readonly "70": "#45bdd7";
+            readonly "75": "#5ecae3";
+            readonly "80": "#75d7ef";
+            readonly "85": "#8ee4f9";
+            readonly "90": "#afefff";
+            readonly "95": "#d9f7ff";
+            readonly "100": "#ffffff";
+        };
+        readonly dark: {
+            readonly "0": "#000000";
+            readonly "5": "#071316";
+            readonly "10": "#0f1e22";
+            readonly "15": "#17292e";
+            readonly "20": "#1f343a";
+            readonly "25": "#274046";
+            readonly "30": "#2e4c54";
+            readonly "35": "#325963";
+            readonly "40": "#326774";
+            readonly "45": "#2d7586";
+            readonly "50": "#228499";
+            readonly "55": "#2592a9";
+            readonly "60": "#35a0b7";
+            readonly "65": "#49adc4";
+            readonly "70": "#5dbad1";
+            readonly "75": "#71c7dd";
+            readonly "80": "#85d5e9";
+            readonly "85": "#9ae2f4";
+            readonly "90": "#b1eefe";
+            readonly "95": "#d9f7ff";
+            readonly "100": "#ffffff";
+        };
+    };
+    readonly blue: {
+        readonly name: "Blue";
+        readonly light: {
+            readonly "0": "#000000";
+            readonly "5": "#000f30";
+            readonly "10": "#001a41";
+            readonly "15": "#002452";
+            readonly "20": "#002f65";
+            readonly "25": "#003978";
+            readonly "30": "#00458c";
+            readonly "35": "#0050a2";
+            readonly "40": "#005cb8";
+            readonly "45": "#0067ce";
+            readonly "50": "#0074e2";
+            readonly "55": "#1e81f0";
+            readonly "60": "#348ffd";
+            readonly "65": "#529fff";
+            readonly "70": "#6eaeff";
+            readonly "75": "#88bcff";
+            readonly "80": "#a1caff";
+            readonly "85": "#b9d7ff";
+            readonly "90": "#d0e5ff";
+            readonly "95": "#e8f2ff";
+            readonly "100": "#ffffff";
+        };
+        readonly dark: {
+            readonly "0": "#000000";
+            readonly "5": "#051121";
+            readonly "10": "#0d1c2f";
+            readonly "15": "#15263d";
+            readonly "20": "#1d314b";
+            readonly "25": "#253c5a";
+            readonly "30": "#2b486c";
+            readonly "35": "#2f5382";
+            readonly "40": "#315f99";
+            readonly "45": "#346bb1";
+            readonly "50": "#3778c7";
+            readonly "55": "#3e84dc";
+            readonly "60": "#4a92eb";
+            readonly "65": "#5aa0f8";
+            readonly "70": "#6eaeff";
+            readonly "75": "#88bcff";
+            readonly "80": "#a1caff";
+            readonly "85": "#b9d7ff";
+            readonly "90": "#d0e5ff";
+            readonly "95": "#e8f2ff";
+            readonly "100": "#ffffff";
+        };
+    };
+    readonly purple: {
+        readonly name: "Purple";
+        readonly light: {
+            readonly "0": "#000000";
+            readonly "5": "#210028";
+            readonly "10": "#31003b";
+            readonly "15": "#3f004c";
+            readonly "20": "#4e045c";
+            readonly "25": "#5c0e6c";
+            readonly "30": "#6b187c";
+            readonly "35": "#781f8a";
+            readonly "40": "#842699";
+            readonly "45": "#9130a7";
+            readonly "50": "#9f3cb5";
+            readonly "55": "#ad4dc3";
+            readonly "60": "#bb5fd1";
+            readonly "65": "#ca72de";
+            readonly "70": "#d885eb";
+            readonly "75": "#e496f6";
+            readonly "80": "#efa8ff";
+            readonly "85": "#f3bfff";
+            readonly "90": "#f7d5ff";
+            readonly "95": "#fbeaff";
+            readonly "100": "#ffffff";
+        };
+        readonly dark: {
+            readonly "0": "#000000";
+            readonly "5": "#180b1b";
+            readonly "10": "#251329";
+            readonly "15": "#311c36";
+            readonly "20": "#3e2544";
+            readonly "25": "#4a2f51";
+            readonly "30": "#58395f";
+            readonly "35": "#674270";
+            readonly "40": "#784983";
+            readonly "45": "#895196";
+            readonly "50": "#9a59a9";
+            readonly "55": "#aa63ba";
+            readonly "60": "#b870c9";
+            readonly "65": "#c57ed5";
+            readonly "70": "#d28de2";
+            readonly "75": "#de9ced";
+            readonly "80": "#eaacf8";
+            readonly "85": "#f3bfff";
+            readonly "90": "#f7d5ff";
+            readonly "95": "#fbeaff";
+            readonly "100": "#ffffff";
+        };
+    };
+    readonly pink: {
+        readonly name: "Pink";
+        readonly light: {
+            readonly "0": "#000000";
+            readonly "5": "#290013";
+            readonly "10": "#3b001e";
+            readonly "15": "#4b0028";
+            readonly "20": "#5d0034";
+            readonly "25": "#70003f";
+            readonly "30": "#83004b";
+            readonly "35": "#950457";
+            readonly "40": "#a61863";
+            readonly "45": "#b52970";
+            readonly "50": "#c5387c";
+            readonly "55": "#d44789";
+            readonly "60": "#e25796";
+            readonly "65": "#ef67a3";
+            readonly "70": "#fc78b1";
+            readonly "75": "#ff90bd";
+            readonly "80": "#ffa9ca";
+            readonly "85": "#ffc0d7";
+            readonly "90": "#ffd5e4";
+            readonly "95": "#ffeaf1";
+            readonly "100": "#ffffff";
+        };
+        readonly dark: {
+            readonly "0": "#000000";
+            readonly "5": "#1e0912";
+            readonly "10": "#2d111d";
+            readonly "15": "#3b1927";
+            readonly "20": "#492132";
+            readonly "25": "#572b3d";
+            readonly "30": "#663449";
+            readonly "35": "#783b55";
+            readonly "40": "#8c4161";
+            readonly "45": "#a1476e";
+            readonly "50": "#b54e7b";
+            readonly "55": "#c85688";
+            readonly "60": "#d76395";
+            readonly "65": "#e572a3";
+            readonly "70": "#f181b0";
+            readonly "75": "#fd92bd";
+            readonly "80": "#ffa9ca";
+            readonly "85": "#ffc0d7";
+            readonly "90": "#ffd5e4";
+            readonly "95": "#ffeaf1";
+            readonly "100": "#ffffff";
+        };
+    };
+    readonly black: "#000000";
+    readonly white: "#ffffff";
+};
+export default neutralPalettes;

package/dist/neutralTheme.d.cts

@@ -0,0 +1 @@
+export declare const neutralTheme: import("@astryxdesign/core/theme").ResolvedDefinedTheme<never>;

package/dist/neutralTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AAyCA,eAAO,MAAM,YAAY,gEA8WvB,CAAC"}
+{"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AAyCA,eAAO,MAAM,YAAY,gEAoXvB,CAAC"}

package/dist/{source.js → source.cjs}

@@ -418,7 +418,13 @@ var neutralTheme = (0, import_theme.defineTheme)({
         padding: "var(--spacing-1)"
       }
     },
+    // An unselected label sits on the translucent track, which lifts the
+    // page under it. In dark mode secondary text falls under 4.5:1 on the
+    // track over the surface, so it takes the same next stop.
     "segmented-control-item": {
+      base: {
+        "--color-text-secondary": `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`
+      },
       "size:sm": {
         height: "calc(var(--size-element-sm) - 8px)"
       },

package/dist/source.d.cts

@@ -0,0 +1,3 @@
+export { neutralTheme } from './neutralTheme.cjs';
+export { neutralPalettes } from './neutralPalettes.cjs';
+export { neutralIconRegistry } from './icons.cjs';

package/dist/source.d.ts

@@ -1,4 +1,4 @@
-export { neutralTheme } from './neutralTheme';
-export { neutralPalettes } from './neutralPalettes';
-export { neutralIconRegistry } from './icons';
+export { neutralTheme } from './neutralTheme.js';
+export { neutralPalettes } from './neutralPalettes.js';
+export { neutralIconRegistry } from './icons.js';
 //# sourceMappingURL=source.d.ts.map

package/dist/source.mjs

@@ -423,7 +423,13 @@ var neutralTheme = defineTheme({
         padding: "var(--spacing-1)"
       }
     },
+    // An unselected label sits on the translucent track, which lifts the
+    // page under it. In dark mode secondary text falls under 4.5:1 on the
+    // track over the surface, so it takes the same next stop.
     "segmented-control-item": {
+      base: {
+        "--color-text-secondary": `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`
+      },
       "size:sm": {
         height: "calc(var(--size-element-sm) - 8px)"
       },

package/dist/theme.css

@@ -86,18 +86,30 @@
 
 @scope ([data-astryx-theme="neutral"]) to ([data-astryx-theme]) {
   :scope {
-    --font-size-4xs: 0.375rem;
-    --font-size-3xs: 0.4375rem;
-    --font-size-2xs: 0.5rem;
-    --font-size-xs: 0.625rem;
-    --font-size-sm: 0.75rem;
-    --font-size-base: 0.875rem;
-    --font-size-lg: 1.0625rem;
-    --font-size-xl: 1.25rem;
-    --font-size-2xl: 1.5rem;
-    --font-size-3xl: 1.8125rem;
-    --font-size-4xl: 2.1875rem;
-    --font-size-5xl: 2.625rem;
+    --_scaled-font-size-4xs: min(calc(0.375rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-3xs));
+    --font-size-4xs: var(--_scaled-font-size-4xs);
+    --_scaled-font-size-3xs: min(calc(0.4375rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-2xs));
+    --font-size-3xs: var(--_scaled-font-size-3xs);
+    --_scaled-font-size-2xs: min(calc(0.5rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-xs));
+    --font-size-2xs: var(--_scaled-font-size-2xs);
+    --_scaled-font-size-xs: min(calc(0.625rem * var(--_dynamic-type-caption1, 1)), var(--_scaled-font-size-sm));
+    --font-size-xs: var(--_scaled-font-size-xs);
+    --_scaled-font-size-sm: min(calc(0.75rem * var(--_dynamic-type-footnote, 1)), var(--_scaled-font-size-base));
+    --font-size-sm: var(--_scaled-font-size-sm);
+    --_scaled-font-size-base: min(calc(0.875rem * var(--_dynamic-type-body, 1)), var(--_scaled-font-size-lg));
+    --font-size-base: var(--_scaled-font-size-base);
+    --_scaled-font-size-lg: min(calc(1.0625rem * var(--_dynamic-type-title3, 1)), var(--_scaled-font-size-xl));
+    --font-size-lg: var(--_scaled-font-size-lg);
+    --_scaled-font-size-xl: min(calc(1.25rem * var(--_dynamic-type-title2, 1)), var(--_scaled-font-size-2xl));
+    --font-size-xl: var(--_scaled-font-size-xl);
+    --_scaled-font-size-2xl: min(calc(1.5rem * var(--_dynamic-type-title1, 1)), var(--_scaled-font-size-3xl));
+    --font-size-2xl: var(--_scaled-font-size-2xl);
+    --_scaled-font-size-3xl: min(calc(1.8125rem * var(--_dynamic-type-title1, 1)), var(--_scaled-font-size-4xl));
+    --font-size-3xl: var(--_scaled-font-size-3xl);
+    --_scaled-font-size-4xl: min(calc(2.1875rem * var(--_dynamic-type-large-title, 1)), var(--_scaled-font-size-5xl));
+    --font-size-4xl: var(--_scaled-font-size-4xl);
+    --_scaled-font-size-5xl: calc(2.625rem * var(--_dynamic-type-large-title, 1));
+    --font-size-5xl: var(--_scaled-font-size-5xl);
     --text-heading-1-size: var(--font-size-2xl);
     --text-heading-1-weight: var(--font-weight-semibold);
     --text-heading-1-leading: 1.3333;
@@ -487,6 +499,10 @@
     --_segmented-control-padding: var(--spacing-1);
   }
 
+  .astryx-segmented-control-item {
+    --color-text-secondary: light-dark(#474747, #c6c6c6);
+  }
+
   .astryx-segmented-control-item[data-size="sm"] {
     height: calc(var(--size-element-sm) - 8px);
   }
@@ -579,18 +595,30 @@
 @media (width < 1024px) and (pointer: coarse) {
   @scope ([data-astryx-theme="neutral"]) to ([data-astryx-theme]) {
     :scope {
-    --font-size-4xs: 0.4375rem;
-    --font-size-3xs: 0.5rem;
-    --font-size-2xs: 0.625rem;
-    --font-size-xs: 0.75rem;
-    --font-size-sm: 0.875rem;
-    --font-size-base: 1rem;
-    --font-size-lg: 1.1875rem;
-    --font-size-xl: 1.375rem;
-    --font-size-2xl: 1.625rem;
-    --font-size-3xl: 1.875rem;
-    --font-size-4xl: 2.25rem;
-    --font-size-5xl: 2.625rem;
+    --_scaled-font-size-4xs: min(calc(0.4375rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-3xs));
+    --font-size-4xs: var(--_scaled-font-size-4xs);
+    --_scaled-font-size-3xs: min(calc(0.5rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-2xs));
+    --font-size-3xs: var(--_scaled-font-size-3xs);
+    --_scaled-font-size-2xs: min(calc(0.625rem * var(--_dynamic-type-caption2, 1)), var(--_scaled-font-size-xs));
+    --font-size-2xs: var(--_scaled-font-size-2xs);
+    --_scaled-font-size-xs: min(calc(0.75rem * var(--_dynamic-type-caption1, 1)), var(--_scaled-font-size-sm));
+    --font-size-xs: var(--_scaled-font-size-xs);
+    --_scaled-font-size-sm: min(calc(0.875rem * var(--_dynamic-type-footnote, 1)), var(--_scaled-font-size-base));
+    --font-size-sm: var(--_scaled-font-size-sm);
+    --_scaled-font-size-base: min(calc(1rem * var(--_dynamic-type-body, 1)), var(--_scaled-font-size-lg));
+    --font-size-base: var(--_scaled-font-size-base);
+    --_scaled-font-size-lg: min(calc(1.1875rem * var(--_dynamic-type-title3, 1)), var(--_scaled-font-size-xl));
+    --font-size-lg: var(--_scaled-font-size-lg);
+    --_scaled-font-size-xl: min(calc(1.375rem * var(--_dynamic-type-title2, 1)), var(--_scaled-font-size-2xl));
+    --font-size-xl: var(--_scaled-font-size-xl);
+    --_scaled-font-size-2xl: min(calc(1.625rem * var(--_dynamic-type-title1, 1)), var(--_scaled-font-size-3xl));
+    --font-size-2xl: var(--_scaled-font-size-2xl);
+    --_scaled-font-size-3xl: min(calc(1.875rem * var(--_dynamic-type-title1, 1)), var(--_scaled-font-size-4xl));
+    --font-size-3xl: var(--_scaled-font-size-3xl);
+    --_scaled-font-size-4xl: min(calc(2.25rem * var(--_dynamic-type-large-title, 1)), var(--_scaled-font-size-5xl));
+    --font-size-4xl: var(--_scaled-font-size-4xl);
+    --_scaled-font-size-5xl: calc(2.625rem * var(--_dynamic-type-large-title, 1));
+    --font-size-5xl: var(--_scaled-font-size-5xl);
     --text-heading-1-size: var(--font-size-2xl);
     --text-heading-1-weight: var(--font-weight-semibold);
     --text-heading-1-leading: 1.3846;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/theme-neutral",
-  "version": "0.7.12-canary.f543ec7",
+  "version": "0.7.12",
   "displayName": "Neutral Theme",
   "private": false,
   "description": "Restrained warm grays. Minimal and quiet, so the content stays the focus.",
@@ -25,13 +25,19 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "./dist/source.js",
+  "type": "module",
+  "main": "./dist/source.cjs",
   "types": "./dist/source.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/source.d.ts",
-      "import": "./dist/source.mjs",
-      "require": "./dist/source.js"
+      "import": {
+        "types": "./dist/source.d.ts",
+        "default": "./dist/source.mjs"
+      },
+      "require": {
+        "types": "./dist/source.d.cts",
+        "default": "./dist/source.cjs"
+      }
     },
     "./built": {
       "types": "./dist/neutral.d.ts",
@@ -52,6 +58,7 @@
     "src",
     "fonts.css",
     "fonts.css.d.ts",
+    "theme.css.d.ts",
     "palette.config.json",
     "!**/*.test.*",
     "!**/*.spec.js",
@@ -71,15 +78,15 @@
     "lucide-react": "^1.18.0"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.7.12-canary.f543ec7",
+    "@astryxdesign/core": "0.7.12",
     "react": ">=19"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.7.12-canary.f543ec7"
+    "@astryxdesign/cli": "0.7.12"
   },
   "module": "./dist/source.mjs",
   "scripts": {
     "api:report": "node ../../../scripts/api-report/cli.mjs --package .",
-    "build": "node ../../../scripts/clean-dist.mjs && node ../../../scripts/generate-neutral-palette-refs.mjs --check && astryx theme build src/neutralTheme.ts -o dist/theme.css --icons-specifier ./icons.mjs && tsup && tsc --project tsconfig.build.json && node ../../../scripts/check-fully-specified.mjs"
+    "build": "node ../../../scripts/clean-dist.mjs && node ../../../scripts/generate-neutral-palette-refs.mjs --check && astryx theme build src/neutralTheme.ts -o dist/theme.css --icons-specifier ./icons.mjs && tsup && tsc --project tsconfig.build.json && node ../../../scripts/add-declaration-extensions.mjs && node ../../../scripts/emit-commonjs-declarations.mjs dist/source.d.ts && node ../../../scripts/check-fully-specified.mjs"
   }
 }

package/src/neutralTheme.ts

@@ -361,7 +361,13 @@ export const neutralTheme = defineTheme({
         padding: 'var(--spacing-1)',
       },
     },
+    // An unselected label sits on the translucent track, which lifts the
+    // page under it. In dark mode secondary text falls under 4.5:1 on the
+    // track over the surface, so it takes the same next stop.
     'segmented-control-item': {
+      base: {
+        '--color-text-secondary': `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`,
+      },
       'size:sm': {
         height: 'calc(var(--size-element-sm) - 8px)',
       },

package/theme.css.d.ts

@@ -0,0 +1,3 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export {};