@wordpress/theme 0.9.0 → 0.10.1-next.v.202604091042.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/README.md +22 -17
- package/build/context.cjs +2 -1
- package/build/context.cjs.map +2 -2
- package/build/prebuilt/js/design-token-fallbacks.cjs +1 -1
- package/build/prebuilt/js/design-token-fallbacks.cjs.map +1 -1
- package/build/theme-provider.cjs +5 -3
- package/build/theme-provider.cjs.map +2 -2
- package/build/types.cjs.map +1 -1
- package/build/use-theme-provider-styles.cjs +16 -4
- package/build/use-theme-provider-styles.cjs.map +2 -2
- package/build-module/context.mjs +2 -1
- package/build-module/context.mjs.map +2 -2
- package/build-module/prebuilt/js/design-token-fallbacks.mjs +1 -1
- package/build-module/prebuilt/js/design-token-fallbacks.mjs.map +1 -1
- package/build-module/theme-provider.mjs +5 -3
- package/build-module/theme-provider.mjs.map +2 -2
- package/build-module/use-theme-provider-styles.mjs +16 -4
- package/build-module/use-theme-provider-styles.mjs.map +2 -2
- package/build-types/context.d.ts.map +1 -1
- package/build-types/theme-provider.d.ts +1 -1
- package/build-types/theme-provider.d.ts.map +1 -1
- package/build-types/types.d.ts +13 -0
- package/build-types/types.d.ts.map +1 -1
- package/build-types/use-theme-provider-styles.d.ts +865 -6
- package/build-types/use-theme-provider-styles.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/context.ts +1 -0
- package/src/prebuilt/css/design-tokens.css +1 -1
- package/src/prebuilt/js/design-token-fallbacks.mjs +1 -1
- package/src/theme-provider.tsx +2 -0
- package/src/types.ts +14 -0
- package/src/use-theme-provider-styles.ts +16 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,10 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 0.10.0 (2026-04-01)
|
|
6
|
+
|
|
7
|
+
### Enhancement
|
|
8
|
+
|
|
9
|
+
- Change the default value of `--wpds-cursor-control` from `default` to `pointer` ([#76762](https://github.com/WordPress/gutenberg/pull/76762)).
|
|
10
|
+
|
|
5
11
|
## 0.9.0 (2026-03-18)
|
|
6
12
|
|
|
7
13
|
### New Features
|
|
8
14
|
|
|
15
|
+
- Add `cursor` prop to `ThemeProvider` for configuring the `--wpds-cursor-control` design token ([#76410](https://github.com/WordPress/gutenberg/pull/76410)).
|
|
9
16
|
- Added `no-token-fallback-values` stylelint rule that disallows manual fallback values for `--wpds-*` design tokens. Available as `@wordpress/theme/stylelint-plugins/no-token-fallback-values` ([#76415](https://github.com/WordPress/gutenberg/pull/76415)).
|
|
10
17
|
|
|
11
18
|
## 0.8.0 (2026-03-04)
|
package/README.md
CHANGED
|
@@ -87,8 +87,8 @@ Semantic tokens follow a consistent naming pattern:
|
|
|
87
87
|
|
|
88
88
|
**Modifier** is an optional size or intensity modifier.
|
|
89
89
|
|
|
90
|
-
| Value
|
|
91
|
-
|
|
|
90
|
+
| Value | Description |
|
|
91
|
+
| ------------------------------------------ | -------------------- |
|
|
92
92
|
| `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | Size scale modifiers |
|
|
93
93
|
|
|
94
94
|
#### Color Token Modifiers
|
|
@@ -111,9 +111,7 @@ Color tokens extend the base pattern with additional modifiers for tone, emphasi
|
|
|
111
111
|
| `warning` | Higher-severity or time-sensitive issues that require user attention but are not errors |
|
|
112
112
|
| `error` | Blocking issues, validation failures, or destructive actions |
|
|
113
113
|
|
|
114
|
-
|
|
115
|
-
> `caution` and `warning` represent two escalation levels of non-error severity.
|
|
116
|
-
> Use **`caution`** for guidance or minor risks, and **`warning`** when the user must act to prevent an error.
|
|
114
|
+
Note: `caution` and `warning` represent two escalation levels of non-error severity. Use **`caution`** for guidance or minor risks, and **`warning`** when the user must act to prevent an error.
|
|
117
115
|
|
|
118
116
|
**Emphasis** adjusts color strength relative to the base tone, if specified. The default is a normal emphasis.
|
|
119
117
|
|
|
@@ -138,7 +136,10 @@ import { ThemeProvider } from '@wordpress/theme';
|
|
|
138
136
|
|
|
139
137
|
function App() {
|
|
140
138
|
return (
|
|
141
|
-
<ThemeProvider
|
|
139
|
+
<ThemeProvider
|
|
140
|
+
color={ { primary: 'blue' } }
|
|
141
|
+
density="compact"
|
|
142
|
+
>
|
|
142
143
|
{ /* Your app content */ }
|
|
143
144
|
</ThemeProvider>
|
|
144
145
|
);
|
|
@@ -152,6 +153,10 @@ The `color` prop accepts an object with the following optional properties:
|
|
|
152
153
|
|
|
153
154
|
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.
|
|
154
155
|
|
|
156
|
+
The `cursor` prop accepts an object with the following optional properties:
|
|
157
|
+
|
|
158
|
+
- `control`: The cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). Accepts `'default'` or `'pointer'` (default: `'pointer'`).
|
|
159
|
+
|
|
155
160
|
The `density` prop controls the spacing scale throughout the UI:
|
|
156
161
|
|
|
157
162
|
- `'default'`: Standard spacing for general use.
|
|
@@ -160,7 +165,7 @@ The `density` prop controls the spacing scale throughout the UI:
|
|
|
160
165
|
|
|
161
166
|
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.
|
|
162
167
|
|
|
163
|
-
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.
|
|
168
|
+
When the `color`, `cursor`, or `density` prop is omitted, the theme inherits the value from the closest parent `ThemeProvider`, or uses the default value if none is inherited.
|
|
164
169
|
|
|
165
170
|
### Nesting Providers
|
|
166
171
|
|
|
@@ -222,12 +227,12 @@ This rule reports an error when a CSS value references a `--wpds-*` custom prope
|
|
|
222
227
|
```css
|
|
223
228
|
/* ✗ Error: '--wpds-unknown-token' is not a valid Design System token */
|
|
224
229
|
.example {
|
|
225
|
-
color: var(--wpds-unknown-token);
|
|
230
|
+
color: var( --wpds-unknown-token );
|
|
226
231
|
}
|
|
227
232
|
|
|
228
233
|
/* ✓ OK */
|
|
229
234
|
.example {
|
|
230
|
-
color: var(--wpds-color-fg-content-neutral);
|
|
235
|
+
color: var( --wpds-color-fg-content-neutral );
|
|
231
236
|
}
|
|
232
237
|
```
|
|
233
238
|
|
|
@@ -259,17 +264,17 @@ This rule reports an error when a `var()` call for a `--wpds-*` token includes a
|
|
|
259
264
|
```css
|
|
260
265
|
/* ✗ Error: Do not add a fallback value for Design System token '--wpds-color-fg-content-neutral' */
|
|
261
266
|
.example {
|
|
262
|
-
color: var(--wpds-color-fg-content-neutral, #1e1e1e);
|
|
267
|
+
color: var( --wpds-color-fg-content-neutral, #1e1e1e );
|
|
263
268
|
}
|
|
264
269
|
|
|
265
270
|
/* ✓ OK */
|
|
266
271
|
.example {
|
|
267
|
-
color: var(--wpds-color-fg-content-neutral);
|
|
272
|
+
color: var( --wpds-color-fg-content-neutral );
|
|
268
273
|
}
|
|
269
274
|
|
|
270
275
|
/* ✓ OK: Non-wpds custom properties are not checked */
|
|
271
276
|
.example {
|
|
272
|
-
color: var(--my-custom-color, red);
|
|
277
|
+
color: var( --my-custom-color, red );
|
|
273
278
|
}
|
|
274
279
|
```
|
|
275
280
|
|
|
@@ -281,11 +286,11 @@ This package provides build plugins that inject fallback values into bare `var(-
|
|
|
281
286
|
|
|
282
287
|
Three plugin variants are available, covering common build tool setups:
|
|
283
288
|
|
|
284
|
-
| Export
|
|
285
|
-
|
|
|
286
|
-
| `@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks`
|
|
287
|
-
| `@wordpress/theme/esbuild-plugins/esbuild-ds-token-fallbacks`
|
|
288
|
-
| `@wordpress/theme/vite-plugins/vite-ds-token-fallbacks`
|
|
289
|
+
| Export | Tool | Scope |
|
|
290
|
+
| ------------------------------------------------------------- | ------- | ----- |
|
|
291
|
+
| `@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks` | PostCSS | CSS |
|
|
292
|
+
| `@wordpress/theme/esbuild-plugins/esbuild-ds-token-fallbacks` | esbuild | JS/TS |
|
|
293
|
+
| `@wordpress/theme/vite-plugins/vite-ds-token-fallbacks` | Vite | JS/TS |
|
|
289
294
|
|
|
290
295
|
All three plugins skip files that don't contain `--wpds-` references, so there is zero overhead on unrelated modules.
|
|
291
296
|
|
package/build/context.cjs
CHANGED
|
@@ -25,7 +25,8 @@ module.exports = __toCommonJS(context_exports);
|
|
|
25
25
|
var import_element = require("@wordpress/element");
|
|
26
26
|
var ThemeContext = (0, import_element.createContext)({
|
|
27
27
|
resolvedSettings: {
|
|
28
|
-
color: {}
|
|
28
|
+
color: {},
|
|
29
|
+
cursor: void 0
|
|
29
30
|
}
|
|
30
31
|
});
|
|
31
32
|
// Annotate the CommonJS export names for ESM import in node:
|
package/build/context.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/context.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeProviderSettings } from './types';\n\ninterface ThemeContextType {\n\tresolvedSettings: ThemeProviderSettings;\n}\n\nexport const ThemeContext = createContext< ThemeContextType >( {\n\tresolvedSettings: {\n\t\tcolor: {},\n\t},\n} );\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAWvB,IAAM,mBAAe,8BAAmC;AAAA,EAC9D,kBAAkB;AAAA,IACjB,OAAO,CAAC;AAAA,EACT;AACD,CAAE;",
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeProviderSettings } from './types';\n\ninterface ThemeContextType {\n\tresolvedSettings: ThemeProviderSettings;\n}\n\nexport const ThemeContext = createContext< ThemeContextType >( {\n\tresolvedSettings: {\n\t\tcolor: {},\n\t\tcursor: undefined,\n\t},\n} );\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAWvB,IAAM,mBAAe,8BAAmC;AAAA,EAC9D,kBAAkB;AAAA,IACjB,OAAO,CAAC;AAAA,IACR,QAAQ;AAAA,EACT;AACD,CAAE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -120,7 +120,7 @@ var design_token_fallbacks_default = {
|
|
|
120
120
|
"--wpds-color-stroke-surface-success-strong": "#007f30",
|
|
121
121
|
"--wpds-color-stroke-surface-warning": "#d0b381",
|
|
122
122
|
"--wpds-color-stroke-surface-warning-strong": "#926300",
|
|
123
|
-
"--wpds-cursor-control": "
|
|
123
|
+
"--wpds-cursor-control": "pointer",
|
|
124
124
|
"--wpds-dimension-base": "4px",
|
|
125
125
|
"--wpds-dimension-gap-2xl": "32px",
|
|
126
126
|
"--wpds-dimension-gap-3xl": "40px",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/prebuilt/js/design-token-fallbacks.mjs"],
|
|
4
|
-
"sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-ds-token-fallbacks plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'--wpds-border-radius-lg': '8px',\n\t'--wpds-border-radius-md': '4px',\n\t'--wpds-border-radius-sm': '2px',\n\t'--wpds-border-radius-xs': '1px',\n\t'--wpds-border-width-focus': 'var(--wp-admin-border-width-focus, 2px)',\n\t'--wpds-border-width-lg': '8px',\n\t'--wpds-border-width-md': '4px',\n\t'--wpds-border-width-sm': '2px',\n\t'--wpds-border-width-xs': '1px',\n\t'--wpds-color-bg-interactive-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-interactive-brand-strong-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',\n\t'--wpds-color-bg-interactive-brand-weak': '#00000000',\n\t'--wpds-color-bg-interactive-brand-weak-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',\n\t'--wpds-color-bg-interactive-error': '#00000000',\n\t'--wpds-color-bg-interactive-error-active': '#fff6f4',\n\t'--wpds-color-bg-interactive-error-strong': '#cc1818',\n\t'--wpds-color-bg-interactive-error-strong-active': '#b90000',\n\t'--wpds-color-bg-interactive-error-weak': '#00000000',\n\t'--wpds-color-bg-interactive-error-weak-active': '#f6e6e3',\n\t'--wpds-color-bg-interactive-neutral-strong': '#2d2d2d',\n\t'--wpds-color-bg-interactive-neutral-strong-active': '#1e1e1e',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled': '#e2e2e2',\n\t'--wpds-color-bg-interactive-neutral-weak': '#00000000',\n\t'--wpds-color-bg-interactive-neutral-weak-active': '#eaeaea',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled': '#00000000',\n\t'--wpds-color-bg-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',\n\t'--wpds-color-bg-surface-caution': '#fee994',\n\t'--wpds-color-bg-surface-caution-weak': '#fff9c9',\n\t'--wpds-color-bg-surface-error': '#f6e6e3',\n\t'--wpds-color-bg-surface-error-weak': '#fff6f4',\n\t'--wpds-color-bg-surface-info': '#deebfa',\n\t'--wpds-color-bg-surface-info-weak': '#f2f9ff',\n\t'--wpds-color-bg-surface-neutral': '#f8f8f8',\n\t'--wpds-color-bg-surface-neutral-strong': '#ffffff',\n\t'--wpds-color-bg-surface-neutral-weak': '#f0f0f0',\n\t'--wpds-color-bg-surface-success': '#c5f7cc',\n\t'--wpds-color-bg-surface-success-weak': '#eaffed',\n\t'--wpds-color-bg-surface-warning': '#fde6bd',\n\t'--wpds-color-bg-surface-warning-weak': '#fff7e0',\n\t'--wpds-color-bg-thumb-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-bg-thumb-neutral-weak': '#8a8a8a',\n\t'--wpds-color-bg-thumb-neutral-weak-active': '#6c6c6c',\n\t'--wpds-color-bg-track-neutral': '#d8d8d8',\n\t'--wpds-color-bg-track-neutral-weak': '#e0e0e0',\n\t'--wpds-color-fg-content-caution': '#281d00',\n\t'--wpds-color-fg-content-caution-weak': '#826a00',\n\t'--wpds-color-fg-content-error': '#470000',\n\t'--wpds-color-fg-content-error-weak': '#cc1818',\n\t'--wpds-color-fg-content-info': '#001b4f',\n\t'--wpds-color-fg-content-info-weak': '#006bd7',\n\t'--wpds-color-fg-content-neutral': '#1e1e1e',\n\t'--wpds-color-fg-content-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-content-success': '#002900',\n\t'--wpds-color-fg-content-success-weak': '#007f30',\n\t'--wpds-color-fg-content-warning': '#2e1900',\n\t'--wpds-color-fg-content-warning-weak': '#926300',\n\t'--wpds-color-fg-interactive-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-strong': '#fff',\n\t'--wpds-color-fg-interactive-brand-strong-active': '#fff',\n\t'--wpds-color-fg-interactive-error': '#cc1818',\n\t'--wpds-color-fg-interactive-error-active': '#cc1818',\n\t'--wpds-color-fg-interactive-error-strong': '#f2efef',\n\t'--wpds-color-fg-interactive-error-strong-active': '#f2efef',\n\t'--wpds-color-fg-interactive-neutral': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-active': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-strong': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-active': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled': '#8a8a8a',\n\t'--wpds-color-stroke-focus-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',\n\t'--wpds-color-stroke-interactive-error': '#cc1818',\n\t'--wpds-color-stroke-interactive-error-active': '#9d0000',\n\t'--wpds-color-stroke-interactive-error-strong': '#cc1818',\n\t'--wpds-color-stroke-interactive-neutral': '#8a8a8a',\n\t'--wpds-color-stroke-interactive-neutral-active': '#6c6c6c',\n\t'--wpds-color-stroke-interactive-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-stroke-interactive-neutral-strong': '#6c6c6c',\n\t'--wpds-color-stroke-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white)',\n\t'--wpds-color-stroke-surface-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-surface-error': '#daa39b',\n\t'--wpds-color-stroke-surface-error-strong': '#cc1818',\n\t'--wpds-color-stroke-surface-info': '#9fbcdc',\n\t'--wpds-color-stroke-surface-info-strong': '#006bd7',\n\t'--wpds-color-stroke-surface-neutral': '#d8d8d8',\n\t'--wpds-color-stroke-surface-neutral-strong': '#8a8a8a',\n\t'--wpds-color-stroke-surface-neutral-weak': '#e0e0e0',\n\t'--wpds-color-stroke-surface-success': '#8ac894',\n\t'--wpds-color-stroke-surface-success-strong': '#007f30',\n\t'--wpds-color-stroke-surface-warning': '#d0b381',\n\t'--wpds-color-stroke-surface-warning-strong': '#926300',\n\t'--wpds-cursor-control': '
|
|
4
|
+
"sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-ds-token-fallbacks plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'--wpds-border-radius-lg': '8px',\n\t'--wpds-border-radius-md': '4px',\n\t'--wpds-border-radius-sm': '2px',\n\t'--wpds-border-radius-xs': '1px',\n\t'--wpds-border-width-focus': 'var(--wp-admin-border-width-focus, 2px)',\n\t'--wpds-border-width-lg': '8px',\n\t'--wpds-border-width-md': '4px',\n\t'--wpds-border-width-sm': '2px',\n\t'--wpds-border-width-xs': '1px',\n\t'--wpds-color-bg-interactive-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-interactive-brand-strong-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',\n\t'--wpds-color-bg-interactive-brand-weak': '#00000000',\n\t'--wpds-color-bg-interactive-brand-weak-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',\n\t'--wpds-color-bg-interactive-error': '#00000000',\n\t'--wpds-color-bg-interactive-error-active': '#fff6f4',\n\t'--wpds-color-bg-interactive-error-strong': '#cc1818',\n\t'--wpds-color-bg-interactive-error-strong-active': '#b90000',\n\t'--wpds-color-bg-interactive-error-weak': '#00000000',\n\t'--wpds-color-bg-interactive-error-weak-active': '#f6e6e3',\n\t'--wpds-color-bg-interactive-neutral-strong': '#2d2d2d',\n\t'--wpds-color-bg-interactive-neutral-strong-active': '#1e1e1e',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled': '#e2e2e2',\n\t'--wpds-color-bg-interactive-neutral-weak': '#00000000',\n\t'--wpds-color-bg-interactive-neutral-weak-active': '#eaeaea',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled': '#00000000',\n\t'--wpds-color-bg-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',\n\t'--wpds-color-bg-surface-caution': '#fee994',\n\t'--wpds-color-bg-surface-caution-weak': '#fff9c9',\n\t'--wpds-color-bg-surface-error': '#f6e6e3',\n\t'--wpds-color-bg-surface-error-weak': '#fff6f4',\n\t'--wpds-color-bg-surface-info': '#deebfa',\n\t'--wpds-color-bg-surface-info-weak': '#f2f9ff',\n\t'--wpds-color-bg-surface-neutral': '#f8f8f8',\n\t'--wpds-color-bg-surface-neutral-strong': '#ffffff',\n\t'--wpds-color-bg-surface-neutral-weak': '#f0f0f0',\n\t'--wpds-color-bg-surface-success': '#c5f7cc',\n\t'--wpds-color-bg-surface-success-weak': '#eaffed',\n\t'--wpds-color-bg-surface-warning': '#fde6bd',\n\t'--wpds-color-bg-surface-warning-weak': '#fff7e0',\n\t'--wpds-color-bg-thumb-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-bg-thumb-neutral-weak': '#8a8a8a',\n\t'--wpds-color-bg-thumb-neutral-weak-active': '#6c6c6c',\n\t'--wpds-color-bg-track-neutral': '#d8d8d8',\n\t'--wpds-color-bg-track-neutral-weak': '#e0e0e0',\n\t'--wpds-color-fg-content-caution': '#281d00',\n\t'--wpds-color-fg-content-caution-weak': '#826a00',\n\t'--wpds-color-fg-content-error': '#470000',\n\t'--wpds-color-fg-content-error-weak': '#cc1818',\n\t'--wpds-color-fg-content-info': '#001b4f',\n\t'--wpds-color-fg-content-info-weak': '#006bd7',\n\t'--wpds-color-fg-content-neutral': '#1e1e1e',\n\t'--wpds-color-fg-content-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-content-success': '#002900',\n\t'--wpds-color-fg-content-success-weak': '#007f30',\n\t'--wpds-color-fg-content-warning': '#2e1900',\n\t'--wpds-color-fg-content-warning-weak': '#926300',\n\t'--wpds-color-fg-interactive-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-strong': '#fff',\n\t'--wpds-color-fg-interactive-brand-strong-active': '#fff',\n\t'--wpds-color-fg-interactive-error': '#cc1818',\n\t'--wpds-color-fg-interactive-error-active': '#cc1818',\n\t'--wpds-color-fg-interactive-error-strong': '#f2efef',\n\t'--wpds-color-fg-interactive-error-strong-active': '#f2efef',\n\t'--wpds-color-fg-interactive-neutral': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-active': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-strong': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-active': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled': '#8a8a8a',\n\t'--wpds-color-stroke-focus-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',\n\t'--wpds-color-stroke-interactive-error': '#cc1818',\n\t'--wpds-color-stroke-interactive-error-active': '#9d0000',\n\t'--wpds-color-stroke-interactive-error-strong': '#cc1818',\n\t'--wpds-color-stroke-interactive-neutral': '#8a8a8a',\n\t'--wpds-color-stroke-interactive-neutral-active': '#6c6c6c',\n\t'--wpds-color-stroke-interactive-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-stroke-interactive-neutral-strong': '#6c6c6c',\n\t'--wpds-color-stroke-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white)',\n\t'--wpds-color-stroke-surface-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-surface-error': '#daa39b',\n\t'--wpds-color-stroke-surface-error-strong': '#cc1818',\n\t'--wpds-color-stroke-surface-info': '#9fbcdc',\n\t'--wpds-color-stroke-surface-info-strong': '#006bd7',\n\t'--wpds-color-stroke-surface-neutral': '#d8d8d8',\n\t'--wpds-color-stroke-surface-neutral-strong': '#8a8a8a',\n\t'--wpds-color-stroke-surface-neutral-weak': '#e0e0e0',\n\t'--wpds-color-stroke-surface-success': '#8ac894',\n\t'--wpds-color-stroke-surface-success-strong': '#007f30',\n\t'--wpds-color-stroke-surface-warning': '#d0b381',\n\t'--wpds-color-stroke-surface-warning-strong': '#926300',\n\t'--wpds-cursor-control': 'pointer',\n\t'--wpds-dimension-base': '4px',\n\t'--wpds-dimension-gap-2xl': '32px',\n\t'--wpds-dimension-gap-3xl': '40px',\n\t'--wpds-dimension-gap-lg': '16px',\n\t'--wpds-dimension-gap-md': '12px',\n\t'--wpds-dimension-gap-sm': '8px',\n\t'--wpds-dimension-gap-xl': '24px',\n\t'--wpds-dimension-gap-xs': '4px',\n\t'--wpds-dimension-padding-2xl': '24px',\n\t'--wpds-dimension-padding-3xl': '32px',\n\t'--wpds-dimension-padding-lg': '16px',\n\t'--wpds-dimension-padding-md': '12px',\n\t'--wpds-dimension-padding-sm': '8px',\n\t'--wpds-dimension-padding-xl': '20px',\n\t'--wpds-dimension-padding-xs': '4px',\n\t'--wpds-dimension-surface-width-2xl': '960px',\n\t'--wpds-dimension-surface-width-lg': '560px',\n\t'--wpds-dimension-surface-width-md': '400px',\n\t'--wpds-dimension-surface-width-sm': '320px',\n\t'--wpds-dimension-surface-width-xl': '720px',\n\t'--wpds-dimension-surface-width-xs': '240px',\n\t'--wpds-elevation-lg':\n\t\t'0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005',\n\t'--wpds-elevation-md':\n\t\t'0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005',\n\t'--wpds-elevation-sm':\n\t\t'0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005',\n\t'--wpds-elevation-xs':\n\t\t'0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003',\n\t'--wpds-font-family-body':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-heading':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-mono': '\"Menlo\", \"Consolas\", monaco, monospace',\n\t'--wpds-font-line-height-2xl': '40px',\n\t'--wpds-font-line-height-lg': '28px',\n\t'--wpds-font-line-height-md': '24px',\n\t'--wpds-font-line-height-sm': '20px',\n\t'--wpds-font-line-height-xl': '32px',\n\t'--wpds-font-line-height-xs': '16px',\n\t'--wpds-font-size-2xl': '32px',\n\t'--wpds-font-size-lg': '15px',\n\t'--wpds-font-size-md': '13px',\n\t'--wpds-font-size-sm': '12px',\n\t'--wpds-font-size-xl': '20px',\n\t'--wpds-font-size-xs': '11px',\n\t'--wpds-font-weight-medium': '499',\n\t'--wpds-font-weight-regular': '400',\n};\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build/theme-provider.cjs
CHANGED
|
@@ -27,9 +27,9 @@ var import_context = require("./context.cjs");
|
|
|
27
27
|
var import_use_theme_provider_styles = require("./use-theme-provider-styles.cjs");
|
|
28
28
|
|
|
29
29
|
// packages/theme/src/style.module.css
|
|
30
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
30
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='f4e6e06c6a']")) {
|
|
31
31
|
const style = document.createElement("style");
|
|
32
|
-
style.setAttribute("data-wp-hash", "
|
|
32
|
+
style.setAttribute("data-wp-hash", "f4e6e06c6a");
|
|
33
33
|
style.appendChild(document.createTextNode(".dba930ea7a9438fd__root{display:contents}"));
|
|
34
34
|
document.head.appendChild(style);
|
|
35
35
|
}
|
|
@@ -58,12 +58,14 @@ function generateCSSSelector({
|
|
|
58
58
|
var ThemeProvider = ({
|
|
59
59
|
children,
|
|
60
60
|
color = {},
|
|
61
|
+
cursor,
|
|
61
62
|
isRoot = false,
|
|
62
63
|
density
|
|
63
64
|
}) => {
|
|
64
65
|
const instanceId = (0, import_element.useId)();
|
|
65
66
|
const { themeProviderStyles, resolvedSettings } = (0, import_use_theme_provider_styles.useThemeProviderStyles)({
|
|
66
|
-
color
|
|
67
|
+
color,
|
|
68
|
+
cursor
|
|
67
69
|
});
|
|
68
70
|
const contextValue = (0, import_element.useMemo)(
|
|
69
71
|
() => ({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/theme-provider.tsx", "../src/style.module.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useId } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport { useThemeProviderStyles } from './use-theme-provider-styles';\nimport { type ThemeProviderProps } from './types';\nimport styles from './style.module.css';\n\nfunction cssObjectToText( values: CSSProperties ) {\n\treturn Object.entries( values )\n\t\t.map( ( [ key, value ] ) => `${ key }: ${ value };` )\n\t\t.join( '' );\n}\n\nfunction generateCSSSelector( {\n\tinstanceId,\n\tisRoot,\n}: {\n\tinstanceId: string;\n\tisRoot: boolean;\n} ) {\n\tconst rootSel = `[data-wpds-root-provider=\"true\"]`;\n\tconst instanceIdSel = `[data-wpds-theme-provider-id=\"${ instanceId }\"]`;\n\n\tconst selectors = [];\n\n\tif ( isRoot ) {\n\t\tselectors.push(\n\t\t\t`:root:has(.${ styles.root }${ rootSel }${ instanceIdSel })`\n\t\t);\n\t}\n\n\tselectors.push( `.${ styles.root }.${ styles.root }${ instanceIdSel }` );\n\n\treturn selectors.join( ',' );\n}\n\nexport const ThemeProvider = ( {\n\tchildren,\n\tcolor = {},\n\tisRoot = false,\n\tdensity,\n}: ThemeProviderProps ) => {\n\tconst instanceId = useId();\n\n\tconst { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {\n\t\tcolor,\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tresolvedSettings,\n\t\t} ),\n\t\t[ resolvedSettings ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ themeProviderStyles ? (\n\t\t\t\t<style>\n\t\t\t\t\t{ `${ generateCSSSelector( {\n\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\tisRoot,\n\t\t\t\t\t} ) } {${ cssObjectToText( themeProviderStyles ) }}` }\n\t\t\t\t</style>\n\t\t\t) : null }\n\t\t\t<div\n\t\t\t\tdata-wpds-theme-provider-id={ instanceId }\n\t\t\t\tdata-wpds-root-provider={ isRoot }\n\t\t\t\tdata-wpds-density={ density }\n\t\t\t\tclassName={ styles.root }\n\t\t\t>\n\t\t\t\t<ThemeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</ThemeContext.Provider>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA+B;AAK/B,qBAA6B;AAC7B,uCAAuC;;;ACdvC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,2CAA2C,CAAC;AACtF,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,yBAAwB;;;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useId } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport { useThemeProviderStyles } from './use-theme-provider-styles';\nimport { type ThemeProviderProps } from './types';\nimport styles from './style.module.css';\n\nfunction cssObjectToText( values: CSSProperties ) {\n\treturn Object.entries( values )\n\t\t.map( ( [ key, value ] ) => `${ key }: ${ value };` )\n\t\t.join( '' );\n}\n\nfunction generateCSSSelector( {\n\tinstanceId,\n\tisRoot,\n}: {\n\tinstanceId: string;\n\tisRoot: boolean;\n} ) {\n\tconst rootSel = `[data-wpds-root-provider=\"true\"]`;\n\tconst instanceIdSel = `[data-wpds-theme-provider-id=\"${ instanceId }\"]`;\n\n\tconst selectors = [];\n\n\tif ( isRoot ) {\n\t\tselectors.push(\n\t\t\t`:root:has(.${ styles.root }${ rootSel }${ instanceIdSel })`\n\t\t);\n\t}\n\n\tselectors.push( `.${ styles.root }.${ styles.root }${ instanceIdSel }` );\n\n\treturn selectors.join( ',' );\n}\n\nexport const ThemeProvider = ( {\n\tchildren,\n\tcolor = {},\n\tcursor,\n\tisRoot = false,\n\tdensity,\n}: ThemeProviderProps ) => {\n\tconst instanceId = useId();\n\n\tconst { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {\n\t\tcolor,\n\t\tcursor,\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tresolvedSettings,\n\t\t} ),\n\t\t[ resolvedSettings ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ themeProviderStyles ? (\n\t\t\t\t<style>\n\t\t\t\t\t{ `${ generateCSSSelector( {\n\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\tisRoot,\n\t\t\t\t\t} ) } {${ cssObjectToText( themeProviderStyles ) }}` }\n\t\t\t\t</style>\n\t\t\t) : null }\n\t\t\t<div\n\t\t\t\tdata-wpds-theme-provider-id={ instanceId }\n\t\t\t\tdata-wpds-root-provider={ isRoot }\n\t\t\t\tdata-wpds-density={ density }\n\t\t\t\tclassName={ styles.root }\n\t\t\t>\n\t\t\t\t<ThemeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</ThemeContext.Provider>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='f4e6e06c6a']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"f4e6e06c6a\");\n\tstyle.appendChild(document.createTextNode(\".dba930ea7a9438fd__root{display:contents}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"dba930ea7a9438fd__root\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA+B;AAK/B,qBAA6B;AAC7B,uCAAuC;;;ACdvC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,2CAA2C,CAAC;AACtF,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,yBAAwB;;;AD+D7C;AAnDF,SAAS,gBAAiB,QAAwB;AACjD,SAAO,OAAO,QAAS,MAAO,EAC5B,IAAK,CAAE,CAAE,KAAK,KAAM,MAAO,GAAI,GAAI,KAAM,KAAM,GAAI,EACnD,KAAM,EAAG;AACZ;AAEA,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AACD,GAGI;AACH,QAAM,UAAU;AAChB,QAAM,gBAAgB,iCAAkC,UAAW;AAEnE,QAAM,YAAY,CAAC;AAEnB,MAAK,QAAS;AACb,cAAU;AAAA,MACT,cAAe,cAAO,IAAK,GAAI,OAAQ,GAAI,aAAc;AAAA,IAC1D;AAAA,EACD;AAEA,YAAU,KAAM,IAAK,cAAO,IAAK,IAAK,cAAO,IAAK,GAAI,aAAc,EAAG;AAEvE,SAAO,UAAU,KAAM,GAAI;AAC5B;AAEO,IAAM,gBAAgB,CAAE;AAAA,EAC9B;AAAA,EACA,QAAQ,CAAC;AAAA,EACT;AAAA,EACA,SAAS;AAAA,EACT;AACD,MAA2B;AAC1B,QAAM,iBAAa,sBAAM;AAEzB,QAAM,EAAE,qBAAqB,iBAAiB,QAAI,yDAAwB;AAAA,IACzE;AAAA,IACA;AAAA,EACD,CAAE;AAEF,QAAM,mBAAe;AAAA,IACpB,OAAQ;AAAA,MACP;AAAA,IACD;AAAA,IACA,CAAE,gBAAiB;AAAA,EACpB;AAEA,SACC,4EACG;AAAA,0BACD,4CAAC,WACE,aAAI,oBAAqB;AAAA,MAC1B;AAAA,MACA;AAAA,IACD,CAAE,CAAE,KAAM,gBAAiB,mBAAoB,CAAE,KAClD,IACG;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACA,+BAA8B;AAAA,QAC9B,2BAA0B;AAAA,QAC1B,qBAAoB;AAAA,QACpB,WAAY,cAAO;AAAA,QAEnB,sDAAC,4BAAa,UAAb,EAAsB,OAAQ,cAC5B,UACH;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build/types.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/types.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { type ReactNode } from 'react';\n\nexport interface ThemeProviderSettings {\n\t/**\n\t * The set of color options to apply to the theme.\n\t */\n\tcolor?: {\n\t\t/**\n\t\t * The primary seed color to use for the theme.\n\t\t *\n\t\t * By default, it inherits from parent `ThemeProvider`,\n\t\t * and fallbacks to statically built CSS.\n\t\t */\n\t\tprimary?: string;\n\t\t/**\n\t\t * The background seed color to use for the theme.\n\t\t *\n\t\t * By default, it inherits from parent `ThemeProvider`,\n\t\t * and fallbacks to statically built CSS.\n\t\t */\n\t\tbg?: string;\n\t};\n\n\t/**\n\t * The density of the theme. If left unspecified, the theme inherits from\n\t * the density of the closest `ThemeProvider`, or uses the default density\n\t * if there is no inherited density.\n\t *\n\t * @default undefined\n\t */\n\tdensity?: undefined | 'default' | 'compact' | 'comfortable';\n}\n\nexport interface ThemeProviderProps extends ThemeProviderSettings {\n\t/**\n\t * The children to render.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * When a ThemeProvider is the root provider, it will apply its theming\n\t * settings also to the root document element (e.g. the html element).\n\t * This is useful, for example, to make sure that the `html` element can\n\t * consume the right background color, or that overlays rendered inside a\n\t * portal can inherit the correct color scheme.\n\t *\n\t * @default false\n\t */\n\tisRoot?: boolean;\n}\n"],
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { type ReactNode } from 'react';\n\nexport interface ThemeProviderSettings {\n\t/**\n\t * The set of color options to apply to the theme.\n\t */\n\tcolor?: {\n\t\t/**\n\t\t * The primary seed color to use for the theme.\n\t\t *\n\t\t * By default, it inherits from parent `ThemeProvider`,\n\t\t * and fallbacks to statically built CSS.\n\t\t */\n\t\tprimary?: string;\n\t\t/**\n\t\t * The background seed color to use for the theme.\n\t\t *\n\t\t * By default, it inherits from parent `ThemeProvider`,\n\t\t * and fallbacks to statically built CSS.\n\t\t */\n\t\tbg?: string;\n\t};\n\n\t/**\n\t * The set of cursor options to apply to the theme.\n\t */\n\tcursor?: {\n\t\t/**\n\t\t * The cursor style for interactive controls that are not links\n\t\t * (e.g. buttons, checkboxes, and toggles).\n\t\t *\n\t\t * By default, it inherits from the parent `ThemeProvider`,\n\t\t * and falls back to the prebuilt default (`default`).\n\t\t */\n\t\tcontrol?: 'default' | 'pointer';\n\t};\n\n\t/**\n\t * The density of the theme. If left unspecified, the theme inherits from\n\t * the density of the closest `ThemeProvider`, or uses the default density\n\t * if there is no inherited density.\n\t *\n\t * @default undefined\n\t */\n\tdensity?: undefined | 'default' | 'compact' | 'comfortable';\n}\n\nexport interface ThemeProviderProps extends ThemeProviderSettings {\n\t/**\n\t * The children to render.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * When a ThemeProvider is the root provider, it will apply its theming\n\t * settings also to the root document element (e.g. the html element).\n\t * This is useful, for example, to make sure that the `html` element can\n\t * consume the right background color, or that overlays rendered inside a\n\t * portal can inherit the correct color scheme.\n\t *\n\t * @default false\n\t */\n\tisRoot?: boolean;\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -159,21 +159,24 @@ function generateStyles({
|
|
|
159
159
|
);
|
|
160
160
|
}
|
|
161
161
|
function useThemeProviderStyles({
|
|
162
|
-
color = {}
|
|
162
|
+
color = {},
|
|
163
|
+
cursor
|
|
163
164
|
} = {}) {
|
|
164
165
|
const { resolvedSettings: inheritedSettings } = (0, import_element.useContext)(import_context.ThemeContext);
|
|
165
166
|
const primary = color.primary ?? inheritedSettings.color?.primary ?? import_color_ramps.DEFAULT_SEED_COLORS.primary;
|
|
166
167
|
const bg = color.bg ?? inheritedSettings.color?.bg ?? import_color_ramps.DEFAULT_SEED_COLORS.bg;
|
|
168
|
+
const cursorControl = cursor?.control ?? inheritedSettings.cursor?.control;
|
|
167
169
|
const resolvedSettings = (0, import_element.useMemo)(
|
|
168
170
|
() => ({
|
|
169
171
|
color: {
|
|
170
172
|
primary,
|
|
171
173
|
bg
|
|
172
|
-
}
|
|
174
|
+
},
|
|
175
|
+
cursor: cursorControl ? { control: cursorControl } : void 0
|
|
173
176
|
}),
|
|
174
|
-
[primary, bg]
|
|
177
|
+
[primary, bg, cursorControl]
|
|
175
178
|
);
|
|
176
|
-
const
|
|
179
|
+
const colorStyles = (0, import_element.useMemo)(() => {
|
|
177
180
|
const seeds = {
|
|
178
181
|
...import_color_ramps.DEFAULT_SEED_COLORS,
|
|
179
182
|
bg,
|
|
@@ -196,6 +199,15 @@ function useThemeProviderStyles({
|
|
|
196
199
|
computedColorRamps
|
|
197
200
|
});
|
|
198
201
|
}, [primary, bg]);
|
|
202
|
+
const themeProviderStyles = (0, import_element.useMemo)(
|
|
203
|
+
() => ({
|
|
204
|
+
...colorStyles,
|
|
205
|
+
...cursorControl && {
|
|
206
|
+
"--wpds-cursor-control": cursorControl
|
|
207
|
+
}
|
|
208
|
+
}),
|
|
209
|
+
[colorStyles, cursorControl]
|
|
210
|
+
);
|
|
199
211
|
return {
|
|
200
212
|
resolvedSettings,
|
|
201
213
|
themeProviderStyles
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/use-theme-provider-styles.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\nimport {\n\tclone,\n\tset,\n\tto,\n\tsRGB,\n\tHSL,\n\ttype PlainColorObject,\n} from 'colorjs.io/fn';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport './color-ramps/lib/register-color-spaces';\nimport { ThemeContext } from './context';\nimport colorTokens from './prebuilt/ts/color-tokens';\nimport {\n\tbuildBgRamp,\n\tbuildAccentRamp,\n\tDEFAULT_SEED_COLORS,\n\ttype RampResult,\n} from './color-ramps';\nimport { getColorString } from './color-ramps/lib/color-utils';\nimport type { ThemeProviderProps } from './types';\n\ntype Entry = [ string, string ];\n\nconst getCachedBgRamp = memoize( buildBgRamp, { maxSize: 10 } );\nconst getCachedAccentRamp = memoize( buildAccentRamp, { maxSize: 10 } );\n\nconst legacyWpComponentsOverridesCSS: Entry[] = [\n\t[ '--wp-components-color-accent', 'var(--wp-admin-theme-color)' ],\n\t[\n\t\t'--wp-components-color-accent-darker-10',\n\t\t'var(--wp-admin-theme-color-darker-10)',\n\t],\n\t[\n\t\t'--wp-components-color-accent-darker-20',\n\t\t'var(--wp-admin-theme-color-darker-20)',\n\t],\n\t[\n\t\t'--wp-components-color-accent-inverted',\n\t\t'var(--wpds-color-fg-interactive-brand-strong, #fff)',\n\t],\n\t[\n\t\t'--wp-components-color-background',\n\t\t'var(--wpds-color-bg-surface-neutral-strong, #ffffff)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground',\n\t\t'var(--wpds-color-fg-content-neutral, #1e1e1e)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground-inverted',\n\t\t'var(--wpds-color-bg-surface-neutral, #f8f8f8)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-100',\n\t\t'var(--wpds-color-bg-surface-neutral, #f8f8f8)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-200',\n\t\t'var(--wpds-color-stroke-surface-neutral, #d8d8d8)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-300',\n\t\t'var(--wpds-color-stroke-surface-neutral, #d8d8d8)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-400',\n\t\t'var(--wpds-color-stroke-interactive-neutral, #8a8a8a)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-600',\n\t\t'var(--wpds-color-stroke-interactive-neutral, #8a8a8a)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-700',\n\t\t'var(--wpds-color-fg-content-neutral-weak, #6d6d6d)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-800',\n\t\t'var(--wpds-color-fg-content-neutral, #1e1e1e)',\n\t],\n];\n\nfunction customRgbFormat( color: PlainColorObject ): string {\n\tconst rgb = to( color, sRGB );\n\treturn rgb.coords\n\t\t.map( ( n ) => Math.round( ( n ?? 0 ) * 255 ) )\n\t\t.join( ', ' );\n}\n\nfunction legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {\n\tconst parsedAccent = to( accent, HSL );\n\tconst parsedL = parsedAccent.coords[ 2 ] ?? 0;\n\n\t// Create darker version of accent \u2014\n\tconst darker10 = set(\n\t\tclone( parsedAccent ),\n\t\t[ HSL, 'l' ],\n\t\tMath.max( 0, parsedL - 5 ) // L reduced by 5%\n\t);\n\tconst darker20 = set(\n\t\tclone( parsedAccent ),\n\t\t[ HSL, 'l' ],\n\t\tMath.max( 0, parsedL - 10 ) // L reduced by 10%\n\t);\n\n\treturn [\n\t\t[ '--wp-admin-theme-color', getColorString( parsedAccent ) ],\n\t\t[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],\n\t\t[ '--wp-admin-theme-color-darker-10', getColorString( darker10 ) ],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-10--rgb',\n\t\t\tcustomRgbFormat( darker10 ),\n\t\t],\n\t\t[ '--wp-admin-theme-color-darker-20', getColorString( darker20 ) ],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-20--rgb',\n\t\t\tcustomRgbFormat( darker20 ),\n\t\t],\n\t];\n}\n\nfunction colorTokensCSS(\n\tcomputedColorRamps: Map< string, RampResult >\n): Entry[] {\n\tconst entries: Entry[] = [];\n\n\tfor ( const [ rampName, { ramp } ] of computedColorRamps ) {\n\t\tfor ( const [ tokenName, tokenValue ] of Object.entries( ramp ) ) {\n\t\t\tconst key = `${ rampName }-${ tokenName }`;\n\t\t\tconst aliasedBy = colorTokens[ key ] ?? [];\n\t\t\tfor ( const aliasedId of aliasedBy ) {\n\t\t\t\tentries.push( [ `--wpds-color-${ aliasedId }`, tokenValue ] );\n\t\t\t}\n\t\t}\n\t}\n\n\treturn entries;\n}\n\nfunction generateStyles( {\n\tprimary,\n\tcomputedColorRamps,\n}: {\n\tprimary: string;\n\tcomputedColorRamps: Map< string, RampResult >;\n} ): CSSProperties {\n\treturn Object.fromEntries(\n\t\t[\n\t\t\t// Semantic color tokens\n\t\t\tcolorTokensCSS( computedColorRamps ),\n\t\t\t// Legacy overrides\n\t\t\tlegacyWpAdminThemeOverridesCSS( primary ),\n\t\t\tlegacyWpComponentsOverridesCSS,\n\t\t].flat()\n\t);\n}\n\nexport function useThemeProviderStyles( {\n\tcolor = {},\n}: {\n\tcolor?: ThemeProviderProps[ 'color' ];\n} = {} ) {\n\tconst { resolvedSettings: inheritedSettings } = useContext( ThemeContext );\n\n\t// Compute settings:\n\t// - used provided prop value;\n\t// - otherwise, use inherited value from parent instance;\n\t// - otherwise, use fallback value (where applicable).\n\tconst primary =\n\t\tcolor.primary ??\n\t\tinheritedSettings.color?.primary ??\n\t\tDEFAULT_SEED_COLORS.primary;\n\tconst bg =\n\t\tcolor.bg ?? inheritedSettings.color?.bg ?? DEFAULT_SEED_COLORS.bg;\n\n\tconst resolvedSettings = useMemo(\n\t\t() => ( {\n\t\t\tcolor: {\n\t\t\t\tprimary,\n\t\t\t\tbg,\n\t\t\t},\n\t\t} ),\n\t\t[ primary, bg ]\n\t);\n\n\tconst
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\nimport {\n\tclone,\n\tset,\n\tto,\n\tsRGB,\n\tHSL,\n\ttype PlainColorObject,\n} from 'colorjs.io/fn';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport './color-ramps/lib/register-color-spaces';\nimport { ThemeContext } from './context';\nimport colorTokens from './prebuilt/ts/color-tokens';\nimport {\n\tbuildBgRamp,\n\tbuildAccentRamp,\n\tDEFAULT_SEED_COLORS,\n\ttype RampResult,\n} from './color-ramps';\nimport { getColorString } from './color-ramps/lib/color-utils';\nimport type { ThemeProviderProps } from './types';\n\ntype Entry = [ string, string ];\n\nconst getCachedBgRamp = memoize( buildBgRamp, { maxSize: 10 } );\nconst getCachedAccentRamp = memoize( buildAccentRamp, { maxSize: 10 } );\n\nconst legacyWpComponentsOverridesCSS: Entry[] = [\n\t[ '--wp-components-color-accent', 'var(--wp-admin-theme-color)' ],\n\t[\n\t\t'--wp-components-color-accent-darker-10',\n\t\t'var(--wp-admin-theme-color-darker-10)',\n\t],\n\t[\n\t\t'--wp-components-color-accent-darker-20',\n\t\t'var(--wp-admin-theme-color-darker-20)',\n\t],\n\t[\n\t\t'--wp-components-color-accent-inverted',\n\t\t'var(--wpds-color-fg-interactive-brand-strong, #fff)',\n\t],\n\t[\n\t\t'--wp-components-color-background',\n\t\t'var(--wpds-color-bg-surface-neutral-strong, #ffffff)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground',\n\t\t'var(--wpds-color-fg-content-neutral, #1e1e1e)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground-inverted',\n\t\t'var(--wpds-color-bg-surface-neutral, #f8f8f8)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-100',\n\t\t'var(--wpds-color-bg-surface-neutral, #f8f8f8)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-200',\n\t\t'var(--wpds-color-stroke-surface-neutral, #d8d8d8)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-300',\n\t\t'var(--wpds-color-stroke-surface-neutral, #d8d8d8)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-400',\n\t\t'var(--wpds-color-stroke-interactive-neutral, #8a8a8a)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-600',\n\t\t'var(--wpds-color-stroke-interactive-neutral, #8a8a8a)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-700',\n\t\t'var(--wpds-color-fg-content-neutral-weak, #6d6d6d)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-800',\n\t\t'var(--wpds-color-fg-content-neutral, #1e1e1e)',\n\t],\n];\n\nfunction customRgbFormat( color: PlainColorObject ): string {\n\tconst rgb = to( color, sRGB );\n\treturn rgb.coords\n\t\t.map( ( n ) => Math.round( ( n ?? 0 ) * 255 ) )\n\t\t.join( ', ' );\n}\n\nfunction legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {\n\tconst parsedAccent = to( accent, HSL );\n\tconst parsedL = parsedAccent.coords[ 2 ] ?? 0;\n\n\t// Create darker version of accent \u2014\n\tconst darker10 = set(\n\t\tclone( parsedAccent ),\n\t\t[ HSL, 'l' ],\n\t\tMath.max( 0, parsedL - 5 ) // L reduced by 5%\n\t);\n\tconst darker20 = set(\n\t\tclone( parsedAccent ),\n\t\t[ HSL, 'l' ],\n\t\tMath.max( 0, parsedL - 10 ) // L reduced by 10%\n\t);\n\n\treturn [\n\t\t[ '--wp-admin-theme-color', getColorString( parsedAccent ) ],\n\t\t[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],\n\t\t[ '--wp-admin-theme-color-darker-10', getColorString( darker10 ) ],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-10--rgb',\n\t\t\tcustomRgbFormat( darker10 ),\n\t\t],\n\t\t[ '--wp-admin-theme-color-darker-20', getColorString( darker20 ) ],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-20--rgb',\n\t\t\tcustomRgbFormat( darker20 ),\n\t\t],\n\t];\n}\n\nfunction colorTokensCSS(\n\tcomputedColorRamps: Map< string, RampResult >\n): Entry[] {\n\tconst entries: Entry[] = [];\n\n\tfor ( const [ rampName, { ramp } ] of computedColorRamps ) {\n\t\tfor ( const [ tokenName, tokenValue ] of Object.entries( ramp ) ) {\n\t\t\tconst key = `${ rampName }-${ tokenName }`;\n\t\t\tconst aliasedBy = colorTokens[ key ] ?? [];\n\t\t\tfor ( const aliasedId of aliasedBy ) {\n\t\t\t\tentries.push( [ `--wpds-color-${ aliasedId }`, tokenValue ] );\n\t\t\t}\n\t\t}\n\t}\n\n\treturn entries;\n}\n\nfunction generateStyles( {\n\tprimary,\n\tcomputedColorRamps,\n}: {\n\tprimary: string;\n\tcomputedColorRamps: Map< string, RampResult >;\n} ): CSSProperties {\n\treturn Object.fromEntries(\n\t\t[\n\t\t\t// Semantic color tokens\n\t\t\tcolorTokensCSS( computedColorRamps ),\n\t\t\t// Legacy overrides\n\t\t\tlegacyWpAdminThemeOverridesCSS( primary ),\n\t\t\tlegacyWpComponentsOverridesCSS,\n\t\t].flat()\n\t);\n}\n\nexport function useThemeProviderStyles( {\n\tcolor = {},\n\tcursor,\n}: {\n\tcolor?: ThemeProviderProps[ 'color' ];\n\tcursor?: ThemeProviderProps[ 'cursor' ];\n} = {} ) {\n\tconst { resolvedSettings: inheritedSettings } = useContext( ThemeContext );\n\n\t// Compute settings:\n\t// - used provided prop value;\n\t// - otherwise, use inherited value from parent instance;\n\t// - otherwise, use fallback value (where applicable).\n\tconst primary =\n\t\tcolor.primary ??\n\t\tinheritedSettings.color?.primary ??\n\t\tDEFAULT_SEED_COLORS.primary;\n\tconst bg =\n\t\tcolor.bg ?? inheritedSettings.color?.bg ?? DEFAULT_SEED_COLORS.bg;\n\tconst cursorControl = cursor?.control ?? inheritedSettings.cursor?.control;\n\n\tconst resolvedSettings = useMemo(\n\t\t() => ( {\n\t\t\tcolor: {\n\t\t\t\tprimary,\n\t\t\t\tbg,\n\t\t\t},\n\t\t\tcursor: cursorControl ? { control: cursorControl } : undefined,\n\t\t} ),\n\t\t[ primary, bg, cursorControl ]\n\t);\n\n\tconst colorStyles = useMemo( () => {\n\t\t// Determine which seeds are needed for generating ramps.\n\t\tconst seeds = {\n\t\t\t...DEFAULT_SEED_COLORS,\n\t\t\tbg,\n\t\t\tprimary,\n\t\t};\n\n\t\t// Generate ramps.\n\t\tconst computedColorRamps = new Map< string, RampResult >();\n\t\tconst bgRamp = getCachedBgRamp( seeds.bg );\n\t\tObject.entries( seeds ).forEach( ( [ rampName, seed ] ) => {\n\t\t\tif ( rampName === 'bg' ) {\n\t\t\t\tcomputedColorRamps.set( rampName, bgRamp );\n\t\t\t} else {\n\t\t\t\tcomputedColorRamps.set(\n\t\t\t\t\trampName,\n\t\t\t\t\tgetCachedAccentRamp( seed, bgRamp )\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\treturn generateStyles( {\n\t\t\tprimary: seeds.primary,\n\t\t\tcomputedColorRamps,\n\t\t} );\n\t}, [ primary, bg ] );\n\n\tconst themeProviderStyles = useMemo(\n\t\t() => ( {\n\t\t\t...colorStyles,\n\t\t\t...( cursorControl && {\n\t\t\t\t'--wpds-cursor-control': cursorControl,\n\t\t\t} ),\n\t\t} ),\n\t\t[ colorStyles, cursorControl ]\n\t);\n\n\treturn {\n\t\tresolvedSettings,\n\t\tthemeProviderStyles,\n\t};\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["memoize", "colorTokens"]
|
|
7
7
|
}
|
package/build-module/context.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/context.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeProviderSettings } from './types';\n\ninterface ThemeContextType {\n\tresolvedSettings: ThemeProviderSettings;\n}\n\nexport const ThemeContext = createContext< ThemeContextType >( {\n\tresolvedSettings: {\n\t\tcolor: {},\n\t},\n} );\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,qBAAqB;AAWvB,IAAM,eAAe,cAAmC;AAAA,EAC9D,kBAAkB;AAAA,IACjB,OAAO,CAAC;AAAA,EACT;AACD,CAAE;",
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeProviderSettings } from './types';\n\ninterface ThemeContextType {\n\tresolvedSettings: ThemeProviderSettings;\n}\n\nexport const ThemeContext = createContext< ThemeContextType >( {\n\tresolvedSettings: {\n\t\tcolor: {},\n\t\tcursor: undefined,\n\t},\n} );\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,qBAAqB;AAWvB,IAAM,eAAe,cAAmC;AAAA,EAC9D,kBAAkB;AAAA,IACjB,OAAO,CAAC;AAAA,IACR,QAAQ;AAAA,EACT;AACD,CAAE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -97,7 +97,7 @@ var design_token_fallbacks_default = {
|
|
|
97
97
|
"--wpds-color-stroke-surface-success-strong": "#007f30",
|
|
98
98
|
"--wpds-color-stroke-surface-warning": "#d0b381",
|
|
99
99
|
"--wpds-color-stroke-surface-warning-strong": "#926300",
|
|
100
|
-
"--wpds-cursor-control": "
|
|
100
|
+
"--wpds-cursor-control": "pointer",
|
|
101
101
|
"--wpds-dimension-base": "4px",
|
|
102
102
|
"--wpds-dimension-gap-2xl": "32px",
|
|
103
103
|
"--wpds-dimension-gap-3xl": "40px",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/prebuilt/js/design-token-fallbacks.mjs"],
|
|
4
|
-
"sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-ds-token-fallbacks plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'--wpds-border-radius-lg': '8px',\n\t'--wpds-border-radius-md': '4px',\n\t'--wpds-border-radius-sm': '2px',\n\t'--wpds-border-radius-xs': '1px',\n\t'--wpds-border-width-focus': 'var(--wp-admin-border-width-focus, 2px)',\n\t'--wpds-border-width-lg': '8px',\n\t'--wpds-border-width-md': '4px',\n\t'--wpds-border-width-sm': '2px',\n\t'--wpds-border-width-xs': '1px',\n\t'--wpds-color-bg-interactive-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-interactive-brand-strong-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',\n\t'--wpds-color-bg-interactive-brand-weak': '#00000000',\n\t'--wpds-color-bg-interactive-brand-weak-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',\n\t'--wpds-color-bg-interactive-error': '#00000000',\n\t'--wpds-color-bg-interactive-error-active': '#fff6f4',\n\t'--wpds-color-bg-interactive-error-strong': '#cc1818',\n\t'--wpds-color-bg-interactive-error-strong-active': '#b90000',\n\t'--wpds-color-bg-interactive-error-weak': '#00000000',\n\t'--wpds-color-bg-interactive-error-weak-active': '#f6e6e3',\n\t'--wpds-color-bg-interactive-neutral-strong': '#2d2d2d',\n\t'--wpds-color-bg-interactive-neutral-strong-active': '#1e1e1e',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled': '#e2e2e2',\n\t'--wpds-color-bg-interactive-neutral-weak': '#00000000',\n\t'--wpds-color-bg-interactive-neutral-weak-active': '#eaeaea',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled': '#00000000',\n\t'--wpds-color-bg-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',\n\t'--wpds-color-bg-surface-caution': '#fee994',\n\t'--wpds-color-bg-surface-caution-weak': '#fff9c9',\n\t'--wpds-color-bg-surface-error': '#f6e6e3',\n\t'--wpds-color-bg-surface-error-weak': '#fff6f4',\n\t'--wpds-color-bg-surface-info': '#deebfa',\n\t'--wpds-color-bg-surface-info-weak': '#f2f9ff',\n\t'--wpds-color-bg-surface-neutral': '#f8f8f8',\n\t'--wpds-color-bg-surface-neutral-strong': '#ffffff',\n\t'--wpds-color-bg-surface-neutral-weak': '#f0f0f0',\n\t'--wpds-color-bg-surface-success': '#c5f7cc',\n\t'--wpds-color-bg-surface-success-weak': '#eaffed',\n\t'--wpds-color-bg-surface-warning': '#fde6bd',\n\t'--wpds-color-bg-surface-warning-weak': '#fff7e0',\n\t'--wpds-color-bg-thumb-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-bg-thumb-neutral-weak': '#8a8a8a',\n\t'--wpds-color-bg-thumb-neutral-weak-active': '#6c6c6c',\n\t'--wpds-color-bg-track-neutral': '#d8d8d8',\n\t'--wpds-color-bg-track-neutral-weak': '#e0e0e0',\n\t'--wpds-color-fg-content-caution': '#281d00',\n\t'--wpds-color-fg-content-caution-weak': '#826a00',\n\t'--wpds-color-fg-content-error': '#470000',\n\t'--wpds-color-fg-content-error-weak': '#cc1818',\n\t'--wpds-color-fg-content-info': '#001b4f',\n\t'--wpds-color-fg-content-info-weak': '#006bd7',\n\t'--wpds-color-fg-content-neutral': '#1e1e1e',\n\t'--wpds-color-fg-content-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-content-success': '#002900',\n\t'--wpds-color-fg-content-success-weak': '#007f30',\n\t'--wpds-color-fg-content-warning': '#2e1900',\n\t'--wpds-color-fg-content-warning-weak': '#926300',\n\t'--wpds-color-fg-interactive-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-strong': '#fff',\n\t'--wpds-color-fg-interactive-brand-strong-active': '#fff',\n\t'--wpds-color-fg-interactive-error': '#cc1818',\n\t'--wpds-color-fg-interactive-error-active': '#cc1818',\n\t'--wpds-color-fg-interactive-error-strong': '#f2efef',\n\t'--wpds-color-fg-interactive-error-strong-active': '#f2efef',\n\t'--wpds-color-fg-interactive-neutral': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-active': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-strong': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-active': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled': '#8a8a8a',\n\t'--wpds-color-stroke-focus-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',\n\t'--wpds-color-stroke-interactive-error': '#cc1818',\n\t'--wpds-color-stroke-interactive-error-active': '#9d0000',\n\t'--wpds-color-stroke-interactive-error-strong': '#cc1818',\n\t'--wpds-color-stroke-interactive-neutral': '#8a8a8a',\n\t'--wpds-color-stroke-interactive-neutral-active': '#6c6c6c',\n\t'--wpds-color-stroke-interactive-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-stroke-interactive-neutral-strong': '#6c6c6c',\n\t'--wpds-color-stroke-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white)',\n\t'--wpds-color-stroke-surface-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-surface-error': '#daa39b',\n\t'--wpds-color-stroke-surface-error-strong': '#cc1818',\n\t'--wpds-color-stroke-surface-info': '#9fbcdc',\n\t'--wpds-color-stroke-surface-info-strong': '#006bd7',\n\t'--wpds-color-stroke-surface-neutral': '#d8d8d8',\n\t'--wpds-color-stroke-surface-neutral-strong': '#8a8a8a',\n\t'--wpds-color-stroke-surface-neutral-weak': '#e0e0e0',\n\t'--wpds-color-stroke-surface-success': '#8ac894',\n\t'--wpds-color-stroke-surface-success-strong': '#007f30',\n\t'--wpds-color-stroke-surface-warning': '#d0b381',\n\t'--wpds-color-stroke-surface-warning-strong': '#926300',\n\t'--wpds-cursor-control': '
|
|
4
|
+
"sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-ds-token-fallbacks plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'--wpds-border-radius-lg': '8px',\n\t'--wpds-border-radius-md': '4px',\n\t'--wpds-border-radius-sm': '2px',\n\t'--wpds-border-radius-xs': '1px',\n\t'--wpds-border-width-focus': 'var(--wp-admin-border-width-focus, 2px)',\n\t'--wpds-border-width-lg': '8px',\n\t'--wpds-border-width-md': '4px',\n\t'--wpds-border-width-sm': '2px',\n\t'--wpds-border-width-xs': '1px',\n\t'--wpds-color-bg-interactive-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-interactive-brand-strong-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',\n\t'--wpds-color-bg-interactive-brand-weak': '#00000000',\n\t'--wpds-color-bg-interactive-brand-weak-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',\n\t'--wpds-color-bg-interactive-error': '#00000000',\n\t'--wpds-color-bg-interactive-error-active': '#fff6f4',\n\t'--wpds-color-bg-interactive-error-strong': '#cc1818',\n\t'--wpds-color-bg-interactive-error-strong-active': '#b90000',\n\t'--wpds-color-bg-interactive-error-weak': '#00000000',\n\t'--wpds-color-bg-interactive-error-weak-active': '#f6e6e3',\n\t'--wpds-color-bg-interactive-neutral-strong': '#2d2d2d',\n\t'--wpds-color-bg-interactive-neutral-strong-active': '#1e1e1e',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled': '#e2e2e2',\n\t'--wpds-color-bg-interactive-neutral-weak': '#00000000',\n\t'--wpds-color-bg-interactive-neutral-weak-active': '#eaeaea',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled': '#00000000',\n\t'--wpds-color-bg-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',\n\t'--wpds-color-bg-surface-caution': '#fee994',\n\t'--wpds-color-bg-surface-caution-weak': '#fff9c9',\n\t'--wpds-color-bg-surface-error': '#f6e6e3',\n\t'--wpds-color-bg-surface-error-weak': '#fff6f4',\n\t'--wpds-color-bg-surface-info': '#deebfa',\n\t'--wpds-color-bg-surface-info-weak': '#f2f9ff',\n\t'--wpds-color-bg-surface-neutral': '#f8f8f8',\n\t'--wpds-color-bg-surface-neutral-strong': '#ffffff',\n\t'--wpds-color-bg-surface-neutral-weak': '#f0f0f0',\n\t'--wpds-color-bg-surface-success': '#c5f7cc',\n\t'--wpds-color-bg-surface-success-weak': '#eaffed',\n\t'--wpds-color-bg-surface-warning': '#fde6bd',\n\t'--wpds-color-bg-surface-warning-weak': '#fff7e0',\n\t'--wpds-color-bg-thumb-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-bg-thumb-neutral-weak': '#8a8a8a',\n\t'--wpds-color-bg-thumb-neutral-weak-active': '#6c6c6c',\n\t'--wpds-color-bg-track-neutral': '#d8d8d8',\n\t'--wpds-color-bg-track-neutral-weak': '#e0e0e0',\n\t'--wpds-color-fg-content-caution': '#281d00',\n\t'--wpds-color-fg-content-caution-weak': '#826a00',\n\t'--wpds-color-fg-content-error': '#470000',\n\t'--wpds-color-fg-content-error-weak': '#cc1818',\n\t'--wpds-color-fg-content-info': '#001b4f',\n\t'--wpds-color-fg-content-info-weak': '#006bd7',\n\t'--wpds-color-fg-content-neutral': '#1e1e1e',\n\t'--wpds-color-fg-content-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-content-success': '#002900',\n\t'--wpds-color-fg-content-success-weak': '#007f30',\n\t'--wpds-color-fg-content-warning': '#2e1900',\n\t'--wpds-color-fg-content-warning-weak': '#926300',\n\t'--wpds-color-fg-interactive-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-strong': '#fff',\n\t'--wpds-color-fg-interactive-brand-strong-active': '#fff',\n\t'--wpds-color-fg-interactive-error': '#cc1818',\n\t'--wpds-color-fg-interactive-error-active': '#cc1818',\n\t'--wpds-color-fg-interactive-error-strong': '#f2efef',\n\t'--wpds-color-fg-interactive-error-strong-active': '#f2efef',\n\t'--wpds-color-fg-interactive-neutral': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-active': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-strong': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-active': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled': '#8a8a8a',\n\t'--wpds-color-stroke-focus-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',\n\t'--wpds-color-stroke-interactive-error': '#cc1818',\n\t'--wpds-color-stroke-interactive-error-active': '#9d0000',\n\t'--wpds-color-stroke-interactive-error-strong': '#cc1818',\n\t'--wpds-color-stroke-interactive-neutral': '#8a8a8a',\n\t'--wpds-color-stroke-interactive-neutral-active': '#6c6c6c',\n\t'--wpds-color-stroke-interactive-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-stroke-interactive-neutral-strong': '#6c6c6c',\n\t'--wpds-color-stroke-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white)',\n\t'--wpds-color-stroke-surface-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-surface-error': '#daa39b',\n\t'--wpds-color-stroke-surface-error-strong': '#cc1818',\n\t'--wpds-color-stroke-surface-info': '#9fbcdc',\n\t'--wpds-color-stroke-surface-info-strong': '#006bd7',\n\t'--wpds-color-stroke-surface-neutral': '#d8d8d8',\n\t'--wpds-color-stroke-surface-neutral-strong': '#8a8a8a',\n\t'--wpds-color-stroke-surface-neutral-weak': '#e0e0e0',\n\t'--wpds-color-stroke-surface-success': '#8ac894',\n\t'--wpds-color-stroke-surface-success-strong': '#007f30',\n\t'--wpds-color-stroke-surface-warning': '#d0b381',\n\t'--wpds-color-stroke-surface-warning-strong': '#926300',\n\t'--wpds-cursor-control': 'pointer',\n\t'--wpds-dimension-base': '4px',\n\t'--wpds-dimension-gap-2xl': '32px',\n\t'--wpds-dimension-gap-3xl': '40px',\n\t'--wpds-dimension-gap-lg': '16px',\n\t'--wpds-dimension-gap-md': '12px',\n\t'--wpds-dimension-gap-sm': '8px',\n\t'--wpds-dimension-gap-xl': '24px',\n\t'--wpds-dimension-gap-xs': '4px',\n\t'--wpds-dimension-padding-2xl': '24px',\n\t'--wpds-dimension-padding-3xl': '32px',\n\t'--wpds-dimension-padding-lg': '16px',\n\t'--wpds-dimension-padding-md': '12px',\n\t'--wpds-dimension-padding-sm': '8px',\n\t'--wpds-dimension-padding-xl': '20px',\n\t'--wpds-dimension-padding-xs': '4px',\n\t'--wpds-dimension-surface-width-2xl': '960px',\n\t'--wpds-dimension-surface-width-lg': '560px',\n\t'--wpds-dimension-surface-width-md': '400px',\n\t'--wpds-dimension-surface-width-sm': '320px',\n\t'--wpds-dimension-surface-width-xl': '720px',\n\t'--wpds-dimension-surface-width-xs': '240px',\n\t'--wpds-elevation-lg':\n\t\t'0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005',\n\t'--wpds-elevation-md':\n\t\t'0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005',\n\t'--wpds-elevation-sm':\n\t\t'0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005',\n\t'--wpds-elevation-xs':\n\t\t'0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003',\n\t'--wpds-font-family-body':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-heading':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-mono': '\"Menlo\", \"Consolas\", monaco, monospace',\n\t'--wpds-font-line-height-2xl': '40px',\n\t'--wpds-font-line-height-lg': '28px',\n\t'--wpds-font-line-height-md': '24px',\n\t'--wpds-font-line-height-sm': '20px',\n\t'--wpds-font-line-height-xl': '32px',\n\t'--wpds-font-line-height-xs': '16px',\n\t'--wpds-font-size-2xl': '32px',\n\t'--wpds-font-size-lg': '15px',\n\t'--wpds-font-size-md': '13px',\n\t'--wpds-font-size-sm': '12px',\n\t'--wpds-font-size-xl': '20px',\n\t'--wpds-font-size-xs': '11px',\n\t'--wpds-font-weight-medium': '499',\n\t'--wpds-font-weight-regular': '400',\n};\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,9 +4,9 @@ import { ThemeContext } from "./context.mjs";
|
|
|
4
4
|
import { useThemeProviderStyles } from "./use-theme-provider-styles.mjs";
|
|
5
5
|
|
|
6
6
|
// packages/theme/src/style.module.css
|
|
7
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
7
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='f4e6e06c6a']")) {
|
|
8
8
|
const style = document.createElement("style");
|
|
9
|
-
style.setAttribute("data-wp-hash", "
|
|
9
|
+
style.setAttribute("data-wp-hash", "f4e6e06c6a");
|
|
10
10
|
style.appendChild(document.createTextNode(".dba930ea7a9438fd__root{display:contents}"));
|
|
11
11
|
document.head.appendChild(style);
|
|
12
12
|
}
|
|
@@ -35,12 +35,14 @@ function generateCSSSelector({
|
|
|
35
35
|
var ThemeProvider = ({
|
|
36
36
|
children,
|
|
37
37
|
color = {},
|
|
38
|
+
cursor,
|
|
38
39
|
isRoot = false,
|
|
39
40
|
density
|
|
40
41
|
}) => {
|
|
41
42
|
const instanceId = useId();
|
|
42
43
|
const { themeProviderStyles, resolvedSettings } = useThemeProviderStyles({
|
|
43
|
-
color
|
|
44
|
+
color,
|
|
45
|
+
cursor
|
|
44
46
|
});
|
|
45
47
|
const contextValue = useMemo(
|
|
46
48
|
() => ({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/theme-provider.tsx", "../src/style.module.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useId } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport { useThemeProviderStyles } from './use-theme-provider-styles';\nimport { type ThemeProviderProps } from './types';\nimport styles from './style.module.css';\n\nfunction cssObjectToText( values: CSSProperties ) {\n\treturn Object.entries( values )\n\t\t.map( ( [ key, value ] ) => `${ key }: ${ value };` )\n\t\t.join( '' );\n}\n\nfunction generateCSSSelector( {\n\tinstanceId,\n\tisRoot,\n}: {\n\tinstanceId: string;\n\tisRoot: boolean;\n} ) {\n\tconst rootSel = `[data-wpds-root-provider=\"true\"]`;\n\tconst instanceIdSel = `[data-wpds-theme-provider-id=\"${ instanceId }\"]`;\n\n\tconst selectors = [];\n\n\tif ( isRoot ) {\n\t\tselectors.push(\n\t\t\t`:root:has(.${ styles.root }${ rootSel }${ instanceIdSel })`\n\t\t);\n\t}\n\n\tselectors.push( `.${ styles.root }.${ styles.root }${ instanceIdSel }` );\n\n\treturn selectors.join( ',' );\n}\n\nexport const ThemeProvider = ( {\n\tchildren,\n\tcolor = {},\n\tisRoot = false,\n\tdensity,\n}: ThemeProviderProps ) => {\n\tconst instanceId = useId();\n\n\tconst { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {\n\t\tcolor,\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tresolvedSettings,\n\t\t} ),\n\t\t[ resolvedSettings ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ themeProviderStyles ? (\n\t\t\t\t<style>\n\t\t\t\t\t{ `${ generateCSSSelector( {\n\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\tisRoot,\n\t\t\t\t\t} ) } {${ cssObjectToText( themeProviderStyles ) }}` }\n\t\t\t\t</style>\n\t\t\t) : null }\n\t\t\t<div\n\t\t\t\tdata-wpds-theme-provider-id={ instanceId }\n\t\t\t\tdata-wpds-root-provider={ isRoot }\n\t\t\t\tdata-wpds-density={ density }\n\t\t\t\tclassName={ styles.root }\n\t\t\t>\n\t\t\t\t<ThemeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</ThemeContext.Provider>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAQA,SAAS,SAAS,aAAa;AAK/B,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;;;ACdvC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,2CAA2C,CAAC;AACtF,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,yBAAwB;;;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useId } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport { useThemeProviderStyles } from './use-theme-provider-styles';\nimport { type ThemeProviderProps } from './types';\nimport styles from './style.module.css';\n\nfunction cssObjectToText( values: CSSProperties ) {\n\treturn Object.entries( values )\n\t\t.map( ( [ key, value ] ) => `${ key }: ${ value };` )\n\t\t.join( '' );\n}\n\nfunction generateCSSSelector( {\n\tinstanceId,\n\tisRoot,\n}: {\n\tinstanceId: string;\n\tisRoot: boolean;\n} ) {\n\tconst rootSel = `[data-wpds-root-provider=\"true\"]`;\n\tconst instanceIdSel = `[data-wpds-theme-provider-id=\"${ instanceId }\"]`;\n\n\tconst selectors = [];\n\n\tif ( isRoot ) {\n\t\tselectors.push(\n\t\t\t`:root:has(.${ styles.root }${ rootSel }${ instanceIdSel })`\n\t\t);\n\t}\n\n\tselectors.push( `.${ styles.root }.${ styles.root }${ instanceIdSel }` );\n\n\treturn selectors.join( ',' );\n}\n\nexport const ThemeProvider = ( {\n\tchildren,\n\tcolor = {},\n\tcursor,\n\tisRoot = false,\n\tdensity,\n}: ThemeProviderProps ) => {\n\tconst instanceId = useId();\n\n\tconst { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {\n\t\tcolor,\n\t\tcursor,\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tresolvedSettings,\n\t\t} ),\n\t\t[ resolvedSettings ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ themeProviderStyles ? (\n\t\t\t\t<style>\n\t\t\t\t\t{ `${ generateCSSSelector( {\n\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\tisRoot,\n\t\t\t\t\t} ) } {${ cssObjectToText( themeProviderStyles ) }}` }\n\t\t\t\t</style>\n\t\t\t) : null }\n\t\t\t<div\n\t\t\t\tdata-wpds-theme-provider-id={ instanceId }\n\t\t\t\tdata-wpds-root-provider={ isRoot }\n\t\t\t\tdata-wpds-density={ density }\n\t\t\t\tclassName={ styles.root }\n\t\t\t>\n\t\t\t\t<ThemeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</ThemeContext.Provider>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='f4e6e06c6a']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"f4e6e06c6a\");\n\tstyle.appendChild(document.createTextNode(\".dba930ea7a9438fd__root{display:contents}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"dba930ea7a9438fd__root\"};\n"],
|
|
5
|
+
"mappings": ";AAQA,SAAS,SAAS,aAAa;AAK/B,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;;;ACdvC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,2CAA2C,CAAC;AACtF,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,yBAAwB;;;AD+D7C,mBAEE,KAFF;AAnDF,SAAS,gBAAiB,QAAwB;AACjD,SAAO,OAAO,QAAS,MAAO,EAC5B,IAAK,CAAE,CAAE,KAAK,KAAM,MAAO,GAAI,GAAI,KAAM,KAAM,GAAI,EACnD,KAAM,EAAG;AACZ;AAEA,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AACD,GAGI;AACH,QAAM,UAAU;AAChB,QAAM,gBAAgB,iCAAkC,UAAW;AAEnE,QAAM,YAAY,CAAC;AAEnB,MAAK,QAAS;AACb,cAAU;AAAA,MACT,cAAe,cAAO,IAAK,GAAI,OAAQ,GAAI,aAAc;AAAA,IAC1D;AAAA,EACD;AAEA,YAAU,KAAM,IAAK,cAAO,IAAK,IAAK,cAAO,IAAK,GAAI,aAAc,EAAG;AAEvE,SAAO,UAAU,KAAM,GAAI;AAC5B;AAEO,IAAM,gBAAgB,CAAE;AAAA,EAC9B;AAAA,EACA,QAAQ,CAAC;AAAA,EACT;AAAA,EACA,SAAS;AAAA,EACT;AACD,MAA2B;AAC1B,QAAM,aAAa,MAAM;AAEzB,QAAM,EAAE,qBAAqB,iBAAiB,IAAI,uBAAwB;AAAA,IACzE;AAAA,IACA;AAAA,EACD,CAAE;AAEF,QAAM,eAAe;AAAA,IACpB,OAAQ;AAAA,MACP;AAAA,IACD;AAAA,IACA,CAAE,gBAAiB;AAAA,EACpB;AAEA,SACC,iCACG;AAAA,0BACD,oBAAC,WACE,aAAI,oBAAqB;AAAA,MAC1B;AAAA,MACA;AAAA,IACD,CAAE,CAAE,KAAM,gBAAiB,mBAAoB,CAAE,KAClD,IACG;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACA,+BAA8B;AAAA,QAC9B,2BAA0B;AAAA,QAC1B,qBAAoB;AAAA,QACpB,WAAY,cAAO;AAAA,QAEnB,8BAAC,aAAa,UAAb,EAAsB,OAAQ,cAC5B,UACH;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -136,21 +136,24 @@ function generateStyles({
|
|
|
136
136
|
);
|
|
137
137
|
}
|
|
138
138
|
function useThemeProviderStyles({
|
|
139
|
-
color = {}
|
|
139
|
+
color = {},
|
|
140
|
+
cursor
|
|
140
141
|
} = {}) {
|
|
141
142
|
const { resolvedSettings: inheritedSettings } = useContext(ThemeContext);
|
|
142
143
|
const primary = color.primary ?? inheritedSettings.color?.primary ?? DEFAULT_SEED_COLORS.primary;
|
|
143
144
|
const bg = color.bg ?? inheritedSettings.color?.bg ?? DEFAULT_SEED_COLORS.bg;
|
|
145
|
+
const cursorControl = cursor?.control ?? inheritedSettings.cursor?.control;
|
|
144
146
|
const resolvedSettings = useMemo(
|
|
145
147
|
() => ({
|
|
146
148
|
color: {
|
|
147
149
|
primary,
|
|
148
150
|
bg
|
|
149
|
-
}
|
|
151
|
+
},
|
|
152
|
+
cursor: cursorControl ? { control: cursorControl } : void 0
|
|
150
153
|
}),
|
|
151
|
-
[primary, bg]
|
|
154
|
+
[primary, bg, cursorControl]
|
|
152
155
|
);
|
|
153
|
-
const
|
|
156
|
+
const colorStyles = useMemo(() => {
|
|
154
157
|
const seeds = {
|
|
155
158
|
...DEFAULT_SEED_COLORS,
|
|
156
159
|
bg,
|
|
@@ -173,6 +176,15 @@ function useThemeProviderStyles({
|
|
|
173
176
|
computedColorRamps
|
|
174
177
|
});
|
|
175
178
|
}, [primary, bg]);
|
|
179
|
+
const themeProviderStyles = useMemo(
|
|
180
|
+
() => ({
|
|
181
|
+
...colorStyles,
|
|
182
|
+
...cursorControl && {
|
|
183
|
+
"--wpds-cursor-control": cursorControl
|
|
184
|
+
}
|
|
185
|
+
}),
|
|
186
|
+
[colorStyles, cursorControl]
|
|
187
|
+
);
|
|
176
188
|
return {
|
|
177
189
|
resolvedSettings,
|
|
178
190
|
themeProviderStyles
|