@wordpress/theme 0.2.0 → 0.2.1-next.dc3f6d3c1.0

package/build/prebuilt/json/figma.json

@@ -50,13 +50,13 @@
 	},
 	"Color/Semantic/Background/Brand/bgSur-brand": {
 		"value": {
-			".": "#edf0fa"
+			".": "#ecf0f9"
 		},
 		"description": "Background color for surfaces with brand tone and normal emphasis."
 	},
 	"Color/Semantic/Background/Success/bgSur-success": {
 		"value": {
-			".": "#cdf5d3"
+			".": "#cbf5d1"
 		},
 		"description": "Background color for surfaces with success tone and normal emphasis."
 	},
@@ -68,7 +68,7 @@
 	},
 	"Color/Semantic/Background/Info/bgSur-info": {
 		"value": {
-			".": "#e0ebf8"
+			".": "#dfebf8"
 		},
 		"description": "Background color for surfaces with info tone and normal emphasis."
 	},
@@ -80,7 +80,7 @@
 	},
 	"Color/Semantic/Background/Warning/bgSur-warning": {
 		"value": {
-			".": "#f8e9cd"
+			".": "#f8e8cc"
 		},
 		"description": "Background color for surfaces with warning tone and normal emphasis."
 	},
@@ -92,7 +92,7 @@
 	},
 	"Color/Semantic/Background/Caution/bgSur-caution": {
 		"value": {
-			".": "#f8ebb5"
+			".": "#f7eab3"
 		},
 		"description": "Background color for surfaces with caution tone and normal emphasis."
 	},
@@ -104,7 +104,7 @@
 	},
 	"Color/Semantic/Background/Error/bgSur-error": {
 		"value": {
-			".": "#fae5e2"
+			".": "#fae4e1"
 		},
 		"description": "Background color for surfaces with error tone and normal emphasis."
 	},
@@ -128,7 +128,7 @@
 	},
 	"Color/Semantic/Background/Neutral/bgInt-neutral-disabled": {
 		"value": {
-			".": "#e3e3e3"
+			".": "#e2e2e2"
 		},
 		"description": "Background color for interactive elements with neutral tone and normal emphasis, in their disabled state."
 	},
@@ -146,7 +146,7 @@
 	},
 	"Color/Semantic/Background/Neutral/bgInt-neutral-strong-disabled": {
 		"value": {
-			".": "#d3d3d3"
+			".": "#d2d2d2"
 		},
 		"description": "Background color for interactive elements with neutral tone and strong emphasis, in their disabled state."
 	},
@@ -164,7 +164,7 @@
 	},
 	"Color/Semantic/Background/Neutral/bgInt-neutral-weak-disabled": {
 		"value": {
-			".": "#e3e3e3"
+			".": "#e2e2e2"
 		},
 		"description": "Background color for interactive elements with neutral tone and weak emphasis, in their disabled state."
 	},
@@ -182,7 +182,7 @@
 	},
 	"Color/Semantic/Background/Brand/bgInt-brand-disabled": {
 		"value": {
-			".": "#e3e3e3"
+			".": "#e2e2e2"
 		},
 		"description": "Background color for interactive elements with brand tone and normal emphasis, in their disabled state."
 	},
@@ -194,13 +194,13 @@
 	},
 	"Color/Semantic/Background/Brand/bgInt-brand-strong-active": {
 		"value": {
-			".": "#2e49da"
+			".": "#2e49d9"
 		},
 		"description": "Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active."
 	},
 	"Color/Semantic/Background/Brand/bgInt-brand-strong-disabled": {
 		"value": {
-			".": "#d3d3d3"
+			".": "#d2d2d2"
 		},
 		"description": "Background color for interactive elements with brand tone and strong emphasis, in their disabled state."
 	},
@@ -212,37 +212,37 @@
 	},
 	"Color/Semantic/Background/Brand/bgInt-brand-weak-active": {
 		"value": {
-			".": "#e5ebf7"
+			".": "#e4eaf7"
 		},
 		"description": "Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active."
 	},
 	"Color/Semantic/Background/Brand/bgInt-brand-weak-disabled": {
 		"value": {
-			".": "#e3e3e3"
+			".": "#e2e2e2"
 		},
 		"description": "Background color for interactive elements with brand tone and weak emphasis, in their disabled state."
 	},
 	"Color/Semantic/Background/Neutral/bgTra-neutral-weak": {
 		"value": {
-			".": "#cfcfcf"
+			".": "#e0e0e0"
 		},
 		"description": "Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track)."
 	},
 	"Color/Semantic/Background/Neutral/bgTra-neutral": {
 		"value": {
-			".": "#adadad"
+			".": "#d8d8d8"
 		},
 		"description": "Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track)."
 	},
 	"Color/Semantic/Background/Neutral/bgThu-neutral-weak": {
 		"value": {
-			".": "#8b8b8b"
+			".": "#8a8a8a"
 		},
 		"description": "Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb)."
 	},
 	"Color/Semantic/Background/Neutral/bgThu-neutral-weak-active": {
 		"value": {
-			".": "#6d6d6d"
+			".": "#6c6c6c"
 		},
 		"description": "Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active."
 	},
