@wordpress/theme 0.2.0 → 0.2.1-next.16d95556a.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tclone,\n\tget,\n\tOKLCH,\n\tparse,\n\tset,\n\ttype ColorTypes,\n\ttype PlainColorObject,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport { getContrast, getColorString } from './color-utils';\nimport { findColorMeetingRequirements } from './find-color-with-constraints';\nimport {\n\tclampToGamut,\n\tsortByDependency,\n\tcomputeBetterFgColorDirection,\n\tadjustContrastTarget,\n\tstepsForStep,\n\tsolveWithBisect,\n} from './utils';\n\nimport type {\n\tFollowDirection,\n\tRamp,\n\tRampDirection,\n\tRampConfig,\n\tRampResult,\n} from './types';\nimport { CONTRAST_EPSILON } from './constants';\n\n/**\n * Calculate a complete color ramp based on the provided configuration.\n *\n * @param params                       - The calculation parameters\n * @param params.seed                  - The base color to build the ramp from\n * @param params.sortedSteps           - Steps sorted in dependency order\n * @param params.config                - Ramp configuration defining contrast requirements\n * @param params.mainDir               - Primary direction for the ramp (lighter/darker)\n * @param params.oppDir                - Opposite direction from mainDir\n * @param params.pinLightness          - Optional lightness override for a given step\n * @param params.pinLightness.stepName\n * @param params.pinLightness.value\n * @return Object containing ramp results and satisfaction status\n */\nfunction calculateRamp( {\n\tseed,\n\tsortedSteps,\n\tconfig,\n\tmainDir,\n\toppDir,\n\tpinLightness,\n}: {\n\tseed: ColorTypes;\n\tsortedSteps: ( keyof Ramp )[];\n\tconfig: RampConfig;\n\tmainDir: RampDirection;\n\toppDir: RampDirection;\n\tpinLightness?: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} ) {\n\tconst rampResults = {} as Record<\n\t\tkeyof Ramp,\n\t\t{ color: string; warning: boolean }\n\t>;\n\tlet maxDeficit = -Infinity;\n\tlet maxDeficitDirection: RampDirection = 'lighter';\n\tlet maxDeficitStep;\n\n\t// Keep track of the calculated colors, as they are going to be useful\n\t// when other colors reference them.\n\tconst calculatedColors = new Map< keyof Ramp | 'seed', ColorTypes >();\n\tcalculatedColors.set( 'seed', seed );\n\n\tfor ( const stepName of sortedSteps ) {\n\t\tconst {\n\t\t\tcontrast,\n\t\t\tlightness: stepLightnessConstraint,\n\t\t\ttaperChromaOptions,\n\t\t\tsameAsIfPossible,\n\t\t} = config[ stepName ];\n\n\t\tconst referenceColor = calculatedColors.get( contrast.reference );\n\t\tif ( ! referenceColor ) {\n\t\t\tthrow new Error(\n\t\t\t\t`Reference color for step ${ stepName } not found: ${ contrast.reference }`\n\t\t\t);\n\t\t}\n\n\t\t// Check if we can reuse color from the `sameAsIfPossible` config option\n\t\tif ( sameAsIfPossible ) {\n\t\t\tconst candidateColor = calculatedColors.get( sameAsIfPossible );\n\t\t\tif ( ! candidateColor ) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Same-as color for step ${ stepName } not found: ${ sameAsIfPossible }`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst candidateContrast = getContrast(\n\t\t\t\treferenceColor,\n\t\t\t\tcandidateColor\n\t\t\t);\n\t\t\tconst adjustedTarget = adjustContrastTarget( contrast.target );\n\t\t\t// If the candidate meets the contrast requirement, use it\n\t\t\tif ( candidateContrast >= adjustedTarget ) {\n\t\t\t\t// Store the reused color\n\t\t\t\tcalculatedColors.set( stepName, candidateColor );\n\t\t\t\trampResults[ stepName ] = {\n\t\t\t\t\tcolor: getColorString( candidateColor ),\n\t\t\t\t\twarning: false,\n\t\t\t\t};\n\n\t\t\t\tcontinue; // Skip to next step\n\t\t\t}\n\t\t}\n\n\t\tfunction computeDirection(\n\t\t\tcolor: ColorTypes,\n\t\t\tfollowDirection: FollowDirection\n\t\t): RampDirection {\n\t\t\tif ( followDirection === 'main' ) {\n\t\t\t\treturn mainDir;\n\t\t\t}\n\n\t\t\tif ( followDirection === 'opposite' ) {\n\t\t\t\treturn oppDir;\n\t\t\t}\n\n\t\t\tif ( followDirection === 'best' ) {\n\t\t\t\treturn computeBetterFgColorDirection(\n\t\t\t\t\tcolor,\n\t\t\t\t\tcontrast.preferLighter\n\t\t\t\t).better;\n\t\t\t}\n\n\t\t\treturn followDirection;\n\t\t}\n\n\t\tconst computedDir = computeDirection(\n\t\t\treferenceColor,\n\t\t\tcontrast.followDirection\n\t\t);\n\n\t\tconst adjustedTarget = adjustContrastTarget( contrast.target );\n\n\t\t// Define the lightness constraint, if needed.\n\t\tlet lightnessConstraint;\n\t\tif ( pinLightness?.stepName === stepName ) {\n\t\t\tlightnessConstraint = {\n\t\t\t\tvalue: pinLightness.value,\n\t\t\t\ttype: 'force',\n\t\t\t} as const;\n\t\t} else if ( stepLightnessConstraint ) {\n\t\t\tlightnessConstraint = {\n\t\t\t\tvalue: stepLightnessConstraint( computedDir ),\n\t\t\t\ttype: 'onlyIfSucceeds',\n\t\t\t} as const;\n\t\t}\n\n\t\t// Calculate the color meeting the requirements\n\t\tconst searchResults = findColorMeetingRequirements(\n\t\t\treferenceColor,\n\t\t\tseed,\n\t\t\tadjustedTarget,\n\t\t\tcomputedDir,\n\t\t\t{\n\t\t\t\tlightnessConstraint,\n\t\t\t\ttaperChromaOptions,\n\t\t\t}\n\t\t);\n\n\t\t// When the target contrast is not met, take note of it and use\n\t\t// that information to guide the ramp calculation bisection.\n\t\tif (\n\t\t\t! contrast.ignoreWhenAdjustingSeed &&\n\t\t\tsearchResults.deficit &&\n\t\t\tsearchResults.deficit > maxDeficit\n\t\t) {\n\t\t\tmaxDeficit = searchResults.deficit;\n\t\t\tmaxDeficitDirection = computedDir;\n\t\t\tmaxDeficitStep = stepName;\n\t\t}\n\n\t\t// Store calculated color for future dependencies\n\t\tcalculatedColors.set( stepName, searchResults.color );\n\n\t\t// Add to results\n\t\trampResults[ stepName ] = {\n\t\t\tcolor: getColorString( searchResults.color ),\n\t\t\twarning:\n\t\t\t\t! contrast.ignoreWhenAdjustingSeed && ! searchResults.reached,\n\t\t};\n\t}\n\treturn {\n\t\trampResults,\n\t\tmaxDeficit,\n\t\tmaxDeficitDirection,\n\t\tmaxDeficitStep,\n\t};\n}\n\nexport function buildRamp(\n\tseedArg: string,\n\tconfig: RampConfig,\n\t{\n\t\tmainDirection,\n\t\tpinLightness,\n\t\trescaleToFitContrastTargets = true,\n\t}: {\n\t\tmainDirection?: RampDirection;\n\t\tpinLightness?: {\n\t\t\tstepName: keyof Ramp;\n\t\t\tvalue: number;\n\t\t};\n\t\trescaleToFitContrastTargets?: boolean;\n\t} = {}\n): RampResult {\n\tlet seed: PlainColorObject;\n\ttry {\n\t\tseed = clampToGamut( parse( seedArg ) );\n\t} catch ( error ) {\n\t\tthrow new Error(\n\t\t\t`Invalid seed color \"${ seedArg }\": ${\n\t\t\t\terror instanceof Error ? error.message : 'Unknown error'\n\t\t\t}`\n\t\t);\n\t}\n\n\tlet mainDir: RampDirection = 'lighter';\n\tlet oppDir: RampDirection = 'darker';\n\n\tif ( mainDirection ) {\n\t\tmainDir = mainDirection;\n\t\toppDir = mainDirection === 'darker' ? 'lighter' : 'darker';\n\t} else {\n\t\tconst { better, worse } = computeBetterFgColorDirection( seed );\n\t\tmainDir = better;\n\t\toppDir = worse;\n\t}\n\n\t// Get the correct calculation order based on dependencies\n\tconst sortedSteps = sortByDependency( config );\n\n\t// Calculate the ramp with the initial seed.\n\tconst { rampResults, maxDeficit, maxDeficitDirection, maxDeficitStep } =\n\t\tcalculateRamp( {\n\t\t\tseed,\n\t\t\tsortedSteps,\n\t\t\tconfig,\n\t\t\tmainDir,\n\t\t\toppDir,\n\t\t\tpinLightness,\n\t\t} );\n\n\tlet bestRamp = rampResults;\n\n\tif ( maxDeficit > CONTRAST_EPSILON && rescaleToFitContrastTargets ) {\n\t\tconst iterSteps = stepsForStep( maxDeficitStep!, config );\n\n\t\tfunction getSeedForL( l: number ): ColorTypes {\n\t\t\treturn clampToGamut( set( clone( seed ), [ OKLCH, 'l' ], l ) );\n\t\t}\n\n\t\tfunction getDeficitForSeed( s: ColorTypes ): number {\n\t\t\tconst iterationResults = calculateRamp( {\n\t\t\t\tseed: s,\n\t\t\t\tsortedSteps: iterSteps,\n\t\t\t\tconfig,\n\t\t\t\tmainDir,\n\t\t\t\toppDir,\n\t\t\t\tpinLightness,\n\t\t\t} );\n\n\t\t\t// If the constraints start failing in the opposite direction to the original\n\t\t\t// iteration's direction, that means we've moved too far away from the target.\n\t\t\t// Don't use the `maxDeficit` value because it's not related to our search,\n\t\t\t// and might even be positive, which would confuse the bisection algorithm.\n\t\t\treturn iterationResults.maxDeficitDirection === maxDeficitDirection\n\t\t\t\t? iterationResults.maxDeficit\n\t\t\t\t: -maxDeficit;\n\t\t}\n\n\t\t// For a scale with the \"lighter\" direction, the contrast can be improved\n\t\t// by darkening the seed. For \"darker\" direction, by lightening the seed.\n\t\tconst lowerSeedL = maxDeficitDirection === 'lighter' ? 0 : 1;\n\t\tconst lowerDeficit = -maxDeficit;\n\t\tconst upperSeedL = get( seed, [ OKLCH, 'l' ] );\n\t\tconst upperDeficit = maxDeficit;\n\n\t\tconst bestSeed = solveWithBisect(\n\t\t\tgetSeedForL,\n\t\t\tgetDeficitForSeed,\n\t\t\tlowerSeedL,\n\t\t\tlowerDeficit,\n\t\t\tupperSeedL,\n\t\t\tupperDeficit\n\t\t);\n\n\t\t// Calculate the final ramp with adjusted seed.\n\t\tbestRamp = calculateRamp( {\n\t\t\tseed: bestSeed,\n\t\t\tsortedSteps,\n\t\t\tconfig,\n\t\t\tmainDir,\n\t\t\toppDir,\n\t\t\tpinLightness,\n\t\t} ).rampResults;\n\t}\n\n\t// Swap surface1 and surface3 for darker ramps to maintain visual elevation hierarchy.\n\t// This ensures surface1 appears \"behind\" surface2, and surface3 appears \"in front\",\n\t// regardless of the ramp's main direction.\n\tif ( mainDir === 'darker' ) {\n\t\tconst tmpSurface1 = bestRamp.surface1;\n\t\tbestRamp.surface1 = bestRamp.surface3;\n\t\tbestRamp.surface3 = tmpSurface1;\n\t}\n\n\treturn {\n\t\tramp: bestRamp,\n\t\tdirection: mainDir,\n\t};\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tclone,\n\tget,\n\tOKLCH,\n\tparse,\n\tset,\n\ttype ColorTypes,\n\ttype PlainColorObject,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport { getContrast, getColorString } from './color-utils';\nimport { findColorMeetingRequirements } from './find-color-with-constraints';\nimport {\n\tclampToGamut,\n\tsortByDependency,\n\tcomputeBetterFgColorDirection,\n\tadjustContrastTarget,\n\tstepsForStep,\n\tsolveWithBisect,\n} from './utils';\n\nimport type {\n\tFollowDirection,\n\tRamp,\n\tRampDirection,\n\tRampConfig,\n\tRampResult,\n} from './types';\nimport { CONTRAST_EPSILON } from './constants';\n\n/**\n * Calculate a complete color ramp based on the provided configuration.\n *\n * @param params                       - The calculation parameters\n * @param params.seed                  - The base color to build the ramp from\n * @param params.sortedSteps           - Steps sorted in dependency order\n * @param params.config                - Ramp configuration defining contrast requirements\n * @param params.mainDir               - Primary direction for the ramp (lighter/darker)\n * @param params.oppDir                - Opposite direction from mainDir\n * @param params.pinLightness          - Optional lightness override for a given step\n * @param params.pinLightness.stepName\n * @param params.pinLightness.value\n * @return Object containing ramp results and satisfaction status\n */\nfunction calculateRamp( {\n\tseed,\n\tsortedSteps,\n\tconfig,\n\tmainDir,\n\toppDir,\n\tpinLightness,\n}: {\n\tseed: ColorTypes;\n\tsortedSteps: ( keyof Ramp )[];\n\tconfig: RampConfig;\n\tmainDir: RampDirection;\n\toppDir: RampDirection;\n\tpinLightness?: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} ) {\n\tconst rampResults = {} as Record< keyof Ramp, string >;\n\tlet warnings: string[] | undefined;\n\tlet maxDeficit = -Infinity;\n\tlet maxDeficitDirection: RampDirection = 'lighter';\n\tlet maxDeficitStep;\n\n\t// Keep track of the calculated colors, as they are going to be useful\n\t// when other colors reference them.\n\tconst calculatedColors = new Map< keyof Ramp | 'seed', ColorTypes >();\n\tcalculatedColors.set( 'seed', seed );\n\n\tfor ( const stepName of sortedSteps ) {\n\t\tconst {\n\t\t\tcontrast,\n\t\t\tlightness: stepLightnessConstraint,\n\t\t\ttaperChromaOptions,\n\t\t\tsameAsIfPossible,\n\t\t} = config[ stepName ];\n\n\t\tconst referenceColor = calculatedColors.get( contrast.reference );\n\t\tif ( ! referenceColor ) {\n\t\t\tthrow new Error(\n\t\t\t\t`Reference color for step ${ stepName } not found: ${ contrast.reference }`\n\t\t\t);\n\t\t}\n\n\t\t// Check if we can reuse color from the `sameAsIfPossible` config option\n\t\tif ( sameAsIfPossible ) {\n\t\t\tconst candidateColor = calculatedColors.get( sameAsIfPossible );\n\t\t\tif ( ! candidateColor ) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Same-as color for step ${ stepName } not found: ${ sameAsIfPossible }`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst candidateContrast = getContrast(\n\t\t\t\treferenceColor,\n\t\t\t\tcandidateColor\n\t\t\t);\n\t\t\tconst adjustedTarget = adjustContrastTarget( contrast.target );\n\t\t\t// If the candidate meets the contrast requirement, use it\n\t\t\tif ( candidateContrast >= adjustedTarget ) {\n\t\t\t\t// Store the reused color\n\t\t\t\tcalculatedColors.set( stepName, candidateColor );\n\t\t\t\trampResults[ stepName ] = getColorString( candidateColor );\n\n\t\t\t\tcontinue; // Skip to next step\n\t\t\t}\n\t\t}\n\n\t\tfunction computeDirection(\n\t\t\tcolor: ColorTypes,\n\t\t\tfollowDirection: FollowDirection\n\t\t): RampDirection {\n\t\t\tif ( followDirection === 'main' ) {\n\t\t\t\treturn mainDir;\n\t\t\t}\n\n\t\t\tif ( followDirection === 'opposite' ) {\n\t\t\t\treturn oppDir;\n\t\t\t}\n\n\t\t\tif ( followDirection === 'best' ) {\n\t\t\t\treturn computeBetterFgColorDirection(\n\t\t\t\t\tcolor,\n\t\t\t\t\tcontrast.preferLighter\n\t\t\t\t).better;\n\t\t\t}\n\n\t\t\treturn followDirection;\n\t\t}\n\n\t\tconst computedDir = computeDirection(\n\t\t\treferenceColor,\n\t\t\tcontrast.followDirection\n\t\t);\n\n\t\tconst adjustedTarget = adjustContrastTarget( contrast.target );\n\n\t\t// Define the lightness constraint, if needed.\n\t\tlet lightnessConstraint;\n\t\tif ( pinLightness?.stepName === stepName ) {\n\t\t\tlightnessConstraint = {\n\t\t\t\tvalue: pinLightness.value,\n\t\t\t\ttype: 'force',\n\t\t\t} as const;\n\t\t} else if ( stepLightnessConstraint ) {\n\t\t\tlightnessConstraint = {\n\t\t\t\tvalue: stepLightnessConstraint( computedDir ),\n\t\t\t\ttype: 'onlyIfSucceeds',\n\t\t\t} as const;\n\t\t}\n\n\t\t// Calculate the color meeting the requirements\n\t\tconst searchResults = findColorMeetingRequirements(\n\t\t\treferenceColor,\n\t\t\tseed,\n\t\t\tadjustedTarget,\n\t\t\tcomputedDir,\n\t\t\t{\n\t\t\t\tlightnessConstraint,\n\t\t\t\ttaperChromaOptions,\n\t\t\t}\n\t\t);\n\n\t\t// When the target contrast is not met, take note of it and use\n\t\t// that information to guide the ramp calculation bisection.\n\t\tif (\n\t\t\t! contrast.ignoreWhenAdjustingSeed &&\n\t\t\tsearchResults.deficit &&\n\t\t\tsearchResults.deficit > maxDeficit\n\t\t) {\n\t\t\tmaxDeficit = searchResults.deficit;\n\t\t\tmaxDeficitDirection = computedDir;\n\t\t\tmaxDeficitStep = stepName;\n\t\t}\n\n\t\t// Store calculated color for future dependencies\n\t\tcalculatedColors.set( stepName, searchResults.color );\n\n\t\t// Add to results\n\t\trampResults[ stepName ] = getColorString( searchResults.color );\n\n\t\tif ( ! searchResults.reached && ! contrast.ignoreWhenAdjustingSeed ) {\n\t\t\twarnings ??= [];\n\t\t\twarnings.push( stepName );\n\t\t}\n\t}\n\n\treturn {\n\t\trampResults,\n\t\twarnings,\n\t\tmaxDeficit,\n\t\tmaxDeficitDirection,\n\t\tmaxDeficitStep,\n\t};\n}\n\nexport function buildRamp(\n\tseedArg: string,\n\tconfig: RampConfig,\n\t{\n\t\tmainDirection,\n\t\tpinLightness,\n\t\trescaleToFitContrastTargets = true,\n\t}: {\n\t\tmainDirection?: RampDirection;\n\t\tpinLightness?: {\n\t\t\tstepName: keyof Ramp;\n\t\t\tvalue: number;\n\t\t};\n\t\trescaleToFitContrastTargets?: boolean;\n\t} = {}\n): RampResult {\n\tlet seed: PlainColorObject;\n\ttry {\n\t\tseed = clampToGamut( parse( seedArg ) );\n\t} catch ( error ) {\n\t\tthrow new Error(\n\t\t\t`Invalid seed color \"${ seedArg }\": ${\n\t\t\t\terror instanceof Error ? error.message : 'Unknown error'\n\t\t\t}`\n\t\t);\n\t}\n\n\tlet mainDir: RampDirection = 'lighter';\n\tlet oppDir: RampDirection = 'darker';\n\n\tif ( mainDirection ) {\n\t\tmainDir = mainDirection;\n\t\toppDir = mainDirection === 'darker' ? 'lighter' : 'darker';\n\t} else {\n\t\tconst { better, worse } = computeBetterFgColorDirection( seed );\n\t\tmainDir = better;\n\t\toppDir = worse;\n\t}\n\n\t// Get the correct calculation order based on dependencies\n\tconst sortedSteps = sortByDependency( config );\n\n\t// Calculate the ramp with the initial seed.\n\tconst {\n\t\trampResults,\n\t\twarnings,\n\t\tmaxDeficit,\n\t\tmaxDeficitDirection,\n\t\tmaxDeficitStep,\n\t} = calculateRamp( {\n\t\tseed,\n\t\tsortedSteps,\n\t\tconfig,\n\t\tmainDir,\n\t\toppDir,\n\t\tpinLightness,\n\t} );\n\n\tlet bestRamp = rampResults;\n\n\tif ( maxDeficit > CONTRAST_EPSILON && rescaleToFitContrastTargets ) {\n\t\tconst iterSteps = stepsForStep( maxDeficitStep!, config );\n\n\t\tfunction getSeedForL( l: number ): ColorTypes {\n\t\t\treturn clampToGamut( set( clone( seed ), [ OKLCH, 'l' ], l ) );\n\t\t}\n\n\t\tfunction getDeficitForSeed( s: ColorTypes ): number {\n\t\t\tconst iterationResults = calculateRamp( {\n\t\t\t\tseed: s,\n\t\t\t\tsortedSteps: iterSteps,\n\t\t\t\tconfig,\n\t\t\t\tmainDir,\n\t\t\t\toppDir,\n\t\t\t\tpinLightness,\n\t\t\t} );\n\n\t\t\t// If the constraints start failing in the opposite direction to the original\n\t\t\t// iteration's direction, that means we've moved too far away from the target.\n\t\t\t// Don't use the `maxDeficit` value because it's not related to our search,\n\t\t\t// and might even be positive, which would confuse the bisection algorithm.\n\t\t\treturn iterationResults.maxDeficitDirection === maxDeficitDirection\n\t\t\t\t? iterationResults.maxDeficit\n\t\t\t\t: -maxDeficit;\n\t\t}\n\n\t\t// For a scale with the \"lighter\" direction, the contrast can be improved\n\t\t// by darkening the seed. For \"darker\" direction, by lightening the seed.\n\t\tconst lowerSeedL = maxDeficitDirection === 'lighter' ? 0 : 1;\n\t\tconst lowerDeficit = -maxDeficit;\n\t\tconst upperSeedL = get( seed, [ OKLCH, 'l' ] );\n\t\tconst upperDeficit = maxDeficit;\n\n\t\tconst bestSeed = solveWithBisect(\n\t\t\tgetSeedForL,\n\t\t\tgetDeficitForSeed,\n\t\t\tlowerSeedL,\n\t\t\tlowerDeficit,\n\t\t\tupperSeedL,\n\t\t\tupperDeficit\n\t\t);\n\n\t\t// Calculate the final ramp with adjusted seed.\n\t\tbestRamp = calculateRamp( {\n\t\t\tseed: bestSeed,\n\t\t\tsortedSteps,\n\t\t\tconfig,\n\t\t\tmainDir,\n\t\t\toppDir,\n\t\t\tpinLightness,\n\t\t} ).rampResults;\n\t}\n\n\t// Swap surface1 and surface3 for darker ramps to maintain visual elevation hierarchy.\n\t// This ensures surface1 appears \"behind\" surface2, and surface3 appears \"in front\",\n\t// regardless of the ramp's main direction.\n\tif ( mainDir === 'darker' ) {\n\t\tconst tmpSurface1 = bestRamp.surface1;\n\t\tbestRamp.surface1 = bestRamp.surface3;\n\t\tbestRamp.surface3 = tmpSurface1;\n\t}\n\n\treturn {\n\t\tramp: bestRamp,\n\t\twarnings,\n\t\tdirection: mainDir,\n\t};\n}\n"],
+  "mappings": "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",
   "names": ["adjustedTarget"]
 }

