@wordpress/theme 0.1.1-next.2f1c7c01b.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/terrazzo-plugin-ds-tokens-docs/index.ts +5 -24
- package/bin/terrazzo-plugin-inline-alias-values/index.ts +84 -0
- package/bin/terrazzo-plugin-known-wpds-css-variables/index.ts +19 -39
- package/build/color-ramps/lib/constants.js +4 -4
- package/build/color-ramps/lib/constants.js.map +2 -2
- package/build/color-ramps/lib/default-ramps.js +82 -82
- package/build/color-ramps/lib/default-ramps.js.map +1 -1
- package/build/color-ramps/lib/find-color-with-constraints.js +36 -53
- package/build/color-ramps/lib/find-color-with-constraints.js.map +2 -2
- package/build/color-ramps/lib/index.js +64 -63
- package/build/color-ramps/lib/index.js.map +2 -2
- package/build/color-ramps/lib/ramp-configs.js +3 -3
- package/build/color-ramps/lib/ramp-configs.js.map +1 -1
- package/build/color-ramps/lib/utils.js +63 -2
- package/build/color-ramps/lib/utils.js.map +2 -2
- package/build/prebuilt/js/design-tokens.js +5 -10
- package/build/prebuilt/js/design-tokens.js.map +2 -2
- package/build/prebuilt/json/figma.json +105 -905
- package/build/prebuilt/ts/color-tokens.js +137 -0
- package/build/prebuilt/ts/color-tokens.js.map +7 -0
- package/build/token-id.js +30 -0
- package/build/token-id.js.map +7 -0
- package/build/use-theme-provider-styles.js +18 -27
- package/build/use-theme-provider-styles.js.map +3 -3
- package/build-module/color-ramps/lib/constants.js +3 -3
- package/build-module/color-ramps/lib/constants.js.map +2 -2
- package/build-module/color-ramps/lib/default-ramps.js +82 -82
- package/build-module/color-ramps/lib/default-ramps.js.map +1 -1
- package/build-module/color-ramps/lib/find-color-with-constraints.js +38 -60
- package/build-module/color-ramps/lib/find-color-with-constraints.js.map +2 -2
- package/build-module/color-ramps/lib/index.js +68 -65
- package/build-module/color-ramps/lib/index.js.map +2 -2
- package/build-module/color-ramps/lib/ramp-configs.js +3 -3
- package/build-module/color-ramps/lib/ramp-configs.js.map +1 -1
- package/build-module/color-ramps/lib/utils.js +63 -2
- package/build-module/color-ramps/lib/utils.js.map +2 -2
- package/build-module/prebuilt/js/design-tokens.js +5 -10
- package/build-module/prebuilt/js/design-tokens.js.map +2 -2
- package/build-module/prebuilt/json/figma.json +105 -905
- package/build-module/prebuilt/ts/color-tokens.js +117 -0
- package/build-module/prebuilt/ts/color-tokens.js.map +7 -0
- package/build-module/token-id.js +6 -0
- package/build-module/token-id.js.map +7 -0
- package/build-module/use-theme-provider-styles.js +18 -27
- package/build-module/use-theme-provider-styles.js.map +2 -2
- package/build-types/color-ramps/lib/constants.d.ts +2 -2
- package/build-types/color-ramps/lib/constants.d.ts.map +1 -1
- package/build-types/color-ramps/lib/find-color-with-constraints.d.ts +2 -3
- package/build-types/color-ramps/lib/find-color-with-constraints.d.ts.map +1 -1
- package/build-types/color-ramps/lib/index.d.ts.map +1 -1
- package/build-types/color-ramps/lib/utils.d.ts +21 -2
- package/build-types/color-ramps/lib/utils.d.ts.map +1 -1
- package/build-types/color-ramps/stories/index.story.d.ts.map +1 -1
- package/build-types/prebuilt/ts/color-tokens.d.ts +7 -0
- package/build-types/prebuilt/ts/color-tokens.d.ts.map +1 -0
- package/build-types/stories/index.story.d.ts.map +1 -1
- package/build-types/theme-provider.d.ts.map +1 -1
- package/build-types/token-id.d.ts +9 -0
- package/build-types/token-id.d.ts.map +1 -0
- package/build-types/use-theme-provider-styles.d.ts.map +1 -1
- package/docs/ds-tokens.md +10 -178
- package/package.json +4 -4
- package/src/color-ramps/lib/constants.ts +7 -5
- package/src/color-ramps/lib/default-ramps.ts +82 -82
- package/src/color-ramps/lib/find-color-with-constraints.ts +53 -77
- package/src/color-ramps/lib/index.ts +98 -102
- package/src/color-ramps/lib/ramp-configs.ts +3 -3
- package/src/color-ramps/lib/utils.ts +109 -5
- package/src/color-ramps/test/__snapshots__/index.test.ts.snap +45706 -360
- package/src/color-ramps/test/index.test.ts +41 -14
- package/src/prebuilt/css/design-tokens.css +88 -413
- package/src/prebuilt/js/design-tokens.js +5 -10
- package/src/prebuilt/json/figma.json +105 -905
- package/src/prebuilt/ts/color-tokens.ts +117 -0
- package/src/stories/index.story.tsx +4 -18
- package/src/test/token-id.test.ts +12 -0
- package/src/token-id.ts +9 -0
- package/src/use-theme-provider-styles.ts +20 -35
- package/terrazzo.config.ts +15 -12
- package/tokens/color.json +82 -82
- package/tokens/dimension.json +75 -0
- package/tsconfig.bin.tsbuildinfo +1 -1
- package/tsconfig.src.tsbuildinfo +1 -1
- package/build/prebuilt/ts/design-tokens.js +0 -391
- package/build/prebuilt/ts/design-tokens.js.map +0 -7
- package/build-module/prebuilt/ts/design-tokens.js +0 -371
- package/build-module/prebuilt/ts/design-tokens.js.map +0 -7
- package/build-types/prebuilt/ts/design-tokens.d.ts +0 -7
- package/build-types/prebuilt/ts/design-tokens.d.ts.map +0 -1
- package/src/prebuilt/ts/design-tokens.ts +0 -371
- package/tokens/spacing.json +0 -45
|
@@ -13,9 +13,11 @@ import {
|
|
|
13
13
|
clampToGamut,
|
|
14
14
|
sortByDependency,
|
|
15
15
|
computeBetterFgColorDirection,
|
|
16
|
-
adjustContrastTarget
|
|
16
|
+
adjustContrastTarget,
|
|
17
|
+
stepsForStep,
|
|
18
|
+
solveWithBisect
|
|
17
19
|
} from "./utils";
|
|
18
|
-
import {
|
|
20
|
+
import { CONTRAST_EPSILON } from "./constants";
|
|
19
21
|
function calculateRamp({
|
|
20
22
|
seed,
|
|
21
23
|
sortedSteps,
|
|
@@ -25,9 +27,9 @@ function calculateRamp({
|
|
|
25
27
|
pinLightness
|
|
26
28
|
}) {
|
|
27
29
|
const rampResults = {};
|
|
28
|
-
let
|
|
29
|
-
let
|
|
30
|
-
let
|
|
30
|
+
let maxDeficit = -Infinity;
|
|
31
|
+
let maxDeficitDirection = "lighter";
|
|
32
|
+
let maxDeficitStep;
|
|
31
33
|
const calculatedColors = /* @__PURE__ */ new Map();
|
|
32
34
|
calculatedColors.set("seed", seed);
|
|
33
35
|
for (const stepName of sortedSteps) {
|
|
@@ -60,20 +62,23 @@ function calculateRamp({
|
|
|
60
62
|
}
|
|
61
63
|
if (sameAsIfPossible) {
|
|
62
64
|
const candidateColor = calculatedColors.get(sameAsIfPossible);
|
|
63
|
-
if (candidateColor) {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
candidateColor
|
|
65
|
+
if (!candidateColor) {
|
|
66
|
+
throw new Error(
|
|
67
|
+
`Same-as color for step ${stepName} not found: ${sameAsIfPossible}`
|
|
67
68
|
);
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
69
|
+
}
|
|
70
|
+
const candidateContrast = getContrast(
|
|
71
|
+
referenceColor,
|
|
72
|
+
candidateColor
|
|
73
|
+
);
|
|
74
|
+
const adjustedTarget2 = adjustContrastTarget(contrast.target);
|
|
75
|
+
if (candidateContrast >= adjustedTarget2) {
|
|
76
|
+
calculatedColors.set(stepName, candidateColor);
|
|
77
|
+
rampResults[stepName] = {
|
|
78
|
+
color: getColorString(candidateColor),
|
|
79
|
+
warning: false
|
|
80
|
+
};
|
|
81
|
+
continue;
|
|
77
82
|
}
|
|
78
83
|
}
|
|
79
84
|
const computedDir = computeDirection(
|
|
@@ -99,20 +104,14 @@ function calculateRamp({
|
|
|
99
104
|
adjustedTarget,
|
|
100
105
|
computedDir,
|
|
101
106
|
{
|
|
102
|
-
strict: false,
|
|
103
107
|
lightnessConstraint,
|
|
104
108
|
taperChromaOptions
|
|
105
109
|
}
|
|
106
110
|
);
|
|
107
|
-
if (!searchResults.
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
const weightedDeficit = deficitVsTarget * impactWeight;
|
|
112
|
-
if (weightedDeficit > MAX_WEIGHTED_DEFICIT) {
|
|
113
|
-
MAX_WEIGHTED_DEFICIT = weightedDeficit;
|
|
114
|
-
UNSATISFIED_DIRECTION = computedDir;
|
|
115
|
-
}
|
|
111
|
+
if (!contrast.ignoreWhenAdjustingSeed && searchResults.deficit && searchResults.deficit > maxDeficit) {
|
|
112
|
+
maxDeficit = searchResults.deficit;
|
|
113
|
+
maxDeficitDirection = computedDir;
|
|
114
|
+
maxDeficitStep = stepName;
|
|
116
115
|
}
|
|
117
116
|
calculatedColors.set(stepName, searchResults.color);
|
|
118
117
|
rampResults[stepName] = {
|
|
@@ -122,8 +121,9 @@ function calculateRamp({
|
|
|
122
121
|
}
|
|
123
122
|
return {
|
|
124
123
|
rampResults,
|
|
125
|
-
|
|
126
|
-
|
|
124
|
+
maxDeficit,
|
|
125
|
+
maxDeficitDirection,
|
|
126
|
+
maxDeficitStep
|
|
127
127
|
};
|
|
128
128
|
}
|
|
129
129
|
function buildRamp(seedArg, config, {
|
|
@@ -150,11 +150,7 @@ function buildRamp(seedArg, config, {
|
|
|
150
150
|
oppDir = worse;
|
|
151
151
|
}
|
|
152
152
|
const sortedSteps = sortByDependency(config);
|
|
153
|
-
const {
|
|
154
|
-
rampResults,
|
|
155
|
-
SATISFIED_ALL_CONTRAST_REQUIREMENTS,
|
|
156
|
-
UNSATISFIED_DIRECTION
|
|
157
|
-
} = calculateRamp({
|
|
153
|
+
const { rampResults, maxDeficit, maxDeficitDirection, maxDeficitStep } = calculateRamp({
|
|
158
154
|
seed,
|
|
159
155
|
sortedSteps,
|
|
160
156
|
config,
|
|
@@ -162,45 +158,52 @@ function buildRamp(seedArg, config, {
|
|
|
162
158
|
oppDir,
|
|
163
159
|
pinLightness
|
|
164
160
|
});
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
let worseSeedL = get(seed, [OKLCH, "l"]);
|
|
171
|
-
let betterSeedL = UNSATISFIED_DIRECTION === "lighter" ? 0 : 1;
|
|
172
|
-
for (let i = 0; i < MAX_BISECTION_ITERATIONS && Math.abs(betterSeedL - worseSeedL) > LIGHTNESS_EPSILON; i++) {
|
|
173
|
-
const newSeed = clampToGamut(
|
|
174
|
-
set(
|
|
175
|
-
clone(seed),
|
|
176
|
-
[OKLCH, "l"],
|
|
177
|
-
(worseSeedL + betterSeedL) / 2
|
|
178
|
-
)
|
|
179
|
-
);
|
|
161
|
+
let bestRamp = rampResults;
|
|
162
|
+
if (maxDeficit > CONTRAST_EPSILON && rescaleToFitContrastTargets) {
|
|
163
|
+
let getSeedForL = function(l) {
|
|
164
|
+
return clampToGamut(set(clone(seed), [OKLCH, "l"], l));
|
|
165
|
+
}, getDeficitForSeed = function(s) {
|
|
180
166
|
const iterationResults = calculateRamp({
|
|
181
|
-
seed:
|
|
182
|
-
sortedSteps,
|
|
167
|
+
seed: s,
|
|
168
|
+
sortedSteps: iterSteps,
|
|
183
169
|
config,
|
|
184
170
|
mainDir,
|
|
185
171
|
oppDir,
|
|
186
172
|
pinLightness
|
|
187
173
|
});
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
174
|
+
return iterationResults.maxDeficitDirection === maxDeficitDirection ? iterationResults.maxDeficit : -maxDeficit;
|
|
175
|
+
};
|
|
176
|
+
const iterSteps = stepsForStep(maxDeficitStep, config);
|
|
177
|
+
const lowerSeedL = maxDeficitDirection === "lighter" ? 0 : 1;
|
|
178
|
+
const lowerDeficit = -maxDeficit;
|
|
179
|
+
const upperSeedL = get(seed, [OKLCH, "l"]);
|
|
180
|
+
const upperDeficit = maxDeficit;
|
|
181
|
+
const bestSeed = solveWithBisect(
|
|
182
|
+
getSeedForL,
|
|
183
|
+
getDeficitForSeed,
|
|
184
|
+
lowerSeedL,
|
|
185
|
+
lowerDeficit,
|
|
186
|
+
upperSeedL,
|
|
187
|
+
upperDeficit
|
|
188
|
+
);
|
|
189
|
+
bestRamp = calculateRamp({
|
|
190
|
+
seed: bestSeed,
|
|
191
|
+
sortedSteps,
|
|
192
|
+
config,
|
|
193
|
+
mainDir,
|
|
194
|
+
oppDir,
|
|
195
|
+
pinLightness
|
|
196
|
+
}).rampResults;
|
|
197
197
|
}
|
|
198
198
|
if (mainDir === "darker") {
|
|
199
|
-
const tmpSurface1 =
|
|
200
|
-
|
|
201
|
-
|
|
199
|
+
const tmpSurface1 = bestRamp.surface1;
|
|
200
|
+
bestRamp.surface1 = bestRamp.surface3;
|
|
201
|
+
bestRamp.surface3 = tmpSurface1;
|
|
202
202
|
}
|
|
203
|
-
return
|
|
203
|
+
return {
|
|
204
|
+
ramp: bestRamp,
|
|
205
|
+
direction: mainDir
|
|
206
|
+
};
|
|
204
207
|
}
|
|
205
208
|
export {
|
|
206
209
|
buildRamp
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/color-ramps/lib/index.ts"],
|
|
4
|
-
"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} from './utils';\n\nimport type {\n\tFollowDirection,\n\tRamp,\n\tRampDirection,\n\tRampConfig,\n\tRampResult,\n} from './types';\nimport { LIGHTNESS_EPSILON, MAX_BISECTION_ITERATIONS } 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 SATISFIED_ALL_CONTRAST_REQUIREMENTS = true;\n\tlet UNSATISFIED_DIRECTION: RampDirection = 'lighter';\n\tlet MAX_WEIGHTED_DEFICIT = 0;\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\t\tconst referenceColor = calculatedColors.get( contrast.reference );\n\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\tconst candidateContrast = getContrast(\n\t\t\t\t\treferenceColor,\n\t\t\t\t\tcandidateColor\n\t\t\t\t);\n\t\t\t\tconst adjustedTarget = adjustContrastTarget( contrast.target );\n\t\t\t\t// If the candidate meets the contrast requirement, use it\n\t\t\t\tif ( candidateContrast >= adjustedTarget ) {\n\t\t\t\t\t// Store the reused color\n\t\t\t\t\tcalculatedColors.set( stepName, candidateColor );\n\t\t\t\t\trampResults[ stepName ] = {\n\t\t\t\t\t\tcolor: getColorString( candidateColor ),\n\t\t\t\t\t\twarning: false,\n\t\t\t\t\t};\n\n\t\t\t\t\tcontinue; // Skip to next step\n\t\t\t\t}\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\tstrict: false,\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 ( ! searchResults.reached && ! contrast.ignoreWhenAdjustingSeed ) {\n\t\t\tSATISFIED_ALL_CONTRAST_REQUIREMENTS = false;\n\n\t\t\t// Calculate constraint failure severity for seed optimization\n\t\t\t// Use the relative deficit size, weighted by how changing the seed would impact this constraint\n\t\t\tconst deficitVsTarget = adjustedTarget - searchResults.achieved;\n\n\t\t\t// Weight the deficit by how much seed adjustment would help this constraint\n\t\t\t// If seed has low contrast vs reference, adjusting seed has high impact\n\t\t\t// If seed has high contrast vs reference, adjusting seed has low impact\n\t\t\tconst impactWeight = 1 / getContrast( seed, referenceColor );\n\t\t\tconst weightedDeficit = deficitVsTarget * impactWeight;\n\n\t\t\t// Track the most impactful failure for seed optimization\n\t\t\tif ( weightedDeficit > MAX_WEIGHTED_DEFICIT ) {\n\t\t\t\tMAX_WEIGHTED_DEFICIT = weightedDeficit;\n\t\t\t\tUNSATISFIED_DIRECTION = computedDir;\n\t\t\t}\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\n\treturn {\n\t\trampResults,\n\t\tSATISFIED_ALL_CONTRAST_REQUIREMENTS,\n\t\tUNSATISFIED_DIRECTION,\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\tSATISFIED_ALL_CONTRAST_REQUIREMENTS,\n\t\tUNSATISFIED_DIRECTION,\n\t} = calculateRamp( {\n\t\tseed,\n\t\tsortedSteps,\n\t\tconfig,\n\t\tmainDir,\n\t\toppDir,\n\t\tpinLightness,\n\t} );\n\tconst toReturn = {\n\t\tramp: rampResults,\n\t\tdirection: mainDir,\n\t} as RampResult;\n\n\tif (\n\t\t! SATISFIED_ALL_CONTRAST_REQUIREMENTS &&\n\t\trescaleToFitContrastTargets\n\t) {\n\t\tlet worseSeedL = get( seed, [ OKLCH, 'l' ] );\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\tlet betterSeedL = UNSATISFIED_DIRECTION === 'lighter' ? 0 : 1;\n\n\t\t// Binary search: try a new seed and recompute the whole ramp\n\t\t// (TODO: try a smarter approach?)\n\t\tfor (\n\t\t\tlet i = 0;\n\t\t\ti < MAX_BISECTION_ITERATIONS &&\n\t\t\tMath.abs( betterSeedL - worseSeedL ) > LIGHTNESS_EPSILON;\n\t\t\ti++\n\t\t) {\n\t\t\tconst newSeed = clampToGamut(\n\t\t\t\tset(\n\t\t\t\t\tclone( seed ),\n\t\t\t\t\t[ OKLCH, 'l' ],\n\t\t\t\t\t( worseSeedL + betterSeedL ) / 2\n\t\t\t\t)\n\t\t\t);\n\n\t\t\tconst iterationResults = calculateRamp( {\n\t\t\t\tseed: newSeed,\n\t\t\t\tsortedSteps,\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\tif ( iterationResults.SATISFIED_ALL_CONTRAST_REQUIREMENTS ) {\n\t\t\t\tbetterSeedL = get( newSeed, [ OKLCH, 'l' ] );\n\t\t\t\t// Only update toReturn when the ramp satisfies all constraints.\n\t\t\t\ttoReturn.ramp = iterationResults.rampResults;\n\t\t\t} else if ( UNSATISFIED_DIRECTION !== mainDir ) {\n\t\t\t\t// Failing constraint is in opposite direction to main ramp direction\n\t\t\t\t// We've moved too far in mainDir, constrain the search\n\t\t\t\tbetterSeedL = get( newSeed, [ OKLCH, 'l' ] );\n\t\t\t} else {\n\t\t\t\t// Failing constraint is in same direction as main ramp direction\n\t\t\t\t// We haven't moved far enough in mainDir, continue searching\n\t\t\t\tworseSeedL = get( newSeed, [ OKLCH, 'l' ] );\n\t\t\t}\n\t\t}\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 = toReturn.ramp.surface1;\n\t\ttoReturn.ramp.surface1 = toReturn.ramp.surface3;\n\t\ttoReturn.ramp.surface3 = tmpSurface1;\n\t}\n\n\treturn toReturn;\n}\n"],
|
|
5
|
-
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGM;AAKP,OAAO;AACP,SAAS,aAAa,sBAAsB;AAC5C,SAAS,oCAAoC;AAC7C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AASP,SAAS,
|
|
4
|
+
"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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["adjustedTarget"]
|
|
7
7
|
}
|
|
@@ -38,7 +38,7 @@ var BG_RAMP_CONFIG = {
|
|
|
38
38
|
contrast: {
|
|
39
39
|
reference: "surface2",
|
|
40
40
|
followDirection: "opposite",
|
|
41
|
-
target: 1.
|
|
41
|
+
target: 1.06,
|
|
42
42
|
ignoreWhenAdjustingSeed: true
|
|
43
43
|
},
|
|
44
44
|
taperChromaOptions: BG_SURFACE_TAPER_CHROMA
|
|
@@ -54,7 +54,7 @@ var BG_RAMP_CONFIG = {
|
|
|
54
54
|
contrast: {
|
|
55
55
|
reference: "surface2",
|
|
56
56
|
followDirection: "main",
|
|
57
|
-
target: 1.
|
|
57
|
+
target: 1.06
|
|
58
58
|
},
|
|
59
59
|
taperChromaOptions: BG_SURFACE_TAPER_CHROMA
|
|
60
60
|
},
|
|
@@ -62,7 +62,7 @@ var BG_RAMP_CONFIG = {
|
|
|
62
62
|
contrast: {
|
|
63
63
|
reference: "surface2",
|
|
64
64
|
followDirection: "main",
|
|
65
|
-
target: 1.
|
|
65
|
+
target: 1.12
|
|
66
66
|
},
|
|
67
67
|
taperChromaOptions: BG_SURFACE_TAPER_CHROMA
|
|
68
68
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/color-ramps/lib/ramp-configs.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { RampStepConfig, RampConfig, RampDirection } from './types';\nimport type { TaperChromaOptions } from './taper-chroma';\n\nconst lightnessConstraintForegroundHighContrast = (\n\tdirection: RampDirection\n) =>\n\tdirection === 'lighter'\n\t\t? 0.9551 // lightness of #f0f0f0 (ie $gray-100)\n\t\t: 0.235; // lightness of #1e1e1e (ie $gray-900)\nconst lightnessConstraintForegroundMediumContrast = (\n\tdirection: RampDirection\n) =>\n\tdirection === 'lighter'\n\t\t? 0.77 // lightness of #b4b4b4\n\t\t: 0.56; // lightness of #747474\nconst lightnessConstraintBgFill = ( direction: RampDirection ) =>\n\tdirection === 'lighter'\n\t\t? 0.67 // lightness of #969696 (7:1 vs black)\n\t\t: 0.45; // lightness of #555555 (7:1 vs white)\n\nconst BG_SURFACE_TAPER_CHROMA: TaperChromaOptions = {\n\talpha: 0.7,\n};\nconst FG_TAPER_CHROMA: TaperChromaOptions = {\n\talpha: 0.6,\n\tkLight: 0.2,\n\tkDark: 0.2,\n};\nconst STROKE_TAPER_CHROMA: TaperChromaOptions = {\n\talpha: 0.6,\n\tradiusDark: 0.01,\n\tradiusLight: 0.01,\n\tkLight: 0.8,\n\tkDark: 0.8,\n};\nconst ACCENT_SURFACE_TAPER_CHROMA: TaperChromaOptions = {\n\talpha: 0.75,\n\tradiusDark: 0.01,\n\tradiusLight: 0.01,\n};\n\nconst fgSurface4Config: RampStepConfig = {\n\tcontrast: {\n\t\treference: 'surface3',\n\t\tfollowDirection: 'main',\n\t\ttarget: 7,\n\t\tpreferLighter: true,\n\t},\n\tlightness: lightnessConstraintForegroundHighContrast,\n\ttaperChromaOptions: FG_TAPER_CHROMA,\n};\n\nexport const BG_RAMP_CONFIG: RampConfig = {\n\t// Surface\n\tsurface1: {\n\t\tcontrast: {\n\t\t\treference: 'surface2',\n\t\t\tfollowDirection: 'opposite',\n\t\t\ttarget: 1.
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { RampStepConfig, RampConfig, RampDirection } from './types';\nimport type { TaperChromaOptions } from './taper-chroma';\n\nconst lightnessConstraintForegroundHighContrast = (\n\tdirection: RampDirection\n) =>\n\tdirection === 'lighter'\n\t\t? 0.9551 // lightness of #f0f0f0 (ie $gray-100)\n\t\t: 0.235; // lightness of #1e1e1e (ie $gray-900)\nconst lightnessConstraintForegroundMediumContrast = (\n\tdirection: RampDirection\n) =>\n\tdirection === 'lighter'\n\t\t? 0.77 // lightness of #b4b4b4\n\t\t: 0.56; // lightness of #747474\nconst lightnessConstraintBgFill = ( direction: RampDirection ) =>\n\tdirection === 'lighter'\n\t\t? 0.67 // lightness of #969696 (7:1 vs black)\n\t\t: 0.45; // lightness of #555555 (7:1 vs white)\n\nconst BG_SURFACE_TAPER_CHROMA: TaperChromaOptions = {\n\talpha: 0.7,\n};\nconst FG_TAPER_CHROMA: TaperChromaOptions = {\n\talpha: 0.6,\n\tkLight: 0.2,\n\tkDark: 0.2,\n};\nconst STROKE_TAPER_CHROMA: TaperChromaOptions = {\n\talpha: 0.6,\n\tradiusDark: 0.01,\n\tradiusLight: 0.01,\n\tkLight: 0.8,\n\tkDark: 0.8,\n};\nconst ACCENT_SURFACE_TAPER_CHROMA: TaperChromaOptions = {\n\talpha: 0.75,\n\tradiusDark: 0.01,\n\tradiusLight: 0.01,\n};\n\nconst fgSurface4Config: RampStepConfig = {\n\tcontrast: {\n\t\treference: 'surface3',\n\t\tfollowDirection: 'main',\n\t\ttarget: 7,\n\t\tpreferLighter: true,\n\t},\n\tlightness: lightnessConstraintForegroundHighContrast,\n\ttaperChromaOptions: FG_TAPER_CHROMA,\n};\n\nexport const BG_RAMP_CONFIG: RampConfig = {\n\t// Surface\n\tsurface1: {\n\t\tcontrast: {\n\t\t\treference: 'surface2',\n\t\t\tfollowDirection: 'opposite',\n\t\t\ttarget: 1.06,\n\t\t\tignoreWhenAdjustingSeed: true,\n\t\t},\n\t\ttaperChromaOptions: BG_SURFACE_TAPER_CHROMA,\n\t},\n\tsurface2: {\n\t\tcontrast: {\n\t\t\treference: 'seed',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 1,\n\t\t},\n\t},\n\tsurface3: {\n\t\tcontrast: {\n\t\t\treference: 'surface2',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 1.06,\n\t\t},\n\t\ttaperChromaOptions: BG_SURFACE_TAPER_CHROMA,\n\t},\n\tsurface4: {\n\t\tcontrast: {\n\t\t\treference: 'surface2',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 1.12,\n\t\t},\n\t\ttaperChromaOptions: BG_SURFACE_TAPER_CHROMA,\n\t},\n\tsurface5: {\n\t\tcontrast: {\n\t\t\treference: 'surface2',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 1.2,\n\t\t},\n\t\ttaperChromaOptions: BG_SURFACE_TAPER_CHROMA,\n\t},\n\tsurface6: {\n\t\tcontrast: {\n\t\t\treference: 'surface2',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 1.4,\n\t\t},\n\t\ttaperChromaOptions: BG_SURFACE_TAPER_CHROMA,\n\t},\n\t// Bg fill\n\tbgFill1: {\n\t\tcontrast: {\n\t\t\treference: 'surface2',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 4,\n\t\t},\n\t\tlightness: lightnessConstraintBgFill,\n\t},\n\tbgFill2: {\n\t\tcontrast: {\n\t\t\treference: 'bgFill1',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 1.2,\n\t\t},\n\t},\n\tbgFillInverted1: {\n\t\tcontrast: {\n\t\t\treference: 'bgFillInverted2',\n\t\t\tfollowDirection: 'opposite',\n\t\t\ttarget: 1.2,\n\t\t},\n\t},\n\tbgFillInverted2: fgSurface4Config,\n\tbgFillDark: {\n\t\tcontrast: {\n\t\t\treference: 'surface3',\n\t\t\tfollowDirection: 'darker', // This is what causes the token to be always dark\n\t\t\ttarget: 7,\n\t\t\tignoreWhenAdjustingSeed: true,\n\t\t},\n\t\tlightness: lightnessConstraintForegroundHighContrast,\n\t\ttaperChromaOptions: FG_TAPER_CHROMA,\n\t},\n\t// Stroke\n\tstroke1: {\n\t\tcontrast: {\n\t\t\treference: 'stroke3',\n\t\t\tfollowDirection: 'opposite',\n\t\t\ttarget: 2.2,\n\t\t},\n\t\ttaperChromaOptions: STROKE_TAPER_CHROMA,\n\t},\n\tstroke2: {\n\t\tcontrast: {\n\t\t\treference: 'stroke3',\n\t\t\tfollowDirection: 'opposite',\n\t\t\ttarget: 1.5,\n\t\t},\n\t\ttaperChromaOptions: STROKE_TAPER_CHROMA,\n\t},\n\tstroke3: {\n\t\tcontrast: {\n\t\t\treference: 'surface3',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 3,\n\t\t},\n\t\ttaperChromaOptions: STROKE_TAPER_CHROMA,\n\t},\n\tstroke4: {\n\t\tcontrast: {\n\t\t\treference: 'stroke3',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 1.5,\n\t\t},\n\t\ttaperChromaOptions: STROKE_TAPER_CHROMA,\n\t},\n\t// fgSurface\n\tfgSurface1: {\n\t\tcontrast: {\n\t\t\treference: 'surface3',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 2,\n\t\t\tpreferLighter: true,\n\t\t},\n\t\ttaperChromaOptions: FG_TAPER_CHROMA,\n\t},\n\tfgSurface2: {\n\t\tcontrast: {\n\t\t\treference: 'surface3',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 3,\n\t\t\tpreferLighter: true,\n\t\t},\n\t\ttaperChromaOptions: FG_TAPER_CHROMA,\n\t},\n\tfgSurface3: {\n\t\tcontrast: {\n\t\t\treference: 'surface3',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 4.5,\n\t\t\tpreferLighter: true,\n\t\t},\n\t\tlightness: lightnessConstraintForegroundMediumContrast,\n\t\ttaperChromaOptions: FG_TAPER_CHROMA,\n\t},\n\tfgSurface4: fgSurface4Config,\n\t// fgFill\n\tfgFill: {\n\t\tcontrast: {\n\t\t\treference: 'bgFill1',\n\t\t\tfollowDirection: 'best',\n\t\t\ttarget: 4.5,\n\t\t\tpreferLighter: true,\n\t\t},\n\t\tlightness: lightnessConstraintForegroundHighContrast,\n\t\ttaperChromaOptions: FG_TAPER_CHROMA,\n\t},\n\tfgFillInverted: {\n\t\tcontrast: {\n\t\t\treference: 'bgFillInverted1',\n\t\t\tfollowDirection: 'best',\n\t\t\ttarget: 4.5,\n\t\t\tpreferLighter: true,\n\t\t},\n\t\tlightness: lightnessConstraintForegroundHighContrast,\n\t\ttaperChromaOptions: FG_TAPER_CHROMA,\n\t},\n\tfgFillDark: {\n\t\tcontrast: {\n\t\t\treference: 'bgFillDark',\n\t\t\tfollowDirection: 'best',\n\t\t\ttarget: 4.5,\n\t\t\tpreferLighter: true,\n\t\t},\n\t\tlightness: lightnessConstraintForegroundHighContrast,\n\t\ttaperChromaOptions: FG_TAPER_CHROMA,\n\t},\n};\n\n// BG_RAMP: seed => surface2 => {bgFill, surface3 => all other tokens}\n// ACCENT_RAMP: seed => bgFill1 => surface2 => surface3 => all other tokens\nexport const ACCENT_RAMP_CONFIG: RampConfig = {\n\t...BG_RAMP_CONFIG,\n\tsurface1: {\n\t\t...BG_RAMP_CONFIG.surface1,\n\t\ttaperChromaOptions: ACCENT_SURFACE_TAPER_CHROMA,\n\t},\n\tsurface2: {\n\t\tcontrast: {\n\t\t\treference: 'bgFill1',\n\t\t\tfollowDirection: 'opposite',\n\t\t\ttarget: BG_RAMP_CONFIG.bgFill1.contrast.target,\n\t\t\tignoreWhenAdjustingSeed: true,\n\t\t},\n\t\ttaperChromaOptions: ACCENT_SURFACE_TAPER_CHROMA,\n\t},\n\tsurface3: {\n\t\t...BG_RAMP_CONFIG.surface3,\n\t\ttaperChromaOptions: ACCENT_SURFACE_TAPER_CHROMA,\n\t},\n\tsurface4: {\n\t\t...BG_RAMP_CONFIG.surface4,\n\t\ttaperChromaOptions: ACCENT_SURFACE_TAPER_CHROMA,\n\t},\n\tsurface5: {\n\t\t...BG_RAMP_CONFIG.surface5,\n\t\ttaperChromaOptions: ACCENT_SURFACE_TAPER_CHROMA,\n\t},\n\tsurface6: {\n\t\t...BG_RAMP_CONFIG.surface6,\n\t\ttaperChromaOptions: ACCENT_SURFACE_TAPER_CHROMA,\n\t},\n\tbgFill1: {\n\t\tcontrast: {\n\t\t\treference: 'seed',\n\t\t\tfollowDirection: 'main',\n\t\t\ttarget: 1,\n\t\t},\n\t},\n\tstroke1: {\n\t\t...BG_RAMP_CONFIG.stroke1,\n\t},\n\tstroke2: {\n\t\t...BG_RAMP_CONFIG.stroke2,\n\t},\n\tstroke3: {\n\t\t...BG_RAMP_CONFIG.stroke3,\n\t\tsameAsIfPossible: 'fgSurface3',\n\t\ttaperChromaOptions: undefined,\n\t},\n\tstroke4: {\n\t\t...BG_RAMP_CONFIG.stroke4,\n\t\ttaperChromaOptions: undefined,\n\t},\n\t// fgSurface: do not de-saturate\n\tfgSurface1: {\n\t\t...BG_RAMP_CONFIG.fgSurface1,\n\t\ttaperChromaOptions: undefined,\n\t},\n\tfgSurface2: {\n\t\t...BG_RAMP_CONFIG.fgSurface2,\n\t\ttaperChromaOptions: undefined,\n\t},\n\tfgSurface3: {\n\t\t...BG_RAMP_CONFIG.fgSurface3,\n\t\ttaperChromaOptions: undefined,\n\t\tsameAsIfPossible: 'bgFill1',\n\t},\n\tfgSurface4: {\n\t\t...BG_RAMP_CONFIG.fgSurface4,\n\t\ttaperChromaOptions: undefined,\n\t},\n};\n"],
|
|
5
5
|
"mappings": ";AAMA,IAAM,4CAA4C,CACjD,cAEA,cAAc,YACX,SACA;AACJ,IAAM,8CAA8C,CACnD,cAEA,cAAc,YACX,OACA;AACJ,IAAM,4BAA4B,CAAE,cACnC,cAAc,YACX,OACA;AAEJ,IAAM,0BAA8C;AAAA,EACnD,OAAO;AACR;AACA,IAAM,kBAAsC;AAAA,EAC3C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR;AACA,IAAM,sBAA0C;AAAA,EAC/C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AACR;AACA,IAAM,8BAAkD;AAAA,EACvD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,aAAa;AACd;AAEA,IAAM,mBAAmC;AAAA,EACxC,UAAU;AAAA,IACT,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,eAAe;AAAA,EAChB;AAAA,EACA,WAAW;AAAA,EACX,oBAAoB;AACrB;AAEO,IAAM,iBAA6B;AAAA;AAAA,EAEzC,UAAU;AAAA,IACT,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,yBAAyB;AAAA,IAC1B;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,IACT,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,IACT,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,IACT,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,IACT,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA;AAAA,EAEA,SAAS;AAAA,IACR,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACR,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,EACjB,YAAY;AAAA,IACX,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA;AAAA,MACjB,QAAQ;AAAA,MACR,yBAAyB;AAAA,IAC1B;AAAA,IACA,WAAW;AAAA,IACX,oBAAoB;AAAA,EACrB;AAAA;AAAA,EAEA,SAAS;AAAA,IACR,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,IACR,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,IACR,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,IACR,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA;AAAA,EAEA,YAAY;AAAA,IACX,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,eAAe;AAAA,IAChB;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,IACX,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,eAAe;AAAA,IAChB;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,IACX,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,eAAe;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,IACX,oBAAoB;AAAA,EACrB;AAAA,EACA,YAAY;AAAA;AAAA,EAEZ,QAAQ;AAAA,IACP,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,eAAe;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,IACX,oBAAoB;AAAA,EACrB;AAAA,EACA,gBAAgB;AAAA,IACf,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,eAAe;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,IACX,oBAAoB;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,IACX,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,eAAe;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,IACX,oBAAoB;AAAA,EACrB;AACD;AAIO,IAAM,qBAAiC;AAAA,EAC7C,GAAG;AAAA,EACH,UAAU;AAAA,IACT,GAAG,eAAe;AAAA,IAClB,oBAAoB;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,IACT,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ,eAAe,QAAQ,SAAS;AAAA,MACxC,yBAAyB;AAAA,IAC1B;AAAA,IACA,oBAAoB;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,IACT,GAAG,eAAe;AAAA,IAClB,oBAAoB;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,IACT,GAAG,eAAe;AAAA,IAClB,oBAAoB;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,IACT,GAAG,eAAe;AAAA,IAClB,oBAAoB;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,IACT,GAAG,eAAe;AAAA,IAClB,oBAAoB;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,IACR,UAAU;AAAA,MACT,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACT;AAAA,EACD;AAAA,EACA,SAAS;AAAA,IACR,GAAG,eAAe;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACR,GAAG,eAAe;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACR,GAAG,eAAe;AAAA,IAClB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,IACR,GAAG,eAAe;AAAA,IAClB,oBAAoB;AAAA,EACrB;AAAA;AAAA,EAEA,YAAY;AAAA,IACX,GAAG,eAAe;AAAA,IAClB,oBAAoB;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,IACX,GAAG,eAAe;AAAA,IAClB,oBAAoB;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,IACX,GAAG,eAAe;AAAA,IAClB,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,EACnB;AAAA,EACA,YAAY;AAAA,IACX,GAAG,eAAe;AAAA,IAClB,oBAAoB;AAAA,EACrB;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,7 +6,9 @@ import {
|
|
|
6
6
|
BLACK,
|
|
7
7
|
UNIVERSAL_CONTRAST_TOPUP,
|
|
8
8
|
WHITE_TEXT_CONTRAST_MARGIN,
|
|
9
|
-
ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS
|
|
9
|
+
ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS,
|
|
10
|
+
MAX_BISECTION_ITERATIONS,
|
|
11
|
+
CONTRAST_EPSILON
|
|
10
12
|
} from "./constants";
|
|
11
13
|
import { getContrast } from "./color-utils";
|
|
12
14
|
var clampToGamut = (c) => to(toGamut(c, { space: P3, method: "css" }), OKLCH);
|
|
@@ -62,6 +64,25 @@ function sortByDependency(config) {
|
|
|
62
64
|
visit("seed");
|
|
63
65
|
return result;
|
|
64
66
|
}
|
|
67
|
+
function stepsForStep(stepName, config) {
|
|
68
|
+
const result = /* @__PURE__ */ new Set();
|
|
69
|
+
function visit(step) {
|
|
70
|
+
if (step === "seed" || result.has(step)) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const stepConfig = config[step];
|
|
74
|
+
if (!stepConfig) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
visit(stepConfig.contrast.reference);
|
|
78
|
+
if (stepConfig.sameAsIfPossible) {
|
|
79
|
+
visit(stepConfig.sameAsIfPossible);
|
|
80
|
+
}
|
|
81
|
+
result.add(step);
|
|
82
|
+
}
|
|
83
|
+
visit(stepName);
|
|
84
|
+
return Array.from(result);
|
|
85
|
+
}
|
|
65
86
|
function computeBetterFgColorDirection(seed, preferLighter) {
|
|
66
87
|
const contrastAgainstBlack = getContrast(seed, BLACK);
|
|
67
88
|
const contrastAgainstWhite = getContrast(seed, WHITE);
|
|
@@ -77,11 +98,51 @@ function clampAccentScaleReferenceLightness(rawLightness, direction) {
|
|
|
77
98
|
const thresholds = ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS[direction];
|
|
78
99
|
return Math.max(thresholds.min, Math.min(thresholds.max, rawLightness));
|
|
79
100
|
}
|
|
101
|
+
function solveWithBisect(calculateC, calculateValue, initLowerL, initLowerValue, initUpperL, initUpperValue) {
|
|
102
|
+
let lowerL = initLowerL;
|
|
103
|
+
let lowerValue = initLowerValue;
|
|
104
|
+
let lowerReplaced = false;
|
|
105
|
+
let upperL = initUpperL;
|
|
106
|
+
let upperValue = initUpperValue;
|
|
107
|
+
let upperReplaced = false;
|
|
108
|
+
let bestC;
|
|
109
|
+
let bestValue;
|
|
110
|
+
let iterations = 0;
|
|
111
|
+
while (true) {
|
|
112
|
+
iterations++;
|
|
113
|
+
const newL = (lowerL * upperValue - upperL * lowerValue) / (upperValue - lowerValue);
|
|
114
|
+
bestC = calculateC(newL);
|
|
115
|
+
bestValue = calculateValue(bestC);
|
|
116
|
+
if (Math.abs(bestValue) <= CONTRAST_EPSILON || iterations >= MAX_BISECTION_ITERATIONS) {
|
|
117
|
+
break;
|
|
118
|
+
}
|
|
119
|
+
if (bestValue <= 0) {
|
|
120
|
+
lowerL = newL;
|
|
121
|
+
lowerValue = bestValue;
|
|
122
|
+
if (lowerReplaced) {
|
|
123
|
+
upperValue /= 2;
|
|
124
|
+
}
|
|
125
|
+
lowerReplaced = true;
|
|
126
|
+
upperReplaced = false;
|
|
127
|
+
} else {
|
|
128
|
+
upperL = newL;
|
|
129
|
+
upperValue = bestValue;
|
|
130
|
+
if (upperReplaced) {
|
|
131
|
+
lowerValue /= 2;
|
|
132
|
+
}
|
|
133
|
+
upperReplaced = true;
|
|
134
|
+
lowerReplaced = false;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
return bestC;
|
|
138
|
+
}
|
|
80
139
|
export {
|
|
81
140
|
adjustContrastTarget,
|
|
82
141
|
clampAccentScaleReferenceLightness,
|
|
83
142
|
clampToGamut,
|
|
84
143
|
computeBetterFgColorDirection,
|
|
85
|
-
|
|
144
|
+
solveWithBisect,
|
|
145
|
+
sortByDependency,
|
|
146
|
+
stepsForStep
|
|
86
147
|
};
|
|
87
148
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/color-ramps/lib/utils.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { toGamut, to, P3, OKLCH, type ColorTypes } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport {\n\tWHITE,\n\tBLACK,\n\tUNIVERSAL_CONTRAST_TOPUP,\n\tWHITE_TEXT_CONTRAST_MARGIN,\n\tACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS,\n} from './constants';\nimport type { Ramp,
|
|
5
|
-
"mappings": ";AAGA,SAAS,SAAS,IAAI,IAAI,aAA8B;AAKxD,OAAO;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,SAAS,mBAAmB;AAMrB,IAAM,eAAe,CAAE,MAC7B,GAAI,QAAS,GAAG,EAAE,OAAO,IAAI,QAAQ,MAAM,CAAE,GAAG,KAAM;AAMvD,SAAS,qBAAsB,QAG7B;AACD,QAAM,eAAe,oBAAI,IAA6C;AACtE,QAAM,aAAa,oBAAI,IAA6C;AAGpE,SAAO,KAAM,MAAO,EAAE,QAAS,CAAE,SAAU;AAC1C,iBAAa,IAAK,MAAoB,CAAC,CAAE;AAAA,EAC1C,CAAE;AACF,aAAW,IAAK,QAAQ,CAAC,CAAE;AAC3B,SAAO,KAAM,MAAO,EAAE,QAAS,CAAE,SAAU;AAC1C,eAAW,IAAK,MAAoB,CAAC,CAAE;AAAA,EACxC,CAAE;AAGF,SAAO,QAAS,MAAO,EAAE,QAAS,CAAE,CAAE,UAAU,UAAW,MAAO;AACjE,UAAM,OAAO;AACb,UAAM,YAAY,WAAW,SAAS;AAEtC,iBAAa,IAAK,IAAK,EAAG,KAAM,SAAU;AAC1C,eAAW,IAAK,SAAU,EAAG,KAAM,IAAK;AAGxC,QAAK,WAAW,kBAAmB;AAClC,mBAAa,IAAK,IAAK,EAAG,KAAM,WAAW,gBAAiB;AAC5D,iBAAW,IAAK,WAAW,gBAAiB,EAAG,KAAM,IAAK;AAAA,IAC3D;AAAA,EACD,CAAE;AAEF,SAAO,EAAE,cAAc,WAAW;AACnC;AAMO,SAAS,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { toGamut, to, P3, OKLCH, type ColorTypes } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport {\n\tWHITE,\n\tBLACK,\n\tUNIVERSAL_CONTRAST_TOPUP,\n\tWHITE_TEXT_CONTRAST_MARGIN,\n\tACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS,\n\tMAX_BISECTION_ITERATIONS,\n\tCONTRAST_EPSILON,\n} from './constants';\nimport type { Ramp, RampConfig, RampDirection } from './types';\nimport { getContrast } from './color-utils';\n\n/**\n * Make sure that a color is valid in the p3 gamut, and converts it to oklch.\n * @param c\n */\nexport const clampToGamut = ( c: ColorTypes ) =>\n\tto( toGamut( c, { space: P3, method: 'css' } ), OKLCH ); // map into Display-P3 using CSS OKLCH method\n\n/**\n * Build a dependency graph from the steps configuration\n * @param config - The steps configuration object\n */\nfunction buildDependencyGraph( config: RampConfig ): {\n\tdependencies: Map< keyof Ramp, ( keyof Ramp | 'seed' )[] >;\n\tdependents: Map< keyof Ramp | 'seed', ( keyof Ramp )[] >;\n} {\n\tconst dependencies = new Map< keyof Ramp, ( keyof Ramp | 'seed' )[] >();\n\tconst dependents = new Map< keyof Ramp | 'seed', ( keyof Ramp )[] >();\n\n\t// Initialize maps\n\tObject.keys( config ).forEach( ( step ) => {\n\t\tdependencies.set( step as keyof Ramp, [] );\n\t} );\n\tdependents.set( 'seed', [] );\n\tObject.keys( config ).forEach( ( step ) => {\n\t\tdependents.set( step as keyof Ramp, [] );\n\t} );\n\n\t// Build the graph\n\tObject.entries( config ).forEach( ( [ stepName, stepConfig ] ) => {\n\t\tconst step = stepName as keyof Ramp;\n\t\tconst reference = stepConfig.contrast.reference;\n\n\t\tdependencies.get( step )!.push( reference );\n\t\tdependents.get( reference )!.push( step );\n\n\t\t// Add dependency for sameAsIfPossible\n\t\tif ( stepConfig.sameAsIfPossible ) {\n\t\t\tdependencies.get( step )!.push( stepConfig.sameAsIfPossible );\n\t\t\tdependents.get( stepConfig.sameAsIfPossible )!.push( step );\n\t\t}\n\t} );\n\n\treturn { dependencies, dependents };\n}\n\n/**\n * Topologically sort steps based on their dependencies\n * @param config - The steps configuration object\n */\nexport function sortByDependency( config: RampConfig ): ( keyof Ramp )[] {\n\tconst { dependents } = buildDependencyGraph( config );\n\tconst result: ( keyof Ramp )[] = [];\n\tconst visited = new Set< keyof Ramp | 'seed' >();\n\tconst visiting = new Set< keyof Ramp | 'seed' >();\n\n\tfunction visit( node: keyof Ramp | 'seed' ): void {\n\t\tif ( visiting.has( node ) ) {\n\t\t\tthrow new Error(\n\t\t\t\t`Circular dependency detected involving step: ${ String(\n\t\t\t\t\tnode\n\t\t\t\t) }`\n\t\t\t);\n\t\t}\n\t\tif ( visited.has( node ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tvisiting.add( node );\n\n\t\t// Visit all dependents (steps that depend on this node)\n\t\tconst nodeDependents = dependents.get( node ) || [];\n\t\tnodeDependents.forEach( ( dependent ) => {\n\t\t\tvisit( dependent );\n\t\t} );\n\n\t\tvisiting.delete( node );\n\t\tvisited.add( node );\n\n\t\t// Add to result only if it's a step (not 'seed')\n\t\tif ( node !== 'seed' ) {\n\t\t\tresult.unshift( node ); // Add to front for correct topological order\n\t\t}\n\t}\n\n\t// Start with seed - this will recursively visit all reachable nodes\n\tvisit( 'seed' );\n\n\treturn result;\n}\n/**\n * Return minimal set of steps that are needed to calculate `stepName` from the seed.\n * @param stepName Name of the step.\n * @param config Configuration of the ramp.\n * @return Array of steps that `stepName` depends on.\n */\nexport function stepsForStep(\n\tstepName: keyof Ramp,\n\tconfig: RampConfig\n): ( keyof Ramp )[] {\n\tconst result = new Set< keyof Ramp >();\n\tfunction visit( step: keyof Ramp | 'seed' ) {\n\t\tif ( step === 'seed' || result.has( step ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst stepConfig = config[ step ];\n\t\tif ( ! stepConfig ) {\n\t\t\treturn;\n\t\t}\n\n\t\tvisit( stepConfig.contrast.reference );\n\t\tif ( stepConfig.sameAsIfPossible ) {\n\t\t\tvisit( stepConfig.sameAsIfPossible );\n\t\t}\n\n\t\tresult.add( step );\n\t}\n\tvisit( stepName );\n\treturn Array.from( result );\n}\n\n/**\n * Finds out whether a lighter or a darker foreground color achieves a better\n * contrast against the seed\n * @param seed\n * @param preferLighter Whether the check should favor white foreground color\n * @return An object with \"better\" and \"worse\" properties, each holding a\n * ramp direction value.\n */\nexport function computeBetterFgColorDirection(\n\tseed: ColorTypes,\n\tpreferLighter?: boolean\n): {\n\tbetter: RampDirection;\n\tworse: RampDirection;\n} {\n\tconst contrastAgainstBlack = getContrast( seed, BLACK );\n\tconst contrastAgainstWhite = getContrast( seed, WHITE );\n\n\treturn contrastAgainstBlack >\n\t\tcontrastAgainstWhite +\n\t\t\t( preferLighter ? WHITE_TEXT_CONTRAST_MARGIN : 0 )\n\t\t? { better: 'darker', worse: 'lighter' }\n\t\t: { better: 'lighter', worse: 'darker' };\n}\n\nexport function adjustContrastTarget( target: number ) {\n\tif ( target === 1 ) {\n\t\treturn 1;\n\t}\n\n\t// Add a little top up to take into account any rounding error and algo imprecisions.\n\treturn target + UNIVERSAL_CONTRAST_TOPUP;\n}\n\n/**\n * Prevent the accent scale from referencing a lightness value that\n * would prevent the algorithm from complying with the requirements\n * and cause it to generate unexpected results.\n * @param rawLightness\n * @param direction\n * @return The clamped lightness value\n */\nexport function clampAccentScaleReferenceLightness(\n\trawLightness: number,\n\tdirection: RampDirection\n) {\n\tconst thresholds = ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS[ direction ];\n\treturn Math.max( thresholds.min, Math.min( thresholds.max, rawLightness ) );\n}\n\n/**\n * Find the value of of `L` (luminance) that produces a `C` (color) that has a\n * `value` (contrast delta) equal to zero.\n * @param calculateC Calculate `C` from a given `L`.\n * @param calculateValue Calculate value (delta) for a given `C`.\n * @param initLowerL Initial lower value of `L`.\n * @param initLowerValue Initial lower delta (negative).\n * @param initUpperL Initial upper value of `L`.\n * @param initUpperValue Initial upper delta (positive).\n * @return Resulting value of type `C`.\n */\nexport function solveWithBisect< C >(\n\tcalculateC: ( l: number ) => C,\n\tcalculateValue: ( t: C ) => number,\n\tinitLowerL: number,\n\tinitLowerValue: number,\n\tinitUpperL: number,\n\tinitUpperValue: number\n): C {\n\tlet lowerL = initLowerL;\n\tlet lowerValue = initLowerValue;\n\tlet lowerReplaced = false;\n\n\tlet upperL = initUpperL;\n\tlet upperValue = initUpperValue;\n\tlet upperReplaced = false;\n\n\tlet bestC: C;\n\tlet bestValue: number;\n\tlet iterations = 0;\n\n\twhile ( true ) {\n\t\titerations++;\n\n\t\t// Linear interpolation: find the point where a line would cross the zero axis.\n\t\tconst newL =\n\t\t\t( lowerL * upperValue - upperL * lowerValue ) /\n\t\t\t( upperValue - lowerValue );\n\n\t\tbestC = calculateC( newL );\n\t\tbestValue = calculateValue( bestC );\n\n\t\tif (\n\t\t\tMath.abs( bestValue ) <= CONTRAST_EPSILON ||\n\t\t\titerations >= MAX_BISECTION_ITERATIONS\n\t\t) {\n\t\t\tbreak;\n\t\t}\n\n\t\t// Update the lower/upper bracket values. When only one side is repeatedly updated,\n\t\t// apply so-called \"Illinois trick\" for faster convergence: halve the opposite value.\n\t\tif ( bestValue <= 0 ) {\n\t\t\tlowerL = newL;\n\t\t\tlowerValue = bestValue;\n\t\t\tif ( lowerReplaced ) {\n\t\t\t\tupperValue /= 2;\n\t\t\t}\n\t\t\tlowerReplaced = true;\n\t\t\tupperReplaced = false;\n\t\t} else {\n\t\t\tupperL = newL;\n\t\t\tupperValue = bestValue;\n\t\t\tif ( upperReplaced ) {\n\t\t\t\tlowerValue /= 2;\n\t\t\t}\n\t\t\tupperReplaced = true;\n\t\t\tlowerReplaced = false;\n\t\t}\n\t}\n\n\treturn bestC;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -92,20 +92,15 @@ var design_tokens_default = [
|
|
|
92
92
|
"--wpds-color-stroke-interactive-brand-disabled",
|
|
93
93
|
"--wpds-color-stroke-interactive-error-strong",
|
|
94
94
|
"--wpds-color-stroke-focus-brand",
|
|
95
|
+
"--wpds-dimension-base",
|
|
96
|
+
"--wpds-dimension-padding-surface-x-small",
|
|
97
|
+
"--wpds-dimension-padding-surface-small",
|
|
98
|
+
"--wpds-dimension-padding-surface-medium",
|
|
99
|
+
"--wpds-dimension-padding-surface-large",
|
|
95
100
|
"--wpds-elevation-x-small",
|
|
96
101
|
"--wpds-elevation-small",
|
|
97
102
|
"--wpds-elevation-medium",
|
|
98
103
|
"--wpds-elevation-large",
|
|
99
|
-
"--wpds-spacing-05",
|
|
100
|
-
"--wpds-spacing-10",
|
|
101
|
-
"--wpds-spacing-15",
|
|
102
|
-
"--wpds-spacing-20",
|
|
103
|
-
"--wpds-spacing-30",
|
|
104
|
-
"--wpds-spacing-40",
|
|
105
|
-
"--wpds-spacing-50",
|
|
106
|
-
"--wpds-spacing-60",
|
|
107
|
-
"--wpds-spacing-70",
|
|
108
|
-
"--wpds-spacing-80",
|
|
109
104
|
"--wpds-font-family-heading",
|
|
110
105
|
"--wpds-font-family-body",
|
|
111
106
|
"--wpds-font-family-mono",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/prebuilt/js/design-tokens.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-x-small',\n\t'--wpds-border-radius-small',\n\t'--wpds-border-radius-medium',\n\t'--wpds-border-radius-large',\n\t'--wpds-border-width-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral',\n\t'--wpds-color-bg-interactive-neutral-active',\n\t'--wpds-color-bg-interactive-neutral-disabled',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand',\n\t'--wpds-color-bg-interactive-brand-active',\n\t'--wpds-color-bg-interactive-brand-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-strong-disabled',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-brand-weak-disabled',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-brand-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-disabled',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-brand-strong-disabled',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-brand-disabled',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-
|
|
5
|
-
"mappings": ";AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;
|
|
4
|
+
"sourcesContent": ["/**\n * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-x-small',\n\t'--wpds-border-radius-small',\n\t'--wpds-border-radius-medium',\n\t'--wpds-border-radius-large',\n\t'--wpds-border-width-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral',\n\t'--wpds-color-bg-interactive-neutral-active',\n\t'--wpds-color-bg-interactive-neutral-disabled',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand',\n\t'--wpds-color-bg-interactive-brand-active',\n\t'--wpds-color-bg-interactive-brand-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-strong-disabled',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-brand-weak-disabled',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-brand-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-disabled',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-brand-strong-disabled',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-brand-disabled',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-surface-x-small',\n\t'--wpds-dimension-padding-surface-small',\n\t'--wpds-dimension-padding-surface-medium',\n\t'--wpds-dimension-padding-surface-large',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-x-small',\n\t'--wpds-font-size-small',\n\t'--wpds-font-size-medium',\n\t'--wpds-font-size-large',\n\t'--wpds-font-size-x-large',\n\t'--wpds-font-size-2x-large',\n\t'--wpds-font-line-height-x-small',\n\t'--wpds-font-line-height-small',\n\t'--wpds-font-line-height-medium',\n\t'--wpds-font-line-height-large',\n\t'--wpds-font-line-height-x-large',\n\t'--wpds-font-line-height-2x-large',\n];\n"],
|
|
5
|
+
"mappings": ";AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|