@wordpress/theme 0.1.0

package/build-types/lock-unlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lock-unlock.d.ts","sourceRoot":"","sources":["../src/lock-unlock.ts"],"names":[],"mappings":"AAKA,eAAO,MAAQ,IAAI,mDAAE,MAAM,iCAIzB,CAAC"}

package/build-types/prebuilt/js/design-tokens.d.ts

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

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.
+ * Do not edit this file directly.
+ */
+declare const _default: Record<string, Record<string, string>>;
+export default _default;
+//# sourceMappingURL=design-tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../src/prebuilt/ts/design-tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;wBA2UE,MAAM,CAAE,MAAM,EAAE,MAAM,CAAE,MAAM,EAAE,MAAM,CAAE,CAAE;AAzU/C,wBAyUgD"}

package/build-types/private-apis.d.ts

@@ -0,0 +1,2 @@
+export declare const privateApis: {};
+//# sourceMappingURL=private-apis.d.ts.map

package/build-types/private-apis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,IAAK,CAAC"}

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

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { ThemeProvider } from '../theme-provider';
+declare const meta: Meta<typeof ThemeProvider>;
+export default meta;
+export declare const Default: StoryObj<typeof ThemeProvider>;
+export declare const WithPicker: StoryObj<typeof ThemeProvider>;
+export declare const NestingAndInheriting: StoryObj<typeof ThemeProvider>;
+export declare const AcrossIframes: StoryObj<typeof ThemeProvider>;
+//# sourceMappingURL=index.story.d.ts.map

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

@@ -0,0 +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;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,aAAa,CAgBrC,CAAC;AACF,eAAe,IAAI,CAAC;AAyHpB,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,CAiDhE,CAAC;AA0EF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAE,OAAO,aAAa,CA6CzD,CAAC"}

package/build-types/theme-provider.d.ts

@@ -0,0 +1,3 @@
+import { type ThemeProviderProps } from './types';
+export declare const ThemeProvider: ({ children, color, isRoot, }: ThemeProviderProps) => import("react").JSX.Element;
+//# sourceMappingURL=theme-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAgClD,eAAO,MAAM,aAAa,iCAIvB,kBAAkB,gCAmCpB,CAAC"}

package/build-types/types.d.ts

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { type ReactNode } from 'react';
+export interface ThemeProviderSettings {
+    /**
+     * The set of color options to apply to the theme.
+     */
+    color?: {
+        /**
+         * The primary seed color to use for the theme.
+         *
+         * By default, it inherits from parent `ThemeProvider`,
+         * and fallbacks to statically built CSS.
+         */
+        primary?: string;
+        /**
+         * The background seed color to use for the theme.
+         *
+         * By default, it inherits from parent `ThemeProvider`,
+         * and fallbacks to statically built CSS.
+         */
+        bg?: string;
+    };
+}
+export interface ThemeProviderProps extends ThemeProviderSettings {
+    /**
+     * The children to render.
+     */
+    children?: ReactNode;
+    /**
+     * When a ThemeProvider is the root provider, it will apply its theming
+     * settings also to the root document element (e.g. the html element).
+     * This is useful, for example, to make sure that the `html` element can
+     * consume the right background color, or that overlays rendered inside a
+     * portal can inherit the correct color scheme.
+     *
+     * @default false
+     */
+    isRoot?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE;QACP;;;;;WAKG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;;;;WAKG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;CACF;AAED,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}

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

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+import type { ThemeProviderProps } from './types';
+export declare function useThemeProviderStyles({ color, }?: {
+    color?: ThemeProviderProps['color'];
+}): {
+    resolvedSettings: {
+        color: {
+            primary: string;
+            bg: string;
+        };
+    };
+    themeProviderStyles: CSSProperties;
+};
+//# sourceMappingURL=use-theme-provider-styles.d.ts.map

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

