@wordpress/theme 0.2.1-next.dc3f6d3c1.0 → 0.3.1-next.6deb34194.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/lib/default-ramps.js +65 -65
- package/build/color-ramps/lib/default-ramps.js.map +1 -1
- package/build/color-ramps/lib/find-color-with-constraints.js.map +2 -2
- package/build/color-ramps/lib/index.js.map +2 -2
- package/build/color-ramps/lib/taper-chroma.js +18 -44
- package/build/color-ramps/lib/taper-chroma.js.map +2 -2
- package/build/prebuilt/js/design-tokens.js +20 -9
- package/build/prebuilt/js/design-tokens.js.map +2 -2
- package/build/prebuilt/json/figma.json +125 -37
- 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/lib/default-ramps.js +65 -65
- package/build-module/color-ramps/lib/default-ramps.js.map +1 -1
- package/build-module/color-ramps/lib/find-color-with-constraints.js.map +2 -2
- package/build-module/color-ramps/lib/index.js.map +2 -2
- package/build-module/color-ramps/lib/taper-chroma.js +19 -46
- package/build-module/color-ramps/lib/taper-chroma.js.map +2 -2
- package/build-module/prebuilt/js/design-tokens.js +20 -9
- package/build-module/prebuilt/js/design-tokens.js.map +2 -2
- package/build-module/prebuilt/json/figma.json +125 -37
- package/build-module/theme-provider.js +3 -1
- package/build-module/theme-provider.js.map +2 -2
- package/build-types/color-ramps/lib/find-color-with-constraints.d.ts +3 -4
- package/build-types/color-ramps/lib/find-color-with-constraints.d.ts.map +1 -1
- package/build-types/color-ramps/lib/taper-chroma.d.ts +4 -4
- package/build-types/color-ramps/lib/taper-chroma.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 +25 -14
- package/package.json +4 -4
- package/src/color-ramps/lib/default-ramps.ts +65 -65
- package/src/color-ramps/lib/find-color-with-constraints.ts +11 -7
- package/src/color-ramps/lib/index.ts +4 -4
- package/src/color-ramps/lib/taper-chroma.ts +32 -63
- package/src/prebuilt/css/design-tokens.css +84 -30
- package/src/prebuilt/js/design-tokens.js +20 -9
- package/src/prebuilt/json/figma.json +125 -37
- 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/border.json +43 -21
- package/tokens/color.json +65 -65
- package/tokens/dimension.json +106 -10
- package/tsconfig.bin.tsbuildinfo +1 -1
- package/tsconfig.src.json +1 -1
- package/tsconfig.src.tsbuildinfo +1 -1
- package/build/types/css-modules.d.js +0 -1
- package/build/types/css-modules.d.js.map +0 -7
- package/build-module/types/css-modules.d.js +0 -1
- package/build-module/types/css-modules.d.js.map +0 -7
- package/src/types/css-modules.d.ts +0 -4
|
@@ -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 ) {
|
|
@@ -55,10 +55,10 @@ var DEFAULT_RAMPS = {
|
|
|
55
55
|
bgFill1: "#3858e9",
|
|
56
56
|
fgFill: "#eff0f2",
|
|
57
57
|
bgFill2: "#2e49d9",
|
|
58
|
-
surface2: "#
|
|
59
|
-
surface6: "#
|
|
58
|
+
surface2: "#f6f8fd",
|
|
59
|
+
surface6: "#c7d2ed",
|
|
60
60
|
surface5: "#dbe2f4",
|
|
61
|
-
surface4: "#
|
|
61
|
+
surface4: "#e6eaf4",
|
|
62
62
|
surface3: "#fff",
|
|
63
63
|
fgSurface4: "#0b0070",
|
|
64
64
|
fgSurface3: "#3858e9",
|
|
@@ -66,11 +66,11 @@ var DEFAULT_RAMPS = {
|
|
|
66
66
|
fgSurface1: "#85a9ff",
|
|
67
67
|
stroke3: "#3858e9",
|
|
68
68
|
stroke4: "#2337c8",
|
|
69
|
-
stroke2: "#
|
|
70
|
-
stroke1: "#
|
|
71
|
-
bgFillDark: "#
|
|
69
|
+
stroke2: "#9caacc",
|
|
70
|
+
stroke1: "#a3b1d4",
|
|
71
|
+
bgFillDark: "#1a1e27",
|
|
72
72
|
fgFillDark: "#eff0f2",
|
|
73
|
-
bgFillInverted2: "#
|
|
73
|
+
bgFillInverted2: "#1a1e27",
|
|
74
74
|
bgFillInverted1: "#13009f",
|
|
75
75
|
fgFillInverted: "#eff0f2",
|
|
76
76
|
surface1: "#ecf0f9"
|
|
@@ -80,27 +80,27 @@ var DEFAULT_RAMPS = {
|
|
|
80
80
|
info: {
|
|
81
81
|
ramp: {
|
|
82
82
|
bgFill1: "#0090ff",
|
|
83
|
-
fgFill: "#
|
|
83
|
+
fgFill: "#1a1f24",
|
|
84
84
|
bgFill2: "#007fed",
|
|
85
|
-
surface2: "#
|
|
86
|
-
surface6: "#
|
|
87
|
-
surface5: "#
|
|
88
|
-
surface4: "#
|
|
85
|
+
surface2: "#f3f9ff",
|
|
86
|
+
surface6: "#bcd5f1",
|
|
87
|
+
surface5: "#d3e4f7",
|
|
88
|
+
surface4: "#deebfa",
|
|
89
89
|
surface3: "#fff",
|
|
90
90
|
fgSurface4: "#001b4f",
|
|
91
91
|
fgSurface3: "#006bd7",
|
|
92
92
|
fgSurface2: "#008bfa",
|
|
93
|
-
fgSurface1: "#
|
|
93
|
+
fgSurface1: "#58b0ff",
|
|
94
94
|
stroke3: "#006bd7",
|
|
95
95
|
stroke4: "#004fa9",
|
|
96
|
-
stroke2: "#
|
|
97
|
-
stroke1: "#
|
|
98
|
-
bgFillDark: "#
|
|
99
|
-
fgFillDark: "#
|
|
100
|
-
bgFillInverted2: "#
|
|
96
|
+
stroke2: "#95b5d9",
|
|
97
|
+
stroke1: "#9fbcdc",
|
|
98
|
+
bgFillDark: "#1a1f24",
|
|
99
|
+
fgFillDark: "#eef0f3",
|
|
100
|
+
bgFillInverted2: "#1a1f24",
|
|
101
101
|
bgFillInverted1: "#002a69",
|
|
102
|
-
fgFillInverted: "#
|
|
103
|
-
surface1: "#
|
|
102
|
+
fgFillInverted: "#eef0f3",
|
|
103
|
+
surface1: "#e4f1ff"
|
|
104
104
|
},
|
|
105
105
|
direction: "darker"
|
|
106
106
|
},
|
|
@@ -109,25 +109,25 @@ var DEFAULT_RAMPS = {
|
|
|
109
109
|
bgFill1: "#4ab866",
|
|
110
110
|
fgFill: "#1b1f1c",
|
|
111
111
|
bgFill2: "#37a756",
|
|
112
|
-
surface2: "#
|
|
113
|
-
surface6: "#
|
|
114
|
-
surface5: "#
|
|
115
|
-
surface4: "#
|
|
112
|
+
surface2: "#eaffed",
|
|
113
|
+
surface6: "#88e89b",
|
|
114
|
+
surface5: "#aff3bb",
|
|
115
|
+
surface4: "#c5f7cc",
|
|
116
116
|
surface3: "#fff",
|
|
117
117
|
fgSurface4: "#002900",
|
|
118
118
|
fgSurface3: "#007f30",
|
|
119
119
|
fgSurface2: "#2b9e4e",
|
|
120
|
-
fgSurface1: "#
|
|
120
|
+
fgSurface1: "#53c16e",
|
|
121
121
|
stroke3: "#007f30",
|
|
122
122
|
stroke4: "#006013",
|
|
123
|
-
stroke2: "#
|
|
124
|
-
stroke1: "#
|
|
123
|
+
stroke2: "#84c08e",
|
|
124
|
+
stroke1: "#8ac894",
|
|
125
125
|
bgFillDark: "#1b1f1c",
|
|
126
|
-
fgFillDark: "#
|
|
126
|
+
fgFillDark: "#eaf3eb",
|
|
127
127
|
bgFillInverted2: "#1b1f1c",
|
|
128
128
|
bgFillInverted1: "#003701",
|
|
129
|
-
fgFillInverted: "#
|
|
130
|
-
surface1: "#
|
|
129
|
+
fgFillInverted: "#eaf3eb",
|
|
130
|
+
surface1: "#cbfdd2"
|
|
131
131
|
},
|
|
132
132
|
direction: "darker"
|
|
133
133
|
},
|
|
@@ -136,25 +136,25 @@ var DEFAULT_RAMPS = {
|
|
|
136
136
|
bgFill1: "#f0d149",
|
|
137
137
|
fgFill: "#1f1e1b",
|
|
138
138
|
bgFill2: "#dcbe2f",
|
|
139
|
-
surface2: "#
|
|
140
|
-
surface6: "#
|
|
141
|
-
surface5: "#
|
|
142
|
-
surface4: "#
|
|
139
|
+
surface2: "#fff9c9",
|
|
140
|
+
surface6: "#e8d172",
|
|
141
|
+
surface5: "#f7e18a",
|
|
142
|
+
surface4: "#fee994",
|
|
143
143
|
surface3: "#fff",
|
|
144
144
|
fgSurface4: "#281d00",
|
|
145
|
-
fgSurface3: "#
|
|
146
|
-
fgSurface2: "#
|
|
147
|
-
fgSurface1: "#
|
|
148
|
-
stroke3: "#
|
|
149
|
-
stroke4: "#
|
|
150
|
-
stroke2: "#
|
|
151
|
-
stroke1: "#
|
|
145
|
+
fgSurface3: "#826a00",
|
|
146
|
+
fgSurface2: "#a48600",
|
|
147
|
+
fgSurface1: "#c6a800",
|
|
148
|
+
stroke3: "#826a00",
|
|
149
|
+
stroke4: "#624f00",
|
|
150
|
+
stroke2: "#bdb17e",
|
|
151
|
+
stroke1: "#c5b883",
|
|
152
152
|
bgFillDark: "#1f1e1b",
|
|
153
|
-
fgFillDark: "#
|
|
153
|
+
fgFillDark: "#fdf1bf",
|
|
154
154
|
bgFillInverted2: "#1f1e1b",
|
|
155
155
|
bgFillInverted1: "#392c00",
|
|
156
|
-
fgFillInverted: "#
|
|
157
|
-
surface1: "#
|
|
156
|
+
fgFillInverted: "#fdf1bf",
|
|
157
|
+
surface1: "#ffef9b"
|
|
158
158
|
},
|
|
159
159
|
direction: "darker"
|
|
160
160
|
},
|
|
@@ -163,25 +163,25 @@ var DEFAULT_RAMPS = {
|
|
|
163
163
|
bgFill1: "#f0b849",
|
|
164
164
|
fgFill: "#1f1e1b",
|
|
165
165
|
bgFill2: "#dda633",
|
|
166
|
-
surface2: "#
|
|
167
|
-
surface6: "#
|
|
168
|
-
surface5: "#
|
|
169
|
-
surface4: "#
|
|
166
|
+
surface2: "#fff7e0",
|
|
167
|
+
surface6: "#f4cc84",
|
|
168
|
+
surface5: "#faddac",
|
|
169
|
+
surface4: "#fde6bd",
|
|
170
170
|
surface3: "#fff",
|
|
171
171
|
fgSurface4: "#2e1900",
|
|
172
|
-
fgSurface3: "#
|
|
173
|
-
fgSurface2: "#
|
|
174
|
-
fgSurface1: "#
|
|
175
|
-
stroke3: "#
|
|
176
|
-
stroke4: "#
|
|
177
|
-
stroke2: "#
|
|
178
|
-
stroke1: "#
|
|
172
|
+
fgSurface3: "#926300",
|
|
173
|
+
fgSurface2: "#b47f00",
|
|
174
|
+
fgSurface1: "#d7a02a",
|
|
175
|
+
stroke3: "#926300",
|
|
176
|
+
stroke4: "#6f4900",
|
|
177
|
+
stroke2: "#c7ad7e",
|
|
178
|
+
stroke1: "#d0b381",
|
|
179
179
|
bgFillDark: "#1f1e1b",
|
|
180
|
-
fgFillDark: "#
|
|
180
|
+
fgFillDark: "#f7efe2",
|
|
181
181
|
bgFillInverted2: "#1f1e1b",
|
|
182
182
|
bgFillInverted1: "#422800",
|
|
183
|
-
fgFillInverted: "#
|
|
184
|
-
surface1: "#
|
|
183
|
+
fgFillInverted: "#f7efe2",
|
|
184
|
+
surface1: "#ffecc4"
|
|
185
185
|
},
|
|
186
186
|
direction: "darker"
|
|
187
187
|
},
|
|
@@ -190,10 +190,10 @@ var DEFAULT_RAMPS = {
|
|
|
190
190
|
bgFill1: "#cc1818",
|
|
191
191
|
fgFill: "#f2efef",
|
|
192
192
|
bgFill2: "#b90000",
|
|
193
|
-
surface2: "#
|
|
194
|
-
surface6: "#
|
|
195
|
-
surface5: "#
|
|
196
|
-
surface4: "#
|
|
193
|
+
surface2: "#fff6f4",
|
|
194
|
+
surface6: "#f3c8c2",
|
|
195
|
+
surface5: "#f8dcd7",
|
|
196
|
+
surface4: "#f6e6e3",
|
|
197
197
|
surface3: "#fff",
|
|
198
198
|
fgSurface4: "#470000",
|
|
199
199
|
fgSurface3: "#cc1818",
|
|
@@ -201,14 +201,14 @@ var DEFAULT_RAMPS = {
|
|
|
201
201
|
fgSurface1: "#ff8879",
|
|
202
202
|
stroke3: "#cc1818",
|
|
203
203
|
stroke4: "#9d0000",
|
|
204
|
-
stroke2: "#
|
|
205
|
-
stroke1: "#
|
|
204
|
+
stroke2: "#d39c95",
|
|
205
|
+
stroke1: "#daa39b",
|
|
206
206
|
bgFillDark: "#231c1b",
|
|
207
207
|
fgFillDark: "#f2efef",
|
|
208
208
|
bgFillInverted2: "#231c1b",
|
|
209
209
|
bgFillInverted1: "#640000",
|
|
210
210
|
fgFillInverted: "#f2efef",
|
|
211
|
-
surface1: "#
|
|
211
|
+
surface1: "#fcece9"
|
|
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: '#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: '#
|
|
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: '#f6f8fd',\n\t\t\tsurface6: '#c7d2ed',\n\t\t\tsurface5: '#dbe2f4',\n\t\t\tsurface4: '#e6eaf4',\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: '#9caacc',\n\t\t\tstroke1: '#a3b1d4',\n\t\t\tbgFillDark: '#1a1e27',\n\t\t\tfgFillDark: '#eff0f2',\n\t\t\tbgFillInverted2: '#1a1e27',\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: '#1a1f24',\n\t\t\tbgFill2: '#007fed',\n\t\t\tsurface2: '#f3f9ff',\n\t\t\tsurface6: '#bcd5f1',\n\t\t\tsurface5: '#d3e4f7',\n\t\t\tsurface4: '#deebfa',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#001b4f',\n\t\t\tfgSurface3: '#006bd7',\n\t\t\tfgSurface2: '#008bfa',\n\t\t\tfgSurface1: '#58b0ff',\n\t\t\tstroke3: '#006bd7',\n\t\t\tstroke4: '#004fa9',\n\t\t\tstroke2: '#95b5d9',\n\t\t\tstroke1: '#9fbcdc',\n\t\t\tbgFillDark: '#1a1f24',\n\t\t\tfgFillDark: '#eef0f3',\n\t\t\tbgFillInverted2: '#1a1f24',\n\t\t\tbgFillInverted1: '#002a69',\n\t\t\tfgFillInverted: '#eef0f3',\n\t\t\tsurface1: '#e4f1ff',\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: '#eaffed',\n\t\t\tsurface6: '#88e89b',\n\t\t\tsurface5: '#aff3bb',\n\t\t\tsurface4: '#c5f7cc',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#002900',\n\t\t\tfgSurface3: '#007f30',\n\t\t\tfgSurface2: '#2b9e4e',\n\t\t\tfgSurface1: '#53c16e',\n\t\t\tstroke3: '#007f30',\n\t\t\tstroke4: '#006013',\n\t\t\tstroke2: '#84c08e',\n\t\t\tstroke1: '#8ac894',\n\t\t\tbgFillDark: '#1b1f1c',\n\t\t\tfgFillDark: '#eaf3eb',\n\t\t\tbgFillInverted2: '#1b1f1c',\n\t\t\tbgFillInverted1: '#003701',\n\t\t\tfgFillInverted: '#eaf3eb',\n\t\t\tsurface1: '#cbfdd2',\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: '#fff9c9',\n\t\t\tsurface6: '#e8d172',\n\t\t\tsurface5: '#f7e18a',\n\t\t\tsurface4: '#fee994',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#281d00',\n\t\t\tfgSurface3: '#826a00',\n\t\t\tfgSurface2: '#a48600',\n\t\t\tfgSurface1: '#c6a800',\n\t\t\tstroke3: '#826a00',\n\t\t\tstroke4: '#624f00',\n\t\t\tstroke2: '#bdb17e',\n\t\t\tstroke1: '#c5b883',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#fdf1bf',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#392c00',\n\t\t\tfgFillInverted: '#fdf1bf',\n\t\t\tsurface1: '#ffef9b',\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: '#fff7e0',\n\t\t\tsurface6: '#f4cc84',\n\t\t\tsurface5: '#faddac',\n\t\t\tsurface4: '#fde6bd',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#2e1900',\n\t\t\tfgSurface3: '#926300',\n\t\t\tfgSurface2: '#b47f00',\n\t\t\tfgSurface1: '#d7a02a',\n\t\t\tstroke3: '#926300',\n\t\t\tstroke4: '#6f4900',\n\t\t\tstroke2: '#c7ad7e',\n\t\t\tstroke1: '#d0b381',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#f7efe2',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#422800',\n\t\t\tfgFillInverted: '#f7efe2',\n\t\t\tsurface1: '#ffecc4',\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: '#fff6f4',\n\t\t\tsurface6: '#f3c8c2',\n\t\t\tsurface5: '#f8dcd7',\n\t\t\tsurface4: '#f6e6e3',\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: '#d39c95',\n\t\t\tstroke1: '#daa39b',\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: '#fcece9',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n};\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, type PlainColorObject } 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 * @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: PlainColorObject,\n\tseed: PlainColorObject,\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): {\n\tcolor: PlainColorObject;\n\treached: boolean;\n\tachieved: number;\n\tdeficit?: number;\n} {\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 ): PlainColorObject {\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 ) => 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,gBAAkD;AAKlD,mCAAO;AACP,mBAAgC;AAChC,uBAA+C;AAC/C,yBAA0C;AAC1C,0BAAqD;AASrD,SAAS,MAAO,IAAY,IAAa;AACxC,SAAO,KAAK,IAAK,KAAK,EAAG;AAC1B;AAiBO,SAAS,6BACf,WACA,MACA,QACA,WACA;AAAA,EACC;AAAA,EACA;AACD,IAMI,CAAC,GAMJ;AAGD,MAAK,UAAU,GAAI;AAClB,WAAO;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,IACX;AAAA,EACD;AAEA,WAAS,aAAc,GAA8B;AACpD,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,MAAO,UAAO,gCAAa,WAAW,CAAE,GAAG,MAAO;AAAA,IACpD;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
|
}
|
|
@@ -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 { clampToGamut, getContrast, getColorString } from './color-utils';\nimport { findColorMeetingRequirements } from './find-color-with-constraints';\nimport {\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:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAQO;AAKP,mCAAO;AACP,yBAA0D;AAC1D,yCAA6C;AAC7C,mBAMO;AASP,uBAAiC;AAgBjC,SAAS,cAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAUI;AACH,QAAM,cAAc,CAAC;AACrB,MAAI;AACJ,MAAI,aAAa;AACjB,MAAI,sBAAqC;AACzC,MAAI;AAIJ,QAAM,mBAAmB,oBAAI,
|
|
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 { clampToGamut, getContrast, getColorString } from './color-utils';\nimport { findColorMeetingRequirements } from './find-color-with-constraints';\nimport {\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: PlainColorObject;\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', PlainColorObject >();\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 ): PlainColorObject {\n\t\t\treturn clampToGamut( set( clone( seed ), [ OKLCH, 'l' ], l ) );\n\t\t}\n\n\t\tfunction getDeficitForSeed( s: PlainColorObject ): 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
|
}
|
|
@@ -25,8 +25,7 @@ module.exports = __toCommonJS(taper_chroma_exports);
|
|
|
25
25
|
var import_fn = require("colorjs.io/fn");
|
|
26
26
|
var import_register_color_spaces = require("./register-color-spaces");
|
|
27
27
|
function taperChroma(seed, lTarget, options = {}) {
|
|
28
|
-
const gamut = options.gamut ??
|
|
29
|
-
const gamutSpace = gamut === "p3" ? import_fn.P3 : import_fn.sRGB;
|
|
28
|
+
const gamut = options.gamut ?? import_fn.sRGB;
|
|
30
29
|
const alpha = options.alpha ?? 0.65;
|
|
31
30
|
const carry = options.carry ?? 0.5;
|
|
32
31
|
const cUpperBound = options.cUpperBound ?? 0.45;
|
|
@@ -44,22 +43,18 @@ function taperChroma(seed, lTarget, options = {}) {
|
|
|
44
43
|
hSeed = normalizeHue(options.hueFallback);
|
|
45
44
|
} else {
|
|
46
45
|
return {
|
|
47
|
-
|
|
48
|
-
coords: [clamp01(lTarget), 0, 0]
|
|
46
|
+
space: import_fn.OKLCH,
|
|
47
|
+
coords: [clamp01(lTarget), 0, 0],
|
|
48
|
+
alpha: 1
|
|
49
49
|
};
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
const lSeed = clamp01((0, import_fn.get)(seed, [import_fn.OKLCH, "l"]));
|
|
53
|
-
const cmaxSeed = getCachedMaxChromaAtLH(
|
|
54
|
-
lSeed,
|
|
55
|
-
hSeed,
|
|
56
|
-
gamutSpace,
|
|
57
|
-
cUpperBound
|
|
58
|
-
);
|
|
53
|
+
const cmaxSeed = getCachedMaxChromaAtLH(lSeed, hSeed, gamut, cUpperBound);
|
|
59
54
|
const cmaxTarget = getCachedMaxChromaAtLH(
|
|
60
55
|
clamp01(lTarget),
|
|
61
56
|
hSeed,
|
|
62
|
-
|
|
57
|
+
gamut,
|
|
63
58
|
cUpperBound
|
|
64
59
|
);
|
|
65
60
|
let seedRelative = 0;
|
|
@@ -73,17 +68,8 @@ function taperChroma(seed, lTarget, options = {}) {
|
|
|
73
68
|
kLight,
|
|
74
69
|
kDark
|
|
75
70
|
});
|
|
76
|
-
|
|
71
|
+
const cPlanned = cWithCarry * t;
|
|
77
72
|
const lOut = clamp01(lTarget);
|
|
78
|
-
const candidate = {
|
|
79
|
-
spaceId: "oklch",
|
|
80
|
-
coords: [lOut, cPlanned, hSeed]
|
|
81
|
-
};
|
|
82
|
-
if (!(0, import_fn.inGamut)(candidate, gamutSpace)) {
|
|
83
|
-
const cap = Math.min(cPlanned, cUpperBound);
|
|
84
|
-
cPlanned = getCachedMaxChromaAtLH(lOut, hSeed, gamutSpace, cap);
|
|
85
|
-
}
|
|
86
|
-
cPlanned = Math.min(cPlanned, cSeed);
|
|
87
73
|
return { l: lOut, c: cPlanned };
|
|
88
74
|
}
|
|
89
75
|
function clamp01(x) {
|
|
@@ -119,9 +105,9 @@ function continuousTaper(seedL, targetL, opts) {
|
|
|
119
105
|
}
|
|
120
106
|
var maxChromaCache = /* @__PURE__ */ new Map();
|
|
121
107
|
function keyMax(l, h, gamut, cap) {
|
|
122
|
-
const lq = quantize(l,
|
|
123
|
-
const hq = quantize(normalizeHue(h),
|
|
124
|
-
const cq = quantize(cap,
|
|
108
|
+
const lq = quantize(l, 0.05);
|
|
109
|
+
const hq = quantize(normalizeHue(h), 10);
|
|
110
|
+
const cq = quantize(cap, 0.05);
|
|
125
111
|
return `${gamut}|L:${lq}|H:${hq}|cap:${cq}`;
|
|
126
112
|
}
|
|
127
113
|
function quantize(x, step) {
|
|
@@ -129,7 +115,7 @@ function quantize(x, step) {
|
|
|
129
115
|
return k * step;
|
|
130
116
|
}
|
|
131
117
|
function getCachedMaxChromaAtLH(l, h, gamutSpace, cap) {
|
|
132
|
-
const gamut = gamutSpace
|
|
118
|
+
const gamut = gamutSpace.id;
|
|
133
119
|
const key = keyMax(l, h, gamut, cap);
|
|
134
120
|
const hit = maxChromaCache.get(key);
|
|
135
121
|
if (typeof hit === "number") {
|
|
@@ -140,25 +126,13 @@ function getCachedMaxChromaAtLH(l, h, gamutSpace, cap) {
|
|
|
140
126
|
return computed;
|
|
141
127
|
}
|
|
142
128
|
function maxInGamutChromaAtLH(l, h, gamutSpace, cap) {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
const probe = {
|
|
151
|
-
spaceId: "oklch",
|
|
152
|
-
coords: [lFixed, mid, hFixed]
|
|
153
|
-
};
|
|
154
|
-
if ((0, import_fn.inGamut)(probe, gamutSpace)) {
|
|
155
|
-
ok = mid;
|
|
156
|
-
lo = mid;
|
|
157
|
-
} else {
|
|
158
|
-
hi = mid;
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
return ok;
|
|
129
|
+
const probe = {
|
|
130
|
+
space: import_fn.OKLCH,
|
|
131
|
+
coords: [l, cap, h],
|
|
132
|
+
alpha: 1
|
|
133
|
+
};
|
|
134
|
+
const clamped = (0, import_fn.toGamut)(probe, { space: gamutSpace, method: "css" });
|
|
135
|
+
return (0, import_fn.get)(clamped, [import_fn.OKLCH, "c"]);
|
|
162
136
|
}
|
|
163
137
|
// Annotate the CommonJS export names for ESM import in node:
|
|
164
138
|
0 && (module.exports = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/color-ramps/lib/taper-chroma.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tget,\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tget,\n\ttoGamut,\n\tOKLCH,\n\tsRGB,\n\ttype PlainColorObject,\n\ttype ColorSpace,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\n\nexport interface TaperChromaOptions {\n\tgamut?: ColorSpace; // target gamut (default `sRGB`)\n\talpha?: number; // base fraction of Cmax at target (default 0.62)\n\tcarry?: number; // seed vividness carry exponent \u03B2 in [0..1] (default 0.5)\n\tcUpperBound?: number; // hard search cap for C (default 0.45)\n\t// Continuous taper around the seed (desaturate both sides slightly)\n\tradiusLight?: number; // distance in L where kLight is reached (default 0.20)\n\tradiusDark?: number; // distance in L where kDark is reached (default 0.20)\n\tkLight?: number; // floor multiplier near lighter side (default 0.85)\n\tkDark?: number; // floor multiplier near darker side (default 0.85)\n\t// Achromatic handling\n\thueFallback?: number; // degrees: if seed is achromatic and you still want color\n\tachromaEpsilon?: number; // \u2264 this chroma \u2192 treat as achromatic (default 0.005)\n}\n\n/**\n * Given the seed and the target lightness, tapers the chroma smoothly.\n * - C_intended = Cmax(Lt,H0) * alpha * (seedRelative^carry)\n * - Continuous taper vs |Lt - Ls| to softly reduce chroma for neighbors\n * - Downward-only clamp on C (preserve L & H)\n * @param seed\n * @param lTarget\n * @param options\n */\nexport function taperChroma(\n\tseed: PlainColorObject, // already OKLCH\n\tlTarget: number, // [0..1]\n\toptions: TaperChromaOptions = {}\n): { l: number; c: number } | PlainColorObject {\n\tconst gamut = options.gamut ?? sRGB;\n\tconst alpha = options.alpha ?? 0.65; // 0.7-0.8 works well for accent surface\n\tconst carry = options.carry ?? 0.5;\n\tconst cUpperBound = options.cUpperBound ?? 0.45;\n\tconst radiusLight = options.radiusLight ?? 0.2;\n\tconst radiusDark = options.radiusDark ?? 0.2;\n\tconst kLight = options.kLight ?? 0.85;\n\tconst kDark = options.kDark ?? 0.85;\n\tconst achromaEpsilon = options.achromaEpsilon ?? 0.005;\n\n\tconst cSeed = Math.max( 0, get( seed, [ OKLCH, 'c' ] ) );\n\tlet hSeed = Number( get( seed, [ OKLCH, 'h' ] ) );\n\n\tconst chromaIsTiny = cSeed < achromaEpsilon;\n\tconst hueIsInvalid = ! Number.isFinite( hSeed );\n\n\tif ( chromaIsTiny || hueIsInvalid ) {\n\t\tif ( typeof options.hueFallback === 'number' ) {\n\t\t\thSeed = normalizeHue( options.hueFallback );\n\t\t} else {\n\t\t\t// Respect achromatic intent: grayscale at target L\n\t\t\treturn {\n\t\t\t\tspace: OKLCH,\n\t\t\t\tcoords: [ clamp01( lTarget ), 0, 0 ],\n\t\t\t\talpha: 1,\n\t\t\t};\n\t\t}\n\t}\n\n\t// Capacity at seed and target\n\tconst lSeed = clamp01( get( seed, [ OKLCH, 'l' ] ) );\n\tconst cmaxSeed = getCachedMaxChromaAtLH( lSeed, hSeed, gamut, cUpperBound );\n\tconst cmaxTarget = getCachedMaxChromaAtLH(\n\t\tclamp01( lTarget ),\n\t\thSeed,\n\t\tgamut,\n\t\tcUpperBound\n\t);\n\n\t// Seed vividness ratio (hue-fair normalization)\n\tlet seedRelative = 0;\n\tconst denom = cmaxSeed > 0 ? cmaxSeed : 1e-6;\n\tseedRelative = clamp01( cSeed / denom );\n\n\t// Intended chroma from local capacity, tempered by seed vividness\n\tconst cIntendedBase = alpha * cmaxTarget;\n\tconst cWithCarry =\n\t\tcIntendedBase * Math.pow( seedRelative, clamp01( carry ) );\n\n\t// Gentle, symmetric desaturation vs distance in L\n\tconst t = continuousTaper( lSeed, lTarget, {\n\t\tradiusLight,\n\t\tradiusDark,\n\t\tkLight,\n\t\tkDark,\n\t} );\n\tconst cPlanned = cWithCarry * t;\n\n\t// Downward-only clamp (preserve L & H)\n\tconst lOut = clamp01( lTarget );\n\n\treturn { l: lOut, c: cPlanned };\n}\n\n/* ---------------- helpers & caches ---------------- */\n\nfunction clamp01( x: number ): number {\n\tif ( x < 0 ) {\n\t\treturn 0;\n\t}\n\tif ( x > 1 ) {\n\t\treturn 1;\n\t}\n\treturn x;\n}\nfunction normalizeHue( h: number ): number {\n\tlet hue = h % 360;\n\tif ( hue < 0 ) {\n\t\thue += 360;\n\t}\n\treturn hue;\n}\nfunction raisedCosine( u: number ): number {\n\tconst x = clamp01( u );\n\treturn 0.5 - 0.5 * Math.cos( Math.PI * x );\n}\n\n/**\n * smooth, distance-from-seed chroma taper (raised-cosine per side)\n * @param seedL\n * @param targetL\n * @param opts\n * @param opts.radiusLight\n * @param opts.radiusDark\n * @param opts.kLight\n * @param opts.kDark\n */\nfunction continuousTaper(\n\tseedL: number,\n\ttargetL: number,\n\topts: {\n\t\tradiusLight: number;\n\t\tradiusDark: number;\n\t\tkLight: number;\n\t\tkDark: number;\n\t}\n): number {\n\tconst d = targetL - seedL;\n\tif ( d >= 0 ) {\n\t\tconst u = opts.radiusLight > 0 ? Math.abs( d ) / opts.radiusLight : 1;\n\t\tconst w = raisedCosine( u > 1 ? 1 : u );\n\t\treturn 1 - ( 1 - opts.kLight ) * w;\n\t}\n\tconst u = opts.radiusDark > 0 ? Math.abs( d ) / opts.radiusDark : 1;\n\tconst w = raisedCosine( u > 1 ? 1 : u );\n\treturn 1 - ( 1 - opts.kDark ) * w;\n}\n\n/* ---- chroma-capacity queries with small caches ---- */\n\nconst maxChromaCache = new Map< string, number >();\nfunction keyMax( l: number, h: number, gamut: string, cap: number ): string {\n\t// Quantize to keep cache compact\n\tconst lq = quantize( l, 0.05 );\n\tconst hq = quantize( normalizeHue( h ), 10 );\n\tconst cq = quantize( cap, 0.05 );\n\treturn `${ gamut }|L:${ lq }|H:${ hq }|cap:${ cq }`;\n}\n\nfunction quantize( x: number, step: number ): number {\n\tconst k = Math.round( x / step );\n\treturn k * step;\n}\n\nfunction getCachedMaxChromaAtLH(\n\tl: number,\n\th: number,\n\tgamutSpace: ColorSpace,\n\tcap: number\n): number {\n\tconst gamut = gamutSpace.id;\n\tconst key = keyMax( l, h, gamut, cap );\n\tconst hit = maxChromaCache.get( key );\n\tif ( typeof hit === 'number' ) {\n\t\treturn hit;\n\t}\n\n\tconst computed = maxInGamutChromaAtLH( l, h, gamutSpace, cap );\n\tmaxChromaCache.set( key, computed );\n\treturn computed;\n}\n\n/**\n * Find the max in-gamut chroma at fixed (L,H) in the target gamut\n * @param l\n * @param h\n * @param gamutSpace\n * @param cap\n */\nfunction maxInGamutChromaAtLH(\n\tl: number,\n\th: number,\n\tgamutSpace: ColorSpace,\n\tcap: number\n): number {\n\t// Construct a color with maximum chroma.\n\tconst probe: PlainColorObject = {\n\t\tspace: OKLCH,\n\t\tcoords: [ l, cap, h ],\n\t\talpha: 1,\n\t};\n\n\t// Let `toGamut` reduce the chroma to the gamut maximum.\n\tconst clamped = toGamut( probe, { space: gamutSpace, method: 'css' } );\n\n\treturn get( clamped, [ OKLCH, 'c' ] );\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["u", "w"]
|
|
7
7
|
}
|