@memobit/themes 1.0.3 → 1.0.4

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/index.d.ts +1 -1
  2. package/dist/previewPalettes.js +7 -7
  3. package/dist/themes/audit-ember.css +1 -1
  4. package/dist/themes/orbital-night.css +1 -1
  5. package/dist/themes.css +1 -1
  6. package/package.json +14 -9
  7. package/src/theming/asphalt-code.scss +1 -2
  8. package/src/theming/audit-ember.scss +8 -14
  9. package/src/theming/azure-night.scss +264 -265
  10. package/src/theming/blossom-meadow.scss +1 -2
  11. package/src/theming/chalk-circuit.scss +1 -2
  12. package/src/theming/crimson-dusk.scss +264 -265
  13. package/src/theming/cyber-forest.scss +264 -265
  14. package/src/theming/dashdarkx.scss +264 -265
  15. package/src/theming/ember-night.scss +264 -265
  16. package/src/theming/frost-petal.scss +264 -265
  17. package/src/theming/kindred-ink.scss +1 -2
  18. package/src/theming/lavender-mist.scss +264 -265
  19. package/src/theming/light-blue.scss +264 -265
  20. package/src/theming/luna.scss +264 -265
  21. package/src/theming/midnight-amber.scss +268 -269
  22. package/src/theming/mint-meadow.scss +264 -265
  23. package/src/theming/mintone.scss +264 -265
  24. package/src/theming/neon-tokyo.scss +264 -265
  25. package/src/theming/ocean-breeze.scss +264 -265
  26. package/src/theming/ocean-depths.scss +264 -265
  27. package/src/theming/orbital-night.scss +7 -9
  28. package/src/theming/sandstone.scss +264 -265
  29. package/src/theming/signal-burst.scss +1 -2
  30. package/src/theming/tailwind-vue-dark.scss +264 -265
  31. package/src/theming/terminal-phosphor.scss +1 -2
  32. package/src/theming/twilight-pulse.scss +264 -265
  33. package/src/theming/vault-guard.scss +1 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memobit/themes",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "65 themes for the Memobit apps — each published as its own stylesheet so an app loads only the one it is showing, with preview palettes for the theme picker.",
5
5
  "keywords": [
6
6
  "css",
@@ -55,22 +55,27 @@
55
55
  "build": "npm run build:themes && vite build && npm pack",
56
56
  "release": "npm run build && npm publish",
57
57
  "prepublishOnly": "npm run build:themes && vite build",
58
- "lint": "eslint src --ext .ts",
59
- "lint:fix": "eslint src --ext .ts --fix"
58
+ "lint": "eslint .",
59
+ "lint:fix": "eslint . --fix",
60
+ "format": "prettier --write \"**/*.{ts,tsx,js,jsx,mjs,cjs,css,scss}\"",
61
+ "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mjs,cjs,css,scss}\""
60
62
  },
61
63
  "devDependencies": {
62
64
  "@eslint/js": "9.39.4",
63
65
  "@types/node": "25.8.0",
64
66
  "eslint": "9.39.4",
65
67
  "eslint-config-prettier": "10.1.8",
66
- "eslint-plugin-import-x": "4.17.1",
67
- "eslint-plugin-prettier": "5.5.5",
68
- "eslint-plugin-simple-import-sort": "13.0.0",
69
- "globals": "17.6.0",
70
- "prettier": "3.8.3",
68
+ "eslint-plugin-import": "2.32.0",
69
+ "eslint-plugin-prettier": "5.5.6",
70
+ "eslint-plugin-react": "7.37.5",
71
+ "eslint-plugin-react-hooks": "7.1.1",
72
+ "eslint-plugin-react-refresh": "0.5.7",
73
+ "eslint-plugin-simple-import-sort": "14.0.0",
74
+ "globals": "17.12.0",
75
+ "prettier": "3.9.9",
71
76
  "sass": "1.99.0",
72
77
  "typescript": "6.0.3",
73
- "typescript-eslint": "8.59.3",
78
+ "typescript-eslint": "8.70.1",
74
79
  "vite": "8.1.5",
75
80
  "vite-plugin-dts": "5.0.0"
76
81
  }
package/src/theming/asphalt-code.scss CHANGED
@@ -8,8 +8,7 @@
8
8
  --body-background-base: #0a0c0e;
9
9
  --body-background-wash:
10
10
  radial-gradient(55% 50% at 100% 0%, rgba(6, 182, 212, 0.14) 0%, transparent 65%),