@@ -0,0 +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;AAmB3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAiKlD,wBAAgB,sBAAsB,CAAE,EACvC,KAAU,GACV,GAAE;IACF,KAAK,CAAC,EAAE,kBAAkB,CAAE,OAAO,CAAE,CAAC;CACjC;;;;;;;;EA2DL"}

package/docs/ds-tokens.md

@@ -0,0 +1,283 @@
+<!--
+This file is generated by @terrazzo/terrazzo-plugin-ds-tokens-docs.
+Do not edit directly.
+-->
+
+# DS Tokens reference
+
+## Semantic tokens
+
+### Border
+
+| Variable name                  | Description                 |
+| ------------------------------ | --------------------------- |
+| `--wpds-border-radius-x-small` | Extra small radius          |
+| `--wpds-border-radius-small`   | Small radius                |
+| `--wpds-border-radius-medium`  | Medium radius               |
+| `--wpds-border-radius-large`   | Large radius                |
+| `--wpds-border-width-focus`    | Border width for focus ring |
+
+### Color
+
+| Variable name                                         | Description                                                                                                                                 |
+| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--wpds-color-bg-surface-neutral`                     | Background color for surfaces with normal emphasis.                                                                                         |
+| `--wpds-color-bg-surface-neutral-strong`              | Background color for surfaces with strong emphasis.                                                                                         |
+| `--wpds-color-bg-surface-neutral-weak`                | Background color for surfaces with weak emphasis.                                                                                           |
+| `--wpds-color-bg-surface-brand`                       | Background color for surfaces with brand tone and normal emphasis.                                                                          |
+| `--wpds-color-bg-surface-success`                     | Background color for surfaces with success tone and normal emphasis.                                                                        |
+| `--wpds-color-bg-surface-success-weak`                | Background color for surfaces with success tone and weak emphasis.                                                                          |
+| `--wpds-color-bg-surface-info`                        | Background color for surfaces with info tone and normal emphasis.                                                                           |
+| `--wpds-color-bg-surface-info-weak`                   | Background color for surfaces with info tone and weak emphasis.                                                                             |
+| `--wpds-color-bg-surface-warning`                     | Background color for surfaces with warning tone and normal emphasis.                                                                        |
+| `--wpds-color-bg-surface-warning-weak`                | Background color for surfaces with warning tone and weak emphasis.                                                                          |
+| `--wpds-color-bg-surface-error`                       | Background color for surfaces with error tone and normal emphasis.                                                                          |
+| `--wpds-color-bg-surface-error-weak`                  | Background color for surfaces with error tone and weak emphasis.                                                                            |
+| `--wpds-color-bg-interactive-neutral`                 | Background color for interactive elements with neutral tone and normal emphasis.                                                            |
+| `--wpds-color-bg-interactive-neutral-active`          | Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active.                       |
+| `--wpds-color-bg-interactive-neutral-disabled`        | Background color for interactive elements with neutral tone and normal emphasis, in their disabled state.                                   |
+| `--wpds-color-bg-interactive-neutral-strong`          | Background color for interactive elements with neutral tone and strong emphasis.                                                            |
+| `--wpds-color-bg-interactive-neutral-strong-active`   | Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active.                       |
+| `--wpds-color-bg-interactive-neutral-strong-disabled` | Background color for interactive elements with neutral tone and strong emphasis, in their disabled state.                                   |
+| `--wpds-color-bg-interactive-neutral-weak`            | Background color for interactive elements with neutral tone and weak emphasis.                                                              |
+| `--wpds-color-bg-interactive-neutral-weak-active`     | Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active.                         |
+| `--wpds-color-bg-interactive-neutral-weak-disabled`   | Background color for interactive elements with neutral tone and weak emphasis, in their disabled state.                                     |
+| `--wpds-color-bg-interactive-brand`                   | Background color for interactive elements with brand tone and normal emphasis.                                                              |
+| `--wpds-color-bg-interactive-brand-active`            | Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active.                         |
+| `--wpds-color-bg-interactive-brand-disabled`          | Background color for interactive elements with brand tone and normal emphasis, in their disabled state.                                     |
+| `--wpds-color-bg-interactive-brand-strong`            | Background color for interactive elements with brand tone and strong emphasis.                                                              |
+| `--wpds-color-bg-interactive-brand-strong-active`     | Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active.                         |
+| `--wpds-color-bg-interactive-brand-strong-disabled`   | Background color for interactive elements with brand tone and strong emphasis, in their disabled state.                                     |
+| `--wpds-color-bg-interactive-brand-weak`              | Background color for interactive elements with brand tone and weak emphasis.                                                                |
+| `--wpds-color-bg-interactive-brand-weak-active`       | Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active.                           |
+| `--wpds-color-bg-interactive-brand-weak-disabled`     | Background color for interactive elements with brand tone and weak emphasis, in their disabled state.                                       |
+| `--wpds-color-bg-track-neutral-weak`                  | Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track).                                                    |
+| `--wpds-color-bg-track-neutral`                       | Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track).                                      |
+| `--wpds-color-bg-thumb-neutral-weak`                  | Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb).                                                    |
+| `--wpds-color-bg-thumb-neutral-weak-active`           | Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active.               |
+| `--wpds-color-bg-thumb-brand`                         | Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track).                                      |
+| `--wpds-color-bg-thumb-brand-active`                  | Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. |
+| `--wpds-color-bg-thumb-brand-disabled`                | Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state.             |
+| `--wpds-color-fg-content-neutral`                     | Foreground color for content like text with normal emphasis.                                                                                |
+| `--wpds-color-fg-content-neutral-weak`                | Foreground color for content like text with weak emphasis.                                                                                  |
+| `--wpds-color-fg-interactive-neutral`                 | Foreground color for interactive elements with neutral tone and normal emphasis.                                                            |
+| `--wpds-color-fg-interactive-neutral-active`          | Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active.                       |
+| `--wpds-color-fg-interactive-neutral-disabled`        | Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state.                                   |
+| `--wpds-color-fg-interactive-neutral-strong`          | Foreground color for interactive elements with neutral tone and strong emphasis.                                                            |
+| `--wpds-color-fg-interactive-neutral-strong-active`   | Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active.                       |
+| `--wpds-color-fg-interactive-neutral-strong-disabled` | Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state.                                   |
+| `--wpds-color-fg-interactive-neutral-weak`            | Foreground color for interactive elements with neutral tone and weak emphasis.                                                              |
+| `--wpds-color-fg-interactive-neutral-weak-disabled`   | Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state.                                     |
+| `--wpds-color-fg-interactive-brand`                   | Foreground color for interactive elements with brand tone and normal emphasis.                                                              |
+| `--wpds-color-fg-interactive-brand-active`            | Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active.                         |
+| `--wpds-color-fg-interactive-brand-disabled`          | Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state.                                     |
+| `--wpds-color-fg-interactive-brand-strong`            | Foreground color for interactive elements with brand tone and strong emphasis.                                                              |
+| `--wpds-color-fg-interactive-brand-strong-active`     | Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active.                         |
+| `--wpds-color-fg-interactive-brand-strong-disabled`   | Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state.                                     |
+| `--wpds-color-stroke-surface-neutral`                 | Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis.                                             |
+| `--wpds-color-stroke-surface-neutral-weak`            | Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis.                                               |
+| `--wpds-color-stroke-surface-neutral-strong`          | Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis.                                             |
+| `--wpds-color-stroke-surface-brand`                   | Decorative stroke color used to define brand-toned surface boundaries with normal emphasis.                                                 |
+| `--wpds-color-stroke-surface-brand-strong`            | Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis.                                             |
+| `--wpds-color-stroke-surface-success`                 | Decorative stroke color used to define success-toned surface boundaries with normal emphasis.                                               |
+| `--wpds-color-stroke-surface-success-strong`          | Decorative stroke color used to define success-toned surface boundaries with strong emphasis.                                               |
+| `--wpds-color-stroke-surface-info`                    | Decorative stroke color used to define info-toned surface boundaries with normal emphasis.                                                  |
+| `--wpds-color-stroke-surface-info-strong`             | Decorative stroke color used to define info-toned surface boundaries with strong emphasis.                                                  |
+| `--wpds-color-stroke-surface-warning`                 | Decorative stroke color used to define warning-toned surface boundaries with normal emphasis.                                               |
+| `--wpds-color-stroke-surface-warning-strong`          | Decorative stroke color used to define warning-toned surface boundaries with strong emphasis.                                               |
+| `--wpds-color-stroke-surface-error`                   | Decorative stroke color used to define error-toned surface boundaries with normal emphasis.                                                 |
+| `--wpds-color-stroke-surface-error-strong`            | Decorative stroke color used to define error-toned surface boundaries with strong emphasis.                                                 |
+| `--wpds-color-stroke-interactive-neutral`             | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis.                                                 |
+| `--wpds-color-stroke-interactive-neutral-active`      | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active.            |
+| `--wpds-color-stroke-interactive-neutral-disabled`    | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state.                        |
+| `--wpds-color-stroke-interactive-neutral-strong`      | Accessible stroke color used for interactive neutrally-toned elements with strong emphasis.                                                 |
+| `--wpds-color-stroke-interactive-brand`               | Accessible stroke color used for interactive brand-toned elements with normal emphasis.                                                     |
+| `--wpds-color-stroke-interactive-brand-active`        | Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active.                |
+| `--wpds-color-stroke-interactive-brand-disabled`      | Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state.                            |
+| `--wpds-color-stroke-interactive-error-strong`        | Accessible stroke color used for interactive error-toned elements with strong emphasis.                                                     |
+| `--wpds-color-stroke-focus-brand`                     | Accessible stroke color applied to focus rings.                                                                                             |
+
+### Elevation
+
+| Variable name              | Description                                                                                                                       |
+| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `--wpds-elevation-x-small` | For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.     |
+| `--wpds-elevation-small`   | For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar. |
+| `--wpds-elevation-medium`  | For components that offer additional actions. Example: Menus, Command Palette                                                     |
+| `--wpds-elevation-large`   | For components that confirm decisions or handle necessary interruptions. Example: Modals.                                         |
+
+### Spacing
+
+| Variable name       | Description         |
+| ------------------- | ------------------- |
+| `--wpds-spacing-05` | Extra small spacing |
+| `--wpds-spacing-10` | Small spacing       |
+| `--wpds-spacing-15` | Medium spacing      |
+| `--wpds-spacing-20` | Large spacing       |
+| `--wpds-spacing-30` | Extra large spacing |
+| `--wpds-spacing-40` | 2X large spacing    |
+| `--wpds-spacing-50` | 3X large spacing    |
+| `--wpds-spacing-60` | 4X large spacing    |
+| `--wpds-spacing-70` | 5X large spacing    |
+| `--wpds-spacing-80` | 6X large spacing    |
+
+### Typography
+
+| Variable name                      | Description             |
+| ---------------------------------- | ----------------------- |
+| `--wpds-font-family-heading`       | Headings font family    |
+| `--wpds-font-family-body`          | Body font family        |
+| `--wpds-font-family-mono`          | Monospace font family   |
+| `--wpds-font-size-x-small`         | Extra small font size   |
+| `--wpds-font-size-small`           | Small font size         |
+| `--wpds-font-size-medium`          | Medium font size        |
+| `--wpds-font-size-large`           | Large font size         |
+| `--wpds-font-size-x-large`         | Extra large font size   |
+| `--wpds-font-size-2x-large`        | 2X large font size      |
+| `--wpds-font-line-height-x-small`  | Extra small line height |
+| `--wpds-font-line-height-small`    | Small line height       |
+| `--wpds-font-line-height-medium`   | Medium line height      |
+| `--wpds-font-line-height-large`    | Large line height       |
+| `--wpds-font-line-height-x-large`  | Extra large line height |
+| `--wpds-font-line-height-2x-large` | 2X large line height    |
+
+## Primitive tokens
+
+**🚨 Note: These tokens are only private implementation details of the Theme, and should never be referenced / consumed directly in the code.**
+
+### Color (private)
+
+| Variable name                                    | Description |
+| ------------------------------------------------ | ----------- |
+| `--wpds-color-private-primary-bg-fill1`          | N/A         |
+| `--wpds-color-private-primary-fg-fill`           | N/A         |
+| `--wpds-color-private-primary-bg-fill2`          | N/A         |
+| `--wpds-color-private-primary-surface2`          | N/A         |
+| `--wpds-color-private-primary-surface6`          | N/A         |
+| `--wpds-color-private-primary-surface5`          | N/A         |
+| `--wpds-color-private-primary-surface4`          | N/A         |
+| `--wpds-color-private-primary-surface3`          | N/A         |
+| `--wpds-color-private-primary-fg-surface4`       | N/A         |
+| `--wpds-color-private-primary-fg-surface3`       | N/A         |
+| `--wpds-color-private-primary-fg-surface2`       | N/A         |
+| `--wpds-color-private-primary-fg-surface1`       | N/A         |
+| `--wpds-color-private-primary-stroke3`           | N/A         |
+| `--wpds-color-private-primary-stroke4`           | N/A         |
+| `--wpds-color-private-primary-stroke2`           | N/A         |
+| `--wpds-color-private-primary-stroke1`           | N/A         |
+| `--wpds-color-private-primary-bg-fill-dark`      | N/A         |
+| `--wpds-color-private-primary-fg-fill-dark`      | N/A         |
+| `--wpds-color-private-primary-bg-fill-inverted2` | N/A         |
+| `--wpds-color-private-primary-bg-fill-inverted1` | N/A         |
+| `--wpds-color-private-primary-fg-fill-inverted`  | N/A         |
+| `--wpds-color-private-primary-surface1`          | N/A         |
+| `--wpds-color-private-info-bg-fill1`             | N/A         |
+| `--wpds-color-private-info-fg-fill`              | N/A         |
+| `--wpds-color-private-info-bg-fill2`             | N/A         |
+| `--wpds-color-private-info-surface2`             | N/A         |
+| `--wpds-color-private-info-surface6`             | N/A         |
+| `--wpds-color-private-info-surface5`             | N/A         |
+| `--wpds-color-private-info-surface4`             | N/A         |
+| `--wpds-color-private-info-surface3`             | N/A         |
+| `--wpds-color-private-info-fg-surface4`          | N/A         |
+| `--wpds-color-private-info-fg-surface3`          | N/A         |
+| `--wpds-color-private-info-fg-surface2`          | N/A         |
+| `--wpds-color-private-info-fg-surface1`          | N/A         |
+| `--wpds-color-private-info-stroke3`              | N/A         |
+| `--wpds-color-private-info-stroke4`              | N/A         |
+| `--wpds-color-private-info-stroke2`              | N/A         |
+| `--wpds-color-private-info-stroke1`              | N/A         |
+| `--wpds-color-private-info-bg-fill-dark`         | N/A         |
+| `--wpds-color-private-info-fg-fill-dark`         | N/A         |
+| `--wpds-color-private-info-bg-fill-inverted2`    | N/A         |
+| `--wpds-color-private-info-bg-fill-inverted1`    | N/A         |
+| `--wpds-color-private-info-fg-fill-inverted`     | N/A         |
+| `--wpds-color-private-info-surface1`             | N/A         |
+| `--wpds-color-private-success-bg-fill1`          | N/A         |
+| `--wpds-color-private-success-fg-fill`           | N/A         |
+| `--wpds-color-private-success-bg-fill2`          | N/A         |
+| `--wpds-color-private-success-surface2`          | N/A         |
+| `--wpds-color-private-success-surface6`          | N/A         |
+| `--wpds-color-private-success-surface5`          | N/A         |
+| `--wpds-color-private-success-surface4`          | N/A         |
+| `--wpds-color-private-success-surface3`          | N/A         |
+| `--wpds-color-private-success-fg-surface4`       | N/A         |
+| `--wpds-color-private-success-fg-surface3`       | N/A         |
+| `--wpds-color-private-success-fg-surface2`       | N/A         |
+| `--wpds-color-private-success-fg-surface1`       | N/A         |
+| `--wpds-color-private-success-stroke3`           | N/A         |
+| `--wpds-color-private-success-stroke4`           | N/A         |
+| `--wpds-color-private-success-stroke2`           | N/A         |
+| `--wpds-color-private-success-stroke1`           | N/A         |
+| `--wpds-color-private-success-bg-fill-dark`      | N/A         |
+| `--wpds-color-private-success-fg-fill-dark`      | N/A         |
+| `--wpds-color-private-success-bg-fill-inverted2` | N/A         |
+| `--wpds-color-private-success-bg-fill-inverted1` | N/A         |
+| `--wpds-color-private-success-fg-fill-inverted`  | N/A         |
+| `--wpds-color-private-success-surface1`          | N/A         |
+| `--wpds-color-private-warning-bg-fill1`          | N/A         |
+| `--wpds-color-private-warning-fg-fill`           | N/A         |
+| `--wpds-color-private-warning-bg-fill2`          | N/A         |
+| `--wpds-color-private-warning-surface2`          | N/A         |
+| `--wpds-color-private-warning-surface6`          | N/A         |
+| `--wpds-color-private-warning-surface5`          | N/A         |
+| `--wpds-color-private-warning-surface4`          | N/A         |
+| `--wpds-color-private-warning-surface3`          | N/A         |
+| `--wpds-color-private-warning-fg-surface4`       | N/A         |
+| `--wpds-color-private-warning-fg-surface3`       | N/A         |
+| `--wpds-color-private-warning-fg-surface2`       | N/A         |
+| `--wpds-color-private-warning-fg-surface1`       | N/A         |
+| `--wpds-color-private-warning-stroke3`           | N/A         |
+| `--wpds-color-private-warning-stroke4`           | N/A         |
+| `--wpds-color-private-warning-stroke2`           | N/A         |
+| `--wpds-color-private-warning-stroke1`           | N/A         |
+| `--wpds-color-private-warning-bg-fill-dark`      | N/A         |
+| `--wpds-color-private-warning-fg-fill-dark`      | N/A         |
+| `--wpds-color-private-warning-bg-fill-inverted2` | N/A         |
+| `--wpds-color-private-warning-bg-fill-inverted1` | N/A         |
+| `--wpds-color-private-warning-fg-fill-inverted`  | N/A         |
+| `--wpds-color-private-warning-surface1`          | N/A         |
+| `--wpds-color-private-error-bg-fill1`            | N/A         |
+| `--wpds-color-private-error-fg-fill`             | N/A         |
+| `--wpds-color-private-error-bg-fill2`            | N/A         |
+| `--wpds-color-private-error-surface2`            | N/A         |
+| `--wpds-color-private-error-surface6`            | N/A         |
+| `--wpds-color-private-error-surface5`            | N/A         |
+| `--wpds-color-private-error-surface4`            | N/A         |
+| `--wpds-color-private-error-surface3`            | N/A         |
+| `--wpds-color-private-error-fg-surface4`         | N/A         |
+| `--wpds-color-private-error-fg-surface3`         | N/A         |
+| `--wpds-color-private-error-fg-surface2`         | N/A         |
+| `--wpds-color-private-error-fg-surface1`         | N/A         |
+| `--wpds-color-private-error-stroke3`             | N/A         |
+| `--wpds-color-private-error-stroke4`             | N/A         |
+| `--wpds-color-private-error-stroke2`             | N/A         |
+| `--wpds-color-private-error-stroke1`             | N/A         |
+| `--wpds-color-private-error-bg-fill-dark`        | N/A         |
+| `--wpds-color-private-error-fg-fill-dark`        | N/A         |
+| `--wpds-color-private-error-bg-fill-inverted2`   | N/A         |
+| `--wpds-color-private-error-bg-fill-inverted1`   | N/A         |
+| `--wpds-color-private-error-fg-fill-inverted`    | N/A         |
+| `--wpds-color-private-error-surface1`            | N/A         |
+| `--wpds-color-private-bg-surface2`               | N/A         |
+| `--wpds-color-private-bg-bg-fill1`               | N/A         |
+| `--wpds-color-private-bg-fg-fill`                | N/A         |
+| `--wpds-color-private-bg-bg-fill2`               | N/A         |
+| `--wpds-color-private-bg-surface6`               | N/A         |
+| `--wpds-color-private-bg-surface5`               | N/A         |
+| `--wpds-color-private-bg-surface4`               | N/A         |
+| `--wpds-color-private-bg-surface3`               | N/A         |
+| `--wpds-color-private-bg-fg-surface4`            | N/A         |
+| `--wpds-color-private-bg-fg-surface3`            | N/A         |
+| `--wpds-color-private-bg-fg-surface2`            | N/A         |
+| `--wpds-color-private-bg-fg-surface1`            | N/A         |
+| `--wpds-color-private-bg-stroke3`                | N/A         |
+| `--wpds-color-private-bg-stroke4`                | N/A         |
+| `--wpds-color-private-bg-stroke2`                | N/A         |
+| `--wpds-color-private-bg-stroke1`                | N/A         |
+| `--wpds-color-private-bg-bg-fill-dark`           | N/A         |
+| `--wpds-color-private-bg-fg-fill-dark`           | N/A         |
+| `--wpds-color-private-bg-bg-fill-inverted2`      | N/A         |
+| `--wpds-color-private-bg-bg-fill-inverted1`      | N/A         |
+| `--wpds-color-private-bg-fg-fill-inverted`       | N/A         |
+| `--wpds-color-private-bg-surface1`               | N/A         |

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "@wordpress/theme",
+	"version": "0.1.0",
+	"description": "Theme and context provider for the WordPress Design System.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"components"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/theme/README.md",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/theme"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js",
+			"default": "./build/index.js"
+		},
+		"./design-tokens.css": "./src/prebuilt/css/design-tokens.css",
+		"./design-tokens.js": "./src/prebuilt/js/design-tokens.js",
+		"./package.json": "./package.json",
+		"./build-style/": "./build-style/"
+	},
+	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@wordpress/element": "^6.34.0",
+		"@wordpress/private-apis": "^1.34.0",
+		"colorjs.io": "^0.5.2"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "rimraf src/prebuilt docs && node bin/build-tokens.js && prettier --write tokens/color.json src/prebuilt docs"
+	},
+	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
+}

package/src/color-ramps/index.ts

@@ -0,0 +1,155 @@
+/**
+ * External dependencies
+ */
+import Color from 'colorjs.io';
+
+/**
+ * Internal dependencies
+ */
+import { buildRamp } from './lib/index';
+import { clampAccentScaleReferenceLightness } from './lib/utils';
+import { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';
+import type {
+	RampResult as InternalRampResult,
+	RampDirection,
+	Ramp,
+} from './lib/types';
+import { getCachedContrast } from './lib/cache-utils';
+import { CONTRAST_COMBINATIONS } from './lib/constants';
+export { DEFAULT_SEED_COLORS } from './lib/constants';
+
+/**
+ * Creates a background ramp.
+ * @param params
+ * @param params.seed
+ * @param params.debug
+ */
+export function buildBgRamp( {
+	seed,
+	debug,
+}: {
+	seed: string;
+	debug?: boolean;
+} ): InternalRampResult {
+	if ( typeof seed !== 'string' || seed.trim() === '' ) {
+		throw new Error( 'Seed color must be a non-empty string' );
+	}
+
+	return buildRamp( seed, BG_RAMP_CONFIG, { debug } );
+}
+
+const STEP_TO_PIN = 'surface2';
+function getBgRampInfo( ramp: InternalRampResult ): {
+	mainDirection: RampDirection;
+	pinLightness: {
+		stepName: keyof Ramp;
+		value: number;
+	};
+} {
+	return {
+		mainDirection: ramp.direction,
+		pinLightness: {
+			stepName: STEP_TO_PIN,
+			value: clampAccentScaleReferenceLightness(
+				new Color( ramp.ramp[ STEP_TO_PIN ].color ).oklch.l,
+				ramp.direction
+			),
+		},
+	};
+}
+
+/**
+ * Creates an accent ramp (ie used by primary, success, info, warning and error
+ * ramps).
+ * @param params
+ * @param params.seed
+ * @param params.bgRamp
+ * @param params.debug
+ */
+export function buildAccentRamp( {
+	seed,
+	bgRamp,
+	debug,
+}: {
+	seed: string;
+	bgRamp?: InternalRampResult;
+	debug?: boolean;
+} ): InternalRampResult {
+	if ( typeof seed !== 'string' || seed.trim() === '' ) {
+		throw new Error( 'Seed color must be a non-empty string' );
+	}
+
+	const bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;
+	return buildRamp( seed, ACCENT_RAMP_CONFIG, {
+		...bgRampInfo,
+		debug,
+	} );
+}
+
+/**
+ * Checks that all bg/fg combinations generated by the ramps meet contrast
+ * targets.
+ * @param params
+ * @param params.bgRamp
+ * @param params.accentRamps
+ */
+export function checkAccessibleCombinations( {
+	bgRamp,
+	accentRamps = [],
+}: {
+	bgRamp: InternalRampResult;
+	accentRamps?: InternalRampResult[];
+} ) {
+	const unmetTargets: {
+		bgName: keyof Ramp;
+		bgColor: string;
+		fgName: keyof Ramp;
+		fgColor: string;
+		unmetContrast: number;
+	}[] = [];
+
+	// Assess combinations within each ramp
+	[ bgRamp, ...accentRamps ].forEach( ( ramp ) => {
+		CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
+			for ( const bg of bgs ) {
+				for ( const fg of fgs ) {
+					const bgColor = new Color( ramp.ramp[ bg ].color );
+					const fgColor = new Color( ramp.ramp[ fg ].color );
+					if ( getCachedContrast( bgColor, fgColor ) < target ) {
+						unmetTargets.push( {
+							bgName: bg,
+							bgColor: bgColor.toString(),
+							fgName: fg,
+							fgColor: fgColor.toString(),
+							unmetContrast: target,
+						} );
+					}
+				}
+			}
+		} );
+	} );
+	// Assess each accent ramp's fg color against bg ramp
+	accentRamps.forEach( ( ramp ) => {
+		CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
+			for ( const bg of bgs ) {
+				for ( const fg of fgs ) {
+					const bgColor = new Color( bgRamp.ramp[ bg ].color );
+					const fgColor = new Color( ramp.ramp[ fg ].color );
+					if ( getCachedContrast( bgColor, fgColor ) < target ) {
+						unmetTargets.push( {
+							bgName: bg,
+							bgColor: bgColor.toString(),
+							fgName: fg,
+							fgColor: fgColor.toString(),
+							unmetContrast: target,
+						} );
+					}
+				}
+			}
+		} );
+	} );
+
+	return unmetTargets;
+}
+
+export type RampResult = InternalRampResult;