@wordpress/theme 0.3.1-next.8b30e05b0.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,46 +6,110 @@ 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
 
 In the **[Design Tokens Reference](docs/ds-tokens.md)** document there is a complete reference of all available design tokens including colors, spacing, typography, and more.
 
-### Color Tokens
+### Architecture
 
-The design system defines color tokens using the following naming scheme:
+Internally, the design system uses a tiered token architecture:
+
+- **Primitive tokens**: Raw values like hex colors or pixel dimensions which are what the browsers eventually interpret. These live in the `/tokens` directory as JSON source files and are an internal implementation detail.
+- **Semantic tokens**: Purpose-driven tokens with meaningful names that reference primitives and describe their intended use. These are what get exported as CSS custom properties.
+
+This separation allows the design system to maintain consistency while providing flexibility, since primitive values can be updated without changing the semantic token names that developers use in their code.
+
+### Design Tokens
+
+Design tokens are the visual design atoms of a design system. They are named entities that store visual design attributes like colors, spacing, typography, and shadows. They serve as a single source of truth that bridges design and development, ensuring consistency across platforms and making it easy to maintain and evolve the visual language of an application.
+
+Rather than hardcoding values like `#3858e9` or `16px` throughout your code, tokens provide semantic names like `--wpds-color-bg-interactive-brand-strong` or `--wpds-dimension-padding-surface-md` that describe the purpose and context of the value. This makes code more maintainable and allows the design system to evolve. When a token's value changes, all components using that token automatically reflect the update.
+
+#### Structure
+
+The design system follows the [Design Tokens Community Group (DTCG)](https://design-tokens.github.io/community-group/format/) specification and organizes tokens into distinct types based on what kind of visual property they represent. Token definitions are stored as JSON files in the `/tokens` directory:
+
+| File              | Description                                                                                                                      |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `color.json`      | Color palettes including primitive color ramps and semantic color tokens for backgrounds, foregrounds, strokes, and focus states |
+| `dimension.json`  | Spacing scale and semantic spacing tokens for padding, margins, and sizing                                                       |
+| `typography.json` | Font family stacks, font sizes, and line heights                                                                                 |
+| `border.json`     | Border radius and width values                                                                                                   |
+| `elevation.json`  | Shadow definitions for creating depth and layering                                                                               |
+
+Each JSON file contains both primitive and semantic token definitions in a hierarchical structure. These files are the source of truth for the design system and are processed during the build step to generate CSS custom properties and other output formats in `/src/prebuilt`.
+
+#### Token Naming
+
+Semantic tokens follow a consistent naming pattern:
 
 ```
---wpds-<element>-<tone>[-<emphasis>][-<state>]
+--wpds-<type>-<property>-<target>[-<modifier>]
 ```
 
-**Element** specifies what the color is applied to.
+**Type** indicates what kind of value it represents, usually mapping to a DTCG token type.
+
+| Value       | Description                                                                    |
+| ----------- | ------------------------------------------------------------------------------ |
+| `color`     | Color values for backgrounds, foregrounds, and strokes                         |
+| `dimension` | Spacing, sizing, and other measurable lengths (e.g., padding, margins, widths) |
+| `border`    | Border properties like radius and width                                        |
+| `elevation` | Shadow definitions for layering and depth                                      |
+| `font`      | Typography properties like family, size, and line-height                       |
+
+**Property** is the specific design property being defined.
 
-| Value                | Description                                                                                 |
-| -------------------- | ------------------------------------------------------------------------------------------- |
-| `bg-surface`         | Backgrounds of layout or container surfaces.                                                |
-| `bg-interactive`     | Backgrounds of interactive elements such as buttons, inputs, and toggles.                   |
-| `bg-track`           | Backgrounds of track components like scrollbars and slider tracks.                          |
-| `bg-thumb`           | Backgrounds of thumb components like scrollbar thumbs and slider thumbs.                    |
-| `fg-content`         | Foreground color for text and icons in static content.                                      |
-| `fg-interactive`     | Foreground color for text and icons in interactive elements such as links and buttons.      |
-| `stroke-surface`     | Decorative borders and dividers for non-interactive surfaces.                               |
-| `stroke-interactive` | Accessible borders for interactive controls.                                                |
-| `stroke-focus`       | Stroke color specifically for focus rings.                                                  |
+| Value    | Description                        |
+| -------- | ---------------------------------- |
+| `bg`     | Background color                   |
+| `fg`     | Foreground color (text and icons)  |
+| `stroke` | Border and outline color           |
+| `padding`| Internal spacing within an element |
+| `gap`    | Spacing between elements           |
+| `radius` | Border radius for rounded corners  |
+| `width`  | Border width                       |
+| `size`   | Font size                          |
+| `family` | Font family                        |
+
+**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                                |
+
+**Modifier** is an optional size or intensity modifier.
+
+| Value                               | Description          |
+| ----------------------------------- | -------------------- |
+| `2xs`, `xs`, `sm`, `md`, `lg`, `xl` | Size scale modifiers |
+
+#### Color Token Modifiers
+
+Color tokens extend the base pattern with additional modifiers for tone, emphasis, and state:
+
+```
+--wpds-color-<property>-<target>-<tone>[-<emphasis>][-<state>]
+```
 
 **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.
@@ -53,17 +117,17 @@ The design system defines color tokens using the following naming scheme:
 
 **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
 
@@ -74,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>
 	);
