@symbo.ls/scratch 3.4.4 → 3.4.6
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/dist/cjs/defaultConfig/animation.js +24 -0
- package/dist/cjs/defaultConfig/cases.js +24 -0
- package/dist/cjs/defaultConfig/class.js +25 -0
- package/dist/cjs/defaultConfig/color.js +31 -0
- package/dist/cjs/defaultConfig/document.js +24 -0
- package/dist/cjs/defaultConfig/font-family.js +38 -0
- package/dist/cjs/defaultConfig/font.js +33 -0
- package/dist/cjs/defaultConfig/grid.js +25 -0
- package/dist/cjs/defaultConfig/icons.js +26 -0
- package/dist/cjs/defaultConfig/index.js +45 -0
- package/dist/cjs/defaultConfig/media.js +29 -0
- package/dist/cjs/defaultConfig/responsive.js +50 -0
- package/dist/cjs/defaultConfig/sequence.js +49 -0
- package/dist/cjs/defaultConfig/shadow.js +29 -0
- package/dist/cjs/defaultConfig/spacing.js +38 -0
- package/dist/cjs/defaultConfig/svg.js +26 -0
- package/dist/cjs/defaultConfig/templates.js +24 -0
- package/dist/cjs/defaultConfig/theme.js +36 -0
- package/dist/cjs/defaultConfig/timing.js +37 -0
- package/dist/cjs/defaultConfig/typography.js +41 -0
- package/dist/cjs/defaultConfig/unit.js +26 -0
- package/dist/cjs/system/color.js +203 -0
- package/dist/cjs/system/document.js +36 -0
- package/dist/cjs/system/font.js +64 -0
- package/dist/cjs/system/index.js +27 -0
- package/dist/cjs/system/reset.js +87 -0
- package/dist/cjs/system/shadow.js +107 -0
- package/dist/cjs/system/spacing.js +134 -0
- package/dist/cjs/system/svg.js +97 -0
- package/dist/cjs/system/theme.js +234 -0
- package/dist/cjs/system/timing.js +48 -0
- package/dist/cjs/system/typography.js +99 -0
- package/dist/cjs/tests/index.js +28 -0
- package/dist/cjs/transforms/index.js +219 -0
- package/dist/cjs/utils/color.js +206 -0
- package/dist/cjs/utils/font.js +89 -0
- package/dist/cjs/utils/index.js +24 -0
- package/dist/cjs/utils/sequence.js +323 -0
- package/dist/cjs/utils/sprite.js +85 -0
- package/dist/cjs/utils/theme.js +29 -0
- package/dist/cjs/utils/unit.js +79 -0
- package/dist/cjs/utils/var.js +102 -0
- package/dist/esm/defaultConfig/animation.js +4 -0
- package/dist/esm/defaultConfig/cases.js +4 -0
- package/dist/esm/defaultConfig/class.js +5 -0
- package/dist/esm/defaultConfig/color.js +11 -0
- package/dist/esm/defaultConfig/document.js +4 -0
- package/dist/esm/defaultConfig/font-family.js +18 -0
- package/dist/esm/defaultConfig/font.js +13 -0
- package/dist/esm/defaultConfig/grid.js +5 -0
- package/dist/esm/defaultConfig/icons.js +6 -0
- package/dist/esm/defaultConfig/index.js +24 -0
- package/dist/esm/defaultConfig/media.js +9 -0
- package/dist/esm/defaultConfig/responsive.js +30 -0
- package/dist/esm/defaultConfig/sequence.js +29 -0
- package/dist/esm/defaultConfig/shadow.js +9 -0
- package/dist/esm/defaultConfig/spacing.js +18 -0
- package/dist/esm/defaultConfig/svg.js +6 -0
- package/dist/esm/defaultConfig/templates.js +4 -0
- package/dist/esm/defaultConfig/theme.js +16 -0
- package/dist/esm/defaultConfig/timing.js +17 -0
- package/dist/esm/defaultConfig/typography.js +21 -0
- package/dist/esm/defaultConfig/unit.js +6 -0
- package/dist/esm/system/color.js +188 -0
- package/dist/esm/system/document.js +16 -0
- package/dist/esm/system/font.js +50 -0
- package/dist/esm/system/index.js +10 -0
- package/dist/esm/system/reset.js +67 -0
- package/dist/esm/system/shadow.js +91 -0
- package/dist/esm/system/spacing.js +121 -0
- package/dist/esm/system/svg.js +77 -0
- package/dist/esm/system/theme.js +219 -0
- package/dist/esm/system/timing.js +32 -0
- package/dist/esm/system/typography.js +85 -0
- package/dist/esm/tests/index.js +8 -0
- package/dist/esm/transforms/index.js +216 -0
- package/dist/esm/utils/color.js +192 -0
- package/dist/esm/utils/font.js +69 -0
- package/dist/esm/utils/index.js +7 -0
- package/dist/esm/utils/sequence.js +303 -0
- package/dist/esm/utils/sprite.js +65 -0
- package/dist/esm/utils/theme.js +9 -0
- package/dist/esm/utils/unit.js +59 -0
- package/dist/esm/utils/var.js +82 -0
- package/package.json +7 -7
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var transforms_exports = {};
|
|
20
|
+
__export(transforms_exports, {
|
|
21
|
+
resolveColorsInGradient: () => resolveColorsInGradient,
|
|
22
|
+
splitTransition: () => splitTransition,
|
|
23
|
+
transformBackgroundImage: () => transformBackgroundImage,
|
|
24
|
+
transformBorder: () => transformBorder,
|
|
25
|
+
transformBorderRadius: () => transformBorderRadius,
|
|
26
|
+
transformBoxShadow: () => transformBoxShadow,
|
|
27
|
+
transformDuration: () => transformDuration,
|
|
28
|
+
transformShadow: () => transformShadow,
|
|
29
|
+
transformSize: () => transformSize,
|
|
30
|
+
transformSizeRatio: () => transformSizeRatio,
|
|
31
|
+
transformTextStroke: () => transformTextStroke,
|
|
32
|
+
transformTransition: () => transformTransition,
|
|
33
|
+
transfromGap: () => transfromGap
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(transforms_exports);
|
|
36
|
+
var import_utils = require("@domql/utils");
|
|
37
|
+
var import_factory = require("../factory");
|
|
38
|
+
var import_system = require("../system");
|
|
39
|
+
var import_utils2 = require("../utils");
|
|
40
|
+
const BORDER_STYLES = /* @__PURE__ */ new Set([
|
|
41
|
+
"none",
|
|
42
|
+
"hidden",
|
|
43
|
+
"dotted",
|
|
44
|
+
"dashed",
|
|
45
|
+
"solid",
|
|
46
|
+
"double",
|
|
47
|
+
"groove",
|
|
48
|
+
"ridge",
|
|
49
|
+
"inset",
|
|
50
|
+
"outset",
|
|
51
|
+
"initial"
|
|
52
|
+
]);
|
|
53
|
+
const GRADIENT_KEYWORDS = /* @__PURE__ */ new Set([
|
|
54
|
+
"to",
|
|
55
|
+
"top",
|
|
56
|
+
"bottom",
|
|
57
|
+
"left",
|
|
58
|
+
"right",
|
|
59
|
+
"center",
|
|
60
|
+
"at",
|
|
61
|
+
"circle",
|
|
62
|
+
"ellipse",
|
|
63
|
+
"closest-side",
|
|
64
|
+
"farthest-side",
|
|
65
|
+
"closest-corner",
|
|
66
|
+
"farthest-corner"
|
|
67
|
+
]);
|
|
68
|
+
const isBorderStyle = (str) => BORDER_STYLES.has(str);
|
|
69
|
+
const transformBorder = (border) => {
|
|
70
|
+
const str = border + "";
|
|
71
|
+
if (import_utils2.CSS_NATIVE_COLOR_REGEX.test(str)) return str;
|
|
72
|
+
const trimmed = str.trim();
|
|
73
|
+
if (trimmed === "none" || trimmed === "0" || trimmed === "initial" || trimmed === "inherit" || trimmed === "unset") return str;
|
|
74
|
+
const tokens = str.split(/\s+/);
|
|
75
|
+
return tokens.map((v) => {
|
|
76
|
+
v = v.trim();
|
|
77
|
+
if (!v) return "";
|
|
78
|
+
if ((0, import_utils2.isCSSVar)(v)) return `var(${v})`;
|
|
79
|
+
if (isBorderStyle(v)) return v;
|
|
80
|
+
if (/^\d/.test(v) || v === "0") return v;
|
|
81
|
+
const color = (0, import_system.getColor)(v);
|
|
82
|
+
if ((0, import_utils2.isResolvedColor)(color)) return color;
|
|
83
|
+
const spacing = (0, import_system.getSpacingByKey)(v, "border");
|
|
84
|
+
if (spacing && spacing.border) return spacing.border;
|
|
85
|
+
return v;
|
|
86
|
+
}).join(" ");
|
|
87
|
+
};
|
|
88
|
+
const transformTextStroke = (stroke) => {
|
|
89
|
+
if (import_utils2.CSS_NATIVE_COLOR_REGEX.test(stroke)) return stroke;
|
|
90
|
+
return stroke.split(/\s+/).map((v) => {
|
|
91
|
+
v = v.trim();
|
|
92
|
+
if (!v) return "";
|
|
93
|
+
if ((0, import_utils2.isCSSVar)(v)) return `var(${v})`;
|
|
94
|
+
if (/^\d/.test(v) || v.includes("px") || v === "0") return v;
|
|
95
|
+
const color = (0, import_system.getColor)(v);
|
|
96
|
+
if ((0, import_utils2.isResolvedColor)(color)) return color;
|
|
97
|
+
return v;
|
|
98
|
+
}).join(" ");
|
|
99
|
+
};
|
|
100
|
+
const transformShadow = (sh, globalTheme) => (0, import_system.getShadow)(sh, globalTheme);
|
|
101
|
+
const transformBoxShadow = (shadows, globalTheme) => {
|
|
102
|
+
if (import_utils2.CSS_NATIVE_COLOR_REGEX.test(shadows)) return shadows;
|
|
103
|
+
return (0, import_utils2.splitTopLevelCommas)(shadows).map((shadow) => {
|
|
104
|
+
shadow = shadow.trim();
|
|
105
|
+
if (!shadow) return "";
|
|
106
|
+
return shadow.split(/\s+/).map((v) => {
|
|
107
|
+
v = v.trim();
|
|
108
|
+
if (!v) return "";
|
|
109
|
+
if ((0, import_utils2.isCSSVar)(v)) return `var(${v})`;
|
|
110
|
+
if (v === "inset" || v === "none") return v;
|
|
111
|
+
const color = (0, import_system.getColor)(v);
|
|
112
|
+
if ((0, import_utils2.isResolvedColor)(color)) {
|
|
113
|
+
const mediaColor = (0, import_system.getMediaColor)(v, globalTheme);
|
|
114
|
+
if ((0, import_utils.isObject)(mediaColor))
|
|
115
|
+
return Object.values(mediaColor).filter(
|
|
116
|
+
(c) => c.includes(": " + globalTheme)
|
|
117
|
+
)[0];
|
|
118
|
+
return mediaColor;
|
|
119
|
+
}
|
|
120
|
+
if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
|
|
121
|
+
const spacing = (0, import_system.getSpacingByKey)(v, "shadow");
|
|
122
|
+
if (spacing && spacing.shadow) return spacing.shadow;
|
|
123
|
+
return v;
|
|
124
|
+
}).join(" ");
|
|
125
|
+
}).join(", ");
|
|
126
|
+
};
|
|
127
|
+
const resolveColorsInGradient = (gradient, globalTheme) => {
|
|
128
|
+
const parenStart = gradient.indexOf("(");
|
|
129
|
+
if (parenStart === -1) return gradient;
|
|
130
|
+
const prefix = gradient.slice(0, parenStart + 1);
|
|
131
|
+
const inner = gradient.slice(parenStart + 1, gradient.lastIndexOf(")"));
|
|
132
|
+
const suffix = ")";
|
|
133
|
+
const segments = (0, import_utils2.splitTopLevelCommas)(inner);
|
|
134
|
+
const resolved = segments.map((segment) => {
|
|
135
|
+
segment = segment.trim();
|
|
136
|
+
const tokens = segment.split(/\s+/);
|
|
137
|
+
return tokens.map((token) => {
|
|
138
|
+
if (!token) return token;
|
|
139
|
+
if (/^\d/.test(token) || token === "0") return token;
|
|
140
|
+
if (GRADIENT_KEYWORDS.has(token)) return token;
|
|
141
|
+
if (token === "transparent") return token;
|
|
142
|
+
if (import_utils2.CSS_NATIVE_COLOR_REGEX.test(token)) return token;
|
|
143
|
+
const color = (0, import_system.getColor)(token);
|
|
144
|
+
if ((0, import_utils2.isResolvedColor)(color)) return color;
|
|
145
|
+
return token;
|
|
146
|
+
}).join(" ");
|
|
147
|
+
});
|
|
148
|
+
return prefix + resolved.join(", ") + suffix;
|
|
149
|
+
};
|
|
150
|
+
const transformBackgroundImage = (backgroundImage, globalTheme) => {
|
|
151
|
+
const CONFIG = (0, import_factory.getActiveConfig)();
|
|
152
|
+
return backgroundImage.split(", ").map((v) => {
|
|
153
|
+
if ((0, import_utils2.isCSSVar)(v)) return `var(${v})`;
|
|
154
|
+
if (v.includes("url")) return v;
|
|
155
|
+
if (v.includes("gradient")) return resolveColorsInGradient(v, globalTheme);
|
|
156
|
+
else if (CONFIG.GRADIENT[backgroundImage]) {
|
|
157
|
+
return {
|
|
158
|
+
backgroundImage: (0, import_system.getMediaColor)(
|
|
159
|
+
backgroundImage,
|
|
160
|
+
globalTheme || CONFIG.globalTheme
|
|
161
|
+
)
|
|
162
|
+
};
|
|
163
|
+
} else if (v.includes("/") || v.startsWith("http") || v.includes(".") && !(0, import_utils2.parseColorToken)(v))
|
|
164
|
+
return `url(${v})`;
|
|
165
|
+
return v;
|
|
166
|
+
}).join(" ");
|
|
167
|
+
};
|
|
168
|
+
const transfromGap = (gap) => (0, import_utils.isString)(gap) && gap.split(" ").map((v) => (0, import_system.getSpacingByKey)(v, "gap").gap).join(" ");
|
|
169
|
+
const transformTransition = (transition) => {
|
|
170
|
+
const arr = transition.split(" ");
|
|
171
|
+
if (!arr.length) return transition;
|
|
172
|
+
return arr.map((v) => {
|
|
173
|
+
if ((0, import_utils2.isCSSVar)(v)) return `var(${v})`;
|
|
174
|
+
if (v.length < 3 || v.includes("ms")) {
|
|
175
|
+
const mapWithSequence = (0, import_system.getTimingByKey)(v);
|
|
176
|
+
return mapWithSequence.timing || v;
|
|
177
|
+
}
|
|
178
|
+
if ((0, import_system.getTimingFunction)(v)) return (0, import_system.getTimingFunction)(v);
|
|
179
|
+
return v;
|
|
180
|
+
}).join(" ");
|
|
181
|
+
};
|
|
182
|
+
const transformDuration = (duration, props, propertyName) => {
|
|
183
|
+
if (!(0, import_utils.isString)(duration)) return;
|
|
184
|
+
return duration.split(",").map((v) => (0, import_system.getTimingByKey)(v).timing || v).join(",");
|
|
185
|
+
};
|
|
186
|
+
const splitTransition = (transition) => {
|
|
187
|
+
const arr = transition.split(",");
|
|
188
|
+
if (!arr.length) return;
|
|
189
|
+
return arr.map(transformTransition).join(",");
|
|
190
|
+
};
|
|
191
|
+
function transformSize(propertyName, val, props = {}, opts = {}) {
|
|
192
|
+
let value = import_utils.exec.call(this, val || props[propertyName]);
|
|
193
|
+
if (value === void 0 || value === null) return;
|
|
194
|
+
let fnPrefix;
|
|
195
|
+
if ((0, import_utils.isString)(value)) {
|
|
196
|
+
if (value.includes("(")) {
|
|
197
|
+
const fnArr = (0, import_utils2.getFnPrefixAndValue)(value);
|
|
198
|
+
fnPrefix = fnArr[0];
|
|
199
|
+
value = fnArr[1];
|
|
200
|
+
}
|
|
201
|
+
const shouldScaleBoxSize = props.scaleBoxSize;
|
|
202
|
+
const isBoxSize = (0, import_system.checkIfBoxSize)(propertyName);
|
|
203
|
+
if (!shouldScaleBoxSize && isBoxSize) {
|
|
204
|
+
value = (0, import_system.splitSpacedValue)(value);
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
return opts.ratio ? (0, import_system.getSpacingBasedOnRatio)(props, propertyName, value, fnPrefix) : (0, import_system.getSpacingByKey)(value, propertyName, void 0, fnPrefix);
|
|
208
|
+
}
|
|
209
|
+
const transformSizeRatio = (propertyName, val = null, props) => {
|
|
210
|
+
return transformSize(propertyName, val, props, {
|
|
211
|
+
ratio: true
|
|
212
|
+
});
|
|
213
|
+
};
|
|
214
|
+
const transformBorderRadius = (radius, props, propertyName) => {
|
|
215
|
+
if (!(0, import_utils.isString)(radius)) return;
|
|
216
|
+
return {
|
|
217
|
+
borderRadius: radius.split(" ").map((v, k) => (0, import_system.getSpacingBasedOnRatio)(props, propertyName, v)[propertyName]).join(" ")
|
|
218
|
+
};
|
|
219
|
+
};
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var color_exports = {};
|
|
20
|
+
__export(color_exports, {
|
|
21
|
+
CSS_NATIVE_COLOR_REGEX: () => CSS_NATIVE_COLOR_REGEX,
|
|
22
|
+
changeLightness: () => changeLightness,
|
|
23
|
+
colorStringToRgbaArray: () => colorStringToRgbaArray,
|
|
24
|
+
getColorShade: () => getColorShade,
|
|
25
|
+
getRgbTone: () => getRgbTone,
|
|
26
|
+
hexToRgb: () => hexToRgb,
|
|
27
|
+
hexToRgbArray: () => hexToRgbArray,
|
|
28
|
+
hexToRgba: () => hexToRgba,
|
|
29
|
+
hslToRgb: () => hslToRgb,
|
|
30
|
+
isCSSVar: () => isCSSVar,
|
|
31
|
+
isResolvedColor: () => isResolvedColor,
|
|
32
|
+
mixTwoColors: () => mixTwoColors,
|
|
33
|
+
mixTwoRgb: () => mixTwoRgb,
|
|
34
|
+
mixTwoRgba: () => mixTwoRgba,
|
|
35
|
+
opacify: () => opacify,
|
|
36
|
+
parseColorToken: () => parseColorToken,
|
|
37
|
+
rgbArrayToHex: () => rgbArrayToHex,
|
|
38
|
+
rgbToHSL: () => rgbToHSL,
|
|
39
|
+
rgbToHex: () => rgbToHex,
|
|
40
|
+
splitTopLevelCommas: () => splitTopLevelCommas
|
|
41
|
+
});
|
|
42
|
+
module.exports = __toCommonJS(color_exports);
|
|
43
|
+
var import_utils = require("@domql/utils");
|
|
44
|
+
const colorStringToRgbaArray = (color) => {
|
|
45
|
+
if (color === "") return [0, 0, 0, 0];
|
|
46
|
+
if (color.toLowerCase() === "transparent") return [0, 0, 0, 0];
|
|
47
|
+
if (color[0] === "#") {
|
|
48
|
+
if (color.length < 7) {
|
|
49
|
+
color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
|
|
50
|
+
}
|
|
51
|
+
return [
|
|
52
|
+
parseInt(color.substr(1, 2), 16),
|
|
53
|
+
parseInt(color.substr(3, 2), 16),
|
|
54
|
+
parseInt(color.substr(5, 2), 16),
|
|
55
|
+
color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
|
|
56
|
+
];
|
|
57
|
+
}
|
|
58
|
+
if (color.indexOf("rgb") === -1) {
|
|
59
|
+
if (import_utils.document && import_utils.window) {
|
|
60
|
+
const elem = import_utils.document.body.appendChild(import_utils.document.createElement("fictum"));
|
|
61
|
+
const flag = "rgb(1, 2, 3)";
|
|
62
|
+
elem.style.color = flag;
|
|
63
|
+
if (elem.style.color !== flag) {
|
|
64
|
+
import_utils.document.body.removeChild(elem);
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
elem.style.color = color;
|
|
68
|
+
if (elem.style.color === flag || elem.style.color === "") {
|
|
69
|
+
import_utils.document.body.removeChild(elem);
|
|
70
|
+
return [0, 0, 0, 0];
|
|
71
|
+
}
|
|
72
|
+
color = import_utils.window.getComputedStyle(elem).color;
|
|
73
|
+
import_utils.document.body.removeChild(elem);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
if (color.indexOf("rgb") === 0) {
|
|
77
|
+
if (color.indexOf("rgba") === -1) color = `${color}, 1`;
|
|
78
|
+
return color.match(/[\.\d]+/g).map((a) => +a);
|
|
79
|
+
}
|
|
80
|
+
return [0, 0, 0, 0];
|
|
81
|
+
};
|
|
82
|
+
const mixTwoColors = (colorA, colorB, range = 0.5) => {
|
|
83
|
+
colorA = colorStringToRgbaArray(colorA);
|
|
84
|
+
colorB = colorStringToRgbaArray(colorB);
|
|
85
|
+
return mixTwoRgba(colorA, colorB, range);
|
|
86
|
+
};
|
|
87
|
+
const hexToRgb = (hex, alpha = 1) => {
|
|
88
|
+
const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
|
|
89
|
+
return `rgb(${r},${g},${b})`;
|
|
90
|
+
};
|
|
91
|
+
const hexToRgbArray = (hex, alpha = 1) => {
|
|
92
|
+
const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
|
|
93
|
+
return [r, g, b];
|
|
94
|
+
};
|
|
95
|
+
const rgbToHex = (r, g, b) => {
|
|
96
|
+
return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
|
|
97
|
+
};
|
|
98
|
+
const rgbArrayToHex = ([r, g, b]) => {
|
|
99
|
+
return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
100
|
+
};
|
|
101
|
+
const hexToRgba = (hex, alpha = 1) => {
|
|
102
|
+
const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
|
|
103
|
+
return `rgba(${r},${g},${b},${alpha})`;
|
|
104
|
+
};
|
|
105
|
+
const mixTwoRgb = (colorA, colorB, range = 0.5) => {
|
|
106
|
+
const arr = [];
|
|
107
|
+
for (let i = 0; i < 3; i++) {
|
|
108
|
+
arr[i] = ~~(colorA[i] + (colorB[i] - colorA[i]) * range);
|
|
109
|
+
}
|
|
110
|
+
return `rgb(${arr})`;
|
|
111
|
+
};
|
|
112
|
+
const changeLightness = (delta, hsl) => {
|
|
113
|
+
const [hue, saturation, lightness] = hsl;
|
|
114
|
+
const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)));
|
|
115
|
+
return [hue, saturation, newLightness];
|
|
116
|
+
};
|
|
117
|
+
const rgbToHSL = (r, g, b) => {
|
|
118
|
+
const a = Math.max(r, g, b);
|
|
119
|
+
const n = a - Math.min(r, g, b);
|
|
120
|
+
const f = 1 - Math.abs(a + a - n - 1);
|
|
121
|
+
const h = n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n);
|
|
122
|
+
return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2];
|
|
123
|
+
};
|
|
124
|
+
const hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)) => [f(0), f(8), f(4)];
|
|
125
|
+
const getColorShade = (col, amt) => {
|
|
126
|
+
const num = parseInt(col, 16);
|
|
127
|
+
let r = (num >> 16) + amt;
|
|
128
|
+
if (r > 255) r = 255;
|
|
129
|
+
else if (r < 0) r = 0;
|
|
130
|
+
let b = (num >> 8 & 255) + amt;
|
|
131
|
+
if (b > 255) b = 255;
|
|
132
|
+
else if (b < 0) b = 0;
|
|
133
|
+
let g = (num & 255) + amt;
|
|
134
|
+
if (g > 255) g = 255;
|
|
135
|
+
else if (g < 0) g = 0;
|
|
136
|
+
return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
|
|
137
|
+
};
|
|
138
|
+
const mixTwoRgba = (colorA, colorB, range = 0.5) => {
|
|
139
|
+
const arr = [];
|
|
140
|
+
for (let i = 0; i < 4; i++) {
|
|
141
|
+
const round = i === 3 ? (x) => x : Math.round;
|
|
142
|
+
arr[i] = round(colorA[i] + (colorB[i] - colorA[i]) * range);
|
|
143
|
+
}
|
|
144
|
+
return `rgba(${arr})`;
|
|
145
|
+
};
|
|
146
|
+
const opacify = (color, opacity) => {
|
|
147
|
+
const arr = colorStringToRgbaArray(color);
|
|
148
|
+
if (!arr) {
|
|
149
|
+
if ((0, import_utils.isNotProduction)()) console.warn(color + " color is not rgba");
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
arr[3] = opacity;
|
|
153
|
+
return `rgba(${arr})`;
|
|
154
|
+
};
|
|
155
|
+
const isCSSVar = (v) => v.charCodeAt(0) === 45 && v.charCodeAt(1) === 45;
|
|
156
|
+
const CSS_NATIVE_COLOR_REGEX = /(?:rgba?\(|hsla?\(|#[0-9a-fA-F]{3,8}\b)/;
|
|
157
|
+
const COLOR_TOKEN_REGEX = /^([a-zA-Z]\w*)(?:\.(\d+))?(?:([+-]\d+|=\d+))?$/;
|
|
158
|
+
const parseColorToken = (value) => {
|
|
159
|
+
if (!(0, import_utils.isString)(value)) return null;
|
|
160
|
+
if (CSS_NATIVE_COLOR_REGEX.test(value)) return { passthrough: value };
|
|
161
|
+
if (isCSSVar(value)) return { cssVar: value };
|
|
162
|
+
const match = value.match(COLOR_TOKEN_REGEX);
|
|
163
|
+
if (!match) return null;
|
|
164
|
+
const [, name, alphaDigits, rawTone] = match;
|
|
165
|
+
const alpha = alphaDigits !== void 0 ? `0.${alphaDigits}` : void 0;
|
|
166
|
+
const tone = rawTone && rawTone[0] === "=" ? rawTone.slice(1) : rawTone;
|
|
167
|
+
return { name, alpha, tone };
|
|
168
|
+
};
|
|
169
|
+
const isResolvedColor = (result) => {
|
|
170
|
+
return (0, import_utils.isString)(result) && (result.includes("rgb") || result.includes("var(") || result.includes("#"));
|
|
171
|
+
};
|
|
172
|
+
const splitTopLevelCommas = (value) => {
|
|
173
|
+
const result = [];
|
|
174
|
+
let current = "";
|
|
175
|
+
let depth = 0;
|
|
176
|
+
for (const char of value) {
|
|
177
|
+
if (char === "(") depth += 1;
|
|
178
|
+
else if (char === ")" && depth > 0) depth -= 1;
|
|
179
|
+
if (char === "," && depth === 0) {
|
|
180
|
+
result.push(current);
|
|
181
|
+
current = "";
|
|
182
|
+
continue;
|
|
183
|
+
}
|
|
184
|
+
current += char;
|
|
185
|
+
}
|
|
186
|
+
if (current.length || !result.length) result.push(current);
|
|
187
|
+
return result;
|
|
188
|
+
};
|
|
189
|
+
const getRgbTone = (rgb, tone) => {
|
|
190
|
+
if ((0, import_utils.isString)(rgb) && rgb.includes("rgb"))
|
|
191
|
+
rgb = colorStringToRgbaArray(rgb).join(", ");
|
|
192
|
+
if ((0, import_utils.isString)(rgb)) rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
|
|
193
|
+
if ((0, import_utils.isNumber)(tone)) tone += "";
|
|
194
|
+
const toHex = rgbArrayToHex(rgb);
|
|
195
|
+
const abs = tone.slice(0, 1);
|
|
196
|
+
if (abs === "-" || abs === "+") {
|
|
197
|
+
const colorShade = getColorShade(toHex, parseFloat(tone));
|
|
198
|
+
return hexToRgbArray(colorShade).join(", ");
|
|
199
|
+
} else {
|
|
200
|
+
const [r, g, b] = rgb;
|
|
201
|
+
const hsl = rgbToHSL(r, g, b);
|
|
202
|
+
const [h, s, l] = hsl;
|
|
203
|
+
const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
|
|
204
|
+
return newRgb;
|
|
205
|
+
}
|
|
206
|
+
};
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var font_exports = {};
|
|
20
|
+
__export(font_exports, {
|
|
21
|
+
getDefaultOrFirstKey: () => getDefaultOrFirstKey,
|
|
22
|
+
getFontFace: () => getFontFace,
|
|
23
|
+
getFontFaceEach: () => getFontFaceEach,
|
|
24
|
+
getFontFaceEachString: () => getFontFaceEachString,
|
|
25
|
+
getFontFaceString: () => getFontFaceString,
|
|
26
|
+
getFontFormat: () => getFontFormat,
|
|
27
|
+
isGoogleFontsUrl: () => isGoogleFontsUrl,
|
|
28
|
+
setCustomFont: () => setCustomFont,
|
|
29
|
+
setCustomFontMedia: () => setCustomFontMedia,
|
|
30
|
+
setFontImport: () => setFontImport,
|
|
31
|
+
setInCustomFontMedia: () => setInCustomFontMedia
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(font_exports);
|
|
34
|
+
const getDefaultOrFirstKey = (LIBRARY, key) => {
|
|
35
|
+
if (LIBRARY[key]) return LIBRARY[key].value;
|
|
36
|
+
if (LIBRARY.default) return LIBRARY[LIBRARY.default].value;
|
|
37
|
+
const hasValue = Object.keys(LIBRARY)[0];
|
|
38
|
+
return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
|
|
39
|
+
};
|
|
40
|
+
const getFontFormat = (url) => {
|
|
41
|
+
const ext = url.split(/[#?]/)[0].split(".").pop().trim();
|
|
42
|
+
if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
|
|
43
|
+
return null;
|
|
44
|
+
};
|
|
45
|
+
const isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
|
|
46
|
+
const setFontImport = (url) => `@import url('${url}');`;
|
|
47
|
+
const setInCustomFontMedia = (str) => `@font-face { ${str} }`;
|
|
48
|
+
const setCustomFont = (name, url, weight, options = {}) => {
|
|
49
|
+
const format = getFontFormat(url);
|
|
50
|
+
const formatStr = format ? ` format('${format}')` : "";
|
|
51
|
+
return `
|
|
52
|
+
font-family: '${name}';
|
|
53
|
+
font-style: normal;${weight ? `
|
|
54
|
+
font-weight: ${weight};` : ""}${options.fontStretch ? `
|
|
55
|
+
font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
|
|
56
|
+
font-display: ${options.fontDisplay};` : ""}
|
|
57
|
+
src: url('${url}')${formatStr};`;
|
|
58
|
+
};
|
|
59
|
+
const setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
|
|
60
|
+
}`;
|
|
61
|
+
const getFontFaceEach = (name, weights) => {
|
|
62
|
+
const keys = Object.keys(weights);
|
|
63
|
+
return keys.map((key) => {
|
|
64
|
+
const { url, fontWeight } = weights[key];
|
|
65
|
+
return setCustomFont(name, url, fontWeight);
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
const getFontFace = (LIBRARY) => {
|
|
69
|
+
const keys = Object.keys(LIBRARY);
|
|
70
|
+
return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
|
|
71
|
+
};
|
|
72
|
+
const getFontFaceEachString = (name, weights) => {
|
|
73
|
+
if (weights && weights.isVariable) {
|
|
74
|
+
if (isGoogleFontsUrl(weights.url)) {
|
|
75
|
+
return setFontImport(weights.url);
|
|
76
|
+
}
|
|
77
|
+
return setCustomFontMedia(name, weights.url, weights.fontWeight, {
|
|
78
|
+
fontStretch: weights.fontStretch,
|
|
79
|
+
fontDisplay: weights.fontDisplay || "swap"
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
const isArr = weights[0];
|
|
83
|
+
if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
|
|
84
|
+
return setCustomFontMedia(name, weights.url);
|
|
85
|
+
};
|
|
86
|
+
const getFontFaceString = (LIBRARY) => {
|
|
87
|
+
const keys = Object.keys(LIBRARY);
|
|
88
|
+
return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
|
|
89
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
+
var utils_exports = {};
|
|
17
|
+
module.exports = __toCommonJS(utils_exports);
|
|
18
|
+
__reExport(utils_exports, require("./unit.js"), module.exports);
|
|
19
|
+
__reExport(utils_exports, require("./color.js"), module.exports);
|
|
20
|
+
__reExport(utils_exports, require("./theme.js"), module.exports);
|
|
21
|
+
__reExport(utils_exports, require("./font.js"), module.exports);
|
|
22
|
+
__reExport(utils_exports, require("./sequence.js"), module.exports);
|
|
23
|
+
__reExport(utils_exports, require("./var.js"), module.exports);
|
|
24
|
+
__reExport(utils_exports, require("./sprite.js"), module.exports);
|