PluginProbe
Gutenberg / 22.7.0
Gutenberg v22.7.0
24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 12.6.0 All 403 releases
← All changes | build/scripts/theme/index.js +175 -368 23.6.2 → 22.7.0 View file →
@@ -30,15 +30,8 @@
30 30 mod
31 31 ));
32 32 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
33 33
34 - // package-external:@wordpress/deprecated
35 - var require_deprecated = __commonJS({
36 - "package-external:@wordpress/deprecated"(exports, module) {
37 - module.exports = window.wp.deprecated;
38 - }
39 - });
40 -
41 34 // package-external:@wordpress/private-apis
42 35 var require_private_apis = __commonJS({
43 36 "package-external:@wordpress/private-apis"(exports, module) {
44 37 module.exports = window.wp.privateApis;
@@ -51,15 +44,8 @@
51 44 module.exports = window.wp.element;
52 45 }
53 46 });
54 47
55 - // package-external:@wordpress/compose
56 - var require_compose = __commonJS({
57 - "package-external:@wordpress/compose"(exports, module) {
58 - module.exports = window.wp.compose;
59 - }
60 - });
61 -
62 48 // vendor-external:react/jsx-runtime
63 49 var require_jsx_runtime = __commonJS({
64 50 "vendor-external:react/jsx-runtime"(exports, module) {
65 51 module.exports = window.ReactJSXRuntime;
@@ -68,15 +54,11 @@
68 54
69 55 // packages/theme/build-module/index.mjs
70 56 var index_exports = {};
71 57 __export(index_exports, {
72 - ThemeProvider: () => ThemeProvider,
73 58 privateApis: () => privateApis
74 59 });
75 60
76 - // packages/theme/build-module/private-apis.mjs
77 - var import_deprecated = __toESM(require_deprecated(), 1);
78 -
79 61 // packages/theme/build-module/lock-unlock.mjs
80 62 var import_private_apis = __toESM(require_private_apis(), 1);
81 63 var { lock, unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)(
82 64 "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
@@ -84,17 +66,14 @@
84 66 );
85 67
86 68 // packages/theme/build-module/theme-provider.mjs
87 69 var import_element3 = __toESM(require_element(), 1);
88 - var import_compose = __toESM(require_compose(), 1);
89 70
90 71 // packages/theme/build-module/context.mjs
91 72 var import_element = __toESM(require_element(), 1);
92 73 var ThemeContext = (0, import_element.createContext)({
93 74 resolvedSettings: {
94 - color: {},
95 - cursor: void 0,
96 - cornerRadius: void 0
75 + color: {}
97 76 }
98 77 });
99 78
100 79 // packages/theme/node_modules/colorjs.io/src/multiply-matrices.js
@@ -2538,15 +2517,35 @@
2538 2517 }
2539 2518 return ret;
2540 2519 }
2541 2520
2521 + // packages/theme/node_modules/colorjs.io/src/spaces/p3-linear.js
2522 + var toXYZ_M = [
2523 + [0.4865709486482162, 0.26566769316909306, 0.1982172852343625],
2524 + [0.2289745640697488, 0.6917385218365064, 0.079286914093745],
2525 + [0, 0.04511338185890264, 1.043944368900976]
2526 + ];
2527 + var fromXYZ_M = [
2528 + [2.493496911941425, -0.9313836179191239, -0.40271078445071684],
2529 + [-0.8294889695615747, 1.7626640603183463, 0.023624685841943577],
2530 + [0.03584583024378447, -0.07617238926804182, 0.9568845240076872]
2531 + ];
2532 + var p3_linear_default = new RGBColorSpace({
2533 + id: "p3-linear",
2534 + cssId: "display-p3-linear",
2535 + name: "Linear P3",
2536 + white: "D65",
2537 + toXYZ_M,
2538 + fromXYZ_M
2539 + });
2540 +
2542 2541 // packages/theme/node_modules/colorjs.io/src/spaces/srgb-linear.js
2543 - var toXYZ_M = [
2542 + var toXYZ_M2 = [
2544 2543 [0.41239079926595934, 0.357584339383878, 0.1804807884018343],
2545 2544 [0.21263900587151027, 0.715168678767756, 0.07219231536073371],
2546 2545 [0.01933081871559182, 0.11919477979462598, 0.9505321522496607]
2547 2546 ];
2548 - var fromXYZ_M = [
2547 + var fromXYZ_M2 = [
2549 2548 [3.2409699419045226, -1.537383177570094, -0.4986107602930034],
2550 2549 [-0.9692436362808796, 1.8759675015077202, 0.04155505740717559],
2551 2550 [0.05563007969699366, -0.20397695888897652, 1.0569715142428786]
2552 2551 ];
@@ -2553,10 +2552,10 @@
2553 2552 var srgb_linear_default = new RGBColorSpace({
2554 2553 id: "srgb-linear",
2555 2554 name: "Linear sRGB",
2556 2555 white: "D65",
2557 - toXYZ_M,
2558 - fromXYZ_M
2556 + toXYZ_M: toXYZ_M2,
2557 + fromXYZ_M: fromXYZ_M2
2559 2558 });
2560 2559
2561 2560 // packages/theme/node_modules/colorjs.io/src/keywords.js
2562 2561 var keywords_default = {
@@ -2823,8 +2822,19 @@
2823 2822 }
2824 2823 }
2825 2824 });
2826 2825
2826 + // packages/theme/node_modules/colorjs.io/src/spaces/p3.js
2827 + var p3_default = new RGBColorSpace({
2828 + id: "p3",
2829 + cssId: "display-p3",
2830 + name: "P3",
2831 + base: p3_linear_default,
2832 + // Gamma encoding/decoding is the same as sRGB
2833 + fromBase: srgb_default.fromBase,
2834 + toBase: srgb_default.toBase
2835 + });
2836 +
2827 2837 // packages/theme/node_modules/colorjs.io/src/luminance.js
2828 2838 function getLuminance(color) {
2829 2839 return get(color, [xyz_d65_default, "y"]);
2830 2840 }
@@ -3019,78 +3029,74 @@
3019 3029
3020 3030 // packages/theme/build-module/use-theme-provider-styles.mjs
3021 3031 var import_element2 = __toESM(require_element(), 1);
3022 3032
3033 + // packages/theme/build-module/color-ramps/lib/register-color-spaces.mjs
3034 + ColorSpace.register(srgb_default);
3035 + ColorSpace.register(oklch_default);
3036 + ColorSpace.register(p3_default);
3037 + ColorSpace.register(hsl_default);
3038 +
3023 3039 // packages/theme/build-module/prebuilt/ts/color-tokens.mjs
3024 3040 var color_tokens_default = {
3025 - transparent: [
3026 - "background-interactive-brand-weak",
3027 - "background-interactive-brand-weak-disabled",
3028 - "background-interactive-error",
3029 - "background-interactive-error-disabled",
3030 - "background-interactive-error-weak",
3031 - "background-interactive-error-weak-disabled",
3032 - "background-interactive-neutral-weak",
3033 - "background-interactive-neutral-weak-disabled"
3041 + "primary-bgFill1": ["bg-interactive-brand-strong"],
3042 + "primary-fgFill": [
3043 + "fg-interactive-brand-strong",
3044 + "fg-interactive-brand-strong-active"
3034 3045 ],
3035 - "primary-bgFill1": ["background-interactive-brand-strong"],
3036 - "primary-fgFill": [
3037 - "foreground-interactive-brand-strong",
3038 - "foreground-interactive-brand-strong-active"
3046 + "primary-bgFill2": ["bg-interactive-brand-strong-active"],
3047 + "primary-surface4": ["bg-interactive-brand-weak-active"],
3048 + "primary-fgSurface3": [
3049 + "fg-interactive-brand",
3050 + "fg-interactive-brand-active"
3039 3051 ],
3040 - "primary-bgFill2": ["background-interactive-brand-strong-active"],
3041 - "primary-surface4": ["background-interactive-brand-weak-active"],
3042 - "primary-fgSurface4": ["foreground-interactive-brand-active"],
3043 - "primary-fgSurface3": ["foreground-interactive-brand"],
3044 3052 "primary-stroke3": [
3045 - "background-thumb-brand",
3046 - "background-thumb-brand-active",
3047 - "stroke-focus",
3053 + "bg-thumb-brand",
3054 + "bg-thumb-brand-active",
3055 + "stroke-focus-brand",
3048 3056 "stroke-interactive-brand",
3049 3057 "stroke-surface-brand-strong"
3050 3058 ],
3051 3059 "primary-stroke4": ["stroke-interactive-brand-active"],
3052 3060 "primary-stroke1": ["stroke-surface-brand"],
3053 - "primary-surface1": ["background-surface-brand"],
3054 - "info-surface2": ["background-surface-info-weak"],
3055 - "info-surface4": ["background-surface-info"],
3056 - "info-fgSurface4": ["foreground-content-info"],
3057 - "info-fgSurface3": ["foreground-content-info-weak"],
3061 + "primary-surface1": ["bg-surface-brand"],
3062 + "info-surface2": ["bg-surface-info-weak"],
3063 + "info-surface4": ["bg-surface-info"],
3064 + "info-fgSurface4": ["fg-content-info"],
3065 + "info-fgSurface3": ["fg-content-info-weak"],
3058 3066 "info-stroke3": ["stroke-surface-info-strong"],
3059 3067 "info-stroke1": ["stroke-surface-info"],
3060 - "success-surface2": ["background-surface-success-weak"],
3061 - "success-surface4": ["background-surface-success"],
3062 - "success-fgSurface4": ["foreground-content-success"],
3063 - "success-fgSurface3": ["foreground-content-success-weak"],
3068 + "success-surface2": ["bg-surface-success-weak"],
3069 + "success-surface4": ["bg-surface-success"],
3070 + "success-fgSurface4": ["fg-content-success"],
3071 + "success-fgSurface3": ["fg-content-success-weak"],
3064 3072 "success-stroke3": ["stroke-surface-success-strong"],
3065 3073 "success-stroke1": ["stroke-surface-success"],
3066 - "warning-surface2": ["background-surface-warning-weak"],
3067 - "warning-surface4": ["background-surface-warning"],
3068 - "warning-fgSurface4": ["foreground-content-warning"],
3069 - "warning-fgSurface3": ["foreground-content-warning-weak"],
3074 + "warning-surface2": ["bg-surface-warning-weak"],
3075 + "warning-surface4": ["bg-surface-warning"],
3076 + "warning-fgSurface4": ["fg-content-warning"],
3077 + "warning-fgSurface3": ["fg-content-warning-weak"],
3070 3078 "warning-stroke3": ["stroke-surface-warning-strong"],
3071 3079 "warning-stroke1": ["stroke-surface-warning"],
3072 - "error-bgFill1": ["background-interactive-error-strong"],
3080 + "error-bgFill1": ["bg-interactive-error-strong"],
3073 3081 "error-fgFill": [
3074 - "foreground-interactive-error-strong",
3075 - "foreground-interactive-error-strong-active"
3082 + "fg-interactive-error-strong",
3083 + "fg-interactive-error-strong-active"
3076 3084 ],
3077 - "error-bgFill2": ["background-interactive-error-strong-active"],
3085 + "error-bgFill2": ["bg-interactive-error-strong-active"],
3078 3086 "error-surface2": [
3079 - "background-interactive-error-active",
3080 - "background-surface-error-weak"
3087 + "bg-interactive-error-active",
3088 + "bg-surface-error-weak"
3081 3089 ],
3082 3090 "error-surface4": [
3083 - "background-interactive-error-weak-active",
3084 - "background-surface-error"
3091 + "bg-interactive-error-weak-active",
3092 + "bg-surface-error"
3085 3093 ],
3086 - "error-fgSurface4": [
3087 - "foreground-content-error",
3088 - "foreground-interactive-error-active"
3089 - ],
3094 + "error-fgSurface4": ["fg-content-error"],
3090 3095 "error-fgSurface3": [
3091 - "foreground-content-error-weak",
3092 - "foreground-interactive-error"
3096 + "fg-content-error-weak",
3097 + "fg-interactive-error",
3098 + "fg-interactive-error-active"
3093 3099 ],
3094 3100 "error-stroke3": [
3095 3101 "stroke-interactive-error",
3096 3102 "stroke-interactive-error-strong",
@@ -3097,125 +3103,71 @@
3097 3103 "stroke-surface-error-strong"
3098 3104 ],
3099 3105 "error-stroke4": ["stroke-interactive-error-active"],
3100 3106 "error-stroke1": ["stroke-surface-error"],
3101 - "bg-surface2": ["background-surface-neutral"],
3102 - "bg-surface5": [
3103 - "background-interactive-brand-strong-disabled",
3104 - "background-interactive-error-strong-disabled",
3105 - "background-interactive-neutral-strong-disabled"
3106 - ],
3107 - "bg-surface4": ["background-interactive-neutral-weak-active"],
3108 - "bg-surface3": ["background-surface-neutral-strong"],
3107 + "bg-surface2": ["bg-surface-neutral"],
3108 + "bg-surface5": ["bg-interactive-neutral-strong-disabled"],
3109 + "bg-surface4": ["bg-interactive-neutral-weak-active"],
3110 + "bg-surface3": ["bg-surface-neutral-strong"],
3109 3111 "bg-fgSurface4": [
3110 - "foreground-content-neutral",
3111 - "foreground-interactive-neutral",
3112 - "foreground-interactive-neutral-active",
3113 - "foreground-interactive-neutral-weak-active"
3112 + "fg-content-neutral",
3113 + "fg-interactive-neutral",
3114 + "fg-interactive-neutral-active"
3114 3115 ],
3115 3116 "bg-fgSurface3": [
3116 - "foreground-content-neutral-weak",
3117 - "foreground-interactive-neutral-weak"
3117 + "fg-content-neutral-weak",
3118 + "fg-interactive-neutral-weak"
3118 3119 ],
3119 3120 "bg-fgSurface2": [
3120 - "foreground-interactive-brand-disabled",
3121 - "foreground-interactive-brand-strong-disabled",
3122 - "foreground-interactive-error-disabled",
3123 - "foreground-interactive-error-strong-disabled",
3124 - "foreground-interactive-neutral-disabled",
3125 - "foreground-interactive-neutral-strong-disabled",
3126 - "foreground-interactive-neutral-weak-disabled"
3121 + "fg-interactive-neutral-disabled",
3122 + "fg-interactive-neutral-strong-disabled",
3123 + "fg-interactive-neutral-weak-disabled"
3127 3124 ],
3128 3125 "bg-stroke3": [
3129 - "background-thumb-neutral-weak",
3126 + "bg-thumb-neutral-weak",
3130 3127 "stroke-interactive-neutral",
3131 3128 "stroke-surface-neutral-strong"
3132 3129 ],
3133 3130 "bg-stroke4": [
3134 - "background-thumb-neutral-weak-active",
3131 + "bg-thumb-neutral-weak-active",
3135 3132 "stroke-interactive-neutral-active",
3136 3133 "stroke-interactive-neutral-strong"
3137 3134 ],
3138 3135 "bg-stroke2": [
3139 - "background-thumb-brand-disabled",
3140 - "background-thumb-neutral-weak-disabled",
3141 - "background-track-neutral",
3142 - "stroke-interactive-brand-disabled",
3143 - "stroke-interactive-error-disabled",
3136 + "bg-thumb-neutral-disabled",
3137 + "bg-track-neutral",
3144 3138 "stroke-interactive-neutral-disabled",
3145 3139 "stroke-surface-neutral"
3146 3140 ],
3147 - "bg-stroke1": [
3148 - "background-track-neutral-weak",
3149 - "stroke-surface-neutral-weak"
3150 - ],
3151 - "bg-bgFillInverted2": ["background-interactive-neutral-strong-active"],
3152 - "bg-bgFillInverted1": ["background-interactive-neutral-strong"],
3141 + "bg-stroke1": ["bg-track-neutral-weak", "stroke-surface-neutral-weak"],
3142 + "bg-bgFillInverted2": ["bg-interactive-neutral-strong-active"],
3143 + "bg-bgFillInverted1": ["bg-interactive-neutral-strong"],
3153 3144 "bg-fgFillInverted": [
3154 - "foreground-interactive-neutral-strong",
3155 - "foreground-interactive-neutral-strong-active"
3145 + "fg-interactive-neutral-strong",
3146 + "fg-interactive-neutral-strong-active"
3156 3147 ],
3157 - "bg-surface1": ["background-surface-neutral-weak"],
3158 - "caution-surface2": ["background-surface-caution-weak"],
3159 - "caution-surface4": ["background-surface-caution"],
3160 - "caution-fgSurface4": ["foreground-content-caution"],
3161 - "caution-fgSurface3": ["foreground-content-caution-weak"],
3162 - "caution-stroke3": ["stroke-surface-caution-strong"],
3163 - "caution-stroke1": ["stroke-surface-caution"]
3148 + "bg-surface1": ["bg-surface-neutral-weak"],
3149 + "caution-surface2": ["bg-surface-caution-weak"],
3150 + "caution-surface4": ["bg-surface-caution"],
3151 + "caution-fgSurface4": ["fg-content-caution"],
3152 + "caution-fgSurface3": ["fg-content-caution-weak"]
3164 3153 };
3165 3154
3166 3155 // packages/theme/build-module/color-ramps/lib/color-utils.mjs
3167 - var ALLOWED_SEED_COLOR_SPACES = [srgb_default];
3168 3156 function getColorString(color) {
3169 - ColorSpace.register(srgb_default);
3170 3157 const rgbRounded = serialize(to(color, srgb_default));
3171 3158 return serialize(rgbRounded, { format: "hex" });
3172 3159 }
3173 3160 function getContrast(colorA, colorB) {
3174 - ColorSpace.register(srgb_default);
3175 3161 return contrastWCAG21(colorA, colorB);
3176 3162 }
3177 - function assertValidSeedColor(seed) {
3178 - ALLOWED_SEED_COLOR_SPACES.forEach(
3179 - (space) => ColorSpace.register(space)
3180 - );
3181 - let parsedColor;
3182 - try {
3183 - parsedColor = parse(seed);
3184 - } catch {
3185 - throw new Error(
3186 - `Unsupported seed color "${seed}": expected a fully opaque hex value, an \`rgb()\`/\`rgba()\` string, or a CSS named color.`
3187 - );
3188 - }
3189 - const { alpha = 1, spaceId } = parsedColor;
3190 - if (!ALLOWED_SEED_COLOR_SPACES.some((space) => space.id === spaceId)) {
3191 - throw new Error(
3192 - `Unsupported seed color "${seed}": expected a fully opaque hex value, an \`rgb()\`/\`rgba()\` string, or a CSS named color, but received a \`${spaceId}\` color.`
3193 - );
3194 - }
3195 - if (alpha !== 1) {
3196 - throw new Error(
3197 - `Unsupported seed color "${seed}": expected a fully opaque color.`
3198 - );
3199 - }
3200 - }
3201 3163 function clampToGamut(c) {
3202 - ColorSpace.register(srgb_default);
3203 - ColorSpace.register(oklch_default);
3204 3164 return to(toGamut(c, { space: srgb_default, method: "css" }), oklch_default);
3205 3165 }
3206 3166
3207 3167 // packages/theme/build-module/color-ramps/lib/constants.mjs
3208 - var WHITE = {
3209 - space: oklch_default,
3210 - coords: [1, 0, 0],
3211 - alpha: 1
3212 - };
3213 - var BLACK = {
3214 - space: oklch_default,
3215 - coords: [0, 0, 0],
3216 - alpha: 1
3217 - };
3168 + var WHITE = to("white", oklch_default);
3169 + var BLACK = to("black", oklch_default);
3218 3170 var UNIVERSAL_CONTRAST_TOPUP = 0.02;
3219 3171 var WHITE_TEXT_CONTRAST_MARGIN = 3.1;
3220 3172 var ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
3221 3173 lighter: { min: 0.2, max: 0.4 },
@@ -3223,9 +3175,9 @@
3223 3175 };
3224 3176 var CONTRAST_EPSILON = 4e-3;
3225 3177 var MAX_BISECTION_ITERATIONS = 10;
3226 3178 var DEFAULT_SEED_COLORS = {
3227 - background: "#fcfcfc",
3179 + bg: "#f8f8f8",
3228 3180 primary: "#3858e9",
3229 3181 info: "#0090ff",
3230 3182 success: "#4ab866",
3231 3183 caution: "#f0d149",
@@ -3360,9 +3312,8 @@
3360 3312 }
3361 3313
3362 3314 // packages/theme/build-module/color-ramps/lib/taper-chroma.mjs
3363 3315 function taperChroma(seed, lTarget, options = {}) {
3364 - ColorSpace.register(oklch_default);
3365 3316 const gamut = options.gamut ?? srgb_default;
3366 3317 const alpha = options.alpha ?? 0.65;
3367 3318 const carry = options.carry ?? 0.5;
3368 3319 const cUpperBound = options.cUpperBound ?? 0.45;
@@ -3499,11 +3450,10 @@
3499 3450 return tapered;
3500 3451 }
3501 3452 }
3502 3453 return clampToGamut({
3503 - space: oklch_default,
3504 - coords: [newL, newC, get(seed, [oklch_default, "h"])],
3505 - alpha: seed.alpha
3454 + spaceId: "oklch",
3455 + coords: [newL, newC, get(seed, [oklch_default, "h"])]
3506 3456 });
3507 3457 }
3508 3458 const mostContrastingL = direction === "lighter" ? 1 : 0;
3509 3459 const mostContrastingColor = direction === "lighter" ? WHITE : BLACK;
@@ -3663,9 +3613,8 @@
3663 3613 mainDirection,
3664 3614 pinLightness,
3665 3615 rescaleToFitContrastTargets = true
3666 3616 } = {}) {
3667 - assertValidSeedColor(seedArg);
3668 3617 let seed;
3669 3618 try {
3670 3619 seed = clampToGamut(seedArg);
3671 3620 } catch (error) {
@@ -3870,9 +3819,9 @@
3870 3819 stroke1: {
3871 3820 contrast: {
3872 3821 reference: "stroke3",
3873 3822 followDirection: "opposite",
3874 - target: 2.9
3823 + target: 2.6
3875 3824 },
3876 3825 taperChromaOptions: STROKE_TAPER_CHROMA
3877 3826 },
3878 3827 stroke2: {
@@ -4076,49 +4025,49 @@
4076 4025 "var(--wp-admin-theme-color-darker-20)"
4077 4026 ],
4078 4027 [
4079 4028 "--wp-components-color-accent-inverted",
4080 - "var(--wpds-color-foreground-interactive-brand-strong, #fff)"
4029 + "var(--wpds-color-fg-interactive-brand-strong, #fff)"
4081 4030 ],
4082 4031 [
4083 4032 "--wp-components-color-background",
4084 - "var(--wpds-color-background-surface-neutral-strong, #fff)"
4033 + "var(--wpds-color-bg-surface-neutral-strong, #ffffff)"
4085 4034 ],
4086 4035 [
4087 4036 "--wp-components-color-foreground",
4088 - "var(--wpds-color-foreground-content-neutral, #1e1e1e)"
4037 + "var(--wpds-color-fg-content-neutral, #1e1e1e)"
4089 4038 ],
4090 4039 [
4091 4040 "--wp-components-color-foreground-inverted",
4092 - "var(--wpds-color-background-surface-neutral, #fcfcfc)"
4041 + "var(--wpds-color-bg-surface-neutral, #f8f8f8)"
4093 4042 ],
4094 4043 [
4095 4044 "--wp-components-color-gray-100",
4096 - "var(--wpds-color-background-surface-neutral, #fcfcfc)"
4045 + "var(--wpds-color-bg-surface-neutral, #f8f8f8)"
4097 4046 ],
4098 4047 [
4099 4048 "--wp-components-color-gray-200",
4100 - "var(--wpds-color-stroke-surface-neutral, #dbdbdb)"
4049 + "var(--wpds-color-stroke-surface-neutral, #d8d8d8)"
4101 4050 ],
4102 4051 [
4103 4052 "--wp-components-color-gray-300",
4104 - "var(--wpds-color-stroke-surface-neutral, #dbdbdb)"
4053 + "var(--wpds-color-stroke-surface-neutral, #d8d8d8)"
4105 4054 ],
4106 4055 [
4107 4056 "--wp-components-color-gray-400",
4108 - "var(--wpds-color-stroke-interactive-neutral, #8d8d8d)"
4057 + "var(--wpds-color-stroke-interactive-neutral, #8a8a8a)"
4109 4058 ],
4110 4059 [
4111 4060 "--wp-components-color-gray-600",
4112 - "var(--wpds-color-stroke-interactive-neutral, #8d8d8d)"
4061 + "var(--wpds-color-stroke-interactive-neutral, #8a8a8a)"
4113 4062 ],
4114 4063 [
4115 4064 "--wp-components-color-gray-700",
4116 - "var(--wpds-color-foreground-content-neutral-weak, #707070)"
4065 + "var(--wpds-color-fg-content-neutral-weak, #6d6d6d)"
4117 4066 ],
4118 4067 [
4119 4068 "--wp-components-color-gray-800",
4120 - "var(--wpds-color-foreground-content-neutral, #1e1e1e)"
4069 + "var(--wpds-color-fg-content-neutral, #1e1e1e)"
4121 4070 ]
4122 4071 ];
4123 4072 function customRgbFormat(color) {
4124 4073 const rgb = to(color, srgb_default);
@@ -4124,9 +4073,8 @@
4124 4073 const rgb = to(color, srgb_default);
4125 4074 return rgb.coords.map((n2) => Math.round((n2 ?? 0) * 255)).join(", ");
4126 4075 }
4127 4076 function legacyWpAdminThemeOverridesCSS(accent) {
4128 - ColorSpace.register(srgb_default);
4129 4077 const parsedAccent = to(accent, hsl_default);
4130 4078 const parsedL = parsedAccent.coords[2] ?? 0;
4131 4079 const darker10 = set(
4132 4080 clone(parsedAccent),
@@ -4182,39 +4130,33 @@
4182 4130 ].flat()
4183 4131 );
4184 4132 }
4185 4133 function useThemeProviderStyles({
4186 - color = {},
4187 - cursor,
4188 - cornerRadius
4134 + color = {}
4189 4135 } = {}) {
4190 4136 const { resolvedSettings: inheritedSettings } = (0, import_element2.useContext)(ThemeContext);
4191 4137 const primary = color.primary ?? inheritedSettings.color?.primary ?? DEFAULT_SEED_COLORS.primary;
4192 - const background = color.background ?? inheritedSettings.color?.background ?? DEFAULT_SEED_COLORS.background;
4193 - const cursorControl = cursor?.control ?? inheritedSettings.cursor?.control;
4194 - const cornerRadiusPreset = cornerRadius ?? inheritedSettings.cornerRadius ?? "subtle";
4138 + const bg = color.bg ?? inheritedSettings.color?.bg ?? DEFAULT_SEED_COLORS.bg;
4195 4139 const resolvedSettings = (0, import_element2.useMemo)(
4196 4140 () => ({
4197 4141 color: {
4198 4142 primary,
4199 - background
4200 - },
4201 - cursor: cursorControl ? { control: cursorControl } : void 0,
4202 - cornerRadius: cornerRadiusPreset
4143 + bg
4144 + }
4203 4145 }),
4204 - [primary, background, cursorControl, cornerRadiusPreset]
4146 + [primary, bg]
4205 4147 );
4206 - const colorStyles = (0, import_element2.useMemo)(() => {
4148 + const themeProviderStyles = (0, import_element2.useMemo)(() => {
4207 4149 const seeds = {
4208 4150 ...DEFAULT_SEED_COLORS,
4209 - background,
4151 + bg,
4210 4152 primary
4211 4153 };
4212 4154 const computedColorRamps = /* @__PURE__ */ new Map();
4213 - const bgRamp = getCachedBgRamp(seeds.background);
4155 + const bgRamp = getCachedBgRamp(seeds.bg);
4214 4156 Object.entries(seeds).forEach(([rampName, seed]) => {
4215 - if (rampName === "background") {
4216 - computedColorRamps.set("bg", bgRamp);
4157 + if (rampName === "bg") {
4158 + computedColorRamps.set(rampName, bgRamp);
4217 4159 } else {
4218 4160 computedColorRamps.set(
4219 4161 rampName,
4220 4162 getCachedAccentRamp(seed, bgRamp)
@@ -4224,18 +4166,9 @@
4224 4166 return generateStyles({
4225 4167 primary: seeds.primary,
4226 4168 computedColorRamps
4227 4169 });
4228 - }, [primary, background]);
4229 - const themeProviderStyles = (0, import_element2.useMemo)(
4230 - () => ({
4231 - ...colorStyles,
4232 - ...cursorControl && {
4233 - "--wpds-cursor-control": cursorControl
4234 - }
4235 - }),
4236 - [colorStyles, cursorControl]
4237 - );
4170 + }, [primary, bg]);
4238 4171 return {
4239 4172 resolvedSettings,
4240 4173 themeProviderStyles
4241 4174 };
@@ -4242,106 +4175,43 @@
4242 4175 }
4243 4176
4244 4177 // packages/theme/build-module/theme-provider.mjs
4245 4178 var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
4246 - var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
4247 - function getRuntime() {
4248 - const globalScope = globalThis;
4249 - if (globalScope.__wpStyleRuntime) {
4250 - return globalScope.__wpStyleRuntime;
4251 - }
4252 - globalScope.__wpStyleRuntime = {
4253 - documents: /* @__PURE__ */ new Map(),
4254 - styles: /* @__PURE__ */ new Map(),
4255 - injectedStyles: /* @__PURE__ */ new WeakMap()
4256 - };
4257 - if (typeof document !== "undefined") {
4258 - registerDocument(document);
4259 - }
4260 - return globalScope.__wpStyleRuntime;
4179 + if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='662a5161a8']")) {
4180 + const style = document.createElement("style");
4181 + style.setAttribute("data-wp-hash", "662a5161a8");
4182 + style.appendChild(document.createTextNode(".dba930ea7a9438fd__root{display:contents}"));
4183 + document.head.appendChild(style);
4261 4184 }
4262 - function documentContainsStyleHash(targetDocument, hash) {
4263 - if (!targetDocument.head) {
4264 - return false;
4265 - }
4266 - for (const style of targetDocument.head.querySelectorAll(
4267 - `style[${STYLE_HASH_ATTRIBUTE}]`
4268 - )) {
4269 - if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
4270 - return true;
4271 - }
4272 - }
4273 - return false;
4185 + var style_default = { "root": "dba930ea7a9438fd__root" };
4186 + function cssObjectToText(values) {
4187 + return Object.entries(values).map(([key, value]) => `${key}: ${value};`).join("");
4274 4188 }
4275 - function injectStyle(targetDocument, hash, css) {
4276 - if (!targetDocument.head) {
4277 - return;
4189 + function generateCSSSelector({
4190 + instanceId,
4191 + isRoot
4192 + }) {
4193 + const rootSel = `[data-wpds-root-provider="true"]`;
4194 + const instanceIdSel = `[data-wpds-theme-provider-id="${instanceId}"]`;
4195 + const selectors = [];
4196 + if (isRoot) {
4197 + selectors.push(
4198 + `:root:has(.${style_default.root}${rootSel}${instanceIdSel})`
4199 + );
4278 4200 }
4279 - const runtime = getRuntime();
4280 - let injectedStyles = runtime.injectedStyles.get(targetDocument);
4281 - if (!injectedStyles) {
4282 - injectedStyles = /* @__PURE__ */ new Set();
4283 - runtime.injectedStyles.set(targetDocument, injectedStyles);
4284 - }
4285 - if (injectedStyles.has(hash)) {
4286 - return;
4287 - }
4288 - if (documentContainsStyleHash(targetDocument, hash)) {
4289 - injectedStyles.add(hash);
4290 - return;
4291 - }
4292 - const style = targetDocument.createElement("style");
4293 - style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
4294 - style.appendChild(targetDocument.createTextNode(css));
4295 - targetDocument.head.appendChild(style);
4296 - injectedStyles.add(hash);
4201 + selectors.push(`.${style_default.root}.${style_default.root}${instanceIdSel}`);
4202 + return selectors.join(",");
4297 4203 }
4298 - function registerDocument(targetDocument) {
4299 - const runtime = getRuntime();
4300 - runtime.documents.set(
4301 - targetDocument,
4302 - (runtime.documents.get(targetDocument) ?? 0) + 1
4303 - );
4304 - for (const [hash, css] of runtime.styles) {
4305 - injectStyle(targetDocument, hash, css);
4306 - }
4307 - return () => {
4308 - const count = runtime.documents.get(targetDocument);
4309 - if (count === void 0) {
4310 - return;
4311 - }
4312 - if (count <= 1) {
4313 - runtime.documents.delete(targetDocument);
4314 - return;
4315 - }
4316 - runtime.documents.set(targetDocument, count - 1);
4317 - };
4318 - }
4319 - function registerStyle(hash, css) {
4320 - const runtime = getRuntime();
4321 - runtime.styles.set(hash, css);
4322 - for (const targetDocument of runtime.documents.keys()) {
4323 - injectStyle(targetDocument, hash, css);
4324 - }
4325 - }
4326 - if (typeof process === "undefined" || true) {
4327 - registerStyle("f4e6e06c6a", ".dba930ea7a9438fd__root{display:contents}");
4328 - }
4329 - var style_default = { "root": "dba930ea7a9438fd__root" };
4330 - var rootProviderCountByDocument = /* @__PURE__ */ new WeakMap();
4331 4204 var ThemeProvider = ({
4332 4205 children,
4333 4206 color = {},
4334 - cursor,
4335 - cornerRadius,
4336 - isRoot = false
4207 + isRoot = false,
4208 + density
4337 4209 }) => {
4210 + const instanceId = (0, import_element3.useId)();
4338 4211 const { themeProviderStyles, resolvedSettings } = useThemeProviderStyles({
4339 - color,
4340 - cursor,
4341 - cornerRadius
4212 + color
4342 4213 });
4343 - const cornerRadiusPreset = resolvedSettings.cornerRadius ?? "subtle";
4344 4214 const contextValue = (0, import_element3.useMemo)(
4345 4215 () => ({
4346 4216 resolvedSettings
4347 4217 }),
@@ -4346,94 +4216,31 @@
4346 4216 resolvedSettings
4347 4217 }),
4348 4218 [resolvedSettings]
4349 4219 );
4350 - const wrapperRef = (0, import_element3.useRef)(null);
4351 - (0, import_compose.useIsomorphicLayoutEffect)(() => {
4352 - if (!isRoot) {
4353 - return;
4354 - }
4355 - const doc = wrapperRef.current?.ownerDocument;
4356 - if (!doc) {
4357 - return;
4358 - }
4359 - const root = doc.documentElement;
4360 - if (true) {
4361 - const active = rootProviderCountByDocument.get(doc) ?? 0;
4362 - if (active > 0) {
4363 - console.warn(
4364 - "ThemeProvider: More than one root provider (`isRoot`) is mounted on the same document. Their forwarded document-level styles conflict, and unmounting one can reset the others. Render a single root provider per document."
4365 - );
4220 + return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
4221 + themeProviderStyles ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `${generateCSSSelector({
4222 + instanceId,
4223 + isRoot
4224 + })} {${cssObjectToText(themeProviderStyles)}}` }) : null,
4225 + /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
4226 + "div",
4227 + {
4228 + "data-wpds-theme-provider-id": instanceId,
4229 + "data-wpds-root-provider": isRoot,
4230 + "data-wpds-density": density,
4231 + className: style_default.root,
4232 + children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children })
4366 4233 }
4367 - rootProviderCountByDocument.set(doc, active + 1);
4368 - }
4369 - const previous = /* @__PURE__ */ new Map();
4370 - const applied = [];
4371 - for (const [rawKey, rawValue] of Object.entries(
4372 - themeProviderStyles
4373 - )) {
4374 - if (!rawKey.startsWith("--") || rawValue === null || rawValue === void 0) {
4375 - continue;
4376 - }
4377 - previous.set(rawKey, root.style.getPropertyValue(rawKey));
4378 - root.style.setProperty(rawKey, String(rawValue));
4379 - applied.push(rawKey);
4380 - }
4381 - return () => {
4382 - if (true) {
4383 - const active = rootProviderCountByDocument.get(doc) ?? 1;
4384 - if (active <= 1) {
4385 - rootProviderCountByDocument.delete(doc);
4386 - } else {
4387 - rootProviderCountByDocument.set(doc, active - 1);
4388 - }
4389 - }
4390 - for (const key of applied) {
4391 - const prev = previous.get(key);
4392 - if (prev) {
4393 - root.style.setProperty(key, prev);
4394 - } else {
4395 - root.style.removeProperty(key);
4396 - }
4397 - }
4398 - };
4399 - }, [isRoot, themeProviderStyles]);
4400 - return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
4401 - "div",
4402 - {
4403 - ref: wrapperRef,
4404 - "data-wpds-root-provider": isRoot || void 0,
4405 - "data-wpds-corner-radius": cornerRadiusPreset,
4406 - className: style_default.root,
4407 - style: themeProviderStyles,
4408 - children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children })
4409 - }
4410 - );
4234 + )
4235 + ] });
4411 4236 };
4412 4237
4413 4238 // packages/theme/build-module/private-apis.mjs
4414 - function warnPrivateApi(apiName, options = {}) {
4415 - (0, import_deprecated.default)(`\`privateApis.${apiName}\` from \`@wordpress/theme\``, {
4416 - since: "7.1",
4417 - version: "7.3",
4418 - ...options
4419 - });
4420 - }
4421 4239 var privateApis = {};
4422 4240 lock(privateApis, {
4423 - get ThemeProvider() {
4424 - warnPrivateApi("ThemeProvider", {
4425 - alternative: "`ThemeProvider` from `@wordpress/theme`"
4426 - });
4427 - return ThemeProvider;
4428 - },
4429 - get useThemeProviderStyles() {
4430 - warnPrivateApi("useThemeProviderStyles", {
4431 - alternative: "`ThemeProvider` from `@wordpress/theme` for supported theming use cases",
4432 - hint: "`useThemeProviderStyles` has no public replacement."
4433 - });
4434 - return useThemeProviderStyles;
4435 - }
4241 + ThemeProvider,
4242 + useThemeProviderStyles
4436 4243 });
4437 4244 return __toCommonJS(index_exports);
4438 4245 })();
4439 4246 //# sourceMappingURL=index.js.map