@webstudio-is/css-engine 0.235.0 → 0.236.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/lib/index.js +65 -3
- package/lib/runtime.js +35 -1
- package/lib/types/core/css-engine.stories.d.ts +1 -0
- package/lib/types/core/merger.d.ts +140 -20
- package/lib/types/schema.d.ts +2406 -298
- package/package.json +2 -2
package/lib/index.js
CHANGED
|
@@ -84,7 +84,41 @@ var toValue = (styleValue, transformValue) => {
|
|
|
84
84
|
return value.value;
|
|
85
85
|
}
|
|
86
86
|
if (value.type === "rgb") {
|
|
87
|
-
return `
|
|
87
|
+
return `rgb(${value.r} ${value.g} ${value.b} / ${value.alpha})`;
|
|
88
|
+
}
|
|
89
|
+
if (value.type === "color") {
|
|
90
|
+
let [c1, c2, c3] = value.components;
|
|
91
|
+
const alpha = value.alpha;
|
|
92
|
+
switch (value.colorSpace) {
|
|
93
|
+
case "srgb": {
|
|
94
|
+
c1 = Math.round(c1 * 255);
|
|
95
|
+
c2 = Math.round(c2 * 255);
|
|
96
|
+
c3 = Math.round(c3 * 255);
|
|
97
|
+
return `rgb(${c1} ${c2} ${c3} / ${alpha})`;
|
|
98
|
+
}
|
|
99
|
+
case "hsl":
|
|
100
|
+
return `hsl(${c1} ${c2}% ${c3}% / ${alpha})`;
|
|
101
|
+
case "hwb":
|
|
102
|
+
return `hwb(${c1} ${c2}% ${c3}% / ${alpha})`;
|
|
103
|
+
case "lab":
|
|
104
|
+
return `lab(${c1}% ${c2} ${c3} / ${alpha})`;
|
|
105
|
+
case "lch":
|
|
106
|
+
return `lch(${c1}% ${c2} ${c3} / ${alpha})`;
|
|
107
|
+
case "oklab":
|
|
108
|
+
return `oklab(${c1} ${c2} ${c3} / ${alpha})`;
|
|
109
|
+
case "oklch":
|
|
110
|
+
return `oklch(${c1} ${c2} ${c3} / ${alpha})`;
|
|
111
|
+
// Fall back to color() function for less common color spaces
|
|
112
|
+
case "p3":
|
|
113
|
+
case "srgb-linear":
|
|
114
|
+
case "a98rgb":
|
|
115
|
+
case "prophoto":
|
|
116
|
+
case "rec2020":
|
|
117
|
+
case "xyz-d65":
|
|
118
|
+
case "xyz-d50":
|
|
119
|
+
default:
|
|
120
|
+
return `color(${value.colorSpace} ${c1} ${c2} ${c3} / ${alpha})`;
|
|
121
|
+
}
|
|
88
122
|
}
|
|
89
123
|
if (value.type === "image") {
|
|
90
124
|
if (value.hidden || value.value.type !== "url") {
|
|
@@ -170,6 +204,29 @@ var RgbValue = z.object({
|
|
|
170
204
|
alpha: z.number(),
|
|
171
205
|
hidden: z.boolean().optional()
|
|
172
206
|
});
|
|
207
|
+
var ColorValue = z.object({
|
|
208
|
+
type: z.literal("color"),
|
|
209
|
+
// all these color spaces are defined by design tokens specification
|
|
210
|
+
colorSpace: z.union([
|
|
211
|
+
z.literal("srgb"),
|
|
212
|
+
z.literal("p3"),
|
|
213
|
+
z.literal("srgb-linear"),
|
|
214
|
+
z.literal("hsl"),
|
|
215
|
+
z.literal("hwb"),
|
|
216
|
+
z.literal("lab"),
|
|
217
|
+
z.literal("lch"),
|
|
218
|
+
z.literal("oklab"),
|
|
219
|
+
z.literal("oklch"),
|
|
220
|
+
z.literal("a98rgb"),
|
|
221
|
+
z.literal("prophoto"),
|
|
222
|
+
z.literal("rec2020"),
|
|
223
|
+
z.literal("xyz-d65"),
|
|
224
|
+
z.literal("xyz-d50")
|
|
225
|
+
]),
|
|
226
|
+
components: z.tuple([z.number(), z.number(), z.number()]),
|
|
227
|
+
alpha: z.number(),
|
|
228
|
+
hidden: z.boolean().optional()
|
|
229
|
+
});
|
|
173
230
|
var FunctionValue = z.object({
|
|
174
231
|
type: z.literal("function"),
|
|
175
232
|
name: z.string(),
|
|
@@ -205,10 +262,11 @@ var VarFallback = z.union([
|
|
|
205
262
|
UnparsedValue,
|
|
206
263
|
KeywordValue,
|
|
207
264
|
UnitValue,
|
|
265
|
+
ColorValue,
|
|
208
266
|
RgbValue
|
|
209
267
|
]);
|
|
210
268
|
var toVarFallback = (styleValue, transformValue) => {
|
|
211
|
-
if (styleValue.type === "unparsed" || styleValue.type === "keyword" || styleValue.type === "unit" || styleValue.type === "rgb") {
|
|
269
|
+
if (styleValue.type === "unparsed" || styleValue.type === "keyword" || styleValue.type === "unit" || styleValue.type === "color" || styleValue.type === "rgb") {
|
|
212
270
|
return styleValue;
|
|
213
271
|
}
|
|
214
272
|
styleValue;
|
|
@@ -225,6 +283,7 @@ var TupleValueItem = z.union([
|
|
|
225
283
|
KeywordValue,
|
|
226
284
|
UnparsedValue,
|
|
227
285
|
ImageValue,
|
|
286
|
+
ColorValue,
|
|
228
287
|
RgbValue,
|
|
229
288
|
FunctionValue,
|
|
230
289
|
VarValue
|
|
@@ -242,7 +301,7 @@ var ShadowValue = z.object({
|
|
|
242
301
|
offsetY: z.union([UnitValue, VarValue]),
|
|
243
302
|
blur: z.union([UnitValue, VarValue]).optional(),
|
|
244
303
|
spread: z.union([UnitValue, VarValue]).optional(),
|
|
245
|
-
color: z.union([RgbValue, KeywordValue, VarValue]).optional()
|
|
304
|
+
color: z.union([ColorValue, RgbValue, KeywordValue, VarValue]).optional()
|
|
246
305
|
});
|
|
247
306
|
var LayerValueItem = z.union([
|
|
248
307
|
UnitValue,
|
|
@@ -251,6 +310,7 @@ var LayerValueItem = z.union([
|
|
|
251
310
|
ImageValue,
|
|
252
311
|
TupleValue,
|
|
253
312
|
ShadowValue,
|
|
313
|
+
ColorValue,
|
|
254
314
|
RgbValue,
|
|
255
315
|
InvalidValue,
|
|
256
316
|
FunctionValue,
|
|
@@ -267,6 +327,7 @@ var StyleValue = z.union([
|
|
|
267
327
|
UnitValue,
|
|
268
328
|
KeywordValue,
|
|
269
329
|
FontFamilyValue,
|
|
330
|
+
ColorValue,
|
|
270
331
|
RgbValue,
|
|
271
332
|
UnparsedValue,
|
|
272
333
|
TupleValue,
|
|
@@ -959,6 +1020,7 @@ var generateAtomic = (sheet, options) => {
|
|
|
959
1020
|
return { cssText, classes };
|
|
960
1021
|
};
|
|
961
1022
|
export {
|
|
1023
|
+
ColorValue,
|
|
962
1024
|
FunctionValue,
|
|
963
1025
|
GuaranteedInvalidValue,
|
|
964
1026
|
ImageValue,
|
package/lib/runtime.js
CHANGED
|
@@ -57,7 +57,41 @@ var toValue = (styleValue, transformValue) => {
|
|
|
57
57
|
return value.value;
|
|
58
58
|
}
|
|
59
59
|
if (value.type === "rgb") {
|
|
60
|
-
return `
|
|
60
|
+
return `rgb(${value.r} ${value.g} ${value.b} / ${value.alpha})`;
|
|
61
|
+
}
|
|
62
|
+
if (value.type === "color") {
|
|
63
|
+
let [c1, c2, c3] = value.components;
|
|
64
|
+
const alpha = value.alpha;
|
|
65
|
+
switch (value.colorSpace) {
|
|
66
|
+
case "srgb": {
|
|
67
|
+
c1 = Math.round(c1 * 255);
|
|
68
|
+
c2 = Math.round(c2 * 255);
|
|
69
|
+
c3 = Math.round(c3 * 255);
|
|
70
|
+
return `rgb(${c1} ${c2} ${c3} / ${alpha})`;
|
|
71
|
+
}
|
|
72
|
+
case "hsl":
|
|
73
|
+
return `hsl(${c1} ${c2}% ${c3}% / ${alpha})`;
|
|
74
|
+
case "hwb":
|
|
75
|
+
return `hwb(${c1} ${c2}% ${c3}% / ${alpha})`;
|
|
76
|
+
case "lab":
|
|
77
|
+
return `lab(${c1}% ${c2} ${c3} / ${alpha})`;
|
|
78
|
+
case "lch":
|
|
79
|
+
return `lch(${c1}% ${c2} ${c3} / ${alpha})`;
|
|
80
|
+
case "oklab":
|
|
81
|
+
return `oklab(${c1} ${c2} ${c3} / ${alpha})`;
|
|
82
|
+
case "oklch":
|
|
83
|
+
return `oklch(${c1} ${c2} ${c3} / ${alpha})`;
|
|
84
|
+
// Fall back to color() function for less common color spaces
|
|
85
|
+
case "p3":
|
|
86
|
+
case "srgb-linear":
|
|
87
|
+
case "a98rgb":
|
|
88
|
+
case "prophoto":
|
|
89
|
+
case "rec2020":
|
|
90
|
+
case "xyz-d65":
|
|
91
|
+
case "xyz-d50":
|
|
92
|
+
default:
|
|
93
|
+
return `color(${value.colorSpace} ${c1} ${c2} ${c3} / ${alpha})`;
|
|
94
|
+
}
|
|
61
95
|
}
|
|
62
96
|
if (value.type === "image") {
|
|
63
97
|
if (value.hidden || value.value.type !== "url") {
|
|
@@ -23,12 +23,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
23
23
|
value: string;
|
|
24
24
|
type: "unparsed";
|
|
25
25
|
hidden?: boolean | undefined;
|
|
26
|
+
} | {
|
|
27
|
+
type: "color";
|
|
28
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
29
|
+
components: [number, number, number];
|
|
30
|
+
alpha: number;
|
|
31
|
+
hidden?: boolean | undefined;
|
|
26
32
|
} | {
|
|
27
33
|
r: number;
|
|
28
34
|
type: "rgb";
|
|
35
|
+
alpha: number;
|
|
29
36
|
g: number;
|
|
30
37
|
b: number;
|
|
31
|
-
alpha: number;
|
|
32
38
|
hidden?: boolean | undefined;
|
|
33
39
|
} | {
|
|
34
40
|
type: "function";
|
|
@@ -51,12 +57,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
51
57
|
value: string;
|
|
52
58
|
type: "unparsed";
|
|
53
59
|
hidden?: boolean | undefined;
|
|
60
|
+
} | {
|
|
61
|
+
type: "color";
|
|
62
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
63
|
+
components: [number, number, number];
|
|
64
|
+
alpha: number;
|
|
65
|
+
hidden?: boolean | undefined;
|
|
54
66
|
} | {
|
|
55
67
|
r: number;
|
|
56
68
|
type: "rgb";
|
|
69
|
+
alpha: number;
|
|
57
70
|
g: number;
|
|
58
71
|
b: number;
|
|
59
|
-
alpha: number;
|
|
60
72
|
hidden?: boolean | undefined;
|
|
61
73
|
} | undefined;
|
|
62
74
|
hidden?: boolean | undefined;
|
|
@@ -84,12 +96,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
84
96
|
value: string;
|
|
85
97
|
type: "unparsed";
|
|
86
98
|
hidden?: boolean | undefined;
|
|
99
|
+
} | {
|
|
100
|
+
type: "color";
|
|
101
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
102
|
+
components: [number, number, number];
|
|
103
|
+
alpha: number;
|
|
104
|
+
hidden?: boolean | undefined;
|
|
87
105
|
} | {
|
|
88
106
|
r: number;
|
|
89
107
|
type: "rgb";
|
|
108
|
+
alpha: number;
|
|
90
109
|
g: number;
|
|
91
110
|
b: number;
|
|
92
|
-
alpha: number;
|
|
93
111
|
hidden?: boolean | undefined;
|
|
94
112
|
} | {
|
|
95
113
|
type: "function";
|
|
@@ -112,12 +130,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
112
130
|
value: string;
|
|
113
131
|
type: "unparsed";
|
|
114
132
|
hidden?: boolean | undefined;
|
|
133
|
+
} | {
|
|
134
|
+
type: "color";
|
|
135
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
136
|
+
components: [number, number, number];
|
|
137
|
+
alpha: number;
|
|
138
|
+
hidden?: boolean | undefined;
|
|
115
139
|
} | {
|
|
116
140
|
r: number;
|
|
117
141
|
type: "rgb";
|
|
142
|
+
alpha: number;
|
|
118
143
|
g: number;
|
|
119
144
|
b: number;
|
|
120
|
-
alpha: number;
|
|
121
145
|
hidden?: boolean | undefined;
|
|
122
146
|
} | undefined;
|
|
123
147
|
hidden?: boolean | undefined;
|
|
@@ -148,12 +172,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
148
172
|
value: string;
|
|
149
173
|
type: "unparsed";
|
|
150
174
|
hidden?: boolean | undefined;
|
|
175
|
+
} | {
|
|
176
|
+
type: "color";
|
|
177
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
178
|
+
components: [number, number, number];
|
|
179
|
+
alpha: number;
|
|
180
|
+
hidden?: boolean | undefined;
|
|
151
181
|
} | {
|
|
152
182
|
r: number;
|
|
153
183
|
type: "rgb";
|
|
184
|
+
alpha: number;
|
|
154
185
|
g: number;
|
|
155
186
|
b: number;
|
|
156
|
-
alpha: number;
|
|
157
187
|
hidden?: boolean | undefined;
|
|
158
188
|
} | undefined;
|
|
159
189
|
hidden?: boolean | undefined;
|
|
@@ -179,12 +209,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
179
209
|
value: string;
|
|
180
210
|
type: "unparsed";
|
|
181
211
|
hidden?: boolean | undefined;
|
|
212
|
+
} | {
|
|
213
|
+
type: "color";
|
|
214
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
215
|
+
components: [number, number, number];
|
|
216
|
+
alpha: number;
|
|
217
|
+
hidden?: boolean | undefined;
|
|
182
218
|
} | {
|
|
183
219
|
r: number;
|
|
184
220
|
type: "rgb";
|
|
221
|
+
alpha: number;
|
|
185
222
|
g: number;
|
|
186
223
|
b: number;
|
|
187
|
-
alpha: number;
|
|
188
224
|
hidden?: boolean | undefined;
|
|
189
225
|
} | undefined;
|
|
190
226
|
hidden?: boolean | undefined;
|
|
@@ -193,12 +229,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
193
229
|
value: string;
|
|
194
230
|
type: "keyword";
|
|
195
231
|
hidden?: boolean | undefined;
|
|
232
|
+
} | {
|
|
233
|
+
type: "color";
|
|
234
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
235
|
+
components: [number, number, number];
|
|
236
|
+
alpha: number;
|
|
237
|
+
hidden?: boolean | undefined;
|
|
196
238
|
} | {
|
|
197
239
|
r: number;
|
|
198
240
|
type: "rgb";
|
|
241
|
+
alpha: number;
|
|
199
242
|
g: number;
|
|
200
243
|
b: number;
|
|
201
|
-
alpha: number;
|
|
202
244
|
hidden?: boolean | undefined;
|
|
203
245
|
} | {
|
|
204
246
|
value: string;
|
|
@@ -216,12 +258,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
216
258
|
value: string;
|
|
217
259
|
type: "unparsed";
|
|
218
260
|
hidden?: boolean | undefined;
|
|
261
|
+
} | {
|
|
262
|
+
type: "color";
|
|
263
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
264
|
+
components: [number, number, number];
|
|
265
|
+
alpha: number;
|
|
266
|
+
hidden?: boolean | undefined;
|
|
219
267
|
} | {
|
|
220
268
|
r: number;
|
|
221
269
|
type: "rgb";
|
|
270
|
+
alpha: number;
|
|
222
271
|
g: number;
|
|
223
272
|
b: number;
|
|
224
|
-
alpha: number;
|
|
225
273
|
hidden?: boolean | undefined;
|
|
226
274
|
} | undefined;
|
|
227
275
|
hidden?: boolean | undefined;
|
|
@@ -248,12 +296,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
248
296
|
value: string;
|
|
249
297
|
type: "unparsed";
|
|
250
298
|
hidden?: boolean | undefined;
|
|
299
|
+
} | {
|
|
300
|
+
type: "color";
|
|
301
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
302
|
+
components: [number, number, number];
|
|
303
|
+
alpha: number;
|
|
304
|
+
hidden?: boolean | undefined;
|
|
251
305
|
} | {
|
|
252
306
|
r: number;
|
|
253
307
|
type: "rgb";
|
|
308
|
+
alpha: number;
|
|
254
309
|
g: number;
|
|
255
310
|
b: number;
|
|
256
|
-
alpha: number;
|
|
257
311
|
hidden?: boolean | undefined;
|
|
258
312
|
} | undefined;
|
|
259
313
|
hidden?: boolean | undefined;
|
|
@@ -279,12 +333,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
279
333
|
value: string;
|
|
280
334
|
type: "unparsed";
|
|
281
335
|
hidden?: boolean | undefined;
|
|
336
|
+
} | {
|
|
337
|
+
type: "color";
|
|
338
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
339
|
+
components: [number, number, number];
|
|
340
|
+
alpha: number;
|
|
341
|
+
hidden?: boolean | undefined;
|
|
282
342
|
} | {
|
|
283
343
|
r: number;
|
|
284
344
|
type: "rgb";
|
|
345
|
+
alpha: number;
|
|
285
346
|
g: number;
|
|
286
347
|
b: number;
|
|
287
|
-
alpha: number;
|
|
288
348
|
hidden?: boolean | undefined;
|
|
289
349
|
} | undefined;
|
|
290
350
|
hidden?: boolean | undefined;
|
|
@@ -317,12 +377,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
317
377
|
value: string;
|
|
318
378
|
type: "unparsed";
|
|
319
379
|
hidden?: boolean | undefined;
|
|
380
|
+
} | {
|
|
381
|
+
type: "color";
|
|
382
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
383
|
+
components: [number, number, number];
|
|
384
|
+
alpha: number;
|
|
385
|
+
hidden?: boolean | undefined;
|
|
320
386
|
} | {
|
|
321
387
|
r: number;
|
|
322
388
|
type: "rgb";
|
|
389
|
+
alpha: number;
|
|
323
390
|
g: number;
|
|
324
391
|
b: number;
|
|
325
|
-
alpha: number;
|
|
326
392
|
hidden?: boolean | undefined;
|
|
327
393
|
} | {
|
|
328
394
|
type: "function";
|
|
@@ -345,12 +411,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
345
411
|
value: string;
|
|
346
412
|
type: "unparsed";
|
|
347
413
|
hidden?: boolean | undefined;
|
|
414
|
+
} | {
|
|
415
|
+
type: "color";
|
|
416
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
417
|
+
components: [number, number, number];
|
|
418
|
+
alpha: number;
|
|
419
|
+
hidden?: boolean | undefined;
|
|
348
420
|
} | {
|
|
349
421
|
r: number;
|
|
350
422
|
type: "rgb";
|
|
423
|
+
alpha: number;
|
|
351
424
|
g: number;
|
|
352
425
|
b: number;
|
|
353
|
-
alpha: number;
|
|
354
426
|
hidden?: boolean | undefined;
|
|
355
427
|
} | undefined;
|
|
356
428
|
hidden?: boolean | undefined;
|
|
@@ -378,12 +450,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
378
450
|
value: string;
|
|
379
451
|
type: "unparsed";
|
|
380
452
|
hidden?: boolean | undefined;
|
|
453
|
+
} | {
|
|
454
|
+
type: "color";
|
|
455
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
456
|
+
components: [number, number, number];
|
|
457
|
+
alpha: number;
|
|
458
|
+
hidden?: boolean | undefined;
|
|
381
459
|
} | {
|
|
382
460
|
r: number;
|
|
383
461
|
type: "rgb";
|
|
462
|
+
alpha: number;
|
|
384
463
|
g: number;
|
|
385
464
|
b: number;
|
|
386
|
-
alpha: number;
|
|
387
465
|
hidden?: boolean | undefined;
|
|
388
466
|
} | {
|
|
389
467
|
type: "function";
|
|
@@ -406,12 +484,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
406
484
|
value: string;
|
|
407
485
|
type: "unparsed";
|
|
408
486
|
hidden?: boolean | undefined;
|
|
487
|
+
} | {
|
|
488
|
+
type: "color";
|
|
489
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
490
|
+
components: [number, number, number];
|
|
491
|
+
alpha: number;
|
|
492
|
+
hidden?: boolean | undefined;
|
|
409
493
|
} | {
|
|
410
494
|
r: number;
|
|
411
495
|
type: "rgb";
|
|
496
|
+
alpha: number;
|
|
412
497
|
g: number;
|
|
413
498
|
b: number;
|
|
414
|
-
alpha: number;
|
|
415
499
|
hidden?: boolean | undefined;
|
|
416
500
|
} | undefined;
|
|
417
501
|
hidden?: boolean | undefined;
|
|
@@ -442,12 +526,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
442
526
|
value: string;
|
|
443
527
|
type: "unparsed";
|
|
444
528
|
hidden?: boolean | undefined;
|
|
529
|
+
} | {
|
|
530
|
+
type: "color";
|
|
531
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
532
|
+
components: [number, number, number];
|
|
533
|
+
alpha: number;
|
|
534
|
+
hidden?: boolean | undefined;
|
|
445
535
|
} | {
|
|
446
536
|
r: number;
|
|
447
537
|
type: "rgb";
|
|
538
|
+
alpha: number;
|
|
448
539
|
g: number;
|
|
449
540
|
b: number;
|
|
450
|
-
alpha: number;
|
|
451
541
|
hidden?: boolean | undefined;
|
|
452
542
|
} | undefined;
|
|
453
543
|
hidden?: boolean | undefined;
|
|
@@ -473,12 +563,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
473
563
|
value: string;
|
|
474
564
|
type: "unparsed";
|
|
475
565
|
hidden?: boolean | undefined;
|
|
566
|
+
} | {
|
|
567
|
+
type: "color";
|
|
568
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
569
|
+
components: [number, number, number];
|
|
570
|
+
alpha: number;
|
|
571
|
+
hidden?: boolean | undefined;
|
|
476
572
|
} | {
|
|
477
573
|
r: number;
|
|
478
574
|
type: "rgb";
|
|
575
|
+
alpha: number;
|
|
479
576
|
g: number;
|
|
480
577
|
b: number;
|
|
481
|
-
alpha: number;
|
|
482
578
|
hidden?: boolean | undefined;
|
|
483
579
|
} | undefined;
|
|
484
580
|
hidden?: boolean | undefined;
|
|
@@ -487,12 +583,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
487
583
|
value: string;
|
|
488
584
|
type: "keyword";
|
|
489
585
|
hidden?: boolean | undefined;
|
|
586
|
+
} | {
|
|
587
|
+
type: "color";
|
|
588
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
589
|
+
components: [number, number, number];
|
|
590
|
+
alpha: number;
|
|
591
|
+
hidden?: boolean | undefined;
|
|
490
592
|
} | {
|
|
491
593
|
r: number;
|
|
492
594
|
type: "rgb";
|
|
595
|
+
alpha: number;
|
|
493
596
|
g: number;
|
|
494
597
|
b: number;
|
|
495
|
-
alpha: number;
|
|
496
598
|
hidden?: boolean | undefined;
|
|
497
599
|
} | {
|
|
498
600
|
value: string;
|
|
@@ -510,12 +612,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
510
612
|
value: string;
|
|
511
613
|
type: "unparsed";
|
|
512
614
|
hidden?: boolean | undefined;
|
|
615
|
+
} | {
|
|
616
|
+
type: "color";
|
|
617
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
618
|
+
components: [number, number, number];
|
|
619
|
+
alpha: number;
|
|
620
|
+
hidden?: boolean | undefined;
|
|
513
621
|
} | {
|
|
514
622
|
r: number;
|
|
515
623
|
type: "rgb";
|
|
624
|
+
alpha: number;
|
|
516
625
|
g: number;
|
|
517
626
|
b: number;
|
|
518
|
-
alpha: number;
|
|
519
627
|
hidden?: boolean | undefined;
|
|
520
628
|
} | undefined;
|
|
521
629
|
hidden?: boolean | undefined;
|
|
@@ -542,12 +650,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
542
650
|
value: string;
|
|
543
651
|
type: "unparsed";
|
|
544
652
|
hidden?: boolean | undefined;
|
|
653
|
+
} | {
|
|
654
|
+
type: "color";
|
|
655
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
656
|
+
components: [number, number, number];
|
|
657
|
+
alpha: number;
|
|
658
|
+
hidden?: boolean | undefined;
|
|
545
659
|
} | {
|
|
546
660
|
r: number;
|
|
547
661
|
type: "rgb";
|
|
662
|
+
alpha: number;
|
|
548
663
|
g: number;
|
|
549
664
|
b: number;
|
|
550
|
-
alpha: number;
|
|
551
665
|
hidden?: boolean | undefined;
|
|
552
666
|
} | undefined;
|
|
553
667
|
hidden?: boolean | undefined;
|
|
@@ -573,12 +687,18 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
573
687
|
value: string;
|
|
574
688
|
type: "unparsed";
|
|
575
689
|
hidden?: boolean | undefined;
|
|
690
|
+
} | {
|
|
691
|
+
type: "color";
|
|
692
|
+
colorSpace: "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
693
|
+
components: [number, number, number];
|
|
694
|
+
alpha: number;
|
|
695
|
+
hidden?: boolean | undefined;
|
|
576
696
|
} | {
|
|
577
697
|
r: number;
|
|
578
698
|
type: "rgb";
|
|
699
|
+
alpha: number;
|
|
579
700
|
g: number;
|
|
580
701
|
b: number;
|
|
581
|
-
alpha: number;
|
|
582
702
|
hidden?: boolean | undefined;
|
|
583
703
|
} | undefined;
|
|
584
704
|
hidden?: boolean | undefined;
|