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

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 0.4.0-next.0 (2025-12-24)
+
+### New Features
+
+-   Expose `ThemeProvider` TypeScript type from package. While the component is still experimental, this makes it easier to use TypeScript typings in your code, which would otherwise be inaccessible. ([#74011](https://github.com/WordPress/gutenberg/pull/74011))

package/README.md

@@ -6,8 +6,8 @@ This package is still experimental. “Experimental” means this is an early im
 
 A theming package that's part of the WordPress Design System. It has two parts:
 
--   **Design Tokens**: A comprehensive system of design tokens for colors, spacing, typography, and more
--   **Theme System**: A flexible theming provider for consistent theming across applications
+-   **Design Tokens**: A comprehensive system of design tokens for colors, spacing, typography, and more.
+-   **Theme System**: A flexible theming provider for consistent theming across applications.
 
 ## Design Tokens
 
@@ -76,14 +76,14 @@ Semantic tokens follow a consistent naming pattern:
 
 **Target** is the component or element type the token applies to.
 
-| Value         | Description                                                  |
-| ------------- | ------------------------------------------------------------ |
-| `surface`     | Container or layout backgrounds and borders                  |
-| `interactive` | Interactive elements like buttons, inputs, and controls      |
-| `content`     | Static content like text and icons                           |
-| `track`       | Track components like scrollbars and slider tracks           |
-| `thumb`       | Thumb components like scrollbar thumbs and slider handles    |
-| `focus`       | Focus indicators and rings                                   |
+| Value         | Description                                               |
+| ------------- | --------------------------------------------------------- |
+| `surface`     | Container or layout backgrounds and borders               |
+| `interactive` | Interactive elements like buttons, inputs, and controls   |
+| `content`     | Static content like text and icons                        |
+| `track`       | Track components like scrollbars and slider tracks        |
+| `thumb`       | Thumb components like scrollbar thumbs and slider handles |
+| `focus`       | Focus indicators and rings                                |
 
 **Modifier** is an optional size or intensity modifier.
 
@@ -101,15 +101,15 @@ Color tokens extend the base pattern with additional modifiers for tone, emphasi
 
 **Tone** defines the semantic intent of the color.
 
-| Value     | Description                                                                              |
-| --------- | ---------------------------------------------------------------------------------------- |
-| `neutral` | Neutrally toned UI elements.                                                             |
-| `brand`   | Brand-accented or primary action colors.                                                 |
-| `success` | Positive or completed states.                                                            |
-| `info`    | Informational or system-generated context.                                               |
-| `caution` | Heads-up or low-severity issues; “proceed carefully.”                                    |
-| `warning` | Higher-severity or time-sensitive issues that require user attention but are not errors. |
-| `error`   | Blocking issues, validation failures, or destructive actions.                            |
+| Value     | Description                                                                             |
+| --------- | --------------------------------------------------------------------------------------- |
+| `neutral` | Neutrally toned UI elements                                                             |
+| `brand`   | Brand-accented or primary action colors                                                 |
+| `success` | Positive or completed states                                                            |
+| `info`    | Informational or system-generated context                                               |
+| `caution` | Heads-up or low-severity issues; “proceed carefully”                                    |
+| `warning` | Higher-severity or time-sensitive issues that require user attention but are not errors |
+| `error`   | Blocking issues, validation failures, or destructive actions                            |
 
 > [!NOTE]
 > `caution` and `warning` represent two escalation levels of non-error severity.
@@ -117,17 +117,17 @@ Color tokens extend the base pattern with additional modifiers for tone, emphasi
 
 **Emphasis** adjusts color strength relative to the base tone, if specified. The default is a normal emphasis.
 
-| Value                | Description                                     |
-| -------------------- | ----------------------------------------------- |
-| `strong`             | Higher contrast and/or elevated emphasis.       |
-| `weak`               | Subtle variant for secondary or muted elements. |
+| Value                | Description                                    |
+| -------------------- | ---------------------------------------------- |
+| `strong`             | Higher contrast and/or elevated emphasis       |
+| `weak`               | Subtle variant for secondary or muted elements |
 
 **State** represents the interactive state of the element, if specified. The default is an idle state.
 
-| Value      | Description                              |
-| ---------- | ---------------------------------------- |
-| `active`   | Hovered, pressed, or selected state.     |
-| `disabled` | Unavailable or inoperable state.         |
+| Value      | Description                         |
+| ---------- | ----------------------------------- |
+| `active`   | Hovered, pressed, or selected state |
+| `disabled` | Unavailable or inoperable state     |
 
 ## Theme Provider
 
@@ -138,7 +138,7 @@ import { ThemeProvider } from '@wordpress/theme';
 
 function App() {
 	return (
-		<ThemeProvider color={ { primary: 'blue' } }>
+		<ThemeProvider color={ { primary: 'blue' } } density="compact">
 			{ /* Your app content */ }
 		</ThemeProvider>
 	);
@@ -147,11 +147,21 @@ function App() {
 
 The `color` prop accepts an object with the following optional properties:
 
--   `primary`: The primary/accent seed color (default: `'#3858e9'`)
--   `bg`: The background seed color (default: `'#f8f8f8'`)
+-   `primary`: The primary/accent seed color (default: `'#3858e9'`).
+-   `bg`: The background seed color (default: `'#f8f8f8'`).
 
 Both properties accept any valid CSS color value. The theme system automatically generates appropriate color ramps and determines light/dark mode based on these seed colors.
 
+The `density` prop controls the spacing scale throughout the UI:
+
+-   `'default'`: Standard spacing for general use.
+-   `'compact'`: Reduced spacing for information-dense interfaces like data tables or dashboards.
+-   `'comfortable'`: Increased spacing for focused experiences like modals, dialogs, or full-screen settings panels.
+
+The density setting adjusts dimension tokens like gaps and paddings to maintain consistent spacing throughout the UI. Changing the density automatically updates spacing of all components that use these tokens.
+
+When the `color` or `density` prop is omitted, the theme inherits the value from the closest parent `ThemeProvider`, or uses the default value if none is inherited.
+
 ### Nesting Providers
 
 The provider can be used recursively to override or modify the theme for a specific subtree.
@@ -159,10 +169,10 @@ The provider can be used recursively to override or modify the theme for a speci
 ```tsx
 <ThemeProvider color={ { bg: 'white' } }>
 	{ /* light-themed UI components */ }
-	<ThemeProvider color={ { bg: '#1e1e1e' } }>
-		{ /* dark-themed UI components */ }
+	<ThemeProvider color={ { bg: '#1e1e1e' } } density="compact">
+		{ /* dark-themed UI components with compact spacing */ }
 		<ThemeProvider color={ { primary: 'red' } }>
-			{ /* dark-themed with red accent */ }
+			{ /* dark-themed with red accent, inheriting compact density */ }
 		</ThemeProvider>
 	</ThemeProvider>
 	{ /* light-themed UI components */ }

package/build/color-ramps/{index.js → index.cjs}

@@ -26,13 +26,13 @@ __export(color_ramps_exports, {
 });
 module.exports = __toCommonJS(color_ramps_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./lib/register-color-spaces");
-var import_lib = require("./lib/index");
-var import_utils = require("./lib/utils");
-var import_ramp_configs = require("./lib/ramp-configs");
-var import_color_utils = require("./lib/color-utils");
-var import_constants = require("./lib/constants");
-var import_constants2 = require("./lib/constants");
+var import_register_color_spaces = require("./lib/register-color-spaces.cjs");
+var import_lib = require("./lib/index.cjs");
+var import_utils = require("./lib/utils.cjs");
+var import_ramp_configs = require("./lib/ramp-configs.cjs");
+var import_color_utils = require("./lib/color-utils.cjs");
+var import_constants = require("./lib/constants.cjs");
+var import_constants2 = require("./lib/constants.cjs");
 function buildBgRamp(seed) {
   if (typeof seed !== "string" || seed.trim() === "") {
     throw new Error("Seed color must be a non-empty string");
@@ -115,4 +115,4 @@ function checkAccessibleCombinations({
   buildBgRamp,
   checkAccessibleCombinations
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/color-ramps/lib/{color-utils.js → color-utils.cjs}

@@ -25,7 +25,7 @@ __export(color_utils_exports, {
 });
 module.exports = __toCommonJS(color_utils_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./register-color-spaces");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
 function getColorString(color) {
   return (0, import_fn.serialize)((0, import_fn.to)(color, import_fn.sRGB), { format: "hex", inGamut: true });
 }
@@ -41,4 +41,4 @@ function clampToGamut(c) {
   getColorString,
   getContrast
 });
-//# sourceMappingURL=color-utils.js.map
+//# sourceMappingURL=color-utils.cjs.map

package/build/color-ramps/lib/{constants.js → constants.cjs}

@@ -31,7 +31,7 @@ __export(constants_exports, {
 });
 module.exports = __toCommonJS(constants_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./register-color-spaces");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
 var WHITE = (0, import_fn.to)("white", import_fn.OKLCH);
 var BLACK = (0, import_fn.to)("black", import_fn.OKLCH);
 var UNIVERSAL_CONTRAST_TOPUP = 0.02;
@@ -95,4 +95,4 @@ var DEFAULT_SEED_COLORS = {
   WHITE,
   WHITE_TEXT_CONTRAST_MARGIN
 });
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=constants.cjs.map

package/build/color-ramps/lib/{default-ramps.js → default-ramps.cjs}

@@ -217,4 +217,4 @@ var DEFAULT_RAMPS = {
 0 && (module.exports = {
   DEFAULT_RAMPS
 });
-//# sourceMappingURL=default-ramps.js.map
+//# sourceMappingURL=default-ramps.cjs.map

package/build/color-ramps/lib/{find-color-with-constraints.js → find-color-with-constraints.cjs}

@@ -23,11 +23,11 @@ __export(find_color_with_constraints_exports, {
 });
 module.exports = __toCommonJS(find_color_with_constraints_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./register-color-spaces");
-var import_utils = require("./utils");
-var import_constants = require("./constants");
-var import_color_utils = require("./color-utils");
-var import_taper_chroma = require("./taper-chroma");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
+var import_utils = require("./utils.cjs");
+var import_constants = require("./constants.cjs");
+var import_color_utils = require("./color-utils.cjs");
+var import_taper_chroma = require("./taper-chroma.cjs");
 function cdiff(c1, c2) {
   return Math.log(c1 / c2);
 }
@@ -107,4 +107,4 @@ function findColorMeetingRequirements(reference, seed, target, direction, {
 0 && (module.exports = {
   findColorMeetingRequirements
 });
-//# sourceMappingURL=find-color-with-constraints.js.map
+//# sourceMappingURL=find-color-with-constraints.cjs.map

package/build/color-ramps/lib/{index.js → index.cjs}

@@ -23,11 +23,11 @@ __export(lib_exports, {
 });
 module.exports = __toCommonJS(lib_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./register-color-spaces");
-var import_color_utils = require("./color-utils");
-var import_find_color_with_constraints = require("./find-color-with-constraints");
-var import_utils = require("./utils");
-var import_constants = require("./constants");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
+var import_color_utils = require("./color-utils.cjs");
+var import_find_color_with_constraints = require("./find-color-with-constraints.cjs");
+var import_utils = require("./utils.cjs");
+var import_constants = require("./constants.cjs");
 function calculateRamp({
   seed,
   sortedSteps,
@@ -226,4 +226,4 @@ function buildRamp(seedArg, config, {
 0 && (module.exports = {
   buildRamp
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/color-ramps/lib/{ramp-configs.js → ramp-configs.cjs}

@@ -313,4 +313,4 @@ var ACCENT_RAMP_CONFIG = {
   ACCENT_RAMP_CONFIG,
   BG_RAMP_CONFIG
 });
-//# sourceMappingURL=ramp-configs.js.map
+//# sourceMappingURL=ramp-configs.cjs.map

package/build/color-ramps/lib/{register-color-spaces.js → register-color-spaces.cjs}

@@ -4,4 +4,4 @@ import_fn.ColorSpace.register(import_fn.sRGB);
 import_fn.ColorSpace.register(import_fn.OKLCH);
 import_fn.ColorSpace.register(import_fn.P3);
 import_fn.ColorSpace.register(import_fn.HSL);
-//# sourceMappingURL=register-color-spaces.js.map
+//# sourceMappingURL=register-color-spaces.cjs.map

package/build/color-ramps/lib/{taper-chroma.js → taper-chroma.cjs}

@@ -23,7 +23,7 @@ __export(taper_chroma_exports, {
 });
 module.exports = __toCommonJS(taper_chroma_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./register-color-spaces");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
 function taperChroma(seed, lTarget, options = {}) {
   const gamut = options.gamut ?? import_fn.sRGB;
   const alpha = options.alpha ?? 0.65;
@@ -138,4 +138,4 @@ function maxInGamutChromaAtLH(l, h, gamutSpace, cap) {
 0 && (module.exports = {
   taperChroma
 });
-//# sourceMappingURL=taper-chroma.js.map
+//# sourceMappingURL=taper-chroma.cjs.map

package/build/color-ramps/lib/{types.js → types.cjs}

@@ -15,4 +15,4 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/theme/src/color-ramps/lib/types.ts
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.cjs.map

package/build/color-ramps/lib/{utils.js → utils.cjs}

@@ -27,9 +27,9 @@ __export(utils_exports, {
   stepsForStep: () => stepsForStep
 });
 module.exports = __toCommonJS(utils_exports);
-var import_register_color_spaces = require("./register-color-spaces");
-var import_constants = require("./constants");
-var import_color_utils = require("./color-utils");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
+var import_constants = require("./constants.cjs");
+var import_color_utils = require("./color-utils.cjs");
 function buildDependencyGraph(config) {
   const dependencies = /* @__PURE__ */ new Map();
   const dependents = /* @__PURE__ */ new Map();
@@ -163,4 +163,4 @@ function solveWithBisect(calculateC, calculateValue, initLowerL, initLowerValue,
   sortByDependency,
   stepsForStep
 });
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.cjs.map

package/build/{context.js → context.cjs}

@@ -32,4 +32,4 @@ var ThemeContext = (0, import_element.createContext)({
 0 && (module.exports = {
   ThemeContext
 });
-//# sourceMappingURL=context.js.map
+//# sourceMappingURL=context.cjs.map

package/build/{index.js → index.cjs}

@@ -22,9 +22,9 @@ __export(index_exports, {
   privateApis: () => import_private_apis.privateApis
 });
 module.exports = __toCommonJS(index_exports);
-var import_private_apis = require("./private-apis");
+var import_private_apis = require("./private-apis.cjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   privateApis
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export { privateApis } from './private-apis';\nexport type * from './prebuilt/ts/token-types';\nexport { type ThemeProvider } from './theme-provider';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4B;",
+  "names": []
+}

package/build/{lock-unlock.js → lock-unlock.cjs}

@@ -33,4 +33,4 @@ var { lock, unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnl
   lock,
   unlock
 });
-//# sourceMappingURL=lock-unlock.js.map
+//# sourceMappingURL=lock-unlock.cjs.map

package/build/prebuilt/js/{design-tokens.js → design-tokens.cjs}

@@ -167,4 +167,4 @@ var design_tokens_default = [
   "--wpds-font-line-height-x-large",
   "--wpds-font-line-height-2x-large"
 ];
-//# sourceMappingURL=design-tokens.js.map
+//# sourceMappingURL=design-tokens.cjs.map

package/build/prebuilt/ts/{color-tokens.js → color-tokens.cjs}

@@ -156,4 +156,4 @@ var color_tokens_default = {
   "caution-fgSurface4": ["fg-content-caution"],
   "caution-fgSurface3": ["fg-content-caution-weak"]
 };
-//# sourceMappingURL=color-tokens.js.map
+//# sourceMappingURL=color-tokens.cjs.map

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

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/theme/src/prebuilt/ts/token-types.ts
+var token_types_exports = {};
+module.exports = __toCommonJS(token_types_exports);
+//# sourceMappingURL=token-types.cjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/prebuilt/ts/token-types.ts"],
+  "sourcesContent": ["/**\n * This file is generated by the @wordpress/terrazzo-plugin-typescript-types plugin.\n * Do not edit this file directly.\n */\n\n/**\n * Size scale for padding tokens.\n */\nexport type PaddingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Size scale for gap tokens.\n */\nexport type GapSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Size scale for border radius tokens.\n */\nexport type BorderRadiusSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Size scale for border width tokens.\n */\nexport type BorderWidthSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Target elements that tokens can be applied to.\n */\nexport type Target =\n\t| 'surface'\n\t| 'interactive'\n\t| 'track'\n\t| 'thumb'\n\t| 'content'\n\t| 'focus';\n\n/**\n * Background color variants for surface elements.\n */\nexport type SurfaceBackgroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\n/**\n * Background color variants for interactive elements.\n */\nexport type InteractiveBackgroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'brand-weak'\n\t| 'error'\n\t| 'error-strong'\n\t| 'error-weak';\n\n/**\n * Foreground color variants for content text and icons.\n */\nexport type ContentForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\n/**\n * Foreground color variants for interactive element text and icons.\n */\nexport type InteractiveForegroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Stroke color variants for surface borders.\n */\nexport type SurfaceStrokeColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'neutral-strong'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'success'\n\t| 'success-strong'\n\t| 'info'\n\t| 'info-strong'\n\t| 'warning'\n\t| 'warning-strong'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Stroke color variants for interactive element borders.\n */\nexport type InteractiveStrokeColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'brand'\n\t| 'error'\n\t| 'error-strong';\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/{private-apis.js → private-apis.cjs}

@@ -22,9 +22,9 @@ __export(private_apis_exports, {
   privateApis: () => privateApis
 });
 module.exports = __toCommonJS(private_apis_exports);
-var import_lock_unlock = require("./lock-unlock");
-var import_theme_provider = require("./theme-provider");
-var import_use_theme_provider_styles = require("./use-theme-provider-styles");
+var import_lock_unlock = require("./lock-unlock.cjs");
+var import_theme_provider = require("./theme-provider.cjs");
+var import_use_theme_provider_styles = require("./use-theme-provider-styles.cjs");
 var privateApis = {};
 (0, import_lock_unlock.lock)(privateApis, {
   ThemeProvider: import_theme_provider.ThemeProvider,
@@ -34,4 +34,4 @@ var privateApis = {};
 0 && (module.exports = {
   privateApis
 });
-//# sourceMappingURL=private-apis.js.map
+//# sourceMappingURL=private-apis.cjs.map

package/build/{theme-provider.js → theme-provider.cjs}

@@ -23,8 +23,8 @@ __export(theme_provider_exports, {
 });
 module.exports = __toCommonJS(theme_provider_exports);
 var import_element = require("@wordpress/element");
-var import_context = require("./context");
-var import_use_theme_provider_styles = require("./use-theme-provider-styles");
+var import_context = require("./context.cjs");
+var import_use_theme_provider_styles = require("./use-theme-provider-styles.cjs");
 
 // packages/theme/src/style.module.css
 var css = `.style-module__root__26kw6 {
@@ -93,4 +93,4 @@ var ThemeProvider = ({
 0 && (module.exports = {
   ThemeProvider
 });
-//# sourceMappingURL=theme-provider.js.map
+//# sourceMappingURL=theme-provider.cjs.map

package/build/{types.js → types.cjs}

@@ -15,4 +15,4 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/theme/src/types.ts
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.cjs.map

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

@@ -33,12 +33,12 @@ __export(use_theme_provider_styles_exports, {
 });
 module.exports = __toCommonJS(use_theme_provider_styles_exports);
 var import_fn = require("colorjs.io/fn");
-var import_memize = __toESM(require("memize"));
+var import_memize = __toESM(require("memize"), 1);
 var import_element = require("@wordpress/element");
-var import_register_color_spaces = require("./color-ramps/lib/register-color-spaces");
-var import_context = require("./context");
-var import_color_tokens = __toESM(require("./prebuilt/ts/color-tokens"));
-var import_color_ramps = require("./color-ramps");
+var import_register_color_spaces = require("./color-ramps/lib/register-color-spaces.cjs");
+var import_context = require("./context.cjs");
+var import_color_tokens = __toESM(require("./prebuilt/ts/color-tokens.cjs"), 1);
+var import_color_ramps = require("./color-ramps/index.cjs");
 var getCachedBgRamp = (0, import_memize.default)(import_color_ramps.buildBgRamp, { maxSize: 10 });
 var getCachedAccentRamp = (0, import_memize.default)(import_color_ramps.buildAccentRamp, { maxSize: 10 });
 var legacyWpComponentsOverridesCSS = [
@@ -229,4 +229,4 @@ function useThemeProviderStyles({
 0 && (module.exports = {
   useThemeProviderStyles
 });
-//# sourceMappingURL=use-theme-provider-styles.js.map
+//# sourceMappingURL=use-theme-provider-styles.cjs.map

package/build-module/color-ramps/index.js

@@ -1,12 +1,12 @@
 // packages/theme/src/color-ramps/index.ts
 import { get, OKLCH, parse } from "colorjs.io/fn";
-import "./lib/register-color-spaces";
-import { buildRamp } from "./lib/index";
-import { clampAccentScaleReferenceLightness } from "./lib/utils";
-import { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from "./lib/ramp-configs";
-import { getContrast } from "./lib/color-utils";
-import { CONTRAST_COMBINATIONS } from "./lib/constants";
-import { DEFAULT_SEED_COLORS } from "./lib/constants";
+import "./lib/register-color-spaces.js";
+import { buildRamp } from "./lib/index.js";
+import { clampAccentScaleReferenceLightness } from "./lib/utils.js";
+import { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from "./lib/ramp-configs.js";
+import { getContrast } from "./lib/color-utils.js";
+import { CONTRAST_COMBINATIONS } from "./lib/constants.js";
+import { DEFAULT_SEED_COLORS } from "./lib/constants.js";
 function buildBgRamp(seed) {
   if (typeof seed !== "string" || seed.trim() === "") {
     throw new Error("Seed color must be a non-empty string");

package/build-module/color-ramps/lib/color-utils.js

@@ -7,7 +7,7 @@ import {
   sRGB,
   OKLCH
 } from "colorjs.io/fn";
-import "./register-color-spaces";
+import "./register-color-spaces.js";
 function getColorString(color) {
   return serialize(to(color, sRGB), { format: "hex", inGamut: true });
 }

package/build-module/color-ramps/lib/constants.js

@@ -1,6 +1,6 @@
 // packages/theme/src/color-ramps/lib/constants.ts
 import { to, OKLCH } from "colorjs.io/fn";
-import "./register-color-spaces";
+import "./register-color-spaces.js";
 var WHITE = to("white", OKLCH);
 var BLACK = to("black", OKLCH);
 var UNIVERSAL_CONTRAST_TOPUP = 0.02;

package/build-module/color-ramps/lib/find-color-with-constraints.js

@@ -1,10 +1,10 @@
 // packages/theme/src/color-ramps/lib/find-color-with-constraints.ts
 import { get, OKLCH } from "colorjs.io/fn";
-import "./register-color-spaces";
-import { solveWithBisect } from "./utils";
-import { WHITE, BLACK, CONTRAST_EPSILON } from "./constants";
-import { clampToGamut, getContrast } from "./color-utils";
-import { taperChroma } from "./taper-chroma";
+import "./register-color-spaces.js";
+import { solveWithBisect } from "./utils.js";
+import { WHITE, BLACK, CONTRAST_EPSILON } from "./constants.js";
+import { clampToGamut, getContrast } from "./color-utils.js";
+import { taperChroma } from "./taper-chroma.js";
 function cdiff(c1, c2) {
   return Math.log(c1 / c2);
 }

package/build-module/color-ramps/lib/index.js

@@ -6,17 +6,17 @@ import {
   parse,
   set
 } from "colorjs.io/fn";
-import "./register-color-spaces";
-import { clampToGamut, getContrast, getColorString } from "./color-utils";
-import { findColorMeetingRequirements } from "./find-color-with-constraints";
+import "./register-color-spaces.js";
+import { clampToGamut, getContrast, getColorString } from "./color-utils.js";
+import { findColorMeetingRequirements } from "./find-color-with-constraints.js";
 import {
   sortByDependency,
   computeBetterFgColorDirection,
   adjustContrastTarget,
   stepsForStep,
   solveWithBisect
-} from "./utils";
-import { CONTRAST_EPSILON } from "./constants";
+} from "./utils.js";
+import { CONTRAST_EPSILON } from "./constants.js";
 function calculateRamp({
   seed,
   sortedSteps,

package/build-module/color-ramps/lib/taper-chroma.js

@@ -5,7 +5,7 @@ import {
   OKLCH,
   sRGB
 } from "colorjs.io/fn";
-import "./register-color-spaces";
+import "./register-color-spaces.js";
 function taperChroma(seed, lTarget, options = {}) {
   const gamut = options.gamut ?? sRGB;
   const alpha = options.alpha ?? 0.65;

package/build-module/color-ramps/lib/utils.js

@@ -1,5 +1,5 @@
 // packages/theme/src/color-ramps/lib/utils.ts
-import "./register-color-spaces";
+import "./register-color-spaces.js";
 import {
   WHITE,
   BLACK,
@@ -8,8 +8,8 @@ import {
   ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS,
   MAX_BISECTION_ITERATIONS,
   CONTRAST_EPSILON
-} from "./constants";
-import { getContrast } from "./color-utils";
+} from "./constants.js";
+import { getContrast } from "./color-utils.js";
 function buildDependencyGraph(config) {
   const dependencies = /* @__PURE__ */ new Map();
   const dependents = /* @__PURE__ */ new Map();

package/build-module/index.js

@@ -1,5 +1,5 @@
 // packages/theme/src/index.ts
-import { privateApis } from "./private-apis";
+import { privateApis } from "./private-apis.js";
 export {
   privateApis
 };

package/build-module/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["// Private APIs.\nexport { privateApis } from './private-apis';\n"],
-  "mappings": ";AACA,SAAS,mBAAmB;",
+  "sourcesContent": ["export { privateApis } from './private-apis';\nexport type * from './prebuilt/ts/token-types';\nexport { type ThemeProvider } from './theme-provider';\n"],
+  "mappings": ";AAAA,SAAS,mBAAmB;",
   "names": []
 }

package/build-module/prebuilt/ts/token-types.js

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

package/build-module/prebuilt/ts/token-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/private-apis.js

@@ -1,7 +1,7 @@
 // packages/theme/src/private-apis.ts
-import { lock } from "./lock-unlock";
-import { ThemeProvider } from "./theme-provider";
-import { useThemeProviderStyles } from "./use-theme-provider-styles";
+import { lock } from "./lock-unlock.js";
+import { ThemeProvider } from "./theme-provider.js";
+import { useThemeProviderStyles } from "./use-theme-provider-styles.js";
 var privateApis = {};
 lock(privateApis, {
   ThemeProvider,