package/build/color-ramps/lib/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/types.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { TaperChromaOptions } from './taper-chroma';\n\nexport type Ramp = {\n\t// Backgrounds for surfaces (nuanced, slight variations compared to bg)\n\tsurface1: string;\n\tsurface2: string;\n\tsurface3: string;\n\tsurface4: string;\n\tsurface5: string;\n\tsurface6: string;\n\t// Strokes\n\tstroke1: string;\n\tstroke2: string;\n\tstroke3: string;\n\tstroke4: string;\n\t// Stronger backgrounds for primary UI elements\n\tbgFill1: string;\n\tbgFill2: string;\n\tbgFillInverted1: string;\n\tbgFillInverted2: string;\n\tbgFillDark: string;\n\t// Foreground (text, icon) colors\n\tfgSurface1: string;\n\tfgSurface2: string;\n\tfgSurface3: string;\n\tfgSurface4: string;\n\t// Foreground (text, icon) colors on top of bgFill\n\tfgFill: string;\n\tfgFillInverted: string;\n\tfgFillDark: string;\n};\n\nexport type RampDirection = 'lighter' | 'darker';\nexport type FollowDirection = 'main' | 'opposite' | 'best' | RampDirection;\nexport type ContrastRequirement = {\n\t/** The reference color against which to calculate the contrast */\n\treference: keyof Ramp | 'seed';\n\t/**\n\t * Which direction should the algorithm search a matching color in:\n\t * - main: follow the same direction as the ramp's main direction\n\t * - opposite: follow the opposite direction of the ramp\n\t * - best: pick the direction that has the most contrast headroom\n\t * - hardcoded ramp direction (useful for generating colors that always\n\t *   light/dark regardless of the ramp direction)\n\t */\n\tfollowDirection: FollowDirection;\n\t/**\n\t *  Prefer \"lighter\" direction when searching for a contrasting color.\n\t * Especially useful for foreground color to counter the poor results that the\n\t * WCAG algo gives when contrasting white text over mid-lightness backgrounds.\n\t */\n\tpreferLighter?: boolean;\n\t/**\n\t * The contrast target to meet.\n\t */\n\ttarget: number;\n\t/**\n\t * When true, the algorithm won't count a failure in meeting the contrast\n\t * target as a reason to recalculate the ramp.\n\t */\n\tignoreWhenAdjustingSeed?: boolean;\n};\n\nexport type RampStepConfig = {\n\tcontrast: ContrastRequirement;\n\tlightness?: ( direction: RampDirection ) => number;\n\ttaperChromaOptions?: TaperChromaOptions;\n\t/**\n\t * If specified, try to reuse the color from this step if it meets\n\t * the contrast requirements. This reduces the number of unique colors\n\t * in the ramp and improves consistency.\n\t */\n\tsameAsIfPossible?: keyof Ramp;\n};\n\nexport type RampConfig = Record< keyof Ramp, RampStepConfig >;\n\nexport type RampResult = {\n\tramp: Record<\n\t\tkeyof Ramp,\n\t\t{\n\t\t\tcolor: string;\n\t\t\twarning: boolean;\n\t\t}\n\t>;\n\tdirection: RampDirection;\n};\n"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { TaperChromaOptions } from './taper-chroma';\n\nexport type Ramp = {\n\t// Backgrounds for surfaces (nuanced, slight variations compared to bg)\n\tsurface1: string;\n\tsurface2: string;\n\tsurface3: string;\n\tsurface4: string;\n\tsurface5: string;\n\tsurface6: string;\n\t// Strokes\n\tstroke1: string;\n\tstroke2: string;\n\tstroke3: string;\n\tstroke4: string;\n\t// Stronger backgrounds for primary UI elements\n\tbgFill1: string;\n\tbgFill2: string;\n\tbgFillInverted1: string;\n\tbgFillInverted2: string;\n\tbgFillDark: string;\n\t// Foreground (text, icon) colors\n\tfgSurface1: string;\n\tfgSurface2: string;\n\tfgSurface3: string;\n\tfgSurface4: string;\n\t// Foreground (text, icon) colors on top of bgFill\n\tfgFill: string;\n\tfgFillInverted: string;\n\tfgFillDark: string;\n};\n\nexport type RampDirection = 'lighter' | 'darker';\nexport type FollowDirection = 'main' | 'opposite' | 'best' | RampDirection;\nexport type ContrastRequirement = {\n\t/** The reference color against which to calculate the contrast */\n\treference: keyof Ramp | 'seed';\n\t/**\n\t * Which direction should the algorithm search a matching color in:\n\t * - main: follow the same direction as the ramp's main direction\n\t * - opposite: follow the opposite direction of the ramp\n\t * - best: pick the direction that has the most contrast headroom\n\t * - hardcoded ramp direction (useful for generating colors that always\n\t *   light/dark regardless of the ramp direction)\n\t */\n\tfollowDirection: FollowDirection;\n\t/**\n\t *  Prefer \"lighter\" direction when searching for a contrasting color.\n\t * Especially useful for foreground color to counter the poor results that the\n\t * WCAG algo gives when contrasting white text over mid-lightness backgrounds.\n\t */\n\tpreferLighter?: boolean;\n\t/**\n\t * The contrast target to meet.\n\t */\n\ttarget: number;\n\t/**\n\t * When true, the algorithm won't count a failure in meeting the contrast\n\t * target as a reason to recalculate the ramp.\n\t */\n\tignoreWhenAdjustingSeed?: boolean;\n};\n\nexport type RampStepConfig = {\n\tcontrast: ContrastRequirement;\n\tlightness?: ( direction: RampDirection ) => number;\n\ttaperChromaOptions?: TaperChromaOptions;\n\t/**\n\t * If specified, try to reuse the color from this step if it meets\n\t * the contrast requirements. This reduces the number of unique colors\n\t * in the ramp and improves consistency.\n\t */\n\tsameAsIfPossible?: keyof Ramp;\n};\n\nexport type RampConfig = Record< keyof Ramp, RampStepConfig >;\n\nexport type RampResult = {\n\tramp: Record< keyof Ramp, string >;\n\twarnings?: string[];\n\tdirection: RampDirection;\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

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

@@ -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,8 +42,8 @@ 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);
+          const bgColor = parse(ramp.ramp[bg]);
+          const fgColor = parse(ramp.ramp[fg]);
           if (getContrast(bgColor, fgColor) < target) {
             unmetTargets.push({
               bgName: bg,
@@ -61,8 +61,8 @@ 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);
+          const bgColor = parse(bgRamp.ramp[bg]);
+          const fgColor = parse(ramp.ramp[fg]);
           if (getContrast(bgColor, fgColor) < target) {
             unmetTargets.push({
               bgName: bg,

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, 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 ] ), [ 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 ] );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ] );\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 ] );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ] );\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,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,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,CAAE;AACvC,gBAAM,UAAU,MAAO,KAAK,KAAM,EAAG,CAAE;AACvC,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,CAAE;AACzC,gBAAM,UAAU,MAAO,KAAK,KAAM,EAAG,CAAE;AACvC,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;",
   "names": []
 }

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

