@studious-creative/yumekit 0.1.0

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 (33) hide show
  1. package/dist/components/y-appbar.js +1378 -0
  2. package/dist/components/y-avatar.js +104 -0
  3. package/dist/components/y-badge.js +149 -0
  4. package/dist/components/y-button.js +550 -0
  5. package/dist/components/y-card.js +178 -0
  6. package/dist/components/y-checkbox.js +246 -0
  7. package/dist/components/y-dialog.js +213 -0
  8. package/dist/components/y-drawer.js +454 -0
  9. package/dist/components/y-input.js +225 -0
  10. package/dist/components/y-menu.js +299 -0
  11. package/dist/components/y-panel.js +350 -0
  12. package/dist/components/y-panelbar.js +27 -0
  13. package/dist/components/y-progress.js +317 -0
  14. package/dist/components/y-radio.js +202 -0
  15. package/dist/components/y-select.js +484 -0
  16. package/dist/components/y-slider.js +387 -0
  17. package/dist/components/y-switch.js +353 -0
  18. package/dist/components/y-table.js +323 -0
  19. package/dist/components/y-tabs.js +283 -0
  20. package/dist/components/y-tag.js +186 -0
  21. package/dist/components/y-theme.js +84 -0
  22. package/dist/components/y-toast.js +335 -0
  23. package/dist/components/y-tooltip.js +320 -0
  24. package/dist/index.js +6442 -0
  25. package/dist/modules/helpers.js +98 -0
  26. package/dist/styles/blue-dark.css +123 -0
  27. package/dist/styles/blue-light.css +123 -0
  28. package/dist/styles/orange-dark.css +123 -0
  29. package/dist/styles/orange-light.css +123 -0
  30. package/dist/styles/style.css +20 -0
  31. package/dist/styles/variables.css +397 -0
  32. package/dist/yumekit.min.js +1 -0
  33. package/package.json +45 -0