@@ -260,7 +260,7 @@
 	},
 	"Color/Semantic/Background/Brand/bgThu-brand-disabled": {
 		"value": {
-			".": "#adadad"
+			".": "#d8d8d8"
 		},
 		"description": "Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state."
 	},
@@ -272,61 +272,61 @@
 	},
 	"Color/Semantic/Foreground/Neutral/fgCon-neutral-weak": {
 		"value": {
-			".": "#6e6e6e"
+			".": "#6d6d6d"
 		},
 		"description": "Foreground color for content like text with weak emphasis."
 	},
 	"Color/Semantic/Foreground/Success/fgCon-success": {
 		"value": {
-			".": "#002b00"
+			".": "#002900"
 		},
 		"description": "Foreground color for content like text with success tone and normal emphasis."
 	},
 	"Color/Semantic/Foreground/Success/fgCon-success-weak": {
 		"value": {
-			".": "#008031"
+			".": "#007f30"
 		},
 		"description": "Foreground color for content like text with success tone and weak emphasis."
 	},
 	"Color/Semantic/Foreground/Info/fgCon-info": {
 		"value": {
-			".": "#001758"
+			".": "#001b4f"
 		},
 		"description": "Foreground color for content like text with info tone and normal emphasis."
 	},
 	"Color/Semantic/Foreground/Info/fgCon-info-weak": {
 		"value": {
-			".": "#006dd9"
+			".": "#006bd7"
 		},
 		"description": "Foreground color for content like text with info tone and weak emphasis."
 	},
 	"Color/Semantic/Foreground/Warning/fgCon-warning": {
 		"value": {
-			".": "#2f1800"
+			".": "#2e1900"
 		},
 		"description": "Foreground color for content like text with warning tone and normal emphasis."
 	},
 	"Color/Semantic/Foreground/Warning/fgCon-warning-weak": {
 		"value": {
-			".": "#976300"
+			".": "#936400"
 		},
 		"description": "Foreground color for content like text with warning tone and weak emphasis."
 	},
 	"Color/Semantic/Foreground/Caution/fgCon-caution": {
 		"value": {
-			".": "#291d00"
+			".": "#281d00"
 		},
 		"description": "Foreground color for content like text with caution tone and normal emphasis."
 	},
 	"Color/Semantic/Foreground/Caution/fgCon-caution-weak": {
 		"value": {
-			".": "#876b00"
+			".": "#836b00"
 		},
 		"description": "Foreground color for content like text with caution tone and weak emphasis."
 	},
 	"Color/Semantic/Foreground/Error/fgCon-error": {
 		"value": {
-			".": "#4a0000"
+			".": "#470000"
 		},
 		"description": "Foreground color for content like text with error tone and normal emphasis."
 	},
@@ -350,7 +350,7 @@
 	},
 	"Color/Semantic/Foreground/Neutral/fgInt-neutral-disabled": {
 		"value": {
-			".": "#8b8b8b"
+			".": "#8a8a8a"
 		},
 		"description": "Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state."
 	},
@@ -368,19 +368,19 @@
 	},
 	"Color/Semantic/Foreground/Neutral/fgInt-neutral-strong-disabled": {
 		"value": {
-			".": "#6e6e6e"
+			".": "#6d6d6d"
 		},
 		"description": "Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state."
 	},
 	"Color/Semantic/Foreground/Neutral/fgInt-neutral-weak": {
 		"value": {
-			".": "#6e6e6e"
+			".": "#6d6d6d"
 		},
 		"description": "Foreground color for interactive elements with neutral tone and weak emphasis."
 	},
 	"Color/Semantic/Foreground/Neutral/fgInt-neutral-weak-disabled": {
 		"value": {
-			".": "#8b8b8b"
+			".": "#8a8a8a"
 		},
 		"description": "Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state."
 	},
@@ -398,7 +398,7 @@
 	},
 	"Color/Semantic/Foreground/Brand/fgInt-brand-disabled": {
 		"value": {
-			".": "#8b8b8b"
+			".": "#8a8a8a"
 		},
 		"description": "Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state."
 	},
