@tenphi/tasty 0.1.0 → 0.1.2
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/_virtual/_rolldown/runtime.js +8 -0
- package/dist/zero/{babel.d.mts → babel.d.ts} +6 -6
- package/dist/zero/{babel.mjs → babel.js} +6 -6
- package/dist/zero/babel.js.map +1 -0
- package/dist/{css-writer.d.mts → zero/css-writer.d.ts} +1 -1
- package/dist/{css-writer.mjs → zero/css-writer.js} +1 -1
- package/dist/zero/css-writer.js.map +1 -0
- package/dist/{extractor.d.mts → zero/extractor.d.ts} +3 -2
- package/dist/{extractor.mjs → zero/extractor.js} +6 -6
- package/dist/zero/extractor.js.map +1 -0
- package/dist/zero/index.d.ts +3 -0
- package/dist/zero/{index.mjs → index.js} +2 -2
- package/dist/zero/{next.d.mts → next.d.ts} +1 -1
- package/dist/zero/{next.mjs → next.js} +2 -2
- package/dist/zero/next.js.map +1 -0
- package/package.json +16 -23
- package/dist/_virtual/_rolldown/runtime.mjs +0 -7
- package/dist/chunks/cacheKey.mjs +0 -70
- package/dist/chunks/cacheKey.mjs.map +0 -1
- package/dist/chunks/definitions.mjs +0 -260
- package/dist/chunks/definitions.mjs.map +0 -1
- package/dist/chunks/renderChunk.mjs +0 -61
- package/dist/chunks/renderChunk.mjs.map +0 -1
- package/dist/config.mjs +0 -231
- package/dist/config.mjs.map +0 -1
- package/dist/css-writer.mjs.map +0 -1
- package/dist/extractor.mjs.map +0 -1
- package/dist/injector/injector.mjs +0 -404
- package/dist/injector/injector.mjs.map +0 -1
- package/dist/injector/sheet-manager.mjs +0 -714
- package/dist/injector/sheet-manager.mjs.map +0 -1
- package/dist/injector/types.d.mts +0 -18
- package/dist/keyframes/index.mjs +0 -156
- package/dist/keyframes/index.mjs.map +0 -1
- package/dist/parser/classify.mjs +0 -319
- package/dist/parser/classify.mjs.map +0 -1
- package/dist/parser/const.mjs +0 -33
- package/dist/parser/const.mjs.map +0 -1
- package/dist/parser/lru.mjs +0 -109
- package/dist/parser/lru.mjs.map +0 -1
- package/dist/parser/parser.mjs +0 -116
- package/dist/parser/parser.mjs.map +0 -1
- package/dist/parser/tokenizer.mjs +0 -69
- package/dist/parser/tokenizer.mjs.map +0 -1
- package/dist/parser/types.d.mts +0 -37
- package/dist/parser/types.mjs +0 -46
- package/dist/parser/types.mjs.map +0 -1
- package/dist/pipeline/conditions.mjs +0 -377
- package/dist/pipeline/conditions.mjs.map +0 -1
- package/dist/pipeline/exclusive.mjs +0 -231
- package/dist/pipeline/exclusive.mjs.map +0 -1
- package/dist/pipeline/index.mjs +0 -635
- package/dist/pipeline/index.mjs.map +0 -1
- package/dist/pipeline/materialize.mjs +0 -821
- package/dist/pipeline/materialize.mjs.map +0 -1
- package/dist/pipeline/parseStateKey.mjs +0 -418
- package/dist/pipeline/parseStateKey.mjs.map +0 -1
- package/dist/pipeline/simplify.mjs +0 -557
- package/dist/pipeline/simplify.mjs.map +0 -1
- package/dist/plugins/okhsl-plugin.mjs +0 -345
- package/dist/plugins/okhsl-plugin.mjs.map +0 -1
- package/dist/plugins/types.d.mts +0 -49
- package/dist/properties/index.mjs +0 -141
- package/dist/properties/index.mjs.map +0 -1
- package/dist/states/index.mjs +0 -161
- package/dist/states/index.mjs.map +0 -1
- package/dist/styles/align.mjs +0 -14
- package/dist/styles/align.mjs.map +0 -1
- package/dist/styles/border.mjs +0 -114
- package/dist/styles/border.mjs.map +0 -1
- package/dist/styles/color.mjs +0 -23
- package/dist/styles/color.mjs.map +0 -1
- package/dist/styles/createStyle.mjs +0 -77
- package/dist/styles/createStyle.mjs.map +0 -1
- package/dist/styles/dimension.mjs +0 -97
- package/dist/styles/dimension.mjs.map +0 -1
- package/dist/styles/display.mjs +0 -67
- package/dist/styles/display.mjs.map +0 -1
- package/dist/styles/fade.mjs +0 -58
- package/dist/styles/fade.mjs.map +0 -1
- package/dist/styles/fill.mjs +0 -51
- package/dist/styles/fill.mjs.map +0 -1
- package/dist/styles/flow.mjs +0 -12
- package/dist/styles/flow.mjs.map +0 -1
- package/dist/styles/gap.mjs +0 -37
- package/dist/styles/gap.mjs.map +0 -1
- package/dist/styles/height.mjs +0 -20
- package/dist/styles/height.mjs.map +0 -1
- package/dist/styles/index.mjs +0 -9
- package/dist/styles/index.mjs.map +0 -1
- package/dist/styles/inset.mjs +0 -142
- package/dist/styles/inset.mjs.map +0 -1
- package/dist/styles/justify.mjs +0 -14
- package/dist/styles/justify.mjs.map +0 -1
- package/dist/styles/margin.mjs +0 -96
- package/dist/styles/margin.mjs.map +0 -1
- package/dist/styles/outline.mjs +0 -65
- package/dist/styles/outline.mjs.map +0 -1
- package/dist/styles/padding.mjs +0 -96
- package/dist/styles/padding.mjs.map +0 -1
- package/dist/styles/predefined.mjs +0 -232
- package/dist/styles/predefined.mjs.map +0 -1
- package/dist/styles/preset.mjs +0 -126
- package/dist/styles/preset.mjs.map +0 -1
- package/dist/styles/radius.mjs +0 -51
- package/dist/styles/radius.mjs.map +0 -1
- package/dist/styles/scrollbar.mjs +0 -105
- package/dist/styles/scrollbar.mjs.map +0 -1
- package/dist/styles/shadow.mjs +0 -24
- package/dist/styles/shadow.mjs.map +0 -1
- package/dist/styles/styledScrollbar.mjs +0 -38
- package/dist/styles/styledScrollbar.mjs.map +0 -1
- package/dist/styles/transition.mjs +0 -138
- package/dist/styles/transition.mjs.map +0 -1
- package/dist/styles/types.d.mts +0 -492
- package/dist/styles/width.mjs +0 -20
- package/dist/styles/width.mjs.map +0 -1
- package/dist/utils/cache-wrapper.mjs +0 -26
- package/dist/utils/cache-wrapper.mjs.map +0 -1
- package/dist/utils/case-converter.mjs +0 -8
- package/dist/utils/case-converter.mjs.map +0 -1
- package/dist/utils/hsl-to-rgb.mjs +0 -38
- package/dist/utils/hsl-to-rgb.mjs.map +0 -1
- package/dist/utils/is-dev-env.mjs +0 -19
- package/dist/utils/is-dev-env.mjs.map +0 -1
- package/dist/utils/merge-styles.mjs +0 -146
- package/dist/utils/merge-styles.mjs.map +0 -1
- package/dist/utils/okhsl-to-rgb.mjs +0 -296
- package/dist/utils/okhsl-to-rgb.mjs.map +0 -1
- package/dist/utils/process-tokens.mjs +0 -28
- package/dist/utils/process-tokens.mjs.map +0 -1
- package/dist/utils/resolve-recipes.mjs +0 -143
- package/dist/utils/resolve-recipes.mjs.map +0 -1
- package/dist/utils/string.mjs +0 -8
- package/dist/utils/string.mjs.map +0 -1
- package/dist/utils/styles.d.mts +0 -18
- package/dist/utils/styles.mjs +0 -346
- package/dist/utils/styles.mjs.map +0 -1
- package/dist/zero/babel.mjs.map +0 -1
- package/dist/zero/index.d.mts +0 -3
- package/dist/zero/next.mjs.map +0 -1
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import { isDevEnv } from "./is-dev-env.mjs";
|
|
2
|
-
import { isSelector } from "../pipeline/index.mjs";
|
|
3
|
-
|
|
4
|
-
//#region src/utils/merge-styles.ts
|
|
5
|
-
const devMode = isDevEnv();
|
|
6
|
-
const INHERIT_VALUE = "@inherit";
|
|
7
|
-
/**
|
|
8
|
-
* Check if a value is a state map (object, not array).
|
|
9
|
-
*/
|
|
10
|
-
function isStateMap(value) {
|
|
11
|
-
return typeof value === "object" && value !== null && !Array.isArray(value);
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* Normalize a parent value to a state map.
|
|
15
|
-
* - Already a state map → return as-is
|
|
16
|
-
* - Non-null, non-false primitive → wrap as `{ '': value }`
|
|
17
|
-
* - null / undefined / false → return null (no parent to merge with)
|
|
18
|
-
*/
|
|
19
|
-
function normalizeToStateMap(value) {
|
|
20
|
-
if (isStateMap(value)) return value;
|
|
21
|
-
if (value != null && value !== false) return { "": value };
|
|
22
|
-
return null;
|
|
23
|
-
}
|
|
24
|
-
/**
|
|
25
|
-
* Resolve a child state map against a parent value.
|
|
26
|
-
*
|
|
27
|
-
* Mode is determined by whether the child contains a `''` (default) key:
|
|
28
|
-
* - No `''` → extend mode: parent entries preserved, child adds/overrides/repositions
|
|
29
|
-
* - Has `''` → replace mode: child defines everything, `@inherit` cherry-picks from parent
|
|
30
|
-
*
|
|
31
|
-
* In both modes:
|
|
32
|
-
* - `@inherit` value → resolve from parent state map
|
|
33
|
-
* - `null` value → remove this state from the result
|
|
34
|
-
* - `false` value → tombstone, persists through all layers, blocks recipe
|
|
35
|
-
*/
|
|
36
|
-
function resolveStateMap(parentValue, childMap) {
|
|
37
|
-
const isExtend = !("" in childMap);
|
|
38
|
-
const parentMap = normalizeToStateMap(parentValue);
|
|
39
|
-
if (!parentMap) {
|
|
40
|
-
const result = {};
|
|
41
|
-
for (const key of Object.keys(childMap)) {
|
|
42
|
-
const val = childMap[key];
|
|
43
|
-
if (val === null || val === INHERIT_VALUE) continue;
|
|
44
|
-
result[key] = val;
|
|
45
|
-
}
|
|
46
|
-
return result;
|
|
47
|
-
}
|
|
48
|
-
if (isExtend) return resolveExtendMode(parentMap, childMap);
|
|
49
|
-
return resolveReplaceMode(parentMap, childMap);
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Extend mode: parent entries are preserved, child entries add/override/reposition.
|
|
53
|
-
*/
|
|
54
|
-
function resolveExtendMode(parentMap, childMap) {
|
|
55
|
-
const inheritKeys = /* @__PURE__ */ new Set();
|
|
56
|
-
const removeKeys = /* @__PURE__ */ new Set();
|
|
57
|
-
const overrideKeys = /* @__PURE__ */ new Map();
|
|
58
|
-
for (const key of Object.keys(childMap)) {
|
|
59
|
-
const val = childMap[key];
|
|
60
|
-
if (val === INHERIT_VALUE) {
|
|
61
|
-
if (key in parentMap) inheritKeys.add(key);
|
|
62
|
-
else if (devMode) console.warn(`[Tasty] @inherit used for state '${key}' that does not exist in the parent style map. Entry skipped.`);
|
|
63
|
-
} else if (val === null) removeKeys.add(key);
|
|
64
|
-
else if (key in parentMap) overrideKeys.set(key, val);
|
|
65
|
-
}
|
|
66
|
-
const result = {};
|
|
67
|
-
for (const key of Object.keys(parentMap)) {
|
|
68
|
-
if (removeKeys.has(key)) continue;
|
|
69
|
-
if (inheritKeys.has(key)) continue;
|
|
70
|
-
if (overrideKeys.has(key)) result[key] = overrideKeys.get(key);
|
|
71
|
-
else result[key] = parentMap[key];
|
|
72
|
-
}
|
|
73
|
-
for (const key of Object.keys(childMap)) if (inheritKeys.has(key)) result[key] = parentMap[key];
|
|
74
|
-
else if (!removeKeys.has(key) && !overrideKeys.has(key) && childMap[key] !== INHERIT_VALUE) result[key] = childMap[key];
|
|
75
|
-
return result;
|
|
76
|
-
}
|
|
77
|
-
/**
|
|
78
|
-
* Replace mode: child entries define the result, `@inherit` pulls from parent.
|
|
79
|
-
*/
|
|
80
|
-
function resolveReplaceMode(parentMap, childMap) {
|
|
81
|
-
const result = {};
|
|
82
|
-
for (const key of Object.keys(childMap)) {
|
|
83
|
-
const val = childMap[key];
|
|
84
|
-
if (val === INHERIT_VALUE) {
|
|
85
|
-
if (key in parentMap) result[key] = parentMap[key];
|
|
86
|
-
else if (devMode) console.warn(`[Tasty] @inherit used for state '${key}' that does not exist in the parent style map. Entry skipped.`);
|
|
87
|
-
} else if (val !== null) result[key] = val;
|
|
88
|
-
}
|
|
89
|
-
return result;
|
|
90
|
-
}
|
|
91
|
-
/**
|
|
92
|
-
* Merge sub-element properties with state map / null / undefined support.
|
|
93
|
-
*/
|
|
94
|
-
function mergeSubElementStyles(parentSub, childSub) {
|
|
95
|
-
const parent = parentSub;
|
|
96
|
-
const child = childSub;
|
|
97
|
-
const merged = {
|
|
98
|
-
...parent,
|
|
99
|
-
...child
|
|
100
|
-
};
|
|
101
|
-
for (const key of Object.keys(child)) {
|
|
102
|
-
const val = child[key];
|
|
103
|
-
if (val === void 0) {
|
|
104
|
-
if (parent && key in parent) merged[key] = parent[key];
|
|
105
|
-
} else if (val === null) delete merged[key];
|
|
106
|
-
else if (isStateMap(val)) merged[key] = resolveStateMap(parent ? parent[key] : void 0, val);
|
|
107
|
-
}
|
|
108
|
-
return merged;
|
|
109
|
-
}
|
|
110
|
-
function mergeStyles(...objects) {
|
|
111
|
-
let styles = objects[0] ? { ...objects[0] } : {};
|
|
112
|
-
let pos = 1;
|
|
113
|
-
while (pos in objects) {
|
|
114
|
-
const selectorKeys = Object.keys(styles).filter((key) => isSelector(key) && styles[key]);
|
|
115
|
-
const newStyles = objects[pos];
|
|
116
|
-
if (newStyles) {
|
|
117
|
-
const resultStyles = {
|
|
118
|
-
...styles,
|
|
119
|
-
...newStyles
|
|
120
|
-
};
|
|
121
|
-
const newSelectorKeys = Object.keys(newStyles).filter(isSelector);
|
|
122
|
-
const allSelectorKeys = new Set([...selectorKeys, ...newSelectorKeys]);
|
|
123
|
-
for (const key of allSelectorKeys) {
|
|
124
|
-
const newValue = newStyles?.[key];
|
|
125
|
-
if (newValue === false || newValue === null) delete resultStyles[key];
|
|
126
|
-
else if (newValue === void 0) resultStyles[key] = styles[key];
|
|
127
|
-
else if (newValue) resultStyles[key] = mergeSubElementStyles(styles[key], newValue);
|
|
128
|
-
}
|
|
129
|
-
for (const key of Object.keys(newStyles)) {
|
|
130
|
-
if (isSelector(key)) continue;
|
|
131
|
-
const newValue = newStyles[key];
|
|
132
|
-
if (newValue === void 0) if (key in styles) resultStyles[key] = styles[key];
|
|
133
|
-
else delete resultStyles[key];
|
|
134
|
-
else if (newValue === null) delete resultStyles[key];
|
|
135
|
-
else if (isStateMap(newValue)) resultStyles[key] = resolveStateMap(styles[key], newValue);
|
|
136
|
-
}
|
|
137
|
-
styles = resultStyles;
|
|
138
|
-
}
|
|
139
|
-
pos++;
|
|
140
|
-
}
|
|
141
|
-
return styles;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
//#endregion
|
|
145
|
-
export { mergeStyles };
|
|
146
|
-
//# sourceMappingURL=merge-styles.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"merge-styles.mjs","names":[],"sources":["../../src/utils/merge-styles.ts"],"sourcesContent":["import { isSelector } from '../pipeline';\nimport type { Styles, StylesWithoutSelectors } from '../styles/types';\n\nimport { isDevEnv } from './is-dev-env';\n\nconst devMode = isDevEnv();\n\nconst INHERIT_VALUE = '@inherit';\n\n/**\n * Check if a value is a state map (object, not array).\n */\nfunction isStateMap(value: unknown): value is Record<string, unknown> {\n return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\n/**\n * Normalize a parent value to a state map.\n * - Already a state map → return as-is\n * - Non-null, non-false primitive → wrap as `{ '': value }`\n * - null / undefined / false → return null (no parent to merge with)\n */\nfunction normalizeToStateMap(value: unknown): Record<string, unknown> | null {\n if (isStateMap(value)) return value as Record<string, unknown>;\n if (value != null && value !== false) return { '': value };\n return null;\n}\n\n/**\n * Resolve a child state map against a parent value.\n *\n * Mode is determined by whether the child contains a `''` (default) key:\n * - No `''` → extend mode: parent entries preserved, child adds/overrides/repositions\n * - Has `''` → replace mode: child defines everything, `@inherit` cherry-picks from parent\n *\n * In both modes:\n * - `@inherit` value → resolve from parent state map\n * - `null` value → remove this state from the result\n * - `false` value → tombstone, persists through all layers, blocks recipe\n */\nfunction resolveStateMap(\n parentValue: unknown,\n childMap: Record<string, unknown>,\n): Record<string, unknown> {\n const isExtend = !('' in childMap);\n const parentMap = normalizeToStateMap(parentValue);\n\n if (!parentMap) {\n // No parent to merge with — strip nulls and @inherit, return child entries\n const result: Record<string, unknown> = {};\n for (const key of Object.keys(childMap)) {\n const val = childMap[key];\n if (val === null || val === INHERIT_VALUE) continue;\n result[key] = val;\n }\n return result;\n }\n\n if (isExtend) {\n return resolveExtendMode(parentMap, childMap);\n }\n\n return resolveReplaceMode(parentMap, childMap);\n}\n\n/**\n * Extend mode: parent entries are preserved, child entries add/override/reposition.\n */\nfunction resolveExtendMode(\n parentMap: Record<string, unknown>,\n childMap: Record<string, unknown>,\n): Record<string, unknown> {\n const inheritKeys = new Set<string>();\n const removeKeys = new Set<string>();\n const overrideKeys = new Map<string, unknown>();\n\n for (const key of Object.keys(childMap)) {\n const val = childMap[key];\n if (val === INHERIT_VALUE) {\n if (key in parentMap) {\n inheritKeys.add(key);\n } else if (devMode) {\n console.warn(\n `[Tasty] @inherit used for state '${key}' that does not exist in the parent style map. Entry skipped.`,\n );\n }\n } else if (val === null) {\n removeKeys.add(key);\n } else if (key in parentMap) {\n overrideKeys.set(key, val);\n }\n }\n\n // 1. Parent entries in order (skip removed, skip repositioned, apply overrides)\n const result: Record<string, unknown> = {};\n for (const key of Object.keys(parentMap)) {\n if (removeKeys.has(key)) continue;\n if (inheritKeys.has(key)) continue;\n if (overrideKeys.has(key)) {\n result[key] = overrideKeys.get(key);\n } else {\n result[key] = parentMap[key];\n }\n }\n\n // 2. Append new + repositioned entries in child declaration order\n for (const key of Object.keys(childMap)) {\n if (inheritKeys.has(key)) {\n result[key] = parentMap[key];\n } else if (\n !removeKeys.has(key) &&\n !overrideKeys.has(key) &&\n // Skip @inherit for keys that weren't in the parent (already warned above)\n childMap[key] !== INHERIT_VALUE\n ) {\n result[key] = childMap[key];\n }\n }\n\n return result;\n}\n\n/**\n * Replace mode: child entries define the result, `@inherit` pulls from parent.\n */\nfunction resolveReplaceMode(\n parentMap: Record<string, unknown>,\n childMap: Record<string, unknown>,\n): Record<string, unknown> {\n const result: Record<string, unknown> = {};\n\n for (const key of Object.keys(childMap)) {\n const val = childMap[key];\n if (val === INHERIT_VALUE) {\n if (key in parentMap) {\n result[key] = parentMap[key];\n } else if (devMode) {\n console.warn(\n `[Tasty] @inherit used for state '${key}' that does not exist in the parent style map. Entry skipped.`,\n );\n }\n } else if (val !== null) {\n result[key] = val;\n }\n }\n\n return result;\n}\n\n/**\n * Merge sub-element properties with state map / null / undefined support.\n */\nfunction mergeSubElementStyles(\n parentSub: StylesWithoutSelectors | undefined,\n childSub: StylesWithoutSelectors,\n): StylesWithoutSelectors {\n const parent = parentSub as Record<string, unknown> | undefined;\n const child = childSub as Record<string, unknown>;\n const merged: Record<string, unknown> = { ...parent, ...child };\n\n for (const key of Object.keys(child)) {\n const val = child[key];\n\n if (val === undefined) {\n if (parent && key in parent) {\n merged[key] = parent[key];\n }\n } else if (val === null) {\n delete merged[key];\n } else if (isStateMap(val)) {\n merged[key] = resolveStateMap(\n parent ? parent[key] : undefined,\n val as Record<string, unknown>,\n );\n }\n }\n\n return merged as StylesWithoutSelectors;\n}\n\nexport function mergeStyles(...objects: (Styles | undefined | null)[]): Styles {\n let styles: Styles = objects[0] ? { ...objects[0] } : {};\n let pos = 1;\n\n while (pos in objects) {\n const selectorKeys = Object.keys(styles).filter(\n (key) => isSelector(key) && styles[key],\n );\n const newStyles = objects[pos];\n\n if (newStyles) {\n const resultStyles = { ...styles, ...newStyles };\n\n // Collect all selector keys from both parent and child\n const newSelectorKeys = Object.keys(newStyles).filter(isSelector);\n const allSelectorKeys = new Set([...selectorKeys, ...newSelectorKeys]);\n\n for (const key of allSelectorKeys) {\n const newValue = newStyles?.[key];\n\n if (newValue === false || newValue === null) {\n delete resultStyles[key];\n } else if (newValue === undefined) {\n resultStyles[key] = styles[key];\n } else if (newValue) {\n resultStyles[key] = mergeSubElementStyles(\n styles[key] as StylesWithoutSelectors,\n newValue as StylesWithoutSelectors,\n );\n }\n }\n\n // Handle non-selector properties: state maps, null, undefined\n for (const key of Object.keys(newStyles)) {\n if (isSelector(key)) continue;\n\n const newValue = newStyles[key];\n\n if (newValue === undefined) {\n if (key in styles) {\n resultStyles[key] = styles[key];\n } else {\n delete resultStyles[key];\n }\n } else if (newValue === null) {\n delete resultStyles[key];\n } else if (isStateMap(newValue)) {\n (resultStyles as Record<string, unknown>)[key] = resolveStateMap(\n styles[key],\n newValue as Record<string, unknown>,\n );\n }\n }\n\n styles = resultStyles;\n }\n\n pos++;\n }\n\n return styles;\n}\n"],"mappings":";;;;AAKA,MAAM,UAAU,UAAU;AAE1B,MAAM,gBAAgB;;;;AAKtB,SAAS,WAAW,OAAkD;AACpE,QAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,MAAM;;;;;;;;AAS7E,SAAS,oBAAoB,OAAgD;AAC3E,KAAI,WAAW,MAAM,CAAE,QAAO;AAC9B,KAAI,SAAS,QAAQ,UAAU,MAAO,QAAO,EAAE,IAAI,OAAO;AAC1D,QAAO;;;;;;;;;;;;;;AAeT,SAAS,gBACP,aACA,UACyB;CACzB,MAAM,WAAW,EAAE,MAAM;CACzB,MAAM,YAAY,oBAAoB,YAAY;AAElD,KAAI,CAAC,WAAW;EAEd,MAAM,SAAkC,EAAE;AAC1C,OAAK,MAAM,OAAO,OAAO,KAAK,SAAS,EAAE;GACvC,MAAM,MAAM,SAAS;AACrB,OAAI,QAAQ,QAAQ,QAAQ,cAAe;AAC3C,UAAO,OAAO;;AAEhB,SAAO;;AAGT,KAAI,SACF,QAAO,kBAAkB,WAAW,SAAS;AAG/C,QAAO,mBAAmB,WAAW,SAAS;;;;;AAMhD,SAAS,kBACP,WACA,UACyB;CACzB,MAAM,8BAAc,IAAI,KAAa;CACrC,MAAM,6BAAa,IAAI,KAAa;CACpC,MAAM,+BAAe,IAAI,KAAsB;AAE/C,MAAK,MAAM,OAAO,OAAO,KAAK,SAAS,EAAE;EACvC,MAAM,MAAM,SAAS;AACrB,MAAI,QAAQ,eACV;OAAI,OAAO,UACT,aAAY,IAAI,IAAI;YACX,QACT,SAAQ,KACN,oCAAoC,IAAI,+DACzC;aAEM,QAAQ,KACjB,YAAW,IAAI,IAAI;WACV,OAAO,UAChB,cAAa,IAAI,KAAK,IAAI;;CAK9B,MAAM,SAAkC,EAAE;AAC1C,MAAK,MAAM,OAAO,OAAO,KAAK,UAAU,EAAE;AACxC,MAAI,WAAW,IAAI,IAAI,CAAE;AACzB,MAAI,YAAY,IAAI,IAAI,CAAE;AAC1B,MAAI,aAAa,IAAI,IAAI,CACvB,QAAO,OAAO,aAAa,IAAI,IAAI;MAEnC,QAAO,OAAO,UAAU;;AAK5B,MAAK,MAAM,OAAO,OAAO,KAAK,SAAS,CACrC,KAAI,YAAY,IAAI,IAAI,CACtB,QAAO,OAAO,UAAU;UAExB,CAAC,WAAW,IAAI,IAAI,IACpB,CAAC,aAAa,IAAI,IAAI,IAEtB,SAAS,SAAS,cAElB,QAAO,OAAO,SAAS;AAI3B,QAAO;;;;;AAMT,SAAS,mBACP,WACA,UACyB;CACzB,MAAM,SAAkC,EAAE;AAE1C,MAAK,MAAM,OAAO,OAAO,KAAK,SAAS,EAAE;EACvC,MAAM,MAAM,SAAS;AACrB,MAAI,QAAQ,eACV;OAAI,OAAO,UACT,QAAO,OAAO,UAAU;YACf,QACT,SAAQ,KACN,oCAAoC,IAAI,+DACzC;aAEM,QAAQ,KACjB,QAAO,OAAO;;AAIlB,QAAO;;;;;AAMT,SAAS,sBACP,WACA,UACwB;CACxB,MAAM,SAAS;CACf,MAAM,QAAQ;CACd,MAAM,SAAkC;EAAE,GAAG;EAAQ,GAAG;EAAO;AAE/D,MAAK,MAAM,OAAO,OAAO,KAAK,MAAM,EAAE;EACpC,MAAM,MAAM,MAAM;AAElB,MAAI,QAAQ,QACV;OAAI,UAAU,OAAO,OACnB,QAAO,OAAO,OAAO;aAEd,QAAQ,KACjB,QAAO,OAAO;WACL,WAAW,IAAI,CACxB,QAAO,OAAO,gBACZ,SAAS,OAAO,OAAO,QACvB,IACD;;AAIL,QAAO;;AAGT,SAAgB,YAAY,GAAG,SAAgD;CAC7E,IAAI,SAAiB,QAAQ,KAAK,EAAE,GAAG,QAAQ,IAAI,GAAG,EAAE;CACxD,IAAI,MAAM;AAEV,QAAO,OAAO,SAAS;EACrB,MAAM,eAAe,OAAO,KAAK,OAAO,CAAC,QACtC,QAAQ,WAAW,IAAI,IAAI,OAAO,KACpC;EACD,MAAM,YAAY,QAAQ;AAE1B,MAAI,WAAW;GACb,MAAM,eAAe;IAAE,GAAG;IAAQ,GAAG;IAAW;GAGhD,MAAM,kBAAkB,OAAO,KAAK,UAAU,CAAC,OAAO,WAAW;GACjE,MAAM,kBAAkB,IAAI,IAAI,CAAC,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAEtE,QAAK,MAAM,OAAO,iBAAiB;IACjC,MAAM,WAAW,YAAY;AAE7B,QAAI,aAAa,SAAS,aAAa,KACrC,QAAO,aAAa;aACX,aAAa,OACtB,cAAa,OAAO,OAAO;aAClB,SACT,cAAa,OAAO,sBAClB,OAAO,MACP,SACD;;AAKL,QAAK,MAAM,OAAO,OAAO,KAAK,UAAU,EAAE;AACxC,QAAI,WAAW,IAAI,CAAE;IAErB,MAAM,WAAW,UAAU;AAE3B,QAAI,aAAa,OACf,KAAI,OAAO,OACT,cAAa,OAAO,OAAO;QAE3B,QAAO,aAAa;aAEb,aAAa,KACtB,QAAO,aAAa;aACX,WAAW,SAAS,CAC7B,CAAC,aAAyC,OAAO,gBAC/C,OAAO,MACP,SACD;;AAIL,YAAS;;AAGX;;AAGF,QAAO"}
|
|
@@ -1,296 +0,0 @@
|
|
|
1
|
-
//#region src/utils/okhsl-to-rgb.ts
|
|
2
|
-
const OKLab_to_LMS_M = [
|
|
3
|
-
[
|
|
4
|
-
1,
|
|
5
|
-
.3963377773761749,
|
|
6
|
-
.2158037573099136
|
|
7
|
-
],
|
|
8
|
-
[
|
|
9
|
-
1,
|
|
10
|
-
-.1055613458156586,
|
|
11
|
-
-.0638541728258133
|
|
12
|
-
],
|
|
13
|
-
[
|
|
14
|
-
1,
|
|
15
|
-
-.0894841775298119,
|
|
16
|
-
-1.2914855480194092
|
|
17
|
-
]
|
|
18
|
-
];
|
|
19
|
-
const LMS_to_linear_sRGB_M = [
|
|
20
|
-
[
|
|
21
|
-
4.076741636075959,
|
|
22
|
-
-3.307711539258062,
|
|
23
|
-
.2309699031821041
|
|
24
|
-
],
|
|
25
|
-
[
|
|
26
|
-
-1.2684379732850313,
|
|
27
|
-
2.6097573492876878,
|
|
28
|
-
-.3413193760026569
|
|
29
|
-
],
|
|
30
|
-
[
|
|
31
|
-
-.004196076138675526,
|
|
32
|
-
-.703418617935936,
|
|
33
|
-
1.7076146940746113
|
|
34
|
-
]
|
|
35
|
-
];
|
|
36
|
-
const OKLab_to_linear_sRGB_coefficients = [
|
|
37
|
-
[[-1.8817030993265873, -.8093650129914302], [
|
|
38
|
-
1.19086277,
|
|
39
|
-
1.76576728,
|
|
40
|
-
.59662641,
|
|
41
|
-
.75515197,
|
|
42
|
-
.56771245
|
|
43
|
-
]],
|
|
44
|
-
[[1.8144407988010998, -1.194452667805235], [
|
|
45
|
-
.73956515,
|
|
46
|
-
-.45954404,
|
|
47
|
-
.08285427,
|
|
48
|
-
.12541073,
|
|
49
|
-
-.14503204
|
|
50
|
-
]],
|
|
51
|
-
[[.13110757611180954, 1.813339709266608], [
|
|
52
|
-
1.35733652,
|
|
53
|
-
-.00915799,
|
|
54
|
-
-1.1513021,
|
|
55
|
-
-.50559606,
|
|
56
|
-
.00692167
|
|
57
|
-
]]
|
|
58
|
-
];
|
|
59
|
-
const TAU = 2 * Math.PI;
|
|
60
|
-
const K1 = .206;
|
|
61
|
-
const K2 = .03;
|
|
62
|
-
const K3 = (1 + K1) / (1 + K2);
|
|
63
|
-
const constrainAngle = (angle) => (angle % 360 + 360) % 360;
|
|
64
|
-
const toeInv = (x) => (x ** 2 + K1 * x) / (K3 * (x + K2));
|
|
65
|
-
const dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
|
|
66
|
-
const dotXY = (a, b) => a[0] * b[0] + a[1] * b[1];
|
|
67
|
-
const transform = (input, matrix) => [
|
|
68
|
-
dot3(input, matrix[0]),
|
|
69
|
-
dot3(input, matrix[1]),
|
|
70
|
-
dot3(input, matrix[2])
|
|
71
|
-
];
|
|
72
|
-
const cubed3 = (lms) => [
|
|
73
|
-
lms[0] ** 3,
|
|
74
|
-
lms[1] ** 3,
|
|
75
|
-
lms[2] ** 3
|
|
76
|
-
];
|
|
77
|
-
const OKLabToLinearSRGB = (lab) => {
|
|
78
|
-
return transform(cubed3(transform(lab, OKLab_to_LMS_M)), LMS_to_linear_sRGB_M);
|
|
79
|
-
};
|
|
80
|
-
const sRGBLinearToGamma = (val) => {
|
|
81
|
-
const sign = val < 0 ? -1 : 1;
|
|
82
|
-
const abs = Math.abs(val);
|
|
83
|
-
return abs > .0031308 ? sign * (1.055 * Math.pow(abs, 1 / 2.4) - .055) : 12.92 * val;
|
|
84
|
-
};
|
|
85
|
-
const computeMaxSaturationOKLC = (a, b) => {
|
|
86
|
-
const okCoeff = OKLab_to_linear_sRGB_coefficients;
|
|
87
|
-
const lmsToRgb = LMS_to_linear_sRGB_M;
|
|
88
|
-
const tmp2 = [a, b];
|
|
89
|
-
const tmp3 = [
|
|
90
|
-
0,
|
|
91
|
-
a,
|
|
92
|
-
b
|
|
93
|
-
];
|
|
94
|
-
let chnlCoeff;
|
|
95
|
-
let chnlLMS;
|
|
96
|
-
if (dotXY(okCoeff[0][0], tmp2) > 1) {
|
|
97
|
-
chnlCoeff = okCoeff[0][1];
|
|
98
|
-
chnlLMS = lmsToRgb[0];
|
|
99
|
-
} else if (dotXY(okCoeff[1][0], tmp2) > 1) {
|
|
100
|
-
chnlCoeff = okCoeff[1][1];
|
|
101
|
-
chnlLMS = lmsToRgb[1];
|
|
102
|
-
} else {
|
|
103
|
-
chnlCoeff = okCoeff[2][1];
|
|
104
|
-
chnlLMS = lmsToRgb[2];
|
|
105
|
-
}
|
|
106
|
-
const [k0, k1, k2, k3, k4] = chnlCoeff;
|
|
107
|
-
const [wl, wm, ws] = chnlLMS;
|
|
108
|
-
let sat = k0 + k1 * a + k2 * b + k3 * (a * a) + k4 * a * b;
|
|
109
|
-
const dotYZ = (mat, vec) => mat[1] * vec[1] + mat[2] * vec[2];
|
|
110
|
-
const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);
|
|
111
|
-
const km = dotYZ(OKLab_to_LMS_M[1], tmp3);
|
|
112
|
-
const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);
|
|
113
|
-
const l_ = 1 + sat * kl;
|
|
114
|
-
const m_ = 1 + sat * km;
|
|
115
|
-
const s_ = 1 + sat * ks;
|
|
116
|
-
const l = l_ ** 3;
|
|
117
|
-
const m = m_ ** 3;
|
|
118
|
-
const s = s_ ** 3;
|
|
119
|
-
const lds = 3 * kl * l_ * l_;
|
|
120
|
-
const mds = 3 * km * m_ * m_;
|
|
121
|
-
const sds = 3 * ks * s_ * s_;
|
|
122
|
-
const lds2 = 6 * kl * kl * l_;
|
|
123
|
-
const mds2 = 6 * km * km * m_;
|
|
124
|
-
const sds2 = 6 * ks * ks * s_;
|
|
125
|
-
const f = wl * l + wm * m + ws * s;
|
|
126
|
-
const f1 = wl * lds + wm * mds + ws * sds;
|
|
127
|
-
const f2 = wl * lds2 + wm * mds2 + ws * sds2;
|
|
128
|
-
sat = sat - f * f1 / (f1 * f1 - .5 * f * f2);
|
|
129
|
-
return sat;
|
|
130
|
-
};
|
|
131
|
-
const findCuspOKLCH = (a, b) => {
|
|
132
|
-
const S_cusp = computeMaxSaturationOKLC(a, b);
|
|
133
|
-
const rgb_at_max = OKLabToLinearSRGB([
|
|
134
|
-
1,
|
|
135
|
-
S_cusp * a,
|
|
136
|
-
S_cusp * b
|
|
137
|
-
]);
|
|
138
|
-
const L_cusp = Math.cbrt(1 / Math.max(Math.max(rgb_at_max[0], rgb_at_max[1]), Math.max(rgb_at_max[2], 0)));
|
|
139
|
-
return [L_cusp, L_cusp * S_cusp];
|
|
140
|
-
};
|
|
141
|
-
const findGamutIntersectionOKLCH = (a, b, l1, c1, l0, cusp) => {
|
|
142
|
-
const lmsToRgb = LMS_to_linear_sRGB_M;
|
|
143
|
-
const tmp3 = [
|
|
144
|
-
0,
|
|
145
|
-
a,
|
|
146
|
-
b
|
|
147
|
-
];
|
|
148
|
-
const floatMax = Number.MAX_VALUE;
|
|
149
|
-
let t;
|
|
150
|
-
const dotYZ = (mat, vec) => mat[1] * vec[1] + mat[2] * vec[2];
|
|
151
|
-
const dotXYZ = (vec, x, y, z) => vec[0] * x + vec[1] * y + vec[2] * z;
|
|
152
|
-
if ((l1 - l0) * cusp[1] - (cusp[0] - l0) * c1 <= 0) {
|
|
153
|
-
const denom = c1 * cusp[0] + cusp[1] * (l0 - l1);
|
|
154
|
-
t = denom === 0 ? 0 : cusp[1] * l0 / denom;
|
|
155
|
-
} else {
|
|
156
|
-
const denom = c1 * (cusp[0] - 1) + cusp[1] * (l0 - l1);
|
|
157
|
-
t = denom === 0 ? 0 : cusp[1] * (l0 - 1) / denom;
|
|
158
|
-
const dl = l1 - l0;
|
|
159
|
-
const dc = c1;
|
|
160
|
-
const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);
|
|
161
|
-
const km = dotYZ(OKLab_to_LMS_M[1], tmp3);
|
|
162
|
-
const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);
|
|
163
|
-
const L = l0 * (1 - t) + t * l1;
|
|
164
|
-
const C = t * c1;
|
|
165
|
-
const l_ = L + C * kl;
|
|
166
|
-
const m_ = L + C * km;
|
|
167
|
-
const s_ = L + C * ks;
|
|
168
|
-
const l = l_ ** 3;
|
|
169
|
-
const m = m_ ** 3;
|
|
170
|
-
const s = s_ ** 3;
|
|
171
|
-
const ldt = 3 * (dl + dc * kl) * l_ * l_;
|
|
172
|
-
const mdt = 3 * (dl + dc * km) * m_ * m_;
|
|
173
|
-
const sdt = 3 * (dl + dc * ks) * s_ * s_;
|
|
174
|
-
const ldt2 = 6 * (dl + dc * kl) ** 2 * l_;
|
|
175
|
-
const mdt2 = 6 * (dl + dc * km) ** 2 * m_;
|
|
176
|
-
const sdt2 = 6 * (dl + dc * ks) ** 2 * s_;
|
|
177
|
-
const r_ = dotXYZ(lmsToRgb[0], l, m, s) - 1;
|
|
178
|
-
const r1 = dotXYZ(lmsToRgb[0], ldt, mdt, sdt);
|
|
179
|
-
const r2 = dotXYZ(lmsToRgb[0], ldt2, mdt2, sdt2);
|
|
180
|
-
const ur = r1 / (r1 * r1 - .5 * r_ * r2);
|
|
181
|
-
let tr = -r_ * ur;
|
|
182
|
-
const g_ = dotXYZ(lmsToRgb[1], l, m, s) - 1;
|
|
183
|
-
const g1 = dotXYZ(lmsToRgb[1], ldt, mdt, sdt);
|
|
184
|
-
const g2 = dotXYZ(lmsToRgb[1], ldt2, mdt2, sdt2);
|
|
185
|
-
const ug = g1 / (g1 * g1 - .5 * g_ * g2);
|
|
186
|
-
let tg = -g_ * ug;
|
|
187
|
-
const b_ = dotXYZ(lmsToRgb[2], l, m, s) - 1;
|
|
188
|
-
const b1 = dotXYZ(lmsToRgb[2], ldt, mdt, sdt);
|
|
189
|
-
const b2 = dotXYZ(lmsToRgb[2], ldt2, mdt2, sdt2);
|
|
190
|
-
const ub = b1 / (b1 * b1 - .5 * b_ * b2);
|
|
191
|
-
let tb = -b_ * ub;
|
|
192
|
-
tr = ur >= 0 ? tr : floatMax;
|
|
193
|
-
tg = ug >= 0 ? tg : floatMax;
|
|
194
|
-
tb = ub >= 0 ? tb : floatMax;
|
|
195
|
-
t += Math.min(tr, Math.min(tg, tb));
|
|
196
|
-
}
|
|
197
|
-
return t;
|
|
198
|
-
};
|
|
199
|
-
const computeSt = (cusp) => [cusp[1] / cusp[0], cusp[1] / (1 - cusp[0])];
|
|
200
|
-
const computeStMid = (a, b) => [.11516993 + 1 / (7.4477897 + 4.1590124 * b + a * (-2.19557347 + 1.75198401 * b + a * (-2.13704948 - 10.02301043 * b + a * (-4.24894561 + 5.38770819 * b + 4.69891013 * a)))), .11239642 + 1 / (1.6132032 - .68124379 * b + a * (.40370612 + .90148123 * b + a * (-.27087943 + .6122399 * b + a * (.00299215 - .45399568 * b - .14661872 * a))))];
|
|
201
|
-
const getCs = (L, a, b, cusp) => {
|
|
202
|
-
const cMax = findGamutIntersectionOKLCH(a, b, L, 1, L, cusp);
|
|
203
|
-
const stMax = computeSt(cusp);
|
|
204
|
-
const k = cMax / Math.min(L * stMax[0], (1 - L) * stMax[1]);
|
|
205
|
-
const stMid = computeStMid(a, b);
|
|
206
|
-
let ca = L * stMid[0];
|
|
207
|
-
let cb = (1 - L) * stMid[1];
|
|
208
|
-
const cMid = .9 * k * Math.sqrt(Math.sqrt(1 / (1 / ca ** 4 + 1 / cb ** 4)));
|
|
209
|
-
ca = L * .4;
|
|
210
|
-
cb = (1 - L) * .8;
|
|
211
|
-
return [
|
|
212
|
-
Math.sqrt(1 / (1 / ca ** 2 + 1 / cb ** 2)),
|
|
213
|
-
cMid,
|
|
214
|
-
cMax
|
|
215
|
-
];
|
|
216
|
-
};
|
|
217
|
-
const OKHSLToOKLab = (hsl) => {
|
|
218
|
-
let h = hsl[0];
|
|
219
|
-
const s = hsl[1];
|
|
220
|
-
const l = hsl[2];
|
|
221
|
-
const L = toeInv(l);
|
|
222
|
-
let a = 0;
|
|
223
|
-
let b = 0;
|
|
224
|
-
h = constrainAngle(h) / 360;
|
|
225
|
-
if (L !== 0 && L !== 1 && s !== 0) {
|
|
226
|
-
const a_ = Math.cos(TAU * h);
|
|
227
|
-
const b_ = Math.sin(TAU * h);
|
|
228
|
-
const [c0, cMid, cMax] = getCs(L, a_, b_, findCuspOKLCH(a_, b_));
|
|
229
|
-
const mid = .8;
|
|
230
|
-
const midInv = 1.25;
|
|
231
|
-
let t, k0, k1, k2;
|
|
232
|
-
if (s < mid) {
|
|
233
|
-
t = midInv * s;
|
|
234
|
-
k0 = 0;
|
|
235
|
-
k1 = mid * c0;
|
|
236
|
-
k2 = 1 - k1 / cMid;
|
|
237
|
-
} else {
|
|
238
|
-
t = 5 * (s - .8);
|
|
239
|
-
k0 = cMid;
|
|
240
|
-
k1 = .2 * cMid ** 2 * 1.25 ** 2 / c0;
|
|
241
|
-
k2 = 1 - k1 / (cMax - cMid);
|
|
242
|
-
}
|
|
243
|
-
const c = k0 + t * k1 / (1 - k2 * t);
|
|
244
|
-
a = c * a_;
|
|
245
|
-
b = c * b_;
|
|
246
|
-
}
|
|
247
|
-
return [
|
|
248
|
-
L,
|
|
249
|
-
a,
|
|
250
|
-
b
|
|
251
|
-
];
|
|
252
|
-
};
|
|
253
|
-
function okhslToSrgbInternal(h, s, l) {
|
|
254
|
-
const linearRGB = OKLabToLinearSRGB(OKHSLToOKLab([
|
|
255
|
-
h,
|
|
256
|
-
s,
|
|
257
|
-
l
|
|
258
|
-
]));
|
|
259
|
-
return [
|
|
260
|
-
sRGBLinearToGamma(linearRGB[0]),
|
|
261
|
-
sRGBLinearToGamma(linearRGB[1]),
|
|
262
|
-
sRGBLinearToGamma(linearRGB[2])
|
|
263
|
-
];
|
|
264
|
-
}
|
|
265
|
-
/**
|
|
266
|
-
* Convert OKHSL color string to RGB.
|
|
267
|
-
* Uses the same algorithm as the okhsl-plugin.
|
|
268
|
-
*/
|
|
269
|
-
function okhslToRgb(okhslStr) {
|
|
270
|
-
const match = okhslStr.match(/okhsl\(([^)]+)\)/i);
|
|
271
|
-
if (!match) return null;
|
|
272
|
-
const [colorPart, alphaPart] = match[1].trim().split("/");
|
|
273
|
-
const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
|
|
274
|
-
if (parts.length < 3) return null;
|
|
275
|
-
let h = parseFloat(parts[0]);
|
|
276
|
-
const hueStr = parts[0].toLowerCase();
|
|
277
|
-
if (hueStr.endsWith("turn")) h = parseFloat(hueStr) * 360;
|
|
278
|
-
else if (hueStr.endsWith("rad")) h = parseFloat(hueStr) * 180 / Math.PI;
|
|
279
|
-
else if (hueStr.endsWith("deg")) h = parseFloat(hueStr);
|
|
280
|
-
const parsePercent = (val) => {
|
|
281
|
-
const num = parseFloat(val);
|
|
282
|
-
return val.includes("%") ? num / 100 : num;
|
|
283
|
-
};
|
|
284
|
-
const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
|
|
285
|
-
const l = Math.max(0, Math.min(1, parsePercent(parts[2])));
|
|
286
|
-
const [r, g, b] = okhslToSrgbInternal(h, s, l);
|
|
287
|
-
const r255 = Math.round(Math.max(0, Math.min(1, r)) * 255);
|
|
288
|
-
const g255 = Math.round(Math.max(0, Math.min(1, g)) * 255);
|
|
289
|
-
const b255 = Math.round(Math.max(0, Math.min(1, b)) * 255);
|
|
290
|
-
if (alphaPart) return `rgba(${r255}, ${g255}, ${b255}, ${parseFloat(alphaPart.trim())})`;
|
|
291
|
-
return `rgb(${r255} ${g255} ${b255})`;
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
//#endregion
|
|
295
|
-
export { okhslToRgb };
|
|
296
|
-
//# sourceMappingURL=okhsl-to-rgb.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"okhsl-to-rgb.mjs","names":[],"sources":["../../src/utils/okhsl-to-rgb.ts"],"sourcesContent":["// ============================================================================\n// OKHSL to RGB conversion (inlined from okhsl-plugin for static conversion)\n// ============================================================================\n\ntype Vec3 = [number, number, number];\n\n// OKHSL conversion internals (from texel-color, same as okhsl-plugin)\nconst OKLab_to_LMS_M: Vec3[] = [\n [1.0, 0.3963377773761749, 0.2158037573099136],\n [1.0, -0.1055613458156586, -0.0638541728258133],\n [1.0, -0.0894841775298119, -1.2914855480194092],\n];\n\nconst LMS_to_linear_sRGB_M: Vec3[] = [\n [4.076741636075959, -3.307711539258062, 0.2309699031821041],\n [-1.2684379732850313, 2.6097573492876878, -0.3413193760026569],\n [-0.004196076138675526, -0.703418617935936, 1.7076146940746113],\n];\n\nconst OKLab_to_linear_sRGB_coefficients: [\n [[number, number], number[]],\n [[number, number], number[]],\n [[number, number], number[]],\n] = [\n [\n [-1.8817030993265873, -0.8093650129914302],\n [1.19086277, 1.76576728, 0.59662641, 0.75515197, 0.56771245],\n ],\n [\n [1.8144407988010998, -1.194452667805235],\n [0.73956515, -0.45954404, 0.08285427, 0.12541073, -0.14503204],\n ],\n [\n [0.13110757611180954, 1.813339709266608],\n [1.35733652, -0.00915799, -1.1513021, -0.50559606, 0.00692167],\n ],\n];\n\nconst TAU = 2 * Math.PI;\nconst K1 = 0.206;\nconst K2 = 0.03;\nconst K3 = (1.0 + K1) / (1.0 + K2);\n\nconst constrainAngle = (angle: number): number => ((angle % 360) + 360) % 360;\nconst toeInv = (x: number): number => (x ** 2 + K1 * x) / (K3 * (x + K2));\nconst dot3 = (a: Vec3, b: Vec3): number =>\n a[0] * b[0] + a[1] * b[1] + a[2] * b[2];\nconst dotXY = (a: [number, number], b: [number, number]): number =>\n a[0] * b[0] + a[1] * b[1];\nconst transform = (input: Vec3, matrix: Vec3[]): Vec3 => [\n dot3(input, matrix[0]),\n dot3(input, matrix[1]),\n dot3(input, matrix[2]),\n];\nconst cubed3 = (lms: Vec3): Vec3 => [lms[0] ** 3, lms[1] ** 3, lms[2] ** 3];\n\nconst OKLabToLinearSRGB = (lab: Vec3): Vec3 => {\n const lms = transform(lab, OKLab_to_LMS_M);\n return transform(cubed3(lms), LMS_to_linear_sRGB_M);\n};\n\nconst sRGBLinearToGamma = (val: number): number => {\n const sign = val < 0 ? -1 : 1;\n const abs = Math.abs(val);\n return abs > 0.0031308\n ? sign * (1.055 * Math.pow(abs, 1 / 2.4) - 0.055)\n : 12.92 * val;\n};\n\nconst computeMaxSaturationOKLC = (a: number, b: number): number => {\n const okCoeff = OKLab_to_linear_sRGB_coefficients;\n const lmsToRgb = LMS_to_linear_sRGB_M;\n const tmp2: [number, number] = [a, b];\n const tmp3: Vec3 = [0, a, b];\n\n let chnlCoeff: number[];\n let chnlLMS: Vec3;\n\n if (dotXY(okCoeff[0][0], tmp2) > 1) {\n chnlCoeff = okCoeff[0][1];\n chnlLMS = lmsToRgb[0];\n } else if (dotXY(okCoeff[1][0], tmp2) > 1) {\n chnlCoeff = okCoeff[1][1];\n chnlLMS = lmsToRgb[1];\n } else {\n chnlCoeff = okCoeff[2][1];\n chnlLMS = lmsToRgb[2];\n }\n\n const [k0, k1, k2, k3, k4] = chnlCoeff;\n const [wl, wm, ws] = chnlLMS;\n\n let sat = k0 + k1 * a + k2 * b + k3 * (a * a) + k4 * a * b;\n\n const dotYZ = (mat: Vec3, vec: Vec3): number =>\n mat[1] * vec[1] + mat[2] * vec[2];\n\n const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);\n const km = dotYZ(OKLab_to_LMS_M[1], tmp3);\n const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);\n\n const l_ = 1.0 + sat * kl;\n const m_ = 1.0 + sat * km;\n const s_ = 1.0 + sat * ks;\n\n const l = l_ ** 3;\n const m = m_ ** 3;\n const s = s_ ** 3;\n\n const lds = 3.0 * kl * l_ * l_;\n const mds = 3.0 * km * m_ * m_;\n const sds = 3.0 * ks * s_ * s_;\n\n const lds2 = 6.0 * kl * kl * l_;\n const mds2 = 6.0 * km * km * m_;\n const sds2 = 6.0 * ks * ks * s_;\n\n const f = wl * l + wm * m + ws * s;\n const f1 = wl * lds + wm * mds + ws * sds;\n const f2 = wl * lds2 + wm * mds2 + ws * sds2;\n\n sat = sat - (f * f1) / (f1 * f1 - 0.5 * f * f2);\n\n return sat;\n};\n\nconst findCuspOKLCH = (a: number, b: number): [number, number] => {\n const S_cusp = computeMaxSaturationOKLC(a, b);\n const lab: Vec3 = [1, S_cusp * a, S_cusp * b];\n const rgb_at_max = OKLabToLinearSRGB(lab);\n const L_cusp = Math.cbrt(\n 1 /\n Math.max(\n Math.max(rgb_at_max[0], rgb_at_max[1]),\n Math.max(rgb_at_max[2], 0.0),\n ),\n );\n return [L_cusp, L_cusp * S_cusp];\n};\n\nconst findGamutIntersectionOKLCH = (\n a: number,\n b: number,\n l1: number,\n c1: number,\n l0: number,\n cusp: [number, number],\n): number => {\n const lmsToRgb = LMS_to_linear_sRGB_M;\n const tmp3: Vec3 = [0, a, b];\n const floatMax = Number.MAX_VALUE;\n\n let t: number;\n\n const dotYZ = (mat: Vec3, vec: Vec3): number =>\n mat[1] * vec[1] + mat[2] * vec[2];\n const dotXYZ = (vec: Vec3, x: number, y: number, z: number): number =>\n vec[0] * x + vec[1] * y + vec[2] * z;\n\n if ((l1 - l0) * cusp[1] - (cusp[0] - l0) * c1 <= 0.0) {\n const denom = c1 * cusp[0] + cusp[1] * (l0 - l1);\n t = denom === 0 ? 0 : (cusp[1] * l0) / denom;\n } else {\n const denom = c1 * (cusp[0] - 1.0) + cusp[1] * (l0 - l1);\n t = denom === 0 ? 0 : (cusp[1] * (l0 - 1.0)) / denom;\n\n const dl = l1 - l0;\n const dc = c1;\n const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);\n const km = dotYZ(OKLab_to_LMS_M[1], tmp3);\n const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);\n\n const L = l0 * (1.0 - t) + t * l1;\n const C = t * c1;\n\n const l_ = L + C * kl;\n const m_ = L + C * km;\n const s_ = L + C * ks;\n\n const l = l_ ** 3;\n const m = m_ ** 3;\n const s = s_ ** 3;\n\n const ldt = 3 * (dl + dc * kl) * l_ * l_;\n const mdt = 3 * (dl + dc * km) * m_ * m_;\n const sdt = 3 * (dl + dc * ks) * s_ * s_;\n\n const ldt2 = 6 * (dl + dc * kl) ** 2 * l_;\n const mdt2 = 6 * (dl + dc * km) ** 2 * m_;\n const sdt2 = 6 * (dl + dc * ks) ** 2 * s_;\n\n const r_ = dotXYZ(lmsToRgb[0], l, m, s) - 1;\n const r1 = dotXYZ(lmsToRgb[0], ldt, mdt, sdt);\n const r2 = dotXYZ(lmsToRgb[0], ldt2, mdt2, sdt2);\n const ur = r1 / (r1 * r1 - 0.5 * r_ * r2);\n let tr = -r_ * ur;\n\n const g_ = dotXYZ(lmsToRgb[1], l, m, s) - 1;\n const g1 = dotXYZ(lmsToRgb[1], ldt, mdt, sdt);\n const g2 = dotXYZ(lmsToRgb[1], ldt2, mdt2, sdt2);\n const ug = g1 / (g1 * g1 - 0.5 * g_ * g2);\n let tg = -g_ * ug;\n\n const b_ = dotXYZ(lmsToRgb[2], l, m, s) - 1;\n const b1 = dotXYZ(lmsToRgb[2], ldt, mdt, sdt);\n const b2 = dotXYZ(lmsToRgb[2], ldt2, mdt2, sdt2);\n const ub = b1 / (b1 * b1 - 0.5 * b_ * b2);\n let tb = -b_ * ub;\n\n tr = ur >= 0.0 ? tr : floatMax;\n tg = ug >= 0.0 ? tg : floatMax;\n tb = ub >= 0.0 ? tb : floatMax;\n\n t += Math.min(tr, Math.min(tg, tb));\n }\n\n return t;\n};\n\nconst computeSt = (cusp: [number, number]): [number, number] => [\n cusp[1] / cusp[0],\n cusp[1] / (1 - cusp[0]),\n];\n\nconst computeStMid = (a: number, b: number): [number, number] => [\n 0.11516993 +\n 1.0 /\n (7.4477897 +\n 4.1590124 * b +\n a *\n (-2.19557347 +\n 1.75198401 * b +\n a *\n (-2.13704948 -\n 10.02301043 * b +\n a * (-4.24894561 + 5.38770819 * b + 4.69891013 * a)))),\n 0.11239642 +\n 1.0 /\n (1.6132032 -\n 0.68124379 * b +\n a *\n (0.40370612 +\n 0.90148123 * b +\n a *\n (-0.27087943 +\n 0.6122399 * b +\n a * (0.00299215 - 0.45399568 * b - 0.14661872 * a)))),\n];\n\nconst getCs = (\n L: number,\n a: number,\n b: number,\n cusp: [number, number],\n): [number, number, number] => {\n const cMax = findGamutIntersectionOKLCH(a, b, L, 1, L, cusp);\n const stMax = computeSt(cusp);\n const k = cMax / Math.min(L * stMax[0], (1 - L) * stMax[1]);\n const stMid = computeStMid(a, b);\n let ca = L * stMid[0];\n let cb = (1.0 - L) * stMid[1];\n const cMid =\n 0.9 * k * Math.sqrt(Math.sqrt(1.0 / (1.0 / ca ** 4 + 1.0 / cb ** 4)));\n ca = L * 0.4;\n cb = (1.0 - L) * 0.8;\n const c0 = Math.sqrt(1.0 / (1.0 / ca ** 2 + 1.0 / cb ** 2));\n return [c0, cMid, cMax];\n};\n\nconst OKHSLToOKLab = (hsl: Vec3): Vec3 => {\n let h = hsl[0];\n const s = hsl[1];\n const l = hsl[2];\n\n const L = toeInv(l);\n let a = 0;\n let b = 0;\n\n h = constrainAngle(h) / 360.0;\n\n if (L !== 0.0 && L !== 1.0 && s !== 0) {\n const a_ = Math.cos(TAU * h);\n const b_ = Math.sin(TAU * h);\n\n const cusp = findCuspOKLCH(a_, b_);\n const Cs = getCs(L, a_, b_, cusp);\n const [c0, cMid, cMax] = Cs;\n\n const mid = 0.8;\n const midInv = 1.25;\n let t: number, k0: number, k1: number, k2: number;\n\n if (s < mid) {\n t = midInv * s;\n k0 = 0.0;\n k1 = mid * c0;\n k2 = 1.0 - k1 / cMid;\n } else {\n t = 5 * (s - 0.8);\n k0 = cMid;\n k1 = (0.2 * cMid ** 2 * 1.25 ** 2) / c0;\n k2 = 1.0 - k1 / (cMax - cMid);\n }\n\n const c = k0 + (t * k1) / (1.0 - k2 * t);\n a = c * a_;\n b = c * b_;\n }\n\n return [L, a, b];\n};\n\nfunction okhslToSrgbInternal(h: number, s: number, l: number): Vec3 {\n const oklab = OKHSLToOKLab([h, s, l]);\n const linearRGB = OKLabToLinearSRGB(oklab);\n return [\n sRGBLinearToGamma(linearRGB[0]),\n sRGBLinearToGamma(linearRGB[1]),\n sRGBLinearToGamma(linearRGB[2]),\n ];\n}\n\n/**\n * Convert OKHSL color string to RGB.\n * Uses the same algorithm as the okhsl-plugin.\n */\nexport function okhslToRgb(okhslStr: string): string | null {\n const match = okhslStr.match(/okhsl\\(([^)]+)\\)/i);\n if (!match) return null;\n\n const inner = match[1].trim();\n const [colorPart, alphaPart] = inner.split('/');\n const parts = colorPart\n .trim()\n .split(/[,\\s]+/)\n .filter(Boolean);\n\n if (parts.length < 3) return null;\n\n // Parse hue (can have units)\n let h = parseFloat(parts[0]);\n const hueStr = parts[0].toLowerCase();\n if (hueStr.endsWith('turn')) h = parseFloat(hueStr) * 360;\n else if (hueStr.endsWith('rad')) h = (parseFloat(hueStr) * 180) / Math.PI;\n else if (hueStr.endsWith('deg')) h = parseFloat(hueStr);\n\n // Parse saturation and lightness (percentages)\n const parsePercent = (val: string): number => {\n const num = parseFloat(val);\n return val.includes('%') ? num / 100 : num;\n };\n const s = Math.max(0, Math.min(1, parsePercent(parts[1])));\n const l = Math.max(0, Math.min(1, parsePercent(parts[2])));\n\n // OKHSL to sRGB conversion\n const [r, g, b] = okhslToSrgbInternal(h, s, l);\n\n // Convert to 0-255 range\n const r255 = Math.round(Math.max(0, Math.min(1, r)) * 255);\n const g255 = Math.round(Math.max(0, Math.min(1, g)) * 255);\n const b255 = Math.round(Math.max(0, Math.min(1, b)) * 255);\n\n if (alphaPart) {\n const alpha = parseFloat(alphaPart.trim());\n return `rgba(${r255}, ${g255}, ${b255}, ${alpha})`;\n }\n\n return `rgb(${r255} ${g255} ${b255})`;\n}\n"],"mappings":";AAOA,MAAM,iBAAyB;CAC7B;EAAC;EAAK;EAAoB;EAAmB;CAC7C;EAAC;EAAK;EAAqB;EAAoB;CAC/C;EAAC;EAAK;EAAqB;EAAoB;CAChD;AAED,MAAM,uBAA+B;CACnC;EAAC;EAAmB;EAAoB;EAAmB;CAC3D;EAAC;EAAqB;EAAoB;EAAoB;CAC9D;EAAC;EAAuB;EAAoB;EAAmB;CAChE;AAED,MAAM,oCAIF;CACF,CACE,CAAC,qBAAqB,mBAAoB,EAC1C;EAAC;EAAY;EAAY;EAAY;EAAY;EAAW,CAC7D;CACD,CACE,CAAC,oBAAoB,mBAAmB,EACxC;EAAC;EAAY;EAAa;EAAY;EAAY;EAAY,CAC/D;CACD,CACE,CAAC,oBAAqB,kBAAkB,EACxC;EAAC;EAAY;EAAa;EAAY;EAAa;EAAW,CAC/D;CACF;AAED,MAAM,MAAM,IAAI,KAAK;AACrB,MAAM,KAAK;AACX,MAAM,KAAK;AACX,MAAM,MAAM,IAAM,OAAO,IAAM;AAE/B,MAAM,kBAAkB,WAA4B,QAAQ,MAAO,OAAO;AAC1E,MAAM,UAAU,OAAuB,KAAK,IAAI,KAAK,MAAM,MAAM,IAAI;AACrE,MAAM,QAAQ,GAAS,MACrB,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;AACvC,MAAM,SAAS,GAAqB,MAClC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;AACzB,MAAM,aAAa,OAAa,WAAyB;CACvD,KAAK,OAAO,OAAO,GAAG;CACtB,KAAK,OAAO,OAAO,GAAG;CACtB,KAAK,OAAO,OAAO,GAAG;CACvB;AACD,MAAM,UAAU,QAAoB;CAAC,IAAI,MAAM;CAAG,IAAI,MAAM;CAAG,IAAI,MAAM;CAAE;AAE3E,MAAM,qBAAqB,QAAoB;AAE7C,QAAO,UAAU,OADL,UAAU,KAAK,eAAe,CACd,EAAE,qBAAqB;;AAGrD,MAAM,qBAAqB,QAAwB;CACjD,MAAM,OAAO,MAAM,IAAI,KAAK;CAC5B,MAAM,MAAM,KAAK,IAAI,IAAI;AACzB,QAAO,MAAM,WACT,QAAQ,QAAQ,KAAK,IAAI,KAAK,IAAI,IAAI,GAAG,QACzC,QAAQ;;AAGd,MAAM,4BAA4B,GAAW,MAAsB;CACjE,MAAM,UAAU;CAChB,MAAM,WAAW;CACjB,MAAM,OAAyB,CAAC,GAAG,EAAE;CACrC,MAAM,OAAa;EAAC;EAAG;EAAG;EAAE;CAE5B,IAAI;CACJ,IAAI;AAEJ,KAAI,MAAM,QAAQ,GAAG,IAAI,KAAK,GAAG,GAAG;AAClC,cAAY,QAAQ,GAAG;AACvB,YAAU,SAAS;YACV,MAAM,QAAQ,GAAG,IAAI,KAAK,GAAG,GAAG;AACzC,cAAY,QAAQ,GAAG;AACvB,YAAU,SAAS;QACd;AACL,cAAY,QAAQ,GAAG;AACvB,YAAU,SAAS;;CAGrB,MAAM,CAAC,IAAI,IAAI,IAAI,IAAI,MAAM;CAC7B,MAAM,CAAC,IAAI,IAAI,MAAM;CAErB,IAAI,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI;CAEzD,MAAM,SAAS,KAAW,QACxB,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI;CAEjC,MAAM,KAAK,MAAM,eAAe,IAAI,KAAK;CACzC,MAAM,KAAK,MAAM,eAAe,IAAI,KAAK;CACzC,MAAM,KAAK,MAAM,eAAe,IAAI,KAAK;CAEzC,MAAM,KAAK,IAAM,MAAM;CACvB,MAAM,KAAK,IAAM,MAAM;CACvB,MAAM,KAAK,IAAM,MAAM;CAEvB,MAAM,IAAI,MAAM;CAChB,MAAM,IAAI,MAAM;CAChB,MAAM,IAAI,MAAM;CAEhB,MAAM,MAAM,IAAM,KAAK,KAAK;CAC5B,MAAM,MAAM,IAAM,KAAK,KAAK;CAC5B,MAAM,MAAM,IAAM,KAAK,KAAK;CAE5B,MAAM,OAAO,IAAM,KAAK,KAAK;CAC7B,MAAM,OAAO,IAAM,KAAK,KAAK;CAC7B,MAAM,OAAO,IAAM,KAAK,KAAK;CAE7B,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK;CACjC,MAAM,KAAK,KAAK,MAAM,KAAK,MAAM,KAAK;CACtC,MAAM,KAAK,KAAK,OAAO,KAAK,OAAO,KAAK;AAExC,OAAM,MAAO,IAAI,MAAO,KAAK,KAAK,KAAM,IAAI;AAE5C,QAAO;;AAGT,MAAM,iBAAiB,GAAW,MAAgC;CAChE,MAAM,SAAS,yBAAyB,GAAG,EAAE;CAE7C,MAAM,aAAa,kBADD;EAAC;EAAG,SAAS;EAAG,SAAS;EAAE,CACJ;CACzC,MAAM,SAAS,KAAK,KAClB,IACE,KAAK,IACH,KAAK,IAAI,WAAW,IAAI,WAAW,GAAG,EACtC,KAAK,IAAI,WAAW,IAAI,EAAI,CAC7B,CACJ;AACD,QAAO,CAAC,QAAQ,SAAS,OAAO;;AAGlC,MAAM,8BACJ,GACA,GACA,IACA,IACA,IACA,SACW;CACX,MAAM,WAAW;CACjB,MAAM,OAAa;EAAC;EAAG;EAAG;EAAE;CAC5B,MAAM,WAAW,OAAO;CAExB,IAAI;CAEJ,MAAM,SAAS,KAAW,QACxB,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI;CACjC,MAAM,UAAU,KAAW,GAAW,GAAW,MAC/C,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK;AAErC,MAAK,KAAK,MAAM,KAAK,MAAM,KAAK,KAAK,MAAM,MAAM,GAAK;EACpD,MAAM,QAAQ,KAAK,KAAK,KAAK,KAAK,MAAM,KAAK;AAC7C,MAAI,UAAU,IAAI,IAAK,KAAK,KAAK,KAAM;QAClC;EACL,MAAM,QAAQ,MAAM,KAAK,KAAK,KAAO,KAAK,MAAM,KAAK;AACrD,MAAI,UAAU,IAAI,IAAK,KAAK,MAAM,KAAK,KAAQ;EAE/C,MAAM,KAAK,KAAK;EAChB,MAAM,KAAK;EACX,MAAM,KAAK,MAAM,eAAe,IAAI,KAAK;EACzC,MAAM,KAAK,MAAM,eAAe,IAAI,KAAK;EACzC,MAAM,KAAK,MAAM,eAAe,IAAI,KAAK;EAEzC,MAAM,IAAI,MAAM,IAAM,KAAK,IAAI;EAC/B,MAAM,IAAI,IAAI;EAEd,MAAM,KAAK,IAAI,IAAI;EACnB,MAAM,KAAK,IAAI,IAAI;EACnB,MAAM,KAAK,IAAI,IAAI;EAEnB,MAAM,IAAI,MAAM;EAChB,MAAM,IAAI,MAAM;EAChB,MAAM,IAAI,MAAM;EAEhB,MAAM,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK;EACtC,MAAM,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK;EACtC,MAAM,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK;EAEtC,MAAM,OAAO,KAAK,KAAK,KAAK,OAAO,IAAI;EACvC,MAAM,OAAO,KAAK,KAAK,KAAK,OAAO,IAAI;EACvC,MAAM,OAAO,KAAK,KAAK,KAAK,OAAO,IAAI;EAEvC,MAAM,KAAK,OAAO,SAAS,IAAI,GAAG,GAAG,EAAE,GAAG;EAC1C,MAAM,KAAK,OAAO,SAAS,IAAI,KAAK,KAAK,IAAI;EAC7C,MAAM,KAAK,OAAO,SAAS,IAAI,MAAM,MAAM,KAAK;EAChD,MAAM,KAAK,MAAM,KAAK,KAAK,KAAM,KAAK;EACtC,IAAI,KAAK,CAAC,KAAK;EAEf,MAAM,KAAK,OAAO,SAAS,IAAI,GAAG,GAAG,EAAE,GAAG;EAC1C,MAAM,KAAK,OAAO,SAAS,IAAI,KAAK,KAAK,IAAI;EAC7C,MAAM,KAAK,OAAO,SAAS,IAAI,MAAM,MAAM,KAAK;EAChD,MAAM,KAAK,MAAM,KAAK,KAAK,KAAM,KAAK;EACtC,IAAI,KAAK,CAAC,KAAK;EAEf,MAAM,KAAK,OAAO,SAAS,IAAI,GAAG,GAAG,EAAE,GAAG;EAC1C,MAAM,KAAK,OAAO,SAAS,IAAI,KAAK,KAAK,IAAI;EAC7C,MAAM,KAAK,OAAO,SAAS,IAAI,MAAM,MAAM,KAAK;EAChD,MAAM,KAAK,MAAM,KAAK,KAAK,KAAM,KAAK;EACtC,IAAI,KAAK,CAAC,KAAK;AAEf,OAAK,MAAM,IAAM,KAAK;AACtB,OAAK,MAAM,IAAM,KAAK;AACtB,OAAK,MAAM,IAAM,KAAK;AAEtB,OAAK,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC;;AAGrC,QAAO;;AAGT,MAAM,aAAa,SAA6C,CAC9D,KAAK,KAAK,KAAK,IACf,KAAK,MAAM,IAAI,KAAK,IACrB;AAED,MAAM,gBAAgB,GAAW,MAAgC,CAC/D,YACE,KACG,YACC,YAAY,IACZ,KACG,cACC,aAAa,IACb,KACG,cACC,cAAc,IACd,KAAK,cAAc,aAAa,IAAI,aAAa,OAC/D,YACE,KACG,YACC,YAAa,IACb,KACG,YACC,YAAa,IACb,KACG,aACC,WAAY,IACZ,KAAK,YAAa,YAAa,IAAI,YAAa,MAC/D;AAED,MAAM,SACJ,GACA,GACA,GACA,SAC6B;CAC7B,MAAM,OAAO,2BAA2B,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK;CAC5D,MAAM,QAAQ,UAAU,KAAK;CAC7B,MAAM,IAAI,OAAO,KAAK,IAAI,IAAI,MAAM,KAAK,IAAI,KAAK,MAAM,GAAG;CAC3D,MAAM,QAAQ,aAAa,GAAG,EAAE;CAChC,IAAI,KAAK,IAAI,MAAM;CACnB,IAAI,MAAM,IAAM,KAAK,MAAM;CAC3B,MAAM,OACJ,KAAM,IAAI,KAAK,KAAK,KAAK,KAAK,KAAO,IAAM,MAAM,IAAI,IAAM,MAAM,GAAG,CAAC;AACvE,MAAK,IAAI;AACT,OAAM,IAAM,KAAK;AAEjB,QAAO;EADI,KAAK,KAAK,KAAO,IAAM,MAAM,IAAI,IAAM,MAAM,GAAG;EAC/C;EAAM;EAAK;;AAGzB,MAAM,gBAAgB,QAAoB;CACxC,IAAI,IAAI,IAAI;CACZ,MAAM,IAAI,IAAI;CACd,MAAM,IAAI,IAAI;CAEd,MAAM,IAAI,OAAO,EAAE;CACnB,IAAI,IAAI;CACR,IAAI,IAAI;AAER,KAAI,eAAe,EAAE,GAAG;AAExB,KAAI,MAAM,KAAO,MAAM,KAAO,MAAM,GAAG;EACrC,MAAM,KAAK,KAAK,IAAI,MAAM,EAAE;EAC5B,MAAM,KAAK,KAAK,IAAI,MAAM,EAAE;EAI5B,MAAM,CAAC,IAAI,MAAM,QADN,MAAM,GAAG,IAAI,IADX,cAAc,IAAI,GAAG,CACD;EAGjC,MAAM,MAAM;EACZ,MAAM,SAAS;EACf,IAAI,GAAW,IAAY,IAAY;AAEvC,MAAI,IAAI,KAAK;AACX,OAAI,SAAS;AACb,QAAK;AACL,QAAK,MAAM;AACX,QAAK,IAAM,KAAK;SACX;AACL,OAAI,KAAK,IAAI;AACb,QAAK;AACL,QAAM,KAAM,QAAQ,IAAI,QAAQ,IAAK;AACrC,QAAK,IAAM,MAAM,OAAO;;EAG1B,MAAM,IAAI,KAAM,IAAI,MAAO,IAAM,KAAK;AACtC,MAAI,IAAI;AACR,MAAI,IAAI;;AAGV,QAAO;EAAC;EAAG;EAAG;EAAE;;AAGlB,SAAS,oBAAoB,GAAW,GAAW,GAAiB;CAElE,MAAM,YAAY,kBADJ,aAAa;EAAC;EAAG;EAAG;EAAE,CAAC,CACK;AAC1C,QAAO;EACL,kBAAkB,UAAU,GAAG;EAC/B,kBAAkB,UAAU,GAAG;EAC/B,kBAAkB,UAAU,GAAG;EAChC;;;;;;AAOH,SAAgB,WAAW,UAAiC;CAC1D,MAAM,QAAQ,SAAS,MAAM,oBAAoB;AACjD,KAAI,CAAC,MAAO,QAAO;CAGnB,MAAM,CAAC,WAAW,aADJ,MAAM,GAAG,MAAM,CACQ,MAAM,IAAI;CAC/C,MAAM,QAAQ,UACX,MAAM,CACN,MAAM,SAAS,CACf,OAAO,QAAQ;AAElB,KAAI,MAAM,SAAS,EAAG,QAAO;CAG7B,IAAI,IAAI,WAAW,MAAM,GAAG;CAC5B,MAAM,SAAS,MAAM,GAAG,aAAa;AACrC,KAAI,OAAO,SAAS,OAAO,CAAE,KAAI,WAAW,OAAO,GAAG;UAC7C,OAAO,SAAS,MAAM,CAAE,KAAK,WAAW,OAAO,GAAG,MAAO,KAAK;UAC9D,OAAO,SAAS,MAAM,CAAE,KAAI,WAAW,OAAO;CAGvD,MAAM,gBAAgB,QAAwB;EAC5C,MAAM,MAAM,WAAW,IAAI;AAC3B,SAAO,IAAI,SAAS,IAAI,GAAG,MAAM,MAAM;;CAEzC,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,aAAa,MAAM,GAAG,CAAC,CAAC;CAC1D,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,aAAa,MAAM,GAAG,CAAC,CAAC;CAG1D,MAAM,CAAC,GAAG,GAAG,KAAK,oBAAoB,GAAG,GAAG,EAAE;CAG9C,MAAM,OAAO,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI;CAC1D,MAAM,OAAO,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI;CAC1D,MAAM,OAAO,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI;AAE1D,KAAI,UAEF,QAAO,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,IADxB,WAAW,UAAU,MAAM,CAAC,CACM;AAGlD,QAAO,OAAO,KAAK,GAAG,KAAK,GAAG,KAAK"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
//#region src/utils/process-tokens.ts
|
|
2
|
-
const devMode = process.env.NODE_ENV !== "production";
|
|
3
|
-
/**
|
|
4
|
-
* Convert HSL to RGB (sRGB).
|
|
5
|
-
* Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
|
|
6
|
-
* Same as used in CSS Color 4 spec.
|
|
7
|
-
*
|
|
8
|
-
* @param h - Hue in degrees (0-360)
|
|
9
|
-
* @param s - Saturation (0-1)
|
|
10
|
-
* @param l - Lightness (0-1)
|
|
11
|
-
* @returns RGB values in 0-255 range (may have fractional values)
|
|
12
|
-
*/
|
|
13
|
-
function hslToRgbValues(h, s, l) {
|
|
14
|
-
const a = s * Math.min(l, 1 - l);
|
|
15
|
-
const f = (n) => {
|
|
16
|
-
const k = (n + h / 30) % 12;
|
|
17
|
-
return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
|
|
18
|
-
};
|
|
19
|
-
return [
|
|
20
|
-
f(0) * 255,
|
|
21
|
-
f(8) * 255,
|
|
22
|
-
f(4) * 255
|
|
23
|
-
];
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
//#endregion
|
|
27
|
-
export { hslToRgbValues };
|
|
28
|
-
//# sourceMappingURL=process-tokens.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"process-tokens.mjs","names":[],"sources":["../../src/utils/process-tokens.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport type { Tokens, TokenValue } from '../types';\n\nimport { okhslToRgb } from './okhsl-to-rgb';\nimport {\n getRgbValuesFromRgbaString,\n hexToRgb,\n normalizeColorTokenValue,\n parseStyle,\n} from './styles';\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n/**\n * Parse HSL values from an hsl()/hsla() string.\n * Supports both comma-separated (legacy) and space-separated (modern) syntax:\n * hsl(200, 40%, 50%)\n * hsl(200 40% 50%)\n * hsl(200 40% 50% / 0.5)\n *\n * Returns [h, s, l] where h is 0-360, s and l are 0-1, or null if parsing fails.\n */\nfunction parseHslValues(str: string): [number, number, number] | null {\n const match = str.match(/hsla?\\(([^)]+)\\)/i);\n if (!match) return null;\n\n const inner = match[1].trim();\n // Split by slash first (for alpha), then handle color components\n const [colorPart] = inner.split('/');\n // Split by comma or whitespace\n const parts = colorPart\n .trim()\n .split(/[,\\s]+/)\n .filter(Boolean);\n\n if (parts.length < 3) return null;\n\n // Parse hue (can be unitless degrees, deg, turn, rad, or grad)\n let h = parseFloat(parts[0]);\n const hueStr = parts[0].toLowerCase();\n if (hueStr.endsWith('turn')) {\n h = parseFloat(hueStr) * 360;\n } else if (hueStr.endsWith('rad')) {\n h = (parseFloat(hueStr) * 180) / Math.PI;\n } else if (hueStr.endsWith('grad')) {\n h = parseFloat(hueStr) * 0.9; // 400 grad = 360 deg\n }\n // deg or unitless are already in degrees\n\n // Normalize hue to 0-360 range\n h = h % 360;\n if (h < 0) h += 360;\n\n // Parse saturation and lightness (percentages)\n const parsePercent = (val: string): number => {\n const num = parseFloat(val);\n return val.includes('%') ? num / 100 : num;\n };\n\n const s = Math.max(0, Math.min(1, parsePercent(parts[1])));\n const l = Math.max(0, Math.min(1, parsePercent(parts[2])));\n\n return [h, s, l];\n}\n\n/**\n * Convert HSL to RGB (sRGB).\n * Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative\n * Same as used in CSS Color 4 spec.\n *\n * @param h - Hue in degrees (0-360)\n * @param s - Saturation (0-1)\n * @param l - Lightness (0-1)\n * @returns RGB values in 0-255 range (may have fractional values)\n */\nexport function hslToRgbValues(\n h: number,\n s: number,\n l: number,\n): [number, number, number] {\n const a = s * Math.min(l, 1 - l);\n\n const f = (n: number): number => {\n const k = (n + h / 30) % 12;\n return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));\n };\n\n // Convert 0-1 range to 0-255\n return [f(0) * 255, f(8) * 255, f(4) * 255];\n}\n\n/**\n * Format a number to a string with up to 1 decimal place, removing trailing zeros.\n */\nfunction formatRgbComponent(n: number): string {\n return parseFloat(n.toFixed(1)).toString();\n}\n\n/**\n * Extract RGB triplet from a color value.\n * Returns the RGB values as a space-separated string (e.g., \"255 128 0\")\n * or a CSS variable reference for token colors.\n */\nfunction extractRgbValue(colorValue: string, parsedOutput: string): string {\n // If the parsed output references a color variable, use the -rgb variant\n const varMatch = parsedOutput.match(/var\\(--([a-z0-9-]+)-color\\)/);\n if (varMatch) {\n return `var(--${varMatch[1]}-color-rgb)`;\n }\n\n // For rgb(...) values, extract the triplet\n if (parsedOutput.startsWith('rgb(')) {\n const rgbValues = getRgbValuesFromRgbaString(parsedOutput);\n if (rgbValues && rgbValues.length >= 3) {\n return rgbValues.join(' ');\n }\n }\n\n // For hsl(...) values, convert to RGB triplet\n if (\n parsedOutput.startsWith('hsl(') ||\n parsedOutput.startsWith('hsla(') ||\n colorValue.startsWith('hsl(') ||\n colorValue.startsWith('hsla(')\n ) {\n // Try parsedOutput first, then original colorValue\n const hslValues =\n parseHslValues(parsedOutput) || parseHslValues(colorValue);\n if (hslValues) {\n const [r, g, b] = hslToRgbValues(\n hslValues[0],\n hslValues[1],\n hslValues[2],\n );\n return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;\n }\n }\n\n // For okhsl(...) values, convert to RGB triplet\n if (parsedOutput.startsWith('okhsl(') || colorValue.startsWith('okhsl(')) {\n // Try parsedOutput first, then original colorValue\n const rgbResult = okhslToRgb(parsedOutput) || okhslToRgb(colorValue);\n if (rgbResult) {\n const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n if (rgbValues && rgbValues.length >= 3) {\n return rgbValues.join(' ');\n }\n }\n }\n\n // For hex values, convert to RGB triplet\n if (colorValue.startsWith('#') && /^#[0-9a-fA-F]{3,8}$/.test(colorValue)) {\n const rgbResult = hexToRgb(colorValue);\n if (rgbResult) {\n const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n if (rgbValues && rgbValues.length >= 3) {\n return rgbValues.join(' ');\n }\n }\n }\n\n // Fallback: return the parsed output (may not be ideal but covers edge cases)\n return parsedOutput;\n}\n\n/**\n * Check if a value is a valid token value (string, number, or boolean - not object).\n * Returns false for `false` values (they mean \"skip this token\").\n */\nfunction isValidTokenValue(\n value: unknown,\n): value is Exclude<TokenValue, undefined | null | false> {\n if (value === undefined || value === null || value === false) {\n return false;\n }\n\n if (typeof value === 'object') {\n if (devMode) {\n console.warn(\n 'CubeUIKit: Object values are not allowed in tokens prop. ' +\n 'Tokens do not support state-based styling. Use a primitive value instead.',\n );\n }\n return false;\n }\n\n return (\n typeof value === 'string' ||\n typeof value === 'number' ||\n typeof value === 'boolean'\n );\n}\n\n/**\n * Process a single token value through the tasty parser.\n * Numbers are converted to strings; 0 stays as \"0\".\n */\nfunction processTokenValue(value: string | number): string {\n if (typeof value === 'number') {\n // 0 should remain as \"0\", not converted to any unit\n if (value === 0) {\n return '0';\n }\n return parseStyle(String(value)).output;\n }\n return parseStyle(value).output;\n}\n\n/**\n * Process tokens object into inline style properties.\n * - $name -> --name with parsed value\n * - #name -> --name-color AND --name-color-rgb with parsed values\n *\n * @param tokens - The tokens object to process\n * @returns CSSProperties object or undefined if no tokens to process\n */\nexport function processTokens(\n tokens: Tokens | undefined,\n): CSSProperties | undefined {\n if (!tokens) {\n return undefined;\n }\n\n const keys = Object.keys(tokens);\n if (keys.length === 0) {\n return undefined;\n }\n\n let result: Record<string, string> | undefined;\n\n for (const key of keys) {\n const value = tokens[key as keyof Tokens];\n\n // Skip undefined/null values\n if (!isValidTokenValue(value)) {\n continue;\n }\n\n if (key.startsWith('$')) {\n // Custom property token: $name -> --name\n const propName = `--${key.slice(1)}`;\n // Boolean true for custom properties converts to empty string (valid CSS value)\n const effectiveValue = value === true ? '' : value;\n const processedValue = processTokenValue(effectiveValue);\n\n if (!result) result = {};\n result[propName] = processedValue;\n } else if (key.startsWith('#')) {\n // Color token: #name -> --name-color and --name-color-rgb\n const colorName = key.slice(1);\n\n // Normalize color token value (true → 'transparent', false is already filtered by isValidTokenValue)\n const effectiveValue = normalizeColorTokenValue(value);\n // Skip if normalized to null (shouldn't happen since false is filtered by isValidTokenValue)\n if (effectiveValue === null) continue;\n\n const originalValue =\n typeof effectiveValue === 'number'\n ? String(effectiveValue)\n : effectiveValue;\n const lowerValue = originalValue.toLowerCase();\n const processedValue = processTokenValue(effectiveValue);\n\n if (!result) result = {};\n result[`--${colorName}-color`] = processedValue;\n\n // Skip RGB generation for #current values (currentcolor is dynamic, cannot extract RGB)\n // Match only #current or #current.opacity, not #current-theme or #currently-used\n if (/^#current(?:\\.|$)/i.test(lowerValue)) {\n continue;\n }\n\n result[`--${colorName}-color-rgb`] = extractRgbValue(\n originalValue,\n processedValue,\n );\n }\n }\n\n return result as CSSProperties | undefined;\n}\n\n/**\n * Stringify tokens for memoization key.\n */\nexport function stringifyTokens(tokens: Tokens | undefined): string {\n if (!tokens) return '';\n return JSON.stringify(tokens);\n}\n"],"mappings":";AAYA,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;;;;;;;;AAgEzC,SAAgB,eACd,GACA,GACA,GAC0B;CAC1B,MAAM,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,EAAE;CAEhC,MAAM,KAAK,MAAsB;EAC/B,MAAM,KAAK,IAAI,IAAI,MAAM;AACzB,SAAO,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;;AAIxD,QAAO;EAAC,EAAE,EAAE,GAAG;EAAK,EAAE,EAAE,GAAG;EAAK,EAAE,EAAE,GAAG;EAAI"}
|