@pathscale/ui 1.1.26 → 1.1.28
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.
|
@@ -67,6 +67,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
|
|
|
67
67
|
];
|
|
68
68
|
const handleGrayscale = (theme)=>{
|
|
69
69
|
store().setThemeColor(null);
|
|
70
|
+
(0, __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.resetHueShift)();
|
|
70
71
|
local.onColorChange?.(null, 0);
|
|
71
72
|
local.onThemeSwitch?.(theme);
|
|
72
73
|
};
|
|
@@ -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`;
|
|
@@ -99,10 +165,10 @@ function createHueShiftStore(storagePrefix) {
|
|
|
99
165
|
});
|
|
100
166
|
if ("undefined" != typeof window) {
|
|
101
167
|
const observer = new MutationObserver((mutations)=>{
|
|
102
|
-
for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) {
|
|
168
|
+
for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) requestAnimationFrame(()=>{
|
|
103
169
|
const color = themeColor();
|
|
104
|
-
if (null !== color)
|
|
105
|
-
}
|
|
170
|
+
if (null !== color) applyThemeColor(color);
|
|
171
|
+
});
|
|
106
172
|
});
|
|
107
173
|
observer.observe(document.documentElement, {
|
|
108
174
|
attributes: true,
|