@@ -83,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.
@@ -95,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}

@@ -55,10 +55,10 @@ var DEFAULT_RAMPS = {
       bgFill1: "#3858e9",
       fgFill: "#eff0f2",
       bgFill2: "#2e49d9",
-      surface2: "#f6f8fc",
-      surface6: "#c7d2ee",
+      surface2: "#f6f8fd",
+      surface6: "#c7d2ed",
       surface5: "#dbe2f4",
-      surface4: "#e4eaf7",
+      surface4: "#e6eaf4",
       surface3: "#fff",
       fgSurface4: "#0b0070",
       fgSurface3: "#3858e9",
@@ -66,11 +66,11 @@ var DEFAULT_RAMPS = {
       fgSurface1: "#85a9ff",
       stroke3: "#3858e9",
       stroke4: "#2337c8",
-      stroke2: "#9aaad3",
-      stroke1: "#a2b1d6",
-      bgFillDark: "#1b1e26",
+      stroke2: "#9caacc",
+      stroke1: "#a3b1d4",
+      bgFillDark: "#1a1e27",
       fgFillDark: "#eff0f2",
-      bgFillInverted2: "#1b1e26",
+      bgFillInverted2: "#1a1e27",
       bgFillInverted1: "#13009f",
       fgFillInverted: "#eff0f2",
       surface1: "#ecf0f9"
@@ -80,27 +80,27 @@ var DEFAULT_RAMPS = {
   info: {
     ramp: {
       bgFill1: "#0090ff",
-      fgFill: "#1b1e23",
+      fgFill: "#1a1f24",
       bgFill2: "#007fed",
-      surface2: "#f5f9fd",
-      surface6: "#bdd5f1",
-      surface5: "#d4e4f6",
-      surface4: "#dfebf8",
+      surface2: "#f3f9ff",
+      surface6: "#bcd5f1",
+      surface5: "#d3e4f7",
+      surface4: "#deebfa",
       surface3: "#fff",
       fgSurface4: "#001b4f",
       fgSurface3: "#006bd7",
       fgSurface2: "#008bfa",
-      fgSurface1: "#59b0ff",
+      fgSurface1: "#58b0ff",
       stroke3: "#006bd7",
       stroke4: "#004fa9",
-      stroke2: "#94b5d9",
-      stroke1: "#9fbcdd",
-      bgFillDark: "#1b1e23",
-      fgFillDark: "#eff0f2",
-      bgFillInverted2: "#1b1e23",
+      stroke2: "#95b5d9",
+      stroke1: "#9fbcdc",
+      bgFillDark: "#1a1f24",
+      fgFillDark: "#eef0f3",
+      bgFillInverted2: "#1a1f24",
       bgFillInverted1: "#002a69",
-      fgFillInverted: "#eff0f2",
-      surface1: "#e9f1fa"
+      fgFillInverted: "#eef0f3",
+      surface1: "#e4f1ff"
     },
     direction: "darker"
   },
@@ -109,25 +109,25 @@ var DEFAULT_RAMPS = {
       bgFill1: "#4ab866",
       fgFill: "#1b1f1c",
       bgFill2: "#37a756",
-      surface2: "#f0fcf2",
-      surface6: "#7eea95",
-      surface5: "#b5f1bf",
-      surface4: "#cbf5d1",
+      surface2: "#eaffed",
+      surface6: "#88e89b",
+      surface5: "#aff3bb",
+      surface4: "#c5f7cc",
       surface3: "#fff",
       fgSurface4: "#002900",
       fgSurface3: "#007f30",
       fgSurface2: "#2b9e4e",
-      fgSurface1: "#53c06e",
+      fgSurface1: "#53c16e",
       stroke3: "#007f30",
       stroke4: "#006013",
-      stroke2: "#7dc189",
-      stroke1: "#82c98f",
+      stroke2: "#84c08e",
+      stroke1: "#8ac894",
       bgFillDark: "#1b1f1c",
-      fgFillDark: "#edf2ed",
+      fgFillDark: "#eaf3eb",
       bgFillInverted2: "#1b1f1c",
       bgFillInverted1: "#003701",
-      fgFillInverted: "#edf2ed",
-      surface1: "#dbf8df"
+      fgFillInverted: "#eaf3eb",
+      surface1: "#cbfdd2"
     },
     direction: "darker"
   },
@@ -136,25 +136,25 @@ var DEFAULT_RAMPS = {
       bgFill1: "#f0d149",
       fgFill: "#1f1e1b",
       bgFill2: "#dcbe2f",
-      surface2: "#fdf9e7",
-      surface6: "#ecd264",
-      surface5: "#f5e297",
-      surface4: "#f7eab3",
+      surface2: "#fff9c9",
+      surface6: "#e8d172",
+      surface5: "#f7e18a",
+      surface4: "#fee994",
       surface3: "#fff",
       fgSurface4: "#281d00",
-      fgSurface3: "#836b00",
-      fgSurface2: "#a58700",
-      fgSurface1: "#c7a900",
-      stroke3: "#836b00",
-      stroke4: "#635000",
-      stroke2: "#bfb17a",
-      stroke1: "#c7b97f",
+      fgSurface3: "#826a00",
+      fgSurface2: "#a48600",
+      fgSurface1: "#c6a800",
+      stroke3: "#826a00",
+      stroke4: "#624f00",
+      stroke2: "#bdb17e",
+      stroke1: "#c5b883",
       bgFillDark: "#1f1e1b",
-      fgFillDark: "#f6f1da",
+      fgFillDark: "#fdf1bf",
       bgFillInverted2: "#1f1e1b",
       bgFillInverted1: "#392c00",
-      fgFillInverted: "#f6f1da",
-      surface1: "#f9f0c8"
+      fgFillInverted: "#fdf1bf",
+      surface1: "#ffef9b"
     },
     direction: "darker"
   },
@@ -163,25 +163,25 @@ var DEFAULT_RAMPS = {
       bgFill1: "#f0b849",
       fgFill: "#1f1e1b",
       bgFill2: "#dda633",
-      surface2: "#fdf7ee",
-      surface6: "#f1ce8f",
-      surface5: "#f6e0b9",
-      surface4: "#f8e8cc",
+      surface2: "#fff7e0",
+      surface6: "#f4cc84",
+      surface5: "#faddac",
+      surface4: "#fde6bd",
       surface3: "#fff",
       fgSurface4: "#2e1900",
-      fgSurface3: "#936400",
-      fgSurface2: "#b68000",
-      fgSurface1: "#d8a12c",
-      stroke3: "#936400",
-      stroke4: "#704a00",
-      stroke2: "#caae7c",
-      stroke1: "#d2b581",
+      fgSurface3: "#926300",
+      fgSurface2: "#b47f00",
+      fgSurface1: "#d7a02a",
+      stroke3: "#926300",
+      stroke4: "#6f4900",
+      stroke2: "#c7ad7e",
+      stroke1: "#d0b381",
       bgFillDark: "#1f1e1b",
-      fgFillDark: "#f3f0e9",
+      fgFillDark: "#f7efe2",
       bgFillInverted2: "#1f1e1b",
       bgFillInverted1: "#422800",
-      fgFillInverted: "#f3f0e9",
-      surface1: "#faeeda"
+      fgFillInverted: "#f7efe2",
+      surface1: "#ffecc4"
     },
     direction: "darker"
   },
