edu-webcomponents 1.23.0 → 1.25.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/CHANGELOG.md
CHANGED
|
@@ -4,9 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### [v1.25.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.24.0...v1.25.0)
|
|
8
|
+
|
|
9
|
+
- feat: implement dark mode [`4112f1b`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/4112f1b9db41808e3e08204bd9397ffc9448f57e)
|
|
10
|
+
|
|
11
|
+
#### [v1.24.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.23.0...v1.24.0)
|
|
12
|
+
|
|
13
|
+
> 9 January 2026
|
|
14
|
+
|
|
15
|
+
- docs: improve README.md [`9300008`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/9300008a5fe9dedd24bc8b2ee39b663d01b9ef85)
|
|
16
|
+
- chore: release v1.24.0 [`c66fe45`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/c66fe45ca3b150cb62126dfbd102b2244f59802b)
|
|
17
|
+
|
|
7
18
|
#### [v1.23.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.22.0...v1.23.0)
|
|
8
19
|
|
|
9
|
-
|
|
20
|
+
> 8 January 2026
|
|
21
|
+
|
|
22
|
+
- docs: improve demo [`af75a42`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/af75a42432fbd667f97a1e8c05ea4a32f0bcdfa6)
|
|
23
|
+
- chore: release v1.23.0 [`5244437`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/5244437248594e8bf1f31985358b74c52c8ad330)
|
|
10
24
|
|
|
11
25
|
#### [v1.22.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.21.0...v1.22.0)
|
|
12
26
|
|
package/README.md
CHANGED
|
@@ -1,62 +1,381 @@
|
|
|
1
|
-
# Edu
|
|
1
|
+
# 🎨 Edu Web Components Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/edu-webcomponents)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://lit.dev)
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
A modern, lightweight collection of reusable web components built with [Lit](https://lit.dev) following [open-wc](https://github.com/open-wc/open-wc) recommendations.
|
|
8
|
+
|
|
9
|
+
**[📖 View Live Demo & Documentation](https://eduardocruzpalacios.github.io/edu-webcomponents/)**
|
|
10
|
+
|
|
11
|
+
## ✨ Features
|
|
12
|
+
|
|
13
|
+
- 🚀 **Lightweight** - Built with Lit for minimal bundle size
|
|
14
|
+
- ♿ **Accessible** - ARIA-compliant components with keyboard support
|
|
15
|
+
- 🎯 **Framework-agnostic** - Works with any JavaScript framework or vanilla JS
|
|
16
|
+
- 🎨 **Customizable** - CSS custom properties for easy theming
|
|
17
|
+
- 🌓 **Dark mode support** - Automatic theme switching with `@media (prefers-color-scheme: dark)`
|
|
18
|
+
- 📦 **Tree-shakeable** - Import only what you need
|
|
19
|
+
- ✅ **Well-tested** - Comprehensive test coverage
|
|
20
|
+
|
|
21
|
+
## 📦 Installation
|
|
6
22
|
|
|
7
23
|
```bash
|
|
8
|
-
npm
|
|
24
|
+
npm install edu-webcomponents
|
|
9
25
|
```
|
|
10
26
|
|
|
11
|
-
##
|
|
27
|
+
## 🚀 Quick Start
|
|
28
|
+
|
|
29
|
+
Import all components:
|
|
12
30
|
|
|
13
31
|
```html
|
|
14
32
|
<script type="module">
|
|
15
33
|
import 'edu-webcomponents/index.js';
|
|
16
34
|
</script>
|
|
17
35
|
|
|
18
|
-
<
|
|
36
|
+
<edu-button text="Click me"></edu-button>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Or import individual components:
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<script type="module">
|
|
43
|
+
import 'edu-webcomponents/src/edu-button/index.js';
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<edu-button text="Click me"></edu-button>
|
|
19
47
|
```
|
|
20
48
|
|
|
21
|
-
##
|
|
49
|
+
## 📚 Components
|
|
50
|
+
|
|
51
|
+
### 🔘 Button
|
|
52
|
+
|
|
53
|
+
A customizable button component with hover effects and disabled state.
|
|
54
|
+
|
|
55
|
+
**Properties:**
|
|
56
|
+
- `text` (String) - Button text content (default: `'Default text'`)
|
|
57
|
+
- `type` (String) - Button type attribute (default: `'button'`)
|
|
58
|
+
- `disabled` (Boolean) - Whether the button is disabled (default: `false`)
|
|
59
|
+
- `aria-label` (String) - Accessibility label
|
|
60
|
+
|
|
61
|
+
**Usage:**
|
|
22
62
|
|
|
23
|
-
|
|
63
|
+
```html
|
|
64
|
+
<!-- Basic button -->
|
|
65
|
+
<edu-button text="Click me"></edu-button>
|
|
66
|
+
|
|
67
|
+
<!-- Disabled button -->
|
|
68
|
+
<edu-button text="Disabled" disabled></edu-button>
|
|
69
|
+
|
|
70
|
+
<!-- Submit button with aria-label -->
|
|
71
|
+
<edu-button
|
|
72
|
+
text="Submit Form"
|
|
73
|
+
type="submit"
|
|
74
|
+
aria-label="Submit the form">
|
|
75
|
+
</edu-button>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
**JavaScript:**
|
|
79
|
+
|
|
80
|
+
```javascript
|
|
81
|
+
import { EduButton } from 'edu-webcomponents';
|
|
82
|
+
|
|
83
|
+
const button = document.querySelector('edu-button');
|
|
84
|
+
button.addEventListener('click', () => {
|
|
85
|
+
console.log('Button clicked!');
|
|
86
|
+
});
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
### ➖ Divider
|
|
92
|
+
|
|
93
|
+
A horizontal divider to visually separate content sections.
|
|
94
|
+
|
|
95
|
+
**Properties:**
|
|
96
|
+
- `label` (String) - Optional text label displayed in the center (default: `''`)
|
|
97
|
+
|
|
98
|
+
**Usage:**
|
|
99
|
+
|
|
100
|
+
```html
|
|
101
|
+
<!-- Simple divider -->
|
|
102
|
+
<edu-divider></edu-divider>
|
|
103
|
+
|
|
104
|
+
<!-- Divider with label -->
|
|
105
|
+
<edu-divider label="OR"></edu-divider>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
### ⏳ Loading Spinner
|
|
111
|
+
|
|
112
|
+
An animated circular loading spinner with smooth rotation animation.
|
|
113
|
+
|
|
114
|
+
**Properties:**
|
|
115
|
+
None - displays a default 60x60px spinner.
|
|
116
|
+
|
|
117
|
+
**Usage:**
|
|
118
|
+
|
|
119
|
+
```html
|
|
120
|
+
<edu-loading-spinner></edu-loading-spinner>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
### 📊 Progress Bar
|
|
126
|
+
|
|
127
|
+
A progress bar component to visualize task completion or loading progress.
|
|
128
|
+
|
|
129
|
+
**Properties:**
|
|
130
|
+
- `value` (Number) - Current progress value (default: `0`)
|
|
131
|
+
- `max` (Number) - Maximum value (default: `100`)
|
|
132
|
+
- `showLabel` (Boolean) - Whether to display percentage label (default: `false`)
|
|
133
|
+
- `progressbarName` (String) - Accessibility label (default: `'Progress bar'`)
|
|
134
|
+
|
|
135
|
+
**Usage:**
|
|
136
|
+
|
|
137
|
+
```html
|
|
138
|
+
<!-- Basic progress bar -->
|
|
139
|
+
<edu-progress-bar value="50" max="100"></edu-progress-bar>
|
|
140
|
+
|
|
141
|
+
<!-- With percentage label -->
|
|
142
|
+
<edu-progress-bar
|
|
143
|
+
value="75"
|
|
144
|
+
max="100"
|
|
145
|
+
showLabel>
|
|
146
|
+
</edu-progress-bar>
|
|
147
|
+
|
|
148
|
+
<!-- Custom accessibility label -->
|
|
149
|
+
<edu-progress-bar
|
|
150
|
+
value="3"
|
|
151
|
+
max="5"
|
|
152
|
+
showLabel
|
|
153
|
+
progressbarName="File upload progress">
|
|
154
|
+
</edu-progress-bar>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
**JavaScript:**
|
|
158
|
+
|
|
159
|
+
```javascript
|
|
160
|
+
const progressBar = document.querySelector('edu-progress-bar');
|
|
161
|
+
let progress = 0;
|
|
162
|
+
|
|
163
|
+
const interval = setInterval(() => {
|
|
164
|
+
progress += 10;
|
|
165
|
+
progressBar.value = progress;
|
|
166
|
+
|
|
167
|
+
if (progress >= 100) {
|
|
168
|
+
clearInterval(interval);
|
|
169
|
+
}
|
|
170
|
+
}, 500);
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
---
|
|
174
|
+
|
|
175
|
+
### 💀 Skeleton Text
|
|
176
|
+
|
|
177
|
+
Animated skeleton loader for content placeholders during loading states.
|
|
178
|
+
|
|
179
|
+
**Properties:**
|
|
180
|
+
- `width` (String) - Width of skeleton lines (default: `'100%'`)
|
|
181
|
+
- `lineHeight` (String) - Height of each line (default: `'1em'`)
|
|
182
|
+
- `lines` (Number) - Number of skeleton lines to display (default: `1`)
|
|
183
|
+
|
|
184
|
+
**Usage:**
|
|
185
|
+
|
|
186
|
+
```html
|
|
187
|
+
<!-- Single line skeleton -->
|
|
188
|
+
<edu-skeleton-text></edu-skeleton-text>
|
|
189
|
+
|
|
190
|
+
<!-- Multiple lines -->
|
|
191
|
+
<edu-skeleton-text lines="3"></edu-skeleton-text>
|
|
192
|
+
|
|
193
|
+
<!-- Custom width and height -->
|
|
194
|
+
<edu-skeleton-text
|
|
195
|
+
width="60%"
|
|
196
|
+
lineHeight="1.5em"
|
|
197
|
+
lines="2">
|
|
198
|
+
</edu-skeleton-text>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
**Common Patterns:**
|
|
202
|
+
|
|
203
|
+
```html
|
|
204
|
+
<!-- Loading a card -->
|
|
205
|
+
<div class="card">
|
|
206
|
+
<edu-skeleton-text width="80%" lineHeight="2em" lines="1"></edu-skeleton-text>
|
|
207
|
+
<edu-skeleton-text width="100%" lines="3"></edu-skeleton-text>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<!-- Loading a profile -->
|
|
211
|
+
<div class="profile">
|
|
212
|
+
<edu-skeleton-text width="150px" lineHeight="150px" lines="1"></edu-skeleton-text>
|
|
213
|
+
<edu-skeleton-text width="200px" lines="2"></edu-skeleton-text>
|
|
214
|
+
</div>
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
---
|
|
218
|
+
|
|
219
|
+
### 💬 Tooltip
|
|
220
|
+
|
|
221
|
+
A flexible tooltip component that displays contextual information on hover.
|
|
222
|
+
|
|
223
|
+
**Properties:**
|
|
224
|
+
- `text` (String) - Tooltip content to display
|
|
225
|
+
- `position` (String) - Tooltip position: `'top'`, `'bottom'`, `'left'`, or `'right'` (default: `'bottom'`)
|
|
226
|
+
|
|
227
|
+
**Usage:**
|
|
228
|
+
|
|
229
|
+
```html
|
|
230
|
+
<!-- Bottom tooltip (default) -->
|
|
231
|
+
<edu-tooltip text="This is helpful information">
|
|
232
|
+
<button>Hover me</button>
|
|
233
|
+
</edu-tooltip>
|
|
234
|
+
|
|
235
|
+
<!-- Top tooltip -->
|
|
236
|
+
<edu-tooltip text="Tooltip on top" position="top">
|
|
237
|
+
<span>🎯 Target element</span>
|
|
238
|
+
</edu-tooltip>
|
|
239
|
+
|
|
240
|
+
<!-- Left and right tooltips -->
|
|
241
|
+
<edu-tooltip text="Left side tooltip" position="left">
|
|
242
|
+
<edu-button text="Button with tooltip"></edu-button>
|
|
243
|
+
</edu-tooltip>
|
|
244
|
+
|
|
245
|
+
<edu-tooltip text="Right side tooltip" position="right">
|
|
246
|
+
<a href="#">Link with tooltip</a>
|
|
247
|
+
</edu-tooltip>
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
---
|
|
251
|
+
|
|
252
|
+
## 🎨 Theming
|
|
253
|
+
|
|
254
|
+
Components use CSS custom properties for easy theming. Override these in your CSS:
|
|
255
|
+
|
|
256
|
+
```css
|
|
257
|
+
:root {
|
|
258
|
+
--primary: #1976d2;
|
|
259
|
+
--primaryHover: #1565c0;
|
|
260
|
+
--primaryForeground: #ffffff;
|
|
261
|
+
--disabled: #bdbdbd;
|
|
262
|
+
--greyLight: #e0e0e0;
|
|
263
|
+
--greyDark: #757575;
|
|
264
|
+
--blackLight: #424242;
|
|
265
|
+
--skeletonBase: #e0e0e0;
|
|
266
|
+
--skeletonHighlight: #f0f0f0;
|
|
267
|
+
}
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
### 🌓 Dark Mode Support
|
|
271
|
+
|
|
272
|
+
All components automatically support dark mode via `@media (prefers-color-scheme: dark)`. When your operating system or browser is set to dark mode, the components will automatically adapt with optimized color schemes:
|
|
273
|
+
|
|
274
|
+
```css
|
|
275
|
+
@media (prefers-color-scheme: dark) {
|
|
276
|
+
:host {
|
|
277
|
+
--primary: #4db8ff;
|
|
278
|
+
--primaryHover: #66c2ff;
|
|
279
|
+
--primaryForeground: #000;
|
|
280
|
+
--blackLight: #e0e0e0;
|
|
281
|
+
--greyLight: #3d3d3d;
|
|
282
|
+
--greyDark: #666;
|
|
283
|
+
--disabled: #555;
|
|
284
|
+
--skeletonBase: #3d3d3d;
|
|
285
|
+
--skeletonHighlight: #4d4d4d;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
No additional configuration required - dark mode works out of the box!
|
|
291
|
+
|
|
292
|
+
## 🧪 Development
|
|
293
|
+
|
|
294
|
+
### Local Demo
|
|
295
|
+
|
|
296
|
+
Run the local development server with live demo:
|
|
24
297
|
|
|
25
298
|
```bash
|
|
26
|
-
npm
|
|
299
|
+
npm start
|
|
27
300
|
```
|
|
28
301
|
|
|
29
|
-
|
|
302
|
+
Opens a development server at http://localhost:8000 with the demo page.
|
|
303
|
+
|
|
304
|
+
### Storybook
|
|
305
|
+
|
|
306
|
+
View components in Storybook with interactive controls:
|
|
30
307
|
|
|
31
308
|
```bash
|
|
32
|
-
npm run
|
|
309
|
+
npm run storybook
|
|
33
310
|
```
|
|
34
311
|
|
|
35
|
-
|
|
312
|
+
Build Storybook for deployment:
|
|
36
313
|
|
|
37
|
-
|
|
314
|
+
```bash
|
|
315
|
+
npm run build-storybook
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
### Testing
|
|
319
|
+
|
|
320
|
+
Run tests once:
|
|
38
321
|
|
|
39
322
|
```bash
|
|
40
323
|
npm run test
|
|
41
324
|
```
|
|
42
325
|
|
|
43
|
-
|
|
326
|
+
Run tests in watch mode:
|
|
44
327
|
|
|
45
328
|
```bash
|
|
46
329
|
npm run test:watch
|
|
47
330
|
```
|
|
48
331
|
|
|
332
|
+
### Linting & Formatting
|
|
49
333
|
|
|
50
|
-
|
|
334
|
+
Check for linting/formatting errors:
|
|
51
335
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
336
|
+
```bash
|
|
337
|
+
npm run lint
|
|
338
|
+
```
|
|
55
339
|
|
|
56
|
-
|
|
340
|
+
Auto-fix linting/formatting errors:
|
|
57
341
|
|
|
58
342
|
```bash
|
|
59
|
-
npm
|
|
343
|
+
npm run format
|
|
60
344
|
```
|
|
61
345
|
|
|
62
|
-
|
|
346
|
+
## 📝 Browser Support
|
|
347
|
+
|
|
348
|
+
- Chrome/Edge (latest)
|
|
349
|
+
- Firefox (latest)
|
|
350
|
+
- Safari (latest)
|
|
351
|
+
- Modern browsers with ES2015+ support
|
|
352
|
+
|
|
353
|
+
## 🤝 Contributing
|
|
354
|
+
|
|
355
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
356
|
+
|
|
357
|
+
1. Fork the repository
|
|
358
|
+
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
|
|
359
|
+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
|
|
360
|
+
4. Push to the branch (`git push origin feature/AmazingFeature`)
|
|
361
|
+
5. Open a Pull Request
|
|
362
|
+
|
|
363
|
+
## 📄 License
|
|
364
|
+
|
|
365
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
366
|
+
|
|
367
|
+
## 🔗 Links
|
|
368
|
+
|
|
369
|
+
- 📖 [Live Demo & Storybook](https://eduardocruzpalacios.github.io/edu-webcomponents/)
|
|
370
|
+
- 📦 [npm Package](https://www.npmjs.com/package/edu-webcomponents)
|
|
371
|
+
- 💻 [GitHub Repository](https://github.com/eduardocruzpalacios/edu-webcomponents)
|
|
372
|
+
- 🔥 [Lit Documentation](https://lit.dev)
|
|
373
|
+
- 🌐 [Open Web Components](https://open-wc.org)
|
|
374
|
+
|
|
375
|
+
## 🙏 Acknowledgments
|
|
376
|
+
|
|
377
|
+
Built with [Lit](https://lit.dev) and following [open-wc](https://github.com/open-wc/open-wc) recommendations for modern web component development.
|
|
378
|
+
|
|
379
|
+
---
|
|
380
|
+
|
|
381
|
+
Made with ❤️ by [Eduardo de la Cruz Palacios](https://github.com/eduardocruzpalacios)
|
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { colorsConstants } from '../../stylesConstants.js';
|
|
2
3
|
|
|
3
4
|
export class EduSkeletonText extends LitElement {
|
|
4
5
|
static properties = {
|
|
@@ -14,34 +15,42 @@ export class EduSkeletonText extends LitElement {
|
|
|
14
15
|
this.lines = 1;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
|
-
static styles =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
.line {
|
|
24
|
-
border-radius: 4px;
|
|
25
|
-
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 37%, #e0e0e0 63%);
|
|
26
|
-
background-size: 400% 100%;
|
|
27
|
-
animation: shimmer 1.4s ease infinite;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@keyframes shimmer {
|
|
31
|
-
0% {
|
|
32
|
-
background-position: 100% 0;
|
|
18
|
+
static styles = [
|
|
19
|
+
colorsConstants,
|
|
20
|
+
css`
|
|
21
|
+
:host {
|
|
22
|
+
display: grid;
|
|
23
|
+
gap: 0.5em;
|
|
33
24
|
}
|
|
34
|
-
100% {
|
|
35
|
-
background-position: -100% 0;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
25
|
|
|
39
|
-
@media (prefers-reduced-motion: reduce) {
|
|
40
26
|
.line {
|
|
41
|
-
|
|
27
|
+
border-radius: 4px;
|
|
28
|
+
background: linear-gradient(
|
|
29
|
+
90deg,
|
|
30
|
+
var(--skeletonBase) 25%,
|
|
31
|
+
var(--skeletonHighlight) 37%,
|
|
32
|
+
var(--skeletonBase) 63%
|
|
33
|
+
);
|
|
34
|
+
background-size: 400% 100%;
|
|
35
|
+
animation: shimmer 1.4s ease infinite;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@keyframes shimmer {
|
|
39
|
+
0% {
|
|
40
|
+
background-position: 100% 0;
|
|
41
|
+
}
|
|
42
|
+
100% {
|
|
43
|
+
background-position: -100% 0;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@media (prefers-reduced-motion: reduce) {
|
|
48
|
+
.line {
|
|
49
|
+
animation: none;
|
|
50
|
+
}
|
|
42
51
|
}
|
|
43
|
-
|
|
44
|
-
|
|
52
|
+
`,
|
|
53
|
+
];
|
|
45
54
|
|
|
46
55
|
render() {
|
|
47
56
|
return html`
|
package/src/stylesConstants.js
CHANGED
|
@@ -12,5 +12,26 @@ export const colorsConstants = css`
|
|
|
12
12
|
--greyDark: #aaa;
|
|
13
13
|
|
|
14
14
|
--disabled: #ccc;
|
|
15
|
+
|
|
16
|
+
--skeletonBase: #e0e0e0;
|
|
17
|
+
--skeletonHighlight: #f0f0f0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@media (prefers-color-scheme: dark) {
|
|
21
|
+
:host {
|
|
22
|
+
--primary: #4db8ff;
|
|
23
|
+
--primaryHover: #66c2ff;
|
|
24
|
+
--primaryForeground: #000;
|
|
25
|
+
|
|
26
|
+
--blackLight: #e0e0e0;
|
|
27
|
+
|
|
28
|
+
--greyLight: #3d3d3d;
|
|
29
|
+
--greyDark: #666;
|
|
30
|
+
|
|
31
|
+
--disabled: #555;
|
|
32
|
+
|
|
33
|
+
--skeletonBase: #3d3d3d;
|
|
34
|
+
--skeletonHighlight: #4d4d4d;
|
|
35
|
+
}
|
|
15
36
|
}
|
|
16
37
|
`;
|