@webstudio-is/css-engine 0.255.0 → 0.258.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 +139 -8
- package/lib/runtime.js +13 -3
- package/lib/types/color.d.ts +14 -0
- package/lib/types/color.test.d.ts +1 -0
- package/lib/types/core/css-engine.stories.d.ts +1 -1
- package/lib/types/core/merger.d.ts +40 -160
- package/lib/types/index.d.ts +1 -0
- package/lib/types/schema.d.ts +551 -2651
- package/package.json +5 -3
package/lib/index.js
CHANGED
|
@@ -88,8 +88,14 @@ var toValue = (styleValue, transformValue) => {
|
|
|
88
88
|
}
|
|
89
89
|
if (value.type === "color") {
|
|
90
90
|
let [c1, c2, c3] = value.components;
|
|
91
|
-
const alpha = value.alpha;
|
|
91
|
+
const alpha = typeof value.alpha === "number" ? value.alpha : toValue(value.alpha);
|
|
92
92
|
switch (value.colorSpace) {
|
|
93
|
+
case "hex": {
|
|
94
|
+
const toHex = (v) => Math.round(Math.min(Math.max(v, 0), 1) * 255).toString(16).padStart(2, "0");
|
|
95
|
+
const hex = `#${toHex(c1)}${toHex(c2)}${toHex(c3)}`;
|
|
96
|
+
const alphaNum = typeof alpha === "number" ? alpha : 1;
|
|
97
|
+
return alphaNum < 1 ? hex + toHex(alphaNum) : hex;
|
|
98
|
+
}
|
|
93
99
|
case "srgb": {
|
|
94
100
|
c1 = Math.round(c1 * 255);
|
|
95
101
|
c2 = Math.round(c2 * 255);
|
|
@@ -108,11 +114,15 @@ var toValue = (styleValue, transformValue) => {
|
|
|
108
114
|
return `oklab(${c1} ${c2} ${c3} / ${alpha})`;
|
|
109
115
|
case "oklch":
|
|
110
116
|
return `oklch(${c1} ${c2} ${c3} / ${alpha})`;
|
|
111
|
-
// Fall back to color() function for less common color spaces
|
|
117
|
+
// Fall back to color() function for less common color spaces.
|
|
118
|
+
// colorjs uses internal short names that differ from CSS predefined color space identifiers.
|
|
112
119
|
case "p3":
|
|
113
|
-
|
|
120
|
+
return `color(display-p3 ${c1} ${c2} ${c3} / ${alpha})`;
|
|
114
121
|
case "a98rgb":
|
|
122
|
+
return `color(a98-rgb ${c1} ${c2} ${c3} / ${alpha})`;
|
|
115
123
|
case "prophoto":
|
|
124
|
+
return `color(prophoto-rgb ${c1} ${c2} ${c3} / ${alpha})`;
|
|
125
|
+
case "srgb-linear":
|
|
116
126
|
case "rec2020":
|
|
117
127
|
case "xyz-d65":
|
|
118
128
|
case "xyz-d50":
|
|
@@ -208,6 +218,7 @@ var ColorValue = z.object({
|
|
|
208
218
|
type: z.literal("color"),
|
|
209
219
|
// all these color spaces are defined by design tokens specification
|
|
210
220
|
colorSpace: z.union([
|
|
221
|
+
z.literal("hex"),
|
|
211
222
|
z.literal("srgb"),
|
|
212
223
|
z.literal("p3"),
|
|
213
224
|
z.literal("srgb-linear"),
|
|
@@ -224,7 +235,7 @@ var ColorValue = z.object({
|
|
|
224
235
|
z.literal("xyz-d50")
|
|
225
236
|
]),
|
|
226
237
|
components: z.tuple([z.number(), z.number(), z.number()]),
|
|
227
|
-
alpha: z.number(),
|
|
238
|
+
alpha: z.union([z.number(), z.lazy(() => VarValue)]),
|
|
228
239
|
hidden: z.boolean().optional()
|
|
229
240
|
});
|
|
230
241
|
var FunctionValue = z.object({
|
|
@@ -367,12 +378,12 @@ var isLonghandValue = (value) => {
|
|
|
367
378
|
var mergeBorder = (styleMap, base) => {
|
|
368
379
|
const width = styleMap.get(`${base}-width`);
|
|
369
380
|
const style = styleMap.get(`${base}-style`);
|
|
370
|
-
const
|
|
371
|
-
if (isLonghandValue(width) && isLonghandValue(style) && isLonghandValue(
|
|
381
|
+
const color2 = styleMap.get(`${base}-color`);
|
|
382
|
+
if (isLonghandValue(width) && isLonghandValue(style) && isLonghandValue(color2)) {
|
|
372
383
|
styleMap.delete(`${base}-width`);
|
|
373
384
|
styleMap.delete(`${base}-style`);
|
|
374
385
|
styleMap.delete(`${base}-color`);
|
|
375
|
-
styleMap.set(base, { type: "tuple", value: [width, style,
|
|
386
|
+
styleMap.set(base, { type: "tuple", value: [width, style, color2] });
|
|
376
387
|
}
|
|
377
388
|
};
|
|
378
389
|
var mergeBox = (styleMap, base) => {
|
|
@@ -1054,6 +1065,116 @@ var generateAtomic = (sheet, options) => {
|
|
|
1054
1065
|
});
|
|
1055
1066
|
return { cssText, classes };
|
|
1056
1067
|
};
|
|
1068
|
+
|
|
1069
|
+
// src/color.ts
|
|
1070
|
+
import * as colorjs from "colorjs.io/fn";
|
|
1071
|
+
colorjs.ColorSpace.register(colorjs.sRGB);
|
|
1072
|
+
colorjs.ColorSpace.register(colorjs.sRGB_Linear);
|
|
1073
|
+
colorjs.ColorSpace.register(colorjs.HSL);
|
|
1074
|
+
colorjs.ColorSpace.register(colorjs.HWB);
|
|
1075
|
+
colorjs.ColorSpace.register(colorjs.Lab);
|
|
1076
|
+
colorjs.ColorSpace.register(colorjs.LCH);
|
|
1077
|
+
colorjs.ColorSpace.register(colorjs.OKLab);
|
|
1078
|
+
colorjs.ColorSpace.register(colorjs.OKLCH);
|
|
1079
|
+
colorjs.ColorSpace.register(colorjs.P3);
|
|
1080
|
+
colorjs.ColorSpace.register(colorjs.A98RGB);
|
|
1081
|
+
colorjs.ColorSpace.register(colorjs.ProPhoto);
|
|
1082
|
+
colorjs.ColorSpace.register(colorjs.REC_2020);
|
|
1083
|
+
colorjs.ColorSpace.register(colorjs.XYZ_D65);
|
|
1084
|
+
colorjs.ColorSpace.register(colorjs.XYZ_D50);
|
|
1085
|
+
colorjs.ColorSpace.registry["display-p3"] = colorjs.P3;
|
|
1086
|
+
colorjs.ColorSpace.registry["a98-rgb"] = colorjs.A98RGB;
|
|
1087
|
+
colorjs.ColorSpace.registry["prophoto-rgb"] = colorjs.ProPhoto;
|
|
1088
|
+
var color = colorjs;
|
|
1089
|
+
var registeredSpaces = /* @__PURE__ */ new Map([
|
|
1090
|
+
[colorjs.sRGB, "srgb"],
|
|
1091
|
+
[colorjs.sRGB_Linear, "srgb-linear"],
|
|
1092
|
+
[colorjs.HSL, "hsl"],
|
|
1093
|
+
[colorjs.HWB, "hwb"],
|
|
1094
|
+
[colorjs.Lab, "lab"],
|
|
1095
|
+
[colorjs.LCH, "lch"],
|
|
1096
|
+
[colorjs.OKLab, "oklab"],
|
|
1097
|
+
[colorjs.OKLCH, "oklch"],
|
|
1098
|
+
[colorjs.P3, "p3"],
|
|
1099
|
+
[colorjs.A98RGB, "a98rgb"],
|
|
1100
|
+
[colorjs.ProPhoto, "prophoto"],
|
|
1101
|
+
[colorjs.REC_2020, "rec2020"],
|
|
1102
|
+
[colorjs.XYZ_D65, "xyz-d65"],
|
|
1103
|
+
[colorjs.XYZ_D50, "xyz-d50"]
|
|
1104
|
+
]);
|
|
1105
|
+
var toColorSpace = (space) => {
|
|
1106
|
+
const id = registeredSpaces.get(space);
|
|
1107
|
+
if (id === void 0) {
|
|
1108
|
+
throw new Error(`Unregistered color space: ${space.id}`);
|
|
1109
|
+
}
|
|
1110
|
+
return id;
|
|
1111
|
+
};
|
|
1112
|
+
var toColorComponent = (value) => Math.round((value ?? 0) * 1e4) / 1e4;
|
|
1113
|
+
var srgbColor = (r, g, b, alpha = 1) => ({
|
|
1114
|
+
space: colorjs.sRGB,
|
|
1115
|
+
coords: [r, g, b],
|
|
1116
|
+
alpha
|
|
1117
|
+
});
|
|
1118
|
+
var transparentColor = srgbColor(0, 0, 0, 0);
|
|
1119
|
+
var whiteColor = srgbColor(1, 1, 1, 1);
|
|
1120
|
+
var resolveColorViaCanvas = (colorString) => {
|
|
1121
|
+
if (typeof document === "undefined") {
|
|
1122
|
+
return;
|
|
1123
|
+
}
|
|
1124
|
+
const canvas = document.createElement("canvas");
|
|
1125
|
+
canvas.width = 1;
|
|
1126
|
+
canvas.height = 1;
|
|
1127
|
+
const ctx = canvas.getContext("2d");
|
|
1128
|
+
if (!ctx) {
|
|
1129
|
+
return;
|
|
1130
|
+
}
|
|
1131
|
+
ctx.fillStyle = colorString;
|
|
1132
|
+
ctx.fillRect(0, 0, 1, 1);
|
|
1133
|
+
const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
|
|
1134
|
+
return srgbColor(
|
|
1135
|
+
(r ?? 0) / 255,
|
|
1136
|
+
(g ?? 0) / 255,
|
|
1137
|
+
(b ?? 0) / 255,
|
|
1138
|
+
(a ?? 255) / 255
|
|
1139
|
+
);
|
|
1140
|
+
};
|
|
1141
|
+
var parseColor = (cssString) => {
|
|
1142
|
+
try {
|
|
1143
|
+
return colorjs.to(cssString, "srgb");
|
|
1144
|
+
} catch {
|
|
1145
|
+
return resolveColorViaCanvas(cssString) ?? transparentColor;
|
|
1146
|
+
}
|
|
1147
|
+
};
|
|
1148
|
+
var colorDistance = (a, b) => {
|
|
1149
|
+
const [ar, ag, ab] = a.coords;
|
|
1150
|
+
const [br, bg, bb] = b.coords;
|
|
1151
|
+
return Math.sqrt(
|
|
1152
|
+
((ar ?? 0) - (br ?? 0)) ** 2 + ((ag ?? 0) - (bg ?? 0)) ** 2 + ((ab ?? 0) - (bb ?? 0)) ** 2 + ((a.alpha ?? 1) - (b.alpha ?? 1)) ** 2
|
|
1153
|
+
);
|
|
1154
|
+
};
|
|
1155
|
+
var lerpColor = (a, b, ratio) => {
|
|
1156
|
+
const lerp = (start, end, t) => start * (1 - t) + end * t;
|
|
1157
|
+
return {
|
|
1158
|
+
space: a.space,
|
|
1159
|
+
coords: [
|
|
1160
|
+
lerp(a.coords[0] ?? 0, b.coords[0] ?? 0, ratio),
|
|
1161
|
+
lerp(a.coords[1] ?? 0, b.coords[1] ?? 0, ratio),
|
|
1162
|
+
lerp(a.coords[2] ?? 0, b.coords[2] ?? 0, ratio)
|
|
1163
|
+
],
|
|
1164
|
+
alpha: lerp(a.alpha ?? 1, b.alpha ?? 1, ratio)
|
|
1165
|
+
};
|
|
1166
|
+
};
|
|
1167
|
+
var serializeColor = (color2) => {
|
|
1168
|
+
const [r, g, b] = color2.coords;
|
|
1169
|
+
const red = Math.round((r ?? 0) * 255);
|
|
1170
|
+
const green = Math.round((g ?? 0) * 255);
|
|
1171
|
+
const blue = Math.round((b ?? 0) * 255);
|
|
1172
|
+
const alpha = color2.alpha ?? 1;
|
|
1173
|
+
if (alpha < 1) {
|
|
1174
|
+
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
|
|
1175
|
+
}
|
|
1176
|
+
return `rgb(${red}, ${green}, ${blue})`;
|
|
1177
|
+
};
|
|
1057
1178
|
export {
|
|
1058
1179
|
ColorValue,
|
|
1059
1180
|
FakeStyleElement,
|
|
@@ -1070,6 +1191,8 @@ export {
|
|
|
1070
1191
|
UnitValue,
|
|
1071
1192
|
UnparsedValue,
|
|
1072
1193
|
VarFallback,
|
|
1194
|
+
color,
|
|
1195
|
+
colorDistance,
|
|
1073
1196
|
compareMedia,
|
|
1074
1197
|
createRegularStyleSheet,
|
|
1075
1198
|
cssWideKeywords,
|
|
@@ -1078,9 +1201,17 @@ export {
|
|
|
1078
1201
|
generateAtomic,
|
|
1079
1202
|
generateStyleMap,
|
|
1080
1203
|
hyphenateProperty,
|
|
1204
|
+
lerpColor,
|
|
1081
1205
|
matchMedia,
|
|
1082
1206
|
mergeStyles,
|
|
1207
|
+
parseColor,
|
|
1083
1208
|
prefixStyles,
|
|
1209
|
+
serializeColor,
|
|
1210
|
+
srgbColor,
|
|
1211
|
+
toColorComponent,
|
|
1212
|
+
toColorSpace,
|
|
1084
1213
|
toValue,
|
|
1085
|
-
toVarFallback
|
|
1214
|
+
toVarFallback,
|
|
1215
|
+
transparentColor,
|
|
1216
|
+
whiteColor
|
|
1086
1217
|
};
|
package/lib/runtime.js
CHANGED
|
@@ -61,8 +61,14 @@ var toValue = (styleValue, transformValue) => {
|
|
|
61
61
|
}
|
|
62
62
|
if (value.type === "color") {
|
|
63
63
|
let [c1, c2, c3] = value.components;
|
|
64
|
-
const alpha = value.alpha;
|
|
64
|
+
const alpha = typeof value.alpha === "number" ? value.alpha : toValue(value.alpha);
|
|
65
65
|
switch (value.colorSpace) {
|
|
66
|
+
case "hex": {
|
|
67
|
+
const toHex = (v) => Math.round(Math.min(Math.max(v, 0), 1) * 255).toString(16).padStart(2, "0");
|
|
68
|
+
const hex = `#${toHex(c1)}${toHex(c2)}${toHex(c3)}`;
|
|
69
|
+
const alphaNum = typeof alpha === "number" ? alpha : 1;
|
|
70
|
+
return alphaNum < 1 ? hex + toHex(alphaNum) : hex;
|
|
71
|
+
}
|
|
66
72
|
case "srgb": {
|
|
67
73
|
c1 = Math.round(c1 * 255);
|
|
68
74
|
c2 = Math.round(c2 * 255);
|
|
@@ -81,11 +87,15 @@ var toValue = (styleValue, transformValue) => {
|
|
|
81
87
|
return `oklab(${c1} ${c2} ${c3} / ${alpha})`;
|
|
82
88
|
case "oklch":
|
|
83
89
|
return `oklch(${c1} ${c2} ${c3} / ${alpha})`;
|
|
84
|
-
// Fall back to color() function for less common color spaces
|
|
90
|
+
// Fall back to color() function for less common color spaces.
|
|
91
|
+
// colorjs uses internal short names that differ from CSS predefined color space identifiers.
|
|
85
92
|
case "p3":
|
|
86
|
-
|
|
93
|
+
return `color(display-p3 ${c1} ${c2} ${c3} / ${alpha})`;
|
|
87
94
|
case "a98rgb":
|
|
95
|
+
return `color(a98-rgb ${c1} ${c2} ${c3} / ${alpha})`;
|
|
88
96
|
case "prophoto":
|
|
97
|
+
return `color(prophoto-rgb ${c1} ${c2} ${c3} / ${alpha})`;
|
|
98
|
+
case "srgb-linear":
|
|
89
99
|
case "rec2020":
|
|
90
100
|
case "xyz-d65":
|
|
91
101
|
case "xyz-d50":
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as colorjs from "colorjs.io/fn";
|
|
2
|
+
export type { PlainColorObject, ColorConstructor, ColorSpace, Coords, } from "colorjs.io/fn";
|
|
3
|
+
import type { ColorSpace, PlainColorObject } from "colorjs.io/fn";
|
|
4
|
+
import type { ColorValue } from "./schema";
|
|
5
|
+
export declare const color: typeof colorjs;
|
|
6
|
+
export declare const toColorSpace: (space: ColorSpace) => ColorValue["colorSpace"];
|
|
7
|
+
export declare const toColorComponent: (value: undefined | null | number) => number;
|
|
8
|
+
export declare const srgbColor: (r: number, g: number, b: number, alpha?: number) => PlainColorObject;
|
|
9
|
+
export declare const transparentColor: import("colorjs.io/src/color.js").PlainColorObject;
|
|
10
|
+
export declare const whiteColor: import("colorjs.io/src/color.js").PlainColorObject;
|
|
11
|
+
export declare const parseColor: (cssString: string) => PlainColorObject;
|
|
12
|
+
export declare const colorDistance: (a: PlainColorObject, b: PlainColorObject) => number;
|
|
13
|
+
export declare const lerpColor: (a: PlainColorObject, b: PlainColorObject, ratio: number) => PlainColorObject;
|
|
14
|
+
export declare const serializeColor: (color: PlainColorObject) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -23,18 +23,12 @@ 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;
|
|
32
|
-
} | {
|
|
26
|
+
} | import("..").ColorValue | {
|
|
33
27
|
r: number;
|
|
34
28
|
type: "rgb";
|
|
35
|
-
alpha: number;
|
|
36
29
|
g: number;
|
|
37
30
|
b: number;
|
|
31
|
+
alpha: number;
|
|
38
32
|
hidden?: boolean | undefined;
|
|
39
33
|
} | {
|
|
40
34
|
type: "function";
|
|
@@ -57,18 +51,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
57
51
|
value: string;
|
|
58
52
|
type: "unparsed";
|
|
59
53
|
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;
|
|
66
|
-
} | {
|
|
54
|
+
} | import("..").ColorValue | {
|
|
67
55
|
r: number;
|
|
68
56
|
type: "rgb";
|
|
69
|
-
alpha: number;
|
|
70
57
|
g: number;
|
|
71
58
|
b: number;
|
|
59
|
+
alpha: number;
|
|
72
60
|
hidden?: boolean | undefined;
|
|
73
61
|
} | undefined;
|
|
74
62
|
hidden?: boolean | undefined;
|
|
@@ -96,18 +84,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
96
84
|
value: string;
|
|
97
85
|
type: "unparsed";
|
|
98
86
|
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;
|
|
105
|
-
} | {
|
|
87
|
+
} | import("..").ColorValue | {
|
|
106
88
|
r: number;
|
|
107
89
|
type: "rgb";
|
|
108
|
-
alpha: number;
|
|
109
90
|
g: number;
|
|
110
91
|
b: number;
|
|
92
|
+
alpha: number;
|
|
111
93
|
hidden?: boolean | undefined;
|
|
112
94
|
} | {
|
|
113
95
|
type: "function";
|
|
@@ -130,18 +112,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
130
112
|
value: string;
|
|
131
113
|
type: "unparsed";
|
|
132
114
|
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;
|
|
139
|
-
} | {
|
|
115
|
+
} | import("..").ColorValue | {
|
|
140
116
|
r: number;
|
|
141
117
|
type: "rgb";
|
|
142
|
-
alpha: number;
|
|
143
118
|
g: number;
|
|
144
119
|
b: number;
|
|
120
|
+
alpha: number;
|
|
145
121
|
hidden?: boolean | undefined;
|
|
146
122
|
} | undefined;
|
|
147
123
|
hidden?: boolean | undefined;
|
|
@@ -172,18 +148,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
172
148
|
value: string;
|
|
173
149
|
type: "unparsed";
|
|
174
150
|
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;
|
|
181
|
-
} | {
|
|
151
|
+
} | import("..").ColorValue | {
|
|
182
152
|
r: number;
|
|
183
153
|
type: "rgb";
|
|
184
|
-
alpha: number;
|
|
185
154
|
g: number;
|
|
186
155
|
b: number;
|
|
156
|
+
alpha: number;
|
|
187
157
|
hidden?: boolean | undefined;
|
|
188
158
|
} | undefined;
|
|
189
159
|
hidden?: boolean | undefined;
|
|
@@ -209,18 +179,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
209
179
|
value: string;
|
|
210
180
|
type: "unparsed";
|
|
211
181
|
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;
|
|
218
|
-
} | {
|
|
182
|
+
} | import("..").ColorValue | {
|
|
219
183
|
r: number;
|
|
220
184
|
type: "rgb";
|
|
221
|
-
alpha: number;
|
|
222
185
|
g: number;
|
|
223
186
|
b: number;
|
|
187
|
+
alpha: number;
|
|
224
188
|
hidden?: boolean | undefined;
|
|
225
189
|
} | undefined;
|
|
226
190
|
hidden?: boolean | undefined;
|
|
@@ -229,18 +193,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
229
193
|
value: string;
|
|
230
194
|
type: "keyword";
|
|
231
195
|
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;
|
|
238
|
-
} | {
|
|
196
|
+
} | import("..").ColorValue | {
|
|
239
197
|
r: number;
|
|
240
198
|
type: "rgb";
|
|
241
|
-
alpha: number;
|
|
242
199
|
g: number;
|
|
243
200
|
b: number;
|
|
201
|
+
alpha: number;
|
|
244
202
|
hidden?: boolean | undefined;
|
|
245
203
|
} | {
|
|
246
204
|
value: string;
|
|
@@ -258,18 +216,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
258
216
|
value: string;
|
|
259
217
|
type: "unparsed";
|
|
260
218
|
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;
|
|
267
|
-
} | {
|
|
219
|
+
} | import("..").ColorValue | {
|
|
268
220
|
r: number;
|
|
269
221
|
type: "rgb";
|
|
270
|
-
alpha: number;
|
|
271
222
|
g: number;
|
|
272
223
|
b: number;
|
|
224
|
+
alpha: number;
|
|
273
225
|
hidden?: boolean | undefined;
|
|
274
226
|
} | undefined;
|
|
275
227
|
hidden?: boolean | undefined;
|
|
@@ -296,18 +248,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
296
248
|
value: string;
|
|
297
249
|
type: "unparsed";
|
|
298
250
|
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;
|
|
305
|
-
} | {
|
|
251
|
+
} | import("..").ColorValue | {
|
|
306
252
|
r: number;
|
|
307
253
|
type: "rgb";
|
|
308
|
-
alpha: number;
|
|
309
254
|
g: number;
|
|
310
255
|
b: number;
|
|
256
|
+
alpha: number;
|
|
311
257
|
hidden?: boolean | undefined;
|
|
312
258
|
} | undefined;
|
|
313
259
|
hidden?: boolean | undefined;
|
|
@@ -333,18 +279,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
333
279
|
value: string;
|
|
334
280
|
type: "unparsed";
|
|
335
281
|
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;
|
|
342
|
-
} | {
|
|
282
|
+
} | import("..").ColorValue | {
|
|
343
283
|
r: number;
|
|
344
284
|
type: "rgb";
|
|
345
|
-
alpha: number;
|
|
346
285
|
g: number;
|
|
347
286
|
b: number;
|
|
287
|
+
alpha: number;
|
|
348
288
|
hidden?: boolean | undefined;
|
|
349
289
|
} | undefined;
|
|
350
290
|
hidden?: boolean | undefined;
|
|
@@ -377,18 +317,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
377
317
|
value: string;
|
|
378
318
|
type: "unparsed";
|
|
379
319
|
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;
|
|
386
|
-
} | {
|
|
320
|
+
} | import("..").ColorValue | {
|
|
387
321
|
r: number;
|
|
388
322
|
type: "rgb";
|
|
389
|
-
alpha: number;
|
|
390
323
|
g: number;
|
|
391
324
|
b: number;
|
|
325
|
+
alpha: number;
|
|
392
326
|
hidden?: boolean | undefined;
|
|
393
327
|
} | {
|
|
394
328
|
type: "function";
|
|
@@ -411,18 +345,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
411
345
|
value: string;
|
|
412
346
|
type: "unparsed";
|
|
413
347
|
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;
|
|
420
|
-
} | {
|
|
348
|
+
} | import("..").ColorValue | {
|
|
421
349
|
r: number;
|
|
422
350
|
type: "rgb";
|
|
423
|
-
alpha: number;
|
|
424
351
|
g: number;
|
|
425
352
|
b: number;
|
|
353
|
+
alpha: number;
|
|
426
354
|
hidden?: boolean | undefined;
|
|
427
355
|
} | undefined;
|
|
428
356
|
hidden?: boolean | undefined;
|
|
@@ -450,18 +378,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
450
378
|
value: string;
|
|
451
379
|
type: "unparsed";
|
|
452
380
|
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;
|
|
459
|
-
} | {
|
|
381
|
+
} | import("..").ColorValue | {
|
|
460
382
|
r: number;
|
|
461
383
|
type: "rgb";
|
|
462
|
-
alpha: number;
|
|
463
384
|
g: number;
|
|
464
385
|
b: number;
|
|
386
|
+
alpha: number;
|
|
465
387
|
hidden?: boolean | undefined;
|
|
466
388
|
} | {
|
|
467
389
|
type: "function";
|
|
@@ -484,18 +406,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
484
406
|
value: string;
|
|
485
407
|
type: "unparsed";
|
|
486
408
|
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;
|
|
493
|
-
} | {
|
|
409
|
+
} | import("..").ColorValue | {
|
|
494
410
|
r: number;
|
|
495
411
|
type: "rgb";
|
|
496
|
-
alpha: number;
|
|
497
412
|
g: number;
|
|
498
413
|
b: number;
|
|
414
|
+
alpha: number;
|
|
499
415
|
hidden?: boolean | undefined;
|
|
500
416
|
} | undefined;
|
|
501
417
|
hidden?: boolean | undefined;
|
|
@@ -526,18 +442,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
526
442
|
value: string;
|
|
527
443
|
type: "unparsed";
|
|
528
444
|
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;
|
|
535
|
-
} | {
|
|
445
|
+
} | import("..").ColorValue | {
|
|
536
446
|
r: number;
|
|
537
447
|
type: "rgb";
|
|
538
|
-
alpha: number;
|
|
539
448
|
g: number;
|
|
540
449
|
b: number;
|
|
450
|
+
alpha: number;
|
|
541
451
|
hidden?: boolean | undefined;
|
|
542
452
|
} | undefined;
|
|
543
453
|
hidden?: boolean | undefined;
|
|
@@ -563,18 +473,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
563
473
|
value: string;
|
|
564
474
|
type: "unparsed";
|
|
565
475
|
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;
|
|
572
|
-
} | {
|
|
476
|
+
} | import("..").ColorValue | {
|
|
573
477
|
r: number;
|
|
574
478
|
type: "rgb";
|
|
575
|
-
alpha: number;
|
|
576
479
|
g: number;
|
|
577
480
|
b: number;
|
|
481
|
+
alpha: number;
|
|
578
482
|
hidden?: boolean | undefined;
|
|
579
483
|
} | undefined;
|
|
580
484
|
hidden?: boolean | undefined;
|
|
@@ -583,18 +487,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
583
487
|
value: string;
|
|
584
488
|
type: "keyword";
|
|
585
489
|
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;
|
|
592
|
-
} | {
|
|
490
|
+
} | import("..").ColorValue | {
|
|
593
491
|
r: number;
|
|
594
492
|
type: "rgb";
|
|
595
|
-
alpha: number;
|
|
596
493
|
g: number;
|
|
597
494
|
b: number;
|
|
495
|
+
alpha: number;
|
|
598
496
|
hidden?: boolean | undefined;
|
|
599
497
|
} | {
|
|
600
498
|
value: string;
|
|
@@ -612,18 +510,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
612
510
|
value: string;
|
|
613
511
|
type: "unparsed";
|
|
614
512
|
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;
|
|
621
|
-
} | {
|
|
513
|
+
} | import("..").ColorValue | {
|
|
622
514
|
r: number;
|
|
623
515
|
type: "rgb";
|
|
624
|
-
alpha: number;
|
|
625
516
|
g: number;
|
|
626
517
|
b: number;
|
|
518
|
+
alpha: number;
|
|
627
519
|
hidden?: boolean | undefined;
|
|
628
520
|
} | undefined;
|
|
629
521
|
hidden?: boolean | undefined;
|
|
@@ -650,18 +542,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
650
542
|
value: string;
|
|
651
543
|
type: "unparsed";
|
|
652
544
|
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;
|
|
659
|
-
} | {
|
|
545
|
+
} | import("..").ColorValue | {
|
|
660
546
|
r: number;
|
|
661
547
|
type: "rgb";
|
|
662
|
-
alpha: number;
|
|
663
548
|
g: number;
|
|
664
549
|
b: number;
|
|
550
|
+
alpha: number;
|
|
665
551
|
hidden?: boolean | undefined;
|
|
666
552
|
} | undefined;
|
|
667
553
|
hidden?: boolean | undefined;
|
|
@@ -687,18 +573,12 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
687
573
|
value: string;
|
|
688
574
|
type: "unparsed";
|
|
689
575
|
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;
|
|
696
|
-
} | {
|
|
576
|
+
} | import("..").ColorValue | {
|
|
697
577
|
r: number;
|
|
698
578
|
type: "rgb";
|
|
699
|
-
alpha: number;
|
|
700
579
|
g: number;
|
|
701
580
|
b: number;
|
|
581
|
+
alpha: number;
|
|
702
582
|
hidden?: boolean | undefined;
|
|
703
583
|
} | undefined;
|
|
704
584
|
hidden?: boolean | undefined;
|