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

package/build-module/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": []
 }

package/build-types/color-ramps/index.d.ts

@@ -32,6 +32,7 @@ export declare function checkAccessibleCombinations({ bgRamp, accentRamps, }: {
     fgName: keyof Ramp;
     fgColor: string;
     unmetContrast: number;
+    achievedContrast: number;
 }[];
 export type RampResult = InternalRampResult;
 //# sourceMappingURL=index.d.ts.map

package/build-types/color-ramps/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-ramps/index.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,6BAA6B,CAAC;AAIrC,OAAO,KAAK,EACX,UAAU,IAAI,kBAAkB,EAEhC,IAAI,EACJ,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD;;;GAGG;AACH,wBAAgB,WAAW,CAAE,IAAI,EAAE,MAAM,sBAMxC;AAsBD;;;;;GAKG;AACH,wBAAgB,eAAe,CAC9B,IAAI,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,kBAAkB,GACzB,kBAAkB,CAOpB;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CAAE,EAC5C,MAAM,EACN,WAAgB,GAChB,EAAE;IACF,MAAM,EAAE,kBAAkB,CAAC;IAC3B,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACnC;YAES,MAAM,IAAI;aACT,MAAM;YACP,MAAM,IAAI;aACT,MAAM;mBACA,MAAM;IA6CtB;AAED,MAAM,MAAM,UAAU,GAAG,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-ramps/index.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,6BAA6B,CAAC;AAIrC,OAAO,KAAK,EACX,UAAU,IAAI,kBAAkB,EAEhC,IAAI,EACJ,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD;;;GAGG;AACH,wBAAgB,WAAW,CAAE,IAAI,EAAE,MAAM,sBAMxC;AAsBD;;;;;GAKG;AACH,wBAAgB,eAAe,CAC9B,IAAI,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,kBAAkB,GACzB,kBAAkB,CAOpB;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CAAE,EAC5C,MAAM,EACN,WAAgB,GAChB,EAAE;IACF,MAAM,EAAE,kBAAkB,CAAC;IAC3B,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACnC;YAES,MAAM,IAAI;aACT,MAAM;YACP,MAAM,IAAI;aACT,MAAM;mBACA,MAAM;sBACH,MAAM;IAiDzB;AAED,MAAM,MAAM,UAAU,GAAG,kBAAkB,CAAC"}

package/build-types/color-ramps/lib/color-utils.d.ts

@@ -19,4 +19,9 @@ export declare function getColorString(color: ColorTypes): string;
  * @return WCAG 2.1 contrast ratio
  */
 export declare function getContrast(colorA: ColorTypes, colorB: ColorTypes): number;
+/**
+ * Make sure that a color is valid in the sRGB gamut and convert it to OKLCH.
+ * @param c
+ */
+export declare function clampToGamut(c: ColorTypes): import("colorjs.io/fn").PlainColorObject;
 //# sourceMappingURL=color-utils.d.ts.map

package/build-types/color-ramps/lib/color-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/color-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAKN,KAAK,UAAU,EACf,MAAM,eAAe,CAAC;AAEvB;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAEjC;;;;GAIG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,UAAU,GAAI,MAAM,CAE1D;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,GAAI,MAAM,CAE5E"}
+{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/color-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAON,KAAK,UAAU,EACf,MAAM,eAAe,CAAC;AAEvB;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAEjC;;;;GAIG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,UAAU,GAAI,MAAM,CAE1D;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,GAAI,MAAM,CAE5E;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAE,CAAC,EAAE,UAAU,4CAG1C"}

package/build-types/color-ramps/lib/constants.d.ts

@@ -5,7 +5,7 @@ import './register-color-spaces';
 import type { Ramp } from './types';
 export declare const WHITE: import("colorjs.io/fn").PlainColorObject;
 export declare const BLACK: import("colorjs.io/fn").PlainColorObject;
-export declare const UNIVERSAL_CONTRAST_TOPUP = 0.012;
+export declare const UNIVERSAL_CONTRAST_TOPUP = 0.02;
 export declare const WHITE_TEXT_CONTRAST_MARGIN = 3.1;
 export declare const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS: {
     readonly lighter: {

package/build-types/color-ramps/lib/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/constants.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,KAAK,0CAAuB,CAAC;AAC1C,eAAO,MAAM,KAAK,0CAAuB,CAAC;AAM1C,eAAO,MAAM,wBAAwB,QAAQ,CAAC;AAO9C,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAO9C,eAAO,MAAM,sCAAsC;;;;;;;;;CAGzC,CAAC;AAGX,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,eAAO,MAAM,qBAAqB,EAAE;IACnC,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf,EA+BA,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;;;;;;CAQ/B,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/constants.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,KAAK,0CAAuB,CAAC;AAC1C,eAAO,MAAM,KAAK,0CAAuB,CAAC;AAM1C,eAAO,MAAM,wBAAwB,OAAO,CAAC;AAO7C,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAO9C,eAAO,MAAM,sCAAsC;;;;;;;;;CAGzC,CAAC;AAGX,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,eAAO,MAAM,qBAAqB,EAAE;IACnC,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,GAAG,EAAE,CAAE,MAAM,IAAI,CAAE,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf,EA+BA,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;;;;;;CAQ/B,CAAC"}

package/build-types/color-ramps/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/index.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAYjC,OAAO,KAAK,EAEX,IAAI,EACJ,aAAa,EACb,UAAU,EACV,UAAU,EACV,MAAM,SAAS,CAAC;AA+KjB,wBAAgB,SAAS,CACxB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,UAAU,EAClB,EACC,aAAa,EACb,YAAY,EACZ,2BAAkC,GAClC,GAAE;IACF,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE;QACd,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC;IACF,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACjC,GACJ,UAAU,CA0GZ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/index.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAWjC,OAAO,KAAK,EAEX,IAAI,EACJ,aAAa,EACb,UAAU,EACV,UAAU,EACV,MAAM,SAAS,CAAC;AA6KjB,wBAAgB,SAAS,CACxB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,UAAU,EAClB,EACC,aAAa,EACb,YAAY,EACZ,2BAAkC,GAClC,GAAE;IACF,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE;QACd,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC;IACF,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACjC,GACJ,UAAU,CAgHZ"}

package/build-types/color-ramps/lib/types.d.ts

@@ -69,10 +69,8 @@ export type RampStepConfig = {
 };
 export type RampConfig = Record<keyof Ramp, RampStepConfig>;
 export type RampResult = {
-    ramp: Record<keyof Ramp, {
-        color: string;
-        warning: boolean;
-    }>;
+    ramp: Record<keyof Ramp, string>;
+    warnings?: string[];
     direction: RampDirection;
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/color-ramps/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,MAAM,MAAM,IAAI,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IAEjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAEhB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IAEnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IAEnB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;AAC3E,MAAM,MAAM,mBAAmB,GAAG;IACjC,kEAAkE;IAClE,SAAS,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;IAC/B;;;;;;;OAOG;IACH,eAAe,EAAE,eAAe,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC5B,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,SAAS,CAAC,EAAE,CAAE,SAAS,EAAE,aAAa,KAAM,MAAM,CAAC;IACnD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,CAAE,MAAM,IAAI,EAAE,cAAc,CAAE,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,MAAM,CACX,MAAM,IAAI,EACV;QACC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,OAAO,CAAC;KACjB,CACD,CAAC;IACF,SAAS,EAAE,aAAa,CAAC;CACzB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,MAAM,MAAM,IAAI,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IAEjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAEhB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IAEnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IAEnB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;AAC3E,MAAM,MAAM,mBAAmB,GAAG;IACjC,kEAAkE;IAClE,SAAS,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;IAC/B;;;;;;;OAOG;IACH,eAAe,EAAE,eAAe,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC5B,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,SAAS,CAAC,EAAE,CAAE,SAAS,EAAE,aAAa,KAAM,MAAM,CAAC;IACnD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,CAAE,MAAM,IAAI,EAAE,cAAc,CAAE,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,MAAM,CAAE,MAAM,IAAI,EAAE,MAAM,CAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,EAAE,aAAa,CAAC;CACzB,CAAC"}

package/build-types/color-ramps/lib/utils.d.ts

@@ -7,11 +7,6 @@ import { type ColorTypes } from 'colorjs.io/fn';
  */
 import './register-color-spaces';
 import type { Ramp, RampConfig, RampDirection } from './types';
-/**
- * Make sure that a color is valid in the p3 gamut, and converts it to oklch.
- * @param c
- */
-export declare const clampToGamut: (c: ColorTypes) => import("colorjs.io/fn").PlainColorObject;
 /**
  * Topologically sort steps based on their dependencies
  * @param config - The steps configuration object

package/build-types/color-ramps/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAA0B,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAExE;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAUjC,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG/D;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAK,GAAG,UAAU,6CACa,CAAC;AAwCzD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAE,MAAM,EAAE,UAAU,GAAI,CAAE,MAAM,IAAI,CAAE,EAAE,CAuCvE;AACD;;;;;GAKG;AACH,wBAAgB,YAAY,CAC3B,QAAQ,EAAE,MAAM,IAAI,EACpB,MAAM,EAAE,UAAU,GAChB,CAAE,MAAM,IAAI,CAAE,EAAE,CAqBlB;AAED;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAC5C,IAAI,EAAE,UAAU,EAChB,aAAa,CAAC,EAAE,OAAO,GACrB;IACF,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,aAAa,CAAC;CACrB,CASA;AAED,wBAAgB,oBAAoB,CAAE,MAAM,EAAE,MAAM,UAOnD;AAED;;;;;;;GAOG;AACH,wBAAgB,kCAAkC,CACjD,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,aAAa,UAIxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAE,CAAC,EACjC,UAAU,EAAE,CAAE,CAAC,EAAE,MAAM,KAAM,CAAC,EAC9B,cAAc,EAAE,CAAE,CAAC,EAAE,CAAC,KAAM,MAAM,EAClC,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,MAAM,EACtB,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,MAAM,GACpB,CAAC,CAqDH"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAUjC,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAyC/D;;;GAGG;AACH,wBAAgB,gBAAgB,CAAE,MAAM,EAAE,UAAU,GAAI,CAAE,MAAM,IAAI,CAAE,EAAE,CAuCvE;AACD;;;;;GAKG;AACH,wBAAgB,YAAY,CAC3B,QAAQ,EAAE,MAAM,IAAI,EACpB,MAAM,EAAE,UAAU,GAChB,CAAE,MAAM,IAAI,CAAE,EAAE,CAqBlB;AAED;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAC5C,IAAI,EAAE,UAAU,EAChB,aAAa,CAAC,EAAE,OAAO,GACrB;IACF,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,aAAa,CAAC;CACrB,CASA;AAED,wBAAgB,oBAAoB,CAAE,MAAM,EAAE,MAAM,UAOnD;AAED;;;;;;;GAOG;AACH,wBAAgB,kCAAkC,CACjD,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,aAAa,UAIxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAE,CAAC,EACjC,UAAU,EAAE,CAAE,CAAC,EAAE,MAAM,KAAM,CAAC,EAC9B,cAAc,EAAE,CAAE,CAAC,EAAE,CAAC,KAAM,MAAM,EAClC,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,MAAM,EACtB,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,MAAM,GACpB,CAAC,CAqDH"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,QAAA,MAAM,QAAQ,GAAK,OAAO;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,gCAEA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAmBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4H9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAE,OAAO,QAAQ,CAyFzD,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,QAAA,MAAM,QAAQ,GAAK,OAAO;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,gCAEA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAmBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA+H9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4FzD,CAAC"}

package/build-types/color-ramps/stories/ramp-table.d.ts

@@ -8,10 +8,8 @@ type RampTableProps = {
             name: keyof Ramp;
             value: string;
         };
-        ramp: Record<keyof Ramp, {
-            color: string;
-            warning: boolean;
-        }>;
+        ramp: Record<keyof Ramp, string>;
+        warnings?: string[];
     }[];
 };
 export declare const RampTable: import("react").ForwardRefExoticComponent<RampTableProps & import("react").RefAttributes<HTMLDivElement>>;

package/build-types/color-ramps/stories/ramp-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ramp-table.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/ramp-table.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AA4BzC,KAAK,cAAc,GAAG;IACrB,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,MAAM,IAAI,CAAC;YACjB,KAAK,EAAE,MAAM,CAAC;SACd,CAAC;QACF,IAAI,EAAE,MAAM,CACX,MAAM,IAAI,EACV;YACC,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,EAAE,OAAO,CAAC;SACjB,CACD,CAAC;KACF,EAAE,CAAC;CACJ,CAAC;AACF,eAAO,MAAM,SAAS,2GAgKrB,CAAC"}
+{"version":3,"file":"ramp-table.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/ramp-table.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AA4BzC,KAAK,cAAc,GAAG;IACrB,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,MAAM,IAAI,CAAC;YACjB,KAAK,EAAE,MAAM,CAAC;SACd,CAAC;QACF,IAAI,EAAE,MAAM,CAAE,MAAM,IAAI,EAAE,MAAM,CAAE,CAAC;QACnC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,EAAE,CAAC;CACJ,CAAC;AACF,eAAO,MAAM,SAAS,2GA0JrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-theme-provider-styles.d.ts","sourceRoot":"","sources":["../src/use-theme-provider-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAiB3C;;GAEG;AACH,OAAO,yCAAyC,CAAC;AASjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAiKlD,wBAAgB,sBAAsB,CAAE,EACvC,KAAU,GACV,GAAE;IACF,KAAK,CAAC,EAAE,kBAAkB,CAAE,OAAO,CAAE,CAAC;CACjC;;;;;;;;EAwDL"}
+{"version":3,"file":"use-theme-provider-styles.d.ts","sourceRoot":"","sources":["../src/use-theme-provider-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAiB3C;;GAEG;AACH,OAAO,yCAAyC,CAAC;AASjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA8JlD,wBAAgB,sBAAsB,CAAE,EACvC,KAAU,GACV,GAAE;IACF,KAAK,CAAC,EAAE,kBAAkB,CAAE,OAAO,CAAE,CAAC;CACjC;;;;;;;;EAwDL"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/theme",
-	"version": "0.2.0",
+	"version": "0.2.1-next.dc3f6d3c1.0",
 	"description": "Theme and context provider for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,8 +43,8 @@
 		"build-module/color-ramps/lib/register-color-spaces.js"
 	],
 	"dependencies": {
-		"@wordpress/element": "^6.35.0",
-		"@wordpress/private-apis": "^1.35.0",
+		"@wordpress/element": "^6.35.1-next.dc3f6d3c1.0",
+		"@wordpress/private-apis": "^1.35.1-next.dc3f6d3c1.0",
 		"colorjs.io": "^0.5.2",
 		"memize": "^2.1.0"
 	},
@@ -64,5 +64,5 @@
 		"build": "npm run build:tokens && npm run build:default-ramps",
 		"postbuild": "prettier --write tokens/color.json src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
 	},
-	"gitHead": "77aa1f194edceafe8ac2a1b9438bf84b557e76e3"
+	"gitHead": "f73b5e69b34fbaccfb8c47783f4f993059ff1a41"
 }

package/src/color-ramps/index.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, OKLCH, parse, serialize } from 'colorjs.io/fn';
+import { get, OKLCH, parse } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
@@ -44,7 +44,7 @@ function getBgRampInfo( ramp: InternalRampResult ): {
 		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
 			),
 		},
@@ -89,6 +89,7 @@ export function checkAccessibleCombinations( {
 		fgName: keyof Ramp;
 		fgColor: string;
 		unmetContrast: number;
+		achievedContrast: number;
 	}[] = [];
 
 	// Assess combinations within each ramp
@@ -96,15 +97,17 @@ export 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 ),
+							fgColor,
 							unmetContrast: target,
+							achievedContrast,
 						} );
 					}
 				}
@@ -116,15 +119,17 @@ export 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 ),
+							fgColor,
 							unmetContrast: target,
+							achievedContrast,
 						} );
 					}
 				}

package/src/color-ramps/lib/color-utils.ts

@@ -3,9 +3,11 @@
  */
 import {
 	to,
+	toGamut,
 	serialize,
 	contrastWCAG21,
 	sRGB,
+	OKLCH,
 	type ColorTypes,
 } from 'colorjs.io/fn';
 
@@ -32,3 +34,12 @@ export function getColorString( color: ColorTypes ): string {
 export function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {
 	return contrastWCAG21( colorA, colorB );
 }
+
+/**
+ * Make sure that a color is valid in the sRGB gamut and convert it to OKLCH.
+ * @param c
+ */
+export function clampToGamut( c: ColorTypes ) {
+	// map into sRGB using CSS OKLCH method
+	return to( toGamut( c, { space: sRGB, method: 'css' } ), OKLCH );
+}

package/src/color-ramps/lib/constants.ts

@@ -14,9 +14,9 @@ export const BLACK = to( 'black', OKLCH );
 
 // Margin added to target contrasts to counter for algorithm approximations and rounding errors.
 // - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.
-// - the max contrast between adjacent RGB values is 1.016, so half of the difference (0.008) can be rounding error.
-// - the sum is 0.012: the margin we add to ensure that the target contrast is met after all the rounding.
-export const UNIVERSAL_CONTRAST_TOPUP = 0.012;
+// - the max contrast between adjacent RGB values is 1.016, so 0.016 is the maximum total rounding error between two values.
+// - the sum is 0.02: the margin we add to ensure that the target contrast is met after all the rounding.
+export const UNIVERSAL_CONTRAST_TOPUP = 0.02;
 
 // When enabling "lighter direction" bias, this is the amount by which
 // black text contrast needs to be greater than white text contrast.