11
- radial-gradient(50% 45% at 0% 100%, rgba(6, 182, 212, 0.1) 0%, transparent 65%),
12
- linear-gradient(160deg, #0e1012 0%, #080a0c 55%, #0c0e10 100%);
11
+ radial-gradient(50% 45% at 0% 100%, rgba(6, 182, 212, 0.1) 0%, transparent 65%), linear-gradient(160deg, #0e1012 0%, #080a0c 55%, #0c0e10 100%);
13
12
  --body-color: #c8d8e4;
14
13
  --body-color-accent: #ffffff;
15
14
  --body-color-muted: #5a7888;
package/src/theming/audit-ember.scss CHANGED
@@ -8,9 +8,8 @@
8
8
  --body-background: var(--body-background-wash, var(--body-background-base));
9
9
  --body-background-base: #09090b;
10
10
  --body-background-wash:
11
- radial-gradient(60% 50% at 100% 0%, rgba(251, 146, 60, 0.10) 0%, transparent 65%),
12
- radial-gradient(45% 40% at 0% 100%, rgba(249, 115, 22, 0.06) 0%, transparent 70%),
13
- linear-gradient(155deg, #0c0c10 0%, #09090b 55%, #08080a 100%);
11
+ radial-gradient(60% 50% at 100% 0%, rgba(251, 146, 60, 0.1) 0%, transparent 65%),
12
+ radial-gradient(45% 40% at 0% 100%, rgba(249, 115, 22, 0.06) 0%, transparent 70%), linear-gradient(155deg, #0c0c10 0%, #09090b 55%, #08080a 100%);
14
13
  --body-color: #d4d4d8;
15
14
  --body-color-accent: #fafafa;
16
15
  --body-color-muted: #71717a;
@@ -104,7 +103,7 @@
104
103
  --dropdown-header-color: #e4e4e7;
105
104
  --dropdown-options-background-color: #131318;
106
105
  --dropdown-options-color: #d4d4d8;
107
- --dropdown-options-hover-background-color: rgba(251, 146, 60, 0.10);
106
+ --dropdown-options-hover-background-color: rgba(251, 146, 60, 0.1);
108
107
  --dropdown-options-hover-color: #fafafa;
109
108
  --dropdown-options-selected-background-color: rgba(251, 146, 60, 0.18);
110
109
  --dropdown-options-selected-color: #fafafa;
@@ -273,14 +272,9 @@
273
272
  // Intent-tinted card backgrounds — radial wash centered on the card,
274
273
  // tuned for the near-black audit-ember surface so the glow reads without overpowering text.
275
274
  // Consumed by both MiniStatsCard (filled variants) and Card (variant prop).
276
- --card-tint-default-background:
277
- radial-gradient(110% 80% at 50% 35%, rgba(251, 146, 60, 0.18) 0%, transparent 65%);
278
- --card-tint-danger-background:
279
- radial-gradient(110% 80% at 50% 35%, rgba(244, 63, 94, 0.22) 0%, transparent 65%);
280
- --card-tint-warning-background:
281
- radial-gradient(110% 80% at 50% 35%, rgba(245, 158, 11, 0.20) 0%, transparent 65%);
282
- --card-tint-info-background:
283
- radial-gradient(110% 80% at 50% 35%, rgba(96, 165, 250, 0.20) 0%, transparent 65%);
284
- --card-tint-success-background:
285
- radial-gradient(110% 80% at 50% 35%, rgba(52, 211, 153, 0.20) 0%, transparent 65%);
275
+ --card-tint-default-background: radial-gradient(110% 80% at 50% 35%, rgba(251, 146, 60, 0.18) 0%, transparent 65%);
276
+ --card-tint-danger-background: radial-gradient(110% 80% at 50% 35%, rgba(244, 63, 94, 0.22) 0%, transparent 65%);
277
+ --card-tint-warning-background: radial-gradient(110% 80% at 50% 35%, rgba(245, 158, 11, 0.2) 0%, transparent 65%);
278
+ --card-tint-info-background: radial-gradient(110% 80% at 50% 35%, rgba(96, 165, 250, 0.2) 0%, transparent 65%);
279
+ --card-tint-success-background: radial-gradient(110% 80% at 50% 35%, rgba(52, 211, 153, 0.2) 0%, transparent 65%);
286
280
  }
package/src/theming/azure-night.scss CHANGED
@@ -1,269 +1,268 @@
1
- // Azure Night theme - Modern dark theme with electric blue accent
2
- // Inspired by IoT dashboard with clean, tech-focused aesthetics
3
- [data-theme='azure-night'] {
4
- --font-family: Inter, Roboto, sans-serif;
5
-
1
+ // Azure Night theme - Modern dark theme with electric blue accent
2
+ // Inspired by IoT dashboard with clean, tech-focused aesthetics
3
+ [data-theme='azure-night'] {
4
+ --font-family: Inter, Roboto, sans-serif;
5
+
6
6
  --body-background: var(--body-background-wash, var(--body-background-base));
7
7
  --body-background-base: #1a1a1a;
8
8
  --body-background-wash:
9
9
  radial-gradient(55% 45% at 100% 0%, rgba(74, 158, 255, 0.14) 0%, transparent 65%),
10
- radial-gradient(50% 45% at 0% 100%, rgba(33, 150, 243, 0.08) 0%, transparent 65%),
11
- linear-gradient(155deg, #202020 0%, #151515 55%, #1c1c1c 100%);
12
- --body-color: #e0e0e0;
13
- --body-color-accent: #ffffff;
14
- --body-color-muted: #888888;
15
- --body-title-color: #ffffff;
16
- --body-sub-title-color: #b0b0b0;
17
- --body-accent-color: #4a9eff;
18
- --body-danger-color: #f44336;
19
-
20
- --backdrop-color: rgba(0, 0, 0, 0.75);
21
- --text-shadow: #000000;
22
- --box-shadow: rgba(0, 0, 0, 0.25);
23
-
24
- --header-background-color: #2d2d2d;
25
- --header-border-bottom-color: #3a3a3a;
26
- --header-color: #b0b0b0;
27
- --header-font-weight: 500;
28
-
29
- --card-background-color: #2d2d2d;
30
- --card-background-accent-color: #252525;
31
- --card-border-color: #3a3a3a;
32
- --card-backdrop-filter: none;
33
- --card-border-accent-color: #4a9eff; // Electric blue accent
34
- --card-hover-border-color: #4a9eff;
35
- --card-color: #e0e0e0;
36
- --card-accent-color: #4a9eff;
37
- --card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
38
- --card-surface-box-shadow: var(--card-box-shadow);
39
- --card-footer-background-color: #252525;
40
- --card-footer-color: #b0b0b0;
41
- --card-title-color: var(--body-title-color);
42
- --card-title-font-family: var(--font-family, sans-serif);
43
- --card-title-font-size: var(--font-size-md);
44
- --card-title-font-style: normal;
45
- --card-title-font-weight: var(--font-weight-bold);
46
- --card-title-letter-spacing: normal;
47
- --card-title-text-transform: none;
48
-
49
- --links-color: #4a9eff;
50
- --links-hover-color: #6ab0ff;
51
-
52
- --delimiter-color: #3a3a3a;
53
- --border-color: #3a3a3a;
54
-
55
- --button-default-border-color: #4a5568;
56
- --button-default-background-color: #3a3a3a;
57
- --button-default-color: #e0e0e0;
58
- --button-default-hover-border-color: #5a6578;
59
- --button-default-hover-background-color: rgba(74, 158, 255, 0.1);
60
- --button-default-hover-color: #ffffff;
61
-
62
- --button-info-border-color: #2196f3;
63
- --button-info-background-color: #1976d2;
64
- --button-info-color: #ffffff;
65
- --button-info-hover-border-color: #42a5f5;
66
- --button-info-hover-background-color: rgba(33, 150, 243, 0.15);
67
- --button-info-hover-color: #ffffff;
68
-
69
- --button-warning-border-color: #ff9800;
70
- --button-warning-background-color: #f57c00;
71
- --button-warning-color: #ffffff;
72
- --button-warning-hover-border-color: #ffa726;
73
- --button-warning-hover-background-color: rgba(255, 152, 0, 0.15);
74
- --button-warning-hover-color: #ffffff;
75
-
76
- --button-success-border-color: #4caf50;
77
- --button-success-background-color: #388e3c;
78
- --button-success-color: #ffffff;
79
- --button-success-hover-border-color: #66bb6a;
80
- --button-success-hover-background-color: rgba(76, 175, 80, 0.15);
81
- --button-success-hover-color: #ffffff;
82
-
83
- --button-danger-border-color: #f44336;
84
- --button-danger-background-color: #d32f2f;
85
- --button-danger-color: #ffffff;
86
- --button-danger-hover-border-color: #ef5350;
87
- --button-danger-hover-background-color: rgba(244, 67, 54, 0.15);
88
- --button-danger-hover-color: #ffffff;
89
-
90
- --button-plain-color: #b0b0b0;
91
- --button-plain-hover-color: #ffffff;
92
- --button-ghost-border-color: transparent;
93
- --button-ghost-background-color: transparent;
94
- --button-ghost-color: var(--button-plain-color);
95
- --button-ghost-hover-border-color: transparent;
96
- --button-ghost-hover-background-color: var(--card-background-accent-color);
97
- --button-ghost-hover-color: var(--button-plain-hover-color);
98
- --dropdown-border-color: #3a3a3a;
99
- --dropdown-header-background-color: #2d2d2d;
100
- --dropdown-header-border-focus-color: #4a9eff;
101
- --dropdown-header-color: #e0e0e0;
102
- --dropdown-options-background-color: #2d2d2d;
103
- --dropdown-options-color: #e0e0e0;
104
- --dropdown-options-hover-background-color: rgba(74, 158, 255, 0.2);
105
- --dropdown-options-hover-color: #ffffff;
106
- --dropdown-options-selected-background-color: rgba(74, 158, 255, 0.3);
107
- --dropdown-options-selected-color: #ffffff;
108
- --dropdown-chips-background-color: #3a3a3a;
109
- --dropdown-chips-color: #e0e0e0;
110
- --dropdown-chips-border-color: #4a5568;
111
- --dropdown-chips-hover-background-color: #454545;
112
- --dropdown-action-color: #b0b0b0;
113
- --dropdown-action-background-color: #2d2d2d;
114
- --dropdown-action-hover-color: #ffffff;
115
- --dropdown-action-hover-background-color: #3a3a3a;
116
-
117
- --tabs-active-background-color: rgba(74, 158, 255, 0.2);
118
- --tabs-active-color: #4a9eff;
119
- --tabs-inactive-background-color: transparent;
120
- --tabs-inactive-color: #888888;
121
-
122
- --modal-background-color: #252525;
123
- --modal-border-color: #3a3a3a;
124
- --modal-backdrop-filter: none;
125
- --modal-header-background-color: #2d2d2d;
126
- --modal-header-color: #ffffff;
127
- --modal-title-color: var(--modal-header-color);
128
- --modal-title-font-family: var(--font-family, sans-serif);
129
- --modal-title-font-size: var(--font-size-xl);
130
- --modal-title-font-style: normal;
131
- --modal-title-font-weight: var(--font-weight-semibold);
132
- --modal-title-letter-spacing: normal;
133
- --modal-title-text-transform: none;
134
- --modal-body-color: #e0e0e0;
135
- --modal-footer-background-color: #202020;
136
- --modal-color: #e0e0e0;
137
- --modal-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
138
- --modal-surface-box-shadow: var(--modal-box-shadow);
139
- --modal-box-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.6);
140
-
141
- --list-alternate-background-color: #2a2a2a;
142
- --list-hover-background-color: rgba(74, 158, 255, 0.1);
143
-
144
- --progress-bar-background-color: #3a3a3a;
145
- --progress-bar-color: #e8f3ff;
146
-
147
- --progress-default-bar-border-color: #4a5568;
148
- --progress-default-bar-fill-color: #888888;
149
-
150
- --progress-success-bar-border-color: #4caf50;
151
- --progress-success-bar-fill-color: #4caf50;
152
-
153
- --progress-info-bar-border-color: #2196f3;
154
- --progress-info-bar-fill-color: #2196f3;
155
-
156
- --progress-warning-bar-border-color: #ff9800;
157
- --progress-warning-bar-fill-color: #ff9800;
158
-
159
- --progress-danger-bar-border-color: #f44336;
160
- --progress-danger-bar-fill-color: #f44336;
161
-
162
- --form-control-background-color: #2d2d2d;
163
- --form-control-color: #e0e0e0;
164
- --form-control-label-color: var(--body-color-muted);
165
- --form-control-label-font-size: var(--font-size-sm);
166
- --form-control-label-font-weight: var(--font-weight-medium);
167
- --form-control-label-letter-spacing: normal;
168
- --form-control-label-text-transform: none;
169
- --form-control-border-color: #3a3a3a;
170
- --form-control-error-background-color: #f4433611;
171
- --form-control-error-color: #f44336;
172
- --form-control-error-border-color: #f44336;
173
- --form-control-focus-background-color: #323232;
174
- --form-control-focus-border-color: #4a9eff;
175
- --form-control-focus-color: #ffffff;
176
- --form-control-placeholder-color: #888888;
177
- --form-control-success-background-color: #4caf5011;
178
- --form-control-success-color: #4caf50;
179
- --form-control-success-border-color: #4caf50;
180
-
181
- --form-control-selection-background-color: #4a9eff;
182
- --form-control-selection-border-color: #4a9eff;
183
- --form-control-selection-color: #ffffff;
184
- --form-control-selection-label-color: #ffffff;
185
- --form-control-focus-ring: rgba(74, 158, 255, 0.4);
186
-
187
- --calendar-background-color: #1a1a1a;
188
- --calendar-border-color: #333333;
189
- --calendar-header-background-color: #2d2d2d;
190
- --calendar-header-color: #ffffff;
191
- --calendar-day-color: #e0e0e0;
192
- --calendar-day-hover-background-color: #2d2d2d;
193
- --calendar-day-selected-background-color: #4a9eff;
194
- --calendar-day-selected-color: #ffffff;
195
- --calendar-day-disabled-color: #666666;
196
- --calendar-day-today-border-color: #4a9eff;
197
- --calendar-day-weekend-color: #70b8ff;
198
-
199
- --datepicker-input-background-color: #2d2d2d;
200
-
201
- --tooltip-background-color: #4a9eff;
202
- --tooltip-border-color: #4a9eff;
203
- --tooltip-color: #ffffff;
204
-
205
- --popover-background-color: #2d2d2d;
206
- --popover-border-color: #4a9eff;
207
- --popover-color: #e0e0e0;
208
- --popover-arrow-color: #4a9eff;
209
-
210
- --toast-info-background-color: #2196f3;
211
- --toast-info-color: #ffffff;
212
- --toast-info-border-color: #2196f3;
213
-
214
- --toast-success-background-color: #4caf50;
215
- --toast-success-color: #ffffff;
216
- --toast-success-border-color: #4caf50;
217
-
218
- --toast-warning-background-color: #ff9800;
219
- --toast-warning-color: #ffffff;
220
- --toast-warning-border-color: #ff9800;
221
-
222
- --toast-danger-background-color: #f44336;
223
- --toast-danger-color: #ffffff;
224
- --toast-danger-border-color: #f44336;
225
-
226
- --loader-border-color: rgba(74, 158, 255, 0.2);
227
- --loader-border-top-color: #4a9eff;
228
-
229
- --rating-color-success: #4caf50;
230
- --rating-color-warning: #ff9800;
231
- --rating-color-danger: #f44336;
232
- --rating-color-info: #2196f3;
233
- --rating-empty-color: #555555;
234
- --rating-empty-label-color: #e0e0e0;
235
- --rating-half-rate-empty-color: #555555;
236
-
237
- --slider-track-background-color: #3a3a3a;
238
- --slider-track-border-color: #4a5568;
239
- --slider-track-hover-background-color: #404040;
240
- --slider-track-hover-border-color: #5a6578;
241
- --slider-thumb-background-color: #4a9eff;
242
- --slider-thumb-border-color: #4a9eff;
243
- --slider-thumb-hover-background-color: #6ab0ff;
244
- --slider-thumb-hover-border-color: #6ab0ff;
245
-
246
- --chip-selected-background-color: var(--card-background-accent-color);
247
- --chip-selected-border-color: var(--body-accent-color);
248
- --chip-hover-border-color: var(--body-accent-color);
249
- --chip-hover-background-color: var(--card-background-accent-color);
250
- --chip-hover-color: var(--body-color-accent);
251
- --chip-selected-color: var(--body-accent-color);
252
- --chip-selected-count-color: var(--body-color-muted);
253
-
254
- --note-container-effect-background-color: rgba(74, 158, 255, 0.1);
255
- --note-container-effect-color: #e0e0e0;
256
- --note-container-effect-border-left-color: #4a9eff;
257
-
258
- --infuse-effect-hover-border-color: #4a9eff;
259
- --infuse-effect-hover-box-shadow-color: rgba(74, 158, 255, 0.3);
260
- --infuse-effect-before-background: linear-gradient(90deg, #4a9eff, #6ab0ff);
261
-
262
- --up-lift-effect-hover-border-color: #4a9eff;
263
- --up-lift-effect-box-shadow-color: rgba(0, 0, 0, 0.4);
264
- --up-lift-effect-hover-box-shadow-color: rgba(74, 158, 255, 0.3);
265
- --up-lift-effect-before-background: linear-gradient(135deg, #4a9eff 0%, #6ab0ff 100%);
266
-
267
- --glow-box-shadow-color: 0 0 16px rgba(74, 158, 255, 0.5), 0 0 6px rgba(74, 158, 255, 0.3);
268
- --glow-hover-border-color: rgba(74, 158, 255, 0.35);
269
- }
10
+ radial-gradient(50% 45% at 0% 100%, rgba(33, 150, 243, 0.08) 0%, transparent 65%), linear-gradient(155deg, #202020 0%, #151515 55%, #1c1c1c 100%);
11
+ --body-color: #e0e0e0;
12
+ --body-color-accent: #ffffff;
13
+ --body-color-muted: #888888;
14
+ --body-title-color: #ffffff;
15
+ --body-sub-title-color: #b0b0b0;
16
+ --body-accent-color: #4a9eff;
17
+ --body-danger-color: #f44336;
18
+
19
+ --backdrop-color: rgba(0, 0, 0, 0.75);
20
+ --text-shadow: #000000;
21
+ --box-shadow: rgba(0, 0, 0, 0.25);
22
+
23
+ --header-background-color: #2d2d2d;
24
+ --header-border-bottom-color: #3a3a3a;
25
+ --header-color: #b0b0b0;
26
+ --header-font-weight: 500;
27
+
28
+ --card-background-color: #2d2d2d;
29
+ --card-background-accent-color: #252525;
30
+ --card-border-color: #3a3a3a;
31
+ --card-backdrop-filter: none;
32
+ --card-border-accent-color: #4a9eff; // Electric blue accent
33
+ --card-hover-border-color: #4a9eff;
34
+ --card-color: #e0e0e0;
35
+ --card-accent-color: #4a9eff;
36
+ --card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
37
+ --card-surface-box-shadow: var(--card-box-shadow);
38
+ --card-footer-background-color: #252525;
39
+ --card-footer-color: #b0b0b0;
40
+ --card-title-color: var(--body-title-color);
41
+ --card-title-font-family: var(--font-family, sans-serif);
42
+ --card-title-font-size: var(--font-size-md);
43
+ --card-title-font-style: normal;
44
+ --card-title-font-weight: var(--font-weight-bold);
45
+ --card-title-letter-spacing: normal;
46
+ --card-title-text-transform: none;
47
+
48
+ --links-color: #4a9eff;
49
+ --links-hover-color: #6ab0ff;
50
+
51
+ --delimiter-color: #3a3a3a;
52
+ --border-color: #3a3a3a;
53
+
54
+ --button-default-border-color: #4a5568;
55
+ --button-default-background-color: #3a3a3a;
56
+ --button-default-color: #e0e0e0;
57
+ --button-default-hover-border-color: #5a6578;
58
+ --button-default-hover-background-color: rgba(74, 158, 255, 0.1);
59
+ --button-default-hover-color: #ffffff;
60
+
61
+ --button-info-border-color: #2196f3;
62
+ --button-info-background-color: #1976d2;
63
+ --button-info-color: #ffffff;
64
+ --button-info-hover-border-color: #42a5f5;
65
+ --button-info-hover-background-color: rgba(33, 150, 243, 0.15);
66
+ --button-info-hover-color: #ffffff;
67
+
68
+ --button-warning-border-color: #ff9800;
69
+ --button-warning-background-color: #f57c00;
70
+ --button-warning-color: #ffffff;
71
+ --button-warning-hover-border-color: #ffa726;
72
+ --button-warning-hover-background-color: rgba(255, 152, 0, 0.15);
73
+ --button-warning-hover-color: #ffffff;
74
+
75
+ --button-success-border-color: #4caf50;
76
+ --button-success-background-color: #388e3c;
77
+ --button-success-color: #ffffff;
78
+ --button-success-hover-border-color: #66bb6a;
79
+ --button-success-hover-background-color: rgba(76, 175, 80, 0.15);
80
+ --button-success-hover-color: #ffffff;
81
+
82
+ --button-danger-border-color: #f44336;
83
+ --button-danger-background-color: #d32f2f;
84
+ --button-danger-color: #ffffff;
85
+ --button-danger-hover-border-color: #ef5350;
86
+ --button-danger-hover-background-color: rgba(244, 67, 54, 0.15);
87
+ --button-danger-hover-color: #ffffff;
88
+
89
+ --button-plain-color: #b0b0b0;
90
+ --button-plain-hover-color: #ffffff;
91
+ --button-ghost-border-color: transparent;
92
+ --button-ghost-background-color: transparent;
93
+ --button-ghost-color: var(--button-plain-color);
94
+ --button-ghost-hover-border-color: transparent;
95
+ --button-ghost-hover-background-color: var(--card-background-accent-color);
96
+ --button-ghost-hover-color: var(--button-plain-hover-color);
97
+ --dropdown-border-color: #3a3a3a;
98
+ --dropdown-header-background-color: #2d2d2d;
99
+ --dropdown-header-border-focus-color: #4a9eff;
100
+ --dropdown-header-color: #e0e0e0;
101
+ --dropdown-options-background-color: #2d2d2d;
102
+ --dropdown-options-color: #e0e0e0;
103
+ --dropdown-options-hover-background-color: rgba(74, 158, 255, 0.2);
104
+ --dropdown-options-hover-color: #ffffff;
105
+ --dropdown-options-selected-background-color: rgba(74, 158, 255, 0.3);
106
+ --dropdown-options-selected-color: #ffffff;
107
+ --dropdown-chips-background-color: #3a3a3a;
108
+ --dropdown-chips-color: #e0e0e0;
109
+ --dropdown-chips-border-color: #4a5568;
110
+ --dropdown-chips-hover-background-color: #454545;
111
+ --dropdown-action-color: #b0b0b0;
112
+ --dropdown-action-background-color: #2d2d2d;
113
+ --dropdown-action-hover-color: #ffffff;
114
+ --dropdown-action-hover-background-color: #3a3a3a;
115
+
116
+ --tabs-active-background-color: rgba(74, 158, 255, 0.2);
117
+ --tabs-active-color: #4a9eff;
118
+ --tabs-inactive-background-color: transparent;
119
+ --tabs-inactive-color: #888888;
120
+
121
+ --modal-background-color: #252525;
122
+ --modal-border-color: #3a3a3a;
123
+ --modal-backdrop-filter: none;
124
+ --modal-header-background-color: #2d2d2d;
125
+ --modal-header-color: #ffffff;
126
+ --modal-title-color: var(--modal-header-color);
127
+ --modal-title-font-family: var(--font-family, sans-serif);
128
+ --modal-title-font-size: var(--font-size-xl);
129
+ --modal-title-font-style: normal;
130
+ --modal-title-font-weight: var(--font-weight-semibold);
131
+ --modal-title-letter-spacing: normal;
132
+ --modal-title-text-transform: none;
133
+ --modal-body-color: #e0e0e0;
134
+ --modal-footer-background-color: #202020;
135
+ --modal-color: #e0e0e0;
136
+ --modal-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
137
+ --modal-surface-box-shadow: var(--modal-box-shadow);
138
+ --modal-box-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.6);
139
+
140
+ --list-alternate-background-color: #2a2a2a;
141
+ --list-hover-background-color: rgba(74, 158, 255, 0.1);
142
+
143
+ --progress-bar-background-color: #3a3a3a;
144
+ --progress-bar-color: #e8f3ff;
145
+
146
+ --progress-default-bar-border-color: #4a5568;
147
+ --progress-default-bar-fill-color: #888888;
148
+
149
+ --progress-success-bar-border-color: #4caf50;
150
+ --progress-success-bar-fill-color: #4caf50;
151
+
152
+ --progress-info-bar-border-color: #2196f3;
153
+ --progress-info-bar-fill-color: #2196f3;
154
+
155
+ --progress-warning-bar-border-color: #ff9800;
156
+ --progress-warning-bar-fill-color: #ff9800;
157
+
158
+ --progress-danger-bar-border-color: #f44336;
159
+ --progress-danger-bar-fill-color: #f44336;
160
+
161
+ --form-control-background-color: #2d2d2d;
162
+ --form-control-color: #e0e0e0;
163
+ --form-control-label-color: var(--body-color-muted);
164
+ --form-control-label-font-size: var(--font-size-sm);
165
+ --form-control-label-font-weight: var(--font-weight-medium);
166
+ --form-control-label-letter-spacing: normal;
167
+ --form-control-label-text-transform: none;
168
+ --form-control-border-color: #3a3a3a;
169
+ --form-control-error-background-color: #f4433611;
170
+ --form-control-error-color: #f44336;
171
+ --form-control-error-border-color: #f44336;
172
+ --form-control-focus-background-color: #323232;
173
+ --form-control-focus-border-color: #4a9eff;
174
+ --form-control-focus-color: #ffffff;
175
+ --form-control-placeholder-color: #888888;
176
+ --form-control-success-background-color: #4caf5011;
177
+ --form-control-success-color: #4caf50;
178
+ --form-control-success-border-color: #4caf50;
179
+
180
+ --form-control-selection-background-color: #4a9eff;
181
+ --form-control-selection-border-color: #4a9eff;
182
+ --form-control-selection-color: #ffffff;
183
+ --form-control-selection-label-color: #ffffff;
184
+ --form-control-focus-ring: rgba(74, 158, 255, 0.4);
185
+
186
+ --calendar-background-color: #1a1a1a;
187
+ --calendar-border-color: #333333;
188
+ --calendar-header-background-color: #2d2d2d;
189
+ --calendar-header-color: #ffffff;
190
+ --calendar-day-color: #e0e0e0;
191
+ --calendar-day-hover-background-color: #2d2d2d;
192
+ --calendar-day-selected-background-color: #4a9eff;
193
+ --calendar-day-selected-color: #ffffff;
194
+ --calendar-day-disabled-color: #666666;
195
+ --calendar-day-today-border-color: #4a9eff;
196
+ --calendar-day-weekend-color: #70b8ff;
197
+
198
+ --datepicker-input-background-color: #2d2d2d;
199
+
200
+ --tooltip-background-color: #4a9eff;
201
+ --tooltip-border-color: #4a9eff;
202
+ --tooltip-color: #ffffff;
203
+
204
+ --popover-background-color: #2d2d2d;
205
+ --popover-border-color: #4a9eff;
206
+ --popover-color: #e0e0e0;
207
+ --popover-arrow-color: #4a9eff;
208
+
209
+ --toast-info-background-color: #2196f3;
210
+ --toast-info-color: #ffffff;
211
+ --toast-info-border-color: #2196f3;
212
+
213
+ --toast-success-background-color: #4caf50;
214
+ --toast-success-color: #ffffff;
215
+ --toast-success-border-color: #4caf50;
216
+
217
+ --toast-warning-background-color: #ff9800;
218
+ --toast-warning-color: #ffffff;
219
+ --toast-warning-border-color: #ff9800;
220
+
221
+ --toast-danger-background-color: #f44336;
222
+ --toast-danger-color: #ffffff;
223
+ --toast-danger-border-color: #f44336;
224
+
225
+ --loader-border-color: rgba(74, 158, 255, 0.2);
226
+ --loader-border-top-color: #4a9eff;
227
+
228
+ --rating-color-success: #4caf50;
229
+ --rating-color-warning: #ff9800;
230
+ --rating-color-danger: #f44336;
231
+ --rating-color-info: #2196f3;
232
+ --rating-empty-color: #555555;
233
+ --rating-empty-label-color: #e0e0e0;
234
+ --rating-half-rate-empty-color: #555555;
235
+
236
+ --slider-track-background-color: #3a3a3a;
237
+ --slider-track-border-color: #4a5568;
238
+ --slider-track-hover-background-color: #404040;
239
+ --slider-track-hover-border-color: #5a6578;
240
+ --slider-thumb-background-color: #4a9eff;
241
+ --slider-thumb-border-color: #4a9eff;
242
+ --slider-thumb-hover-background-color: #6ab0ff;
243
+ --slider-thumb-hover-border-color: #6ab0ff;
244
+
245
+ --chip-selected-background-color: var(--card-background-accent-color);
246
+ --chip-selected-border-color: var(--body-accent-color);
247
+ --chip-hover-border-color: var(--body-accent-color);
248
+ --chip-hover-background-color: var(--card-background-accent-color);
249
+ --chip-hover-color: var(--body-color-accent);
250
+ --chip-selected-color: var(--body-accent-color);
251
+ --chip-selected-count-color: var(--body-color-muted);
252
+
253
+ --note-container-effect-background-color: rgba(74, 158, 255, 0.1);
254
+ --note-container-effect-color: #e0e0e0;
255
+ --note-container-effect-border-left-color: #4a9eff;
256
+
257
+ --infuse-effect-hover-border-color: #4a9eff;
258
+ --infuse-effect-hover-box-shadow-color: rgba(74, 158, 255, 0.3);
259
+ --infuse-effect-before-background: linear-gradient(90deg, #4a9eff, #6ab0ff);
260
+
261
+ --up-lift-effect-hover-border-color: #4a9eff;
262
+ --up-lift-effect-box-shadow-color: rgba(0, 0, 0, 0.4);
263
+ --up-lift-effect-hover-box-shadow-color: rgba(74, 158, 255, 0.3);
264
+ --up-lift-effect-before-background: linear-gradient(135deg, #4a9eff 0%, #6ab0ff 100%);
265
+
266
+ --glow-box-shadow-color: 0 0 16px rgba(74, 158, 255, 0.5), 0 0 6px rgba(74, 158, 255, 0.3);
267
+ --glow-hover-border-color: rgba(74, 158, 255, 0.35);
268
+ }