@kupola/kupola 1.9.7 → 1.9.8
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/css/kupola.css +14 -14
- package/dist/core.cjs.js +1 -1
- package/dist/core.esm.js +106 -1
- package/dist/css/dashboard.css +368 -0
- package/dist/css/kupola.css +14 -13
- package/dist/css/scaffold.css +2 -9
- package/dist/css/theme-dark.css +340 -214
- package/dist/kupola.cjs.js +1 -1
- package/dist/kupola.css +57 -14
- package/dist/kupola.esm.js +9965 -1
- package/dist/kupola.min.css +1 -1
- package/dist/plugins/vite-plugin-kupola.js +1 -1
- package/dist/plugins/webpack-plugin-kupola.js +1 -1
- package/dist/theme-preload.js +7 -28
- package/package.json +1 -1
- package/scripts/build-css.cjs +48 -0
|
@@ -80,7 +80,7 @@ export function kupola(options = {}) {
|
|
|
80
80
|
|
|
81
81
|
// Inject theme preload script
|
|
82
82
|
if (themePreload && !transformed.includes('data-kupola-theme-preloaded')) {
|
|
83
|
-
const preloadScript = '<script>(function(){if(document.documentElement.hasAttribute(
|
|
83
|
+
const preloadScript = '<script>(function(){if(document.documentElement.hasAttribute("data-kupola-theme-preloaded"))return;var h=document.documentElement,t=localStorage.getItem("kupola-theme")||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark");h.setAttribute("data-theme",t);h.setAttribute("data-kupola-theme-preloaded","true")})();</script>';
|
|
84
84
|
|
|
85
85
|
transformed = transformed.replace(
|
|
86
86
|
'<head>',
|
|
@@ -27,7 +27,7 @@ class KupolaWebpackPlugin {
|
|
|
27
27
|
|
|
28
28
|
// Inject theme preload script
|
|
29
29
|
if (this.options.themePreload && !html.includes('data-kupola-theme-preloaded')) {
|
|
30
|
-
const preloadScript = '<script>(function(){if(document.documentElement.hasAttribute(
|
|
30
|
+
const preloadScript = '<script>(function(){if(document.documentElement.hasAttribute("data-kupola-theme-preloaded"))return;var h=document.documentElement,t=localStorage.getItem("kupola-theme")||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark");h.setAttribute("data-theme",t);h.setAttribute("data-kupola-theme-preloaded","true")})();</script>';
|
|
31
31
|
|
|
32
32
|
html = html.replace(
|
|
33
33
|
'<head>',
|
package/dist/theme-preload.js
CHANGED
|
@@ -1,28 +1,7 @@
|
|
|
1
|
-
(function
|
|
2
|
-
if
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
function getTheme() {
|
|
10
|
-
var s = localStorage.getItem(k);
|
|
11
|
-
if (s === 'dark' || s === 'light') {
|
|
12
|
-
return s;
|
|
13
|
-
}
|
|
14
|
-
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
|
|
15
|
-
return 'light';
|
|
16
|
-
}
|
|
17
|
-
return d;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
var theme = getTheme();
|
|
21
|
-
document.documentElement.setAttribute('data-theme', theme);
|
|
22
|
-
|
|
23
|
-
var root = document.documentElement;
|
|
24
|
-
root.style.setProperty('--bg-base-default', theme === 'dark' ? '#0C0C0D' : '#FFFFFF');
|
|
25
|
-
root.style.setProperty('--text-default', theme === 'dark' ? '#E5E7EB' : '#0F1117');
|
|
26
|
-
|
|
27
|
-
document.documentElement.setAttribute('data-kupola-theme-preloaded', 'true');
|
|
28
|
-
})();
|
|
1
|
+
(function(){
|
|
2
|
+
if(document.documentElement.hasAttribute("data-kupola-theme-preloaded"))return;
|
|
3
|
+
var h=document.documentElement,
|
|
4
|
+
t=localStorage.getItem("kupola-theme")||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark");
|
|
5
|
+
h.setAttribute("data-theme",t);
|
|
6
|
+
h.setAttribute("data-kupola-theme-preloaded","true")
|
|
7
|
+
})();
|
package/package.json
CHANGED
package/scripts/build-css.cjs
CHANGED
|
@@ -66,6 +66,51 @@ function minifyCSS(css) {
|
|
|
66
66
|
.trim();
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
+
const THEME_VARS = `:root {
|
|
70
|
+
--bg-base-default: #0C0C0D;
|
|
71
|
+
--bg-base-secondary: #1A1B1D;
|
|
72
|
+
--bg-base-tertiary: #222427;
|
|
73
|
+
--bg-overlay-l1: rgba(255, 255, 255, 0.04);
|
|
74
|
+
--bg-overlay-l2: rgba(255, 255, 255, 0.06);
|
|
75
|
+
--bg-overlay-l3: rgba(255, 255, 255, 0.08);
|
|
76
|
+
--bg-overlay-l4: rgba(255, 255, 255, 0.12);
|
|
77
|
+
--bg-menu: #1A1B1D;
|
|
78
|
+
--bg-tooltip: #1A1B1D;
|
|
79
|
+
--bg-invert: #FFFFFF;
|
|
80
|
+
--bg-invert-hover: #F5F5F5;
|
|
81
|
+
--bg-invert-active: #E5E5E5;
|
|
82
|
+
--bg-invert-disabled: rgba(255, 255, 255, 0.2);
|
|
83
|
+
--special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
|
|
84
|
+
--text-default: #E5E7EB;
|
|
85
|
+
--text-default-hover: #FFFFFF;
|
|
86
|
+
--text-default-active: #FFFFFF;
|
|
87
|
+
--text-secondary: #B8BDCA;
|
|
88
|
+
--text-secondary-hover: #E5E7EB;
|
|
89
|
+
--text-secondary-active: #E5E7EB;
|
|
90
|
+
--text-tertiary: #9CA3AF;
|
|
91
|
+
--text-disabled: #8B93A1;
|
|
92
|
+
--text-onbrand: #FFFFFF;
|
|
93
|
+
--text-onaccent: #FFFFFF;
|
|
94
|
+
--icon-default: #E5E7EB;
|
|
95
|
+
--icon-default-hover: #FFFFFF;
|
|
96
|
+
--icon-default-active: #FFFFFF;
|
|
97
|
+
--icon-secondary: #B8BDCA;
|
|
98
|
+
--icon-secondary-hover: #E5E7EB;
|
|
99
|
+
--icon-secondary-active: #E5E7EB;
|
|
100
|
+
--icon-tertiary: #9CA3AF;
|
|
101
|
+
--icon-disabled: #8B93A1;
|
|
102
|
+
--icon-onbrand: #FFFFFF;
|
|
103
|
+
--icon-onaccent: #FFFFFF;
|
|
104
|
+
--border-neutral-l1: rgba(255, 255, 255, 0.12);
|
|
105
|
+
--border-neutral-l2: rgba(255, 255, 255, 0.18);
|
|
106
|
+
--border-neutral-l3: rgba(255, 255, 255, 0.25);
|
|
107
|
+
--border-contrast: #0C0C0D;
|
|
108
|
+
--bg-brand-popup: rgba(83, 81, 100, 0.15);
|
|
109
|
+
--icon-filter: brightness(0) saturate(0) invert(0.9);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
`;
|
|
113
|
+
|
|
69
114
|
function buildCSS() {
|
|
70
115
|
console.log('Building Kupola CSS...');
|
|
71
116
|
|
|
@@ -81,6 +126,9 @@ function buildCSS() {
|
|
|
81
126
|
// Resolve all @import statements
|
|
82
127
|
let merged = resolveImports(mainContent, CSS_DIR);
|
|
83
128
|
|
|
129
|
+
// Inject theme variables at the beginning
|
|
130
|
+
merged = THEME_VARS + merged;
|
|
131
|
+
|
|
84
132
|
// Also check for any files not in the import list (like dashboard.css)
|
|
85
133
|
// and add them as optional separate output
|
|
86
134
|
|