package/dist/modules/helpers.js ADDED
@@ -0,0 +1,98 @@
1
+ // helpers/slot-utils.js
2
+ export function hideEmptySlotContainers(shadowRoot, slotsConfig = {}) {
3
+ Object.entries(slotsConfig).forEach(([slotName, containerSelector]) => {
4
+ const slot = shadowRoot.querySelector(
5
+ `slot${slotName ? `[name="${slotName}"]` : ":not([name])"}`,
6
+ );
7
+ const container = shadowRoot.querySelector(containerSelector);
8
+
9
+ if (slot && container) {
10
+ const assigned = slot
11
+ .assignedNodes({ flatten: true })
12
+ .filter((n) => {
13
+ return !(
14
+ n.nodeType === Node.TEXT_NODE &&
15
+ n.textContent.trim() === ""
16
+ );
17
+ });
18
+
19
+ container.style.display = assigned.length > 0 ? "" : "none";
20
+ }
21
+ });
22
+ }
23
+
24
+ /**
25
+ * Resolve a CSS custom-property value to a concrete color string.
26
+ * Reads from the given element's computed style.
27
+ * @param {string} varExpr — e.g. "var(--primary-content--)"
28
+ * @param {HTMLElement} el — element to resolve against
29
+ * @returns {string} — resolved color or fallback
30
+ */
31
+ export function resolveCSSColor(varExpr, el) {
32
+ const match = varExpr.match(/var\(\s*(--[^,)]+)/);
33
+ if (!match) return varExpr;
34
+ const val = getComputedStyle(el).getPropertyValue(match[1]).trim();
35
+ return val || varExpr;
36
+ }
37
+
38
+ /**
39
+ * Parse a CSS color string (#hex, rgb(), etc.) to {r, g, b}.
40
+ * Returns null if it can't parse.
41
+ */
42
+ export function parseColor(colorStr) {
43
+ // #RGB, #RRGGBB, #RRGGBBAA
44
+ const hexMatch = colorStr.match(
45
+ /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,
46
+ );
47
+ if (hexMatch) {
48
+ let hex = hexMatch[1];
49
+ if (hex.length <= 4) {
50
+ hex = hex
51
+ .split("")
52
+ .map((c) => c + c)
53
+ .join("");
54
+ }
55
+ return {
56
+ r: parseInt(hex.slice(0, 2), 16),
57
+ g: parseInt(hex.slice(2, 4), 16),
58
+ b: parseInt(hex.slice(4, 6), 16),
59
+ };
60
+ }
61
+ // rgb(r, g, b) or rgba(r, g, b, a)
62
+ const rgbMatch = colorStr.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
63
+ if (rgbMatch) {
64
+ return {
65
+ r: parseInt(rgbMatch[1], 10),
66
+ g: parseInt(rgbMatch[2], 10),
67
+ b: parseInt(rgbMatch[3], 10),
68
+ };
69
+ }
70
+ return null;
71
+ }
72
+
73
+ /**
74
+ * Compute relative luminance of an {r,g,b} color (0-255 range).
75
+ * Returns a value between 0 (black) and 1 (white).
76
+ */
77
+ export function luminance({ r, g, b }) {
78
+ const [rs, gs, bs] = [r, g, b].map((c) => {
79
+ c /= 255;
80
+ return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
81
+ });
82
+ return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
83
+ }
84
+
85
+ /**
86
+ * Given a background color string, return a CSS value for best contrast text.
87
+ * Uses WCAG relative luminance to pick dark or light, referencing theme tokens
88
+ * (--neutral-black / --neutral-white) with hardcoded fallbacks.
89
+ * @param {string} bgColor — any CSS color string (#hex, rgb(), etc.)
90
+ * @returns {string} CSS var() expression for contrasting text color
91
+ */
92
+ export function contrastTextColor(bgColor) {
93
+ const parsed = parseColor(bgColor);
94
+ if (!parsed) return "var(--neutral-white, #ffffff)";
95
+ return luminance(parsed) > 0.179
96
+ ? "var(--neutral-black, #000000)"
97
+ : "var(--neutral-white, #ffffff)";
98
+ }
package/dist/styles/blue-dark.css ADDED
@@ -0,0 +1,123 @@
1
+ /* Themes - Blue Dark */
2
+ :root {
3
+ --base-background-app: var(--neutral-dark-1);
4
+ --base-background-component: var(--neutral-dark-0);
5
+ --base-background-hover: var(--neutral-dark-2);
6
+ --base-background-border: var(--neutral-dark-3);
7
+ --base-background-active: var(--neutral-dark-4);
8
+ --base-content--: var(--neutral-light-0);
9
+ --base-content-light: var(--neutral-light-1);
10
+ --base-content-lighter: var(--neutral-light-3);
11
+ --base-content-lightest: var(--neutral-light-5);
12
+ --base-shadow: 0 2px 6px var(--neutral-black-translucent);
13
+ --primary-background-app: var(--blue-dark-1);
14
+ --primary-background-component: var(--blue-dark-0);
15
+ --primary-background-hover: var(--blue-dark-2);
16
+ --primary-background-active: var(--blue-dark-3);
17
+ --primary-background-border: var(--blue-dark-4);
18
+ --primary-content--: var(--blue--);
19
+ --primary-content-hover: var(--blue-light-7);
20
+ --primary-content-active: var(--blue-light-6);
21
+ --secondary-background-app: var(--teal-dark-1);
22
+ --secondary-background-component: var(--teal-dark-0);
23
+ --secondary-background-hover: var(--teal-dark-2);
24
+ --secondary-background-border: var(--teal-dark-3);
25
+ --secondary-background-active: var(--teal-dark-4);
26
+ --secondary-content--: var(--teal--);
27
+ --secondary-content-hover: var(--teal-light-7);
28
+ --secondary-content-active: var(--teal-light-6);
29
+ --success-background-app: var(--green-dark-1);
30
+ --success-background-component: var(--green-dark-0);
31
+ --success-background-hover: var(--green-dark-2);
32
+ --success-background-border: var(--green-dark-3);
33
+ --success-background-active: var(--green-dark-4);
34
+ --success-content--: var(--green--);
35
+ --success-content-hover: var(--green-light-7);
36
+ --success-content-active: var(--green-light-6);
37
+ --warning-background-app: var(--yellow-dark-1);
38
+ --warning-background-component: var(--yellow-dark-0);
39
+ --warning-background-hover: var(--yellow-dark-2);
40
+ --warning-background-border: var(--yellow-dark-3);
41
+ --warning-background-active: var(--yellow-dark-4);
42
+ --warning-content--: var(--yellow--);
43
+ --warning-content-hover: var(--yellow-light-7);
44
+ --warning-content-active: var(--yellow-light-6);
45
+ --error-background-app: var(--red-dark-1);
46
+ --error-background-component: var(--red-dark-0);
47
+ --error-background-hover: var(--red-dark-2);
48
+ --error-background-border: var(--red-dark-3);
49
+ --error-background-active: var(--red-dark-4);
50
+ --error-content--: var(--red--);
51
+ --error-content-hover: var(--red-light-7);
52
+ --error-content-active: var(--red-light-6);
53
+ --help-background-app: var(--indigo-dark-1);
54
+ --help-background-component: var(--indigo-light-0);
55
+ --help-background-hover: var(--indigo-dark-2);
56
+ --help-background-active: var(--indigo-dark-3);
57
+ --help-background-border: var(--indigo-dark-4);
58
+ --help-content--: var(--indigo--);
59
+ --help-content-hover: var(--indigo-light-7);
60
+ --help-content-active: var(--indigo-light-6);
61
+ --component-appbar-background: var(--base-background-component);
62
+ --component-appbar-color: var(--base-content--);
63
+ --component-appbar-border-color: var(--base-background-border);
64
+ --component-checkbox-background: var(--base-background-component);
65
+ --component-checkbox-color: var(--base-content--);
66
+ --component-checkbox-border-color: var(--base-content--);
67
+ --component-checkbox-accent: var(--primary-content--);
68
+ --component-dialog-background: var(--base-background-component);
69
+ --component-dialog-color: var(--base-content--);
70
+ --component-dialog-border-color: var(--base-background-border);
71
+ --component-dialog-hover-background: var(--base-background-hover);
72
+ --component-dialog-accent: var(--primary-content--);
73
+ --component-drawer-background: var(--base-background-component);
74
+ --component-drawer-color: var(--base-content--);
75
+ --component-drawer-border-color: var(--base-background-border);
76
+ --component-drawer-hover-background: var(--base-background-hover);
77
+ --component-input-background: var(--base-background-app);
78
+ --component-input-background-disabled: var(--base-background-component);
79
+ --component-input-color: var(--base-content--);
80
+ --component-input-border-color: var(--base-background-border);
81
+ --component-input-accent: var(--primary-content--);
82
+ --component-input-label-color: var(--base-content-light);
83
+ --component-input-icon-color: var(--base-content-lighter);
84
+ --component-input-error-color: var(--error-content--);
85
+ --component-input-error-background: var(--error-background-component);
86
+ --component-input-error-border-color: var(--error-background-border);
87
+ --component-menu-background: var(--base-background-component);
88
+ --component-menu-color: var(--base-content--);
89
+ --component-menu-border-color: var(--base-background-border);
90
+ --component-menu-hover-background: var(--base-background-hover);
91
+ --component-menu-shadow: var(--base-shadow);
92
+ --component-panel-background: var(--base-background-component);
93
+ --component-panel-color: var(--base-content--);
94
+ --component-panel-expanded-background: var(--base-background-app);
95
+ --component-panel-accent: var(--primary-content--);
96
+ --component-panel-active-border: var(--base-background-active);
97
+ --component-panel-accent-hover-background: var(--primary-background-active);
98
+ --component-panel-hover-background: var(--base-background-hover);
99
+ --component-radio-color: var(--base-content--);
100
+ --component-radio-accent: var(--primary-content--);
101
+ --component-select-background: var(--base-background-app);
102
+ --component-select-color: var(--base-content--);
103
+ --component-select-border-color: var(--base-background-border);
104
+ --component-select-accent: var(--primary-content--);
105
+ --component-select-accent-contrast: var(--base-background-component);
106
+ --component-select-label-color: var(--base-content-light);
107
+ --component-select-hover-background: var(--base-background-hover);
108
+ --component-select-shadow: var(--base-shadow);
109
+ --component-select-error-color: var(--error-content--);
110
+ --component-select-error-background: var(--error-background-component);
111
+ --component-select-error-border-color: var(--error-background-border);
112
+ --component-table-color: var(--base-content--);
113
+ --component-table-border-color: var(--base-background-border);
114
+ --component-table-hover-background: var(--base-background-hover);
115
+ --component-table-active-background: var(--base-background-active);
116
+ --component-table-color-light: var(--base-content-lightest);
117
+ --component-tabs-background: var(--base-background-component);
118
+ --component-tabs-color: var(--base-content--);
119
+ --component-tabs-border-color: var(--base-background-border);
120
+ --component-tabs-accent: var(--primary-content--);
121
+ --font-family-header: "Lexend", sans-serif;
122
+ --font-family-body: "Lexend", sans-serif;
123
+ }
package/dist/styles/blue-light.css ADDED
@@ -0,0 +1,123 @@
1
+ /* Themes - Blue Light */
2
+ :root {
3
+ --base-background-app: var(--neutral-light-1);
4
+ --base-background-component: var(--neutral-light-0);
5
+ --base-background-hover: var(--neutral-light-2);
6
+ --base-background-border: var(--neutral-light-3);
7
+ --base-background-active: var(--neutral-light-4);
8
+ --base-content--: var(--neutral-dark-0);
9
+ --base-content-light: var(--neutral-dark-1);
10
+ --base-content-lighter: var(--neutral-dark-3);
11
+ --base-content-lightest: var(--neutral-dark-5);
12
+ --base-shadow: 0 2px 6px var(--neutral-black-translucent);
13
+ --primary-background-app: var(--blue-light-1);
14
+ --primary-background-component: var(--blue-light-0);
15
+ --primary-background-hover: var(--blue-light-2);
16
+ --primary-background-active: var(--blue-light-3);
17
+ --primary-background-border: var(--blue-light-4);
18
+ --primary-content--: var(--blue--);
19
+ --primary-content-hover: var(--blue-dark-7);
20
+ --primary-content-active: var(--blue-dark-6);
21
+ --secondary-background-app: var(--teal-light-1);
22
+ --secondary-background-component: var(--teal-light-0);
23
+ --secondary-background-hover: var(--teal-light-2);
24
+ --secondary-background-border: var(--teal-light-3);
25
+ --secondary-background-active: var(--teal-light-4);
26
+ --secondary-content--: var(--teal--);
27
+ --secondary-content-hover: var(--teal-dark-7);
28
+ --secondary-content-active: var(--teal-dark-6);
29
+ --success-background-app: var(--green-light-1);
30
+ --success-background-component: var(--green-light-0);
31
+ --success-background-hover: var(--green-light-2);
32
+ --success-background-border: var(--green-light-3);
33
+ --success-background-active: var(--green-light-4);
34
+ --success-content--: var(--green--);
35
+ --success-content-hover: var(--green-dark-7);
36
+ --success-content-active: var(--green-dark-6);
37
+ --warning-background-app: var(--yellow-light-1);
38
+ --warning-background-component: var(--yellow-light-0);
39
+ --warning-background-hover: var(--yellow-light-2);
40
+ --warning-background-border: var(--yellow-light-3);
41
+ --warning-background-active: var(--yellow-light-4);
42
+ --warning-content--: var(--yellow--);
43
+ --warning-content-hover: var(--yellow-dark-7);
44
+ --warning-content-active: var(--yellow-dark-6);
45
+ --error-background-app: var(--red-light-1);
46
+ --error-background-component: var(--red-light-0);
47
+ --error-background-hover: var(--red-light-2);
48
+ --error-background-border: var(--red-light-3);
49
+ --error-background-active: var(--red-light-4);
50
+ --error-content--: var(--red--);
51
+ --error-content-hover: var(--red-dark-7);
52
+ --error-content-active: var(--red-dark-6);
53
+ --help-background-app: var(--indigo-light-1);
54
+ --help-background-component: var(--indigo-light-0);
55
+ --help-background-hover: var(--indigo-light-2);
56
+ --help-background-active: var(--indigo-light-3);
57
+ --help-background-border: var(--indigo-light-4);
58
+ --help-content--: var(--indigo--);
59
+ --help-content-hover: var(--indigo-dark-7);
60
+ --help-content-active: var(--indigo-dark-6);
61
+ --component-appbar-background: var(--base-background-component);
62
+ --component-appbar-color: var(--base-content--);
63
+ --component-appbar-border-color: var(--base-background-border);
64
+ --component-checkbox-background: var(--base-background-component);
65
+ --component-checkbox-color: var(--base-content--);
66
+ --component-checkbox-border-color: var(--base-content--);
67
+ --component-checkbox-accent: var(--primary-content--);
68
+ --component-dialog-background: var(--base-background-component);
69
+ --component-dialog-color: var(--base-content--);
70
+ --component-dialog-border-color: var(--base-background-border);
71
+ --component-dialog-hover-background: var(--base-background-hover);
72
+ --component-dialog-accent: var(--primary-content--);
73
+ --component-drawer-background: var(--base-background-component);
74
+ --component-drawer-color: var(--base-content--);
75
+ --component-drawer-border-color: var(--base-background-border);
76
+ --component-drawer-hover-background: var(--base-background-hover);
77
+ --component-input-background: var(--base-background-app);
78
+ --component-input-background-disabled: var(--base-background-component);
79
+ --component-input-color: var(--base-content--);
80
+ --component-input-border-color: var(--base-background-border);
81
+ --component-input-accent: var(--primary-content--);
82
+ --component-input-label-color: var(--base-content-light);
83
+ --component-input-icon-color: var(--base-content-lighter);
84
+ --component-input-error-color: var(--error-content--);
85
+ --component-input-error-background: var(--error-background-component);
86
+ --component-input-error-border-color: var(--error-background-border);
87
+ --component-menu-background: var(--base-background-component);
88
+ --component-menu-color: var(--base-content--);
89
+ --component-menu-border-color: var(--base-background-border);
90
+ --component-menu-hover-background: var(--base-background-hover);
91
+ --component-menu-shadow: var(--base-shadow);
92
+ --component-panel-background: var(--base-background-component);
93
+ --component-panel-color: var(--base-content--);
94
+ --component-panel-expanded-background: var(--base-background-app);
95
+ --component-panel-accent: var(--primary-content--);
96
+ --component-panel-active-border: var(--base-background-active);
97
+ --component-panel-accent-hover-background: var(--primary-background-active);
98
+ --component-panel-hover-background: var(--base-background-hover);
99
+ --component-radio-color: var(--base-content--);
100
+ --component-radio-accent: var(--primary-content--);
101
+ --component-select-background: var(--base-background-app);
102
+ --component-select-color: var(--base-content--);
103
+ --component-select-border-color: var(--base-background-border);
104
+ --component-select-accent: var(--primary-content--);
105
+ --component-select-accent-contrast: var(--base-background-component);
106
+ --component-select-label-color: var(--base-content-light);
107
+ --component-select-hover-background: var(--base-background-hover);
108
+ --component-select-shadow: var(--base-shadow);
109
+ --component-select-error-color: var(--error-content--);
110
+ --component-select-error-background: var(--error-background-component);
111
+ --component-select-error-border-color: var(--error-background-border);
112
+ --component-table-color: var(--base-content--);
113
+ --component-table-border-color: var(--base-background-border);
114
+ --component-table-hover-background: var(--base-background-hover);
115
+ --component-table-active-background: var(--base-background-active);
116
+ --component-table-color-light: var(--base-content-lightest);
117
+ --component-tabs-background: var(--base-background-component);
118
+ --component-tabs-color: var(--base-content--);
119
+ --component-tabs-border-color: var(--base-background-border);
120
+ --component-tabs-accent: var(--primary-content--);
121
+ --font-family-header: "Lexend", sans-serif;
122
+ --font-family-body: "Lexend", sans-serif;
123
+ }
package/dist/styles/orange-dark.css ADDED
@@ -0,0 +1,123 @@
1
+ /* Themes - Orange Dark */
2
+ :root {
3
+ --base-background-app: var(--neutral-dark-1);
4
+ --base-background-component: var(--neutral-dark-0);
5
+ --base-background-hover: var(--neutral-dark-2);
6
+ --base-background-border: var(--neutral-dark-3);
7
+ --base-background-active: var(--neutral-dark-4);
8
+ --base-content--: var(--neutral-light-0);
9
+ --base-content-light: var(--neutral-light-1);
10
+ --base-content-lighter: var(--neutral-light-3);
11
+ --base-content-lightest: var(--neutral-light-5);
12
+ --base-shadow: 0 2px 6px var(--neutral-black-translucent);
13
+ --primary-background-app: var(--orange-dark-1);
14
+ --primary-background-component: var(--orange-dark-0);
15
+ --primary-background-hover: var(--orange-dark-2);
16
+ --primary-background-active: var(--orange-dark-3);
17
+ --primary-background-border: var(--orange-dark-4);
18
+ --primary-content--: var(--orange--);
19
+ --primary-content-hover: var(--orange-light-7);
20
+ --primary-content-active: var(--orange-light-6);
21
+ --secondary-background-app: var(--amber-dark-1);
22
+ --secondary-background-component: var(--amber-light-0);
23
+ --secondary-background-hover: var(--amber-dark-2);
24
+ --secondary-background-border: var(--amber-dark-3);
25
+ --secondary-background-active: var(--amber-dark-4);
26
+ --secondary-content--: var(--amber--);
27
+ --secondary-content-hover: var(--amber-light-7);
28
+ --secondary-content-active: var(--amber-light-6);
29
+ --success-background-app: var(--green-dark-1);
30
+ --success-background-component: var(--green-dark-0);
31
+ --success-background-hover: var(--green-dark-2);
32
+ --success-background-border: var(--green-dark-3);
33
+ --success-background-active: var(--green-dark-4);
34
+ --success-content--: var(--green--);
35
+ --success-content-hover: var(--green-light-7);
36
+ --success-content-active: var(--green-light-6);
37
+ --warning-background-app: var(--yellow-dark-1);
38
+ --warning-background-component: var(--yellow-dark-0);
39
+ --warning-background-hover: var(--yellow-dark-2);
40
+ --warning-background-border: var(--yellow-dark-3);
41
+ --warning-background-active: var(--yellow-dark-4);
42
+ --warning-content--: var(--yellow--);
43
+ --warning-content-hover: var(--yellow-light-7);
44
+ --warning-content-active: var(--yellow-light-6);
45
+ --error-background-app: var(--red-dark-1);
46
+ --error-background-component: var(--red-dark-0);
47
+ --error-background-hover: var(--red-dark-2);
48
+ --error-background-border: var(--red-dark-3);
49
+ --error-background-active: var(--red-dark-4);
50
+ --error-content--: var(--red--);
51
+ --error-content-hover: var(--red-light-7);
52
+ --error-content-active: var(--red-light-6);
53
+ --help-background-app: var(--indigo-dark-1);
54
+ --help-background-component: var(--indigo-light-0);
55
+ --help-background-hover: var(--indigo-dark-2);
56
+ --help-background-active: var(--indigo-dark-3);
57
+ --help-background-border: var(--indigo-dark-4);
58
+ --help-content--: var(--indigo--);
59
+ --help-content-hover: var(--indigo-light-7);
60
+ --help-content-active: var(--indigo-light-6);
61
+ --component-appbar-background: var(--base-background-component);
62
+ --component-appbar-color: var(--base-content--);
63
+ --component-appbar-border-color: var(--base-background-border);
64
+ --component-checkbox-background: var(--base-background-component);
65
+ --component-checkbox-color: var(--base-content--);
66
+ --component-checkbox-border-color: var(--base-content--);
67
+ --component-checkbox-accent: var(--primary-content--);
68
+ --component-dialog-background: var(--base-background-component);
69
+ --component-dialog-color: var(--base-content--);
70
+ --component-dialog-border-color: var(--base-background-border);
71
+ --component-dialog-hover-background: var(--base-background-hover);
72
+ --component-dialog-accent: var(--primary-content--);
73
+ --component-drawer-background: var(--base-background-component);
74
+ --component-drawer-color: var(--base-content--);
75
+ --component-drawer-border-color: var(--base-background-border);
76
+ --component-drawer-hover-background: var(--base-background-hover);
77
+ --component-input-background: var(--base-background-app);
78
+ --component-input-background-disabled: var(--base-background-component);
79
+ --component-input-color: var(--base-content--);
80
+ --component-input-border-color: var(--base-background-border);
81
+ --component-input-accent: var(--primary-content--);
82
+ --component-input-label-color: var(--base-content-light);
83
+ --component-input-icon-color: var(--base-content-lighter);
84
+ --component-input-error-color: var(--error-content--);
85
+ --component-input-error-background: var(--error-background-component);
86
+ --component-input-error-border-color: var(--error-background-border);
87
+ --component-menu-background: var(--base-background-component);
88
+ --component-menu-color: var(--base-content--);
89
+ --component-menu-border-color: var(--base-background-border);
90
+ --component-menu-hover-background: var(--base-background-hover);
91
+ --component-menu-shadow: var(--base-shadow);
92
+ --component-panel-background: var(--base-background-component);
93
+ --component-panel-color: var(--base-content--);
94
+ --component-panel-expanded-background: var(--base-background-app);
95
+ --component-panel-accent: var(--primary-content--);
96
+ --component-panel-active-border: var(--base-background-active);
97
+ --component-panel-accent-hover-background: var(--primary-background-active);
98
+ --component-panel-hover-background: var(--base-background-hover);
99
+ --component-radio-color: var(--base-content--);
100
+ --component-radio-accent: var(--primary-content--);
101
+ --component-select-background: var(--base-background-app);
102
+ --component-select-color: var(--base-content--);
103
+ --component-select-border-color: var(--base-background-border);
104
+ --component-select-accent: var(--primary-content--);
105
+ --component-select-accent-contrast: var(--base-background-component);
106
+ --component-select-label-color: var(--base-content-light);
107
+ --component-select-hover-background: var(--base-background-hover);
108
+ --component-select-shadow: var(--base-shadow);
109
+ --component-select-error-color: var(--error-content--);
110
+ --component-select-error-background: var(--error-background-component);
111
+ --component-select-error-border-color: var(--error-background-border);
112
+ --component-table-color: var(--base-content--);
113
+ --component-table-border-color: var(--base-background-border);
114
+ --component-table-hover-background: var(--base-background-hover);
115
+ --component-table-active-background: var(--base-background-active);
116
+ --component-table-color-light: var(--base-content-lightest);
117
+ --component-tabs-background: var(--base-background-component);
118
+ --component-tabs-color: var(--base-content--);
119
+ --component-tabs-border-color: var(--base-background-border);
120
+ --component-tabs-accent: var(--primary-content--);
121
+ --font-family-header: "Lexend", sans-serif;
122
+ --font-family-body: "Lexend", sans-serif;
123
+ }
package/dist/styles/orange-light.css ADDED
@@ -0,0 +1,123 @@
1
+ /* Themes - Orange Light */
2
+ :root {
3
+ --base-background-app: var(--neutral-light-1);
4
+ --base-background-component: var(--neutral-light-0);
5
+ --base-background-hover: var(--neutral-light-2);
6
+ --base-background-border: var(--neutral-light-3);
7
+ --base-background-active: var(--neutral-light-4);
8
+ --base-content--: var(--neutral-dark-0);
9
+ --base-content-light: var(--neutral-dark-1);
10
+ --base-content-lighter: var(--neutral-dark-3);
11
+ --base-content-lightest: var(--neutral-dark-5);
12
+ --base-shadow: 0 2px 6px var(--neutral-black-translucent);
13
+ --primary-background-app: var(--orange-light-1);
14
+ --primary-background-component: var(--orange-light-0);
15
+ --primary-background-hover: var(--orange-light-2);
16
+ --primary-background-active: var(--orange-light-3);
17
+ --primary-background-border: var(--orange-light-4);
18
+ --primary-content--: var(--orange--);
19
+ --primary-content-hover: var(--orange-dark-7);
20
+ --primary-content-active: var(--orange-dark-6);
21
+ --secondary-background-app: var(--amber-light-1);
22
+ --secondary-background-component: var(--amber-light-0);
23
+ --secondary-background-hover: var(--amber-light-2);
24
+ --secondary-background-border: var(--amber-light-3);
25
+ --secondary-background-active: var(--amber-light-4);
26
+ --secondary-content--: var(--amber--);
27
+ --secondary-content-hover: var(--amber-dark-7);
28
+ --secondary-content-active: var(--amber-dark-6);
29
+ --success-background-app: var(--green-light-1);
30
+ --success-background-component: var(--green-light-0);
31
+ --success-background-hover: var(--green-light-2);
32
+ --success-background-border: var(--green-light-3);
33
+ --success-background-active: var(--green-light-4);
34
+ --success-content--: var(--green--);
35
+ --success-content-hover: var(--green-dark-7);
36
+ --success-content-active: var(--green-dark-6);
37
+ --warning-background-app: var(--yellow-light-1);
38
+ --warning-background-component: var(--yellow-light-0);
39
+ --warning-background-hover: var(--yellow-light-2);
40
+ --warning-background-border: var(--yellow-light-3);
41
+ --warning-background-active: var(--yellow-light-4);
42
+ --warning-content--: var(--yellow--);
43
+ --warning-content-hover: var(--yellow-dark-7);
44
+ --warning-content-active: var(--yellow-dark-6);
45
+ --error-background-app: var(--red-light-1);
46
+ --error-background-component: var(--red-light-0);
47
+ --error-background-hover: var(--red-light-2);
48
+ --error-background-border: var(--red-light-3);
49
+ --error-background-active: var(--red-light-4);
50
+ --error-content--: var(--red--);
51
+ --error-content-hover: var(--red-dark-7);
52
+ --error-content-active: var(--red-dark-6);
53
+ --help-background-app: var(--indigo-light-1);
54
+ --help-background-component: var(--indigo-light-0);
55
+ --help-background-hover: var(--indigo-light-2);
56
+ --help-background-active: var(--indigo-light-3);
57
+ --help-background-border: var(--indigo-light-4);
58
+ --help-content--: var(--indigo--);
59
+ --help-content-hover: var(--indigo-dark-7);
60
+ --help-content-active: var(--indigo-dark-6);
61
+ --component-appbar-background: var(--base-background-component);
62
+ --component-appbar-color: var(--base-content--);
63
+ --component-appbar-border-color: var(--base-background-border);
64
+ --component-checkbox-background: var(--base-background-component);
65
+ --component-checkbox-color: var(--base-content--);
66
+ --component-checkbox-border-color: var(--base-content--);
67
+ --component-checkbox-accent: var(--primary-content--);
68
+ --component-dialog-background: var(--base-background-component);
69
+ --component-dialog-color: var(--base-content--);
70
+ --component-dialog-border-color: var(--base-background-border);
71
+ --component-dialog-hover-background: var(--base-background-hover);
72
+ --component-dialog-accent: var(--primary-content--);
73
+ --component-drawer-background: var(--base-background-component);
74
+ --component-drawer-color: var(--base-content--);
75
+ --component-drawer-border-color: var(--base-background-border);
76
+ --component-drawer-hover-background: var(--base-background-hover);
77
+ --component-input-background: var(--base-background-app);
78
+ --component-input-background-disabled: var(--base-background-component);
79
+ --component-input-color: var(--base-content--);
80
+ --component-input-border-color: var(--base-background-border);
81
+ --component-input-accent: var(--primary-content--);
82
+ --component-input-label-color: var(--base-content-light);
83
+ --component-input-icon-color: var(--base-content-lighter);
84
+ --component-input-error-color: var(--error-content--);
85
+ --component-input-error-background: var(--error-background-component);
86
+ --component-input-error-border-color: var(--error-background-border);
87
+ --component-menu-background: var(--base-background-component);
88
+ --component-menu-color: var(--base-content--);
89
+ --component-menu-border-color: var(--base-background-border);
90
+ --component-menu-hover-background: var(--base-background-hover);
91
+ --component-menu-shadow: var(--base-shadow);
92
+ --component-panel-background: var(--base-background-component);
93
+ --component-panel-color: var(--base-content--);
94
+ --component-panel-expanded-background: var(--base-background-app);
95
+ --component-panel-accent: var(--primary-content--);
96
+ --component-panel-active-border: var(--base-background-active);
97
+ --component-panel-accent-hover-background: var(--primary-background-active);
98
+ --component-panel-hover-background: var(--base-background-hover);
99
+ --component-radio-color: var(--base-content--);
100
+ --component-radio-accent: var(--primary-content--);
101
+ --component-select-background: var(--base-background-app);
102
+ --component-select-color: var(--base-content--);
103
+ --component-select-border-color: var(--base-background-border);
104
+ --component-select-accent: var(--primary-content--);
105
+ --component-select-accent-contrast: var(--base-background-component);
106
+ --component-select-label-color: var(--base-content-light);
107
+ --component-select-hover-background: var(--base-background-hover);
108
+ --component-select-shadow: var(--base-shadow);
109
+ --component-select-error-color: var(--error-content--);
110
+ --component-select-error-background: var(--error-background-component);
111
+ --component-select-error-border-color: var(--error-background-border);
112
+ --component-table-color: var(--base-content--);
113
+ --component-table-border-color: var(--base-background-border);
114
+ --component-table-hover-background: var(--base-background-hover);
115
+ --component-table-active-background: var(--base-background-active);
116
+ --component-table-color-light: var(--base-content-lightest);
117
+ --component-tabs-background: var(--base-background-component);
118
+ --component-tabs-color: var(--base-content--);
119
+ --component-tabs-border-color: var(--base-background-border);
120
+ --component-tabs-accent: var(--primary-content--);
121
+ --font-family-header: "Lexend", sans-serif;
122
+ --font-family-body: "Lexend", sans-serif;
123
+ }
package/dist/styles/style.css ADDED
@@ -0,0 +1,20 @@
1
+ html,
2
+ body {
3
+ margin: 0;
4
+ padding: 0;
5
+ font-family: var(--font-family-header, "Lexend", sans-serif);
6
+ font-weight: 300;
7
+ 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;
20
+ }