@astryxdesign/theme-stone 0.7.11 → 0.7.12-canary.0840fcc

package/dist/icons.d.cts

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

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

@@ -288,7 +288,8 @@ var stoneTheme = (0, import_theme.defineTheme)({
     ],
     "--color-tint-hover": [neutral.light[0], neutral.dark[100]],
     // Typography override
-    "--text-supporting-size": "12px",
+    "--text-supporting-size": "0.75rem",
+    // 12px at the default root size
     // Categorical
     // Light mode pairs pastel stop 90 surfaces with stop 30 foregrounds.
     // Dark mode pairs stop 35 surfaces with stop 90 foregrounds; borders move

package/dist/source.d.cts

@@ -0,0 +1,2 @@
+export { stonePalettes, stoneTheme } from './stoneTheme.cjs';
+export { stoneIconRegistry } from './icons.cjs';

package/dist/source.d.ts

@@ -1,3 +1,3 @@
-export { stonePalettes, stoneTheme } from './stoneTheme';
-export { stoneIconRegistry } from './icons';
+export { stonePalettes, stoneTheme } from './stoneTheme.js';
+export { stoneIconRegistry } from './icons.js';
 //# sourceMappingURL=source.d.ts.map

package/dist/source.mjs

@@ -290,7 +290,8 @@ var stoneTheme = defineTheme({
     ],
     "--color-tint-hover": [neutral.light[0], neutral.dark[100]],
     // Typography override
-    "--text-supporting-size": "12px",
+    "--text-supporting-size": "0.75rem",
+    // 12px at the default root size
     // Categorical
     // Light mode pairs pastel stop 90 surfaces with stop 30 foregrounds.
     // Dark mode pairs stop 35 surfaces with stop 90 foregrounds; borders move

package/dist/stone.d.ts

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/stoneTheme.ts
  * Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
- * CLI: @astryxdesign/cli@0.7.11
- * Core: @astryxdesign/core@0.7.11
+ * CLI: @astryxdesign/cli@0.7.12
+ * Core: @astryxdesign/core@0.7.12
  */
 
 import type { DefinedTheme } from '@astryxdesign/core/theme';

package/dist/stone.js

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/stoneTheme.ts
  * Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
- * CLI: @astryxdesign/cli@0.7.11
- * Core: @astryxdesign/core@0.7.11
+ * CLI: @astryxdesign/cli@0.7.12
+ * Core: @astryxdesign/core@0.7.12
  */
 
 import { stoneIconRegistry } from "./icons.mjs";
@@ -60,7 +60,7 @@ export const stoneTheme = {
     "--text-code-size": "var(--font-size-base)",
     "--text-code-weight": "var(--font-weight-normal)",
     "--text-code-leading": "1.4286",
-    "--text-supporting-size": "12px",
+    "--text-supporting-size": "0.75rem",
     "--text-supporting-weight": "var(--font-weight-normal)",
     "--text-supporting-leading": "1.4545",
     "--text-display-1-size": "var(--font-size-5xl)",

package/dist/stoneTheme.d.cts

@@ -0,0 +1,260 @@
+export declare const stoneTheme: import("@astryxdesign/core/theme").ResolvedDefinedTheme<never>;
+/**
+ * Frozen released compatibility palettes. These values preserve the public
+ * `stonePalettes` numeric stops, `hue`, and `chroma` for existing consumers;
+ * the maintained theme renders selected stops from
+ * `stonePalettes.generated.ts` instead. Components should consume semantic
+ * theme tokens, and charts should use the data-visualization color API.
+ */
+export declare const stonePalettes: {
+    readonly neutral: {
+        readonly hue: 291;
+        readonly chroma: 3;
+        readonly 0: "#000000";
+        readonly 5: "#111015";
+        readonly 10: "#1b1b1f";
+        readonly 15: "#25252a";
+        readonly 20: "#303034";
+        readonly 25: "#3b3b3f";
+        readonly 30: "#46464b";
+        readonly 35: "#525257";
+        readonly 40: "#5e5e63";
+        readonly 45: "#6a6a6f";
+        readonly 50: "#77777c";
+        readonly 55: "#838388";
+        readonly 60: "#909095";
+        readonly 65: "#9d9da3";
+        readonly 70: "#ababb0";
+        readonly 75: "#b8b8be";
+        readonly 80: "#c6c6cc";
+        readonly 85: "#d4d4da";
+        readonly 90: "#e2e2e8";
+        readonly 95: "#f0f0f6";
+        readonly 100: "#ffffff";
+    };
+    readonly blue: {
+        readonly hue: 265;
+        readonly chroma: 10;
+        readonly 0: "#000000";
+        readonly 5: "#04121e";
+        readonly 10: "#111c29";
+        readonly 15: "#1b2734";
+        readonly 20: "#26313f";
+        readonly 25: "#313c4a";
+        readonly 30: "#3c4856";
+        readonly 35: "#485362";
+        readonly 40: "#545f6e";
+        readonly 45: "#606c7b";
+        readonly 50: "#6c7888";
+        readonly 55: "#798595";
+        readonly 60: "#8692a2";
+        readonly 65: "#939faf";
+        readonly 70: "#a0acbd";
+        readonly 75: "#adbacb";
+        readonly 80: "#bbc8d9";
+        readonly 85: "#c9d6e7";
+        readonly 90: "#d7e4f5";
+        readonly 95: "#e7f2ff";
+        readonly 100: "#ffffff";
+    };
+    readonly cyan: {
+        readonly hue: 190;
+        readonly chroma: 10;
+        readonly 0: "#000000";
+        readonly 5: "#001613";
+        readonly 10: "#071f1e";
+        readonly 15: "#122a28";
+        readonly 20: "#1d3433";
+        readonly 25: "#28403e";
+        readonly 30: "#334b49";
+        readonly 35: "#3e5755";
+        readonly 40: "#4a6361";
+        readonly 45: "#566f6d";
+        readonly 50: "#627c7a";
+        readonly 55: "#6f8986";
+        readonly 60: "#7b9693";
+        readonly 65: "#88a3a0";
+        readonly 70: "#95b1ae";
+        readonly 75: "#a3bebb";
+        readonly 80: "#b0ccc9";
+        readonly 85: "#bedad7";
+        readonly 90: "#cce8e5";
+        readonly 95: "#daf7f4";
+        readonly 100: "#ffffff";
+    };
+    readonly green: {
+        readonly hue: 142;
+        readonly chroma: 17;
+        readonly 0: "#000000";
+        readonly 5: "#001700";
+        readonly 10: "#0c200a";
+        readonly 15: "#162a16";
+        readonly 20: "#213521";
+        readonly 25: "#2b402b";
+        readonly 30: "#374c36";
+        readonly 35: "#425841";
+        readonly 40: "#4e644d";
+        readonly 45: "#5a7059";
+        readonly 50: "#667d65";
+        readonly 55: "#728a71";
+        readonly 60: "#7f977e";
+        readonly 65: "#8ca48b";
+        readonly 70: "#99b298";
+        readonly 75: "#a7bfa5";
+        readonly 80: "#b4cdb2";
+        readonly 85: "#c2dbc0";
+        readonly 90: "#d0e9ce";
+        readonly 95: "#def8dc";
+        readonly 100: "#ffffff";
+    };
+    readonly teal: {
+        readonly hue: 158;
+        readonly chroma: 9;
+        readonly 0: "#000000";
+        readonly 5: "#00150a";
+        readonly 10: "#101e17";
+        readonly 15: "#1a2921";
+        readonly 20: "#25342b";
+        readonly 25: "#303f36";
+        readonly 30: "#3b4a41";
+        readonly 35: "#46564d";
+        readonly 40: "#526259";
+        readonly 45: "#5e6e65";
+        readonly 50: "#6a7b71";
+        readonly 55: "#77887e";
+        readonly 60: "#83958a";
+        readonly 65: "#90a297";
+        readonly 70: "#9dafa5";
+        readonly 75: "#abbdb2";
+        readonly 80: "#b8cbc0";
+        readonly 85: "#c6d9ce";
+        readonly 90: "#d4e7dc";
+        readonly 95: "#e2f5ea";
+        readonly 100: "#ffffff";
+    };
+    readonly yellow: {
+        readonly hue: 90;
+        readonly chroma: 23;
+        readonly 0: "#000000";
+        readonly 5: "#1f0f00";
+        readonly 10: "#261a00";
+        readonly 15: "#2f2500";
+        readonly 20: "#3a2f0d";
+        readonly 25: "#463a18";
+        readonly 30: "#524622";
+        readonly 35: "#5e512d";
+        readonly 40: "#6b5d39";
+        readonly 45: "#786944";
+        readonly 50: "#857650";
+        readonly 55: "#92825c";
+        readonly 60: "#9f8f68";
+        readonly 65: "#ad9c75";
+        readonly 70: "#bbaa81";
+        readonly 75: "#c9b78e";
+        readonly 80: "#d7c59c";
+        readonly 85: "#e5d3a9";
+        readonly 90: "#f4e1b7";
+        readonly 95: "#ffefc7";
+        readonly 100: "#ffffff";
+    };
+    readonly orange: {
+        readonly hue: 70;
+        readonly chroma: 22;
+        readonly 0: "#000000";
+        readonly 5: "#250a00";
+        readonly 10: "#2d1700";
+        readonly 15: "#372104";
+        readonly 20: "#432c12";
+        readonly 25: "#4f361c";
+        readonly 30: "#5b4227";
+        readonly 35: "#684d32";
+        readonly 40: "#75593d";
+        readonly 45: "#826548";
+        readonly 50: "#8f7154";
+        readonly 55: "#9d7e60";
+        readonly 60: "#aa8b6d";
+        readonly 65: "#b89879";
+        readonly 70: "#c6a586";
+        readonly 75: "#d4b393";
+        readonly 80: "#e3c0a0";
+        readonly 85: "#f1ceae";
+        readonly 90: "#ffdcbb";
+        readonly 95: "#ffeddc";
+        readonly 100: "#ffffff";
+    };
+    readonly red: {
+        readonly hue: 33;
+        readonly chroma: 11;
+        readonly 0: "#000000";
+        readonly 5: "#210a04";
+        readonly 10: "#2a1714";
+        readonly 15: "#35211e";
+        readonly 20: "#402b28";
+        readonly 25: "#4c3633";
+        readonly 30: "#58413e";
+        readonly 35: "#644d49";
+        readonly 40: "#715955";
+        readonly 45: "#7e6561";
+        readonly 50: "#8a716d";
+        readonly 55: "#987e7a";
+        readonly 60: "#a58b86";
+        readonly 65: "#b39893";
+        readonly 70: "#c0a5a1";
+        readonly 75: "#ceb3ae";
+        readonly 80: "#dcc0bc";
+        readonly 85: "#ebcec9";
+        readonly 90: "#f9dcd7";
+        readonly 95: "#ffece9";
+        readonly 100: "#ffffff";
+    };
+    readonly pink: {
+        readonly hue: 340;
+        readonly chroma: 9;
+        readonly 0: "#000000";
+        readonly 5: "#1b0c16";
+        readonly 10: "#251720";
+        readonly 15: "#30222a";
+        readonly 20: "#3b2c35";
+        readonly 25: "#463740";
+        readonly 30: "#52424c";
+        readonly 35: "#5e4e57";
+        readonly 40: "#6a5a63";
+        readonly 45: "#776670";
+        readonly 50: "#83727c";
+        readonly 55: "#907f89";
+        readonly 60: "#9d8c96";
+        readonly 65: "#ab99a3";
+        readonly 70: "#b8a6b1";
+        readonly 75: "#c6b4be";
+        readonly 80: "#d4c1cc";
+        readonly 85: "#e2cfda";
+        readonly 90: "#f0dde8";
+        readonly 95: "#ffebf7";
+        readonly 100: "#ffffff";
+    };
+    readonly purple: {
+        readonly hue: 307;
+        readonly chroma: 11;
+        readonly 0: "#000000";
+        readonly 5: "#150e1d";
+        readonly 10: "#1f1927";
+        readonly 15: "#292332";
+        readonly 20: "#342e3d";
+        readonly 25: "#3f3949";
+        readonly 30: "#4b4454";
+        readonly 35: "#564f60";
+        readonly 40: "#635b6d";
+        readonly 45: "#6f6779";
+        readonly 50: "#7b7486";
+        readonly 55: "#888193";
+        readonly 60: "#958da0";
+        readonly 65: "#a39aad";
+        readonly 70: "#b0a8bb";
+        readonly 75: "#beb5c9";
+        readonly 80: "#cbc3d7";
+        readonly 85: "#d9d1e5";
+        readonly 90: "#e8dff3";
+        readonly 95: "#f6edff";
+        readonly 100: "#ffffff";
+    };
+};

package/dist/theme.css

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/stoneTheme.ts
  * Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
- * CLI: @astryxdesign/cli@0.7.11
- * Core: @astryxdesign/core@0.7.11
+ * CLI: @astryxdesign/cli@0.7.12
+ * Core: @astryxdesign/core@0.7.12
  */
 
 @layer reset, astryx-base, astryx-theme;
@@ -86,18 +86,30 @@
 
 @scope ([data-astryx-theme="stone"]) to ([data-astryx-theme]) {
   :scope {
-    --font-size-4xs: 0.3125rem;
-    --font-size-3xs: 0.375rem;
-    --font-size-2xs: 0.4375rem;
-    --font-size-xs: 0.5625rem;
-    --font-size-sm: 0.6875rem;
-    --font-size-base: 0.875rem;
-    --font-size-lg: 1.125rem;
-    --font-size-xl: 1.375rem;
-    --font-size-2xl: 1.6875rem;
-    --font-size-3xl: 2.125rem;
-    --font-size-4xl: 2.6875rem;
-    --font-size-5xl: 3.3125rem;
+    --_scaled-font-size-4xs: min(calc(0.3125rem * 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.375rem * 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.4375rem * 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.5625rem * 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.6875rem * 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.125rem * 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.6875rem * var(--_dynamic-type-title1, 1)), var(--_scaled-font-size-3xl));
+    --font-size-2xl: var(--_scaled-font-size-2xl);
+    --_scaled-font-size-3xl: min(calc(2.125rem * 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.6875rem * var(--_dynamic-type-large-title, 1)), var(--_scaled-font-size-5xl));
+    --font-size-4xl: var(--_scaled-font-size-4xl);
+    --_scaled-font-size-5xl: calc(3.3125rem * 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;
@@ -128,7 +140,7 @@
     --text-code-size: var(--font-size-base);
     --text-code-weight: var(--font-weight-normal);
     --text-code-leading: 1.4286;
-    --text-supporting-size: 12px;
+    --text-supporting-size: calc(0.75rem * var(--_dynamic-type-footnote, 1));
     --text-supporting-weight: var(--font-weight-normal);
     --text-supporting-leading: 1.4545;
     --text-display-1-size: var(--font-size-5xl);
@@ -763,18 +775,30 @@
 @media (width < 1024px) and (pointer: coarse) {
   @scope ([data-astryx-theme="stone"]) to ([data-astryx-theme]) {
     :scope {
-    --font-size-4xs: 0.375rem;
-    --font-size-3xs: 0.4375rem;
-    --font-size-2xs: 0.5625rem;
-    --font-size-xs: 0.6875rem;
-    --font-size-sm: 0.8125rem;
-    --font-size-base: 1rem;
-    --font-size-lg: 1.25rem;
-    --font-size-xl: 1.5rem;
-    --font-size-2xl: 1.8125rem;
-    --font-size-3xl: 2.25rem;
-    --font-size-4xl: 2.75rem;
-    --font-size-5xl: 3.3125rem;
+    --_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.5625rem * 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.6875rem * 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.8125rem * 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.25rem * 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.5rem * 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.8125rem * var(--_dynamic-type-title1, 1)), var(--_scaled-font-size-3xl));
+    --font-size-2xl: var(--_scaled-font-size-2xl);
+    --_scaled-font-size-3xl: min(calc(2.25rem * 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.75rem * var(--_dynamic-type-large-title, 1)), var(--_scaled-font-size-5xl));
+    --font-size-4xl: var(--_scaled-font-size-4xl);
+    --_scaled-font-size-5xl: calc(3.3125rem * 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.3793;

package/dist/theme.css.d.ts

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/stoneTheme.ts
  * Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
- * CLI: @astryxdesign/cli@0.7.11
- * Core: @astryxdesign/core@0.7.11
+ * CLI: @astryxdesign/cli@0.7.12
+ * Core: @astryxdesign/core@0.7.12
  */
 
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/theme-stone",
-  "version": "0.7.11",
+  "version": "0.7.12-canary.0840fcc",
   "displayName": "Stone Theme",
   "private": false,
   "description": "Warm stone and slate, earthy and understated, with just enough character to feel handcrafted.",
@@ -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/stone.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.11",
+    "@astryxdesign/core": "0.7.12-canary.0840fcc",
     "react": ">=19"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.7.11"
+    "@astryxdesign/cli": "0.7.12-canary.0840fcc"
   },
   "module": "./dist/source.mjs",
   "scripts": {
     "api:report": "node ../../../scripts/api-report/cli.mjs --package .",
-    "build": "node ../../../scripts/clean-dist.mjs && node ../../../scripts/generate-stone-palette-refs.mjs --check && astryx theme build src/stoneTheme.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-stone-palette-refs.mjs --check && astryx theme build src/stoneTheme.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/stoneTheme.ts

@@ -240,7 +240,7 @@ export const stoneTheme = defineTheme({
     '--color-tint-hover': [neutral.light[0], neutral.dark[100]],
 
     // Typography override
-    '--text-supporting-size': '12px',
+    '--text-supporting-size': '0.75rem', // 12px at the default root size
 
     // Categorical
     // Light mode pairs pastel stop 90 surfaces with stop 30 foregrounds.

package/theme.css.d.ts

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