@studious-creative/yumekit 0.1.5 → 0.1.7
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/components/y-appbar.js +81 -50
- package/dist/components/y-avatar.js +2 -2
- package/dist/components/y-badge.d.ts +1 -1
- package/dist/components/y-badge.js +11 -11
- package/dist/components/y-button.js +37 -30
- package/dist/components/y-checkbox.js +11 -1
- package/dist/components/y-dialog.js +3 -3
- package/dist/components/y-drawer.js +9 -9
- package/dist/components/y-icon.d.ts +16 -0
- package/dist/components/y-icon.js +262 -0
- package/dist/components/y-menu.js +29 -8
- package/dist/components/y-panel.js +22 -6
- package/dist/components/y-select.d.ts +2 -0
- package/dist/components/y-select.js +21 -3
- package/dist/components/y-table.js +10 -10
- package/dist/components/y-tag.js +10 -3
- package/dist/components/y-theme.d.ts +2 -0
- package/dist/components/y-theme.js +19 -6
- package/dist/components/y-toast.js +1 -1
- package/dist/components/y-tooltip.js +1 -1
- package/dist/icons/all.d.ts +1 -0
- package/dist/icons/all.js +119 -0
- package/dist/icons/registry.d.ts +3 -0
- package/dist/icons/registry.js +30 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.iife.d.ts +1 -0
- package/dist/index.js +477 -108
- package/dist/modules/load-defaults.d.ts +1 -0
- package/dist/modules/load-defaults.js +45 -0
- package/dist/styles/blue-dark.css +16 -1
- package/dist/styles/blue-light.css +15 -0
- package/dist/styles/orange-dark.css +17 -2
- package/dist/styles/orange-light.css +15 -0
- package/dist/styles/variables.css +196 -3
- package/dist/yumekit.min.js +1 -1
- package/package.json +3 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function loadDefaultVariables(): void;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Auto-inject styles/variables.css into the document <head> so that
|
|
3
|
+
* all YumeKit CSS custom-properties are available globally — even when
|
|
4
|
+
* components are used without a <y-theme> wrapper.
|
|
5
|
+
*
|
|
6
|
+
* The `:root` variables defined in variables.css inherit through shadow-DOM
|
|
7
|
+
* boundaries, so every web-component can resolve its `var(--*)` references.
|
|
8
|
+
*
|
|
9
|
+
* This module is idempotent: the stylesheet is only injected once regardless
|
|
10
|
+
* of how many components import it.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
const LINK_ID = "yumekit-default-variables";
|
|
14
|
+
|
|
15
|
+
let injected = false;
|
|
16
|
+
|
|
17
|
+
export function loadDefaultVariables() {
|
|
18
|
+
if (injected || typeof document === "undefined") return;
|
|
19
|
+
|
|
20
|
+
// Guard against duplicate injection (e.g. both ESM + IIFE bundles loaded)
|
|
21
|
+
if (document.getElementById(LINK_ID)) {
|
|
22
|
+
injected = true;
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// Resolve the URL relative to the importing script's location.
|
|
27
|
+
// import.meta.url points to this module file (e.g. src/modules/ or dist/modules/).
|
|
28
|
+
// Walk up to the package root, then into styles/.
|
|
29
|
+
let baseUrl = document.currentScript?.src || import.meta.url;
|
|
30
|
+
|
|
31
|
+
// Go up two levels: modules/ → src|dist/ → package root
|
|
32
|
+
const base = new URL("../../", baseUrl).href;
|
|
33
|
+
const stylesUrl = new URL("styles/variables.css", base).href;
|
|
34
|
+
|
|
35
|
+
const link = document.createElement("link");
|
|
36
|
+
link.id = LINK_ID;
|
|
37
|
+
link.rel = "stylesheet";
|
|
38
|
+
link.href = stylesUrl;
|
|
39
|
+
document.head.appendChild(link);
|
|
40
|
+
|
|
41
|
+
injected = true;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Self-execute on import so components get defaults automatically
|
|
45
|
+
loadDefaultVariables();
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--base-background-border: var(--neutral-dark-3);
|
|
7
7
|
--base-background-active: var(--neutral-dark-4);
|
|
8
8
|
--base-content--: var(--neutral-light-0);
|
|
9
|
+
--base-content-inverse: var(--neutral-black);
|
|
9
10
|
--base-content-light: var(--neutral-light-1);
|
|
10
11
|
--base-content-lighter: var(--neutral-light-3);
|
|
11
12
|
--base-content-lightest: var(--neutral-light-5);
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
--primary-background-active: var(--blue-dark-3);
|
|
17
18
|
--primary-background-border: var(--blue-dark-4);
|
|
18
19
|
--primary-content--: var(--blue--);
|
|
20
|
+
--primary-content-inverse: var(--neutral-white);
|
|
19
21
|
--primary-content-hover: var(--blue-light-7);
|
|
20
22
|
--primary-content-active: var(--blue-light-6);
|
|
21
23
|
--secondary-background-app: var(--teal-dark-1);
|
|
@@ -24,6 +26,7 @@
|
|
|
24
26
|
--secondary-background-border: var(--teal-dark-3);
|
|
25
27
|
--secondary-background-active: var(--teal-dark-4);
|
|
26
28
|
--secondary-content--: var(--teal--);
|
|
29
|
+
--secondary-content-inverse: var(--neutral-black);
|
|
27
30
|
--secondary-content-hover: var(--teal-light-7);
|
|
28
31
|
--secondary-content-active: var(--teal-light-6);
|
|
29
32
|
--success-background-app: var(--green-dark-1);
|
|
@@ -32,6 +35,7 @@
|
|
|
32
35
|
--success-background-border: var(--green-dark-3);
|
|
33
36
|
--success-background-active: var(--green-dark-4);
|
|
34
37
|
--success-content--: var(--green--);
|
|
38
|
+
--success-content-inverse: var(--neutral-black);
|
|
35
39
|
--success-content-hover: var(--green-light-7);
|
|
36
40
|
--success-content-active: var(--green-light-6);
|
|
37
41
|
--warning-background-app: var(--yellow-dark-1);
|
|
@@ -40,6 +44,7 @@
|
|
|
40
44
|
--warning-background-border: var(--yellow-dark-3);
|
|
41
45
|
--warning-background-active: var(--yellow-dark-4);
|
|
42
46
|
--warning-content--: var(--yellow--);
|
|
47
|
+
--warning-content-inverse: var(--neutral-black);
|
|
43
48
|
--warning-content-hover: var(--yellow-light-7);
|
|
44
49
|
--warning-content-active: var(--yellow-light-6);
|
|
45
50
|
--error-background-app: var(--red-dark-1);
|
|
@@ -48,19 +53,26 @@
|
|
|
48
53
|
--error-background-border: var(--red-dark-3);
|
|
49
54
|
--error-background-active: var(--red-dark-4);
|
|
50
55
|
--error-content--: var(--red--);
|
|
56
|
+
--error-content-inverse: var(--neutral-white);
|
|
51
57
|
--error-content-hover: var(--red-light-7);
|
|
52
58
|
--error-content-active: var(--red-light-6);
|
|
53
59
|
--help-background-app: var(--indigo-dark-1);
|
|
54
|
-
--help-background-component: var(--indigo-
|
|
60
|
+
--help-background-component: var(--indigo-dark-0);
|
|
55
61
|
--help-background-hover: var(--indigo-dark-2);
|
|
56
62
|
--help-background-active: var(--indigo-dark-3);
|
|
57
63
|
--help-background-border: var(--indigo-dark-4);
|
|
58
64
|
--help-content--: var(--indigo--);
|
|
65
|
+
--help-content-inverse: var(--neutral-white);
|
|
59
66
|
--help-content-hover: var(--indigo-light-7);
|
|
60
67
|
--help-content-active: var(--indigo-light-6);
|
|
61
68
|
--component-appbar-background: var(--base-background-component);
|
|
62
69
|
--component-appbar-color: var(--base-content--);
|
|
63
70
|
--component-appbar-border-color: var(--base-background-border);
|
|
71
|
+
--component-appbar-border-width: var(--component-sidebar-border-width);
|
|
72
|
+
--component-appbar-border-radius: var(--component-sidebar-border-radius);
|
|
73
|
+
--component-appbar-inner-border-width: var(
|
|
74
|
+
--component-sidebar-border-width
|
|
75
|
+
);
|
|
64
76
|
--component-checkbox-background: var(--base-background-component);
|
|
65
77
|
--component-checkbox-color: var(--base-content--);
|
|
66
78
|
--component-checkbox-border-color: var(--base-content--);
|
|
@@ -70,6 +82,7 @@
|
|
|
70
82
|
--component-dialog-border-color: var(--base-background-border);
|
|
71
83
|
--component-dialog-hover-background: var(--base-background-hover);
|
|
72
84
|
--component-dialog-accent: var(--primary-content--);
|
|
85
|
+
--component-dialog-shadow: var(--base-shadow);
|
|
73
86
|
--component-drawer-background: var(--base-background-component);
|
|
74
87
|
--component-drawer-color: var(--base-content--);
|
|
75
88
|
--component-drawer-border-color: var(--base-background-border);
|
|
@@ -118,6 +131,8 @@
|
|
|
118
131
|
--component-tabs-color: var(--base-content--);
|
|
119
132
|
--component-tabs-border-color: var(--base-background-border);
|
|
120
133
|
--component-tabs-accent: var(--primary-content--);
|
|
134
|
+
--component-tabs-font-family: var(--font-family-body);
|
|
135
|
+
--component-slider-width: 129px;
|
|
121
136
|
--font-family-header: "Lexend", sans-serif;
|
|
122
137
|
--font-family-body: "Lexend", sans-serif;
|
|
123
138
|
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--base-background-border: var(--neutral-light-3);
|
|
7
7
|
--base-background-active: var(--neutral-light-4);
|
|
8
8
|
--base-content--: var(--neutral-dark-0);
|
|
9
|
+
--base-content-inverse: var(--neutral-white);
|
|
9
10
|
--base-content-light: var(--neutral-dark-1);
|
|
10
11
|
--base-content-lighter: var(--neutral-dark-3);
|
|
11
12
|
--base-content-lightest: var(--neutral-dark-5);
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
--primary-background-active: var(--blue-light-3);
|
|
17
18
|
--primary-background-border: var(--blue-light-4);
|
|
18
19
|
--primary-content--: var(--blue--);
|
|
20
|
+
--primary-content-inverse: var(--neutral-white);
|
|
19
21
|
--primary-content-hover: var(--blue-dark-7);
|
|
20
22
|
--primary-content-active: var(--blue-dark-6);
|
|
21
23
|
--secondary-background-app: var(--teal-light-1);
|
|
@@ -24,6 +26,7 @@
|
|
|
24
26
|
--secondary-background-border: var(--teal-light-3);
|
|
25
27
|
--secondary-background-active: var(--teal-light-4);
|
|
26
28
|
--secondary-content--: var(--teal--);
|
|
29
|
+
--secondary-content-inverse: var(--neutral-black);
|
|
27
30
|
--secondary-content-hover: var(--teal-dark-7);
|
|
28
31
|
--secondary-content-active: var(--teal-dark-6);
|
|
29
32
|
--success-background-app: var(--green-light-1);
|
|
@@ -32,6 +35,7 @@
|
|
|
32
35
|
--success-background-border: var(--green-light-3);
|
|
33
36
|
--success-background-active: var(--green-light-4);
|
|
34
37
|
--success-content--: var(--green--);
|
|
38
|
+
--success-content-inverse: var(--neutral-black);
|
|
35
39
|
--success-content-hover: var(--green-dark-7);
|
|
36
40
|
--success-content-active: var(--green-dark-6);
|
|
37
41
|
--warning-background-app: var(--yellow-light-1);
|
|
@@ -40,6 +44,7 @@
|
|
|
40
44
|
--warning-background-border: var(--yellow-light-3);
|
|
41
45
|
--warning-background-active: var(--yellow-light-4);
|
|
42
46
|
--warning-content--: var(--yellow--);
|
|
47
|
+
--warning-content-inverse: var(--neutral-black);
|
|
43
48
|
--warning-content-hover: var(--yellow-dark-7);
|
|
44
49
|
--warning-content-active: var(--yellow-dark-6);
|
|
45
50
|
--error-background-app: var(--red-light-1);
|
|
@@ -48,6 +53,7 @@
|
|
|
48
53
|
--error-background-border: var(--red-light-3);
|
|
49
54
|
--error-background-active: var(--red-light-4);
|
|
50
55
|
--error-content--: var(--red--);
|
|
56
|
+
--error-content-inverse: var(--neutral-white);
|
|
51
57
|
--error-content-hover: var(--red-dark-7);
|
|
52
58
|
--error-content-active: var(--red-dark-6);
|
|
53
59
|
--help-background-app: var(--indigo-light-1);
|
|
@@ -56,11 +62,17 @@
|
|
|
56
62
|
--help-background-active: var(--indigo-light-3);
|
|
57
63
|
--help-background-border: var(--indigo-light-4);
|
|
58
64
|
--help-content--: var(--indigo--);
|
|
65
|
+
--help-content-inverse: var(--neutral-white);
|
|
59
66
|
--help-content-hover: var(--indigo-dark-7);
|
|
60
67
|
--help-content-active: var(--indigo-dark-6);
|
|
61
68
|
--component-appbar-background: var(--base-background-component);
|
|
62
69
|
--component-appbar-color: var(--base-content--);
|
|
63
70
|
--component-appbar-border-color: var(--base-background-border);
|
|
71
|
+
--component-appbar-border-width: var(--component-sidebar-border-width);
|
|
72
|
+
--component-appbar-border-radius: var(--component-sidebar-border-radius);
|
|
73
|
+
--component-appbar-inner-border-width: var(
|
|
74
|
+
--component-sidebar-border-width
|
|
75
|
+
);
|
|
64
76
|
--component-checkbox-background: var(--base-background-component);
|
|
65
77
|
--component-checkbox-color: var(--base-content--);
|
|
66
78
|
--component-checkbox-border-color: var(--base-content--);
|
|
@@ -70,6 +82,7 @@
|
|
|
70
82
|
--component-dialog-border-color: var(--base-background-border);
|
|
71
83
|
--component-dialog-hover-background: var(--base-background-hover);
|
|
72
84
|
--component-dialog-accent: var(--primary-content--);
|
|
85
|
+
--component-dialog-shadow: var(--base-shadow);
|
|
73
86
|
--component-drawer-background: var(--base-background-component);
|
|
74
87
|
--component-drawer-color: var(--base-content--);
|
|
75
88
|
--component-drawer-border-color: var(--base-background-border);
|
|
@@ -118,6 +131,8 @@
|
|
|
118
131
|
--component-tabs-color: var(--base-content--);
|
|
119
132
|
--component-tabs-border-color: var(--base-background-border);
|
|
120
133
|
--component-tabs-accent: var(--primary-content--);
|
|
134
|
+
--component-tabs-font-family: var(--font-family-body);
|
|
135
|
+
--component-slider-width: 129px;
|
|
121
136
|
--font-family-header: "Lexend", sans-serif;
|
|
122
137
|
--font-family-body: "Lexend", sans-serif;
|
|
123
138
|
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--base-background-border: var(--neutral-dark-3);
|
|
7
7
|
--base-background-active: var(--neutral-dark-4);
|
|
8
8
|
--base-content--: var(--neutral-light-0);
|
|
9
|
+
--base-content-inverse: var(--neutral-black);
|
|
9
10
|
--base-content-light: var(--neutral-light-1);
|
|
10
11
|
--base-content-lighter: var(--neutral-light-3);
|
|
11
12
|
--base-content-lightest: var(--neutral-light-5);
|
|
@@ -16,14 +17,16 @@
|
|
|
16
17
|
--primary-background-active: var(--orange-dark-3);
|
|
17
18
|
--primary-background-border: var(--orange-dark-4);
|
|
18
19
|
--primary-content--: var(--orange--);
|
|
20
|
+
--primary-content-inverse: var(--neutral-white);
|
|
19
21
|
--primary-content-hover: var(--orange-light-7);
|
|
20
22
|
--primary-content-active: var(--orange-light-6);
|
|
21
23
|
--secondary-background-app: var(--amber-dark-1);
|
|
22
|
-
--secondary-background-component: var(--amber-
|
|
24
|
+
--secondary-background-component: var(--amber-dark-0);
|
|
23
25
|
--secondary-background-hover: var(--amber-dark-2);
|
|
24
26
|
--secondary-background-border: var(--amber-dark-3);
|
|
25
27
|
--secondary-background-active: var(--amber-dark-4);
|
|
26
28
|
--secondary-content--: var(--amber--);
|
|
29
|
+
--secondary-content-inverse: var(--neutral-white);
|
|
27
30
|
--secondary-content-hover: var(--amber-light-7);
|
|
28
31
|
--secondary-content-active: var(--amber-light-6);
|
|
29
32
|
--success-background-app: var(--green-dark-1);
|
|
@@ -32,6 +35,7 @@
|
|
|
32
35
|
--success-background-border: var(--green-dark-3);
|
|
33
36
|
--success-background-active: var(--green-dark-4);
|
|
34
37
|
--success-content--: var(--green--);
|
|
38
|
+
--success-content-inverse: var(--neutral-black);
|
|
35
39
|
--success-content-hover: var(--green-light-7);
|
|
36
40
|
--success-content-active: var(--green-light-6);
|
|
37
41
|
--warning-background-app: var(--yellow-dark-1);
|
|
@@ -40,6 +44,7 @@
|
|
|
40
44
|
--warning-background-border: var(--yellow-dark-3);
|
|
41
45
|
--warning-background-active: var(--yellow-dark-4);
|
|
42
46
|
--warning-content--: var(--yellow--);
|
|
47
|
+
--warning-content-inverse: var(--neutral-black);
|
|
43
48
|
--warning-content-hover: var(--yellow-light-7);
|
|
44
49
|
--warning-content-active: var(--yellow-light-6);
|
|
45
50
|
--error-background-app: var(--red-dark-1);
|
|
@@ -48,19 +53,26 @@
|
|
|
48
53
|
--error-background-border: var(--red-dark-3);
|
|
49
54
|
--error-background-active: var(--red-dark-4);
|
|
50
55
|
--error-content--: var(--red--);
|
|
56
|
+
--error-content-inverse: var(--neutral-white);
|
|
51
57
|
--error-content-hover: var(--red-light-7);
|
|
52
58
|
--error-content-active: var(--red-light-6);
|
|
53
59
|
--help-background-app: var(--indigo-dark-1);
|
|
54
|
-
--help-background-component: var(--indigo-
|
|
60
|
+
--help-background-component: var(--indigo-dark-0);
|
|
55
61
|
--help-background-hover: var(--indigo-dark-2);
|
|
56
62
|
--help-background-active: var(--indigo-dark-3);
|
|
57
63
|
--help-background-border: var(--indigo-dark-4);
|
|
58
64
|
--help-content--: var(--indigo--);
|
|
65
|
+
--help-content-inverse: var(--neutral-white);
|
|
59
66
|
--help-content-hover: var(--indigo-light-7);
|
|
60
67
|
--help-content-active: var(--indigo-light-6);
|
|
61
68
|
--component-appbar-background: var(--base-background-component);
|
|
62
69
|
--component-appbar-color: var(--base-content--);
|
|
63
70
|
--component-appbar-border-color: var(--base-background-border);
|
|
71
|
+
--component-appbar-border-width: var(--component-sidebar-border-width);
|
|
72
|
+
--component-appbar-border-radius: var(--component-sidebar-border-radius);
|
|
73
|
+
--component-appbar-inner-border-width: var(
|
|
74
|
+
--component-sidebar-border-width
|
|
75
|
+
);
|
|
64
76
|
--component-checkbox-background: var(--base-background-component);
|
|
65
77
|
--component-checkbox-color: var(--base-content--);
|
|
66
78
|
--component-checkbox-border-color: var(--base-content--);
|
|
@@ -70,6 +82,7 @@
|
|
|
70
82
|
--component-dialog-border-color: var(--base-background-border);
|
|
71
83
|
--component-dialog-hover-background: var(--base-background-hover);
|
|
72
84
|
--component-dialog-accent: var(--primary-content--);
|
|
85
|
+
--component-dialog-shadow: var(--base-shadow);
|
|
73
86
|
--component-drawer-background: var(--base-background-component);
|
|
74
87
|
--component-drawer-color: var(--base-content--);
|
|
75
88
|
--component-drawer-border-color: var(--base-background-border);
|
|
@@ -118,6 +131,8 @@
|
|
|
118
131
|
--component-tabs-color: var(--base-content--);
|
|
119
132
|
--component-tabs-border-color: var(--base-background-border);
|
|
120
133
|
--component-tabs-accent: var(--primary-content--);
|
|
134
|
+
--component-tabs-font-family: var(--font-family-body);
|
|
135
|
+
--component-slider-width: 129px;
|
|
121
136
|
--font-family-header: "Lexend", sans-serif;
|
|
122
137
|
--font-family-body: "Lexend", sans-serif;
|
|
123
138
|
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--base-background-border: var(--neutral-light-3);
|
|
7
7
|
--base-background-active: var(--neutral-light-4);
|
|
8
8
|
--base-content--: var(--neutral-dark-0);
|
|
9
|
+
--base-content-inverse: var(--neutral-white);
|
|
9
10
|
--base-content-light: var(--neutral-dark-1);
|
|
10
11
|
--base-content-lighter: var(--neutral-dark-3);
|
|
11
12
|
--base-content-lightest: var(--neutral-dark-5);
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
--primary-background-active: var(--orange-light-3);
|
|
17
18
|
--primary-background-border: var(--orange-light-4);
|
|
18
19
|
--primary-content--: var(--orange--);
|
|
20
|
+
--primary-content-inverse: var(--neutral-white);
|
|
19
21
|
--primary-content-hover: var(--orange-dark-7);
|
|
20
22
|
--primary-content-active: var(--orange-dark-6);
|
|
21
23
|
--secondary-background-app: var(--amber-light-1);
|
|
@@ -24,6 +26,7 @@
|
|
|
24
26
|
--secondary-background-border: var(--amber-light-3);
|
|
25
27
|
--secondary-background-active: var(--amber-light-4);
|
|
26
28
|
--secondary-content--: var(--amber--);
|
|
29
|
+
--secondary-content-inverse: var(--neutral-white);
|
|
27
30
|
--secondary-content-hover: var(--amber-dark-7);
|
|
28
31
|
--secondary-content-active: var(--amber-dark-6);
|
|
29
32
|
--success-background-app: var(--green-light-1);
|
|
@@ -32,6 +35,7 @@
|
|
|
32
35
|
--success-background-border: var(--green-light-3);
|
|
33
36
|
--success-background-active: var(--green-light-4);
|
|
34
37
|
--success-content--: var(--green--);
|
|
38
|
+
--success-content-inverse: var(--neutral-black);
|
|
35
39
|
--success-content-hover: var(--green-dark-7);
|
|
36
40
|
--success-content-active: var(--green-dark-6);
|
|
37
41
|
--warning-background-app: var(--yellow-light-1);
|
|
@@ -40,6 +44,7 @@
|
|
|
40
44
|
--warning-background-border: var(--yellow-light-3);
|
|
41
45
|
--warning-background-active: var(--yellow-light-4);
|
|
42
46
|
--warning-content--: var(--yellow--);
|
|
47
|
+
--warning-content-inverse: var(--neutral-black);
|
|
43
48
|
--warning-content-hover: var(--yellow-dark-7);
|
|
44
49
|
--warning-content-active: var(--yellow-dark-6);
|
|
45
50
|
--error-background-app: var(--red-light-1);
|
|
@@ -48,6 +53,7 @@
|
|
|
48
53
|
--error-background-border: var(--red-light-3);
|
|
49
54
|
--error-background-active: var(--red-light-4);
|
|
50
55
|
--error-content--: var(--red--);
|
|
56
|
+
--error-content-inverse: var(--neutral-white);
|
|
51
57
|
--error-content-hover: var(--red-dark-7);
|
|
52
58
|
--error-content-active: var(--red-dark-6);
|
|
53
59
|
--help-background-app: var(--indigo-light-1);
|
|
@@ -56,11 +62,17 @@
|
|
|
56
62
|
--help-background-active: var(--indigo-light-3);
|
|
57
63
|
--help-background-border: var(--indigo-light-4);
|
|
58
64
|
--help-content--: var(--indigo--);
|
|
65
|
+
--help-content-inverse: var(--neutral-white);
|
|
59
66
|
--help-content-hover: var(--indigo-dark-7);
|
|
60
67
|
--help-content-active: var(--indigo-dark-6);
|
|
61
68
|
--component-appbar-background: var(--base-background-component);
|
|
62
69
|
--component-appbar-color: var(--base-content--);
|
|
63
70
|
--component-appbar-border-color: var(--base-background-border);
|
|
71
|
+
--component-appbar-border-width: var(--component-sidebar-border-width);
|
|
72
|
+
--component-appbar-border-radius: var(--component-sidebar-border-radius);
|
|
73
|
+
--component-appbar-inner-border-width: var(
|
|
74
|
+
--component-sidebar-border-width
|
|
75
|
+
);
|
|
64
76
|
--component-checkbox-background: var(--base-background-component);
|
|
65
77
|
--component-checkbox-color: var(--base-content--);
|
|
66
78
|
--component-checkbox-border-color: var(--base-content--);
|
|
@@ -70,6 +82,7 @@
|
|
|
70
82
|
--component-dialog-border-color: var(--base-background-border);
|
|
71
83
|
--component-dialog-hover-background: var(--base-background-hover);
|
|
72
84
|
--component-dialog-accent: var(--primary-content--);
|
|
85
|
+
--component-dialog-shadow: var(--base-shadow);
|
|
73
86
|
--component-drawer-background: var(--base-background-component);
|
|
74
87
|
--component-drawer-color: var(--base-content--);
|
|
75
88
|
--component-drawer-border-color: var(--base-background-border);
|
|
@@ -118,6 +131,8 @@
|
|
|
118
131
|
--component-tabs-color: var(--base-content--);
|
|
119
132
|
--component-tabs-border-color: var(--base-background-border);
|
|
120
133
|
--component-tabs-accent: var(--primary-content--);
|
|
134
|
+
--component-tabs-font-family: var(--font-family-body);
|
|
135
|
+
--component-slider-width: 129px;
|
|
121
136
|
--font-family-header: "Lexend", sans-serif;
|
|
122
137
|
--font-family-body: "Lexend", sans-serif;
|
|
123
138
|
}
|