@@ -2,190 +2,190 @@
 var DEFAULT_RAMPS = {
   bg: {
     ramp: {
-      surface2: { color: "#f8f8f8", warning: false },
-      bgFill1: { color: "#555", warning: false },
-      fgFill: { color: "#f0f0f0", warning: false },
-      bgFill2: { color: "#494949", warning: false },
-      surface6: { color: "#d3d3d3", warning: false },
-      surface5: { color: "#e3e3e3", warning: false },
-      surface4: { color: "#eaeaea", warning: false },
-      surface3: { color: "#fff", warning: false },
-      fgSurface4: { color: "#1e1e1e", warning: false },
-      fgSurface3: { color: "#6e6e6e", warning: false },
-      fgSurface2: { color: "#8b8b8b", warning: false },
-      fgSurface1: { color: "#ababab", warning: false },
-      stroke3: { color: "#8b8b8b", warning: false },
-      stroke4: { color: "#6d6d6d", warning: false },
-      stroke2: { color: "#adadad", warning: false },
-      stroke1: { color: "#cfcfcf", warning: false },
-      bgFillDark: { color: "#1e1e1e", warning: false },
-      fgFillDark: { color: "#f0f0f0", warning: false },
-      bgFillInverted2: { color: "#1e1e1e", warning: false },
-      bgFillInverted1: { color: "#2d2d2d", warning: false },
-      fgFillInverted: { color: "#f0f0f0", warning: false },
-      surface1: { color: "#f0f0f0", warning: false }
+      surface2: "#f8f8f8",
+      bgFill1: "#555",
+      fgFill: "#f0f0f0",
+      bgFill2: "#494949",
+      surface6: "#d3d3d3",
+      surface5: "#e3e3e3",
+      surface4: "#eaeaea",
+      surface3: "#fff",
+      fgSurface4: "#1e1e1e",
+      fgSurface3: "#6e6e6e",
+      fgSurface2: "#8b8b8b",
+      fgSurface1: "#ababab",
+      stroke3: "#8b8b8b",
+      stroke4: "#6d6d6d",
+      stroke2: "#adadad",
+      stroke1: "#cfcfcf",
+      bgFillDark: "#1e1e1e",
+      fgFillDark: "#f0f0f0",
+      bgFillInverted2: "#1e1e1e",
+      bgFillInverted1: "#2d2d2d",
+      fgFillInverted: "#f0f0f0",
+      surface1: "#f0f0f0"
     },
     direction: "darker"
   },
   primary: {
     ramp: {
-      bgFill1: { color: "#3858e9", warning: false },
-      fgFill: { color: "#eff0f2", warning: false },
-      bgFill2: { color: "#2e49da", warning: false },
-      surface2: { color: "#f6f8fc", warning: false },
-      surface6: { color: "#c7d3ef", warning: false },
-      surface5: { color: "#dce3f5", warning: false },
-      surface4: { color: "#e5ebf7", warning: false },
-      surface3: { color: "#fff", warning: false },
-      fgSurface4: { color: "#080071", warning: false },
-      fgSurface3: { color: "#3858e9", warning: false },
-      fgSurface2: { color: "#5881ff", warning: false },
-      fgSurface1: { color: "#84a9ff", warning: false },
-      stroke3: { color: "#3858e9", warning: false },
-      stroke4: { color: "#2337c8", warning: false },
-      stroke2: { color: "#6d83bf", warning: false },
-      stroke1: { color: "#91a2cf", warning: false },
-      bgFillDark: { color: "#1b1e26", warning: false },
-      fgFillDark: { color: "#eff0f2", warning: false },
-      bgFillInverted2: { color: "#1b1e26", warning: false },
-      bgFillInverted1: { color: "#12009f", warning: false },
-      fgFillInverted: { color: "#eff0f2", warning: false },
-      surface1: { color: "#edf0fa", warning: false }
+      bgFill1: "#3858e9",
+      fgFill: "#eff0f2",
+      bgFill2: "#2e49da",
+      surface2: "#f6f8fc",
+      surface6: "#c7d3ef",
+      surface5: "#dce3f5",
+      surface4: "#e5ebf7",
+      surface3: "#fff",
+      fgSurface4: "#080071",
+      fgSurface3: "#3858e9",
+      fgSurface2: "#5881ff",
+      fgSurface1: "#84a9ff",
+      stroke3: "#3858e9",
+      stroke4: "#2337c8",
+      stroke2: "#6d83bf",
+      stroke1: "#91a2cf",
+      bgFillDark: "#1b1e26",
+      fgFillDark: "#eff0f2",
+      bgFillInverted2: "#1b1e26",
+      bgFillInverted1: "#12009f",
+      fgFillInverted: "#eff0f2",
+      surface1: "#edf0fa"
     },
     direction: "darker"
   },
   info: {
     ramp: {
-      bgFill1: { color: "#0090ff", warning: false },
-      fgFill: { color: "#1b1e23", warning: false },
-      bgFill2: { color: "#0081ef", warning: false },
-      surface2: { color: "#f5f9fd", warning: false },
-      surface6: { color: "#bed6f1", warning: false },
-      surface5: { color: "#d5e5f6", warning: false },
-      surface4: { color: "#e0ebf8", warning: false },
-      surface3: { color: "#fff", warning: false },
-      fgSurface4: { color: "#001758", warning: false },
-      fgSurface3: { color: "#006dd9", warning: false },
-      fgSurface2: { color: "#008cfb", warning: false },
-      fgSurface1: { color: "#53b1ff", warning: false },
-      stroke3: { color: "#006dd9", warning: false },
-      stroke4: { color: "#004eb8", warning: false },
-      stroke2: { color: "#5d8fc6", warning: false },
-      stroke1: { color: "#8aaed6", warning: false },
-      bgFillDark: { color: "#1b1e23", warning: false },
-      fgFillDark: { color: "#eff0f2", warning: false },
-      bgFillInverted2: { color: "#1b1e23", warning: false },
-      bgFillInverted1: { color: "#002675", warning: false },
-      fgFillInverted: { color: "#eff0f2", warning: false },
-      surface1: { color: "#eaf1fa", warning: false }
+      bgFill1: "#0090ff",
+      fgFill: "#1b1e23",
+      bgFill2: "#0081ef",
+      surface2: "#f5f9fd",
+      surface6: "#bed6f1",
+      surface5: "#d5e5f6",
+      surface4: "#e0ebf8",
+      surface3: "#fff",
+      fgSurface4: "#001758",
+      fgSurface3: "#006dd9",
+      fgSurface2: "#008cfb",
+      fgSurface1: "#53b1ff",
+      stroke3: "#006dd9",
+      stroke4: "#004eb8",
+      stroke2: "#5d8fc6",
+      stroke1: "#8aaed6",
+      bgFillDark: "#1b1e23",
+      fgFillDark: "#eff0f2",
+      bgFillInverted2: "#1b1e23",
+      bgFillInverted1: "#002675",
+      fgFillInverted: "#eff0f2",
+      surface1: "#eaf1fa"
     },
     direction: "darker"
   },
   success: {
     ramp: {
-      bgFill1: { color: "#4ab866", warning: false },
-      fgFill: { color: "#1b1f1c", warning: false },
-      bgFill2: { color: "#37a857", warning: false },
-      surface2: { color: "#f0fcf2", warning: false },
-      surface6: { color: "#7eea95", warning: false },
-      surface5: { color: "#b7f2c1", warning: false },
-      surface4: { color: "#cdf5d3", warning: false },
-      surface3: { color: "#fff", warning: false },
-      fgSurface4: { color: "#002b00", warning: false },
-      fgSurface3: { color: "#008031", warning: false },
-      fgSurface2: { color: "#2c9f4e", warning: false },
-      fgSurface1: { color: "#54c16f", warning: false },
-      stroke3: { color: "#008031", warning: false },
-      stroke4: { color: "#006314", warning: false },
-      stroke2: { color: "#61986b", warning: false },
-      stroke1: { color: "#77ba84", warning: false },
-      bgFillDark: { color: "#1b1f1c", warning: false },
-      fgFillDark: { color: "#edf2ed", warning: false },
-      bgFillInverted2: { color: "#1b1f1c", warning: false },
-      bgFillInverted1: { color: "#003800", warning: false },
-      fgFillInverted: { color: "#edf2ed", warning: false },
-      surface1: { color: "#ddf8e1", warning: false }
+      bgFill1: "#4ab866",
+      fgFill: "#1b1f1c",
+      bgFill2: "#37a857",
+      surface2: "#f0fcf2",
+      surface6: "#7eea95",
+      surface5: "#b7f2c1",
+      surface4: "#cdf5d3",
+      surface3: "#fff",
+      fgSurface4: "#002b00",
+      fgSurface3: "#008031",
+      fgSurface2: "#2c9f4e",
+      fgSurface1: "#54c16f",
+      stroke3: "#008031",
+      stroke4: "#006314",
+      stroke2: "#61986b",
+      stroke1: "#77ba84",
+      bgFillDark: "#1b1f1c",
+      fgFillDark: "#edf2ed",
+      bgFillInverted2: "#1b1f1c",
+      bgFillInverted1: "#003800",
+      fgFillInverted: "#edf2ed",
+      surface1: "#ddf8e1"
     },
     direction: "darker"
   },
   caution: {
     ramp: {
-      bgFill1: { color: "#f0d149", warning: false },
-      fgFill: { color: "#1f1e1b", warning: false },
-      bgFill2: { color: "#ddbe30", warning: false },
-      surface2: { color: "#fdf9e7", warning: false },
-      surface6: { color: "#ecd367", warning: false },
-      surface5: { color: "#f5e399", warning: false },
-      surface4: { color: "#f8ebb5", warning: false },
-      surface3: { color: "#fff", warning: false },
-      fgSurface4: { color: "#291d00", warning: false },
-      fgSurface3: { color: "#876b00", warning: false },
-      fgSurface2: { color: "#a78900", warning: false },
-      fgSurface1: { color: "#c9aa00", warning: false },
-      stroke3: { color: "#876b00", warning: false },
-      stroke4: { color: "#675000", warning: false },
-      stroke2: { color: "#978c60", warning: false },
-      stroke1: { color: "#b8ab75", warning: false },
-      bgFillDark: { color: "#1f1e1b", warning: false },
-      fgFillDark: { color: "#f6f1da", warning: false },
-      bgFillInverted2: { color: "#1f1e1b", warning: false },
-      bgFillInverted1: { color: "#3a2b00", warning: false },
-      fgFillInverted: { color: "#f6f1da", warning: false },
-      surface1: { color: "#faf1cd", warning: false }
+      bgFill1: "#f0d149",
+      fgFill: "#1f1e1b",
+      bgFill2: "#ddbe30",
+      surface2: "#fdf9e7",
+      surface6: "#ecd367",
+      surface5: "#f5e399",
+      surface4: "#f8ebb5",
+      surface3: "#fff",
+      fgSurface4: "#291d00",
+      fgSurface3: "#876b00",
+      fgSurface2: "#a78900",
+      fgSurface1: "#c9aa00",
+      stroke3: "#876b00",
+      stroke4: "#675000",
+      stroke2: "#978c60",
+      stroke1: "#b8ab75",
+      bgFillDark: "#1f1e1b",
+      fgFillDark: "#f6f1da",
+      bgFillInverted2: "#1f1e1b",
+      bgFillInverted1: "#3a2b00",
+      fgFillInverted: "#f6f1da",
+      surface1: "#faf1cd"
     },
     direction: "darker"
   },
   warning: {
     ramp: {
-      bgFill1: { color: "#f0b849", warning: false },
-      fgFill: { color: "#1f1e1b", warning: false },
-      bgFill2: { color: "#dea633", warning: false },
-      surface2: { color: "#fdf7ee", warning: false },
-      surface6: { color: "#f1ce90", warning: false },
-      surface5: { color: "#f6e0bb", warning: false },
-      surface4: { color: "#f8e9cd", warning: false },
-      surface3: { color: "#fff", warning: false },
-      fgSurface4: { color: "#2f1800", warning: false },
-      fgSurface3: { color: "#976300", warning: false },
-      fgSurface2: { color: "#b78100", warning: false },
-      fgSurface1: { color: "#d9a22e", warning: false },
-      stroke3: { color: "#976300", warning: false },
-      stroke4: { color: "#754900", warning: false },
-      stroke2: { color: "#9f8860", warning: false },
-      stroke1: { color: "#c2a776", warning: false },
-      bgFillDark: { color: "#1f1e1b", warning: false },
-      fgFillDark: { color: "#f3f0e9", warning: false },
-      bgFillInverted2: { color: "#1f1e1b", warning: false },
-      bgFillInverted1: { color: "#432600", warning: false },
-      fgFillInverted: { color: "#f3f0e9", warning: false },
-      surface1: { color: "#faefdc", warning: false }
+      bgFill1: "#f0b849",
+      fgFill: "#1f1e1b",
+      bgFill2: "#dea633",
+      surface2: "#fdf7ee",
+      surface6: "#f1ce90",
+      surface5: "#f6e0bb",
+      surface4: "#f8e9cd",
+      surface3: "#fff",
+      fgSurface4: "#2f1800",
+      fgSurface3: "#976300",
+      fgSurface2: "#b78100",
+      fgSurface1: "#d9a22e",
+      stroke3: "#976300",
+      stroke4: "#754900",
+      stroke2: "#9f8860",
+      stroke1: "#c2a776",
+      bgFillDark: "#1f1e1b",
+      fgFillDark: "#f3f0e9",
+      bgFillInverted2: "#1f1e1b",
+      bgFillInverted1: "#432600",
+      fgFillInverted: "#f3f0e9",
+      surface1: "#faefdc"
     },
     direction: "darker"
   },
   error: {
     ramp: {
-      bgFill1: { color: "#cc1818", warning: false },
-      fgFill: { color: "#f2efef", warning: false },
-      bgFill2: { color: "#bc0001", warning: false },
-      surface2: { color: "#fdf6f5", warning: false },
-      surface6: { color: "#f5c9c2", warning: false },
-      surface5: { color: "#f9dcd8", warning: false },
-      surface4: { color: "#fae5e2", warning: false },
-      surface3: { color: "#fff", warning: false },
-      fgSurface4: { color: "#4a0000", warning: false },
-      fgSurface3: { color: "#cc1818", warning: false },
-      fgSurface2: { color: "#f84d41", warning: false },
-      fgSurface1: { color: "#ff8373", warning: false },
-      stroke3: { color: "#cc1818", warning: false },
-      stroke4: { color: "#a70000", warning: false },
-      stroke2: { color: "#ca675c", warning: false },
-      stroke1: { color: "#dc8e83", warning: false },
-      bgFillDark: { color: "#231c1b", warning: false },
-      fgFillDark: { color: "#f2efef", warning: false },
-      bgFillInverted2: { color: "#231c1b", warning: false },
-      bgFillInverted1: { color: "#680000", warning: false },
-      fgFillInverted: { color: "#f2efef", warning: false },
-      surface1: { color: "#fcedea", warning: false }
+      bgFill1: "#cc1818",
+      fgFill: "#f2efef",
+      bgFill2: "#bc0001",
+      surface2: "#fdf6f5",
+      surface6: "#f5c9c2",
+      surface5: "#f9dcd8",
+      surface4: "#fae5e2",
+      surface3: "#fff",
+      fgSurface4: "#4a0000",
+      fgSurface3: "#cc1818",
+      fgSurface2: "#f84d41",
+      fgSurface1: "#ff8373",
+      stroke3: "#cc1818",
+      stroke4: "#a70000",
+      stroke2: "#ca675c",
+      stroke1: "#dc8e83",
+      bgFillDark: "#231c1b",
+      fgFillDark: "#f2efef",
+      bgFillInverted2: "#231c1b",
+      bgFillInverted1: "#680000",
+      fgFillInverted: "#f2efef",
+      surface1: "#fcedea"
     },
     direction: "darker"
   }