@wordpress/theme 0.2.0 → 0.2.1-next.16d95556a.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/README.md +5 -1
- package/bin/generate-primitive-tokens/index.ts +1 -1
- package/build/color-ramps/index.js +5 -5
- package/build/color-ramps/index.js.map +2 -2
- package/build/color-ramps/lib/default-ramps.js +154 -154
- package/build/color-ramps/lib/default-ramps.js.map +2 -2
- package/build/color-ramps/lib/index.js +16 -9
- package/build/color-ramps/lib/index.js.map +2 -2
- package/build/color-ramps/lib/types.js.map +1 -1
- package/build/use-theme-provider-styles.js +1 -4
- package/build/use-theme-provider-styles.js.map +2 -2
- package/build-module/color-ramps/index.js +5 -5
- package/build-module/color-ramps/index.js.map +2 -2
- package/build-module/color-ramps/lib/default-ramps.js +154 -154
- package/build-module/color-ramps/lib/default-ramps.js.map +2 -2
- package/build-module/color-ramps/lib/index.js +16 -9
- package/build-module/color-ramps/lib/index.js.map +2 -2
- package/build-module/use-theme-provider-styles.js +1 -4
- package/build-module/use-theme-provider-styles.js.map +2 -2
- package/build-types/color-ramps/lib/index.d.ts.map +1 -1
- package/build-types/color-ramps/lib/types.d.ts +2 -4
- package/build-types/color-ramps/lib/types.d.ts.map +1 -1
- package/build-types/color-ramps/stories/index.story.d.ts.map +1 -1
- package/build-types/color-ramps/stories/ramp-table.d.ts +2 -4
- package/build-types/color-ramps/stories/ramp-table.d.ts.map +1 -1
- package/build-types/use-theme-provider-styles.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/color-ramps/index.ts +5 -5
- package/src/color-ramps/lib/default-ramps.ts +154 -154
- package/src/color-ramps/lib/index.ts +26 -22
- package/src/color-ramps/lib/types.ts +2 -7
- package/src/color-ramps/stories/index.story.tsx +4 -1
- package/src/color-ramps/stories/ramp-table.tsx +15 -26
- package/src/color-ramps/test/__snapshots__/index.test.ts.snap +11717 -41231
- package/src/color-ramps/test/index.test.ts +2 -2
- package/src/use-theme-provider-styles.ts +1 -4
- package/tsconfig.bin.tsbuildinfo +1 -1
- package/tsconfig.src.tsbuildinfo +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/color-ramps/lib/default-ramps.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { RampResult } from './types';\nimport type { DEFAULT_SEED_COLORS } from './constants';\n\nexport const DEFAULT_RAMPS: Record<\n\tkeyof typeof DEFAULT_SEED_COLORS,\n\tRampResult\n> = {\n\tbg: {\n\t\tramp: {\n\t\t\tsurface2:
|
|
5
|
-
"mappings": ";AAMO,IAAM,gBAGT;AAAA,EACH,IAAI;AAAA,IACH,MAAM;AAAA,MACL,UAAU
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { RampResult } from './types';\nimport type { DEFAULT_SEED_COLORS } from './constants';\n\nexport const DEFAULT_RAMPS: Record<\n\tkeyof typeof DEFAULT_SEED_COLORS,\n\tRampResult\n> = {\n\tbg: {\n\t\tramp: {\n\t\t\tsurface2: '#f8f8f8',\n\t\t\tbgFill1: '#555',\n\t\t\tfgFill: '#f0f0f0',\n\t\t\tbgFill2: '#494949',\n\t\t\tsurface6: '#d3d3d3',\n\t\t\tsurface5: '#e3e3e3',\n\t\t\tsurface4: '#eaeaea',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#1e1e1e',\n\t\t\tfgSurface3: '#6e6e6e',\n\t\t\tfgSurface2: '#8b8b8b',\n\t\t\tfgSurface1: '#ababab',\n\t\t\tstroke3: '#8b8b8b',\n\t\t\tstroke4: '#6d6d6d',\n\t\t\tstroke2: '#adadad',\n\t\t\tstroke1: '#cfcfcf',\n\t\t\tbgFillDark: '#1e1e1e',\n\t\t\tfgFillDark: '#f0f0f0',\n\t\t\tbgFillInverted2: '#1e1e1e',\n\t\t\tbgFillInverted1: '#2d2d2d',\n\t\t\tfgFillInverted: '#f0f0f0',\n\t\t\tsurface1: '#f0f0f0',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tprimary: {\n\t\tramp: {\n\t\t\tbgFill1: '#3858e9',\n\t\t\tfgFill: '#eff0f2',\n\t\t\tbgFill2: '#2e49da',\n\t\t\tsurface2: '#f6f8fc',\n\t\t\tsurface6: '#c7d3ef',\n\t\t\tsurface5: '#dce3f5',\n\t\t\tsurface4: '#e5ebf7',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#080071',\n\t\t\tfgSurface3: '#3858e9',\n\t\t\tfgSurface2: '#5881ff',\n\t\t\tfgSurface1: '#84a9ff',\n\t\t\tstroke3: '#3858e9',\n\t\t\tstroke4: '#2337c8',\n\t\t\tstroke2: '#6d83bf',\n\t\t\tstroke1: '#91a2cf',\n\t\t\tbgFillDark: '#1b1e26',\n\t\t\tfgFillDark: '#eff0f2',\n\t\t\tbgFillInverted2: '#1b1e26',\n\t\t\tbgFillInverted1: '#12009f',\n\t\t\tfgFillInverted: '#eff0f2',\n\t\t\tsurface1: '#edf0fa',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tinfo: {\n\t\tramp: {\n\t\t\tbgFill1: '#0090ff',\n\t\t\tfgFill: '#1b1e23',\n\t\t\tbgFill2: '#0081ef',\n\t\t\tsurface2: '#f5f9fd',\n\t\t\tsurface6: '#bed6f1',\n\t\t\tsurface5: '#d5e5f6',\n\t\t\tsurface4: '#e0ebf8',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#001758',\n\t\t\tfgSurface3: '#006dd9',\n\t\t\tfgSurface2: '#008cfb',\n\t\t\tfgSurface1: '#53b1ff',\n\t\t\tstroke3: '#006dd9',\n\t\t\tstroke4: '#004eb8',\n\t\t\tstroke2: '#5d8fc6',\n\t\t\tstroke1: '#8aaed6',\n\t\t\tbgFillDark: '#1b1e23',\n\t\t\tfgFillDark: '#eff0f2',\n\t\t\tbgFillInverted2: '#1b1e23',\n\t\t\tbgFillInverted1: '#002675',\n\t\t\tfgFillInverted: '#eff0f2',\n\t\t\tsurface1: '#eaf1fa',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tsuccess: {\n\t\tramp: {\n\t\t\tbgFill1: '#4ab866',\n\t\t\tfgFill: '#1b1f1c',\n\t\t\tbgFill2: '#37a857',\n\t\t\tsurface2: '#f0fcf2',\n\t\t\tsurface6: '#7eea95',\n\t\t\tsurface5: '#b7f2c1',\n\t\t\tsurface4: '#cdf5d3',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#002b00',\n\t\t\tfgSurface3: '#008031',\n\t\t\tfgSurface2: '#2c9f4e',\n\t\t\tfgSurface1: '#54c16f',\n\t\t\tstroke3: '#008031',\n\t\t\tstroke4: '#006314',\n\t\t\tstroke2: '#61986b',\n\t\t\tstroke1: '#77ba84',\n\t\t\tbgFillDark: '#1b1f1c',\n\t\t\tfgFillDark: '#edf2ed',\n\t\t\tbgFillInverted2: '#1b1f1c',\n\t\t\tbgFillInverted1: '#003800',\n\t\t\tfgFillInverted: '#edf2ed',\n\t\t\tsurface1: '#ddf8e1',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tcaution: {\n\t\tramp: {\n\t\t\tbgFill1: '#f0d149',\n\t\t\tfgFill: '#1f1e1b',\n\t\t\tbgFill2: '#ddbe30',\n\t\t\tsurface2: '#fdf9e7',\n\t\t\tsurface6: '#ecd367',\n\t\t\tsurface5: '#f5e399',\n\t\t\tsurface4: '#f8ebb5',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#291d00',\n\t\t\tfgSurface3: '#876b00',\n\t\t\tfgSurface2: '#a78900',\n\t\t\tfgSurface1: '#c9aa00',\n\t\t\tstroke3: '#876b00',\n\t\t\tstroke4: '#675000',\n\t\t\tstroke2: '#978c60',\n\t\t\tstroke1: '#b8ab75',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#f6f1da',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#3a2b00',\n\t\t\tfgFillInverted: '#f6f1da',\n\t\t\tsurface1: '#faf1cd',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\twarning: {\n\t\tramp: {\n\t\t\tbgFill1: '#f0b849',\n\t\t\tfgFill: '#1f1e1b',\n\t\t\tbgFill2: '#dea633',\n\t\t\tsurface2: '#fdf7ee',\n\t\t\tsurface6: '#f1ce90',\n\t\t\tsurface5: '#f6e0bb',\n\t\t\tsurface4: '#f8e9cd',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#2f1800',\n\t\t\tfgSurface3: '#976300',\n\t\t\tfgSurface2: '#b78100',\n\t\t\tfgSurface1: '#d9a22e',\n\t\t\tstroke3: '#976300',\n\t\t\tstroke4: '#754900',\n\t\t\tstroke2: '#9f8860',\n\t\t\tstroke1: '#c2a776',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#f3f0e9',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#432600',\n\t\t\tfgFillInverted: '#f3f0e9',\n\t\t\tsurface1: '#faefdc',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\terror: {\n\t\tramp: {\n\t\t\tbgFill1: '#cc1818',\n\t\t\tfgFill: '#f2efef',\n\t\t\tbgFill2: '#bc0001',\n\t\t\tsurface2: '#fdf6f5',\n\t\t\tsurface6: '#f5c9c2',\n\t\t\tsurface5: '#f9dcd8',\n\t\t\tsurface4: '#fae5e2',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#4a0000',\n\t\t\tfgSurface3: '#cc1818',\n\t\t\tfgSurface2: '#f84d41',\n\t\t\tfgSurface1: '#ff8373',\n\t\t\tstroke3: '#cc1818',\n\t\t\tstroke4: '#a70000',\n\t\t\tstroke2: '#ca675c',\n\t\t\tstroke1: '#dc8e83',\n\t\t\tbgFillDark: '#231c1b',\n\t\t\tfgFillDark: '#f2efef',\n\t\t\tbgFillInverted2: '#231c1b',\n\t\t\tbgFillInverted1: '#680000',\n\t\t\tfgFillInverted: '#f2efef',\n\t\t\tsurface1: '#fcedea',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,6 +27,7 @@ function calculateRamp({
|
|
|
27
27
|
pinLightness
|
|
28
28
|
}) {
|
|
29
29
|
const rampResults = {};
|
|
30
|
+
let warnings;
|
|
30
31
|
let maxDeficit = -Infinity;
|
|
31
32
|
let maxDeficitDirection = "lighter";
|
|
32
33
|
let maxDeficitStep;
|
|
@@ -74,10 +75,7 @@ function calculateRamp({
|
|
|
74
75
|
const adjustedTarget2 = adjustContrastTarget(contrast.target);
|
|
75
76
|
if (candidateContrast >= adjustedTarget2) {
|
|
76
77
|
calculatedColors.set(stepName, candidateColor);
|
|
77
|
-
rampResults[stepName] =
|
|
78
|
-
color: getColorString(candidateColor),
|
|
79
|
-
warning: false
|
|
80
|
-
};
|
|
78
|
+
rampResults[stepName] = getColorString(candidateColor);
|
|
81
79
|
continue;
|
|
82
80
|
}
|
|
83
81
|
}
|
|
@@ -114,13 +112,15 @@ function calculateRamp({
|
|
|
114
112
|
maxDeficitStep = stepName;
|
|
115
113
|
}
|
|
116
114
|
calculatedColors.set(stepName, searchResults.color);
|
|
117
|
-
rampResults[stepName] =
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
115
|
+
rampResults[stepName] = getColorString(searchResults.color);
|
|
116
|
+
if (!searchResults.reached && !contrast.ignoreWhenAdjustingSeed) {
|
|
117
|
+
warnings ??= [];
|
|
118
|
+
warnings.push(stepName);
|
|
119
|
+
}
|
|
121
120
|
}
|
|
122
121
|
return {
|
|
123
122
|
rampResults,
|
|
123
|
+
warnings,
|
|
124
124
|
maxDeficit,
|
|
125
125
|
maxDeficitDirection,
|
|
126
126
|
maxDeficitStep
|
|
@@ -150,7 +150,13 @@ function buildRamp(seedArg, config, {
|
|
|
150
150
|
oppDir = worse;
|
|
151
151
|
}
|
|
152
152
|
const sortedSteps = sortByDependency(config);
|
|
153
|
-
const {
|
|
153
|
+
const {
|
|
154
|
+
rampResults,
|
|
155
|
+
warnings,
|
|
156
|
+
maxDeficit,
|
|
157
|
+
maxDeficitDirection,
|
|
158
|
+
maxDeficitStep
|
|
159
|
+
} = calculateRamp({
|
|
154
160
|
seed,
|
|
155
161
|
sortedSteps,
|
|
156
162
|
config,
|
|
@@ -202,6 +208,7 @@ function buildRamp(seedArg, config, {
|
|
|
202
208
|
}
|
|
203
209
|
return {
|
|
204
210
|
ramp: bestRamp,
|
|
211
|
+
warnings,
|
|
205
212
|
direction: mainDir
|
|
206
213
|
};
|
|
207
214
|
}
|
|
@@ -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\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
|
|
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,EACA;AAAA,EACA;AAAA,OACM;AASP,SAAS,wBAAwB;AAgBjC,SAAS,cAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAUI;AACH,QAAM,cAAc,CAAC;
|
|
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< 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["adjustedTarget"]
|
|
7
7
|
}
|
|
@@ -140,10 +140,7 @@ function colorTokensCSS(computedColorRamps) {
|
|
|
140
140
|
const key = `${rampName}-${tokenName}`;
|
|
141
141
|
const aliasedBy = colorTokens[key] ?? [];
|
|
142
142
|
for (const aliasedId of aliasedBy) {
|
|
143
|
-
entries.push([
|
|
144
|
-
`--wpds-color-${aliasedId}`,
|
|
145
|
-
tokenValue.color
|
|
146
|
-
]);
|
|
143
|
+
entries.push([`--wpds-color-${aliasedId}`, tokenValue]);
|
|
147
144
|
}
|
|
148
145
|
}
|
|
149
146
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/use-theme-provider-styles.ts"],
|
|
4
|
-
"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( [
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/index.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAYjC,OAAO,KAAK,EAEX,IAAI,EACJ,aAAa,EACb,UAAU,EACV,UAAU,EACV,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/index.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,yBAAyB,CAAC;AAYjC,OAAO,KAAK,EAEX,IAAI,EACJ,aAAa,EACb,UAAU,EACV,UAAU,EACV,MAAM,SAAS,CAAC;AA6KjB,wBAAgB,SAAS,CACxB,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,UAAU,EAClB,EACC,aAAa,EACb,YAAY,EACZ,2BAAkC,GAClC,GAAE;IACF,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE;QACd,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC;IACF,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACjC,GACJ,UAAU,CAgHZ"}
|
|
@@ -69,10 +69,8 @@ export type RampStepConfig = {
|
|
|
69
69
|
};
|
|
70
70
|
export type RampConfig = Record<keyof Ramp, RampStepConfig>;
|
|
71
71
|
export type RampResult = {
|
|
72
|
-
ramp: Record<keyof Ramp,
|
|
73
|
-
|
|
74
|
-
warning: boolean;
|
|
75
|
-
}>;
|
|
72
|
+
ramp: Record<keyof Ramp, string>;
|
|
73
|
+
warnings?: string[];
|
|
76
74
|
direction: RampDirection;
|
|
77
75
|
};
|
|
78
76
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,MAAM,MAAM,IAAI,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IAEjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAEhB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IAEnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IAEnB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;AAC3E,MAAM,MAAM,mBAAmB,GAAG;IACjC,kEAAkE;IAClE,SAAS,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;IAC/B;;;;;;;OAOG;IACH,eAAe,EAAE,eAAe,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC5B,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,SAAS,CAAC,EAAE,CAAE,SAAS,EAAE,aAAa,KAAM,MAAM,CAAC;IACnD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,CAAE,MAAM,IAAI,EAAE,cAAc,CAAE,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/lib/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,MAAM,MAAM,IAAI,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IAEjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAEhB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IAEnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IAEnB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;AAC3E,MAAM,MAAM,mBAAmB,GAAG;IACjC,kEAAkE;IAClE,SAAS,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;IAC/B;;;;;;;OAOG;IACH,eAAe,EAAE,eAAe,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC5B,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,SAAS,CAAC,EAAE,CAAE,SAAS,EAAE,aAAa,KAAM,MAAM,CAAC;IACnD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,CAAE,MAAM,IAAI,EAAE,cAAc,CAAE,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,MAAM,CAAE,MAAM,IAAI,EAAE,MAAM,CAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,EAAE,aAAa,CAAC;CACzB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,QAAA,MAAM,QAAQ,GAAK,OAAO;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,gCAEA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAmBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4H9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAE,OAAO,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,QAAA,MAAM,QAAQ,GAAK,OAAO;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,gCAEA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAmBhC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4H9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAE,OAAO,QAAQ,CA4FzD,CAAC"}
|
|
@@ -8,10 +8,8 @@ type RampTableProps = {
|
|
|
8
8
|
name: keyof Ramp;
|
|
9
9
|
value: string;
|
|
10
10
|
};
|
|
11
|
-
ramp: Record<keyof Ramp,
|
|
12
|
-
|
|
13
|
-
warning: boolean;
|
|
14
|
-
}>;
|
|
11
|
+
ramp: Record<keyof Ramp, string>;
|
|
12
|
+
warnings?: string[];
|
|
15
13
|
}[];
|
|
16
14
|
};
|
|
17
15
|
export declare const RampTable: import("react").ForwardRefExoticComponent<RampTableProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ramp-table.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/ramp-table.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AA4BzC,KAAK,cAAc,GAAG;IACrB,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,MAAM,IAAI,CAAC;YACjB,KAAK,EAAE,MAAM,CAAC;SACd,CAAC;QACF,IAAI,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ramp-table.d.ts","sourceRoot":"","sources":["../../../src/color-ramps/stories/ramp-table.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AA4BzC,KAAK,cAAc,GAAG;IACrB,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,MAAM,IAAI,CAAC;YACjB,KAAK,EAAE,MAAM,CAAC;SACd,CAAC;QACF,IAAI,EAAE,MAAM,CAAE,MAAM,IAAI,EAAE,MAAM,CAAE,CAAC;QACnC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,EAAE,CAAC;CACJ,CAAC;AACF,eAAO,MAAM,SAAS,2GA0JrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-theme-provider-styles.d.ts","sourceRoot":"","sources":["../src/use-theme-provider-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAiB3C;;GAEG;AACH,OAAO,yCAAyC,CAAC;AASjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"use-theme-provider-styles.d.ts","sourceRoot":"","sources":["../src/use-theme-provider-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAiB3C;;GAEG;AACH,OAAO,yCAAyC,CAAC;AASjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA8JlD,wBAAgB,sBAAsB,CAAE,EACvC,KAAU,GACV,GAAE;IACF,KAAK,CAAC,EAAE,kBAAkB,CAAE,OAAO,CAAE,CAAC;CACjC;;;;;;;;EAwDL"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/theme",
|
|
3
|
-
"version": "0.2.0",
|
|
3
|
+
"version": "0.2.1-next.16d95556a.0",
|
|
4
4
|
"description": "Theme and context provider for the WordPress Design System.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"build-module/color-ramps/lib/register-color-spaces.js"
|
|
44
44
|
],
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@wordpress/element": "^6.35.0",
|
|
47
|
-
"@wordpress/private-apis": "^1.35.0",
|
|
46
|
+
"@wordpress/element": "^6.35.1-next.16d95556a.0",
|
|
47
|
+
"@wordpress/private-apis": "^1.35.1-next.16d95556a.0",
|
|
48
48
|
"colorjs.io": "^0.5.2",
|
|
49
49
|
"memize": "^2.1.0"
|
|
50
50
|
},
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"build": "npm run build:tokens && npm run build:default-ramps",
|
|
65
65
|
"postbuild": "prettier --write tokens/color.json src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "59a9383612bbe16e21af84d13b035bfbca7fe833"
|
|
68
68
|
}
|
package/src/color-ramps/index.ts
CHANGED
|
@@ -44,7 +44,7 @@ function getBgRampInfo( ramp: InternalRampResult ): {
|
|
|
44
44
|
pinLightness: {
|
|
45
45
|
stepName: STEP_TO_PIN,
|
|
46
46
|
value: clampAccentScaleReferenceLightness(
|
|
47
|
-
get( parse( ramp.ramp[ STEP_TO_PIN ]
|
|
47
|
+
get( parse( ramp.ramp[ STEP_TO_PIN ] ), [ OKLCH, 'l' ] ),
|
|
48
48
|
ramp.direction
|
|
49
49
|
),
|
|
50
50
|
},
|
|
@@ -96,8 +96,8 @@ export function checkAccessibleCombinations( {
|
|
|
96
96
|
CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
|
|
97
97
|
for ( const bg of bgs ) {
|
|
98
98
|
for ( const fg of fgs ) {
|
|
99
|
-
const bgColor = parse( ramp.ramp[ bg ]
|
|
100
|
-
const fgColor = parse( ramp.ramp[ fg ]
|
|
99
|
+
const bgColor = parse( ramp.ramp[ bg ] );
|
|
100
|
+
const fgColor = parse( ramp.ramp[ fg ] );
|
|
101
101
|
if ( getContrast( bgColor, fgColor ) < target ) {
|
|
102
102
|
unmetTargets.push( {
|
|
103
103
|
bgName: bg,
|
|
@@ -116,8 +116,8 @@ export function checkAccessibleCombinations( {
|
|
|
116
116
|
CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
|
|
117
117
|
for ( const bg of bgs ) {
|
|
118
118
|
for ( const fg of fgs ) {
|
|
119
|
-
const bgColor = parse( bgRamp.ramp[ bg ]
|
|
120
|
-
const fgColor = parse( ramp.ramp[ fg ]
|
|
119
|
+
const bgColor = parse( bgRamp.ramp[ bg ] );
|
|
120
|
+
const fgColor = parse( ramp.ramp[ fg ] );
|
|
121
121
|
if ( getContrast( bgColor, fgColor ) < target ) {
|
|
122
122
|
unmetTargets.push( {
|
|
123
123
|
bgName: bg,
|