@@ -416,31 +416,31 @@
 	},
 	"Color/Semantic/Foreground/Brand/fgInt-brand-strong-disabled": {
 		"value": {
-			".": "#6e6e6e"
+			".": "#6d6d6d"
 		},
 		"description": "Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state."
 	},
 	"Color/Semantic/Stroke/Neutral/strokeSur-neutral": {
 		"value": {
-			".": "#adadad"
+			".": "#d8d8d8"
 		},
 		"description": "Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis."
 	},
 	"Color/Semantic/Stroke/Neutral/strokeSur-neutral-weak": {
 		"value": {
-			".": "#cfcfcf"
+			".": "#e0e0e0"
 		},
 		"description": "Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis."
 	},
 	"Color/Semantic/Stroke/Neutral/strokeSur-neutral-strong": {
 		"value": {
-			".": "#8b8b8b"
+			".": "#8a8a8a"
 		},
 		"description": "Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis."
 	},
 	"Color/Semantic/Stroke/Brand/strokeSur-brand": {
 		"value": {
-			".": "#91a2cf"
+			".": "#a2b1d6"
 		},
 		"description": "Decorative stroke color used to define brand-toned surface boundaries with normal emphasis."
 	},
@@ -452,43 +452,43 @@
 	},
 	"Color/Semantic/Stroke/Success/strokeSur-success": {
 		"value": {
-			".": "#77ba84"
+			".": "#82c98f"
 		},
 		"description": "Decorative stroke color used to define success-toned surface boundaries with normal emphasis."
 	},
 	"Color/Semantic/Stroke/Success/strokeSur-success-strong": {
 		"value": {
-			".": "#008031"
+			".": "#007f30"
 		},
 		"description": "Decorative stroke color used to define success-toned surface boundaries with strong emphasis."
 	},
 	"Color/Semantic/Stroke/Info/strokeSur-info": {
 		"value": {
-			".": "#8aaed6"
+			".": "#9fbcdd"
 		},
 		"description": "Decorative stroke color used to define info-toned surface boundaries with normal emphasis."
 	},
 	"Color/Semantic/Stroke/Info/strokeSur-info-strong": {
 		"value": {
-			".": "#006dd9"
+			".": "#006bd7"
 		},
 		"description": "Decorative stroke color used to define info-toned surface boundaries with strong emphasis."
 	},
 	"Color/Semantic/Stroke/Warning/strokeSur-warning": {
 		"value": {
-			".": "#c2a776"
+			".": "#d2b581"
 		},
 		"description": "Decorative stroke color used to define warning-toned surface boundaries with normal emphasis."
 	},
 	"Color/Semantic/Stroke/Warning/strokeSur-warning-strong": {
 		"value": {
-			".": "#976300"
+			".": "#936400"
 		},
 		"description": "Decorative stroke color used to define warning-toned surface boundaries with strong emphasis."
 	},
 	"Color/Semantic/Stroke/Error/strokeSur-error": {
 		"value": {
-			".": "#dc8e83"
+			".": "#e1a198"
 		},
 		"description": "Decorative stroke color used to define error-toned surface boundaries with normal emphasis."
 	},
@@ -500,25 +500,25 @@
 	},
 	"Color/Semantic/Stroke/Neutral/strokeInt-neutral": {
 		"value": {
-			".": "#8b8b8b"
+			".": "#8a8a8a"
 		},
 		"description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis."
 	},
 	"Color/Semantic/Stroke/Neutral/strokeInt-neutral-active": {
 		"value": {
-			".": "#6d6d6d"
+			".": "#6c6c6c"
 		},
 		"description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active."
 	},
 	"Color/Semantic/Stroke/Neutral/strokeInt-neutral-disabled": {
 		"value": {
-			".": "#adadad"
+			".": "#d8d8d8"
 		},
 		"description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state."
 	},
 	"Color/Semantic/Stroke/Neutral/strokeInt-neutral-strong": {
 		"value": {
-			".": "#6d6d6d"
+			".": "#6c6c6c"
 		},
 		"description": "Accessible stroke color used for interactive neutrally-toned elements with strong emphasis."
 	},
@@ -536,7 +536,7 @@
 	},
 	"Color/Semantic/Stroke/Brand/strokeInt-brand-disabled": {
 		"value": {
-			".": "#adadad"
+			".": "#d8d8d8"
 		},
 		"description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state."
 	},

package/build/use-theme-provider-styles.js

@@ -162,10 +162,7 @@ function colorTokensCSS(computedColorRamps) {
       const key = `${rampName}-${tokenName}`;
       const aliasedBy = import_color_tokens.default[key] ?? [];
       for (const aliasedId of aliasedBy) {
-        entries.push([
-          `--wpds-color-${aliasedId}`,
-          tokenValue.color
-        ]);
+        entries.push([`--wpds-color-${aliasedId}`, tokenValue]);
       }
     }
   }

