@wordpress/theme 0.4.1-next.8fd3f8831.0 → 0.5.0

package/build-module/stylelint-plugins/no-unknown-ds-tokens.mjs

@@ -0,0 +1,68 @@
+// packages/theme/src/stylelint-plugins/no-unknown-ds-tokens.mjs
+import stylelint from "stylelint";
+import tokenList from "../prebuilt/js/design-tokens.mjs";
+var DS_TOKEN_PREFIX = "wpds-";
+function extractCSSVariables(value, prefix = "") {
+  const regex = /--[\w-]+/g;
+  const variables = /* @__PURE__ */ new Set();
+  let match;
+  while ((match = regex.exec(value)) !== null) {
+    const variableName = match[0];
+    if (variableName.startsWith(`--${prefix}`)) {
+      variables.add(variableName);
+    }
+  }
+  return variables;
+}
+var knownTokens = new Set(tokenList);
+var wpdsTokensRegex = new RegExp(`[^\\w]--${DS_TOKEN_PREFIX}`, "i");
+var {
+  createPlugin,
+  utils: { report, ruleMessages, validateOptions }
+} = stylelint;
+var ruleName = "plugin-wpds/no-unknown-ds-tokens";
+var messages = ruleMessages(ruleName, {
+  rejected: (tokenNames) => `The following CSS variables are not valid Design System tokens: ${tokenNames}`
+});
+var ruleFunction = (primary) => {
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName, {
+      actual: primary,
+      possible: [true]
+    });
+    if (!validOptions) {
+      return;
+    }
+    root.walkDecls((ruleNode) => {
+      const { value } = ruleNode;
+      if (wpdsTokensRegex.test(value)) {
+        const usedTokens = extractCSSVariables(
+          value,
+          DS_TOKEN_PREFIX
+        );
+        const unknownTokens = new Set(
+          [...usedTokens].filter(
+            (token) => !knownTokens.has(token)
+          )
+        );
+        if (unknownTokens.size > 0) {
+          report({
+            message: messages.rejected(
+              Array.from(unknownTokens).map((token) => `'${token}'`).join(", ")
+            ),
+            node: ruleNode,
+            result,
+            ruleName
+          });
+        }
+      }
+    });
+  };
+};
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+var no_unknown_ds_tokens_default = createPlugin(ruleName, ruleFunction);
+export {
+  no_unknown_ds_tokens_default as default
+};
+//# sourceMappingURL=no-unknown-ds-tokens.mjs.map

