@pathscale/ui 1.1.26 → 1.1.27
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.
|
@@ -26,6 +26,69 @@ const CONTENT_VARS = [
|
|
|
26
26
|
"--nf-on-accent",
|
|
27
27
|
"--color-nf-on-accent"
|
|
28
28
|
];
|
|
29
|
+
const BACKGROUND_VARS = {
|
|
30
|
+
light: [
|
|
31
|
+
{
|
|
32
|
+
name: "--color-base-100",
|
|
33
|
+
anchor: "oklch(98% 0.001 106.423)",
|
|
34
|
+
mix: 4
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: "--color-base-200",
|
|
38
|
+
anchor: "oklch(97% 0.001 106.424)",
|
|
39
|
+
mix: 5
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: "--color-base-300",
|
|
43
|
+
anchor: "oklch(92% 0.003 48.717)",
|
|
44
|
+
mix: 7
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: "--gradient-start",
|
|
48
|
+
anchor: "#ffffff",
|
|
49
|
+
mix: 18
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
name: "--gradient-end",
|
|
53
|
+
anchor: "#f5f5f5",
|
|
54
|
+
mix: 10
|
|
55
|
+
}
|
|
56
|
+
],
|
|
57
|
+
dark: [
|
|
58
|
+
{
|
|
59
|
+
name: "--color-base-100",
|
|
60
|
+
anchor: "oklch(13% 0.028 261.692)",
|
|
61
|
+
mix: 8
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: "--color-base-200",
|
|
65
|
+
anchor: "oklch(21% 0.034 264.665)",
|
|
66
|
+
mix: 9
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
name: "--color-base-300",
|
|
70
|
+
anchor: "oklch(27% 0.033 256.848)",
|
|
71
|
+
mix: 11
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
name: "--gradient-start",
|
|
75
|
+
anchor: "#0f1420",
|
|
76
|
+
mix: 20
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
name: "--gradient-end",
|
|
80
|
+
anchor: "#060910",
|
|
81
|
+
mix: 12
|
|
82
|
+
}
|
|
83
|
+
]
|
|
84
|
+
};
|
|
85
|
+
function getResolvedTheme() {
|
|
86
|
+
if ("undefined" == typeof document) return "light";
|
|
87
|
+
const dataTheme = document.documentElement.getAttribute("data-theme");
|
|
88
|
+
if ("dark" === dataTheme) return "dark";
|
|
89
|
+
if ("light" === dataTheme) return "light";
|
|
90
|
+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
91
|
+
}
|
|
29
92
|
function parseHex(hex) {
|
|
30
93
|
let h = hex.trim();
|
|
31
94
|
if (h.startsWith("#")) h = h.slice(1);
|
|
@@ -62,14 +125,17 @@ function applyThemeColor(hex) {
|
|
|
62
125
|
if (!rgb) return;
|
|
63
126
|
const root = document.documentElement;
|
|
64
127
|
const content = pickContentColor(rgb.r, rgb.g, rgb.b);
|
|
128
|
+
const resolvedTheme = getResolvedTheme();
|
|
65
129
|
for (const varName of PRIMARY_VARS)root.style.setProperty(varName, hex);
|
|
66
130
|
for (const varName of CONTENT_VARS)root.style.setProperty(varName, content);
|
|
131
|
+
for (const { name, anchor, mix } of BACKGROUND_VARS[resolvedTheme])root.style.setProperty(name, `color-mix(in oklab, ${hex} ${mix}%, ${anchor})`);
|
|
67
132
|
}
|
|
68
133
|
function resetHueShift() {
|
|
69
134
|
if (!checkCspAllowsInlineStyles()) return;
|
|
70
135
|
const root = document.documentElement;
|
|
71
136
|
for (const varName of PRIMARY_VARS)root.style.removeProperty(varName);
|
|
72
137
|
for (const varName of CONTENT_VARS)root.style.removeProperty(varName);
|
|
138
|
+
for (const { name } of BACKGROUND_VARS.light)root.style.removeProperty(name);
|
|
73
139
|
}
|
|
74
140
|
function createHueShiftStore(storagePrefix) {
|
|
75
141
|
const STORAGE_KEY = `${storagePrefix}_theme_color`;
|