emily-css 1.0.25 → 1.0.26
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 +23 -0
- package/package.json +1 -1
- package/src/generators.js +174 -46
- package/src/index.js +199 -74
- package/src/init.js +13 -2
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,29 @@ All notable changes to `emily-css` are documented here.
|
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
+
## v1.0.26 — May 2026
|
|
8
|
+
|
|
9
|
+
**Expand utility coverage and typography scale**
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
- Expand utility coverage and typography scale
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
## v1.0.26 — May 2026
|
|
16
|
+
|
|
17
|
+
**Colour utilities now variable-based; fix grey text on dark surfaces**
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
- `generateColourUtilities` now emits `var(--color-*)` references instead of hardcoded hex values for all `text-*`, `bg-*`, `border-*`, and `accent-*` utilities. Consistent with how semantic colours and ring/fill/stroke utilities already worked. Enables theme-layer overrides without specificity hacks.
|
|
21
|
+
- Homepage "How it works" cards: `text-neutral-80` / `text-neutral-40` on `bg-dark` produced near-invisible text in light mode (contrast ~2.3:1). Fixed to `text-neutral-10` / `text-neutral-30` — matches the pattern used by the hero and CTA banner.
|
|
22
|
+
- Removed erroneous backslash in `h-2\.5` HTML class strings in `index.vue` (rendered fine via Vue template compilation, but confusing and inconsistent).
|
|
23
|
+
- Stripped null bytes from `pages/index.vue` (6) and `package.json` (339) in `emilyui-site`.
|
|
24
|
+
|
|
25
|
+
### Changed
|
|
26
|
+
- `tests/test.js`: updated `accent-brand-80` assertion to expect `var(--color-brand-80)` rather than hardcoded hex, matching the new generation behaviour.
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
7
30
|
## v1.0.25 — May 2026
|
|
8
31
|
|
|
9
32
|
**updaed colour**
|
package/package.json
CHANGED
package/src/generators.js
CHANGED
|
@@ -14,14 +14,38 @@ function displayUtilities() {
|
|
|
14
14
|
.block { display: block; }
|
|
15
15
|
.inline { display: inline; }
|
|
16
16
|
.inline-block { display: inline-block; }
|
|
17
|
+
.flow-root { display: flow-root; }
|
|
17
18
|
.flex { display: flex; }
|
|
18
19
|
.inline-flex { display: inline-flex; }
|
|
19
20
|
.grid { display: grid; }
|
|
20
21
|
.inline-grid { display: inline-grid; }
|
|
21
|
-
.hidden { display: none; }
|
|
22
22
|
.contents { display: contents; }
|
|
23
|
+
.list-item { display: list-item; }
|
|
24
|
+
.hidden { display: none; }
|
|
25
|
+
.table { display: table; }
|
|
26
|
+
.inline-table { display: inline-table; }
|
|
27
|
+
.table-caption { display: table-caption; }
|
|
28
|
+
.table-cell { display: table-cell; }
|
|
29
|
+
.table-column { display: table-column; }
|
|
30
|
+
.table-column-group { display: table-column-group; }
|
|
31
|
+
.table-footer-group { display: table-footer-group; }
|
|
32
|
+
.table-header-group { display: table-header-group; }
|
|
33
|
+
.table-row-group { display: table-row-group; }
|
|
34
|
+
.table-row { display: table-row; }
|
|
23
35
|
.visible { visibility: visible; }
|
|
24
36
|
.invisible { visibility: hidden; }
|
|
37
|
+
.collapse { visibility: collapse; }
|
|
38
|
+
.float-start { float: inline-start; }
|
|
39
|
+
.float-end { float: inline-end; }
|
|
40
|
+
.float-right { float: right; }
|
|
41
|
+
.float-left { float: left; }
|
|
42
|
+
.float-none { float: none; }
|
|
43
|
+
.clear-start { clear: inline-start; }
|
|
44
|
+
.clear-end { clear: inline-end; }
|
|
45
|
+
.clear-left { clear: left; }
|
|
46
|
+
.clear-right { clear: right; }
|
|
47
|
+
.clear-both { clear: both; }
|
|
48
|
+
.clear-none { clear: none; }
|
|
25
49
|
|
|
26
50
|
`;
|
|
27
51
|
}
|
|
@@ -30,50 +54,100 @@ function displayUtilities() {
|
|
|
30
54
|
function sizingUtilities(spacing) {
|
|
31
55
|
let css = `/* Sizing */\n`;
|
|
32
56
|
|
|
33
|
-
// Width
|
|
34
57
|
Object.entries(spacing).forEach(([key, value]) => {
|
|
35
58
|
const escaped = escapeClassName(key);
|
|
36
59
|
css += `.w-${escaped} { width: ${value}; }\n`;
|
|
60
|
+
css += `.h-${escaped} { height: ${value}; }\n`;
|
|
61
|
+
css += `.size-${escaped} { width: ${value}; height: ${value}; }\n`;
|
|
62
|
+
css += `.min-w-${escaped} { min-width: ${value}; }\n`;
|
|
63
|
+
css += `.min-h-${escaped} { min-height: ${value}; }\n`;
|
|
64
|
+
css += `.max-w-${escaped} { max-width: ${value}; }\n`;
|
|
65
|
+
css += `.max-h-${escaped} { max-height: ${value}; }\n`;
|
|
37
66
|
});
|
|
38
67
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
68
|
+
const fractions = {
|
|
69
|
+
'1\\/2': '50%', '1\\/3': '33.333333%', '2\\/3': '66.666667%',
|
|
70
|
+
'1\\/4': '25%', '2\\/4': '50%', '3\\/4': '75%',
|
|
71
|
+
'1\\/5': '20%', '2\\/5': '40%', '3\\/5': '60%', '4\\/5': '80%',
|
|
72
|
+
'1\\/6': '16.666667%', '2\\/6': '33.333333%', '3\\/6': '50%', '4\\/6': '66.666667%', '5\\/6': '83.333333%',
|
|
73
|
+
'1\\/12': '8.333333%', '2\\/12': '16.666667%', '3\\/12': '25%', '4\\/12': '33.333333%', '5\\/12': '41.666667%', '6\\/12': '50%', '7\\/12': '58.333333%', '8\\/12': '66.666667%', '9\\/12': '75%', '10\\/12': '83.333333%', '11\\/12': '91.666667%'
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
Object.entries(fractions).forEach(([name, value]) => {
|
|
77
|
+
css += `.w-${name} { width: ${value}; }\n`;
|
|
78
|
+
css += `.h-${name} { height: ${value}; }\n`;
|
|
79
|
+
css += `.size-${name} { width: ${value}; height: ${value}; }\n`;
|
|
43
80
|
});
|
|
44
81
|
|
|
45
|
-
|
|
82
|
+
css += `.w-auto { width: auto; }\n`;
|
|
83
|
+
css += `.h-auto { height: auto; }\n`;
|
|
84
|
+
css += `.size-auto { width: auto; height: auto; }\n`;
|
|
46
85
|
css += `.w-full { width: 100%; }\n`;
|
|
47
86
|
css += `.h-full { height: 100%; }\n`;
|
|
87
|
+
css += `.size-full { width: 100%; height: 100%; }\n`;
|
|
48
88
|
css += `.w-screen { width: 100vw; }\n`;
|
|
49
89
|
css += `.h-screen { height: 100vh; }\n`;
|
|
90
|
+
css += `.w-svw { width: 100svw; }\n`;
|
|
91
|
+
css += `.h-svh { height: 100svh; }\n`;
|
|
92
|
+
css += `.w-lvw { width: 100lvw; }\n`;
|
|
93
|
+
css += `.h-lvh { height: 100lvh; }\n`;
|
|
94
|
+
css += `.w-dvw { width: 100dvw; }\n`;
|
|
95
|
+
css += `.h-dvh { height: 100dvh; }\n`;
|
|
96
|
+
css += `.w-min { width: min-content; }\n`;
|
|
97
|
+
css += `.w-max { width: max-content; }\n`;
|
|
98
|
+
css += `.w-fit { width: fit-content; }\n`;
|
|
99
|
+
css += `.h-min { height: min-content; }\n`;
|
|
100
|
+
css += `.h-max { height: max-content; }\n`;
|
|
101
|
+
css += `.h-fit { height: fit-content; }\n`;
|
|
50
102
|
|
|
51
|
-
// Min/Max
|
|
52
103
|
css += `.min-w-0 { min-width: 0; }\n`;
|
|
104
|
+
css += `.min-w-full { min-width: 100%; }\n`;
|
|
105
|
+
css += `.min-w-min { min-width: min-content; }\n`;
|
|
106
|
+
css += `.min-w-max { min-width: max-content; }\n`;
|
|
107
|
+
css += `.min-w-fit { min-width: fit-content; }\n`;
|
|
53
108
|
css += `.min-h-0 { min-height: 0; }\n`;
|
|
109
|
+
css += `.min-h-full { min-height: 100%; }\n`;
|
|
54
110
|
css += `.min-h-screen { min-height: 100vh; }\n`;
|
|
111
|
+
css += `.min-h-svh { min-height: 100svh; }\n`;
|
|
112
|
+
css += `.min-h-lvh { min-height: 100lvh; }\n`;
|
|
113
|
+
css += `.min-h-dvh { min-height: 100dvh; }\n`;
|
|
114
|
+
css += `.min-h-min { min-height: min-content; }\n`;
|
|
115
|
+
css += `.min-h-max { min-height: max-content; }\n`;
|
|
116
|
+
css += `.min-h-fit { min-height: fit-content; }\n`;
|
|
117
|
+
|
|
118
|
+
css += `.max-w-0 { max-width: 0; }\n`;
|
|
119
|
+
css += `.max-w-none { max-width: none; }\n`;
|
|
55
120
|
css += `.max-w-full { max-width: 100%; }\n`;
|
|
121
|
+
css += `.max-w-min { max-width: min-content; }\n`;
|
|
122
|
+
css += `.max-w-max { max-width: max-content; }\n`;
|
|
123
|
+
css += `.max-w-fit { max-width: fit-content; }\n`;
|
|
124
|
+
css += `.max-h-0 { max-height: 0; }\n`;
|
|
56
125
|
css += `.max-h-full { max-height: 100%; }\n`;
|
|
57
|
-
css += `.max-
|
|
58
|
-
css += `.max-
|
|
59
|
-
css += `.max-
|
|
60
|
-
css += `.max-
|
|
61
|
-
css += `.max-
|
|
62
|
-
css += `.max-
|
|
63
|
-
css += `.max-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
126
|
+
css += `.max-h-screen { max-height: 100vh; }\n`;
|
|
127
|
+
css += `.max-h-svh { max-height: 100svh; }\n`;
|
|
128
|
+
css += `.max-h-lvh { max-height: 100lvh; }\n`;
|
|
129
|
+
css += `.max-h-dvh { max-height: 100dvh; }\n`;
|
|
130
|
+
css += `.max-h-min { max-height: min-content; }\n`;
|
|
131
|
+
css += `.max-h-max { max-height: max-content; }\n`;
|
|
132
|
+
css += `.max-h-fit { max-height: fit-content; }\n`;
|
|
133
|
+
|
|
134
|
+
const maxWidths = {
|
|
135
|
+
xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem',
|
|
136
|
+
'2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem',
|
|
137
|
+
'6xl': '72rem', '7xl': '80rem', prose: '65ch', screen: '100vw',
|
|
138
|
+
'screen-sm': '640px', 'screen-md': '768px', 'screen-lg': '1024px',
|
|
139
|
+
'screen-xl': '1280px', 'screen-2xl': '1536px'
|
|
140
|
+
};
|
|
141
|
+
Object.entries(maxWidths).forEach(([name, value]) => {
|
|
142
|
+
css += `.max-w-${name} { max-width: ${value}; }\n`;
|
|
143
|
+
});
|
|
144
|
+
|
|
71
145
|
css += `.aspect-auto { aspect-ratio: auto; }\n`;
|
|
72
146
|
css += `.aspect-square { aspect-ratio: 1; }\n`;
|
|
73
147
|
css += `.aspect-video { aspect-ratio: 16 / 9; }\n`;
|
|
74
|
-
css += `.aspect-3
|
|
75
|
-
css += `.aspect-4
|
|
76
|
-
css += `.aspect-16
|
|
148
|
+
css += `.aspect-3\\/2 { aspect-ratio: 3 / 2; }\n`;
|
|
149
|
+
css += `.aspect-4\\/3 { aspect-ratio: 4 / 3; }\n`;
|
|
150
|
+
css += `.aspect-16\\/9 { aspect-ratio: 16 / 9; }\n`;
|
|
77
151
|
|
|
78
152
|
css += `\n`;
|
|
79
153
|
return css;
|
|
@@ -89,7 +163,6 @@ function positioningUtilities(spacing) {
|
|
|
89
163
|
css += `.fixed { position: fixed; }\n`;
|
|
90
164
|
css += `.sticky { position: sticky; }\n`;
|
|
91
165
|
|
|
92
|
-
// Inset values
|
|
93
166
|
Object.entries(spacing).forEach(([key, value]) => {
|
|
94
167
|
const escaped = escapeClassName(key);
|
|
95
168
|
css += `.top-${escaped} { top: ${value}; }\n`;
|
|
@@ -97,27 +170,31 @@ function positioningUtilities(spacing) {
|
|
|
97
170
|
css += `.bottom-${escaped} { bottom: ${value}; }\n`;
|
|
98
171
|
css += `.left-${escaped} { left: ${value}; }\n`;
|
|
99
172
|
css += `.inset-${escaped} { inset: ${value}; }\n`;
|
|
173
|
+
css += `.inset-x-${escaped} { left: ${value}; right: ${value}; }\n`;
|
|
174
|
+
css += `.inset-y-${escaped} { top: ${value}; bottom: ${value}; }\n`;
|
|
175
|
+
if (value !== '0' && value !== '0px') {
|
|
176
|
+
css += `.-top-${escaped} { top: -${value}; }\n`;
|
|
177
|
+
css += `.-right-${escaped} { right: -${value}; }\n`;
|
|
178
|
+
css += `.-bottom-${escaped} { bottom: -${value}; }\n`;
|
|
179
|
+
css += `.-left-${escaped} { left: -${value}; }\n`;
|
|
180
|
+
css += `.-inset-${escaped} { inset: -${value}; }\n`;
|
|
181
|
+
css += `.-inset-x-${escaped} { left: -${value}; right: -${value}; }\n`;
|
|
182
|
+
css += `.-inset-y-${escaped} { top: -${value}; bottom: -${value}; }\n`;
|
|
183
|
+
}
|
|
100
184
|
});
|
|
101
185
|
|
|
102
186
|
css += `.inset-auto { inset: auto; }\n`;
|
|
187
|
+
css += `.inset-x-auto { left: auto; right: auto; }\n`;
|
|
188
|
+
css += `.inset-y-auto { top: auto; bottom: auto; }\n`;
|
|
189
|
+
css += `.top-auto { top: auto; }\n`;
|
|
190
|
+
css += `.right-auto { right: auto; }\n`;
|
|
191
|
+
css += `.bottom-auto { bottom: auto; }\n`;
|
|
192
|
+
css += `.left-auto { left: auto; }\n`;
|
|
103
193
|
|
|
104
|
-
// Z-index (semantic)
|
|
105
194
|
const zIndices = {
|
|
106
|
-
'auto': 'auto',
|
|
107
|
-
'
|
|
108
|
-
'10': '10',
|
|
109
|
-
'20': '20',
|
|
110
|
-
'30': '30',
|
|
111
|
-
'40': '40',
|
|
112
|
-
'50': '50',
|
|
113
|
-
'dropdown': '1000',
|
|
114
|
-
'sticky': '1020',
|
|
115
|
-
'fixed': '1030',
|
|
116
|
-
'modal': '1040',
|
|
117
|
-
'popover': '1060',
|
|
118
|
-
'tooltip': '1070'
|
|
195
|
+
'auto': 'auto', '0': '0', '10': '10', '20': '20', '30': '30', '40': '40', '50': '50',
|
|
196
|
+
'dropdown': '1000', 'sticky': '1020', 'fixed': '1030', 'modal': '1040', 'popover': '1060', 'tooltip': '1070'
|
|
119
197
|
};
|
|
120
|
-
|
|
121
198
|
Object.entries(zIndices).forEach(([name, value]) => {
|
|
122
199
|
css += `.z-${name} { z-index: ${value}; }\n`;
|
|
123
200
|
});
|
|
@@ -131,13 +208,23 @@ function overflowUtilities() {
|
|
|
131
208
|
return `/* Overflow & Clipping */
|
|
132
209
|
.overflow-auto { overflow: auto; }
|
|
133
210
|
.overflow-hidden { overflow: hidden; }
|
|
211
|
+
.overflow-clip { overflow: clip; }
|
|
134
212
|
.overflow-visible { overflow: visible; }
|
|
135
213
|
.overflow-scroll { overflow: scroll; }
|
|
136
214
|
.overflow-x-auto { overflow-x: auto; }
|
|
137
215
|
.overflow-x-hidden { overflow-x: hidden; }
|
|
216
|
+
.overflow-x-clip { overflow-x: clip; }
|
|
217
|
+
.overflow-x-visible { overflow-x: visible; }
|
|
218
|
+
.overflow-x-scroll { overflow-x: scroll; }
|
|
138
219
|
.overflow-y-auto { overflow-y: auto; }
|
|
139
220
|
.overflow-y-hidden { overflow-y: hidden; }
|
|
221
|
+
.overflow-y-clip { overflow-y: clip; }
|
|
222
|
+
.overflow-y-visible { overflow-y: visible; }
|
|
223
|
+
.overflow-y-scroll { overflow-y: scroll; }
|
|
140
224
|
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
225
|
+
.text-ellipsis { text-overflow: ellipsis; }
|
|
226
|
+
.text-clip { text-overflow: clip; }
|
|
227
|
+
.line-clamp-none { overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset; }
|
|
141
228
|
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
|
|
142
229
|
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
143
230
|
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
|
@@ -248,9 +335,12 @@ function shadowUtilities() {
|
|
|
248
335
|
return `/* Shadows */
|
|
249
336
|
.shadow-none { box-shadow: none; }
|
|
250
337
|
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
|
|
251
|
-
.shadow { box-shadow: 0
|
|
252
|
-
.shadow-md { box-shadow: 0
|
|
253
|
-
.shadow-lg { box-shadow: 0
|
|
338
|
+
.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); }
|
|
339
|
+
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); }
|
|
340
|
+
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); }
|
|
341
|
+
.shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); }
|
|
342
|
+
.shadow-2xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); }
|
|
343
|
+
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
|
|
254
344
|
|
|
255
345
|
`;
|
|
256
346
|
}
|
|
@@ -445,10 +535,38 @@ function cursorUtilities() {
|
|
|
445
535
|
.cursor-default { cursor: default; }
|
|
446
536
|
.cursor-pointer { cursor: pointer; }
|
|
447
537
|
.cursor-wait { cursor: wait; }
|
|
448
|
-
.cursor-not-allowed { cursor: not-allowed; }
|
|
449
|
-
.cursor-move { cursor: move; }
|
|
450
538
|
.cursor-text { cursor: text; }
|
|
539
|
+
.cursor-move { cursor: move; }
|
|
451
540
|
.cursor-help { cursor: help; }
|
|
541
|
+
.cursor-not-allowed { cursor: not-allowed; }
|
|
542
|
+
.cursor-none { cursor: none; }
|
|
543
|
+
.cursor-context-menu { cursor: context-menu; }
|
|
544
|
+
.cursor-progress { cursor: progress; }
|
|
545
|
+
.cursor-cell { cursor: cell; }
|
|
546
|
+
.cursor-crosshair { cursor: crosshair; }
|
|
547
|
+
.cursor-vertical-text { cursor: vertical-text; }
|
|
548
|
+
.cursor-alias { cursor: alias; }
|
|
549
|
+
.cursor-copy { cursor: copy; }
|
|
550
|
+
.cursor-no-drop { cursor: no-drop; }
|
|
551
|
+
.cursor-grab { cursor: grab; }
|
|
552
|
+
.cursor-grabbing { cursor: grabbing; }
|
|
553
|
+
.cursor-all-scroll { cursor: all-scroll; }
|
|
554
|
+
.cursor-col-resize { cursor: col-resize; }
|
|
555
|
+
.cursor-row-resize { cursor: row-resize; }
|
|
556
|
+
.cursor-n-resize { cursor: n-resize; }
|
|
557
|
+
.cursor-e-resize { cursor: e-resize; }
|
|
558
|
+
.cursor-s-resize { cursor: s-resize; }
|
|
559
|
+
.cursor-w-resize { cursor: w-resize; }
|
|
560
|
+
.cursor-ne-resize { cursor: ne-resize; }
|
|
561
|
+
.cursor-nw-resize { cursor: nw-resize; }
|
|
562
|
+
.cursor-se-resize { cursor: se-resize; }
|
|
563
|
+
.cursor-sw-resize { cursor: sw-resize; }
|
|
564
|
+
.cursor-ew-resize { cursor: ew-resize; }
|
|
565
|
+
.cursor-ns-resize { cursor: ns-resize; }
|
|
566
|
+
.cursor-nesw-resize { cursor: nesw-resize; }
|
|
567
|
+
.cursor-nwse-resize { cursor: nwse-resize; }
|
|
568
|
+
.cursor-zoom-in { cursor: zoom-in; }
|
|
569
|
+
.cursor-zoom-out { cursor: zoom-out; }
|
|
452
570
|
.pointer-events-auto { pointer-events: auto; }
|
|
453
571
|
.pointer-events-none { pointer-events: none; }
|
|
454
572
|
.select-none { user-select: none; }
|
|
@@ -459,6 +577,16 @@ function cursorUtilities() {
|
|
|
459
577
|
.resize { resize: both; }
|
|
460
578
|
.resize-x { resize: horizontal; }
|
|
461
579
|
.resize-y { resize: vertical; }
|
|
580
|
+
.touch-auto { touch-action: auto; }
|
|
581
|
+
.touch-none { touch-action: none; }
|
|
582
|
+
.touch-pan-x { touch-action: pan-x; }
|
|
583
|
+
.touch-pan-left { touch-action: pan-left; }
|
|
584
|
+
.touch-pan-right { touch-action: pan-right; }
|
|
585
|
+
.touch-pan-y { touch-action: pan-y; }
|
|
586
|
+
.touch-pan-up { touch-action: pan-up; }
|
|
587
|
+
.touch-pan-down { touch-action: pan-down; }
|
|
588
|
+
.touch-pinch-zoom { touch-action: pinch-zoom; }
|
|
589
|
+
.touch-manipulation { touch-action: manipulation; }
|
|
462
590
|
.isolate { isolation: isolate; }
|
|
463
591
|
.isolation-auto { isolation: auto; }
|
|
464
592
|
.will-change-auto { will-change: auto; }
|
package/src/index.js
CHANGED
|
@@ -359,7 +359,6 @@ function generateSpacingUtilities(spacing) {
|
|
|
359
359
|
function generateFlexboxUtilities(spacing) {
|
|
360
360
|
let css = `/* Flexbox */\n`;
|
|
361
361
|
|
|
362
|
-
// Note: .flex is already generated in displayUtilities(), removed duplicate here
|
|
363
362
|
css += `.inline-flex { display: inline-flex; }\n`;
|
|
364
363
|
|
|
365
364
|
// Direction
|
|
@@ -373,22 +372,65 @@ function generateFlexboxUtilities(spacing) {
|
|
|
373
372
|
css += `.flex-nowrap { flex-wrap: nowrap; }\n`;
|
|
374
373
|
css += `.flex-wrap-reverse { flex-wrap: wrap-reverse; }\n`;
|
|
375
374
|
|
|
376
|
-
//
|
|
375
|
+
// Flex shorthand
|
|
377
376
|
css += `.flex-1 { flex: 1 1 0%; }\n`;
|
|
378
377
|
css += `.flex-auto { flex: 1 1 auto; }\n`;
|
|
378
|
+
css += `.flex-initial { flex: 0 1 auto; }\n`;
|
|
379
379
|
css += `.flex-none { flex: none; }\n`;
|
|
380
|
+
|
|
381
|
+
// Grow/shrink
|
|
380
382
|
css += `.grow { flex-grow: 1; }\n`;
|
|
381
383
|
css += `.grow-0 { flex-grow: 0; }\n`;
|
|
382
384
|
css += `.shrink { flex-shrink: 1; }\n`;
|
|
383
385
|
css += `.shrink-0 { flex-shrink: 0; }\n`;
|
|
384
386
|
|
|
387
|
+
// Flex basis
|
|
388
|
+
css += `.basis-auto { flex-basis: auto; }\n`;
|
|
389
|
+
css += `.basis-full { flex-basis: 100%; }\n`;
|
|
390
|
+
Object.entries(spacing).forEach(([key, value]) => {
|
|
391
|
+
const escaped = escapeClassName(key);
|
|
392
|
+
css += `.basis-${escaped} { flex-basis: ${value}; }\n`;
|
|
393
|
+
});
|
|
394
|
+
|
|
395
|
+
const fractions = {
|
|
396
|
+
'1\\/2': '50%', '1\\/3': '33.333333%', '2\\/3': '66.666667%',
|
|
397
|
+
'1\\/4': '25%', '2\\/4': '50%', '3\\/4': '75%',
|
|
398
|
+
'1\\/5': '20%', '2\\/5': '40%', '3\\/5': '60%', '4\\/5': '80%',
|
|
399
|
+
'1\\/6': '16.666667%', '2\\/6': '33.333333%', '3\\/6': '50%', '4\\/6': '66.666667%', '5\\/6': '83.333333%',
|
|
400
|
+
'1\\/12': '8.333333%', '2\\/12': '16.666667%', '3\\/12': '25%', '4\\/12': '33.333333%', '5\\/12': '41.666667%', '6\\/12': '50%', '7\\/12': '58.333333%', '8\\/12': '66.666667%', '9\\/12': '75%', '10\\/12': '83.333333%', '11\\/12': '91.666667%'
|
|
401
|
+
};
|
|
402
|
+
Object.entries(fractions).forEach(([name, value]) => {
|
|
403
|
+
css += `.basis-${name} { flex-basis: ${value}; }\n`;
|
|
404
|
+
});
|
|
405
|
+
|
|
406
|
+
// Order
|
|
407
|
+
css += `.order-first { order: -9999; }\n`;
|
|
408
|
+
css += `.order-last { order: 9999; }\n`;
|
|
409
|
+
css += `.order-none { order: 0; }\n`;
|
|
410
|
+
for (let i = 1; i <= 12; i++) {
|
|
411
|
+
css += `.order-${i} { order: ${i}; }\n`;
|
|
412
|
+
}
|
|
413
|
+
|
|
385
414
|
// Justify (main axis)
|
|
415
|
+
css += `.justify-normal { justify-content: normal; }\n`;
|
|
386
416
|
css += `.justify-start { justify-content: flex-start; }\n`;
|
|
387
417
|
css += `.justify-end { justify-content: flex-end; }\n`;
|
|
388
418
|
css += `.justify-center { justify-content: center; }\n`;
|
|
389
419
|
css += `.justify-between { justify-content: space-between; }\n`;
|
|
390
420
|
css += `.justify-around { justify-content: space-around; }\n`;
|
|
391
421
|
css += `.justify-evenly { justify-content: space-evenly; }\n`;
|
|
422
|
+
css += `.justify-stretch { justify-content: stretch; }\n`;
|
|
423
|
+
|
|
424
|
+
// Content alignment
|
|
425
|
+
css += `.content-normal { align-content: normal; }\n`;
|
|
426
|
+
css += `.content-center { align-content: center; }\n`;
|
|
427
|
+
css += `.content-start { align-content: flex-start; }\n`;
|
|
428
|
+
css += `.content-end { align-content: flex-end; }\n`;
|
|
429
|
+
css += `.content-between { align-content: space-between; }\n`;
|
|
430
|
+
css += `.content-around { align-content: space-around; }\n`;
|
|
431
|
+
css += `.content-evenly { align-content: space-evenly; }\n`;
|
|
432
|
+
css += `.content-baseline { align-content: baseline; }\n`;
|
|
433
|
+
css += `.content-stretch { align-content: stretch; }\n`;
|
|
392
434
|
|
|
393
435
|
// Items (cross axis)
|
|
394
436
|
css += `.items-start { align-items: flex-start; }\n`;
|
|
@@ -398,11 +440,32 @@ function generateFlexboxUtilities(spacing) {
|
|
|
398
440
|
css += `.items-stretch { align-items: stretch; }\n`;
|
|
399
441
|
|
|
400
442
|
// Self alignment
|
|
443
|
+
css += `.self-auto { align-self: auto; }\n`;
|
|
401
444
|
css += `.self-start { align-self: flex-start; }\n`;
|
|
402
445
|
css += `.self-end { align-self: flex-end; }\n`;
|
|
403
446
|
css += `.self-center { align-self: center; }\n`;
|
|
404
447
|
css += `.self-stretch { align-self: stretch; }\n`;
|
|
405
|
-
css += `.self-
|
|
448
|
+
css += `.self-baseline { align-self: baseline; }\n`;
|
|
449
|
+
|
|
450
|
+
// Place utilities
|
|
451
|
+
css += `.place-content-center { place-content: center; }\n`;
|
|
452
|
+
css += `.place-content-start { place-content: start; }\n`;
|
|
453
|
+
css += `.place-content-end { place-content: end; }\n`;
|
|
454
|
+
css += `.place-content-between { place-content: space-between; }\n`;
|
|
455
|
+
css += `.place-content-around { place-content: space-around; }\n`;
|
|
456
|
+
css += `.place-content-evenly { place-content: space-evenly; }\n`;
|
|
457
|
+
css += `.place-content-baseline { place-content: baseline; }\n`;
|
|
458
|
+
css += `.place-content-stretch { place-content: stretch; }\n`;
|
|
459
|
+
css += `.place-items-start { place-items: start; }\n`;
|
|
460
|
+
css += `.place-items-end { place-items: end; }\n`;
|
|
461
|
+
css += `.place-items-center { place-items: center; }\n`;
|
|
462
|
+
css += `.place-items-baseline { place-items: baseline; }\n`;
|
|
463
|
+
css += `.place-items-stretch { place-items: stretch; }\n`;
|
|
464
|
+
css += `.place-self-auto { place-self: auto; }\n`;
|
|
465
|
+
css += `.place-self-start { place-self: start; }\n`;
|
|
466
|
+
css += `.place-self-end { place-self: end; }\n`;
|
|
467
|
+
css += `.place-self-center { place-self: center; }\n`;
|
|
468
|
+
css += `.place-self-stretch { place-self: stretch; }\n`;
|
|
406
469
|
|
|
407
470
|
css += `\n`;
|
|
408
471
|
return css;
|
|
@@ -415,45 +478,59 @@ function generateFlexboxUtilities(spacing) {
|
|
|
415
478
|
function generateGridUtilities(spacing) {
|
|
416
479
|
let css = `/* Grid */\n`;
|
|
417
480
|
|
|
418
|
-
// Note: .grid is already generated in displayUtilities(), removed duplicate here
|
|
419
481
|
css += `.inline-grid { display: inline-grid; }\n`;
|
|
420
482
|
|
|
421
|
-
|
|
483
|
+
css += `.grid-cols-none { grid-template-columns: none; }\n`;
|
|
484
|
+
css += `.grid-cols-subgrid { grid-template-columns: subgrid; }\n`;
|
|
422
485
|
for (let i = 1; i <= 12; i++) {
|
|
423
486
|
css += `.grid-cols-${i} { grid-template-columns: repeat(${i}, minmax(0, 1fr)); }\n`;
|
|
424
487
|
}
|
|
425
488
|
|
|
426
|
-
|
|
489
|
+
css += `.grid-rows-none { grid-template-rows: none; }\n`;
|
|
490
|
+
css += `.grid-rows-subgrid { grid-template-rows: subgrid; }\n`;
|
|
491
|
+
for (let i = 1; i <= 12; i++) {
|
|
492
|
+
css += `.grid-rows-${i} { grid-template-rows: repeat(${i}, minmax(0, 1fr)); }\n`;
|
|
493
|
+
}
|
|
494
|
+
|
|
427
495
|
for (let i = 1; i <= 12; i++) {
|
|
428
496
|
css += `.col-span-${i} { grid-column: span ${i} / span ${i}; }\n`;
|
|
429
497
|
}
|
|
430
498
|
css += `.col-span-full { grid-column: 1 / -1; }\n`;
|
|
431
|
-
|
|
432
|
-
// Column start/end
|
|
499
|
+
css += `.col-auto { grid-column: auto; }\n`;
|
|
433
500
|
for (let i = 1; i <= 13; i++) {
|
|
434
501
|
css += `.col-start-${i} { grid-column-start: ${i}; }\n`;
|
|
435
502
|
css += `.col-end-${i} { grid-column-end: ${i}; }\n`;
|
|
436
503
|
}
|
|
504
|
+
css += `.col-start-auto { grid-column-start: auto; }\n`;
|
|
505
|
+
css += `.col-end-auto { grid-column-end: auto; }\n`;
|
|
437
506
|
|
|
438
|
-
|
|
439
|
-
for (let i = 1; i <= 6; i++) {
|
|
507
|
+
for (let i = 1; i <= 12; i++) {
|
|
440
508
|
css += `.row-span-${i} { grid-row: span ${i} / span ${i}; }\n`;
|
|
441
509
|
}
|
|
442
510
|
css += `.row-span-full { grid-row: 1 / -1; }\n`;
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
for (let i = 1; i <= 6; i++) {
|
|
511
|
+
css += `.row-auto { grid-row: auto; }\n`;
|
|
512
|
+
for (let i = 1; i <= 13; i++) {
|
|
446
513
|
css += `.row-start-${i} { grid-row-start: ${i}; }\n`;
|
|
447
514
|
css += `.row-end-${i} { grid-row-end: ${i}; }\n`;
|
|
448
515
|
}
|
|
516
|
+
css += `.row-start-auto { grid-row-start: auto; }\n`;
|
|
517
|
+
css += `.row-end-auto { grid-row-end: auto; }\n`;
|
|
518
|
+
|
|
519
|
+
css += `.grid-flow-row { grid-auto-flow: row; }\n`;
|
|
520
|
+
css += `.grid-flow-col { grid-auto-flow: column; }\n`;
|
|
521
|
+
css += `.grid-flow-dense { grid-auto-flow: dense; }\n`;
|
|
522
|
+
css += `.grid-flow-row-dense { grid-auto-flow: row dense; }\n`;
|
|
523
|
+
css += `.grid-flow-col-dense { grid-auto-flow: column dense; }\n`;
|
|
449
524
|
|
|
450
|
-
// Auto flow
|
|
451
525
|
css += `.auto-cols-auto { grid-auto-columns: auto; }\n`;
|
|
526
|
+
css += `.auto-cols-min { grid-auto-columns: min-content; }\n`;
|
|
527
|
+
css += `.auto-cols-max { grid-auto-columns: max-content; }\n`;
|
|
452
528
|
css += `.auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }\n`;
|
|
453
529
|
css += `.auto-rows-auto { grid-auto-rows: auto; }\n`;
|
|
530
|
+
css += `.auto-rows-min { grid-auto-rows: min-content; }\n`;
|
|
531
|
+
css += `.auto-rows-max { grid-auto-rows: max-content; }\n`;
|
|
454
532
|
css += `.auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }\n`;
|
|
455
533
|
|
|
456
|
-
// Gap
|
|
457
534
|
Object.entries(spacing).forEach(([key, value]) => {
|
|
458
535
|
const escaped = escapeClassName(key);
|
|
459
536
|
css += `.gap-${escaped} { gap: ${value}; }\n`;
|
|
@@ -472,57 +549,76 @@ function generateGridUtilities(spacing) {
|
|
|
472
549
|
function generateTypographyUtilities(config) {
|
|
473
550
|
let css = `/* Typography */\n`;
|
|
474
551
|
|
|
475
|
-
// Font sizes
|
|
476
552
|
config.typography.fontSizes.forEach(fontSize => {
|
|
477
553
|
css += `.text-${fontSize.name} { font-size: var(--text-${fontSize.name}); line-height: ${fontSize.lineHeight}; }\n`;
|
|
478
554
|
});
|
|
479
555
|
|
|
480
|
-
// Font weights
|
|
481
556
|
Object.entries(config.typography.fontWeights).forEach(([name, weight]) => {
|
|
482
557
|
css += `.font-${name} { font-weight: ${weight}; }\n`;
|
|
483
558
|
});
|
|
484
559
|
|
|
485
|
-
|
|
560
|
+
css += `.italic { font-style: italic; }\n`;
|
|
561
|
+
css += `.not-italic { font-style: normal; }\n`;
|
|
562
|
+
|
|
486
563
|
css += `.text-left { text-align: left; }\n`;
|
|
487
564
|
css += `.text-center { text-align: center; }\n`;
|
|
488
565
|
css += `.text-right { text-align: right; }\n`;
|
|
489
566
|
css += `.text-justify { text-align: justify; }\n`;
|
|
567
|
+
css += `.text-start { text-align: start; }\n`;
|
|
568
|
+
css += `.text-end { text-align: end; }\n`;
|
|
490
569
|
|
|
491
|
-
// Text wrapping (.truncate lives in overflowUtilities in generators.js — not duplicated here)
|
|
492
|
-
css += `.whitespace-nowrap { white-space: nowrap; }\n`;
|
|
493
570
|
css += `.whitespace-normal { white-space: normal; }\n`;
|
|
494
|
-
css += `.
|
|
571
|
+
css += `.whitespace-nowrap { white-space: nowrap; }\n`;
|
|
572
|
+
css += `.whitespace-pre { white-space: pre; }\n`;
|
|
573
|
+
css += `.whitespace-pre-line { white-space: pre-line; }\n`;
|
|
574
|
+
css += `.whitespace-pre-wrap { white-space: pre-wrap; }\n`;
|
|
575
|
+
css += `.whitespace-break-spaces { white-space: break-spaces; }\n`;
|
|
576
|
+
css += `.text-wrap { text-wrap: wrap; }\n`;
|
|
577
|
+
css += `.text-nowrap { text-wrap: nowrap; }\n`;
|
|
578
|
+
css += `.text-balance { text-wrap: balance; }\n`;
|
|
579
|
+
css += `.text-pretty { text-wrap: pretty; }\n`;
|
|
580
|
+
css += `.break-normal { overflow-wrap: normal; word-break: normal; }\n`;
|
|
581
|
+
css += `.break-words { overflow-wrap: break-word; }\n`;
|
|
495
582
|
css += `.break-all { word-break: break-all; }\n`;
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
css += `.
|
|
583
|
+
css += `.break-keep { word-break: keep-all; }\n`;
|
|
584
|
+
css += `.hyphens-none { hyphens: none; }\n`;
|
|
585
|
+
css += `.hyphens-manual { hyphens: manual; }\n`;
|
|
586
|
+
css += `.hyphens-auto { hyphens: auto; }\n`;
|
|
587
|
+
|
|
588
|
+
css += `.leading-none { line-height: 1; }\n`;
|
|
589
|
+
css += `.leading-tight { line-height: 1.25; }\n`;
|
|
590
|
+
css += `.leading-snug { line-height: 1.375; }\n`;
|
|
499
591
|
css += `.leading-normal { line-height: 1.5; }\n`;
|
|
500
|
-
css += `.leading-relaxed { line-height: 1.
|
|
592
|
+
css += `.leading-relaxed { line-height: 1.625; }\n`;
|
|
593
|
+
css += `.leading-loose { line-height: 2; }\n`;
|
|
594
|
+
css += `.text-display { font-size: clamp(2.5rem, 6vw, 4rem); }\n`;
|
|
501
595
|
|
|
502
|
-
// Letter spacing
|
|
503
596
|
css += `.tracking-tighter { letter-spacing: -0.05em; }\n`;
|
|
504
|
-
css += `.tracking-tight { letter-spacing: -0.
|
|
597
|
+
css += `.tracking-tight { letter-spacing: -0.025em; }\n`;
|
|
505
598
|
css += `.tracking-normal { letter-spacing: 0em; }\n`;
|
|
506
|
-
css += `.tracking-wide { letter-spacing: 0.
|
|
599
|
+
css += `.tracking-wide { letter-spacing: 0.025em; }\n`;
|
|
507
600
|
css += `.tracking-wider { letter-spacing: 0.05em; }\n`;
|
|
508
601
|
css += `.tracking-widest { letter-spacing: 0.1em; }\n`;
|
|
509
602
|
|
|
510
|
-
|
|
511
|
-
css += `.
|
|
512
|
-
css += `.
|
|
513
|
-
css += `.
|
|
603
|
+
css += `.underline { text-decoration-line: underline; }\n`;
|
|
604
|
+
css += `.overline { text-decoration-line: overline; }\n`;
|
|
605
|
+
css += `.line-through { text-decoration-line: line-through; }\n`;
|
|
606
|
+
css += `.no-underline { text-decoration-line: none; }\n`;
|
|
607
|
+
css += `.decoration-solid { text-decoration-style: solid; }\n`;
|
|
608
|
+
css += `.decoration-double { text-decoration-style: double; }\n`;
|
|
609
|
+
css += `.decoration-dotted { text-decoration-style: dotted; }\n`;
|
|
610
|
+
css += `.decoration-dashed { text-decoration-style: dashed; }\n`;
|
|
611
|
+
css += `.decoration-wavy { text-decoration-style: wavy; }\n`;
|
|
514
612
|
css += `.underline-offset-auto { text-underline-offset: auto; }\n`;
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
css += `.underline-offset-8 { text-underline-offset: 8px; }\n`;
|
|
613
|
+
[0, 1, 2, 4, 8].forEach(value => {
|
|
614
|
+
css += `.underline-offset-${value} { text-underline-offset: ${value}px; }\n`;
|
|
615
|
+
});
|
|
519
616
|
css += `.decoration-auto { text-decoration-thickness: auto; }\n`;
|
|
520
617
|
css += `.decoration-from-font { text-decoration-thickness: from-font; }\n`;
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
618
|
+
[0, 1, 2, 4, 8].forEach(value => {
|
|
619
|
+
css += `.decoration-${value} { text-decoration-thickness: ${value}px; }\n`;
|
|
620
|
+
});
|
|
524
621
|
|
|
525
|
-
// Font variant numeric
|
|
526
622
|
css += `.normal-nums { font-variant-numeric: normal; }\n`;
|
|
527
623
|
css += `.ordinal { font-variant-numeric: ordinal; }\n`;
|
|
528
624
|
css += `.slashed-zero { font-variant-numeric: slashed-zero; }\n`;
|
|
@@ -533,17 +629,19 @@ function generateTypographyUtilities(config) {
|
|
|
533
629
|
css += `.diagonal-fractions { font-variant-numeric: diagonal-fractions; }\n`;
|
|
534
630
|
css += `.stacked-fractions { font-variant-numeric: stacked-fractions; }\n`;
|
|
535
631
|
|
|
536
|
-
// Text transform
|
|
537
632
|
css += `.uppercase { text-transform: uppercase; }\n`;
|
|
538
633
|
css += `.lowercase { text-transform: lowercase; }\n`;
|
|
539
634
|
css += `.capitalize { text-transform: capitalize; }\n`;
|
|
635
|
+
css += `.normal-case { text-transform: none; }\n`;
|
|
540
636
|
|
|
541
|
-
// Font family utilities
|
|
542
637
|
css += `.font-sans { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }\n`;
|
|
543
638
|
css += `.font-serif { font-family: Georgia, "Times New Roman", serif; }\n`;
|
|
544
639
|
css += `.font-mono { font-family: "Menlo", "Monaco", "Courier New", monospace; }\n`;
|
|
545
640
|
css += `.font-inter { font-family: "Inter", system-ui, sans-serif; }\n`;
|
|
546
641
|
css += `.font-lexend { font-family: "Lexend", system-ui, sans-serif; }\n`;
|
|
642
|
+
css += `.font-dm-sans { font-family: "DM Sans", system-ui, sans-serif; }\n`;
|
|
643
|
+
css += `.font-nunito { font-family: "Nunito", system-ui, sans-serif; }\n`;
|
|
644
|
+
css += `.font-atkinson { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }\n`;
|
|
547
645
|
|
|
548
646
|
css += `\n`;
|
|
549
647
|
return css;
|
|
@@ -556,53 +654,74 @@ function generateTypographyUtilities(config) {
|
|
|
556
654
|
function generateBorderUtilities(config) {
|
|
557
655
|
let css = `/* Borders & Radius */\n`;
|
|
558
656
|
|
|
559
|
-
// Border widths from config
|
|
560
657
|
const borderWidths = config.spacing.borderWidths || [0, 2, 4, 8];
|
|
561
658
|
|
|
562
|
-
|
|
563
|
-
css += `.border { border-width: 1px; }\n`;
|
|
659
|
+
css += `.border { border-width: 1px; border-style: solid; }\n`;
|
|
564
660
|
borderWidths.forEach(width => {
|
|
565
661
|
css += `.border-${width} { border-width: ${width}px; }\n`;
|
|
566
662
|
});
|
|
567
663
|
|
|
568
|
-
|
|
664
|
+
const sides = {
|
|
665
|
+
t: 'top', r: 'right', b: 'bottom', l: 'left',
|
|
666
|
+
x: ['left', 'right'], y: ['top', 'bottom'],
|
|
667
|
+
s: 'inline-start', e: 'inline-end'
|
|
668
|
+
};
|
|
569
669
|
|
|
570
|
-
|
|
571
|
-
|
|
670
|
+
Object.entries(sides).forEach(([side, value]) => {
|
|
671
|
+
if (Array.isArray(value)) {
|
|
672
|
+
css += `.border-${side} { border-${value[0]}-width: 1px; border-${value[1]}-width: 1px; border-${value[0]}-style: solid; border-${value[1]}-style: solid; }\n`;
|
|
673
|
+
} else {
|
|
674
|
+
css += `.border-${side} { border-${value}-width: 1px; border-${value}-style: solid; }\n`;
|
|
675
|
+
}
|
|
572
676
|
});
|
|
573
677
|
|
|
574
678
|
borderWidths.forEach(width => {
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
679
|
+
Object.entries(sides).forEach(([side, value]) => {
|
|
680
|
+
if (Array.isArray(value)) {
|
|
681
|
+
css += `.border-${side}-${width} { border-${value[0]}-width: ${width}px; border-${value[1]}-width: ${width}px; border-${value[0]}-style: solid; border-${value[1]}-style: solid; }\n`;
|
|
682
|
+
} else {
|
|
683
|
+
css += `.border-${side}-${width} { border-${value}-width: ${width}px; border-${value}-style: solid; }\n`;
|
|
684
|
+
}
|
|
578
685
|
});
|
|
579
686
|
});
|
|
580
687
|
|
|
581
|
-
// Border style
|
|
582
688
|
css += `.border-solid { border-style: solid; }\n`;
|
|
583
689
|
css += `.border-dashed { border-style: dashed; }\n`;
|
|
584
690
|
css += `.border-dotted { border-style: dotted; }\n`;
|
|
585
691
|
css += `.border-double { border-style: double; }\n`;
|
|
692
|
+
css += `.border-hidden { border-style: hidden; }\n`;
|
|
586
693
|
css += `.border-none { border-style: none; }\n`;
|
|
694
|
+
css += `.border-transparent { border-color: transparent; }\n`;
|
|
695
|
+
css += `.border-current { border-color: currentColor; }\n`;
|
|
696
|
+
css += `.border-black { border-color: #000000; }\n`;
|
|
697
|
+
css += `.border-white { border-color: #ffffff; }\n`;
|
|
587
698
|
|
|
588
|
-
// Border radius (base)
|
|
589
699
|
const baseRadius = config.spacing.borderRadius['base'] || '8px';
|
|
590
700
|
css += `.rounded { border-radius: ${baseRadius}; }\n`;
|
|
591
701
|
|
|
592
|
-
// Border radius (named)
|
|
593
702
|
Object.entries(config.spacing.borderRadius).forEach(([name, value]) => {
|
|
594
703
|
css += `.rounded-${name} { border-radius: ${value}; }\n`;
|
|
595
704
|
});
|
|
596
705
|
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
706
|
+
const radiusTargets = {
|
|
707
|
+
t: ['top-left', 'top-right'], r: ['top-right', 'bottom-right'],
|
|
708
|
+
b: ['bottom-right', 'bottom-left'], l: ['top-left', 'bottom-left'],
|
|
709
|
+
tl: ['top-left'], tr: ['top-right'], br: ['bottom-right'], bl: ['bottom-left']
|
|
710
|
+
};
|
|
711
|
+
|
|
712
|
+
Object.entries(radiusTargets).forEach(([side, corners]) => {
|
|
713
|
+
corners.forEach(corner => {
|
|
714
|
+
css += `.rounded-${side} { border-${corner}-radius: ${baseRadius}; }\n`;
|
|
715
|
+
});
|
|
716
|
+
});
|
|
717
|
+
|
|
718
|
+
Object.entries(config.spacing.borderRadius).forEach(([name, value]) => {
|
|
719
|
+
Object.entries(radiusTargets).forEach(([side, corners]) => {
|
|
720
|
+
corners.forEach(corner => {
|
|
721
|
+
css += `.rounded-${side}-${name} { border-${corner}-radius: ${value}; }\n`;
|
|
722
|
+
});
|
|
723
|
+
});
|
|
724
|
+
});
|
|
606
725
|
|
|
607
726
|
css += `\n`;
|
|
608
727
|
return css;
|
|
@@ -625,7 +744,8 @@ function generateBaseStyles(config) {
|
|
|
625
744
|
// Line height hints per size — keeps headings tighter than body text
|
|
626
745
|
const lineHeightMap = {
|
|
627
746
|
xs: '1.5', sm: '1.5', base: '1.6', lg: '1.6',
|
|
628
|
-
xl: '1.5', '2xl': '1.4', '3xl': '1.35', '4xl': '1.3'
|
|
747
|
+
xl: '1.5', '2xl': '1.4', '3xl': '1.35', '4xl': '1.3',
|
|
748
|
+
'5xl': '1.15', '6xl': '1.1', '7xl': '1.05', '8xl': '1', '9xl': '1'
|
|
629
749
|
};
|
|
630
750
|
|
|
631
751
|
let css = '\n /* Base element styles (from baseStyles in emily.config.json) */\n';
|
|
@@ -645,26 +765,29 @@ function generateBaseStyles(config) {
|
|
|
645
765
|
|
|
646
766
|
function generateColourUtilities(colours) {
|
|
647
767
|
let css = `/* Colours: Background, Text, Borders, Accents */\n`;
|
|
768
|
+
// Uses CSS custom properties rather than hardcoded hex so colour utilities
|
|
769
|
+
// can be overridden via variable redefinition (e.g. dark mode, theme layers).
|
|
770
|
+
// The hex values are still declared as --color-* tokens in @layer theme.
|
|
648
771
|
|
|
649
772
|
Object.entries(colours).forEach(([colourName, shades]) => {
|
|
650
773
|
// Background colours
|
|
651
|
-
Object.entries(shades).forEach(([shade
|
|
652
|
-
css += `.bg-${colourName}-${shade} { background-color:
|
|
774
|
+
Object.entries(shades).forEach(([shade]) => {
|
|
775
|
+
css += `.bg-${colourName}-${shade} { background-color: var(--color-${colourName}-${shade}); }\n`;
|
|
653
776
|
});
|
|
654
777
|
|
|
655
778
|
// Text colours
|
|
656
|
-
Object.entries(shades).forEach(([shade
|
|
657
|
-
css += `.text-${colourName}-${shade} { color:
|
|
779
|
+
Object.entries(shades).forEach(([shade]) => {
|
|
780
|
+
css += `.text-${colourName}-${shade} { color: var(--color-${colourName}-${shade}); }\n`;
|
|
658
781
|
});
|
|
659
782
|
|
|
660
783
|
// Border colours
|
|
661
|
-
Object.entries(shades).forEach(([shade
|
|
662
|
-
css += `.border-${colourName}-${shade} { border-color:
|
|
784
|
+
Object.entries(shades).forEach(([shade]) => {
|
|
785
|
+
css += `.border-${colourName}-${shade} { border-color: var(--color-${colourName}-${shade}); }\n`;
|
|
663
786
|
});
|
|
664
787
|
|
|
665
788
|
// Accent colours (for form elements like checkboxes, radio buttons)
|
|
666
|
-
Object.entries(shades).forEach(([shade
|
|
667
|
-
css += `.accent-${colourName}-${shade} { accent-color:
|
|
789
|
+
Object.entries(shades).forEach(([shade]) => {
|
|
790
|
+
css += `.accent-${colourName}-${shade} { accent-color: var(--color-${colourName}-${shade}); }\n`;
|
|
668
791
|
});
|
|
669
792
|
});
|
|
670
793
|
|
|
@@ -1044,7 +1167,7 @@ function buildFullFramework() {
|
|
|
1044
1167
|
background-color: #0d0c0b;
|
|
1045
1168
|
color: #e4e0db;
|
|
1046
1169
|
padding: 1.25rem;
|
|
1047
|
-
border-radius: 6px;
|
|
1170
|
+
border-radius: 0 0 6px;
|
|
1048
1171
|
overflow-x: auto;
|
|
1049
1172
|
font-family: "Menlo", "Monaco", "Courier New", monospace;
|
|
1050
1173
|
font-size: 0.875rem;
|
|
@@ -1180,8 +1303,10 @@ module.exports = {
|
|
|
1180
1303
|
generateSemanticColourUtilities,
|
|
1181
1304
|
generateTypographyUtilities,
|
|
1182
1305
|
generateSpacingUtilities,
|
|
1306
|
+
generateFlexboxUtilities,
|
|
1307
|
+
generateGridUtilities,
|
|
1183
1308
|
addStateVariants,
|
|
1184
1309
|
addResponsiveVariants,
|
|
1185
1310
|
generateFontCSS,
|
|
1186
1311
|
codeUtilities,
|
|
1187
|
-
};
|
|
1312
|
+
};
|
package/src/init.js
CHANGED
|
@@ -429,6 +429,9 @@ function createDefaultConfig({
|
|
|
429
429
|
base: "8px",
|
|
430
430
|
md: "12px",
|
|
431
431
|
lg: "16px",
|
|
432
|
+
xl: "20px",
|
|
433
|
+
"2xl": "24px",
|
|
434
|
+
"3xl": "32px",
|
|
432
435
|
full: "9999px",
|
|
433
436
|
},
|
|
434
437
|
},
|
|
@@ -453,14 +456,22 @@ function createDefaultConfig({
|
|
|
453
456
|
{ name: "2xl", value: "24px", lineHeight: 1.4 },
|
|
454
457
|
{ name: "3xl", value: "30px", lineHeight: 1.4 },
|
|
455
458
|
{ name: "4xl", value: "36px", lineHeight: 1.3 },
|
|
459
|
+
{ name: "5xl", value: "48px", lineHeight: 1.15 },
|
|
460
|
+
{ name: "6xl", value: "60px", lineHeight: 1.1 },
|
|
461
|
+
{ name: "7xl", value: "72px", lineHeight: 1.05 },
|
|
462
|
+
{ name: "8xl", value: "96px", lineHeight: 1 },
|
|
463
|
+
{ name: "9xl", value: "128px", lineHeight: 1 },
|
|
456
464
|
],
|
|
457
465
|
},
|
|
458
466
|
|
|
459
467
|
shadows: {
|
|
460
468
|
sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
|
|
461
469
|
base: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
|
462
|
-
md: "0
|
|
463
|
-
lg: "0
|
|
470
|
+
md: "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)",
|
|
471
|
+
lg: "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)",
|
|
472
|
+
xl: "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",
|
|
473
|
+
"2xl": "0 25px 50px rgba(0, 0, 0, 0.25)",
|
|
474
|
+
inner: "inset 0 2px 4px rgba(0, 0, 0, 0.06)",
|
|
464
475
|
none: "none",
|
|
465
476
|
},
|
|
466
477
|
|