package/build-module/stylelint-plugins/no-unknown-ds-tokens.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/stylelint-plugins/no-unknown-ds-tokens.mjs"],
+  "sourcesContent": ["import stylelint from 'stylelint';\nimport tokenList from '../prebuilt/js/design-tokens.mjs';\n\nconst DS_TOKEN_PREFIX = 'wpds-';\n\n/**\n * Extracts all unique CSS custom properties (variables) from a given CSS value string,\n * including those in fallback positions, optionally filtering by a specific prefix.\n *\n * @param {string} value       - The CSS value string to search for variables.\n * @param {string} [prefix=''] - Optional prefix to filter variables (e.g., 'wpds-').\n * @return {Set<string>} A Set of unique matched CSS variable names (e.g., Set { '--wpds-token' }).\n *\n * @example\n * extractCSSVariables(\n *   'border: 1px solid var(--wpds-border-color, var(--wpds-border-fallback)); ' +\n *   'color: var(--wpds-color-fg, black); ' +\n *   'background: var(--unrelated-bg);',\n *   'wpds'\n * );\n * // \u2192 Set { '--wpds-border-color', '--wpds-border-fallback', '--wpds-color-fg' }\n */\nfunction extractCSSVariables( value, prefix = '' ) {\n\tconst regex = /--[\\w-]+/g;\n\t/** @type {Set<string>} */\n\tconst variables = new Set();\n\n\tlet match;\n\twhile ( ( match = regex.exec( value ) ) !== null ) {\n\t\tconst variableName = match[ 0 ];\n\t\tif ( variableName.startsWith( `--${ prefix }` ) ) {\n\t\t\tvariables.add( variableName );\n\t\t}\n\t}\n\n\treturn variables;\n}\n\nconst knownTokens = new Set( tokenList );\nconst wpdsTokensRegex = new RegExp( `[^\\\\w]--${ DS_TOKEN_PREFIX }`, 'i' );\n\nconst {\n\tcreatePlugin,\n\tutils: { report, ruleMessages, validateOptions },\n} = stylelint;\n\nconst ruleName = 'plugin-wpds/no-unknown-ds-tokens';\n\nconst messages = ruleMessages( ruleName, {\n\trejected: ( tokenNames ) =>\n\t\t`The following CSS variables are not valid Design System tokens: ${ tokenNames }`,\n} );\n\n/** @type {import('stylelint').Rule} */\nconst ruleFunction = ( primary ) => {\n\treturn ( root, result ) => {\n\t\tconst validOptions = validateOptions( result, ruleName, {\n\t\t\tactual: primary,\n\t\t\tpossible: [ true ],\n\t\t} );\n\n\t\tif ( ! validOptions ) {\n\t\t\treturn;\n\t\t}\n\n\t\troot.walkDecls( ( ruleNode ) => {\n\t\t\tconst { value } = ruleNode;\n\t\t\t// Early match for WPDS tokens to avoid unnecessary processing.\n\t\t\tif ( wpdsTokensRegex.test( value ) ) {\n\t\t\t\tconst usedTokens = extractCSSVariables(\n\t\t\t\t\tvalue,\n\t\t\t\t\tDS_TOKEN_PREFIX\n\t\t\t\t);\n\t\t\t\tconst unknownTokens = new Set(\n\t\t\t\t\t[ ...usedTokens ].filter(\n\t\t\t\t\t\t( token ) => ! knownTokens.has( token )\n\t\t\t\t\t)\n\t\t\t\t);\n\n\t\t\t\tif ( unknownTokens.size > 0 ) {\n\t\t\t\t\treport( {\n\t\t\t\t\t\tmessage: messages.rejected(\n\t\t\t\t\t\t\tArray.from( unknownTokens )\n\t\t\t\t\t\t\t\t.map( ( token ) => `'${ token }'` )\n\t\t\t\t\t\t\t\t.join( ', ' )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tnode: ruleNode,\n\t\t\t\t\t\tresult,\n\t\t\t\t\t\truleName,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t};\n};\n\nruleFunction.ruleName = ruleName;\nruleFunction.messages = messages;\n\n/** @type {import('stylelint').Plugin} */\nexport default createPlugin( ruleName, ruleFunction );\n"],
+  "mappings": ";AAAA,OAAO,eAAe;AACtB,OAAO,eAAe;AAEtB,IAAM,kBAAkB;AAmBxB,SAAS,oBAAqB,OAAO,SAAS,IAAK;AAClD,QAAM,QAAQ;AAEd,QAAM,YAAY,oBAAI,IAAI;AAE1B,MAAI;AACJ,UAAU,QAAQ,MAAM,KAAM,KAAM,OAAQ,MAAO;AAClD,UAAM,eAAe,MAAO,CAAE;AAC9B,QAAK,aAAa,WAAY,KAAM,MAAO,EAAG,GAAI;AACjD,gBAAU,IAAK,YAAa;AAAA,IAC7B;AAAA,EACD;AAEA,SAAO;AACR;AAEA,IAAM,cAAc,IAAI,IAAK,SAAU;AACvC,IAAM,kBAAkB,IAAI,OAAQ,WAAY,eAAgB,IAAI,GAAI;AAExE,IAAM;AAAA,EACL;AAAA,EACA,OAAO,EAAE,QAAQ,cAAc,gBAAgB;AAChD,IAAI;AAEJ,IAAM,WAAW;AAEjB,IAAM,WAAW,aAAc,UAAU;AAAA,EACxC,UAAU,CAAE,eACX,mEAAoE,UAAW;AACjF,CAAE;AAGF,IAAM,eAAe,CAAE,YAAa;AACnC,SAAO,CAAE,MAAM,WAAY;AAC1B,UAAM,eAAe,gBAAiB,QAAQ,UAAU;AAAA,MACvD,QAAQ;AAAA,MACR,UAAU,CAAE,IAAK;AAAA,IAClB,CAAE;AAEF,QAAK,CAAE,cAAe;AACrB;AAAA,IACD;AAEA,SAAK,UAAW,CAAE,aAAc;AAC/B,YAAM,EAAE,MAAM,IAAI;AAElB,UAAK,gBAAgB,KAAM,KAAM,GAAI;AACpC,cAAM,aAAa;AAAA,UAClB;AAAA,UACA;AAAA,QACD;AACA,cAAM,gBAAgB,IAAI;AAAA,UACzB,CAAE,GAAG,UAAW,EAAE;AAAA,YACjB,CAAE,UAAW,CAAE,YAAY,IAAK,KAAM;AAAA,UACvC;AAAA,QACD;AAEA,YAAK,cAAc,OAAO,GAAI;AAC7B,iBAAQ;AAAA,YACP,SAAS,SAAS;AAAA,cACjB,MAAM,KAAM,aAAc,EACxB,IAAK,CAAE,UAAW,IAAK,KAAM,GAAI,EACjC,KAAM,IAAK;AAAA,YACd;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA;AAAA,UACD,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH;AACD;AAEA,aAAa,WAAW;AACxB,aAAa,WAAW;AAGxB,IAAO,+BAAQ,aAAc,UAAU,YAAa;",
+  "names": []
+}

package/build-module/{theme-provider.js → theme-provider.mjs}

@@ -1,7 +1,7 @@
 // packages/theme/src/theme-provider.tsx
 import { useMemo, useId } from "@wordpress/element";
