@studious-creative/yumekit 0.1.4 → 0.1.6

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.
Files changed (28) hide show
  1. package/dist/components/y-appbar.js +57 -45
  2. package/dist/components/y-avatar.js +2 -2
  3. package/dist/components/y-badge.d.ts +1 -1
  4. package/dist/components/y-badge.js +11 -11
  5. package/dist/components/y-button.js +37 -30
  6. package/dist/components/y-dialog.js +5 -2
  7. package/dist/components/y-drawer.js +13 -8
  8. package/dist/components/y-menu.js +6 -4
  9. package/dist/components/y-radio.js +2 -2
  10. package/dist/components/y-switch.js +2 -2
  11. package/dist/components/y-table.js +14 -10
  12. package/dist/components/y-tabs.js +4 -1
  13. package/dist/components/y-tag.js +12 -5
  14. package/dist/components/y-theme.d.ts +2 -0
  15. package/dist/components/y-theme.js +19 -6
  16. package/dist/components/y-toast.js +3 -0
  17. package/dist/components/y-tooltip.js +1 -1
  18. package/dist/index.js +149 -96
  19. package/dist/modules/load-defaults.d.ts +1 -0
  20. package/dist/modules/load-defaults.js +45 -0
  21. package/dist/styles/blue-dark.css +16 -1
  22. package/dist/styles/blue-light.css +15 -0
  23. package/dist/styles/orange-dark.css +17 -2
  24. package/dist/styles/orange-light.css +15 -0
  25. package/dist/styles/style.css +1 -13
  26. package/dist/styles/variables.css +140 -0
  27. package/dist/yumekit.min.js +1 -1
  28. package/package.json +1 -1
package/dist/modules/load-defaults.d.ts ADDED
@@ -0,0 +1 @@
1
+ export function loadDefaultVariables(): void;
package/dist/modules/load-defaults.js ADDED
@@ -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();
package/dist/styles/blue-dark.css CHANGED
@@ -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-light-0);
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
  }
package/dist/styles/blue-light.css CHANGED
@@ -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
  }
package/dist/styles/orange-dark.css CHANGED
@@ -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-light-0);
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-light-0);
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
  }
package/dist/styles/orange-light.css CHANGED
@@ -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
  }
package/dist/styles/style.css CHANGED
@@ -3,18 +3,6 @@ body {
3
3
  margin: 0;
4
4
  padding: 0;
5
5
  font-family: var(--font-family-header, "Lexend", sans-serif);
6
- font-weight: 300;
7
6
  color: var(--base-content--, #000);
8
- }
9
-
10
- h1,
11
- h2,
12
- h3,
13
- h4,
14
- h5,
15
- h6,
16
- p,
17
- a,
18
- label {
19
- font-weight: 600;
7
+ font-weight: 300;
20
8
  }
package/dist/styles/variables.css CHANGED
@@ -370,6 +370,7 @@
370
370
  --component-tab-gap-large: var(--spacing-large);
371
371
  --component-tab-gap-medium: var(--spacing-small);
372
372
  --component-tab-gap-small: var(--spacing-2x-small);
373
+ --component-tab-content-padding: var(--spacing-large);
373
374
  --component-tab-padding-large: var(--spacing-2x-large);
374
375
  --component-tab-padding-medium: var(--spacing-large);
375
376
  --component-tab-padding-small: var(--spacing-small);
@@ -395,3 +396,142 @@
395
396
  --component-tooltip-padding: var(--spacing-x-small);
396
397
  --component-tooltip-padding-h: var(--spacing-medium);
397
398
  }