package/build/use-theme-provider-styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/use-theme-provider-styles.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\nimport {\n\tparse,\n\tto,\n\tget,\n\tserialize,\n\tsRGB,\n\tHSL,\n\ttype ColorTypes,\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 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)',\n\t],\n\t[\n\t\t'--wp-components-color-background',\n\t\t'var(--wpds-color-bg-surface-neutral-strong)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground',\n\t\t'var(--wpds-color-fg-content-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground-inverted',\n\t\t'var(--wpds-color-bg-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-100',\n\t\t'var(--wpds-color-bg-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-200',\n\t\t'var(--wpds-color-stroke-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-300',\n\t\t'var(--wpds-color-stroke-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-400',\n\t\t'var(--wpds-color-stroke-interactive-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-600',\n\t\t'var(--wpds-color-stroke-interactive-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-700',\n\t\t'var(--wpds-color-fg-content-neutral-weak)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-800',\n\t\t'var(--wpds-color-fg-content-neutral)',\n\t],\n];\n\nfunction customRgbFormat( color: ColorTypes ) {\n\tconst rgb = to( color, sRGB );\n\treturn [ get( rgb, 'srgb.r' ), get( rgb, 'srgb.g' ), get( rgb, 'srgb.b' ) ]\n\t\t.map( ( n ) => Math.round( n * 255 ) )\n\t\t.join( ', ' );\n}\n\nfunction legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {\n\tconst parsedAccent = to( parse( accent ), HSL );\n\n\tconst coords = parsedAccent.coords;\n\tconst darker10 = to(\n\t\t{\n\t\t\tspace: HSL,\n\t\t\tcoords: [\n\t\t\t\tcoords[ 0 ], // h\n\t\t\t\tcoords[ 1 ], // s\n\t\t\t\tMath.max( 0, Math.min( 100, coords[ 2 ] - 5 ) ), // l (reduced by 5%)\n\t\t\t],\n\t\t},\n\t\tsRGB\n\t);\n\tconst darker20 = to(\n\t\t{\n\t\t\tspace: HSL,\n\t\t\tcoords: [\n\t\t\t\tcoords[ 0 ], // h\n\t\t\t\tcoords[ 1 ], // s\n\t\t\t\tMath.max( 0, Math.min( 100, coords[ 2 ] - 10 ) ), // l (reduced by 10%)\n\t\t\t],\n\t\t},\n\t\tsRGB\n\t);\n\n\treturn [\n\t\t[\n\t\t\t'--wp-admin-theme-color',\n\t\t\tserialize( to( parsedAccent, sRGB ), { format: 'hex' } ),\n\t\t],\n\t\t[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-10',\n\t\t\tserialize( darker10, { format: 'hex' } ),\n\t\t],\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[\n\t\t\t'--wp-admin-theme-color-darker-20',\n\t\t\tserialize( darker20, { format: 'hex' } ),\n\t\t],\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( [\n\t\t\t\t\t`--wpds-color-${ aliasedId }`,\n\t\t\t\t\ttokenValue.color,\n\t\t\t\t] );\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 themeProviderStyles = 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\treturn {\n\t\tresolvedSettings,\n\t\tthemeProviderStyles,\n\t};\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\nimport {\n\tparse,\n\tto,\n\tget,\n\tserialize,\n\tsRGB,\n\tHSL,\n\ttype ColorTypes,\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 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)',\n\t],\n\t[\n\t\t'--wp-components-color-background',\n\t\t'var(--wpds-color-bg-surface-neutral-strong)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground',\n\t\t'var(--wpds-color-fg-content-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground-inverted',\n\t\t'var(--wpds-color-bg-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-100',\n\t\t'var(--wpds-color-bg-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-200',\n\t\t'var(--wpds-color-stroke-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-300',\n\t\t'var(--wpds-color-stroke-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-400',\n\t\t'var(--wpds-color-stroke-interactive-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-600',\n\t\t'var(--wpds-color-stroke-interactive-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-700',\n\t\t'var(--wpds-color-fg-content-neutral-weak)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-800',\n\t\t'var(--wpds-color-fg-content-neutral)',\n\t],\n];\n\nfunction customRgbFormat( color: ColorTypes ) {\n\tconst rgb = to( color, sRGB );\n\treturn [ get( rgb, 'srgb.r' ), get( rgb, 'srgb.g' ), get( rgb, 'srgb.b' ) ]\n\t\t.map( ( n ) => Math.round( n * 255 ) )\n\t\t.join( ', ' );\n}\n\nfunction legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {\n\tconst parsedAccent = to( parse( accent ), HSL );\n\n\tconst coords = parsedAccent.coords;\n\tconst darker10 = to(\n\t\t{\n\t\t\tspace: HSL,\n\t\t\tcoords: [\n\t\t\t\tcoords[ 0 ], // h\n\t\t\t\tcoords[ 1 ], // s\n\t\t\t\tMath.max( 0, Math.min( 100, coords[ 2 ] - 5 ) ), // l (reduced by 5%)\n\t\t\t],\n\t\t},\n\t\tsRGB\n\t);\n\tconst darker20 = to(\n\t\t{\n\t\t\tspace: HSL,\n\t\t\tcoords: [\n\t\t\t\tcoords[ 0 ], // h\n\t\t\t\tcoords[ 1 ], // s\n\t\t\t\tMath.max( 0, Math.min( 100, coords[ 2 ] - 10 ) ), // l (reduced by 10%)\n\t\t\t],\n\t\t},\n\t\tsRGB\n\t);\n\n\treturn [\n\t\t[\n\t\t\t'--wp-admin-theme-color',\n\t\t\tserialize( to( parsedAccent, sRGB ), { format: 'hex' } ),\n\t\t],\n\t\t[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-10',\n\t\t\tserialize( darker10, { format: 'hex' } ),\n\t\t],\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[\n\t\t\t'--wp-admin-theme-color-darker-20',\n\t\t\tserialize( darker20, { format: 'hex' } ),\n\t\t],\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 themeProviderStyles = 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\treturn {\n\t\tresolvedSettings,\n\t\tthemeProviderStyles,\n\t};\n}\n"],
+  "mappings": "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",
   "names": ["memoize", "colorTokens"]
 }

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

@@ -1,5 +1,5 @@
 // packages/theme/src/color-ramps/index.ts
-import { get, OKLCH, parse, serialize } from "colorjs.io/fn";
+import { get, OKLCH, parse } from "colorjs.io/fn";
 import "./lib/register-color-spaces";
 import { buildRamp } from "./lib/index";
 import { clampAccentScaleReferenceLightness } from "./lib/utils";
@@ -20,7 +20,7 @@ function getBgRampInfo(ramp) {
     pinLightness: {
       stepName: STEP_TO_PIN,
       value: clampAccentScaleReferenceLightness(
-        get(parse(ramp.ramp[STEP_TO_PIN].color), [OKLCH, "l"]),
+        get(parse(ramp.ramp[STEP_TO_PIN]), [OKLCH, "l"]),
         ramp.direction
       )
     }
@@ -42,15 +42,17 @@ function checkAccessibleCombinations({
     CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
       for (const bg of bgs) {
         for (const fg of fgs) {
-          const bgColor = parse(ramp.ramp[bg].color);
-          const fgColor = parse(ramp.ramp[fg].color);
-          if (getContrast(bgColor, fgColor) < target) {
+          const bgColor = ramp.ramp[bg];
+          const fgColor = ramp.ramp[fg];
+          const achievedContrast = getContrast(bgColor, fgColor);
+          if (achievedContrast < target) {
             unmetTargets.push({
               bgName: bg,
-              bgColor: serialize(bgColor),
+              bgColor,
               fgName: fg,
-              fgColor: serialize(fgColor),
-              unmetContrast: target
+              fgColor,
+              unmetContrast: target,
+              achievedContrast
             });
           }
         }
@@ -61,15 +63,17 @@ function checkAccessibleCombinations({
     CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
       for (const bg of bgs) {
         for (const fg of fgs) {
-          const bgColor = parse(bgRamp.ramp[bg].color);
-          const fgColor = parse(ramp.ramp[fg].color);
-          if (getContrast(bgColor, fgColor) < target) {
+          const bgColor = bgRamp.ramp[bg];
+          const fgColor = ramp.ramp[fg];
+          const achievedContrast = getContrast(bgColor, fgColor);
+          if (achievedContrast < target) {
             unmetTargets.push({
               bgName: bg,
-              bgColor: serialize(bgColor),
+              bgColor,
               fgName: fg,
-              fgColor: serialize(fgColor),
-              unmetContrast: target
+              fgColor,
+              unmetContrast: target,
+              achievedContrast
             });
           }
         }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-ramps/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, parse, serialize } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './lib/register-color-spaces';\nimport { buildRamp } from './lib/index';\nimport { clampAccentScaleReferenceLightness } from './lib/utils';\nimport { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';\nimport type {\n\tRampResult as InternalRampResult,\n\tRampDirection,\n\tRamp,\n} from './lib/types';\nimport { getContrast } from './lib/color-utils';\nimport { CONTRAST_COMBINATIONS } from './lib/constants';\nexport { DEFAULT_SEED_COLORS } from './lib/constants';\n\n/**\n * Creates a background ramp.\n * @param seed The seed color for the background ramp.\n */\nexport function buildBgRamp( seed: string ) {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\treturn buildRamp( seed, BG_RAMP_CONFIG );\n}\n\nconst STEP_TO_PIN = 'surface2';\nfunction getBgRampInfo( ramp: InternalRampResult ): {\n\tmainDirection: RampDirection;\n\tpinLightness: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} {\n\treturn {\n\t\tmainDirection: ramp.direction,\n\t\tpinLightness: {\n\t\t\tstepName: STEP_TO_PIN,\n\t\t\tvalue: clampAccentScaleReferenceLightness(\n\t\t\t\tget( parse( ramp.ramp[ STEP_TO_PIN ].color ), [ OKLCH, 'l' ] ),\n\t\t\t\tramp.direction\n\t\t\t),\n\t\t},\n\t};\n}\n\n/**\n * Creates an accent ramp (ie used by primary, success, info, warning and error\n * ramps).\n * @param seed   The seed color for the accent ramp.\n * @param bgRamp The ramp of the background on which the accent is shown.\n */\nexport function buildAccentRamp(\n\tseed: string,\n\tbgRamp?: InternalRampResult\n): InternalRampResult {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\tconst bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;\n\treturn buildRamp( seed, ACCENT_RAMP_CONFIG, bgRampInfo );\n}\n\n/**\n * Checks that all bg/fg combinations generated by the ramps meet contrast\n * targets.\n * @param params\n * @param params.bgRamp\n * @param params.accentRamps\n */\nexport function checkAccessibleCombinations( {\n\tbgRamp,\n\taccentRamps = [],\n}: {\n\tbgRamp: InternalRampResult;\n\taccentRamps?: InternalRampResult[];\n} ) {\n\tconst unmetTargets: {\n\t\tbgName: keyof Ramp;\n\t\tbgColor: string;\n\t\tfgName: keyof Ramp;\n\t\tfgColor: string;\n\t\tunmetContrast: number;\n\t}[] = [];\n\n\t// Assess combinations within each ramp\n\t[ bgRamp, ...accentRamps ].forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = parse( ramp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: serialize( bgColor ),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: serialize( fgColor ),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\t// Assess each accent ramp's fg color against bg ramp\n\taccentRamps.forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = parse( bgRamp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: serialize( bgColor ),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: serialize( fgColor ),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn unmetTargets;\n}\n\nexport type RampResult = InternalRampResult;\n"],
-  "mappings": ";AAGA,SAAS,KAAK,OAAO,OAAO,iBAAiB;AAK7C,OAAO;AACP,SAAS,iBAAiB;AAC1B,SAAS,0CAA0C;AACnD,SAAS,gBAAgB,0BAA0B;AAMnD,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AAM7B,SAAS,YAAa,MAAe;AAC3C,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,SAAO,UAAW,MAAM,cAAe;AACxC;AAEA,IAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,OAAO;AAAA,QACN,IAAK,MAAO,KAAK,KAAM,WAAY,EAAE,KAAM,GAAG,CAAE,OAAO,GAAI,CAAE;AAAA,QAC7D,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACD;AAQO,SAAS,gBACf,MACA,QACqB;AACrB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,QAAM,aAAa,SAAS,cAAe,MAAO,IAAI;AACtD,SAAO,UAAW,MAAM,oBAAoB,UAAW;AACxD;AASO,SAAS,4BAA6B;AAAA,EAC5C;AAAA,EACA,cAAc,CAAC;AAChB,GAGI;AACH,QAAM,eAMA,CAAC;AAGP,GAAE,QAAQ,GAAG,WAAY,EAAE,QAAS,CAAE,SAAU;AAC/C,0BAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,MAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,gBAAM,UAAU,MAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,cAAK,YAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,SAAS,UAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,SAAS,UAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,cAAY,QAAS,CAAE,SAAU;AAChC,0BAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,MAAO,OAAO,KAAM,EAAG,EAAE,KAAM;AAC/C,gBAAM,UAAU,MAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,cAAK,YAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,SAAS,UAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,SAAS,UAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, parse } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './lib/register-color-spaces';\nimport { buildRamp } from './lib/index';\nimport { clampAccentScaleReferenceLightness } from './lib/utils';\nimport { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';\nimport type {\n\tRampResult as InternalRampResult,\n\tRampDirection,\n\tRamp,\n} from './lib/types';\nimport { getContrast } from './lib/color-utils';\nimport { CONTRAST_COMBINATIONS } from './lib/constants';\nexport { DEFAULT_SEED_COLORS } from './lib/constants';\n\n/**\n * Creates a background ramp.\n * @param seed The seed color for the background ramp.\n */\nexport function buildBgRamp( seed: string ) {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\treturn buildRamp( seed, BG_RAMP_CONFIG );\n}\n\nconst STEP_TO_PIN = 'surface2';\nfunction getBgRampInfo( ramp: InternalRampResult ): {\n\tmainDirection: RampDirection;\n\tpinLightness: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} {\n\treturn {\n\t\tmainDirection: ramp.direction,\n\t\tpinLightness: {\n\t\t\tstepName: STEP_TO_PIN,\n\t\t\tvalue: clampAccentScaleReferenceLightness(\n\t\t\t\tget( parse( ramp.ramp[ STEP_TO_PIN ] ), [ OKLCH, 'l' ] ),\n\t\t\t\tramp.direction\n\t\t\t),\n\t\t},\n\t};\n}\n\n/**\n * Creates an accent ramp (ie used by primary, success, info, warning and error\n * ramps).\n * @param seed   The seed color for the accent ramp.\n * @param bgRamp The ramp of the background on which the accent is shown.\n */\nexport function buildAccentRamp(\n\tseed: string,\n\tbgRamp?: InternalRampResult\n): InternalRampResult {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\tconst bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;\n\treturn buildRamp( seed, ACCENT_RAMP_CONFIG, bgRampInfo );\n}\n\n/**\n * Checks that all bg/fg combinations generated by the ramps meet contrast\n * targets.\n * @param params\n * @param params.bgRamp\n * @param params.accentRamps\n */\nexport function checkAccessibleCombinations( {\n\tbgRamp,\n\taccentRamps = [],\n}: {\n\tbgRamp: InternalRampResult;\n\taccentRamps?: InternalRampResult[];\n} ) {\n\tconst unmetTargets: {\n\t\tbgName: keyof Ramp;\n\t\tbgColor: string;\n\t\tfgName: keyof Ramp;\n\t\tfgColor: string;\n\t\tunmetContrast: number;\n\t\tachievedContrast: number;\n\t}[] = [];\n\n\t// Assess combinations within each ramp\n\t[ bgRamp, ...accentRamps ].forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = ramp.ramp[ bg ];\n\t\t\t\t\tconst fgColor = ramp.ramp[ fg ];\n\t\t\t\t\tconst achievedContrast = getContrast( bgColor, fgColor );\n\t\t\t\t\tif ( achievedContrast < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor,\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor,\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t\tachievedContrast,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\t// Assess each accent ramp's fg color against bg ramp\n\taccentRamps.forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = bgRamp.ramp[ bg ];\n\t\t\t\t\tconst fgColor = ramp.ramp[ fg ];\n\t\t\t\t\tconst achievedContrast = getContrast( bgColor, fgColor );\n\t\t\t\t\tif ( achievedContrast < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor,\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor,\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t\tachievedContrast,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn unmetTargets;\n}\n\nexport type RampResult = InternalRampResult;\n"],
+  "mappings": ";AAGA,SAAS,KAAK,OAAO,aAAa;AAKlC,OAAO;AACP,SAAS,iBAAiB;AAC1B,SAAS,0CAA0C;AACnD,SAAS,gBAAgB,0BAA0B;AAMnD,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AAM7B,SAAS,YAAa,MAAe;AAC3C,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,SAAO,UAAW,MAAM,cAAe;AACxC;AAEA,IAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,OAAO;AAAA,QACN,IAAK,MAAO,KAAK,KAAM,WAAY,CAAE,GAAG,CAAE,OAAO,GAAI,CAAE;AAAA,QACvD,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACD;AAQO,SAAS,gBACf,MACA,QACqB;AACrB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,QAAM,aAAa,SAAS,cAAe,MAAO,IAAI;AACtD,SAAO,UAAW,MAAM,oBAAoB,UAAW;AACxD;AASO,SAAS,4BAA6B;AAAA,EAC5C;AAAA,EACA,cAAc,CAAC;AAChB,GAGI;AACH,QAAM,eAOA,CAAC;AAGP,GAAE,QAAQ,GAAG,WAAY,EAAE,QAAS,CAAE,SAAU;AAC/C,0BAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,KAAK,KAAM,EAAG;AAC9B,gBAAM,UAAU,KAAK,KAAM,EAAG;AAC9B,gBAAM,mBAAmB,YAAa,SAAS,OAAQ;AACvD,cAAK,mBAAmB,QAAS;AAChC,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR;AAAA,cACA,QAAQ;AAAA,cACR;AAAA,cACA,eAAe;AAAA,cACf;AAAA,YACD,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,cAAY,QAAS,CAAE,SAAU;AAChC,0BAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,OAAO,KAAM,EAAG;AAChC,gBAAM,UAAU,KAAK,KAAM,EAAG;AAC9B,gBAAM,mBAAmB,YAAa,SAAS,OAAQ;AACvD,cAAK,mBAAmB,QAAS;AAChC,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR;AAAA,cACA,QAAQ;AAAA,cACR;AAAA,cACA,eAAe;AAAA,cACf;AAAA,YACD,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
   "names": []
 }

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

@@ -1,9 +1,11 @@
 // packages/theme/src/color-ramps/lib/color-utils.ts
 import {
   to,
+  toGamut,
   serialize,
   contrastWCAG21,
-  sRGB
+  sRGB,
+  OKLCH
 } from "colorjs.io/fn";
 import "./register-color-spaces";
 function getColorString(color) {
@@ -12,7 +14,11 @@ function getColorString(color) {
 function getContrast(colorA, colorB) {
   return contrastWCAG21(colorA, colorB);
 }
+function clampToGamut(c) {
+  return to(toGamut(c, { space: sRGB, method: "css" }), OKLCH);
+}
 export {
+  clampToGamut,
   getColorString,
   getContrast
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/color-utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tto,\n\tserialize,\n\tcontrastWCAG21,\n\tsRGB,\n\ttype ColorTypes,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\n\n/**\n * Get string representation of a color\n * @param color Color object to stringify\n * @return String representation\n */\nexport function getColorString( color: ColorTypes ): string {\n\treturn serialize( to( color, sRGB ), { format: 'hex', inGamut: true } );\n}\n\n/**\n * Get contrast value between two colors\n * @param colorA First color\n * @param colorB Second color\n * @return WCAG 2.1 contrast ratio\n */\nexport function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {\n\treturn contrastWCAG21( colorA, colorB );\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AAKP,OAAO;AAOA,SAAS,eAAgB,OAA4B;AAC3D,SAAO,UAAW,GAAI,OAAO,IAAK,GAAG,EAAE,QAAQ,OAAO,SAAS,KAAK,CAAE;AACvE;AAQO,SAAS,YAAa,QAAoB,QAA6B;AAC7E,SAAO,eAAgB,QAAQ,MAAO;AACvC;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tto,\n\ttoGamut,\n\tserialize,\n\tcontrastWCAG21,\n\tsRGB,\n\tOKLCH,\n\ttype ColorTypes,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\n\n/**\n * Get string representation of a color\n * @param color Color object to stringify\n * @return String representation\n */\nexport function getColorString( color: ColorTypes ): string {\n\treturn serialize( to( color, sRGB ), { format: 'hex', inGamut: true } );\n}\n\n/**\n * Get contrast value between two colors\n * @param colorA First color\n * @param colorB Second color\n * @return WCAG 2.1 contrast ratio\n */\nexport function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {\n\treturn contrastWCAG21( colorA, colorB );\n}\n\n/**\n * Make sure that a color is valid in the sRGB gamut and convert it to OKLCH.\n * @param c\n */\nexport function clampToGamut( c: ColorTypes ) {\n\t// map into sRGB using CSS OKLCH method\n\treturn to( toGamut( c, { space: sRGB, method: 'css' } ), OKLCH );\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AAKP,OAAO;AAOA,SAAS,eAAgB,OAA4B;AAC3D,SAAO,UAAW,GAAI,OAAO,IAAK,GAAG,EAAE,QAAQ,OAAO,SAAS,KAAK,CAAE;AACvE;AAQO,SAAS,YAAa,QAAoB,QAA6B;AAC7E,SAAO,eAAgB,QAAQ,MAAO;AACvC;AAMO,SAAS,aAAc,GAAgB;AAE7C,SAAO,GAAI,QAAS,GAAG,EAAE,OAAO,MAAM,QAAQ,MAAM,CAAE,GAAG,KAAM;AAChE;",
   "names": []
 }

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

@@ -3,7 +3,7 @@ import { to, OKLCH } from "colorjs.io/fn";
 import "./register-color-spaces";
 var WHITE = to("white", OKLCH);
 var BLACK = to("black", OKLCH);
-var UNIVERSAL_CONTRAST_TOPUP = 0.012;
+var UNIVERSAL_CONTRAST_TOPUP = 0.02;
 var WHITE_TEXT_CONTRAST_MARGIN = 3.1;
 var ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
   lighter: { min: 0.2, max: 0.4 },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/constants.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations and rounding errors.\n// - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.\n// - the max contrast between adjacent RGB values is 1.016, so half of the difference (0.008) can be rounding error.\n// - the sum is 0.012: the margin we add to ensure that the target contrast is met after all the rounding.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.012;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Contrast precision we aim for. Approximately 1/256, resolution of an 8-bit number.\nexport const CONTRAST_EPSILON = 4e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 10;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#f8f8f8',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\tcaution: '#f0d149',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations and rounding errors.\n// - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.\n// - the max contrast between adjacent RGB values is 1.016, so 0.016 is the maximum total rounding error between two values.\n// - the sum is 0.02: the margin we add to ensure that the target contrast is met after all the rounding.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.02;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Contrast precision we aim for. Approximately 1/256, resolution of an 8-bit number.\nexport const CONTRAST_EPSILON = 4e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 10;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#f8f8f8',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\tcaution: '#f0d149',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
   "mappings": ";AAGA,SAAS,IAAI,aAAa;AAK1B,OAAO;AAGA,IAAM,QAAQ,GAAI,SAAS,KAAM;AACjC,IAAM,QAAQ,GAAI,SAAS,KAAM;AAMjC,IAAM,2BAA2B;AAOjC,IAAM,6BAA6B;AAOnC,IAAM,yCAAyC;AAAA,EACrD,SAAS,EAAE,KAAK,KAAK,KAAK,IAAI;AAAA,EAC9B,QAAQ,EAAE,KAAK,MAAM,KAAK,KAAK;AAChC;AAGO,IAAM,mBAAmB;AAEzB,IAAM,2BAA2B;AAEjC,IAAM,wBAIP;AAAA,EACL;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,cAAc,YAAa;AAAA,IAClC,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,UAAW;AAAA,IAC9B,KAAK,CAAE,YAAa;AAAA,IACpB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,SAAU;AAAA,IACjB,KAAK,CAAE,QAAS;AAAA,IAChB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,SAAU;AAAA,IACjB,QAAQ;AAAA,EACT;AACD;AAGO,IAAM,sBAAsB;AAAA,EAClC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACR;",
   "names": []
 }