@wordpress/theme 0.2.1-next.16d95556a.0 → 0.3.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-inline-alias-values/index.ts +43 -14
- package/build/color-ramps/index.js +16 -12
- package/build/color-ramps/index.js.map +2 -2
- package/build/color-ramps/lib/color-utils.js +5 -0
- package/build/color-ramps/lib/color-utils.js.map +2 -2
- package/build/color-ramps/lib/constants.js +1 -1
- package/build/color-ramps/lib/constants.js.map +1 -1
- package/build/color-ramps/lib/default-ramps.js +88 -88
- package/build/color-ramps/lib/default-ramps.js.map +1 -1
- package/build/color-ramps/lib/find-color-with-constraints.js +1 -1
- package/build/color-ramps/lib/find-color-with-constraints.js.map +2 -2
- package/build/color-ramps/lib/index.js +2 -2
- package/build/color-ramps/lib/index.js.map +2 -2
- package/build/color-ramps/lib/ramp-configs.js +2 -2
- package/build/color-ramps/lib/ramp-configs.js.map +1 -1
- package/build/color-ramps/lib/utils.js +4 -8
- package/build/color-ramps/lib/utils.js.map +2 -2
- package/build/prebuilt/js/design-tokens.js +5 -4
- package/build/prebuilt/js/design-tokens.js.map +2 -2
- package/build/prebuilt/json/figma.json +75 -59
- package/build/theme-provider.js +3 -1
- package/build/theme-provider.js.map +2 -2
- package/build/types.js.map +1 -1
- package/build-module/color-ramps/index.js +17 -13
- package/build-module/color-ramps/index.js.map +2 -2
- package/build-module/color-ramps/lib/color-utils.js +7 -1
- package/build-module/color-ramps/lib/color-utils.js.map +2 -2
- package/build-module/color-ramps/lib/constants.js +1 -1
- package/build-module/color-ramps/lib/constants.js.map +1 -1
- package/build-module/color-ramps/lib/default-ramps.js +88 -88
- package/build-module/color-ramps/lib/default-ramps.js.map +1 -1
- package/build-module/color-ramps/lib/find-color-with-constraints.js +2 -2
- package/build-module/color-ramps/lib/find-color-with-constraints.js.map +2 -2
- package/build-module/color-ramps/lib/index.js +1 -2
- package/build-module/color-ramps/lib/index.js.map +2 -2
- package/build-module/color-ramps/lib/ramp-configs.js +2 -2
- package/build-module/color-ramps/lib/ramp-configs.js.map +1 -1
- package/build-module/color-ramps/lib/utils.js +0 -3
- package/build-module/color-ramps/lib/utils.js.map +2 -2
- package/build-module/prebuilt/js/design-tokens.js +5 -4
- package/build-module/prebuilt/js/design-tokens.js.map +2 -2
- package/build-module/prebuilt/json/figma.json +75 -59
- package/build-module/theme-provider.js +3 -1
- package/build-module/theme-provider.js.map +2 -2
- package/build-types/color-ramps/index.d.ts +1 -0
- package/build-types/color-ramps/index.d.ts.map +1 -1
- package/build-types/color-ramps/lib/color-utils.d.ts +5 -0
- package/build-types/color-ramps/lib/color-utils.d.ts.map +1 -1
- package/build-types/color-ramps/lib/constants.d.ts +1 -1
- package/build-types/color-ramps/lib/constants.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 +0 -5
- 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/stories/index.story.d.ts +1 -0
- package/build-types/stories/index.story.d.ts.map +1 -1
- package/build-types/theme-provider.d.ts +1 -1
- package/build-types/theme-provider.d.ts.map +1 -1
- package/build-types/types.d.ts +8 -0
- package/build-types/types.d.ts.map +1 -1
- package/docs/ds-tokens.md +8 -7
- package/package.json +4 -4
- package/src/color-ramps/index.ts +16 -11
- package/src/color-ramps/lib/color-utils.ts +11 -0
- package/src/color-ramps/lib/constants.ts +3 -3
- package/src/color-ramps/lib/default-ramps.ts +88 -88
- package/src/color-ramps/lib/find-color-with-constraints.ts +2 -2
- package/src/color-ramps/lib/index.ts +1 -2
- package/src/color-ramps/lib/ramp-configs.ts +2 -2
- package/src/color-ramps/lib/utils.ts +1 -8
- package/src/color-ramps/stories/index.story.tsx +7 -4
- package/src/prebuilt/css/design-tokens.css +81 -55
- package/src/prebuilt/js/design-tokens.js +5 -4
- package/src/prebuilt/json/figma.json +75 -59
- package/src/stories/index.story.tsx +23 -9
- package/src/theme-provider.tsx +2 -0
- package/src/types.ts +9 -0
- package/terrazzo.config.ts +21 -0
- package/tokens/color.json +88 -88
- package/tokens/dimension.json +44 -10
- package/tsconfig.bin.tsbuildinfo +1 -1
- package/tsconfig.src.tsbuildinfo +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* External dependencies
|
|
3
3
|
*/
|
|
4
|
-
import { type Plugin } from '@terrazzo/parser';
|
|
4
|
+
import { type Plugin, type TokenNormalized } from '@terrazzo/parser';
|
|
5
5
|
|
|
6
6
|
interface InlineAliasValuesOptions {
|
|
7
7
|
/**
|
|
@@ -40,25 +40,54 @@ export default function inlineAliasValues( {
|
|
|
40
40
|
return {
|
|
41
41
|
name: '@wordpress/terrazzo-plugin-inline-alias-values',
|
|
42
42
|
async transform( { tokens } ) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
// Map of primitive token ID -> array of references to inline
|
|
44
|
+
const inlineMap: Record< string, TokenNormalized[] > = {};
|
|
45
|
+
|
|
46
|
+
// Single pass: identify primitives and collect references
|
|
47
|
+
for ( const [ id, token ] of Object.entries( tokens ) ) {
|
|
48
|
+
const shouldInline = pattern.test( id );
|
|
49
|
+
|
|
50
|
+
if ( shouldInline ) {
|
|
51
|
+
// Track this token for inlining
|
|
52
|
+
inlineMap[ id ] = [];
|
|
53
|
+
|
|
54
|
+
// Track aliased tokens for output file
|
|
47
55
|
if ( token.aliasedBy ) {
|
|
48
56
|
aliasedBy[ tokenId( id ) ] =
|
|
49
57
|
token.aliasedBy.map( tokenId );
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Check if this token's main value references a primitive
|
|
62
|
+
if ( token.aliasOf && pattern.test( token.aliasOf ) ) {
|
|
63
|
+
inlineMap[ token.aliasOf ] ??= [];
|
|
64
|
+
inlineMap[ token.aliasOf ].push( token );
|
|
65
|
+
}
|
|
50
66
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
67
|
+
// Check if any mode values reference a primitive
|
|
68
|
+
for ( const modeValue of Object.values( token.mode ) ) {
|
|
69
|
+
const { aliasOf } = modeValue;
|
|
70
|
+
if ( aliasOf && pattern.test( aliasOf ) ) {
|
|
71
|
+
const primitiveId = aliasOf;
|
|
72
|
+
inlineMap[ primitiveId ] ??= [];
|
|
73
|
+
inlineMap[ primitiveId ].push( modeValue );
|
|
58
74
|
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// Inline values and delete primitives
|
|
79
|
+
for ( const [ id, references ] of Object.entries( inlineMap ) ) {
|
|
80
|
+
const token = tokens[ id ];
|
|
59
81
|
|
|
60
|
-
|
|
61
|
-
|
|
82
|
+
for ( const target of references ) {
|
|
83
|
+
target.$value = token.$value;
|
|
84
|
+
target.originalValue = token.originalValue;
|
|
85
|
+
delete target.aliasOf;
|
|
86
|
+
delete target.aliasChain;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
delete tokens[ id ];
|
|
90
|
+
}
|
|
62
91
|
},
|
|
63
92
|
async build( { outputFile } ) {
|
|
64
93
|
if ( ! filename ) {
|
|
@@ -68,15 +68,17 @@ function checkAccessibleCombinations({
|
|
|
68
68
|
import_constants.CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
|
|
69
69
|
for (const bg of bgs) {
|
|
70
70
|
for (const fg of fgs) {
|
|
71
|
-
const bgColor =
|
|
72
|
-
const fgColor =
|
|
73
|
-
|
|
71
|
+
const bgColor = ramp.ramp[bg];
|
|
72
|
+
const fgColor = ramp.ramp[fg];
|
|
73
|
+
const achievedContrast = (0, import_color_utils.getContrast)(bgColor, fgColor);
|
|
74
|
+
if (achievedContrast < target) {
|
|
74
75
|
unmetTargets.push({
|
|
75
76
|
bgName: bg,
|
|
76
|
-
bgColor
|
|
77
|
+
bgColor,
|
|
77
78
|
fgName: fg,
|
|
78
|
-
fgColor
|
|
79
|
-
unmetContrast: target
|
|
79
|
+
fgColor,
|
|
80
|
+
unmetContrast: target,
|
|
81
|
+
achievedContrast
|
|
80
82
|
});
|
|
81
83
|
}
|
|
82
84
|
}
|
|
@@ -87,15 +89,17 @@ function checkAccessibleCombinations({
|
|
|
87
89
|
import_constants.CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
|
|
88
90
|
for (const bg of bgs) {
|
|
89
91
|
for (const fg of fgs) {
|
|
90
|
-
const bgColor =
|
|
91
|
-
const fgColor =
|
|
92
|
-
|
|
92
|
+
const bgColor = bgRamp.ramp[bg];
|
|
93
|
+
const fgColor = ramp.ramp[fg];
|
|
94
|
+
const achievedContrast = (0, import_color_utils.getContrast)(bgColor, fgColor);
|
|
95
|
+
if (achievedContrast < target) {
|
|
93
96
|
unmetTargets.push({
|
|
94
97
|
bgName: bg,
|
|
95
|
-
bgColor
|
|
98
|
+
bgColor,
|
|
96
99
|
fgName: fg,
|
|
97
|
-
fgColor
|
|
98
|
-
unmetContrast: target
|
|
100
|
+
fgColor,
|
|
101
|
+
unmetContrast: target,
|
|
102
|
+
achievedContrast
|
|
99
103
|
});
|
|
100
104
|
}
|
|
101
105
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/color-ramps/index.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, parse
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, parse } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './lib/register-color-spaces';\nimport { buildRamp } from './lib/index';\nimport { clampAccentScaleReferenceLightness } from './lib/utils';\nimport { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';\nimport type {\n\tRampResult as InternalRampResult,\n\tRampDirection,\n\tRamp,\n} from './lib/types';\nimport { getContrast } from './lib/color-utils';\nimport { CONTRAST_COMBINATIONS } from './lib/constants';\nexport { DEFAULT_SEED_COLORS } from './lib/constants';\n\n/**\n * Creates a background ramp.\n * @param seed The seed color for the background ramp.\n */\nexport function buildBgRamp( seed: string ) {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\treturn buildRamp( seed, BG_RAMP_CONFIG );\n}\n\nconst STEP_TO_PIN = 'surface2';\nfunction getBgRampInfo( ramp: InternalRampResult ): {\n\tmainDirection: RampDirection;\n\tpinLightness: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} {\n\treturn {\n\t\tmainDirection: ramp.direction,\n\t\tpinLightness: {\n\t\t\tstepName: STEP_TO_PIN,\n\t\t\tvalue: clampAccentScaleReferenceLightness(\n\t\t\t\tget( parse( ramp.ramp[ STEP_TO_PIN ] ), [ OKLCH, 'l' ] ),\n\t\t\t\tramp.direction\n\t\t\t),\n\t\t},\n\t};\n}\n\n/**\n * Creates an accent ramp (ie used by primary, success, info, warning and error\n * ramps).\n * @param seed The seed color for the accent ramp.\n * @param bgRamp The ramp of the background on which the accent is shown.\n */\nexport function buildAccentRamp(\n\tseed: string,\n\tbgRamp?: InternalRampResult\n): InternalRampResult {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\tconst bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;\n\treturn buildRamp( seed, ACCENT_RAMP_CONFIG, bgRampInfo );\n}\n\n/**\n * Checks that all bg/fg combinations generated by the ramps meet contrast\n * targets.\n * @param params\n * @param params.bgRamp\n * @param params.accentRamps\n */\nexport function checkAccessibleCombinations( {\n\tbgRamp,\n\taccentRamps = [],\n}: {\n\tbgRamp: InternalRampResult;\n\taccentRamps?: InternalRampResult[];\n} ) {\n\tconst unmetTargets: {\n\t\tbgName: keyof Ramp;\n\t\tbgColor: string;\n\t\tfgName: keyof Ramp;\n\t\tfgColor: string;\n\t\tunmetContrast: number;\n\t\tachievedContrast: number;\n\t}[] = [];\n\n\t// Assess combinations within each ramp\n\t[ bgRamp, ...accentRamps ].forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = ramp.ramp[ bg ];\n\t\t\t\t\tconst fgColor = ramp.ramp[ fg ];\n\t\t\t\t\tconst achievedContrast = getContrast( bgColor, fgColor );\n\t\t\t\t\tif ( achievedContrast < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor,\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor,\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t\tachievedContrast,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\t// Assess each accent ramp's fg color against bg ramp\n\taccentRamps.forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = bgRamp.ramp[ bg ];\n\t\t\t\t\tconst fgColor = ramp.ramp[ fg ];\n\t\t\t\t\tconst achievedContrast = getContrast( bgColor, fgColor );\n\t\t\t\t\tif ( achievedContrast < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor,\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor,\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t\tachievedContrast,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn unmetTargets;\n}\n\nexport type RampResult = InternalRampResult;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAAkC;AAKlC,mCAAO;AACP,iBAA0B;AAC1B,mBAAmD;AACnD,0BAAmD;AAMnD,yBAA4B;AAC5B,uBAAsC;AACtC,IAAAA,oBAAoC;AAM7B,SAAS,YAAa,MAAe;AAC3C,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,aAAO,sBAAW,MAAM,kCAAe;AACxC;AAEA,IAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,WAAO;AAAA,YACN,mBAAK,iBAAO,KAAK,KAAM,WAAY,CAAE,GAAG,CAAE,iBAAO,GAAI,CAAE;AAAA,QACvD,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACD;AAQO,SAAS,gBACf,MACA,QACqB;AACrB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,QAAM,aAAa,SAAS,cAAe,MAAO,IAAI;AACtD,aAAO,sBAAW,MAAM,wCAAoB,UAAW;AACxD;AASO,SAAS,4BAA6B;AAAA,EAC5C;AAAA,EACA,cAAc,CAAC;AAChB,GAGI;AACH,QAAM,eAOA,CAAC;AAGP,GAAE,QAAQ,GAAG,WAAY,EAAE,QAAS,CAAE,SAAU;AAC/C,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,KAAK,KAAM,EAAG;AAC9B,gBAAM,UAAU,KAAK,KAAM,EAAG;AAC9B,gBAAM,uBAAmB,gCAAa,SAAS,OAAQ;AACvD,cAAK,mBAAmB,QAAS;AAChC,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR;AAAA,cACA,QAAQ;AAAA,cACR;AAAA,cACA,eAAe;AAAA,cACf;AAAA,YACD,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,cAAY,QAAS,CAAE,SAAU;AAChC,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,OAAO,KAAM,EAAG;AAChC,gBAAM,UAAU,KAAK,KAAM,EAAG;AAC9B,gBAAM,uBAAmB,gCAAa,SAAS,OAAQ;AACvD,cAAK,mBAAmB,QAAS;AAChC,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR;AAAA,cACA,QAAQ;AAAA,cACR;AAAA,cACA,eAAe;AAAA,cACf;AAAA,YACD,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
|
|
6
6
|
"names": ["import_constants"]
|
|
7
7
|
}
|
|
@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
19
19
|
// packages/theme/src/color-ramps/lib/color-utils.ts
|
|
20
20
|
var color_utils_exports = {};
|
|
21
21
|
__export(color_utils_exports, {
|
|
22
|
+
clampToGamut: () => clampToGamut,
|
|
22
23
|
getColorString: () => getColorString,
|
|
23
24
|
getContrast: () => getContrast
|
|
24
25
|
});
|
|
@@ -31,8 +32,12 @@ function getColorString(color) {
|
|
|
31
32
|
function getContrast(colorA, colorB) {
|
|
32
33
|
return (0, import_fn.contrastWCAG21)(colorA, colorB);
|
|
33
34
|
}
|
|
35
|
+
function clampToGamut(c) {
|
|
36
|
+
return (0, import_fn.to)((0, import_fn.toGamut)(c, { space: import_fn.sRGB, method: "css" }), import_fn.OKLCH);
|
|
37
|
+
}
|
|
34
38
|
// Annotate the CommonJS export names for ESM import in node:
|
|
35
39
|
0 && (module.exports = {
|
|
40
|
+
clampToGamut,
|
|
36
41
|
getColorString,
|
|
37
42
|
getContrast
|
|
38
43
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/color-ramps/lib/color-utils.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tto,\n\tserialize,\n\tcontrastWCAG21,\n\tsRGB,\n\ttype ColorTypes,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\n\n/**\n * Get string representation of a color\n * @param color Color object to stringify\n * @return String representation\n */\nexport function getColorString( color: ColorTypes ): string {\n\treturn serialize( to( color, sRGB ), { format: 'hex', inGamut: true } );\n}\n\n/**\n * Get contrast value between two colors\n * @param colorA First color\n * @param colorB Second color\n * @return WCAG 2.1 contrast ratio\n */\nexport function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {\n\treturn contrastWCAG21( colorA, colorB );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tto,\n\ttoGamut,\n\tserialize,\n\tcontrastWCAG21,\n\tsRGB,\n\tOKLCH,\n\ttype ColorTypes,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\n\n/**\n * Get string representation of a color\n * @param color Color object to stringify\n * @return String representation\n */\nexport function getColorString( color: ColorTypes ): string {\n\treturn serialize( to( color, sRGB ), { format: 'hex', inGamut: true } );\n}\n\n/**\n * Get contrast value between two colors\n * @param colorA First color\n * @param colorB Second color\n * @return WCAG 2.1 contrast ratio\n */\nexport function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {\n\treturn contrastWCAG21( colorA, colorB );\n}\n\n/**\n * Make sure that a color is valid in the sRGB gamut and convert it to OKLCH.\n * @param c\n */\nexport function clampToGamut( c: ColorTypes ) {\n\t// map into sRGB using CSS OKLCH method\n\treturn to( toGamut( c, { space: sRGB, method: 'css' } ), OKLCH );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAQO;AAKP,mCAAO;AAOA,SAAS,eAAgB,OAA4B;AAC3D,aAAO,yBAAW,cAAI,OAAO,cAAK,GAAG,EAAE,QAAQ,OAAO,SAAS,KAAK,CAAE;AACvE;AAQO,SAAS,YAAa,QAAoB,QAA6B;AAC7E,aAAO,0BAAgB,QAAQ,MAAO;AACvC;AAMO,SAAS,aAAc,GAAgB;AAE7C,aAAO,kBAAI,mBAAS,GAAG,EAAE,OAAO,gBAAM,QAAQ,MAAM,CAAE,GAAG,eAAM;AAChE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,7 +34,7 @@ var import_fn = require("colorjs.io/fn");
|
|
|
34
34
|
var import_register_color_spaces = require("./register-color-spaces");
|
|
35
35
|
var WHITE = (0, import_fn.to)("white", import_fn.OKLCH);
|
|
36
36
|
var BLACK = (0, import_fn.to)("black", import_fn.OKLCH);
|
|
37
|
-
var UNIVERSAL_CONTRAST_TOPUP = 0.
|
|
37
|
+
var UNIVERSAL_CONTRAST_TOPUP = 0.02;
|
|
38
38
|
var WHITE_TEXT_CONTRAST_MARGIN = 3.1;
|
|
39
39
|
var ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
|
|
40
40
|
lighter: { min: 0.2, max: 0.4 },
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/color-ramps/lib/constants.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations and rounding errors.\n// - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.\n// - the max contrast between adjacent RGB values is 1.016, so
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations and rounding errors.\n// - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.\n// - the max contrast between adjacent RGB values is 1.016, so 0.016 is the maximum total rounding error between two values.\n// - the sum is 0.02: the margin we add to ensure that the target contrast is met after all the rounding.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.02;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Contrast precision we aim for. Approximately 1/256, resolution of an 8-bit number.\nexport const CONTRAST_EPSILON = 4e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 10;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#f8f8f8',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\tcaution: '#f0d149',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA0B;AAK1B,mCAAO;AAGA,IAAM,YAAQ,cAAI,SAAS,eAAM;AACjC,IAAM,YAAQ,cAAI,SAAS,eAAM;AAMjC,IAAM,2BAA2B;AAOjC,IAAM,6BAA6B;AAOnC,IAAM,yCAAyC;AAAA,EACrD,SAAS,EAAE,KAAK,KAAK,KAAK,IAAI;AAAA,EAC9B,QAAQ,EAAE,KAAK,MAAM,KAAK,KAAK;AAChC;AAGO,IAAM,mBAAmB;AAEzB,IAAM,2BAA2B;AAEjC,IAAM,wBAIP;AAAA,EACL;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,cAAc,YAAa;AAAA,IAClC,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,UAAW;AAAA,IAC9B,KAAK,CAAE,YAAa;AAAA,IACpB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,SAAU;AAAA,IACjB,KAAK,CAAE,QAAS;AAAA,IAChB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,SAAU;AAAA,IACjB,QAAQ;AAAA,EACT;AACD;AAGO,IAAM,sBAAsB;AAAA,EAClC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,19 +28,19 @@ var DEFAULT_RAMPS = {
|
|
|
28
28
|
surface2: "#f8f8f8",
|
|
29
29
|
bgFill1: "#555",
|
|
30
30
|
fgFill: "#f0f0f0",
|
|
31
|
-
bgFill2: "#
|
|
32
|
-
surface6: "#
|
|
33
|
-
surface5: "#
|
|
31
|
+
bgFill2: "#484848",
|
|
32
|
+
surface6: "#d2d2d2",
|
|
33
|
+
surface5: "#e2e2e2",
|
|
34
34
|
surface4: "#eaeaea",
|
|
35
35
|
surface3: "#fff",
|
|
36
36
|
fgSurface4: "#1e1e1e",
|
|
37
|
-
fgSurface3: "#
|
|
38
|
-
fgSurface2: "#
|
|
39
|
-
fgSurface1: "#
|
|
40
|
-
stroke3: "#
|
|
41
|
-
stroke4: "#
|
|
42
|
-
stroke2: "#
|
|
43
|
-
stroke1: "#
|
|
37
|
+
fgSurface3: "#6d6d6d",
|
|
38
|
+
fgSurface2: "#8a8a8a",
|
|
39
|
+
fgSurface1: "#aaa",
|
|
40
|
+
stroke3: "#8a8a8a",
|
|
41
|
+
stroke4: "#6c6c6c",
|
|
42
|
+
stroke2: "#d8d8d8",
|
|
43
|
+
stroke1: "#e0e0e0",
|
|
44
44
|
bgFillDark: "#1e1e1e",
|
|
45
45
|
fgFillDark: "#f0f0f0",
|
|
46
46
|
bgFillInverted2: "#1e1e1e",
|
|
@@ -54,26 +54,26 @@ var DEFAULT_RAMPS = {
|
|
|
54
54
|
ramp: {
|
|
55
55
|
bgFill1: "#3858e9",
|
|
56
56
|
fgFill: "#eff0f2",
|
|
57
|
-
bgFill2: "#
|
|
57
|
+
bgFill2: "#2e49d9",
|
|
58
58
|
surface2: "#f6f8fc",
|
|
59
|
-
surface6: "#
|
|
60
|
-
surface5: "#
|
|
61
|
-
surface4: "#
|
|
59
|
+
surface6: "#c7d2ee",
|
|
60
|
+
surface5: "#dbe2f4",
|
|
61
|
+
surface4: "#e4eaf7",
|
|
62
62
|
surface3: "#fff",
|
|
63
|
-
fgSurface4: "#
|
|
63
|
+
fgSurface4: "#0b0070",
|
|
64
64
|
fgSurface3: "#3858e9",
|
|
65
|
-
fgSurface2: "#
|
|
66
|
-
fgSurface1: "#
|
|
65
|
+
fgSurface2: "#5b82ff",
|
|
66
|
+
fgSurface1: "#85a9ff",
|
|
67
67
|
stroke3: "#3858e9",
|
|
68
68
|
stroke4: "#2337c8",
|
|
69
|
-
stroke2: "#
|
|
70
|
-
stroke1: "#
|
|
69
|
+
stroke2: "#9aaad3",
|
|
70
|
+
stroke1: "#a2b1d6",
|
|
71
71
|
bgFillDark: "#1b1e26",
|
|
72
72
|
fgFillDark: "#eff0f2",
|
|
73
73
|
bgFillInverted2: "#1b1e26",
|
|
74
|
-
bgFillInverted1: "#
|
|
74
|
+
bgFillInverted1: "#13009f",
|
|
75
75
|
fgFillInverted: "#eff0f2",
|
|
76
|
-
surface1: "#
|
|
76
|
+
surface1: "#ecf0f9"
|
|
77
77
|
},
|
|
78
78
|
direction: "darker"
|
|
79
79
|
},
|
|
@@ -81,26 +81,26 @@ var DEFAULT_RAMPS = {
|
|
|
81
81
|
ramp: {
|
|
82
82
|
bgFill1: "#0090ff",
|
|
83
83
|
fgFill: "#1b1e23",
|
|
84
|
-
bgFill2: "#
|
|
84
|
+
bgFill2: "#007fed",
|
|
85
85
|
surface2: "#f5f9fd",
|
|
86
|
-
surface6: "#
|
|
87
|
-
surface5: "#
|
|
88
|
-
surface4: "#
|
|
86
|
+
surface6: "#bdd5f1",
|
|
87
|
+
surface5: "#d4e4f6",
|
|
88
|
+
surface4: "#dfebf8",
|
|
89
89
|
surface3: "#fff",
|
|
90
|
-
fgSurface4: "#
|
|
91
|
-
fgSurface3: "#
|
|
92
|
-
fgSurface2: "#
|
|
93
|
-
fgSurface1: "#
|
|
94
|
-
stroke3: "#
|
|
95
|
-
stroke4: "#
|
|
96
|
-
stroke2: "#
|
|
97
|
-
stroke1: "#
|
|
90
|
+
fgSurface4: "#001b4f",
|
|
91
|
+
fgSurface3: "#006bd7",
|
|
92
|
+
fgSurface2: "#008bfa",
|
|
93
|
+
fgSurface1: "#59b0ff",
|
|
94
|
+
stroke3: "#006bd7",
|
|
95
|
+
stroke4: "#004fa9",
|
|
96
|
+
stroke2: "#94b5d9",
|
|
97
|
+
stroke1: "#9fbcdd",
|
|
98
98
|
bgFillDark: "#1b1e23",
|
|
99
99
|
fgFillDark: "#eff0f2",
|
|
100
100
|
bgFillInverted2: "#1b1e23",
|
|
101
|
-
bgFillInverted1: "#
|
|
101
|
+
bgFillInverted1: "#002a69",
|
|
102
102
|
fgFillInverted: "#eff0f2",
|
|
103
|
-
surface1: "#
|
|
103
|
+
surface1: "#e9f1fa"
|
|
104
104
|
},
|
|
105
105
|
direction: "darker"
|
|
106
106
|
},
|
|
@@ -108,26 +108,26 @@ var DEFAULT_RAMPS = {
|
|
|
108
108
|
ramp: {
|
|
109
109
|
bgFill1: "#4ab866",
|
|
110
110
|
fgFill: "#1b1f1c",
|
|
111
|
-
bgFill2: "#
|
|
111
|
+
bgFill2: "#37a756",
|
|
112
112
|
surface2: "#f0fcf2",
|
|
113
113
|
surface6: "#7eea95",
|
|
114
|
-
surface5: "#
|
|
115
|
-
surface4: "#
|
|
114
|
+
surface5: "#b5f1bf",
|
|
115
|
+
surface4: "#cbf5d1",
|
|
116
116
|
surface3: "#fff",
|
|
117
|
-
fgSurface4: "#
|
|
118
|
-
fgSurface3: "#
|
|
119
|
-
fgSurface2: "#
|
|
120
|
-
fgSurface1: "#
|
|
121
|
-
stroke3: "#
|
|
122
|
-
stroke4: "#
|
|
123
|
-
stroke2: "#
|
|
124
|
-
stroke1: "#
|
|
117
|
+
fgSurface4: "#002900",
|
|
118
|
+
fgSurface3: "#007f30",
|
|
119
|
+
fgSurface2: "#2b9e4e",
|
|
120
|
+
fgSurface1: "#53c06e",
|
|
121
|
+
stroke3: "#007f30",
|
|
122
|
+
stroke4: "#006013",
|
|
123
|
+
stroke2: "#7dc189",
|
|
124
|
+
stroke1: "#82c98f",
|
|
125
125
|
bgFillDark: "#1b1f1c",
|
|
126
126
|
fgFillDark: "#edf2ed",
|
|
127
127
|
bgFillInverted2: "#1b1f1c",
|
|
128
|
-
bgFillInverted1: "#
|
|
128
|
+
bgFillInverted1: "#003701",
|
|
129
129
|
fgFillInverted: "#edf2ed",
|
|
130
|
-
surface1: "#
|
|
130
|
+
surface1: "#dbf8df"
|
|
131
131
|
},
|
|
132
132
|
direction: "darker"
|
|
133
133
|
},
|
|
@@ -135,26 +135,26 @@ var DEFAULT_RAMPS = {
|
|
|
135
135
|
ramp: {
|
|
136
136
|
bgFill1: "#f0d149",
|
|
137
137
|
fgFill: "#1f1e1b",
|
|
138
|
-
bgFill2: "#
|
|
138
|
+
bgFill2: "#dcbe2f",
|
|
139
139
|
surface2: "#fdf9e7",
|
|
140
|
-
surface6: "#
|
|
141
|
-
surface5: "#
|
|
142
|
-
surface4: "#
|
|
140
|
+
surface6: "#ecd264",
|
|
141
|
+
surface5: "#f5e297",
|
|
142
|
+
surface4: "#f7eab3",
|
|
143
143
|
surface3: "#fff",
|
|
144
|
-
fgSurface4: "#
|
|
145
|
-
fgSurface3: "#
|
|
146
|
-
fgSurface2: "#
|
|
147
|
-
fgSurface1: "#
|
|
148
|
-
stroke3: "#
|
|
149
|
-
stroke4: "#
|
|
150
|
-
stroke2: "#
|
|
151
|
-
stroke1: "#
|
|
144
|
+
fgSurface4: "#281d00",
|
|
145
|
+
fgSurface3: "#836b00",
|
|
146
|
+
fgSurface2: "#a58700",
|
|
147
|
+
fgSurface1: "#c7a900",
|
|
148
|
+
stroke3: "#836b00",
|
|
149
|
+
stroke4: "#635000",
|
|
150
|
+
stroke2: "#bfb17a",
|
|
151
|
+
stroke1: "#c7b97f",
|
|
152
152
|
bgFillDark: "#1f1e1b",
|
|
153
153
|
fgFillDark: "#f6f1da",
|
|
154
154
|
bgFillInverted2: "#1f1e1b",
|
|
155
|
-
bgFillInverted1: "#
|
|
155
|
+
bgFillInverted1: "#392c00",
|
|
156
156
|
fgFillInverted: "#f6f1da",
|
|
157
|
-
surface1: "#
|
|
157
|
+
surface1: "#f9f0c8"
|
|
158
158
|
},
|
|
159
159
|
direction: "darker"
|
|
160
160
|
},
|
|
@@ -162,26 +162,26 @@ var DEFAULT_RAMPS = {
|
|
|
162
162
|
ramp: {
|
|
163
163
|
bgFill1: "#f0b849",
|
|
164
164
|
fgFill: "#1f1e1b",
|
|
165
|
-
bgFill2: "#
|
|
165
|
+
bgFill2: "#dda633",
|
|
166
166
|
surface2: "#fdf7ee",
|
|
167
|
-
surface6: "#
|
|
168
|
-
surface5: "#
|
|
169
|
-
surface4: "#
|
|
167
|
+
surface6: "#f1ce8f",
|
|
168
|
+
surface5: "#f6e0b9",
|
|
169
|
+
surface4: "#f8e8cc",
|
|
170
170
|
surface3: "#fff",
|
|
171
|
-
fgSurface4: "#
|
|
172
|
-
fgSurface3: "#
|
|
173
|
-
fgSurface2: "#
|
|
174
|
-
fgSurface1: "#
|
|
175
|
-
stroke3: "#
|
|
176
|
-
stroke4: "#
|
|
177
|
-
stroke2: "#
|
|
178
|
-
stroke1: "#
|
|
171
|
+
fgSurface4: "#2e1900",
|
|
172
|
+
fgSurface3: "#936400",
|
|
173
|
+
fgSurface2: "#b68000",
|
|
174
|
+
fgSurface1: "#d8a12c",
|
|
175
|
+
stroke3: "#936400",
|
|
176
|
+
stroke4: "#704a00",
|
|
177
|
+
stroke2: "#caae7c",
|
|
178
|
+
stroke1: "#d2b581",
|
|
179
179
|
bgFillDark: "#1f1e1b",
|
|
180
180
|
fgFillDark: "#f3f0e9",
|
|
181
181
|
bgFillInverted2: "#1f1e1b",
|
|
182
|
-
bgFillInverted1: "#
|
|
182
|
+
bgFillInverted1: "#422800",
|
|
183
183
|
fgFillInverted: "#f3f0e9",
|
|
184
|
-
surface1: "#
|
|
184
|
+
surface1: "#faeeda"
|
|
185
185
|
},
|
|
186
186
|
direction: "darker"
|
|
187
187
|
},
|
|
@@ -189,26 +189,26 @@ var DEFAULT_RAMPS = {
|
|
|
189
189
|
ramp: {
|
|
190
190
|
bgFill1: "#cc1818",
|
|
191
191
|
fgFill: "#f2efef",
|
|
192
|
-
bgFill2: "#
|
|
192
|
+
bgFill2: "#b90000",
|
|
193
193
|
surface2: "#fdf6f5",
|
|
194
|
-
surface6: "#
|
|
195
|
-
surface5: "#
|
|
196
|
-
surface4: "#
|
|
194
|
+
surface6: "#f5c8c1",
|
|
195
|
+
surface5: "#f9dbd7",
|
|
196
|
+
surface4: "#fae4e1",
|
|
197
197
|
surface3: "#fff",
|
|
198
|
-
fgSurface4: "#
|
|
198
|
+
fgSurface4: "#470000",
|
|
199
199
|
fgSurface3: "#cc1818",
|
|
200
|
-
fgSurface2: "#
|
|
201
|
-
fgSurface1: "#
|
|
200
|
+
fgSurface2: "#f74c40",
|
|
201
|
+
fgSurface1: "#ff8879",
|
|
202
202
|
stroke3: "#cc1818",
|
|
203
|
-
stroke4: "#
|
|
204
|
-
stroke2: "#
|
|
205
|
-
stroke1: "#
|
|
203
|
+
stroke4: "#9d0000",
|
|
204
|
+
stroke2: "#de988e",
|
|
205
|
+
stroke1: "#e1a198",
|
|
206
206
|
bgFillDark: "#231c1b",
|
|
207
207
|
fgFillDark: "#f2efef",
|
|
208
208
|
bgFillInverted2: "#231c1b",
|
|
209
|
-
bgFillInverted1: "#
|
|
209
|
+
bgFillInverted1: "#640000",
|
|
210
210
|
fgFillInverted: "#f2efef",
|
|
211
|
-
surface1: "#
|
|
211
|
+
surface1: "#fbece9"
|
|
212
212
|
},
|
|
213
213
|
direction: "darker"
|
|
214
214
|
}
|
|
@@ -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: '#f8f8f8',\n\t\t\tbgFill1: '#555',\n\t\t\tfgFill: '#f0f0f0',\n\t\t\tbgFill2: '#
|
|
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: '#484848',\n\t\t\tsurface6: '#d2d2d2',\n\t\t\tsurface5: '#e2e2e2',\n\t\t\tsurface4: '#eaeaea',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#1e1e1e',\n\t\t\tfgSurface3: '#6d6d6d',\n\t\t\tfgSurface2: '#8a8a8a',\n\t\t\tfgSurface1: '#aaa',\n\t\t\tstroke3: '#8a8a8a',\n\t\t\tstroke4: '#6c6c6c',\n\t\t\tstroke2: '#d8d8d8',\n\t\t\tstroke1: '#e0e0e0',\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: '#2e49d9',\n\t\t\tsurface2: '#f6f8fc',\n\t\t\tsurface6: '#c7d2ee',\n\t\t\tsurface5: '#dbe2f4',\n\t\t\tsurface4: '#e4eaf7',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#0b0070',\n\t\t\tfgSurface3: '#3858e9',\n\t\t\tfgSurface2: '#5b82ff',\n\t\t\tfgSurface1: '#85a9ff',\n\t\t\tstroke3: '#3858e9',\n\t\t\tstroke4: '#2337c8',\n\t\t\tstroke2: '#9aaad3',\n\t\t\tstroke1: '#a2b1d6',\n\t\t\tbgFillDark: '#1b1e26',\n\t\t\tfgFillDark: '#eff0f2',\n\t\t\tbgFillInverted2: '#1b1e26',\n\t\t\tbgFillInverted1: '#13009f',\n\t\t\tfgFillInverted: '#eff0f2',\n\t\t\tsurface1: '#ecf0f9',\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: '#007fed',\n\t\t\tsurface2: '#f5f9fd',\n\t\t\tsurface6: '#bdd5f1',\n\t\t\tsurface5: '#d4e4f6',\n\t\t\tsurface4: '#dfebf8',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#001b4f',\n\t\t\tfgSurface3: '#006bd7',\n\t\t\tfgSurface2: '#008bfa',\n\t\t\tfgSurface1: '#59b0ff',\n\t\t\tstroke3: '#006bd7',\n\t\t\tstroke4: '#004fa9',\n\t\t\tstroke2: '#94b5d9',\n\t\t\tstroke1: '#9fbcdd',\n\t\t\tbgFillDark: '#1b1e23',\n\t\t\tfgFillDark: '#eff0f2',\n\t\t\tbgFillInverted2: '#1b1e23',\n\t\t\tbgFillInverted1: '#002a69',\n\t\t\tfgFillInverted: '#eff0f2',\n\t\t\tsurface1: '#e9f1fa',\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: '#37a756',\n\t\t\tsurface2: '#f0fcf2',\n\t\t\tsurface6: '#7eea95',\n\t\t\tsurface5: '#b5f1bf',\n\t\t\tsurface4: '#cbf5d1',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#002900',\n\t\t\tfgSurface3: '#007f30',\n\t\t\tfgSurface2: '#2b9e4e',\n\t\t\tfgSurface1: '#53c06e',\n\t\t\tstroke3: '#007f30',\n\t\t\tstroke4: '#006013',\n\t\t\tstroke2: '#7dc189',\n\t\t\tstroke1: '#82c98f',\n\t\t\tbgFillDark: '#1b1f1c',\n\t\t\tfgFillDark: '#edf2ed',\n\t\t\tbgFillInverted2: '#1b1f1c',\n\t\t\tbgFillInverted1: '#003701',\n\t\t\tfgFillInverted: '#edf2ed',\n\t\t\tsurface1: '#dbf8df',\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: '#dcbe2f',\n\t\t\tsurface2: '#fdf9e7',\n\t\t\tsurface6: '#ecd264',\n\t\t\tsurface5: '#f5e297',\n\t\t\tsurface4: '#f7eab3',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#281d00',\n\t\t\tfgSurface3: '#836b00',\n\t\t\tfgSurface2: '#a58700',\n\t\t\tfgSurface1: '#c7a900',\n\t\t\tstroke3: '#836b00',\n\t\t\tstroke4: '#635000',\n\t\t\tstroke2: '#bfb17a',\n\t\t\tstroke1: '#c7b97f',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#f6f1da',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#392c00',\n\t\t\tfgFillInverted: '#f6f1da',\n\t\t\tsurface1: '#f9f0c8',\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: '#dda633',\n\t\t\tsurface2: '#fdf7ee',\n\t\t\tsurface6: '#f1ce8f',\n\t\t\tsurface5: '#f6e0b9',\n\t\t\tsurface4: '#f8e8cc',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#2e1900',\n\t\t\tfgSurface3: '#936400',\n\t\t\tfgSurface2: '#b68000',\n\t\t\tfgSurface1: '#d8a12c',\n\t\t\tstroke3: '#936400',\n\t\t\tstroke4: '#704a00',\n\t\t\tstroke2: '#caae7c',\n\t\t\tstroke1: '#d2b581',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#f3f0e9',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#422800',\n\t\t\tfgFillInverted: '#f3f0e9',\n\t\t\tsurface1: '#faeeda',\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: '#b90000',\n\t\t\tsurface2: '#fdf6f5',\n\t\t\tsurface6: '#f5c8c1',\n\t\t\tsurface5: '#f9dbd7',\n\t\t\tsurface4: '#fae4e1',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#470000',\n\t\t\tfgSurface3: '#cc1818',\n\t\t\tfgSurface2: '#f74c40',\n\t\t\tfgSurface1: '#ff8879',\n\t\t\tstroke3: '#cc1818',\n\t\t\tstroke4: '#9d0000',\n\t\t\tstroke2: '#de988e',\n\t\t\tstroke1: '#e1a198',\n\t\t\tbgFillDark: '#231c1b',\n\t\t\tfgFillDark: '#f2efef',\n\t\t\tbgFillInverted2: '#231c1b',\n\t\t\tbgFillInverted1: '#640000',\n\t\t\tfgFillInverted: '#f2efef',\n\t\t\tsurface1: '#fbece9',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMO,IAAM,gBAGT;AAAA,EACH,IAAI;AAAA,IACH,MAAM;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACR,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,MAAM;AAAA,IACL,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACR,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACR,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACR,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,IACN,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -54,7 +54,7 @@ function findColorMeetingRequirements(reference, seed, target, direction, {
|
|
|
54
54
|
return tapered;
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
|
-
return (0,
|
|
57
|
+
return (0, import_color_utils.clampToGamut)({
|
|
58
58
|
spaceId: "oklch",
|
|
59
59
|
coords: [newL, newC, (0, import_fn.get)(seed, [import_fn.OKLCH, "h"])]
|
|
60
60
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/color-ramps/lib/find-color-with-constraints.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, type ColorTypes } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA4C;AAK5C,mCAAO;AACP,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, type ColorTypes } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport { solveWithBisect } from './utils';\nimport { WHITE, BLACK, CONTRAST_EPSILON } from './constants';\nimport { clampToGamut, getContrast } from './color-utils';\nimport { type TaperChromaOptions, taperChroma } from './taper-chroma';\n\n/**\n * Difference of contrast values that grows linearly with the Y luminance.\n * We get more precise linear interpolations when we use this.\n * @param c1 First contrast.\n * @param c2 Second contrast.\n * @return Difference of logarithms.\n */\nfunction cdiff( c1: number, c2: number ) {\n\treturn Math.log( c1 / c2 );\n}\n\n/**\n * Solve for L such that:\n * - the L applied to the seed meets the contrast target against the reference\n * - the search is performed in one direction (ie lighter / darker)\n * - more constraints can be applied around lightness\n * - chroma could be tapered\n * @param reference\n * @param seed\n * @param target\n * @param direction\n * @param options\n * @param options.lightnessConstraint\n * @param options.lightnessConstraint.type\n * @param options.lightnessConstraint.value\n * @param options.taperChromaOptions\n */\nexport function findColorMeetingRequirements(\n\treference: ColorTypes,\n\tseed: ColorTypes,\n\ttarget: number,\n\tdirection: 'lighter' | 'darker',\n\t{\n\t\tlightnessConstraint,\n\t\ttaperChromaOptions,\n\t}: {\n\t\tlightnessConstraint?: {\n\t\t\ttype: 'force' | 'onlyIfSucceeds';\n\t\t\tvalue: number;\n\t\t};\n\t\ttaperChromaOptions?: TaperChromaOptions;\n\t} = {}\n): { color: ColorTypes; reached: boolean; achieved: number; deficit?: number } {\n\t// A target of 1 means same color.\n\t// A target lower than 1 doesn't make sense.\n\tif ( target <= 1 ) {\n\t\treturn {\n\t\t\tcolor: reference,\n\t\t\treached: true,\n\t\t\tachieved: 1,\n\t\t};\n\t}\n\n\tfunction getColorForL( l: number ): ColorTypes {\n\t\tlet newL = l;\n\t\tlet newC = get( seed, [ OKLCH, 'c' ] );\n\n\t\tif ( taperChromaOptions ) {\n\t\t\tconst tapered = taperChroma( seed, newL, taperChromaOptions );\n\t\t\t// taperChroma returns either { l, c } or a ColorObject\n\t\t\tif ( 'l' in tapered && 'c' in tapered ) {\n\t\t\t\tnewL = tapered.l;\n\t\t\t\tnewC = tapered.c;\n\t\t\t} else {\n\t\t\t\t// It's already a ColorObject, return it directly\n\t\t\t\treturn tapered;\n\t\t\t}\n\t\t}\n\n\t\treturn clampToGamut( {\n\t\t\tspaceId: 'oklch',\n\t\t\tcoords: [ newL, newC, get( seed, [ OKLCH, 'h' ] ) ],\n\t\t} );\n\t}\n\n\t// Set the boundary based on the direction.\n\tconst mostContrastingL = direction === 'lighter' ? 1 : 0;\n\tconst mostContrastingColor = direction === 'lighter' ? WHITE : BLACK;\n\tconst highestContrast = getContrast( reference, mostContrastingColor );\n\n\tif ( lightnessConstraint ) {\n\t\t// Apply a specific L value.\n\t\t// Useful when pinning a step to a specific lightness, of to specify\n\t\t// min/max L values.\n\t\tconst colorWithExactL = getColorForL( lightnessConstraint.value );\n\t\tconst exactLContrast = getContrast( reference, colorWithExactL );\n\t\tconst exactLContrastMeetsTarget =\n\t\t\tcdiff( exactLContrast, target ) >= -CONTRAST_EPSILON;\n\n\t\t// If the L constraint is of \"force\" type, apply it even when it doesn't\n\t\t// meet the contrast target.\n\t\tif (\n\t\t\texactLContrastMeetsTarget ||\n\t\t\tlightnessConstraint.type === 'force'\n\t\t) {\n\t\t\treturn {\n\t\t\t\tcolor: colorWithExactL,\n\t\t\t\treached: exactLContrastMeetsTarget,\n\t\t\t\tachieved: exactLContrast,\n\t\t\t\tdeficit: exactLContrastMeetsTarget\n\t\t\t\t\t? cdiff( exactLContrast, highestContrast )\n\t\t\t\t\t: cdiff( target, exactLContrast ),\n\t\t\t};\n\t\t}\n\t}\n\n\t// If even the most contrasting color can't reach the target, the target is unreachable.\n\t// On the other hand, if the contrast is very close to the target, we consider it reached.\n\tif ( cdiff( highestContrast, target ) <= CONTRAST_EPSILON ) {\n\t\treturn {\n\t\t\tcolor: mostContrastingColor,\n\t\t\treached: cdiff( highestContrast, target ) >= -CONTRAST_EPSILON,\n\t\t\tachieved: highestContrast,\n\t\t\tdeficit: cdiff( target, highestContrast ),\n\t\t};\n\t}\n\n\t// Bracket: low fails, high meets.\n\t// Originally this was seed.oklch.l \u2014 although it's an assumption that works\n\t// only when we know for sure the direction of the search.\n\t// TODO: can we bring this back to seed.oklch.l ?\n\tconst lowerL = get( reference, [ OKLCH, 'l' ] );\n\tconst lowerContrast = cdiff( 1, target );\n\tconst upperL = mostContrastingL;\n\tconst upperContrast = cdiff( highestContrast, target );\n\n\tconst bestColor = solveWithBisect(\n\t\tgetColorForL,\n\t\t( c: ColorTypes ) => cdiff( getContrast( reference, c ), target ),\n\t\tlowerL,\n\t\tlowerContrast,\n\t\tupperL,\n\t\tupperContrast\n\t);\n\n\treturn {\n\t\tcolor: bestColor,\n\t\treached: true,\n\t\tachieved: target,\n\t\t// Negative number that specifies how much room we have.\n\t\tdeficit: cdiff( target, highestContrast ),\n\t};\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA4C;AAK5C,mCAAO;AACP,mBAAgC;AAChC,uBAA+C;AAC/C,yBAA0C;AAC1C,0BAAqD;AASrD,SAAS,MAAO,IAAY,IAAa;AACxC,SAAO,KAAK,IAAK,KAAK,EAAG;AAC1B;AAkBO,SAAS,6BACf,WACA,MACA,QACA,WACA;AAAA,EACC;AAAA,EACA;AACD,IAMI,CAAC,GACyE;AAG9E,MAAK,UAAU,GAAI;AAClB,WAAO;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,IACX;AAAA,EACD;AAEA,WAAS,aAAc,GAAwB;AAC9C,QAAI,OAAO;AACX,QAAI,WAAO,eAAK,MAAM,CAAE,iBAAO,GAAI,CAAE;AAErC,QAAK,oBAAqB;AACzB,YAAM,cAAU,iCAAa,MAAM,MAAM,kBAAmB;AAE5D,UAAK,OAAO,WAAW,OAAO,SAAU;AACvC,eAAO,QAAQ;AACf,eAAO,QAAQ;AAAA,MAChB,OAAO;AAEN,eAAO;AAAA,MACR;AAAA,IACD;AAEA,eAAO,iCAAc;AAAA,MACpB,SAAS;AAAA,MACT,QAAQ,CAAE,MAAM,UAAM,eAAK,MAAM,CAAE,iBAAO,GAAI,CAAE,CAAE;AAAA,IACnD,CAAE;AAAA,EACH;AAGA,QAAM,mBAAmB,cAAc,YAAY,IAAI;AACvD,QAAM,uBAAuB,cAAc,YAAY,yBAAQ;AAC/D,QAAM,sBAAkB,gCAAa,WAAW,oBAAqB;AAErE,MAAK,qBAAsB;AAI1B,UAAM,kBAAkB,aAAc,oBAAoB,KAAM;AAChE,UAAM,qBAAiB,gCAAa,WAAW,eAAgB;AAC/D,UAAM,4BACL,MAAO,gBAAgB,MAAO,KAAK,CAAC;AAIrC,QACC,6BACA,oBAAoB,SAAS,SAC5B;AACD,aAAO;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,SAAS,4BACN,MAAO,gBAAgB,eAAgB,IACvC,MAAO,QAAQ,cAAe;AAAA,MAClC;AAAA,IACD;AAAA,EACD;AAIA,MAAK,MAAO,iBAAiB,MAAO,KAAK,mCAAmB;AAC3D,WAAO;AAAA,MACN,OAAO;AAAA,MACP,SAAS,MAAO,iBAAiB,MAAO,KAAK,CAAC;AAAA,MAC9C,UAAU;AAAA,MACV,SAAS,MAAO,QAAQ,eAAgB;AAAA,IACzC;AAAA,EACD;AAMA,QAAM,aAAS,eAAK,WAAW,CAAE,iBAAO,GAAI,CAAE;AAC9C,QAAM,gBAAgB,MAAO,GAAG,MAAO;AACvC,QAAM,SAAS;AACf,QAAM,gBAAgB,MAAO,iBAAiB,MAAO;AAErD,QAAM,gBAAY;AAAA,IACjB;AAAA,IACA,CAAE,MAAmB,UAAO,gCAAa,WAAW,CAAE,GAAG,MAAO;AAAA,IAChE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,SAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA;AAAA,IAEV,SAAS,MAAO,QAAQ,eAAgB;AAAA,EACzC;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -143,7 +143,7 @@ function buildRamp(seedArg, config, {
|
|
|
143
143
|
} = {}) {
|
|
144
144
|
let seed;
|
|
145
145
|
try {
|
|
146
|
-
seed = (0,
|
|
146
|
+
seed = (0, import_color_utils.clampToGamut)((0, import_fn.parse)(seedArg));
|
|
147
147
|
} catch (error) {
|
|
148
148
|
throw new Error(
|
|
149
149
|
`Invalid seed color "${seedArg}": ${error instanceof Error ? error.message : "Unknown error"}`
|
|
@@ -177,7 +177,7 @@ function buildRamp(seedArg, config, {
|
|
|
177
177
|
let bestRamp = rampResults;
|
|
178
178
|
if (maxDeficit > import_constants.CONTRAST_EPSILON && rescaleToFitContrastTargets) {
|
|
179
179
|
let getSeedForL = function(l) {
|
|
180
|
-
return (0,
|
|
180
|
+
return (0, import_color_utils.clampToGamut)((0, import_fn.set)((0, import_fn.clone)(seed), [import_fn.OKLCH, "l"], l));
|
|
181
181
|
}, getDeficitForSeed = function(s) {
|
|
182
182
|
const iterationResults = calculateRamp({
|
|
183
183
|
seed: s,
|