399
+
400
+ /* Default Theme (Blue Light) */
401
+ :root {
402
+ --base-background-app: var(--neutral-light-1);
403
+ --base-background-component: var(--neutral-light-0);
404
+ --base-background-hover: var(--neutral-light-2);
405
+ --base-background-border: var(--neutral-light-3);
406
+ --base-background-active: var(--neutral-light-4);
407
+ --base-content--: var(--neutral-dark-0);
408
+ --base-content-inverse: var(--neutral-white);
409
+ --base-content-light: var(--neutral-dark-1);
410
+ --base-content-lighter: var(--neutral-dark-3);
411
+ --base-content-lightest: var(--neutral-dark-5);
412
+ --base-shadow: 0 2px 6px var(--neutral-black-translucent);
413
+ --primary-background-app: var(--blue-light-1);
414
+ --primary-background-component: var(--blue-light-0);
415
+ --primary-background-hover: var(--blue-light-2);
416
+ --primary-background-active: var(--blue-light-3);
417
+ --primary-background-border: var(--blue-light-4);
418
+ --primary-content--: var(--blue--);
419
+ --primary-content-inverse: var(--neutral-white);
420
+ --primary-content-hover: var(--blue-dark-7);
421
+ --primary-content-active: var(--blue-dark-6);
422
+ --secondary-background-app: var(--teal-light-1);
423
+ --secondary-background-component: var(--teal-light-0);
424
+ --secondary-background-hover: var(--teal-light-2);
425
+ --secondary-background-border: var(--teal-light-3);
426
+ --secondary-background-active: var(--teal-light-4);
427
+ --secondary-content--: var(--teal--);
428
+ --secondary-content-inverse: var(--neutral-black);
429
+ --secondary-content-hover: var(--teal-dark-7);
430
+ --secondary-content-active: var(--teal-dark-6);
431
+ --success-background-app: var(--green-light-1);
432
+ --success-background-component: var(--green-light-0);
433
+ --success-background-hover: var(--green-light-2);
434
+ --success-background-border: var(--green-light-3);
435
+ --success-background-active: var(--green-light-4);
436
+ --success-content--: var(--green--);
437
+ --success-content-inverse: var(--neutral-black);
438
+ --success-content-hover: var(--green-dark-7);
439
+ --success-content-active: var(--green-dark-6);
440
+ --warning-background-app: var(--yellow-light-1);
441
+ --warning-background-component: var(--yellow-light-0);
442
+ --warning-background-hover: var(--yellow-light-2);
443
+ --warning-background-border: var(--yellow-light-3);
444
+ --warning-background-active: var(--yellow-light-4);
445
+ --warning-content--: var(--yellow--);
446
+ --warning-content-inverse: var(--neutral-black);
447
+ --warning-content-hover: var(--yellow-dark-7);
448
+ --warning-content-active: var(--yellow-dark-6);
449
+ --error-background-app: var(--red-light-1);
450
+ --error-background-component: var(--red-light-0);
451
+ --error-background-hover: var(--red-light-2);
452
+ --error-background-border: var(--red-light-3);
453
+ --error-background-active: var(--red-light-4);
454
+ --error-content--: var(--red--);
455
+ --error-content-inverse: var(--neutral-white);
456
+ --error-content-hover: var(--red-dark-7);
457
+ --error-content-active: var(--red-dark-6);
458
+ --help-background-app: var(--indigo-light-1);
459
+ --help-background-component: var(--indigo-light-0);
460
+ --help-background-hover: var(--indigo-light-2);
461
+ --help-background-active: var(--indigo-light-3);
462
+ --help-background-border: var(--indigo-light-4);
463
+ --help-content--: var(--indigo--);
464
+ --help-content-inverse: var(--neutral-white);
465
+ --help-content-hover: var(--indigo-dark-7);
466
+ --help-content-active: var(--indigo-dark-6);
467
+ --component-appbar-background: var(--base-background-component);
468
+ --component-appbar-color: var(--base-content--);
469
+ --component-appbar-border-color: var(--base-background-border);
470
+ --component-appbar-border-width: var(--component-sidebar-border-width);
471
+ --component-appbar-border-radius: var(--component-sidebar-border-radius);
472
+ --component-appbar-inner-border-width: var(
473
+ --component-sidebar-border-width
474
+ );
475
+ --component-checkbox-background: var(--base-background-component);
476
+ --component-checkbox-color: var(--base-content--);
477
+ --component-checkbox-border-color: var(--base-content--);
478
+ --component-checkbox-accent: var(--primary-content--);
479
+ --component-dialog-background: var(--base-background-component);
480
+ --component-dialog-color: var(--base-content--);
481
+ --component-dialog-border-color: var(--base-background-border);
482
+ --component-dialog-hover-background: var(--base-background-hover);
483
+ --component-dialog-accent: var(--primary-content--);
484
+ --component-dialog-shadow: var(--base-shadow);
485
+ --component-drawer-background: var(--base-background-component);
486
+ --component-drawer-color: var(--base-content--);
487
+ --component-drawer-border-color: var(--base-background-border);
488
+ --component-drawer-hover-background: var(--base-background-hover);
489
+ --component-input-background: var(--base-background-app);
490
+ --component-input-background-disabled: var(--base-background-component);
491
+ --component-input-color: var(--base-content--);
492
+ --component-input-border-color: var(--base-background-border);
493
+ --component-input-accent: var(--primary-content--);
494
+ --component-input-label-color: var(--base-content-light);
495
+ --component-input-icon-color: var(--base-content-lighter);
496
+ --component-input-error-color: var(--error-content--);
497
+ --component-input-error-background: var(--error-background-component);
498
+ --component-input-error-border-color: var(--error-background-border);
499
+ --component-menu-background: var(--base-background-component);
500
+ --component-menu-color: var(--base-content--);
501
+ --component-menu-border-color: var(--base-background-border);
502
+ --component-menu-hover-background: var(--base-background-hover);
503
+ --component-menu-shadow: var(--base-shadow);
504
+ --component-panel-background: var(--base-background-component);
505
+ --component-panel-color: var(--base-content--);
506
+ --component-panel-expanded-background: var(--base-background-app);
507
+ --component-panel-accent: var(--primary-content--);
508
+ --component-panel-active-border: var(--base-background-active);
509
+ --component-panel-accent-hover-background: var(--primary-background-active);
510
+ --component-panel-hover-background: var(--base-background-hover);
511
+ --component-radio-color: var(--base-content--);
512
+ --component-radio-accent: var(--primary-content--);
513
+ --component-select-background: var(--base-background-app);
514
+ --component-select-color: var(--base-content--);
515
+ --component-select-border-color: var(--base-background-border);
516
+ --component-select-accent: var(--primary-content--);
517
+ --component-select-accent-contrast: var(--base-background-component);
518
+ --component-select-label-color: var(--base-content-light);
519
+ --component-select-hover-background: var(--base-background-hover);
520
+ --component-select-shadow: var(--base-shadow);
521
+ --component-select-error-color: var(--error-content--);
522
+ --component-select-error-background: var(--error-background-component);
523
+ --component-select-error-border-color: var(--error-background-border);
524
+ --component-table-color: var(--base-content--);
525
+ --component-table-border-color: var(--base-background-border);
526
+ --component-table-hover-background: var(--base-background-hover);
527
+ --component-table-active-background: var(--base-background-active);
528
+ --component-table-color-light: var(--base-content-lightest);
529
+ --component-tabs-background: var(--base-background-component);
530
+ --component-tabs-color: var(--base-content--);
531
+ --component-tabs-border-color: var(--base-background-border);
532
+ --component-tabs-accent: var(--primary-content--);
533
+ --component-tabs-font-family: var(--font-family-body);
534
+ --component-slider-width: 129px;
535
+ --font-family-header: "Lexend", sans-serif;
536
+ --font-family-body: "Lexend", sans-serif;
537
+ }