-import { ThemeContext } from "./context.js";
-import { useThemeProviderStyles } from "./use-theme-provider-styles.js";
+import { ThemeContext } from "./context.mjs";
+import { useThemeProviderStyles } from "./use-theme-provider-styles.mjs";
 
 // packages/theme/src/style.module.css
 var css = `.style-module__root__26kw6 {
@@ -69,4 +69,4 @@ var ThemeProvider = ({
 export {
   ThemeProvider
 };
-//# sourceMappingURL=theme-provider.js.map
+//# sourceMappingURL=theme-provider.mjs.map

package/build-module/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/{use-theme-provider-styles.js → use-theme-provider-styles.mjs}

@@ -1,22 +1,22 @@
 // packages/theme/src/use-theme-provider-styles.ts
 import {
-  parse,
+  clone,
+  set,
   to,
-  get,
-  serialize,
   sRGB,
   HSL
 } from "colorjs.io/fn";
 import memoize from "memize";
 import { useMemo, useContext } from "@wordpress/element";
-import "./color-ramps/lib/register-color-spaces.js";
-import { ThemeContext } from "./context.js";
-import colorTokens from "./prebuilt/ts/color-tokens.js";
+import "./color-ramps/lib/register-color-spaces.mjs";
+import { ThemeContext } from "./context.mjs";
+import colorTokens from "./prebuilt/ts/color-tokens.mjs";
 import {
   buildBgRamp,
   buildAccentRamp,
   DEFAULT_SEED_COLORS
-} from "./color-ramps/index.js";
+} from "./color-ramps/index.mjs";
+import { getColorString } from "./color-ramps/lib/color-utils.mjs";
 var getCachedBgRamp = memoize(buildBgRamp, { maxSize: 10 });
 var getCachedAccentRamp = memoize(buildAccentRamp, { maxSize: 10 });
 var legacyWpComponentsOverridesCSS = [
@@ -76,57 +76,32 @@ var legacyWpComponentsOverridesCSS = [
 ];
 function customRgbFormat(color) {
   const rgb = to(color, sRGB);
-  return [get(rgb, "srgb.r"), get(rgb, "srgb.g"), get(rgb, "srgb.b")].map((n) => Math.round(n * 255)).join(", ");
+  return rgb.coords.map((n) => Math.round((n ?? 0) * 255)).join(", ");
 }
 function legacyWpAdminThemeOverridesCSS(accent) {
-  const parsedAccent = to(parse(accent), HSL);
-  const coords = parsedAccent.coords;
-  const darker10 = to(
-    {
-      space: HSL,
-      coords: [
-        coords[0],
-        // h
-        coords[1],
-        // s
-        Math.max(0, Math.min(100, coords[2] - 5))
-        // l (reduced by 5%)
-      ]
-    },
-    sRGB
+  const parsedAccent = to(accent, HSL);
+  const parsedL = parsedAccent.coords[2] ?? 0;
+  const darker10 = set(
+    clone(parsedAccent),
+    [HSL, "l"],
+    Math.max(0, parsedL - 5)
+    // L reduced by 5%
   );
-  const darker20 = to(
-    {
-      space: HSL,
-      coords: [
-        coords[0],
-        // h
-        coords[1],
-        // s
-        Math.max(0, Math.min(100, coords[2] - 10))
-        // l (reduced by 10%)
-      ]
-    },
-    sRGB
+  const darker20 = set(
+    clone(parsedAccent),
+    [HSL, "l"],
+    Math.max(0, parsedL - 10)
+    // L reduced by 10%
   );
   return [
-    [
-      "--wp-admin-theme-color",
-      serialize(to(parsedAccent, sRGB), { format: "hex" })
-    ],
+    ["--wp-admin-theme-color", getColorString(parsedAccent)],
     ["--wp-admin-theme-color--rgb", customRgbFormat(parsedAccent)],
-    [
-      "--wp-admin-theme-color-darker-10",
-      serialize(darker10, { format: "hex" })
-    ],
+    ["--wp-admin-theme-color-darker-10", getColorString(darker10)],
     [
       "--wp-admin-theme-color-darker-10--rgb",
       customRgbFormat(darker10)
     ],
-    [
-      "--wp-admin-theme-color-darker-20",
-      serialize(darker20, { format: "hex" })
-    ],
+    ["--wp-admin-theme-color-darker-20", getColorString(darker20)],
     [
       "--wp-admin-theme-color-darker-20--rgb",
       customRgbFormat(darker20)
@@ -206,4 +181,4 @@ function useThemeProviderStyles({
 export {
   useThemeProviderStyles
 };
-//# sourceMappingURL=use-theme-provider-styles.js.map
+//# sourceMappingURL=use-theme-provider-styles.mjs.map

package/build-module/use-theme-provider-styles.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/use-theme-provider-styles.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\nimport {\n\tclone,\n\tset,\n\tto,\n\tsRGB,\n\tHSL,\n\ttype PlainColorObject,\n} from 'colorjs.io/fn';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport './color-ramps/lib/register-color-spaces';\nimport { ThemeContext } from './context';\nimport colorTokens from './prebuilt/ts/color-tokens';\nimport {\n\tbuildBgRamp,\n\tbuildAccentRamp,\n\tDEFAULT_SEED_COLORS,\n\ttype RampResult,\n} from './color-ramps';\nimport { getColorString } from './color-ramps/lib/color-utils';\nimport type { ThemeProviderProps } from './types';\n\ntype Entry = [ string, string ];\n\nconst getCachedBgRamp = memoize( buildBgRamp, { maxSize: 10 } );\nconst getCachedAccentRamp = memoize( buildAccentRamp, { maxSize: 10 } );\n\nconst legacyWpComponentsOverridesCSS: Entry[] = [\n\t[ '--wp-components-color-accent', 'var(--wp-admin-theme-color)' ],\n\t[\n\t\t'--wp-components-color-accent-darker-10',\n\t\t'var(--wp-admin-theme-color-darker-10)',\n\t],\n\t[\n\t\t'--wp-components-color-accent-darker-20',\n\t\t'var(--wp-admin-theme-color-darker-20)',\n\t],\n\t[\n\t\t'--wp-components-color-accent-inverted',\n\t\t'var(--wpds-color-fg-interactive-brand-strong)',\n\t],\n\t[\n\t\t'--wp-components-color-background',\n\t\t'var(--wpds-color-bg-surface-neutral-strong)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground',\n\t\t'var(--wpds-color-fg-content-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground-inverted',\n\t\t'var(--wpds-color-bg-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-100',\n\t\t'var(--wpds-color-bg-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-200',\n\t\t'var(--wpds-color-stroke-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-300',\n\t\t'var(--wpds-color-stroke-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-400',\n\t\t'var(--wpds-color-stroke-interactive-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-600',\n\t\t'var(--wpds-color-stroke-interactive-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-700',\n\t\t'var(--wpds-color-fg-content-neutral-weak)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-800',\n\t\t'var(--wpds-color-fg-content-neutral)',\n\t],\n];\n\nfunction customRgbFormat( color: PlainColorObject ): string {\n\tconst rgb = to( color, sRGB );\n\treturn rgb.coords\n\t\t.map( ( n ) => Math.round( ( n ?? 0 ) * 255 ) )\n\t\t.join( ', ' );\n}\n\nfunction legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {\n\tconst parsedAccent = to( accent, HSL );\n\tconst parsedL = parsedAccent.coords[ 2 ] ?? 0;\n\n\t// Create darker version of accent \u2014\n\tconst darker10 = set(\n\t\tclone( parsedAccent ),\n\t\t[ HSL, 'l' ],\n\t\tMath.max( 0, parsedL - 5 ) // L reduced by 5%\n\t);\n\tconst darker20 = set(\n\t\tclone( parsedAccent ),\n\t\t[ HSL, 'l' ],\n\t\tMath.max( 0, parsedL - 10 ) // L reduced by 10%\n\t);\n\n\treturn [\n\t\t[ '--wp-admin-theme-color', getColorString( parsedAccent ) ],\n\t\t[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],\n\t\t[ '--wp-admin-theme-color-darker-10', getColorString( darker10 ) ],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-10--rgb',\n\t\t\tcustomRgbFormat( darker10 ),\n\t\t],\n\t\t[ '--wp-admin-theme-color-darker-20', getColorString( darker20 ) ],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-20--rgb',\n\t\t\tcustomRgbFormat( darker20 ),\n\t\t],\n\t];\n}\n\nfunction colorTokensCSS(\n\tcomputedColorRamps: Map< string, RampResult >\n): Entry[] {\n\tconst entries: Entry[] = [];\n\n\tfor ( const [ rampName, { ramp } ] of computedColorRamps ) {\n\t\tfor ( const [ tokenName, tokenValue ] of Object.entries( ramp ) ) {\n\t\t\tconst key = `${ rampName }-${ tokenName }`;\n\t\t\tconst aliasedBy = colorTokens[ key ] ?? [];\n\t\t\tfor ( const aliasedId of aliasedBy ) {\n\t\t\t\tentries.push( [ `--wpds-color-${ aliasedId }`, tokenValue ] );\n\t\t\t}\n\t\t}\n\t}\n\n\treturn entries;\n}\n\nfunction generateStyles( {\n\tprimary,\n\tcomputedColorRamps,\n}: {\n\tprimary: string;\n\tcomputedColorRamps: Map< string, RampResult >;\n} ): CSSProperties {\n\treturn Object.fromEntries(\n\t\t[\n\t\t\t// Semantic color tokens\n\t\t\tcolorTokensCSS( computedColorRamps ),\n\t\t\t// Legacy overrides\n\t\t\tlegacyWpAdminThemeOverridesCSS( primary ),\n\t\t\tlegacyWpComponentsOverridesCSS,\n\t\t].flat()\n\t);\n}\n\nexport function useThemeProviderStyles( {\n\tcolor = {},\n}: {\n\tcolor?: ThemeProviderProps[ 'color' ];\n} = {} ) {\n\tconst { resolvedSettings: inheritedSettings } = useContext( ThemeContext );\n\n\t// Compute settings:\n\t// - used provided prop value;\n\t// - otherwise, use inherited value from parent instance;\n\t// - otherwise, use fallback value (where applicable).\n\tconst primary =\n\t\tcolor.primary ??\n\t\tinheritedSettings.color?.primary ??\n\t\tDEFAULT_SEED_COLORS.primary;\n\tconst bg =\n\t\tcolor.bg ?? inheritedSettings.color?.bg ?? DEFAULT_SEED_COLORS.bg;\n\n\tconst resolvedSettings = useMemo(\n\t\t() => ( {\n\t\t\tcolor: {\n\t\t\t\tprimary,\n\t\t\t\tbg,\n\t\t\t},\n\t\t} ),\n\t\t[ primary, bg ]\n\t);\n\n\tconst themeProviderStyles = useMemo( () => {\n\t\t// Determine which seeds are needed for generating ramps.\n\t\tconst seeds = {\n\t\t\t...DEFAULT_SEED_COLORS,\n\t\t\tbg,\n\t\t\tprimary,\n\t\t};\n\n\t\t// Generate ramps.\n\t\tconst computedColorRamps = new Map< string, RampResult >();\n\t\tconst bgRamp = getCachedBgRamp( seeds.bg );\n\t\tObject.entries( seeds ).forEach( ( [ rampName, seed ] ) => {\n\t\t\tif ( rampName === 'bg' ) {\n\t\t\t\tcomputedColorRamps.set( rampName, bgRamp );\n\t\t\t} else {\n\t\t\t\tcomputedColorRamps.set(\n\t\t\t\t\trampName,\n\t\t\t\t\tgetCachedAccentRamp( seed, bgRamp )\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\treturn generateStyles( {\n\t\t\tprimary: seeds.primary,\n\t\t\tcomputedColorRamps,\n\t\t} );\n\t}, [ primary, bg ] );\n\n\treturn {\n\t\tresolvedSettings,\n\t\tthemeProviderStyles,\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-types/color-ramps/lib/color-utils.d.ts

@@ -23,5 +23,5 @@ export declare function getContrast(colorA: ColorTypes, colorB: ColorTypes): num
  * Make sure that a color is valid in the sRGB gamut and convert it to OKLCH.
  * @param c
  */
-export declare function clampToGamut(c: ColorTypes): import("colorjs.io/fn").PlainColorObject;
+export declare function clampToGamut(c: ColorTypes): import("colorjs.io/src/color.js").PlainColorObject;
 //# sourceMappingURL=color-utils.d.ts.map

package/build-types/color-ramps/lib/color-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/color-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAON,KAAK,UAAU,EACf,MAAM,eAAe,CAAC;AAEvB;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAEjC;;;;GAIG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,UAAU,GAAI,MAAM,CAE1D;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,GAAI,MAAM,CAE5E;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAE,CAAC,EAAE,UAAU,4CAG1C"}
+{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/color-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAON,KAAK,UAAU,EACf,MAAM,eAAe,CAAC;AAEvB;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAEjC;;;;GAIG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,UAAU,GAAI,MAAM,CAG1D;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,GAAI,MAAM,CAE5E;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAE,CAAC,EAAE,UAAU,sDAG1C"}

package/build-types/color-ramps/lib/constants.d.ts

@@ -3,8 +3,8 @@
  */
 import './register-color-spaces';
 import type { Ramp } from './types';
-export declare const WHITE: import("colorjs.io/fn").PlainColorObject;
-export declare const BLACK: import("colorjs.io/fn").PlainColorObject;
+export declare const WHITE: import("colorjs.io/src/color.js").PlainColorObject;
+export declare const BLACK: import("colorjs.io/src/color.js").PlainColorObject;
 export declare const UNIVERSAL_CONTRAST_TOPUP = 0.02;
 export declare const WHITE_TEXT_CONTRAST_MARGIN = 3.1;
 export declare const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS: {

package/build-types/color-ramps/lib/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/constants.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,KAAK,0CAAuB,CAAC;AAC1C,eAAO,MAAM,KAAK,0CAAuB,CAAC;AAM1C,eAAO,MAAM,wBAAwB,OAAO,CAAC;AAO7C,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAO9C,eAAO,MAAM,sCAAsC;;;;;;;;;CAGzC,CAAC;AAGX,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,eAAO,MAAM,qBAAqB,EAAE;IACnC,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf,EA+BA,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;;;;;;CAQ/B,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/constants.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,KAAK,oDAAuB,CAAC;AAC1C,eAAO,MAAM,KAAK,oDAAuB,CAAC;AAM1C,eAAO,MAAM,wBAAwB,OAAO,CAAC;AAO7C,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAO9C,eAAO,MAAM,sCAAsC;;;;;;;;;CAGzC,CAAC;AAGX,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,eAAO,MAAM,qBAAqB,EAAE;IACnC,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf,EA+BA,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;;;;;;CAQ/B,CAAC"}

package/build-types/color-ramps/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/index.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAWjC,OAAO,KAAK,EAEX,IAAI,EACJ,aAAa,EACb,UAAU,EACV,UAAU,EACV,MAAM,SAAS,CAAC;AA6KjB,wBAAgB,SAAS,CACxB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,UAAU,EAClB,EACC,aAAa,EACb,YAAY,EACZ,2BAAkC,GAClC,GAAE;IACF,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE;QACd,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC;IACF,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACjC,GACJ,UAAU,CAgHZ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/index.ts"],"names":[],"mappings":"AAYA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAWjC,OAAO,KAAK,EAEX,IAAI,EACJ,aAAa,EACb,UAAU,EACV,UAAU,EACV,MAAM,SAAS,CAAC;AA6KjB,wBAAgB,SAAS,CACxB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,UAAU,EAClB,EACC,aAAa,EACb,YAAY,EACZ,2BAAkC,GAClC,GAAE;IACF,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE;QACd,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC;IACF,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACjC,GACJ,UAAU,CAgHZ"}

package/build-types/color-ramps/stories/index.story.d.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 declare const ColorGen: (props: {
     background: string;
     primary: string;

package/build-types/color-ramps/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,QAAA,MAAM,QAAQ,GAAK,OAAO;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,gCAEA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAmBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA+H9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4FzD,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAS5D,QAAA,MAAM,QAAQ,GAAK,OAAO;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,gCAEA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAmBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA+H9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4FzD,CAAC"}

package/build-types/prebuilt/js/{design-tokens.d.ts → design-tokens.d.mts}

@@ -1,3 +1,3 @@
 declare const _default: string[];
 export default _default;
-//# sourceMappingURL=design-tokens.d.ts.map
+//# sourceMappingURL=design-tokens.d.mts.map

package/build-types/prebuilt/js/design-tokens.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-tokens.d.mts","sourceRoot":"","sources":["../../../src/prebuilt/js/design-tokens.mjs"],"names":[],"mappings":""}

package/build-types/prebuilt/ts/color-tokens.d.ts

@@ -1,7 +1,3 @@
-/**
- * This file is generated by the @wordpress/terrazzo-plugin-inline-alias-values plugin.
- * Do not edit this file directly.
- */
 declare const _default: Record<string, string[]>;
 export default _default;
 //# sourceMappingURL=color-tokens.d.ts.map

package/build-types/prebuilt/ts/color-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-tokens.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/color-tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;wBAuIE,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,CAAE;AArI/B,wBAqIgC"}
+{"version":3,"file":"color-tokens.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/color-tokens.ts"],"names":[],"mappings":"wBAsHK,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,CAAE;AAjH/B,wBAiHgC"}

package/build-types/prebuilt/ts/token-types.d.ts

@@ -1,7 +1,3 @@
-/**
- * This file is generated by the @wordpress/terrazzo-plugin-typescript-types plugin.
- * Do not edit this file directly.
- */
 /**
  * Size scale for padding tokens.
  */
@@ -29,7 +25,7 @@ export type SurfaceBackgroundColor = 'neutral' | 'neutral-strong' | 'neutral-wea
 /**
  * Background color variants for interactive elements.
  */
-export type InteractiveBackgroundColor = 'neutral' | 'neutral-strong' | 'neutral-weak' | 'brand' | 'brand-strong' | 'brand-weak' | 'error' | 'error-strong' | 'error-weak';
+export type InteractiveBackgroundColor = 'neutral-strong' | 'neutral-weak' | 'brand-strong' | 'brand-weak' | 'error' | 'error-strong' | 'error-weak';
 /**
  * Foreground color variants for content text and icons.
  */
@@ -46,4 +42,24 @@ export type SurfaceStrokeColor = 'neutral' | 'neutral-weak' | 'neutral-strong' |
  * Stroke color variants for interactive element borders.
  */
 export type InteractiveStrokeColor = 'neutral' | 'neutral-strong' | 'brand' | 'error' | 'error-strong';
+/**
+ * Foreground color variants for text elements.
+ */
+export type ForegroundColor = 'neutral' | 'neutral-weak' | 'success' | 'success-weak' | 'info' | 'info-weak' | 'warning' | 'warning-weak' | 'caution' | 'caution-weak' | 'error' | 'error-weak' | 'neutral-active' | 'neutral-disabled' | 'neutral-strong' | 'neutral-strong-active' | 'neutral-strong-disabled' | 'neutral-weak-disabled' | 'brand' | 'brand-active' | 'brand-strong' | 'brand-strong-active' | 'error-active' | 'error-strong' | 'error-strong-active';
+/**
+ * Font family variants.
+ */
+export type FontFamily = 'heading' | 'body' | 'mono';
+/**
+ * Font size scale.
+ */
+export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Font weight variants.
+ */
+export type FontWeight = 'regular' | 'medium';
+/**
+ * Line height scale.
+ */
+export type LineHeight = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 //# sourceMappingURL=token-types.d.ts.map

package/build-types/prebuilt/ts/token-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-types.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/token-types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,MAAM,GACf,SAAS,GACT,aAAa,GACb,OAAO,GACP,OAAO,GACP,SAAS,GACT,OAAO,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,0BAA0B,GACnC,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,cAAc,GACd,YAAY,GACZ,OAAO,GACP,cAAc,GACd,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,0BAA0B,GACnC,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,cAAc,GACd,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAC3B,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,OAAO,GACP,cAAc,GACd,SAAS,GACT,gBAAgB,GAChB,MAAM,GACN,aAAa,GACb,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,cAAc,CAAC"}
+{"version":3,"file":"token-types.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/token-types.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,MAAM,GACf,SAAS,GACT,aAAa,GACb,OAAO,GACP,OAAO,GACP,SAAS,GACT,OAAO,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,0BAA0B,GACnC,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,YAAY,GACZ,OAAO,GACP,cAAc,GACd,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,0BAA0B,GACnC,SAAS,GACT,gBAAgB,GAChB,cAAc,GACd,OAAO,GACP,cAAc,GACd,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAC3B,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,OAAO,GACP,cAAc,GACd,SAAS,GACT,gBAAgB,GAChB,MAAM,GACN,aAAa,GACb,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC/B,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,cAAc,CAAC;AAElB;;GAEG;AACH,MAAM,MAAM,eAAe,GACxB,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,MAAM,GACN,WAAW,GACX,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,OAAO,GACP,YAAY,GACZ,gBAAgB,GAChB,kBAAkB,GAClB,gBAAgB,GAChB,uBAAuB,GACvB,yBAAyB,GACzB,uBAAuB,GACvB,OAAO,GACP,cAAc,GACd,cAAc,GACd,qBAAqB,GACrB,cAAc,GACd,cAAc,GACd,qBAAqB,CAAC;AAEzB;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC"}

package/build-types/stories/index.story.d.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 /**
  * Internal dependencies
  */

package/build-types/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAavD;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,mCAAmC,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,aAAa,CAgBrC,CAAC;AACF,eAAe,IAAI,CAAC;AA2GpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,aAAa,CAInD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAE,OAAO,aAAa,CA+CtD,CAAC;AA6CF,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAE,OAAO,aAAa,CA8DhE,CAAC;AA0EF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,aAAa,CA6CzD,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,mCAAmC,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,aAAa,CAgBrC,CAAC;AACF,eAAe,IAAI,CAAC;AA2GpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,aAAa,CAInD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAE,OAAO,aAAa,CA+CtD,CAAC;AA6CF,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAE,OAAO,aAAa,CA8DhE,CAAC;AA0EF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,aAAa,CA6CzD,CAAC"}

package/build-types/stylelint-plugins/no-setting-wpds-custom-properties.d.mts

@@ -0,0 +1,4 @@
+declare const _default: stylelint.Plugin;
+export default _default;
+import stylelint from 'stylelint';
+//# sourceMappingURL=no-setting-wpds-custom-properties.d.mts.map

package/build-types/stylelint-plugins/no-setting-wpds-custom-properties.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-setting-wpds-custom-properties.d.mts","sourceRoot":"","sources":["../../src/stylelint-plugins/no-setting-wpds-custom-properties.mjs"],"names":[],"mappings":";;sBAAsB,WAAW"}

package/build-types/stylelint-plugins/no-unknown-ds-tokens.d.mts

@@ -0,0 +1,4 @@
+declare const _default: stylelint.Plugin;
+export default _default;
+import stylelint from 'stylelint';
+//# sourceMappingURL=no-unknown-ds-tokens.d.mts.map

package/build-types/stylelint-plugins/no-unknown-ds-tokens.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-unknown-ds-tokens.d.mts","sourceRoot":"","sources":["../../src/stylelint-plugins/no-unknown-ds-tokens.mjs"],"names":[],"mappings":";;sBAAsB,WAAW"}

package/build-types/use-theme-provider-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-provider-styles.d.ts","sourceRoot":"","sources":["../src/use-theme-provider-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAiB3C;;GAEG;AACH,OAAO,yCAAyC,CAAC;AASjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA8JlD,wBAAgB,sBAAsB,CAAE,EACvC,KAAU,GACV,GAAE;IACF,KAAK,CAAC,EAAE,kBAAkB,CAAE,OAAO,CAAE,CAAC;CACjC;;;;;;;;EAwDL"}
+{"version":3,"file":"use-theme-provider-styles.d.ts","sourceRoot":"","sources":["../src/use-theme-provider-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAgB3C;;GAEG;AACH,OAAO,yCAAyC,CAAC;AAUjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA0IlD,wBAAgB,sBAAsB,CAAE,EACvC,KAAU,GACV,GAAE;IACF,KAAK,CAAC,EAAE,kBAAkB,CAAE,OAAO,CAAE,CAAC;CACjC;;;;;;;;EAwDL"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/theme",
-	"version": "0.4.1-next.8fd3f8831.0",
+	"version": "0.5.0",
 	"description": "Theme and context provider for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,17 +29,30 @@
 		"build-types",
 		"*.md"
 	],
-	"type": "module",
 	"main": "build/index.cjs",
-	"module": "build-module/index.js",
+	"module": "build-module/index.mjs",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
-			"import": "./build-module/index.js",
+			"import": "./build-module/index.mjs",
 			"default": "./build/index.cjs"
 		},
 		"./design-tokens.css": "./src/prebuilt/css/design-tokens.css",
-		"./design-tokens.js": "./src/prebuilt/js/design-tokens.js",
+		"./design-tokens.js": {
+			"types": "./build-types/prebuilt/js/design-tokens.d.ts",
+			"import": "./build-module/prebuilt/js/design-tokens.mjs",
+			"default": "./build/prebuilt/js/design-tokens.cjs"
+		},
+		"./stylelint-plugins/no-unknown-ds-tokens": {
+			"types": "./build-types/stylelint-plugins/no-unknown-ds-tokens.d.ts",
+			"import": "./src/stylelint-plugins/no-unknown-ds-tokens.mjs",
+			"default": "./build/stylelint-plugins/no-unknown-ds-tokens.cjs"
+		},
+		"./stylelint-plugins/no-setting-wpds-custom-properties": {
+			"types": "./build-types/stylelint-plugins/no-setting-wpds-custom-properties.d.ts",
+			"import": "./src/stylelint-plugins/no-setting-wpds-custom-properties.mjs",
+			"default": "./build/stylelint-plugins/no-setting-wpds-custom-properties.cjs"
+		},
 		"./package.json": "./package.json"
 	},
 	"react-native": "src/index",
@@ -48,29 +61,45 @@
 	"sideEffects": [
 		"src/color-ramps/lib/register-color-spaces.ts",
 		"build/color-ramps/lib/register-color-spaces.js",
-		"build-module/color-ramps/lib/register-color-spaces.js"
+		"build-module/color-ramps/lib/register-color-spaces.mjs"
 	],
 	"dependencies": {
-		"@wordpress/element": "^6.36.1-next.8fd3f8831.0",
-		"@wordpress/private-apis": "^1.36.1-next.8fd3f8831.0",
-		"colorjs.io": "^0.5.2",
+		"@wordpress/element": "^6.38.0",
+		"@wordpress/private-apis": "^1.38.0",
+		"colorjs.io": "^0.6.0",
 		"memize": "^2.1.0"
 	},
 	"devDependencies": {
-		"esbuild-esm-loader": "0.3.3"
+		"@storybook/react-vite": "^10.1.11",
+		"@terrazzo/cli": "^0.10.2",
+		"@terrazzo/plugin-css": "^0.10.2",
+		"@terrazzo/token-tools": "^0.10.2",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@types/jest": "^29.5.14",
+		"@types/node": "^20.17.10",
+		"esbuild": "^0.27.2",
+		"esbuild-esm-loader": "^0.3.3",
+		"storybook": "^10.1.11"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"react-dom": "^18.0.0",
+		"stylelint": "^16.8.2"
+	},
+	"peerDependenciesMeta": {
+		"stylelint": {
+			"optional": true
+		}
 	},
 	"publishConfig": {
 		"access": "public"
 	},
 	"scripts": {
+		"prelint:js": "npx esbuild src/prebuilt/js/design-tokens.mjs --format=cjs --outfile=build/prebuilt/js/design-tokens.cjs && node -e \"\"",
 		"build:default-ramps": "node --import=esbuild-esm-loader/register bin/generate-default-ramps/index.ts",
 		"build:tokens": "node --import=esbuild-esm-loader/register bin/generate-primitive-tokens/index.ts && cross-env NODE_OPTIONS=--import=esbuild-esm-loader/register tz build --config terrazzo.config.ts",
-		"build": "npm run build:tokens && npm run build:default-ramps",
+		"build": "npm run build:tokens && npm run build:default-ramps && npm run prelint:js",
 		"postbuild": "prettier --write tokens/color.json tokens/modes src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
 	},
-	"gitHead": "e582b351bc4c4b8734bb087f63a3beec9875c3c7"
+	"gitHead": "50c4c0f51e4797c217946ce42adfaa5eb026f33f"
 }

package/src/color-ramps/index.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, OKLCH, parse } from 'colorjs.io/fn';
+import { get, OKLCH } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
@@ -44,7 +44,7 @@ function getBgRampInfo( ramp: InternalRampResult ): {
 		pinLightness: {
 			stepName: STEP_TO_PIN,
 			value: clampAccentScaleReferenceLightness(
-				get( parse( ramp.ramp[ STEP_TO_PIN ] ), [ OKLCH, 'l' ] ),
+				get( ramp.ramp[ STEP_TO_PIN ], [ OKLCH, 'l' ] ),
 				ramp.direction
 			),
 		},

package/src/color-ramps/lib/color-utils.ts

@@ -22,7 +22,8 @@ import './register-color-spaces';
  * @return String representation
  */
 export function getColorString( color: ColorTypes ): string {
-	return serialize( to( color, sRGB ), { format: 'hex', inGamut: true } );
+	const rgbRounded = serialize( to( color, sRGB ) );
+	return serialize( rgbRounded, { format: 'hex' } );
 }
 
 /**

package/src/color-ramps/lib/default-ramps.ts

@@ -67,8 +67,8 @@ export const DEFAULT_RAMPS: Record<
 			bgFill1: '#0090ff',
 			fgFill: '#1a1f24',
 			bgFill2: '#007fed',
-			surface2: '#f3f9ff',
-			surface6: '#bcd5f1',
+			surface2: '#f2f9ff',
+			surface6: '#bcd5f2',
 			surface5: '#d3e4f7',
 			surface4: '#deebfa',
 			surface3: '#fff',

package/src/color-ramps/lib/index.ts

@@ -5,7 +5,6 @@ import {
 	clone,
 	get,
 	OKLCH,
-	parse,
 	set,
 	type ColorTypes,
 	type PlainColorObject,
@@ -222,7 +221,7 @@ export function buildRamp(
 ): RampResult {
 	let seed: PlainColorObject;
 	try {
-		seed = clampToGamut( parse( seedArg ) );
+		seed = clampToGamut( seedArg );
 	} catch ( error ) {
 		throw new Error(
 			`Invalid seed color "${ seedArg }": ${

package/src/color-ramps/lib/taper-chroma.ts

@@ -55,10 +55,10 @@ export function taperChroma(
 	const achromaEpsilon = options.achromaEpsilon ?? 0.005;
 
 	const cSeed = Math.max( 0, get( seed, [ OKLCH, 'c' ] ) );
-	let hSeed = Number( get( seed, [ OKLCH, 'h' ] ) );
+	let hSeed = get( seed, [ OKLCH, 'h' ] );
 
 	const chromaIsTiny = cSeed < achromaEpsilon;
-	const hueIsInvalid = ! Number.isFinite( hSeed );
+	const hueIsInvalid = hSeed === null || ! Number.isFinite( hSeed );
 
 	if ( chromaIsTiny || hueIsInvalid ) {
 		if ( typeof options.hueFallback === 'number' ) {

package/src/color-ramps/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 /**
  * Internal dependencies
@@ -19,7 +19,7 @@ const ColorGen = ( props: {
 };
 
 const meta: Meta< typeof ColorGen > = {
-	title: 'Design System/Theme Provider/Color Scales',
+	title: 'Design System/Theme/Theme Provider/Color Scales',
 	component: ColorGen,
 	argTypes: {
 		background: {