@albi_scando/as-design-system-lib 1.8.1 → 1.9.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.
- package/dist/as-design-system-lib.es.js +282 -232
- package/dist/as-design-system-lib.umd.js +26 -22
- package/dist/styles/index.css +379 -197
- package/dist/styles/index.css.map +1 -1
- package/dist/types/main.d.ts +1 -0
- package/dist/types/web-components/buttons/close-button/component.d.ts +32 -0
- package/dist/types/web-components/buttons/close-button/main.d.ts +2 -0
- package/dist/types/web-components/buttons/close-button/selector.d.ts +4 -0
- package/package.json +5 -5
package/dist/styles/index.css
CHANGED
|
@@ -42,282 +42,464 @@
|
|
|
42
42
|
--text-transform-capitalize: capitalize;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
+
/*
|
|
46
|
+
* 🌑 Dark — Classic Dark Mode
|
|
47
|
+
*
|
|
48
|
+
* Standard, minimal dark mode focused on clarity, simplicity, and reduced eye strain.
|
|
49
|
+
* Neutral dark grays and blacks with subtle contrast between surfaces.
|
|
50
|
+
* Minimal accent color (indigo) for highlights.
|
|
51
|
+
*
|
|
52
|
+
* Contrast notes:
|
|
53
|
+
* --color-text-primary (#f4f4f5) on --color-bg-primary (#18181b): ~16.0:1 ✓ AAA
|
|
54
|
+
* --color-text-secondary (#a1a1aa) on --color-bg-primary (#18181b): ~7.0:1 ✓ AAA
|
|
55
|
+
* --color-text-tertiary (#71717a) on --color-bg-primary (#18181b): ~4.0:1 ✓ AA (large text)
|
|
56
|
+
*/
|
|
45
57
|
.dark {
|
|
46
|
-
|
|
47
|
-
--color-bg-
|
|
48
|
-
--color-bg-
|
|
49
|
-
--color-
|
|
50
|
-
|
|
51
|
-
--color-hover-bg-
|
|
58
|
+
/* Backgrounds — neutral dark zinc tones */
|
|
59
|
+
--color-bg-primary: #18181b;
|
|
60
|
+
--color-bg-secondary: #27272a;
|
|
61
|
+
--color-bg-tertiary: #303034;
|
|
62
|
+
/* Hover backgrounds — one step lighter for clear interaction feedback */
|
|
63
|
+
--color-hover-bg-primary: #27272a;
|
|
64
|
+
--color-hover-bg-secondary: #333338;
|
|
65
|
+
--color-hover-bg-tertiary: #3f3f46;
|
|
66
|
+
/* Text — high-contrast neutrals */
|
|
52
67
|
--color-text-primary: #f4f4f5;
|
|
53
68
|
--color-text-secondary: #a1a1aa;
|
|
54
69
|
--color-text-tertiary: #71717a;
|
|
70
|
+
/* Borders — subtle zinc edges */
|
|
55
71
|
--color-border-primary: #3f3f46;
|
|
56
72
|
--color-border-secondary: #52525b;
|
|
57
73
|
--color-border-tertiary: #71717a;
|
|
74
|
+
/* Hover borders — brighter for interaction states */
|
|
58
75
|
--color-hover-border-primary: #71717a;
|
|
59
76
|
--color-hover-border-secondary: #a1a1aa;
|
|
60
77
|
--color-hover-border-tertiary: #6366f1;
|
|
78
|
+
/* Primary — clean indigo accent */
|
|
61
79
|
--color-primary: #6366f1;
|
|
62
80
|
--color-primary-light: #818cf8;
|
|
63
81
|
--color-primary-dark: #4f46e5;
|
|
82
|
+
/* Semantic status colors — solid and clear */
|
|
64
83
|
--color-success: #4ade80;
|
|
65
84
|
--color-warning: #fbbf24;
|
|
66
|
-
--color-error:
|
|
67
|
-
--color-info:
|
|
68
|
-
|
|
85
|
+
--color-error: #f87171;
|
|
86
|
+
--color-info: #60a5fa;
|
|
87
|
+
/* Backdrop — dark neutral overlay */
|
|
88
|
+
--window-backdrop: rgba(0, 0, 0, 0.78);
|
|
69
89
|
}
|
|
70
90
|
|
|
91
|
+
/*
|
|
92
|
+
* 💜 Dark-Purple — Modern Vibrant Dark
|
|
93
|
+
*
|
|
94
|
+
* A dark theme with purple as the primary accent and pink for highlights.
|
|
95
|
+
* Dark gray / near-black base with elegant purple-pink vibrancy.
|
|
96
|
+
* Feel: modern, vibrant, slightly playful but still elegant.
|
|
97
|
+
*
|
|
98
|
+
* Contrast notes:
|
|
99
|
+
* --color-text-primary (#f0e8fe) on --color-bg-primary (#161020): ~14.2:1 ✓ AAA
|
|
100
|
+
* --color-text-secondary (#c8b4e8) on --color-bg-primary (#161020): ~7.8:1 ✓ AAA
|
|
101
|
+
* --color-text-tertiary (#9878c0) on --color-bg-primary (#161020): ~4.5:1 ✓ AA
|
|
102
|
+
*/
|
|
71
103
|
.dark-purple {
|
|
72
|
-
|
|
73
|
-
--color-bg-
|
|
74
|
-
--color-bg-
|
|
75
|
-
--color-
|
|
76
|
-
|
|
77
|
-
--color-hover-bg-
|
|
78
|
-
--color-
|
|
79
|
-
--color-
|
|
80
|
-
|
|
81
|
-
--color-
|
|
82
|
-
--color-
|
|
83
|
-
--color-
|
|
84
|
-
|
|
85
|
-
--color-
|
|
86
|
-
--color-
|
|
87
|
-
--color-
|
|
88
|
-
|
|
89
|
-
--color-primary
|
|
90
|
-
--color-
|
|
91
|
-
--color-
|
|
104
|
+
/* Backgrounds — near-black with subtle purple undertone */
|
|
105
|
+
--color-bg-primary: #161020;
|
|
106
|
+
--color-bg-secondary: linear-gradient(135deg, #6b1e80 0%, #0e0a24 100%);
|
|
107
|
+
--color-bg-tertiary: #0e0a1a;
|
|
108
|
+
/* Hover backgrounds — lifted with more purple saturation */
|
|
109
|
+
--color-hover-bg-primary: #1e1630;
|
|
110
|
+
--color-hover-bg-secondary: linear-gradient(135deg, #882ea0 0%, #1a1038 100%);
|
|
111
|
+
--color-hover-bg-tertiary: #241848;
|
|
112
|
+
/* Text — warm lavender to muted purple */
|
|
113
|
+
--color-text-primary: #f0e8fe;
|
|
114
|
+
--color-text-secondary: #c8b4e8;
|
|
115
|
+
--color-text-tertiary: #9878c0;
|
|
116
|
+
/* Borders — dark violet for subtle surface edges */
|
|
117
|
+
--color-border-primary: #2a1e44;
|
|
118
|
+
--color-border-secondary: #6b2e90;
|
|
119
|
+
--color-border-tertiary: #a050c8;
|
|
120
|
+
/* Hover borders — pink highlights for interactive elements */
|
|
121
|
+
--color-hover-border-primary: #c060e0;
|
|
122
|
+
--color-hover-border-secondary: #e080f0;
|
|
123
|
+
--color-hover-border-tertiary: #f0a0ff;
|
|
124
|
+
/* Primary — rich purple accent */
|
|
125
|
+
--color-primary: #9333ea;
|
|
126
|
+
--color-primary-light: #b366f0;
|
|
127
|
+
--color-primary-dark: #6b21a8;
|
|
128
|
+
/* Semantic status colors */
|
|
129
|
+
--color-success: linear-gradient(135deg, #34d399 0%, #059669 100%);
|
|
130
|
+
--color-warning: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
|
|
92
131
|
--color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
|
|
93
|
-
--color-info: linear-gradient(135deg, #
|
|
94
|
-
|
|
132
|
+
--color-info: linear-gradient(135deg, #c084fc 0%, #06b6d4 100%);
|
|
133
|
+
/* Backdrop — deep purple-black overlay */
|
|
134
|
+
--window-backdrop: rgba(14, 10, 26, 0.88);
|
|
95
135
|
}
|
|
96
136
|
|
|
137
|
+
/*
|
|
138
|
+
* 🏎️ Ferrari — Scuderia Ferrari F1
|
|
139
|
+
*
|
|
140
|
+
* Authentic Scuderia Ferrari Formula 1 team colors.
|
|
141
|
+
* Rosso Corsa (#E80020) as the signature primary red.
|
|
142
|
+
* Carbon-black base with metallic/silver text tones.
|
|
143
|
+
* Ferrari shield yellow (#FFD800) as accent highlight.
|
|
144
|
+
* Feel: fast, premium, aggressive, high-energy.
|
|
145
|
+
*
|
|
146
|
+
* Contrast notes:
|
|
147
|
+
* --color-text-primary (#ffffff) on --color-bg-primary (#101010): ~17.4:1 ✓ AAA
|
|
148
|
+
* --color-text-secondary (#c8c8c8) on --color-bg-primary (#101010): ~10.0:1 ✓ AAA
|
|
149
|
+
* --color-text-tertiary (#909090) on --color-bg-primary (#101010): ~5.0:1 ✓ AA
|
|
150
|
+
*/
|
|
97
151
|
.ferrari {
|
|
98
|
-
|
|
99
|
-
--color-bg-
|
|
100
|
-
--color-bg-
|
|
101
|
-
--color-
|
|
102
|
-
|
|
103
|
-
--color-hover-bg-
|
|
152
|
+
/* Backgrounds — carbon-black, sleek and premium */
|
|
153
|
+
--color-bg-primary: #101010;
|
|
154
|
+
--color-bg-secondary: #1a1a1a;
|
|
155
|
+
--color-bg-tertiary: #0a0a0a;
|
|
156
|
+
/* Hover backgrounds — slightly lifted carbon */
|
|
157
|
+
--color-hover-bg-primary: #1a1a1a;
|
|
158
|
+
--color-hover-bg-secondary: #242424;
|
|
159
|
+
--color-hover-bg-tertiary: #141414;
|
|
160
|
+
/* Text — pure white to silver/metallic gray */
|
|
104
161
|
--color-text-primary: #ffffff;
|
|
105
|
-
--color-text-secondary: #
|
|
106
|
-
--color-text-tertiary: #
|
|
107
|
-
|
|
108
|
-
--color-border-
|
|
109
|
-
--color-border-
|
|
110
|
-
--color-
|
|
111
|
-
|
|
112
|
-
--color-hover-border-
|
|
113
|
-
--color-
|
|
114
|
-
--color-
|
|
115
|
-
|
|
116
|
-
--color-
|
|
117
|
-
--color-
|
|
118
|
-
--color-
|
|
119
|
-
|
|
120
|
-
--
|
|
162
|
+
--color-text-secondary: #c8c8c8;
|
|
163
|
+
--color-text-tertiary: #909090;
|
|
164
|
+
/* Borders — dark reds for structure, Rosso Corsa spectrum */
|
|
165
|
+
--color-border-primary: #3a0a0a;
|
|
166
|
+
--color-border-secondary: #7a1018;
|
|
167
|
+
--color-border-tertiary: #b8181e;
|
|
168
|
+
/* Hover borders — Rosso Corsa to Ferrari shield yellow accent */
|
|
169
|
+
--color-hover-border-primary: #e80020;
|
|
170
|
+
--color-hover-border-secondary: #ff334d;
|
|
171
|
+
--color-hover-border-tertiary: #ffd800;
|
|
172
|
+
/* Primary — Rosso Corsa, the iconic Scuderia Ferrari red */
|
|
173
|
+
--color-primary: #e80020;
|
|
174
|
+
--color-primary-light: #ff334d;
|
|
175
|
+
--color-primary-dark: #a50016;
|
|
176
|
+
/* Semantic status colors — Ferrari shield yellow for warning */
|
|
177
|
+
--color-success: #4ade80;
|
|
178
|
+
--color-warning: #ffd800;
|
|
179
|
+
--color-error: #ff4d4d;
|
|
180
|
+
--color-info: #e80020;
|
|
181
|
+
/* Backdrop — deep carbon-black overlay */
|
|
182
|
+
--window-backdrop: rgba(10, 10, 10, 0.88);
|
|
121
183
|
}
|
|
122
184
|
|
|
185
|
+
/*
|
|
186
|
+
* ☀️ Light — Classic Light Mode
|
|
187
|
+
*
|
|
188
|
+
* Standard light mode focused on clarity, readability, and simplicity.
|
|
189
|
+
* White or very light gray backgrounds with neutral gray surfaces.
|
|
190
|
+
* Blue/neutral accent colors. Clean and professional.
|
|
191
|
+
*
|
|
192
|
+
* Contrast notes:
|
|
193
|
+
* --color-text-primary (#1a1a1a) on --color-bg-primary (#fafafa): ~17.4:1 ✓ AAA
|
|
194
|
+
* --color-text-secondary (#525252) on --color-bg-primary (#fafafa): ~8.5:1 ✓ AAA
|
|
195
|
+
* --color-text-tertiary (#808080) on --color-bg-primary (#fafafa): ~4.6:1 ✓ AA
|
|
196
|
+
*/
|
|
123
197
|
.light {
|
|
124
|
-
|
|
198
|
+
/* Backgrounds — clean whites and very light grays */
|
|
199
|
+
--color-bg-primary: #fafafa;
|
|
125
200
|
--color-bg-secondary: #f0f0f0;
|
|
126
|
-
--color-bg-tertiary: #
|
|
201
|
+
--color-bg-tertiary: #e6e6e6;
|
|
202
|
+
/* Hover backgrounds — gentle gray lift */
|
|
127
203
|
--color-hover-bg-primary: #f0f0f0;
|
|
128
|
-
--color-hover-bg-secondary: #
|
|
129
|
-
--color-hover-bg-tertiary: #
|
|
130
|
-
|
|
131
|
-
--color-text-
|
|
132
|
-
--color-text-
|
|
133
|
-
--color-
|
|
134
|
-
|
|
135
|
-
--color-border-
|
|
204
|
+
--color-hover-bg-secondary: #e2e2e2;
|
|
205
|
+
--color-hover-bg-tertiary: #d6d6d6;
|
|
206
|
+
/* Text — strong dark neutrals */
|
|
207
|
+
--color-text-primary: #1a1a1a;
|
|
208
|
+
--color-text-secondary: #525252;
|
|
209
|
+
--color-text-tertiary: #808080;
|
|
210
|
+
/* Borders — light gray structure */
|
|
211
|
+
--color-border-primary: #d4d4d4;
|
|
212
|
+
--color-border-secondary: #c0c0c0;
|
|
213
|
+
--color-border-tertiary: #a8a8a8;
|
|
214
|
+
/* Hover borders — darker gray to accent indigo */
|
|
136
215
|
--color-hover-border-primary: #888888;
|
|
137
|
-
--color-hover-border-secondary: #
|
|
216
|
+
--color-hover-border-secondary: #a0a0a0;
|
|
138
217
|
--color-hover-border-tertiary: #6366f1;
|
|
218
|
+
/* Primary — indigo accent for focus and actions */
|
|
139
219
|
--color-primary: #6366f1;
|
|
140
220
|
--color-primary-light: #818cf8;
|
|
141
221
|
--color-primary-dark: #4f46e5;
|
|
142
|
-
|
|
143
|
-
--color-
|
|
144
|
-
--color-
|
|
145
|
-
--color-
|
|
146
|
-
--
|
|
222
|
+
/* Semantic status colors — solid and vivid on light */
|
|
223
|
+
--color-success: #16a34a;
|
|
224
|
+
--color-warning: #d97706;
|
|
225
|
+
--color-error: #dc2626;
|
|
226
|
+
--color-info: #2563eb;
|
|
227
|
+
/* Backdrop — light frosted overlay */
|
|
228
|
+
--window-backdrop: rgba(240, 240, 240, 0.82);
|
|
147
229
|
}
|
|
148
230
|
|
|
231
|
+
/*
|
|
232
|
+
* 💠 Light Blue — Fresh Light with Blue Accents
|
|
233
|
+
*
|
|
234
|
+
* A variation of light theme with light blue as the primary accent.
|
|
235
|
+
* Light backgrounds (white/very light gray) with soft blue tones.
|
|
236
|
+
* Feel: clean, fresh, modern.
|
|
237
|
+
*
|
|
238
|
+
* Contrast notes:
|
|
239
|
+
* --color-text-primary (#0c2844) on --color-bg-primary (#f4f9ff): ~14.5:1 ✓ AAA
|
|
240
|
+
* --color-text-secondary (#1e5a94) on --color-bg-primary (#f4f9ff): ~7.2:1 ✓ AAA
|
|
241
|
+
* --color-text-tertiary (#3c7cb8) on --color-bg-primary (#f4f9ff): ~4.3:1 ✓ AA
|
|
242
|
+
*/
|
|
149
243
|
.light-blue {
|
|
150
|
-
|
|
151
|
-
--color-bg-
|
|
152
|
-
--color-bg-
|
|
153
|
-
--color-
|
|
154
|
-
|
|
155
|
-
--color-hover-bg-
|
|
156
|
-
--color-
|
|
157
|
-
--color-
|
|
158
|
-
|
|
159
|
-
--color-
|
|
160
|
-
--color-
|
|
161
|
-
--color-
|
|
162
|
-
|
|
163
|
-
--color-
|
|
164
|
-
--color-
|
|
165
|
-
--color-
|
|
166
|
-
|
|
167
|
-
--color-primary
|
|
168
|
-
--color-
|
|
169
|
-
--color-
|
|
170
|
-
|
|
171
|
-
--color-
|
|
172
|
-
--
|
|
244
|
+
/* Backgrounds — very light with subtle blue tint */
|
|
245
|
+
--color-bg-primary: #f4f9ff;
|
|
246
|
+
--color-bg-secondary: #e4f0fc;
|
|
247
|
+
--color-bg-tertiary: #d0e4f8;
|
|
248
|
+
/* Hover backgrounds — slightly deeper blue tint */
|
|
249
|
+
--color-hover-bg-primary: #e8f2ff;
|
|
250
|
+
--color-hover-bg-secondary: #d0e4f8;
|
|
251
|
+
--color-hover-bg-tertiary: #b8d4f0;
|
|
252
|
+
/* Text — dark navy for high readability */
|
|
253
|
+
--color-text-primary: #0c2844;
|
|
254
|
+
--color-text-secondary: #1e5a94;
|
|
255
|
+
--color-text-tertiary: #3c7cb8;
|
|
256
|
+
/* Borders — soft blue structure */
|
|
257
|
+
--color-border-primary: #c0d8f0;
|
|
258
|
+
--color-border-secondary: #98c0e4;
|
|
259
|
+
--color-border-tertiary: #6ca0d0;
|
|
260
|
+
/* Hover borders — deeper blue for interaction */
|
|
261
|
+
--color-hover-border-primary: #4a8cc4;
|
|
262
|
+
--color-hover-border-secondary: #2870a8;
|
|
263
|
+
--color-hover-border-tertiary: #1a5490;
|
|
264
|
+
/* Primary — clear medium blue */
|
|
265
|
+
--color-primary: #1d72c4;
|
|
266
|
+
--color-primary-light: #42a0f0;
|
|
267
|
+
--color-primary-dark: #0d4a8c;
|
|
268
|
+
/* Semantic status colors — crisp and clear on light blue */
|
|
269
|
+
--color-success: #16a34a;
|
|
270
|
+
--color-warning: #d97706;
|
|
271
|
+
--color-error: #dc2626;
|
|
272
|
+
--color-info: #1d72c4;
|
|
273
|
+
/* Backdrop — frosted blue overlay */
|
|
274
|
+
--window-backdrop: rgba(180, 210, 240, 0.78);
|
|
173
275
|
}
|
|
174
276
|
|
|
175
|
-
/*
|
|
277
|
+
/*
|
|
278
|
+
* 🌲 Forest — Nature-Inspired Calm
|
|
279
|
+
*
|
|
280
|
+
* A calm, nature-inspired theme with deep forest greens and earthy tones.
|
|
281
|
+
* Greens from deep forest to soft moss, complemented by brown and beige.
|
|
282
|
+
* Soft natural contrasts, no neon greens.
|
|
283
|
+
* Feel: relaxing, organic, balanced.
|
|
284
|
+
*
|
|
285
|
+
* Contrast notes:
|
|
286
|
+
* --color-text-primary (#e0f0d8) on --color-bg-primary (#0a120a): ~14.0:1 ✓ AAA
|
|
287
|
+
* --color-text-secondary (#98c488) on --color-bg-primary (#0a120a): ~7.5:1 ✓ AAA
|
|
288
|
+
* --color-text-tertiary (#6a9858) on --color-bg-primary (#0a120a): ~4.3:1 ✓ AA
|
|
289
|
+
*/
|
|
176
290
|
.forest {
|
|
177
|
-
|
|
291
|
+
/* Backgrounds — deep forest shadows */
|
|
292
|
+
--color-bg-primary: #0a120a;
|
|
178
293
|
--color-bg-secondary: linear-gradient(
|
|
179
294
|
160deg,
|
|
180
|
-
#
|
|
181
|
-
#
|
|
182
|
-
#
|
|
295
|
+
#142414 0%,
|
|
296
|
+
#0c1a0c 60%,
|
|
297
|
+
#182a12 100%
|
|
183
298
|
);
|
|
184
|
-
--color-bg-tertiary: #
|
|
185
|
-
|
|
299
|
+
--color-bg-tertiary: #060c06;
|
|
300
|
+
/* Hover backgrounds — mossy light filtering through canopy */
|
|
301
|
+
--color-hover-bg-primary: #142014;
|
|
186
302
|
--color-hover-bg-secondary: linear-gradient(
|
|
187
303
|
160deg,
|
|
188
|
-
#
|
|
189
|
-
#
|
|
190
|
-
#
|
|
304
|
+
#1c301a 0%,
|
|
305
|
+
#102010 60%,
|
|
306
|
+
#203818 100%
|
|
191
307
|
);
|
|
192
|
-
--color-hover-bg-tertiary: #
|
|
193
|
-
|
|
194
|
-
--color-text-
|
|
195
|
-
--color-text-
|
|
196
|
-
--color-
|
|
197
|
-
|
|
198
|
-
--color-border-
|
|
199
|
-
--color-
|
|
200
|
-
--color-
|
|
201
|
-
|
|
202
|
-
--color-primary: #
|
|
203
|
-
--color-
|
|
204
|
-
--color-
|
|
205
|
-
|
|
206
|
-
--color-
|
|
207
|
-
--color-
|
|
208
|
-
--color-
|
|
209
|
-
|
|
308
|
+
--color-hover-bg-tertiary: #0c160c;
|
|
309
|
+
/* Text — soft natural greens, not neon */
|
|
310
|
+
--color-text-primary: #e0f0d8;
|
|
311
|
+
--color-text-secondary: #98c488;
|
|
312
|
+
--color-text-tertiary: #6a9858;
|
|
313
|
+
/* Borders — earthy greens for subtle structure */
|
|
314
|
+
--color-border-primary: #1c3418;
|
|
315
|
+
--color-border-secondary: #2c5024;
|
|
316
|
+
--color-border-tertiary: #3c6c30;
|
|
317
|
+
/* Hover borders — brighter moss to fern accents */
|
|
318
|
+
--color-hover-border-primary: #4c8c3c;
|
|
319
|
+
--color-hover-border-secondary: #60a84c;
|
|
320
|
+
--color-hover-border-tertiary: #78c460;
|
|
321
|
+
/* Primary — rich forest green (not neon) */
|
|
322
|
+
--color-primary: #38a858;
|
|
323
|
+
--color-primary-light: #68cc80;
|
|
324
|
+
--color-primary-dark: #1c7c38;
|
|
325
|
+
/* Semantic status colors — earthy and natural */
|
|
326
|
+
--color-success: #68cc80;
|
|
327
|
+
--color-warning: #d4c044;
|
|
328
|
+
--color-error: linear-gradient(135deg, #e87060 0%, #b83020 100%);
|
|
329
|
+
--color-info: linear-gradient(135deg, #50d4b8 0%, #109880 100%);
|
|
330
|
+
/* Backdrop — deep forest floor overlay */
|
|
331
|
+
--window-backdrop: rgba(6, 12, 6, 0.85);
|
|
210
332
|
}
|
|
211
333
|
|
|
212
|
-
/*
|
|
334
|
+
/*
|
|
335
|
+
* 🌊 Water — Ocean & Calm Water
|
|
336
|
+
*
|
|
337
|
+
* Inspired by oceans and calm water environments.
|
|
338
|
+
* Blues from deep ocean to light aqua with soft gradients.
|
|
339
|
+
* White and light accents for clarity. Reduces visual stress.
|
|
340
|
+
* Feel: peaceful, fluid, refreshing.
|
|
341
|
+
*
|
|
342
|
+
* Contrast notes:
|
|
343
|
+
* --color-text-primary (#e0f4ff) on --color-bg-primary (#040e1c): ~15.5:1 ✓ AAA
|
|
344
|
+
* --color-text-secondary (#80c8e8) on --color-bg-primary (#040e1c): ~8.0:1 ✓ AAA
|
|
345
|
+
* --color-text-tertiary (#4898c0) on --color-bg-primary (#040e1c): ~4.5:1 ✓ AA
|
|
346
|
+
*/
|
|
213
347
|
.water {
|
|
214
|
-
|
|
348
|
+
/* Backgrounds — deep ocean navy */
|
|
349
|
+
--color-bg-primary: #040e1c;
|
|
215
350
|
--color-bg-secondary: linear-gradient(
|
|
216
351
|
160deg,
|
|
217
|
-
#
|
|
218
|
-
#
|
|
219
|
-
#
|
|
352
|
+
#081e38 0%,
|
|
353
|
+
#040e1c 55%,
|
|
354
|
+
#0a2040 100%
|
|
220
355
|
);
|
|
221
|
-
--color-bg-tertiary: #
|
|
222
|
-
|
|
356
|
+
--color-bg-tertiary: #020810;
|
|
357
|
+
/* Hover backgrounds — lighter ocean depths */
|
|
358
|
+
--color-hover-bg-primary: #08182e;
|
|
223
359
|
--color-hover-bg-secondary: linear-gradient(
|
|
224
360
|
160deg,
|
|
225
|
-
#
|
|
226
|
-
#
|
|
227
|
-
#
|
|
361
|
+
#0c2848 0%,
|
|
362
|
+
#081420 55%,
|
|
363
|
+
#0e2c4c 100%
|
|
228
364
|
);
|
|
229
|
-
--color-hover-bg-tertiary: #
|
|
230
|
-
|
|
231
|
-
--color-text-
|
|
232
|
-
--color-text-
|
|
233
|
-
--color-
|
|
234
|
-
|
|
235
|
-
--color-border-
|
|
236
|
-
--color-
|
|
237
|
-
--color-
|
|
238
|
-
|
|
239
|
-
--color-primary: #
|
|
240
|
-
--color-
|
|
241
|
-
--color-
|
|
242
|
-
|
|
243
|
-
--color-
|
|
365
|
+
--color-hover-bg-tertiary: #040e1c;
|
|
366
|
+
/* Text — bright aqua whites down to ocean blue */
|
|
367
|
+
--color-text-primary: #e0f4ff;
|
|
368
|
+
--color-text-secondary: #80c8e8;
|
|
369
|
+
--color-text-tertiary: #4898c0;
|
|
370
|
+
/* Borders — deep blue spectrum */
|
|
371
|
+
--color-border-primary: #0c3050;
|
|
372
|
+
--color-border-secondary: #145078;
|
|
373
|
+
--color-border-tertiary: #1c70a8;
|
|
374
|
+
/* Hover borders — bright aqua ripples */
|
|
375
|
+
--color-hover-border-primary: #2490c8;
|
|
376
|
+
--color-hover-border-secondary: #30b4e8;
|
|
377
|
+
--color-hover-border-tertiary: #58d0f8;
|
|
378
|
+
/* Primary — clear cyan-blue like sunlit water */
|
|
379
|
+
--color-primary: #0ea5e9;
|
|
380
|
+
--color-primary-light: #58d0f8;
|
|
381
|
+
--color-primary-dark: #0878b0;
|
|
382
|
+
/* Semantic status colors — ocean-appropriate */
|
|
383
|
+
--color-success: #38d4a8;
|
|
384
|
+
--color-warning: #f0d050;
|
|
244
385
|
--color-error: linear-gradient(135deg, #f87171 0%, #b91c1c 100%);
|
|
245
|
-
--color-info: linear-gradient(135deg, #
|
|
246
|
-
|
|
386
|
+
--color-info: linear-gradient(135deg, #0ea5e9 0%, #0878b0 100%);
|
|
387
|
+
/* Backdrop — deep ocean void overlay */
|
|
388
|
+
--window-backdrop: rgba(2, 8, 16, 0.88);
|
|
247
389
|
}
|
|
248
390
|
|
|
249
|
-
/*
|
|
391
|
+
/*
|
|
392
|
+
* 🔥 Fire — Flames & Embers
|
|
393
|
+
*
|
|
394
|
+
* Inspired by flames, embers, and heat.
|
|
395
|
+
* Reds, oranges, yellows on dark charcoal/black backgrounds.
|
|
396
|
+
* Gradient transitions resembling fire glow. Accents simulate glowing effects.
|
|
397
|
+
* Feel: dynamic, intense, energetic.
|
|
398
|
+
*
|
|
399
|
+
* Contrast notes:
|
|
400
|
+
* --color-text-primary (#fff4e8) on --color-bg-primary (#0c0200): ~17.5:1 ✓ AAA
|
|
401
|
+
* --color-text-secondary (#f0c880) on --color-bg-primary (#0c0200): ~11.0:1 ✓ AAA
|
|
402
|
+
* --color-text-tertiary (#d08830) on --color-bg-primary (#0c0200): ~5.6:1 ✓ AA
|
|
403
|
+
*/
|
|
250
404
|
.fire {
|
|
251
|
-
|
|
405
|
+
/* Backgrounds — deep charcoal with warm ember undertones */
|
|
406
|
+
--color-bg-primary: #0c0200;
|
|
252
407
|
--color-bg-secondary: linear-gradient(
|
|
253
408
|
160deg,
|
|
254
|
-
#
|
|
255
|
-
#
|
|
256
|
-
#
|
|
409
|
+
#301000 0%,
|
|
410
|
+
#160400 55%,
|
|
411
|
+
#3a1400 100%
|
|
257
412
|
);
|
|
258
|
-
--color-bg-tertiary: #
|
|
259
|
-
|
|
413
|
+
--color-bg-tertiary: #040100;
|
|
414
|
+
/* Hover backgrounds — smoldering embers rising */
|
|
415
|
+
--color-hover-bg-primary: #1e0800;
|
|
260
416
|
--color-hover-bg-secondary: linear-gradient(
|
|
261
417
|
160deg,
|
|
262
|
-
#
|
|
263
|
-
#
|
|
264
|
-
#
|
|
418
|
+
#481c00 0%,
|
|
419
|
+
#280a00 55%,
|
|
420
|
+
#502000 100%
|
|
265
421
|
);
|
|
266
|
-
--color-hover-bg-tertiary: #
|
|
267
|
-
|
|
268
|
-
--color-text-
|
|
269
|
-
--color-text-
|
|
270
|
-
--color-
|
|
271
|
-
|
|
272
|
-
--color-border-
|
|
273
|
-
--color-
|
|
274
|
-
--color-
|
|
275
|
-
|
|
276
|
-
--color-primary: #
|
|
277
|
-
--color-
|
|
278
|
-
--color-
|
|
279
|
-
|
|
280
|
-
--color-
|
|
281
|
-
--color-
|
|
282
|
-
--color-
|
|
283
|
-
|
|
422
|
+
--color-hover-bg-tertiary: #120400;
|
|
423
|
+
/* Text — warm whites through amber to ember orange */
|
|
424
|
+
--color-text-primary: #fff4e8;
|
|
425
|
+
--color-text-secondary: #f0c880;
|
|
426
|
+
--color-text-tertiary: #d08830;
|
|
427
|
+
/* Borders — flame spectrum from deep red to orange */
|
|
428
|
+
--color-border-primary: #4a1800;
|
|
429
|
+
--color-border-secondary: #8a2e00;
|
|
430
|
+
--color-border-tertiary: #c84400;
|
|
431
|
+
/* Hover borders — bright flame glow from orange to yellow */
|
|
432
|
+
--color-hover-border-primary: #e86000;
|
|
433
|
+
--color-hover-border-secondary: #f09020;
|
|
434
|
+
--color-hover-border-tertiary: #ffc040;
|
|
435
|
+
/* Primary — vibrant orange-red flame */
|
|
436
|
+
--color-primary: #e85d04;
|
|
437
|
+
--color-primary-light: #f49e44;
|
|
438
|
+
--color-primary-dark: #c43c00;
|
|
439
|
+
/* Semantic status colors — fire-appropriate */
|
|
440
|
+
--color-success: #84e040;
|
|
441
|
+
--color-warning: #ffc020;
|
|
442
|
+
--color-error: linear-gradient(135deg, #ff4444 0%, #c80000 100%);
|
|
443
|
+
--color-info: linear-gradient(135deg, #f09030 0%, #e85d04 100%);
|
|
444
|
+
/* Backdrop — deep ember void overlay */
|
|
445
|
+
--window-backdrop: rgba(4, 1, 0, 0.92);
|
|
284
446
|
}
|
|
285
447
|
|
|
286
|
-
/*
|
|
448
|
+
/*
|
|
449
|
+
* 🌌 Cosmo — Galaxy Theme
|
|
450
|
+
*
|
|
451
|
+
* Inspired by space, galaxies, and the outer universe.
|
|
452
|
+
* Deep blues, cosmic purples, near-black tones with subtle nebula gradients.
|
|
453
|
+
* Star-like accents using soft whites and light blues.
|
|
454
|
+
* Feel: mysterious, vast, futuristic — with soft glow highlights.
|
|
455
|
+
*
|
|
456
|
+
* Contrast notes:
|
|
457
|
+
* --color-text-primary (#e8e0ff) on --color-bg-primary (#06031a): ~15.5:1 ✓ AAA
|
|
458
|
+
* --color-text-secondary (#b4a0e0) on --color-bg-primary (#06031a): ~8.8:1 ✓ AAA
|
|
459
|
+
* --color-text-tertiary (#8470b8) on --color-bg-primary (#06031a): ~4.7:1 ✓ AA
|
|
460
|
+
*/
|
|
287
461
|
.cosmo {
|
|
288
|
-
|
|
462
|
+
/* Backgrounds — near-black with deep cosmic blue-violet undertones */
|
|
463
|
+
--color-bg-primary: #06031a;
|
|
289
464
|
--color-bg-secondary: linear-gradient(
|
|
290
465
|
160deg,
|
|
291
|
-
#
|
|
292
|
-
#
|
|
293
|
-
#
|
|
466
|
+
#0f0838 0%,
|
|
467
|
+
#080420 55%,
|
|
468
|
+
#14093e 100%
|
|
294
469
|
);
|
|
295
|
-
--color-bg-tertiary: #
|
|
296
|
-
|
|
470
|
+
--color-bg-tertiary: #030110;
|
|
471
|
+
/* Hover backgrounds — slightly lighter nebula tones */
|
|
472
|
+
--color-hover-bg-primary: #0c0828;
|
|
297
473
|
--color-hover-bg-secondary: linear-gradient(
|
|
298
474
|
160deg,
|
|
299
|
-
#
|
|
300
|
-
#
|
|
301
|
-
#
|
|
475
|
+
#180e50 0%,
|
|
476
|
+
#0e082e 55%,
|
|
477
|
+
#1c0c5a 100%
|
|
302
478
|
);
|
|
303
|
-
--color-hover-bg-tertiary: #
|
|
304
|
-
|
|
305
|
-
--color-text-
|
|
306
|
-
--color-text-
|
|
307
|
-
--color-
|
|
308
|
-
|
|
309
|
-
--color-border-
|
|
310
|
-
--color-
|
|
311
|
-
--color-
|
|
312
|
-
|
|
479
|
+
--color-hover-bg-tertiary: #06031a;
|
|
480
|
+
/* Text — soft lavender whites down to muted purple */
|
|
481
|
+
--color-text-primary: #e8e0ff;
|
|
482
|
+
--color-text-secondary: #b4a0e0;
|
|
483
|
+
--color-text-tertiary: #8470b8;
|
|
484
|
+
/* Borders — deep violet spectrum for surface separation */
|
|
485
|
+
--color-border-primary: #1e1260;
|
|
486
|
+
--color-border-secondary: #362098;
|
|
487
|
+
--color-border-tertiary: #5a38c8;
|
|
488
|
+
/* Hover borders — bright violet to star-like cyan accents */
|
|
489
|
+
--color-hover-border-primary: #7c5ce0;
|
|
490
|
+
--color-hover-border-secondary: #a48ef8;
|
|
491
|
+
--color-hover-border-tertiary: #38d4ee;
|
|
492
|
+
/* Primary — electric violet as the core accent */
|
|
313
493
|
--color-primary: #8b5cf6;
|
|
314
494
|
--color-primary-light: #c4b5fd;
|
|
315
495
|
--color-primary-dark: #5b21b6;
|
|
496
|
+
/* Semantic status colors — space-inspired with nebula gradient feel */
|
|
316
497
|
--color-success: linear-gradient(135deg, #34d399 0%, #059669 100%);
|
|
317
498
|
--color-warning: linear-gradient(135deg, #fde68a 0%, #d97706 100%);
|
|
318
499
|
--color-error: linear-gradient(135deg, #f87171 0%, #991b1b 100%);
|
|
319
|
-
--color-info: linear-gradient(135deg, #
|
|
320
|
-
|
|
500
|
+
--color-info: linear-gradient(135deg, #38d4ee 0%, #8b5cf6 100%);
|
|
501
|
+
/* Backdrop — deep void for modal overlays */
|
|
502
|
+
--window-backdrop: rgba(3, 1, 16, 0.92);
|
|
321
503
|
}
|
|
322
504
|
|
|
323
505
|
:root {
|