@pathscale/ui 1.1.16 → 1.1.18
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.
|
@@ -98,10 +98,10 @@
|
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
.button--primary {
|
|
101
|
-
--button-bg: var(--color-
|
|
102
|
-
--button-bg-hover: color-mix(in oklab, var(--color-
|
|
103
|
-
--button-bg-pressed: color-mix(in oklab, var(--color-
|
|
104
|
-
--button-fg: var(--color-
|
|
101
|
+
--button-bg: var(--color-primary);
|
|
102
|
+
--button-bg-hover: color-mix(in oklab, var(--color-primary), #000 8%);
|
|
103
|
+
--button-bg-pressed: color-mix(in oklab, var(--color-primary), #000 12%);
|
|
104
|
+
--button-fg: var(--color-primary-content);
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
.button--secondary {
|
|
@@ -17,6 +17,53 @@ const checkCspAllowsInlineStyles = ()=>{
|
|
|
17
17
|
return cspAllowsInlineStyles;
|
|
18
18
|
};
|
|
19
19
|
const MIN_CHROMA_SCALE = 0.3;
|
|
20
|
+
function hslHueToOklchHue(hslHue) {
|
|
21
|
+
const h = (hslHue % 360 + 360) % 360;
|
|
22
|
+
const controlPoints = [
|
|
23
|
+
[
|
|
24
|
+
0,
|
|
25
|
+
29
|
|
26
|
+
],
|
|
27
|
+
[
|
|
28
|
+
30,
|
|
29
|
+
55
|
|
30
|
+
],
|
|
31
|
+
[
|
|
32
|
+
60,
|
|
33
|
+
100
|
|
34
|
+
],
|
|
35
|
+
[
|
|
36
|
+
120,
|
|
37
|
+
145
|
|
38
|
+
],
|
|
39
|
+
[
|
|
40
|
+
180,
|
|
41
|
+
195
|
|
42
|
+
],
|
|
43
|
+
[
|
|
44
|
+
240,
|
|
45
|
+
265
|
|
46
|
+
],
|
|
47
|
+
[
|
|
48
|
+
300,
|
|
49
|
+
330
|
|
50
|
+
],
|
|
51
|
+
[
|
|
52
|
+
360,
|
|
53
|
+
389
|
|
54
|
+
]
|
|
55
|
+
];
|
|
56
|
+
for(let i = 0; i < controlPoints.length - 1; i++){
|
|
57
|
+
const [h1, o1] = controlPoints[i];
|
|
58
|
+
const [h2, o2] = controlPoints[i + 1];
|
|
59
|
+
if (h >= h1 && h <= h2) {
|
|
60
|
+
const t = (h - h1) / (h2 - h1);
|
|
61
|
+
const oklchHue = o1 + t * (o2 - o1);
|
|
62
|
+
return (oklchHue % 360 + 360) % 360;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return h;
|
|
66
|
+
}
|
|
20
67
|
const PRIMARY_SETTINGS = {
|
|
21
68
|
light: {
|
|
22
69
|
"--color-primary": {
|
|
@@ -317,7 +364,7 @@ function getResolvedTheme() {
|
|
|
317
364
|
function applyHueShift(targetHue, saturation = 100, lightnessOffset = 0) {
|
|
318
365
|
if (!checkCspAllowsInlineStyles()) return;
|
|
319
366
|
const root = document.documentElement;
|
|
320
|
-
const oklchHue = (targetHue
|
|
367
|
+
const oklchHue = hslHueToOklchHue(targetHue);
|
|
321
368
|
const chromaScale = 0 === saturation ? 0 : MIN_CHROMA_SCALE + saturation / 100 * (1 - MIN_CHROMA_SCALE);
|
|
322
369
|
const resolvedTheme = getResolvedTheme();
|
|
323
370
|
const clampL = (l)=>Math.max(0, Math.min(100, l + lightnessOffset));
|