emily-css 1.0.23 → 1.0.25
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 +26 -1
- package/README.md +9 -2
- package/package.json +1 -1
- package/src/index.js +27 -2
- package/src/init.js +15 -10
- package/templates/showcase.html +104 -104
package/CHANGELOG.md
CHANGED
|
@@ -4,7 +4,15 @@ All notable changes to `emily-css` are documented here.
|
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
## v1.0.
|
|
7
|
+
## v1.0.25 — May 2026
|
|
8
|
+
|
|
9
|
+
**updaed colour**
|
|
10
|
+
|
|
11
|
+
### Fixed
|
|
12
|
+
- change colour on code
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
## v1.0.24 — May 2026
|
|
8
16
|
|
|
9
17
|
**colour system redesign — brand/accent tokens + semantic colours (v1.0.23)**
|
|
10
18
|
|
|
@@ -12,6 +20,23 @@ All notable changes to `emily-css` are documented here.
|
|
|
12
20
|
- colour system redesign — brand/accent tokens + semantic colours (v1.0.23)
|
|
13
21
|
|
|
14
22
|
---
|
|
23
|
+
## v1.0.23 — May 2026
|
|
24
|
+
|
|
25
|
+
**Colour system redesign: brand/accent naming + semantic colour tokens**
|
|
26
|
+
|
|
27
|
+
### Changed
|
|
28
|
+
- Renamed `primary` colour token to `brand`, `secondary` to `accent` across config, utilities, and showcase
|
|
29
|
+
- `btn-primary` and `btn-secondary` are now explicit separate colour tokens (no longer aliases)
|
|
30
|
+
- Default config generated by `emily-css init` updated to reflect new naming
|
|
31
|
+
|
|
32
|
+
### Added
|
|
33
|
+
- `semanticColours` config key: single-value colour tokens with no shade scale
|
|
34
|
+
- `generateSemanticColourUtilities()`: generates `bg-dark`, `text-dark`, `border-dark`, `fill-dark` etc.
|
|
35
|
+
- Semantic colour utilities automatically pick up `hover:`, `focus:`, `dark:`, and responsive variants
|
|
36
|
+
- Default config includes `dark: "#1A1A1A"` and `light: "#FAFAFA"` as semantic colour examples
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
15
40
|
## v1.0.22 — May 2026
|
|
16
41
|
|
|
17
42
|
**· Improve purge extraction and package robustness tests**
|
package/README.md
CHANGED
|
@@ -83,9 +83,16 @@ Edit `emily.config.json`:
|
|
|
83
83
|
"body": "inter"
|
|
84
84
|
},
|
|
85
85
|
"colours": {
|
|
86
|
-
"
|
|
86
|
+
"brand": "#2563EB",
|
|
87
|
+
"accent": "#2563EB",
|
|
88
|
+
"btn-primary": "#2563EB",
|
|
89
|
+
"btn-secondary": "#2563EB",
|
|
87
90
|
"neutral": "#57534E"
|
|
88
91
|
},
|
|
92
|
+
"semanticColours": {
|
|
93
|
+
"dark": "#1A1A1A",
|
|
94
|
+
"light": "#FAFAFA"
|
|
95
|
+
},
|
|
89
96
|
"purge": {
|
|
90
97
|
"content": ["./**/*.{html,php,jsx,tsx,vue}"]
|
|
91
98
|
}
|
|
@@ -108,7 +115,7 @@ After your first build, open `showcase.html` in your browser. It contains produc
|
|
|
108
115
|
### Button
|
|
109
116
|
|
|
110
117
|
```html
|
|
111
|
-
<button class="px-6 py-3 rounded-lg bg-
|
|
118
|
+
<button class="px-6 py-3 rounded-lg bg-brand-80 text-white hover:bg-brand-90 focus-visible:ring-2 focus-visible:ring-brand-50 font-medium">
|
|
112
119
|
Submit
|
|
113
120
|
</button>
|
|
114
121
|
```
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -221,13 +221,20 @@ function generateFontCSS(config) {
|
|
|
221
221
|
function generateCSSVariables(colours, spacing, config) {
|
|
222
222
|
let css = `:root {\n`;
|
|
223
223
|
|
|
224
|
-
// Colour variables
|
|
224
|
+
// Colour variables (full shade scale)
|
|
225
225
|
Object.entries(colours).forEach(([colourName, shades]) => {
|
|
226
226
|
Object.entries(shades).forEach(([shade, hex]) => {
|
|
227
227
|
css += ` --color-${colourName}-${shade}: ${hex};\n`;
|
|
228
228
|
});
|
|
229
229
|
});
|
|
230
230
|
|
|
231
|
+
// Semantic colour variables (single value, no shade scale)
|
|
232
|
+
if (config.semanticColours) {
|
|
233
|
+
Object.entries(config.semanticColours).forEach(([name, hex]) => {
|
|
234
|
+
css += ` --color-${name}: ${hex};\n`;
|
|
235
|
+
});
|
|
236
|
+
}
|
|
237
|
+
|
|
231
238
|
// Spacing variables
|
|
232
239
|
Object.entries(spacing).forEach(([key, value]) => {
|
|
233
240
|
css += ` --space-${key}: ${value};\n`;
|
|
@@ -669,6 +676,19 @@ function generateColourUtilities(colours) {
|
|
|
669
676
|
return css;
|
|
670
677
|
}
|
|
671
678
|
|
|
679
|
+
function generateSemanticColourUtilities(semanticColours) {
|
|
680
|
+
if (!semanticColours) return '';
|
|
681
|
+
let css = `/* Semantic colours: single value, no shade scale */\n`;
|
|
682
|
+
Object.entries(semanticColours).forEach(([name]) => {
|
|
683
|
+
css += `.bg-${name} { background-color: var(--color-${name}); }\n`;
|
|
684
|
+
css += `.text-${name} { color: var(--color-${name}); }\n`;
|
|
685
|
+
css += `.border-${name} { border-color: var(--color-${name}); }\n`;
|
|
686
|
+
css += `.fill-${name} { fill: var(--color-${name}); }\n`;
|
|
687
|
+
});
|
|
688
|
+
css += `\n`;
|
|
689
|
+
return css;
|
|
690
|
+
}
|
|
691
|
+
|
|
672
692
|
// ============================================================================
|
|
673
693
|
// DARK MODE VARIANTS
|
|
674
694
|
// ============================================================================
|
|
@@ -909,6 +929,9 @@ function buildFullFramework() {
|
|
|
909
929
|
|
|
910
930
|
const colours = generateAllColours(config.colours);
|
|
911
931
|
console.log(`✓ Generated ${Object.keys(colours).length} colour scales`);
|
|
932
|
+
if (config.semanticColours) {
|
|
933
|
+
console.log(`✓ Generated ${Object.keys(config.semanticColours).length} semantic colour tokens`);
|
|
934
|
+
}
|
|
912
935
|
|
|
913
936
|
const spacing = generateSpacing(config.baseUnit, config.spacing.scale);
|
|
914
937
|
console.log(`✓ Generated ${Object.keys(spacing).length} spacing values`);
|
|
@@ -924,6 +947,7 @@ function buildFullFramework() {
|
|
|
924
947
|
utilityCss += generateTypographyUtilities(config);
|
|
925
948
|
utilityCss += generateBorderUtilities(config);
|
|
926
949
|
utilityCss += generateColourUtilities(colours);
|
|
950
|
+
utilityCss += generateSemanticColourUtilities(config.semanticColours);
|
|
927
951
|
utilityCss += positioningUtilities(spacing);
|
|
928
952
|
utilityCss += overflowUtilities();
|
|
929
953
|
utilityCss += transformUtilities(spacing);
|
|
@@ -1002,7 +1026,7 @@ function buildFullFramework() {
|
|
|
1002
1026
|
font-family: "Menlo", "Monaco", "Courier New", monospace;
|
|
1003
1027
|
font-size: 0.875em;
|
|
1004
1028
|
background-color: #0d0c0b;
|
|
1005
|
-
color: #
|
|
1029
|
+
color: #e6ffd2;
|
|
1006
1030
|
padding: 0.125rem 0.4rem;
|
|
1007
1031
|
border-radius: 4px;
|
|
1008
1032
|
display: inline;
|
|
@@ -1153,6 +1177,7 @@ module.exports = {
|
|
|
1153
1177
|
generateSpacing,
|
|
1154
1178
|
generateBorderUtilities,
|
|
1155
1179
|
generateColourUtilities,
|
|
1180
|
+
generateSemanticColourUtilities,
|
|
1156
1181
|
generateTypographyUtilities,
|
|
1157
1182
|
generateSpacingUtilities,
|
|
1158
1183
|
addStateVariants,
|
package/src/init.js
CHANGED
|
@@ -361,6 +361,11 @@ function createDefaultConfig({
|
|
|
361
361
|
|
|
362
362
|
colours,
|
|
363
363
|
|
|
364
|
+
semanticColours: {
|
|
365
|
+
dark: "#1A1A1A",
|
|
366
|
+
light: "#FAFAFA",
|
|
367
|
+
},
|
|
368
|
+
|
|
364
369
|
purge: {
|
|
365
370
|
projectType: detectedProject.name,
|
|
366
371
|
sourceDir: detectedProject.sourceDir,
|
|
@@ -530,13 +535,13 @@ async function init() {
|
|
|
530
535
|
|
|
531
536
|
console.log(chalk.bold("\n" + chalk.magenta("→") + " Brand colours"));
|
|
532
537
|
|
|
533
|
-
const
|
|
534
|
-
"
|
|
538
|
+
const brand = await askColourFromPresets(
|
|
539
|
+
"brand",
|
|
535
540
|
COLOUR_PRESETS.primary,
|
|
536
541
|
"#DB2777",
|
|
537
542
|
);
|
|
538
|
-
const
|
|
539
|
-
"
|
|
543
|
+
const accent = await askColourFromPresets(
|
|
544
|
+
"accent",
|
|
540
545
|
COLOUR_PRESETS.secondary,
|
|
541
546
|
"#2563EB",
|
|
542
547
|
);
|
|
@@ -546,8 +551,8 @@ async function init() {
|
|
|
546
551
|
"\n Button colour tokens will use your brand colours by default:",
|
|
547
552
|
),
|
|
548
553
|
);
|
|
549
|
-
console.log(chalk.gray(" - btn-primary =
|
|
550
|
-
console.log(chalk.gray(" - btn-secondary =
|
|
554
|
+
console.log(chalk.gray(" - btn-primary = brand"));
|
|
555
|
+
console.log(chalk.gray(" - btn-secondary = accent"));
|
|
551
556
|
|
|
552
557
|
console.log(chalk.bold("\n" + chalk.magenta("→") + " Utility colours"));
|
|
553
558
|
console.log(
|
|
@@ -573,10 +578,10 @@ async function init() {
|
|
|
573
578
|
);
|
|
574
579
|
|
|
575
580
|
const colours = {
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
"btn-primary":
|
|
579
|
-
"btn-secondary":
|
|
581
|
+
brand,
|
|
582
|
+
accent,
|
|
583
|
+
"btn-primary": brand,
|
|
584
|
+
"btn-secondary": accent,
|
|
580
585
|
success,
|
|
581
586
|
warning,
|
|
582
587
|
error,
|
package/templates/showcase.html
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<header class="sticky top-4 z-50 max-w-7xl mx-auto mb-6">
|
|
21
21
|
<nav class="flex items-center justify-between bg-white border border-neutral-20 rounded-lg shadow-md p-4">
|
|
22
22
|
<div class="flex items-center gap-3">
|
|
23
|
-
<span class="inline-flex items-center justify-center bg-
|
|
23
|
+
<span class="inline-flex items-center justify-center bg-brand-80 text-white rounded-md w-10 h-10 font-bold">
|
|
24
24
|
E
|
|
25
25
|
</span>
|
|
26
26
|
<div>
|
|
@@ -30,14 +30,14 @@
|
|
|
30
30
|
</div>
|
|
31
31
|
|
|
32
32
|
<div class="hidden md:flex items-center gap-4 text-base font-medium">
|
|
33
|
-
<a class="text-neutral-80 hover:text-
|
|
34
|
-
<a class="text-neutral-80 hover:text-
|
|
35
|
-
<a class="text-neutral-80 hover:text-
|
|
36
|
-
<a class="text-neutral-80 hover:text-
|
|
37
|
-
<a class="text-neutral-80 hover:text-
|
|
38
|
-
<a class="text-neutral-80 hover:text-
|
|
39
|
-
<a class="text-neutral-80 hover:text-
|
|
40
|
-
<a class="text-neutral-80 hover:text-
|
|
33
|
+
<a class="text-neutral-80 hover:text-brand-80" href="#colours">Colours</a>
|
|
34
|
+
<a class="text-neutral-80 hover:text-brand-80" href="#design-tokens">Tokens</a>
|
|
35
|
+
<a class="text-neutral-80 hover:text-brand-80" href="#buttons">Buttons</a>
|
|
36
|
+
<a class="text-neutral-80 hover:text-brand-80" href="#forms">Forms</a>
|
|
37
|
+
<a class="text-neutral-80 hover:text-brand-80" href="#component-library">Components</a>
|
|
38
|
+
<a class="text-neutral-80 hover:text-brand-80" href="#utility-coverage">Utilities</a>
|
|
39
|
+
<a class="text-neutral-80 hover:text-brand-80" href="#accessibility-examples">A11y</a>
|
|
40
|
+
<a class="text-neutral-80 hover:text-brand-80" href="#patterns">Patterns</a>
|
|
41
41
|
</div>
|
|
42
42
|
</nav>
|
|
43
43
|
</header>
|
|
@@ -45,11 +45,11 @@
|
|
|
45
45
|
<main id="main-content" class="max-w-7xl mx-auto">
|
|
46
46
|
<section class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
47
47
|
<div class="bg-white rounded-lg shadow-md border border-neutral-20 p-8">
|
|
48
|
-
<span class="inline-block bg-
|
|
48
|
+
<span class="inline-block bg-brand-20 text-brand-90 px-3 py-1 rounded-full text-sm font-bold mb-4">
|
|
49
49
|
Utility-first CSS
|
|
50
50
|
</span>
|
|
51
51
|
|
|
52
|
-
<h1 class="text-3xl md:text-4xl font-bold mb-4 text-
|
|
52
|
+
<h1 class="text-3xl md:text-4xl font-bold mb-4 text-brand-90">
|
|
53
53
|
Build consistent interfaces without a heavy frontend setup.
|
|
54
54
|
</h1>
|
|
55
55
|
|
|
@@ -58,36 +58,36 @@
|
|
|
58
58
|
</p>
|
|
59
59
|
|
|
60
60
|
<div class="flex flex-wrap gap-3">
|
|
61
|
-
<a href="#buttons" class="inline-flex items-center justify-center bg-
|
|
61
|
+
<a href="#buttons" class="inline-flex items-center justify-center bg-brand-80 text-white px-5 py-3 rounded-md font-semibold shadow hover:bg-brand-90 focus-visible:ring-2 ring-brand-80">
|
|
62
62
|
View components
|
|
63
63
|
</a>
|
|
64
64
|
|
|
65
|
-
<a href="#colours" class="inline-flex items-center justify-center bg-white text-
|
|
65
|
+
<a href="#colours" class="inline-flex items-center justify-center bg-white text-brand-90 border border-brand-80 px-5 py-3 rounded-md font-semibold hover:bg-brand-10">
|
|
66
66
|
View tokens
|
|
67
67
|
</a>
|
|
68
68
|
</div>
|
|
69
69
|
</div>
|
|
70
70
|
|
|
71
|
-
<div class="bg-
|
|
71
|
+
<div class="bg-brand-90 text-white rounded-lg shadow-md p-8">
|
|
72
72
|
<h2 class="text-2xl font-bold mb-4">Quick stats</h2>
|
|
73
73
|
|
|
74
74
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
75
|
-
<div class="bg-
|
|
75
|
+
<div class="bg-brand-80 rounded-md p-4">
|
|
76
76
|
<p class="text-sm opacity-75">Components</p>
|
|
77
77
|
<p class="text-3xl font-bold">12</p>
|
|
78
78
|
</div>
|
|
79
79
|
|
|
80
|
-
<div class="bg-
|
|
80
|
+
<div class="bg-brand-80 rounded-md p-4">
|
|
81
81
|
<p class="text-sm opacity-75">Token groups</p>
|
|
82
82
|
<p class="text-3xl font-bold">6</p>
|
|
83
83
|
</div>
|
|
84
84
|
|
|
85
|
-
<div class="bg-
|
|
85
|
+
<div class="bg-brand-80 rounded-md p-4">
|
|
86
86
|
<p class="text-sm opacity-75">Layouts</p>
|
|
87
87
|
<p class="text-3xl font-bold">4</p>
|
|
88
88
|
</div>
|
|
89
89
|
|
|
90
|
-
<div class="bg-
|
|
90
|
+
<div class="bg-brand-80 rounded-md p-4">
|
|
91
91
|
<p class="text-sm opacity-75">Focus states</p>
|
|
92
92
|
<p class="text-3xl font-bold">Yes</p>
|
|
93
93
|
</div>
|
|
@@ -100,18 +100,18 @@
|
|
|
100
100
|
|
|
101
101
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
102
102
|
<div class="rounded-md overflow-hidden border border-neutral-20">
|
|
103
|
-
<div class="bg-
|
|
103
|
+
<div class="bg-brand-80 h-20"></div>
|
|
104
104
|
<div class="p-4">
|
|
105
105
|
<p class="font-bold">Primary</p>
|
|
106
|
-
<p class="text-sm text-neutral-70">bg-
|
|
106
|
+
<p class="text-sm text-neutral-70">bg-brand-80</p>
|
|
107
107
|
</div>
|
|
108
108
|
</div>
|
|
109
109
|
|
|
110
110
|
<div class="rounded-md overflow-hidden border border-neutral-20">
|
|
111
|
-
<div class="bg-
|
|
111
|
+
<div class="bg-accent-80 h-20"></div>
|
|
112
112
|
<div class="p-4">
|
|
113
113
|
<p class="font-bold">Secondary</p>
|
|
114
|
-
<p class="text-sm text-neutral-70">bg-
|
|
114
|
+
<p class="text-sm text-neutral-70">bg-accent-80</p>
|
|
115
115
|
</div>
|
|
116
116
|
</div>
|
|
117
117
|
|
|
@@ -153,15 +153,15 @@
|
|
|
153
153
|
<h2 class="text-2xl font-bold mb-4">Buttons</h2>
|
|
154
154
|
|
|
155
155
|
<div class="flex flex-wrap gap-3">
|
|
156
|
-
<button class="bg-
|
|
156
|
+
<button class="bg-brand-80 text-white px-5 py-3 rounded-md font-semibold shadow hover:bg-brand-90 focus-visible:ring-2 ring-brand-80">
|
|
157
157
|
Primary
|
|
158
158
|
</button>
|
|
159
159
|
|
|
160
|
-
<button class="bg-
|
|
160
|
+
<button class="bg-accent-80 text-white px-5 py-3 rounded-md font-semibold shadow hover:bg-accent-90 focus-visible:ring-2 ring-accent-80">
|
|
161
161
|
Secondary
|
|
162
162
|
</button>
|
|
163
163
|
|
|
164
|
-
<button class="bg-white text-
|
|
164
|
+
<button class="bg-white text-brand-90 border border-brand-80 px-5 py-3 rounded-md font-semibold hover:bg-brand-10 focus-visible:ring-2 ring-brand-80">
|
|
165
165
|
Outline
|
|
166
166
|
</button>
|
|
167
167
|
|
|
@@ -177,24 +177,24 @@
|
|
|
177
177
|
|
|
178
178
|
<section id="cards" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
|
|
179
179
|
<article class="bg-white rounded-lg shadow-md border border-neutral-20 p-6">
|
|
180
|
-
<span class="inline-block bg-
|
|
180
|
+
<span class="inline-block bg-brand-20 text-brand-90 px-3 py-1 rounded-full text-sm font-bold mb-4">Card</span>
|
|
181
181
|
<h2 class="text-xl font-bold mb-2">Reusable patterns</h2>
|
|
182
182
|
<p class="text-neutral-80 mb-4">Use utility classes to build patterns that work across static sites, Nuxt, Drupal and more.</p>
|
|
183
|
-
<a href="#" class="font-semibold text-
|
|
183
|
+
<a href="#" class="font-semibold text-brand-80 underline">Read more</a>
|
|
184
184
|
</article>
|
|
185
185
|
|
|
186
186
|
<article class="bg-white rounded-lg shadow-md border border-neutral-20 p-6">
|
|
187
187
|
<span class="inline-block bg-success-20 text-success-90 px-3 py-1 rounded-full text-sm font-bold mb-4">Accessible</span>
|
|
188
188
|
<h2 class="text-xl font-bold mb-2">Clear defaults</h2>
|
|
189
189
|
<p class="text-neutral-80 mb-4">Spacing, contrast and focus utilities make common interface decisions quicker and more consistent.</p>
|
|
190
|
-
<a href="#" class="font-semibold text-
|
|
190
|
+
<a href="#" class="font-semibold text-brand-80 underline">View guidance</a>
|
|
191
191
|
</article>
|
|
192
192
|
|
|
193
193
|
<article class="bg-white rounded-lg shadow-md border border-neutral-20 p-6">
|
|
194
|
-
<span class="inline-block bg-
|
|
194
|
+
<span class="inline-block bg-accent-20 text-accent-90 px-3 py-1 rounded-full text-sm font-bold mb-4">Portable</span>
|
|
195
195
|
<h2 class="text-xl font-bold mb-2">Framework agnostic</h2>
|
|
196
196
|
<p class="text-neutral-80 mb-4">Generate CSS from one config and use it where build pipelines are awkward or locked down.</p>
|
|
197
|
-
<a href="#" class="font-semibold text-
|
|
197
|
+
<a href="#" class="font-semibold text-brand-80 underline">See setup</a>
|
|
198
198
|
</article>
|
|
199
199
|
</section>
|
|
200
200
|
|
|
@@ -204,12 +204,12 @@
|
|
|
204
204
|
<form class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
205
205
|
<div>
|
|
206
206
|
<label class="block font-semibold mb-2" for="name">Name</label>
|
|
207
|
-
<input id="name" class="w-full border border-neutral-40 rounded-md p-3 focus-visible:ring-2 ring-
|
|
207
|
+
<input id="name" class="w-full border border-neutral-40 rounded-md p-3 focus-visible:ring-2 ring-brand-80" type="text" value="EmilyUI">
|
|
208
208
|
</div>
|
|
209
209
|
|
|
210
210
|
<div>
|
|
211
211
|
<label class="block font-semibold mb-2" for="type">Project type</label>
|
|
212
|
-
<select id="type" class="w-full border border-neutral-40 rounded-md p-3 pr-12 focus-visible:ring-2 ring-
|
|
212
|
+
<select id="type" class="w-full border border-neutral-40 rounded-md p-3 pr-12 focus-visible:ring-2 ring-brand-80">
|
|
213
213
|
<option>Nuxt</option>
|
|
214
214
|
<option>Drupal</option>
|
|
215
215
|
<option>Static</option>
|
|
@@ -218,11 +218,11 @@
|
|
|
218
218
|
|
|
219
219
|
<div class="col-span-full">
|
|
220
220
|
<label class="block font-semibold mb-2" for="message">Notes</label>
|
|
221
|
-
<textarea id="message" class="w-full border border-neutral-40 rounded-md p-3 focus-visible:ring-2 ring-
|
|
221
|
+
<textarea id="message" class="w-full border border-neutral-40 rounded-md p-3 focus-visible:ring-2 ring-brand-80" rows="4">This tests form spacing, borders and focus states.</textarea>
|
|
222
222
|
</div>
|
|
223
223
|
|
|
224
224
|
<div class="col-span-full flex items-center gap-3">
|
|
225
|
-
<input id="check" class="w-6 h-6 accent-
|
|
225
|
+
<input id="check" class="w-6 h-6 accent-brand-80" type="checkbox" checked>
|
|
226
226
|
<label for="check">Use accessible defaults where possible</label>
|
|
227
227
|
</div>
|
|
228
228
|
</form>
|
|
@@ -244,9 +244,9 @@
|
|
|
244
244
|
<p class="text-error-90">Something failed during the build step.</p>
|
|
245
245
|
</div>
|
|
246
246
|
|
|
247
|
-
<div class="bg-
|
|
248
|
-
<h2 class="text-lg font-bold text-
|
|
249
|
-
<p class="text-
|
|
247
|
+
<div class="bg-accent-20 border border-accent-80 rounded-md p-4">
|
|
248
|
+
<h2 class="text-lg font-bold text-accent-90 mb-1">Info alert</h2>
|
|
249
|
+
<p class="text-accent-90">EmilyUI works best when config is kept simple.</p>
|
|
250
250
|
</div>
|
|
251
251
|
</section>
|
|
252
252
|
|
|
@@ -290,21 +290,21 @@
|
|
|
290
290
|
|
|
291
291
|
<h3 class="text-xl font-bold mb-3">Colour scales</h3>
|
|
292
292
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
|
|
293
|
-
<div><div class="bg-
|
|
294
|
-
<div><div class="bg-
|
|
295
|
-
<div><div class="bg-
|
|
296
|
-
<div><div class="bg-
|
|
297
|
-
<div><div class="bg-
|
|
298
|
-
<div><div class="bg-
|
|
293
|
+
<div><div class="bg-brand-10 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">brand-10</p></div>
|
|
294
|
+
<div><div class="bg-brand-20 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">brand-20</p></div>
|
|
295
|
+
<div><div class="bg-brand-40 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">brand-40</p></div>
|
|
296
|
+
<div><div class="bg-brand-60 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">brand-60</p></div>
|
|
297
|
+
<div><div class="bg-brand-80 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">brand-80</p></div>
|
|
298
|
+
<div><div class="bg-brand-100 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">brand-100</p></div>
|
|
299
299
|
</div>
|
|
300
300
|
|
|
301
301
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
|
|
302
|
-
<div><div class="bg-
|
|
303
|
-
<div><div class="bg-
|
|
304
|
-
<div><div class="bg-
|
|
305
|
-
<div><div class="bg-
|
|
306
|
-
<div><div class="bg-
|
|
307
|
-
<div><div class="bg-
|
|
302
|
+
<div><div class="bg-accent-10 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">accent-10</p></div>
|
|
303
|
+
<div><div class="bg-accent-20 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">accent-20</p></div>
|
|
304
|
+
<div><div class="bg-accent-40 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">accent-40</p></div>
|
|
305
|
+
<div><div class="bg-accent-60 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">accent-60</p></div>
|
|
306
|
+
<div><div class="bg-accent-80 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">accent-80</p></div>
|
|
307
|
+
<div><div class="bg-accent-100 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">accent-100</p></div>
|
|
308
308
|
</div>
|
|
309
309
|
|
|
310
310
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
|
|
@@ -345,10 +345,10 @@
|
|
|
345
345
|
|
|
346
346
|
<h3 class="text-xl font-bold mb-3">Spacing</h3>
|
|
347
347
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
348
|
-
<div class="border border-neutral-20 rounded-md p-4"><div class="bg-
|
|
349
|
-
<div class="border border-neutral-20 rounded-md p-4"><div class="bg-
|
|
350
|
-
<div class="border border-neutral-20 rounded-md p-4"><div class="bg-
|
|
351
|
-
<div class="border border-neutral-20 rounded-md p-4"><div class="bg-
|
|
348
|
+
<div class="border border-neutral-20 rounded-md p-4"><div class="bg-brand-80 h-4 w-4 rounded-sm"></div><p class="text-sm mt-2">space 4</p></div>
|
|
349
|
+
<div class="border border-neutral-20 rounded-md p-4"><div class="bg-brand-80 h-6 w-6 rounded-sm"></div><p class="text-sm mt-2">space 6</p></div>
|
|
350
|
+
<div class="border border-neutral-20 rounded-md p-4"><div class="bg-brand-80 h-8 w-8 rounded-sm"></div><p class="text-sm mt-2">space 8</p></div>
|
|
351
|
+
<div class="border border-neutral-20 rounded-md p-4"><div class="bg-brand-80 h-12 w-12 rounded-sm"></div><p class="text-sm mt-2">space 12</p></div>
|
|
352
352
|
</div>
|
|
353
353
|
|
|
354
354
|
<h3 class="text-xl font-bold mb-3">Typography</h3>
|
|
@@ -371,10 +371,10 @@
|
|
|
371
371
|
<div class="border border-neutral-20 rounded-lg p-5">
|
|
372
372
|
<h3 class="text-xl font-bold mb-3">Breadcrumbs</h3>
|
|
373
373
|
<nav aria-label="Breadcrumb">
|
|
374
|
-
<ol class="flex gap-2 text-sm text-
|
|
375
|
-
<li><a href="#" class="text-
|
|
374
|
+
<ol class="flex gap-2 text-sm text-brand-100">
|
|
375
|
+
<li><a href="#" class="text-brand-80 underline">Home</a></li>
|
|
376
376
|
<li>/</li>
|
|
377
|
-
<li><a href="#" class="text-
|
|
377
|
+
<li><a href="#" class="text-brand-80 underline">Components</a></li>
|
|
378
378
|
<li>/</li>
|
|
379
379
|
<li aria-current="page">Breadcrumbs</li>
|
|
380
380
|
</ol>
|
|
@@ -385,7 +385,7 @@
|
|
|
385
385
|
<h3 class="text-xl font-bold mb-3">Pagination</h3>
|
|
386
386
|
<nav class="flex gap-2" aria-label="Pagination">
|
|
387
387
|
<a href="#" class="border border-neutral-30 px-3 py-2 rounded-md">Previous</a>
|
|
388
|
-
<a href="#" class="bg-
|
|
388
|
+
<a href="#" class="bg-brand-80 text-white px-3 py-2 rounded-md">1</a>
|
|
389
389
|
<a href="#" class="border border-neutral-30 px-3 py-2 rounded-md">2</a>
|
|
390
390
|
<a href="#" class="border border-neutral-30 px-3 py-2 rounded-md">Next</a>
|
|
391
391
|
</nav>
|
|
@@ -394,7 +394,7 @@
|
|
|
394
394
|
<div class="border border-neutral-20 rounded-lg p-5">
|
|
395
395
|
<h3 class="text-xl font-bold mb-3">Tabs</h3>
|
|
396
396
|
<div class="flex gap-2 border-b border-neutral-30">
|
|
397
|
-
<button class="px-4 py-2 border-b-2 border-
|
|
397
|
+
<button class="px-4 py-2 border-b-2 border-brand-80 font-semibold">Overview</button>
|
|
398
398
|
<button class="px-4 py-2 text-neutral-70">Usage</button>
|
|
399
399
|
<button class="px-4 py-2 text-neutral-70">Code</button>
|
|
400
400
|
</div>
|
|
@@ -403,16 +403,16 @@
|
|
|
403
403
|
<div class="border border-neutral-20 rounded-lg p-5">
|
|
404
404
|
<h3 class="text-xl font-bold mb-3">Progress</h3>
|
|
405
405
|
<div class="bg-neutral-20 rounded-full h-4 overflow-hidden">
|
|
406
|
-
<div class="bg-
|
|
406
|
+
<div class="bg-brand-80 h-4 w-72"></div>
|
|
407
407
|
</div>
|
|
408
408
|
<p class="text-sm text-neutral-70 mt-2">75% complete</p>
|
|
409
409
|
</div>
|
|
410
410
|
|
|
411
411
|
<div class="border border-neutral-20 rounded-lg p-5">
|
|
412
412
|
<h3 class="text-xl font-bold mb-3">Notification banner</h3>
|
|
413
|
-
<div class="bg-
|
|
414
|
-
<p class="font-bold text-
|
|
415
|
-
<p class="text-
|
|
413
|
+
<div class="bg-accent-20 border-l-4 border-accent-80 p-4">
|
|
414
|
+
<p class="font-bold text-accent-90">Information</p>
|
|
415
|
+
<p class="text-accent-90">This is a standard notification message.</p>
|
|
416
416
|
</div>
|
|
417
417
|
</div>
|
|
418
418
|
|
|
@@ -422,7 +422,7 @@
|
|
|
422
422
|
<h4 class="text-lg font-bold mb-2">Confirm action</h4>
|
|
423
423
|
<p class="text-neutral-80 mb-4">This shows modal spacing and button grouping.</p>
|
|
424
424
|
<div class="flex gap-3">
|
|
425
|
-
<button class="bg-
|
|
425
|
+
<button class="bg-brand-80 text-white px-4 py-2 rounded-md font-semibold">Confirm</button>
|
|
426
426
|
<button class="border border-neutral-40 px-4 py-2 rounded-md">Cancel</button>
|
|
427
427
|
</div>
|
|
428
428
|
</div>
|
|
@@ -438,9 +438,9 @@
|
|
|
438
438
|
|
|
439
439
|
<div class="border border-neutral-20 rounded-lg p-5">
|
|
440
440
|
<h3 class="text-xl font-bold mb-3">Stat card</h3>
|
|
441
|
-
<div class="bg-
|
|
442
|
-
<p class="text-sm text-
|
|
443
|
-
<p class="text-3xl md:text-4xl font-bold text-
|
|
441
|
+
<div class="bg-brand-10 border border-brand-30 rounded-lg p-5">
|
|
442
|
+
<p class="text-sm text-brand-90">CSS generated</p>
|
|
443
|
+
<p class="text-3xl md:text-4xl font-bold text-brand-90">100%</p>
|
|
444
444
|
</div>
|
|
445
445
|
</div>
|
|
446
446
|
</div>
|
|
@@ -455,17 +455,17 @@
|
|
|
455
455
|
<div class="border border-neutral-20 rounded-md p-4">
|
|
456
456
|
<h3 class="font-bold mb-2">Display</h3>
|
|
457
457
|
<div class="flex gap-2">
|
|
458
|
-
<span class="inline-block bg-
|
|
459
|
-
<span class="inline-flex bg-
|
|
458
|
+
<span class="inline-block bg-brand-20 px-2 py-1 rounded-sm text-sm">block</span>
|
|
459
|
+
<span class="inline-flex bg-brand-20 px-2 py-1 rounded-sm text-sm">inline-flex</span>
|
|
460
460
|
</div>
|
|
461
461
|
</div>
|
|
462
462
|
|
|
463
463
|
<div class="border border-neutral-20 rounded-md p-4">
|
|
464
464
|
<h3 class="font-bold mb-2">Flex</h3>
|
|
465
465
|
<div class="flex items-center justify-between gap-2">
|
|
466
|
-
<span class="bg-
|
|
467
|
-
<span class="bg-
|
|
468
|
-
<span class="bg-
|
|
466
|
+
<span class="bg-accent-20 p-2 rounded-sm">A</span>
|
|
467
|
+
<span class="bg-accent-20 p-2 rounded-sm">B</span>
|
|
468
|
+
<span class="bg-accent-20 p-2 rounded-sm">C</span>
|
|
469
469
|
</div>
|
|
470
470
|
</div>
|
|
471
471
|
|
|
@@ -486,13 +486,13 @@
|
|
|
486
486
|
<div class="border border-neutral-20 rounded-md p-4">
|
|
487
487
|
<h3 class="font-bold mb-2">Sizing</h3>
|
|
488
488
|
<div class="w-full bg-neutral-20 rounded-sm">
|
|
489
|
-
<div class="w-48 h-6 bg-
|
|
489
|
+
<div class="w-48 h-6 bg-brand-80 rounded-sm"></div>
|
|
490
490
|
</div>
|
|
491
491
|
</div>
|
|
492
492
|
|
|
493
493
|
<div class="border border-neutral-20 rounded-md p-4">
|
|
494
494
|
<h3 class="font-bold mb-2">Borders</h3>
|
|
495
|
-
<div class="border-4 border-
|
|
495
|
+
<div class="border-4 border-brand-80 rounded-lg p-3 text-sm">border-4 rounded-lg</div>
|
|
496
496
|
</div>
|
|
497
497
|
|
|
498
498
|
<div class="border border-neutral-20 rounded-md p-4">
|
|
@@ -503,9 +503,9 @@
|
|
|
503
503
|
<div class="border border-neutral-20 rounded-md p-4">
|
|
504
504
|
<h3 class="font-bold mb-2">Opacity</h3>
|
|
505
505
|
<div class="flex gap-2">
|
|
506
|
-
<span class="bg-
|
|
507
|
-
<span class="bg-
|
|
508
|
-
<span class="bg-
|
|
506
|
+
<span class="bg-brand-80 opacity-25 h-8 w-8 rounded-sm"></span>
|
|
507
|
+
<span class="bg-brand-80 opacity-50 h-8 w-8 rounded-sm"></span>
|
|
508
|
+
<span class="bg-brand-80 opacity-100 h-8 w-8 rounded-sm"></span>
|
|
509
509
|
</div>
|
|
510
510
|
</div>
|
|
511
511
|
</div>
|
|
@@ -516,11 +516,11 @@
|
|
|
516
516
|
<p class="text-neutral-80 mb-6">These cards change layout using responsive variants.</p>
|
|
517
517
|
|
|
518
518
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
519
|
-
<div class="bg-
|
|
519
|
+
<div class="bg-brand-10 border border-brand-30 rounded-md p-4">
|
|
520
520
|
<p class="font-bold">Mobile</p>
|
|
521
521
|
<p class="text-sm">1 column by default</p>
|
|
522
522
|
</div>
|
|
523
|
-
<div class="bg-
|
|
523
|
+
<div class="bg-accent-10 border border-accent-30 rounded-md p-4">
|
|
524
524
|
<p class="font-bold">Small</p>
|
|
525
525
|
<p class="text-sm">2 columns from sm</p>
|
|
526
526
|
</div>
|
|
@@ -540,11 +540,11 @@
|
|
|
540
540
|
<p class="text-neutral-80 mb-6">Tests hover, focus-visible, active and disabled variants.</p>
|
|
541
541
|
|
|
542
542
|
<div class="flex flex-wrap gap-3">
|
|
543
|
-
<button class="bg-
|
|
543
|
+
<button class="bg-brand-80 text-white px-5 py-3 rounded-md font-semibold hover:bg-brand-90 active:bg-brand-100 focus-visible:ring-2 ring-brand-80">
|
|
544
544
|
Hover and focus
|
|
545
545
|
</button>
|
|
546
546
|
|
|
547
|
-
<button class="bg-
|
|
547
|
+
<button class="bg-accent-80 text-white px-5 py-3 rounded-md font-semibold hover:bg-accent-90 active:bg-accent-100 focus-visible:ring-2 ring-accent-80">
|
|
548
548
|
Active state
|
|
549
549
|
</button>
|
|
550
550
|
|
|
@@ -552,7 +552,7 @@
|
|
|
552
552
|
Disabled
|
|
553
553
|
</button>
|
|
554
554
|
|
|
555
|
-
<a href="#" class="inline-flex items-center justify-center text-
|
|
555
|
+
<a href="#" class="inline-flex items-center justify-center text-brand-80 underline decoration-2 hover:text-brand-90 focus-visible:ring-2 ring-brand-80 rounded-sm">
|
|
556
556
|
Focusable link
|
|
557
557
|
</a>
|
|
558
558
|
</div>
|
|
@@ -568,14 +568,14 @@
|
|
|
568
568
|
<p class="text-sm text-neutral-70 dark:text-neutral-20">dark:bg-neutral-80</p>
|
|
569
569
|
</div>
|
|
570
570
|
|
|
571
|
-
<div class="bg-
|
|
572
|
-
<p class="font-bold text-
|
|
573
|
-
<p class="text-sm text-
|
|
571
|
+
<div class="bg-brand-10 dark:bg-brand-90 border border-brand-30 dark:border-brand-70 rounded-md p-4">
|
|
572
|
+
<p class="font-bold text-brand-90 dark:text-brand-10">Brand</p>
|
|
573
|
+
<p class="text-sm text-brand-90 dark:text-brand-10">dark:bg-brand-90</p>
|
|
574
574
|
</div>
|
|
575
575
|
|
|
576
|
-
<div class="bg-
|
|
577
|
-
<p class="font-bold text-
|
|
578
|
-
<p class="text-sm text-
|
|
576
|
+
<div class="bg-accent-10 dark:bg-accent-90 border border-accent-30 dark:border-accent-70 rounded-md p-4">
|
|
577
|
+
<p class="font-bold text-accent-90 dark:text-accent-10">Accent</p>
|
|
578
|
+
<p class="text-sm text-accent-90 dark:text-accent-10">dark:text-accent-10</p>
|
|
579
579
|
</div>
|
|
580
580
|
</div>
|
|
581
581
|
</section>
|
|
@@ -616,25 +616,25 @@
|
|
|
616
616
|
|
|
617
617
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
618
618
|
<article class="lg:col-span-2 border border-neutral-20 rounded-lg p-6">
|
|
619
|
-
<p class="text-sm font-bold text-
|
|
619
|
+
<p class="text-sm font-bold text-brand-80 mb-2">Article layout</p>
|
|
620
620
|
<h3 class="text-3xl font-bold mb-3">Design systems work best when they reduce decisions.</h3>
|
|
621
621
|
<p class="text-neutral-80 leading-relaxed mb-4">A good utility system should help teams move faster without removing judgement. This pattern tests headings, body copy, spacing and readable measure.</p>
|
|
622
|
-
<a href="#" class="text-
|
|
622
|
+
<a href="#" class="text-brand-80 font-semibold underline">Continue reading</a>
|
|
623
623
|
</article>
|
|
624
624
|
|
|
625
625
|
<aside class="border border-neutral-20 rounded-lg p-6 bg-neutral-10">
|
|
626
626
|
<p class="text-sm font-bold text-neutral-70 mb-2">Dashboard panel</p>
|
|
627
|
-
<p class="text-4xl font-bold text-
|
|
627
|
+
<p class="text-4xl font-bold text-brand-90 mb-2">64%</p>
|
|
628
628
|
<p class="text-neutral-80">CSS reduction after production build.</p>
|
|
629
629
|
</aside>
|
|
630
630
|
|
|
631
|
-
<div class="border border-
|
|
631
|
+
<div class="border border-brand-30 bg-brand-10 rounded-lg p-6 lg:col-span-3">
|
|
632
632
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
633
633
|
<div>
|
|
634
|
-
<h3 class="text-2xl font-bold text-
|
|
635
|
-
<p class="text-
|
|
634
|
+
<h3 class="text-2xl font-bold text-brand-90 mb-2">Ready to ship?</h3>
|
|
635
|
+
<p class="text-brand-90">Use this section as a call-to-action pattern.</p>
|
|
636
636
|
</div>
|
|
637
|
-
<a href="#" class="inline-flex justify-center bg-
|
|
637
|
+
<a href="#" class="inline-flex justify-center bg-brand-80 text-white px-5 py-3 rounded-md font-semibold hover:bg-brand-90">
|
|
638
638
|
Get started
|
|
639
639
|
</a>
|
|
640
640
|
</div>
|
|
@@ -652,7 +652,7 @@
|
|
|
652
652
|
<div>
|
|
653
653
|
<h3 class="font-bold mb-3">Primary button</h3>
|
|
654
654
|
<div class="bg-neutral-10 border border-neutral-20 rounded-t-lg p-6 flex items-center justify-center" style="min-height: 80px;">
|
|
655
|
-
<button class="bg-
|
|
655
|
+
<button class="bg-brand-80 text-white px-5 py-3 rounded-md font-semibold hover:bg-brand-90 focus-visible:ring-2 ring-brand-80">Get started</button>
|
|
656
656
|
</div>
|
|
657
657
|
<div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
|
|
658
658
|
<div class="code-title-bar">
|
|
@@ -661,12 +661,12 @@
|
|
|
661
661
|
<span class="code-dot code-dot-green"></span>
|
|
662
662
|
<span class="code-filename">button.html</span>
|
|
663
663
|
</div>
|
|
664
|
-
<pre><code><span class="token-line-number"> 1</span><span class="token-tag"><button</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"</span><span class="token-attr">bg-
|
|
664
|
+
<pre><code><span class="token-line-number"> 1</span><span class="token-tag"><button</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"</span><span class="token-attr">bg-brand-80</span> <span class="token-attr">text-white</span>
|
|
665
665
|
<span class="token-line-number"> 2</span> <span class="token-attr">px-5</span> <span class="token-attr">py-3</span> <span class="token-utility">rounded-md</span>
|
|
666
666
|
<span class="token-line-number"> 3</span> <span class="token-utility">font-semibold</span>
|
|
667
|
-
<span class="token-line-number"> 4</span> <span class="token-variant">hover:</span><span class="token-attr">bg-
|
|
667
|
+
<span class="token-line-number"> 4</span> <span class="token-variant">hover:</span><span class="token-attr">bg-brand-90</span>
|
|
668
668
|
<span class="token-line-number"> 5</span> <span class="token-variant">focus-visible:</span><span class="token-attr">ring-2</span>
|
|
669
|
-
<span class="token-line-number"> 6</span> <span class="token-attr">ring-
|
|
669
|
+
<span class="token-line-number"> 6</span> <span class="token-attr">ring-brand-80</span><span class="token-string">"</span><span class="token-tag">></span>
|
|
670
670
|
<span class="token-line-number"> 7</span> Get started
|
|
671
671
|
<span class="token-line-number"> 8</span><span class="token-tag"></button></span></code></pre>
|
|
672
672
|
</div>
|
|
@@ -880,9 +880,9 @@
|
|
|
880
880
|
<h3 class="font-bold mb-3">.stack</h3>
|
|
881
881
|
<div class="bg-neutral-10 border border-neutral-20 rounded-t-lg p-6" style="min-height: 100px;">
|
|
882
882
|
<div class="stack">
|
|
883
|
-
<div class="bg-
|
|
884
|
-
<div class="bg-
|
|
885
|
-
<div class="bg-
|
|
883
|
+
<div class="bg-brand-20 text-brand-90 rounded-md p-3 text-sm font-medium">First item</div>
|
|
884
|
+
<div class="bg-brand-20 text-brand-90 rounded-md p-3 text-sm font-medium">Second item</div>
|
|
885
|
+
<div class="bg-brand-20 text-brand-90 rounded-md p-3 text-sm font-medium">Third item</div>
|
|
886
886
|
</div>
|
|
887
887
|
</div>
|
|
888
888
|
<div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
|
|
@@ -902,8 +902,8 @@
|
|
|
902
902
|
<h3 class="font-bold mb-3">.cluster</h3>
|
|
903
903
|
<div class="bg-neutral-10 border border-neutral-20 rounded-t-lg p-6" style="min-height: 100px;">
|
|
904
904
|
<div class="cluster">
|
|
905
|
-
<span class="bg-
|
|
906
|
-
<span class="bg-
|
|
905
|
+
<span class="bg-brand-20 text-brand-90 px-3 py-1 rounded-full text-sm font-medium">Design systems</span>
|
|
906
|
+
<span class="bg-accent-20 text-accent-90 px-3 py-1 rounded-full text-sm font-medium">Accessible</span>
|
|
907
907
|
<span class="bg-success-20 text-success-90 px-3 py-1 rounded-full text-sm font-medium">No build step</span>
|
|
908
908
|
<span class="bg-warning-20 text-warning-90 px-3 py-1 rounded-full text-sm font-medium">Config-driven</span>
|
|
909
909
|
</div>
|
|
@@ -955,7 +955,7 @@
|
|
|
955
955
|
<h4 class="text-lg font-bold mb-2">Confirm action</h4>
|
|
956
956
|
<p class="text-neutral-80 text-sm mb-4">This is how center-screen looks. In production it uses position: fixed and covers the full viewport.</p>
|
|
957
957
|
<div class="flex gap-3" style="justify-content: center;">
|
|
958
|
-
<button class="bg-
|
|
958
|
+
<button class="bg-brand-80 text-white px-4 py-2 rounded-md font-semibold text-sm">Confirm</button>
|
|
959
959
|
<button class="border border-neutral-40 px-4 py-2 rounded-md text-sm">Cancel</button>
|
|
960
960
|
</div>
|
|
961
961
|
</div>
|