@@ -190,10 +190,10 @@ var DEFAULT_RAMPS = {
       bgFill1: "#cc1818",
       fgFill: "#f2efef",
       bgFill2: "#b90000",
-      surface2: "#fdf6f5",
-      surface6: "#f5c8c1",
-      surface5: "#f9dbd7",
-      surface4: "#fae4e1",
+      surface2: "#fff6f4",
+      surface6: "#f3c8c2",
+      surface5: "#f8dcd7",
+      surface4: "#f6e6e3",
       surface3: "#fff",
       fgSurface4: "#470000",
       fgSurface3: "#cc1818",
@@ -201,14 +201,14 @@ var DEFAULT_RAMPS = {
       fgSurface1: "#ff8879",
       stroke3: "#cc1818",
       stroke4: "#9d0000",
-      stroke2: "#de988e",
-      stroke1: "#e1a198",
+      stroke2: "#d39c95",
+      stroke1: "#daa39b",
       bgFillDark: "#231c1b",
       fgFillDark: "#f2efef",
       bgFillInverted2: "#231c1b",
       bgFillInverted1: "#640000",
       fgFillInverted: "#f2efef",
-      surface1: "#fbece9"
+      surface1: "#fcece9"
     },
     direction: "darker"
   }
@@ -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/{default-ramps.js.map → default-ramps.cjs.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/default-ramps.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { RampResult } from './types';\nimport type { DEFAULT_SEED_COLORS } from './constants';\n\nexport const DEFAULT_RAMPS: Record<\n\tkeyof typeof DEFAULT_SEED_COLORS,\n\tRampResult\n> = {\n\tbg: {\n\t\tramp: {\n\t\t\tsurface2: '#f8f8f8',\n\t\t\tbgFill1: '#555',\n\t\t\tfgFill: '#f0f0f0',\n\t\t\tbgFill2: '#484848',\n\t\t\tsurface6: '#d2d2d2',\n\t\t\tsurface5: '#e2e2e2',\n\t\t\tsurface4: '#eaeaea',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#1e1e1e',\n\t\t\tfgSurface3: '#6d6d6d',\n\t\t\tfgSurface2: '#8a8a8a',\n\t\t\tfgSurface1: '#aaa',\n\t\t\tstroke3: '#8a8a8a',\n\t\t\tstroke4: '#6c6c6c',\n\t\t\tstroke2: '#d8d8d8',\n\t\t\tstroke1: '#e0e0e0',\n\t\t\tbgFillDark: '#1e1e1e',\n\t\t\tfgFillDark: '#f0f0f0',\n\t\t\tbgFillInverted2: '#1e1e1e',\n\t\t\tbgFillInverted1: '#2d2d2d',\n\t\t\tfgFillInverted: '#f0f0f0',\n\t\t\tsurface1: '#f0f0f0',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tprimary: {\n\t\tramp: {\n\t\t\tbgFill1: '#3858e9',\n\t\t\tfgFill: '#eff0f2',\n\t\t\tbgFill2: '#2e49d9',\n\t\t\tsurface2: '#f6f8fc',\n\t\t\tsurface6: '#c7d2ee',\n\t\t\tsurface5: '#dbe2f4',\n\t\t\tsurface4: '#e4eaf7',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#0b0070',\n\t\t\tfgSurface3: '#3858e9',\n\t\t\tfgSurface2: '#5b82ff',\n\t\t\tfgSurface1: '#85a9ff',\n\t\t\tstroke3: '#3858e9',\n\t\t\tstroke4: '#2337c8',\n\t\t\tstroke2: '#9aaad3',\n\t\t\tstroke1: '#a2b1d6',\n\t\t\tbgFillDark: '#1b1e26',\n\t\t\tfgFillDark: '#eff0f2',\n\t\t\tbgFillInverted2: '#1b1e26',\n\t\t\tbgFillInverted1: '#13009f',\n\t\t\tfgFillInverted: '#eff0f2',\n\t\t\tsurface1: '#ecf0f9',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tinfo: {\n\t\tramp: {\n\t\t\tbgFill1: '#0090ff',\n\t\t\tfgFill: '#1b1e23',\n\t\t\tbgFill2: '#007fed',\n\t\t\tsurface2: '#f5f9fd',\n\t\t\tsurface6: '#bdd5f1',\n\t\t\tsurface5: '#d4e4f6',\n\t\t\tsurface4: '#dfebf8',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#001b4f',\n\t\t\tfgSurface3: '#006bd7',\n\t\t\tfgSurface2: '#008bfa',\n\t\t\tfgSurface1: '#59b0ff',\n\t\t\tstroke3: '#006bd7',\n\t\t\tstroke4: '#004fa9',\n\t\t\tstroke2: '#94b5d9',\n\t\t\tstroke1: '#9fbcdd',\n\t\t\tbgFillDark: '#1b1e23',\n\t\t\tfgFillDark: '#eff0f2',\n\t\t\tbgFillInverted2: '#1b1e23',\n\t\t\tbgFillInverted1: '#002a69',\n\t\t\tfgFillInverted: '#eff0f2',\n\t\t\tsurface1: '#e9f1fa',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tsuccess: {\n\t\tramp: {\n\t\t\tbgFill1: '#4ab866',\n\t\t\tfgFill: '#1b1f1c',\n\t\t\tbgFill2: '#37a756',\n\t\t\tsurface2: '#f0fcf2',\n\t\t\tsurface6: '#7eea95',\n\t\t\tsurface5: '#b5f1bf',\n\t\t\tsurface4: '#cbf5d1',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#002900',\n\t\t\tfgSurface3: '#007f30',\n\t\t\tfgSurface2: '#2b9e4e',\n\t\t\tfgSurface1: '#53c06e',\n\t\t\tstroke3: '#007f30',\n\t\t\tstroke4: '#006013',\n\t\t\tstroke2: '#7dc189',\n\t\t\tstroke1: '#82c98f',\n\t\t\tbgFillDark: '#1b1f1c',\n\t\t\tfgFillDark: '#edf2ed',\n\t\t\tbgFillInverted2: '#1b1f1c',\n\t\t\tbgFillInverted1: '#003701',\n\t\t\tfgFillInverted: '#edf2ed',\n\t\t\tsurface1: '#dbf8df',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tcaution: {\n\t\tramp: {\n\t\t\tbgFill1: '#f0d149',\n\t\t\tfgFill: '#1f1e1b',\n\t\t\tbgFill2: '#dcbe2f',\n\t\t\tsurface2: '#fdf9e7',\n\t\t\tsurface6: '#ecd264',\n\t\t\tsurface5: '#f5e297',\n\t\t\tsurface4: '#f7eab3',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#281d00',\n\t\t\tfgSurface3: '#836b00',\n\t\t\tfgSurface2: '#a58700',\n\t\t\tfgSurface1: '#c7a900',\n\t\t\tstroke3: '#836b00',\n\t\t\tstroke4: '#635000',\n\t\t\tstroke2: '#bfb17a',\n\t\t\tstroke1: '#c7b97f',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#f6f1da',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#392c00',\n\t\t\tfgFillInverted: '#f6f1da',\n\t\t\tsurface1: '#f9f0c8',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\twarning: {\n\t\tramp: {\n\t\t\tbgFill1: '#f0b849',\n\t\t\tfgFill: '#1f1e1b',\n\t\t\tbgFill2: '#dda633',\n\t\t\tsurface2: '#fdf7ee',\n\t\t\tsurface6: '#f1ce8f',\n\t\t\tsurface5: '#f6e0b9',\n\t\t\tsurface4: '#f8e8cc',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#2e1900',\n\t\t\tfgSurface3: '#936400',\n\t\t\tfgSurface2: '#b68000',\n\t\t\tfgSurface1: '#d8a12c',\n\t\t\tstroke3: '#936400',\n\t\t\tstroke4: '#704a00',\n\t\t\tstroke2: '#caae7c',\n\t\t\tstroke1: '#d2b581',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#f3f0e9',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#422800',\n\t\t\tfgFillInverted: '#f3f0e9',\n\t\t\tsurface1: '#faeeda',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\terror: {\n\t\tramp: {\n\t\t\tbgFill1: '#cc1818',\n\t\t\tfgFill: '#f2efef',\n\t\t\tbgFill2: '#b90000',\n\t\t\tsurface2: '#fdf6f5',\n\t\t\tsurface6: '#f5c8c1',\n\t\t\tsurface5: '#f9dbd7',\n\t\t\tsurface4: '#fae4e1',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#470000',\n\t\t\tfgSurface3: '#cc1818',\n\t\t\tfgSurface2: '#f74c40',\n\t\t\tfgSurface1: '#ff8879',\n\t\t\tstroke3: '#cc1818',\n\t\t\tstroke4: '#9d0000',\n\t\t\tstroke2: '#de988e',\n\t\t\tstroke1: '#e1a198',\n\t\t\tbgFillDark: '#231c1b',\n\t\t\tfgFillDark: '#f2efef',\n\t\t\tbgFillInverted2: '#231c1b',\n\t\t\tbgFillInverted1: '#640000',\n\t\t\tfgFillInverted: '#f2efef',\n\t\t\tsurface1: '#fbece9',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n};\n"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { RampResult } from './types';\nimport type { DEFAULT_SEED_COLORS } from './constants';\n\nexport const DEFAULT_RAMPS: Record<\n\tkeyof typeof DEFAULT_SEED_COLORS,\n\tRampResult\n> = {\n\tbg: {\n\t\tramp: {\n\t\t\tsurface2: '#f8f8f8',\n\t\t\tbgFill1: '#555',\n\t\t\tfgFill: '#f0f0f0',\n\t\t\tbgFill2: '#484848',\n\t\t\tsurface6: '#d2d2d2',\n\t\t\tsurface5: '#e2e2e2',\n\t\t\tsurface4: '#eaeaea',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#1e1e1e',\n\t\t\tfgSurface3: '#6d6d6d',\n\t\t\tfgSurface2: '#8a8a8a',\n\t\t\tfgSurface1: '#aaa',\n\t\t\tstroke3: '#8a8a8a',\n\t\t\tstroke4: '#6c6c6c',\n\t\t\tstroke2: '#d8d8d8',\n\t\t\tstroke1: '#e0e0e0',\n\t\t\tbgFillDark: '#1e1e1e',\n\t\t\tfgFillDark: '#f0f0f0',\n\t\t\tbgFillInverted2: '#1e1e1e',\n\t\t\tbgFillInverted1: '#2d2d2d',\n\t\t\tfgFillInverted: '#f0f0f0',\n\t\t\tsurface1: '#f0f0f0',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tprimary: {\n\t\tramp: {\n\t\t\tbgFill1: '#3858e9',\n\t\t\tfgFill: '#eff0f2',\n\t\t\tbgFill2: '#2e49d9',\n\t\t\tsurface2: '#f6f8fd',\n\t\t\tsurface6: '#c7d2ed',\n\t\t\tsurface5: '#dbe2f4',\n\t\t\tsurface4: '#e6eaf4',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#0b0070',\n\t\t\tfgSurface3: '#3858e9',\n\t\t\tfgSurface2: '#5b82ff',\n\t\t\tfgSurface1: '#85a9ff',\n\t\t\tstroke3: '#3858e9',\n\t\t\tstroke4: '#2337c8',\n\t\t\tstroke2: '#9caacc',\n\t\t\tstroke1: '#a3b1d4',\n\t\t\tbgFillDark: '#1a1e27',\n\t\t\tfgFillDark: '#eff0f2',\n\t\t\tbgFillInverted2: '#1a1e27',\n\t\t\tbgFillInverted1: '#13009f',\n\t\t\tfgFillInverted: '#eff0f2',\n\t\t\tsurface1: '#ecf0f9',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tinfo: {\n\t\tramp: {\n\t\t\tbgFill1: '#0090ff',\n\t\t\tfgFill: '#1a1f24',\n\t\t\tbgFill2: '#007fed',\n\t\t\tsurface2: '#f3f9ff',\n\t\t\tsurface6: '#bcd5f1',\n\t\t\tsurface5: '#d3e4f7',\n\t\t\tsurface4: '#deebfa',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#001b4f',\n\t\t\tfgSurface3: '#006bd7',\n\t\t\tfgSurface2: '#008bfa',\n\t\t\tfgSurface1: '#58b0ff',\n\t\t\tstroke3: '#006bd7',\n\t\t\tstroke4: '#004fa9',\n\t\t\tstroke2: '#95b5d9',\n\t\t\tstroke1: '#9fbcdc',\n\t\t\tbgFillDark: '#1a1f24',\n\t\t\tfgFillDark: '#eef0f3',\n\t\t\tbgFillInverted2: '#1a1f24',\n\t\t\tbgFillInverted1: '#002a69',\n\t\t\tfgFillInverted: '#eef0f3',\n\t\t\tsurface1: '#e4f1ff',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tsuccess: {\n\t\tramp: {\n\t\t\tbgFill1: '#4ab866',\n\t\t\tfgFill: '#1b1f1c',\n\t\t\tbgFill2: '#37a756',\n\t\t\tsurface2: '#eaffed',\n\t\t\tsurface6: '#88e89b',\n\t\t\tsurface5: '#aff3bb',\n\t\t\tsurface4: '#c5f7cc',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#002900',\n\t\t\tfgSurface3: '#007f30',\n\t\t\tfgSurface2: '#2b9e4e',\n\t\t\tfgSurface1: '#53c16e',\n\t\t\tstroke3: '#007f30',\n\t\t\tstroke4: '#006013',\n\t\t\tstroke2: '#84c08e',\n\t\t\tstroke1: '#8ac894',\n\t\t\tbgFillDark: '#1b1f1c',\n\t\t\tfgFillDark: '#eaf3eb',\n\t\t\tbgFillInverted2: '#1b1f1c',\n\t\t\tbgFillInverted1: '#003701',\n\t\t\tfgFillInverted: '#eaf3eb',\n\t\t\tsurface1: '#cbfdd2',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tcaution: {\n\t\tramp: {\n\t\t\tbgFill1: '#f0d149',\n\t\t\tfgFill: '#1f1e1b',\n\t\t\tbgFill2: '#dcbe2f',\n\t\t\tsurface2: '#fff9c9',\n\t\t\tsurface6: '#e8d172',\n\t\t\tsurface5: '#f7e18a',\n\t\t\tsurface4: '#fee994',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#281d00',\n\t\t\tfgSurface3: '#826a00',\n\t\t\tfgSurface2: '#a48600',\n\t\t\tfgSurface1: '#c6a800',\n\t\t\tstroke3: '#826a00',\n\t\t\tstroke4: '#624f00',\n\t\t\tstroke2: '#bdb17e',\n\t\t\tstroke1: '#c5b883',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#fdf1bf',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#392c00',\n\t\t\tfgFillInverted: '#fdf1bf',\n\t\t\tsurface1: '#ffef9b',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\twarning: {\n\t\tramp: {\n\t\t\tbgFill1: '#f0b849',\n\t\t\tfgFill: '#1f1e1b',\n\t\t\tbgFill2: '#dda633',\n\t\t\tsurface2: '#fff7e0',\n\t\t\tsurface6: '#f4cc84',\n\t\t\tsurface5: '#faddac',\n\t\t\tsurface4: '#fde6bd',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#2e1900',\n\t\t\tfgSurface3: '#926300',\n\t\t\tfgSurface2: '#b47f00',\n\t\t\tfgSurface1: '#d7a02a',\n\t\t\tstroke3: '#926300',\n\t\t\tstroke4: '#6f4900',\n\t\t\tstroke2: '#c7ad7e',\n\t\t\tstroke1: '#d0b381',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#f7efe2',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#422800',\n\t\t\tfgFillInverted: '#f7efe2',\n\t\t\tsurface1: '#ffecc4',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\terror: {\n\t\tramp: {\n\t\t\tbgFill1: '#cc1818',\n\t\t\tfgFill: '#f2efef',\n\t\t\tbgFill2: '#b90000',\n\t\t\tsurface2: '#fff6f4',\n\t\t\tsurface6: '#f3c8c2',\n\t\t\tsurface5: '#f8dcd7',\n\t\t\tsurface4: '#f6e6e3',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#470000',\n\t\t\tfgSurface3: '#cc1818',\n\t\t\tfgSurface2: '#f74c40',\n\t\t\tfgSurface1: '#ff8879',\n\t\t\tstroke3: '#cc1818',\n\t\t\tstroke4: '#9d0000',\n\t\t\tstroke2: '#d39c95',\n\t\t\tstroke1: '#daa39b',\n\t\t\tbgFillDark: '#231c1b',\n\t\t\tfgFillDark: '#f2efef',\n\t\t\tbgFillInverted2: '#231c1b',\n\t\t\tbgFillInverted1: '#640000',\n\t\t\tfgFillInverted: '#f2efef',\n\t\t\tsurface1: '#fcece9',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n};\n"],
   "mappings": "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",
   "names": []
 }

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/find-color-with-constraints.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/color-ramps/lib/find-color-with-constraints.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, type PlainColorObject } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport { solveWithBisect } from './utils';\nimport { WHITE, BLACK, CONTRAST_EPSILON } from './constants';\nimport { clampToGamut, getContrast } from './color-utils';\nimport { type TaperChromaOptions, taperChroma } from './taper-chroma';\n\n/**\n * Difference of contrast values that grows linearly with the Y luminance.\n * We get more precise linear interpolations when we use this.\n * @param c1 First contrast.\n * @param c2 Second contrast.\n * @return Difference of logarithms.\n */\nfunction cdiff( c1: number, c2: number ) {\n\treturn Math.log( c1 / c2 );\n}\n\n/**\n * Solve for L such that:\n *  - the L applied to the seed meets the contrast target against the reference\n *  - the search is performed in one direction (ie lighter / darker)\n *  - more constraints can be applied around lightness\n * @param reference\n * @param seed\n * @param target\n * @param direction\n * @param options\n * @param options.lightnessConstraint\n * @param options.lightnessConstraint.type\n * @param options.lightnessConstraint.value\n * @param options.taperChromaOptions\n */\nexport function findColorMeetingRequirements(\n\treference: PlainColorObject,\n\tseed: PlainColorObject,\n\ttarget: number,\n\tdirection: 'lighter' | 'darker',\n\t{\n\t\tlightnessConstraint,\n\t\ttaperChromaOptions,\n\t}: {\n\t\tlightnessConstraint?: {\n\t\t\ttype: 'force' | 'onlyIfSucceeds';\n\t\t\tvalue: number;\n\t\t};\n\t\ttaperChromaOptions?: TaperChromaOptions;\n\t} = {}\n): {\n\tcolor: PlainColorObject;\n\treached: boolean;\n\tachieved: number;\n\tdeficit?: number;\n} {\n\t// A target of 1 means same color.\n\t// A target lower than 1 doesn't make sense.\n\tif ( target <= 1 ) {\n\t\treturn {\n\t\t\tcolor: reference,\n\t\t\treached: true,\n\t\t\tachieved: 1,\n\t\t};\n\t}\n\n\tfunction getColorForL( l: number ): PlainColorObject {\n\t\tlet newL = l;\n\t\tlet newC = get( seed, [ OKLCH, 'c' ] );\n\n\t\tif ( taperChromaOptions ) {\n\t\t\tconst tapered = taperChroma( seed, newL, taperChromaOptions );\n\t\t\t// taperChroma returns either { l, c } or a ColorObject\n\t\t\tif ( 'l' in tapered && 'c' in tapered ) {\n\t\t\t\tnewL = tapered.l;\n\t\t\t\tnewC = tapered.c;\n\t\t\t} else {\n\t\t\t\t// It's already a ColorObject, return it directly\n\t\t\t\treturn tapered;\n\t\t\t}\n\t\t}\n\n\t\treturn clampToGamut( {\n\t\t\tspaceId: 'oklch',\n\t\t\tcoords: [ newL, newC, get( seed, [ OKLCH, 'h' ] ) ],\n\t\t} );\n\t}\n\n\t// Set the boundary based on the direction.\n\tconst mostContrastingL = direction === 'lighter' ? 1 : 0;\n\tconst mostContrastingColor = direction === 'lighter' ? WHITE : BLACK;\n\tconst highestContrast = getContrast( reference, mostContrastingColor );\n\n\tif ( lightnessConstraint ) {\n\t\t// Apply a specific L value.\n\t\t// Useful when pinning a step to a specific lightness, of to specify\n\t\t// min/max L values.\n\t\tconst colorWithExactL = getColorForL( lightnessConstraint.value );\n\t\tconst exactLContrast = getContrast( reference, colorWithExactL );\n\t\tconst exactLContrastMeetsTarget =\n\t\t\tcdiff( exactLContrast, target ) >= -CONTRAST_EPSILON;\n\n\t\t// If the L constraint is of \"force\" type, apply it even when it doesn't\n\t\t// meet the contrast target.\n\t\tif (\n\t\t\texactLContrastMeetsTarget ||\n\t\t\tlightnessConstraint.type === 'force'\n\t\t) {\n\t\t\treturn {\n\t\t\t\tcolor: colorWithExactL,\n\t\t\t\treached: exactLContrastMeetsTarget,\n\t\t\t\tachieved: exactLContrast,\n\t\t\t\tdeficit: exactLContrastMeetsTarget\n\t\t\t\t\t? cdiff( exactLContrast, highestContrast )\n\t\t\t\t\t: cdiff( target, exactLContrast ),\n\t\t\t};\n\t\t}\n\t}\n\n\t// If even the most contrasting color can't reach the target, the target is unreachable.\n\t// On the other hand, if the contrast is very close to the target, we consider it reached.\n\tif ( cdiff( highestContrast, target ) <= CONTRAST_EPSILON ) {\n\t\treturn {\n\t\t\tcolor: mostContrastingColor,\n\t\t\treached: cdiff( highestContrast, target ) >= -CONTRAST_EPSILON,\n\t\t\tachieved: highestContrast,\n\t\t\tdeficit: cdiff( target, highestContrast ),\n\t\t};\n\t}\n\n\t// Bracket: low fails, high meets.\n\t// Originally this was seed.oklch.l \u2014 although it's an assumption that works\n\t// only when we know for sure the direction of the search.\n\t// TODO: can we bring this back to seed.oklch.l ?\n\tconst lowerL = get( reference, [ OKLCH, 'l' ] );\n\tconst lowerContrast = cdiff( 1, target );\n\tconst upperL = mostContrastingL;\n\tconst upperContrast = cdiff( highestContrast, target );\n\n\tconst bestColor = solveWithBisect(\n\t\tgetColorForL,\n\t\t( c ) => cdiff( getContrast( reference, c ), target ),\n\t\tlowerL,\n\t\tlowerContrast,\n\t\tupperL,\n\t\tupperContrast\n\t);\n\n\treturn {\n\t\tcolor: bestColor,\n\t\treached: true,\n\t\tachieved: target,\n\t\t// Negative number that specifies how much room we have.\n\t\tdeficit: cdiff( target, highestContrast ),\n\t};\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAAkD;AAKlD,mCAAO;AACP,mBAAgC;AAChC,uBAA+C;AAC/C,yBAA0C;AAC1C,0BAAqD;AASrD,SAAS,MAAO,IAAY,IAAa;AACxC,SAAO,KAAK,IAAK,KAAK,EAAG;AAC1B;AAiBO,SAAS,6BACf,WACA,MACA,QACA,WACA;AAAA,EACC;AAAA,EACA;AACD,IAMI,CAAC,GAMJ;AAGD,MAAK,UAAU,GAAI;AAClB,WAAO;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,IACX;AAAA,EACD;AAEA,WAAS,aAAc,GAA8B;AACpD,QAAI,OAAO;AACX,QAAI,WAAO,eAAK,MAAM,CAAE,iBAAO,GAAI,CAAE;AAErC,QAAK,oBAAqB;AACzB,YAAM,cAAU,iCAAa,MAAM,MAAM,kBAAmB;AAE5D,UAAK,OAAO,WAAW,OAAO,SAAU;AACvC,eAAO,QAAQ;AACf,eAAO,QAAQ;AAAA,MAChB,OAAO;AAEN,eAAO;AAAA,MACR;AAAA,IACD;AAEA,eAAO,iCAAc;AAAA,MACpB,SAAS;AAAA,MACT,QAAQ,CAAE,MAAM,UAAM,eAAK,MAAM,CAAE,iBAAO,GAAI,CAAE,CAAE;AAAA,IACnD,CAAE;AAAA,EACH;AAGA,QAAM,mBAAmB,cAAc,YAAY,IAAI;AACvD,QAAM,uBAAuB,cAAc,YAAY,yBAAQ;AAC/D,QAAM,sBAAkB,gCAAa,WAAW,oBAAqB;AAErE,MAAK,qBAAsB;AAI1B,UAAM,kBAAkB,aAAc,oBAAoB,KAAM;AAChE,UAAM,qBAAiB,gCAAa,WAAW,eAAgB;AAC/D,UAAM,4BACL,MAAO,gBAAgB,MAAO,KAAK,CAAC;AAIrC,QACC,6BACA,oBAAoB,SAAS,SAC5B;AACD,aAAO;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,SAAS,4BACN,MAAO,gBAAgB,eAAgB,IACvC,MAAO,QAAQ,cAAe;AAAA,MAClC;AAAA,IACD;AAAA,EACD;AAIA,MAAK,MAAO,iBAAiB,MAAO,KAAK,mCAAmB;AAC3D,WAAO;AAAA,MACN,OAAO;AAAA,MACP,SAAS,MAAO,iBAAiB,MAAO,KAAK,CAAC;AAAA,MAC9C,UAAU;AAAA,MACV,SAAS,MAAO,QAAQ,eAAgB;AAAA,IACzC;AAAA,EACD;AAMA,QAAM,aAAS,eAAK,WAAW,CAAE,iBAAO,GAAI,CAAE;AAC9C,QAAM,gBAAgB,MAAO,GAAG,MAAO;AACvC,QAAM,SAAS;AACf,QAAM,gBAAgB,MAAO,iBAAiB,MAAO;AAErD,QAAM,gBAAY;AAAA,IACjB;AAAA,IACA,CAAE,MAAO,UAAO,gCAAa,WAAW,CAAE,GAAG,MAAO;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,SAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA;AAAA,IAEV,SAAS,MAAO,QAAQ,eAAgB;AAAA,EACzC;AACD;",
+  "names": []
+}

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