@semanticus/semanticus-css 0.5.1 → 0.7.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/README.md +4 -4
- package/dist/semanticus-semantics.css +1 -1
- package/dist/semanticus-utilities.css +1 -1
- package/dist/semanticus-variants.css +1 -1
- package/dist/semanticus.css +2 -2
- package/package.json +1 -1
- package/src/semantics/_typography.css +15 -6
- package/src/utilities/colors/_background-colors.css +39 -7
- package/src/utilities/colors/_text-colors.css +108 -18
- package/src/variables/_all.css +6 -21
- package/src/variants/{_frame.css → _flow.css} +2 -2
- package/src/variants/modules.css +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semanticus/semanticus-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "lightweight CSS framework that prioritizes semantic HTML and ARIA-focused accessibility, with a small set of atomic utilities",
|
|
5
5
|
"author": "Joao Goncalves",
|
|
6
6
|
"style": "./dist/semanticus.css",
|
|
@@ -52,12 +52,21 @@ h6 {
|
|
|
52
52
|
font-family: var(--font-family);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
/* Headings - progressive lightness using color-mix */
|
|
56
|
+
h1 { --color-text: var(--color-heading-base); }
|
|
57
|
+
h2 { --color-text: color-mix(in srgb, var(--color-heading-base), white 12%); }
|
|
58
|
+
h3 { --color-text: color-mix(in srgb, var(--color-heading-base), white 22%); }
|
|
59
|
+
h4 { --color-text: color-mix(in srgb, var(--color-heading-base), white 32%); }
|
|
60
|
+
h5 { --color-text: color-mix(in srgb, var(--color-heading-base), white 45%); }
|
|
61
|
+
h6 { --color-text: color-mix(in srgb, var(--color-heading-base), white 55%); }
|
|
62
|
+
|
|
63
|
+
/* Dark mode headings - base is lightest, mix in black for lower levels */
|
|
64
|
+
[data-theme="dark"] h1 { --color-text: var(--color-heading-base); }
|
|
65
|
+
[data-theme="dark"] h2 { --color-text: color-mix(in srgb, var(--color-heading-base), black 8%); }
|
|
66
|
+
[data-theme="dark"] h3 { --color-text: color-mix(in srgb, var(--color-heading-base), black 18%); }
|
|
67
|
+
[data-theme="dark"] h4 { --color-text: color-mix(in srgb, var(--color-heading-base), black 28%); }
|
|
68
|
+
[data-theme="dark"] h5 { --color-text: color-mix(in srgb, var(--color-heading-base), black 38%); }
|
|
69
|
+
[data-theme="dark"] h6 { --color-text: color-mix(in srgb, var(--color-heading-base), black 48%); }
|
|
61
70
|
|
|
62
71
|
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul, hr) ~ :is(h1, h2, h3, h4, h5, h6) {
|
|
63
72
|
margin-top: var(--typography-spacing-top);
|
|
@@ -1,49 +1,56 @@
|
|
|
1
1
|
.text-bg-primary {
|
|
2
2
|
--color-text: var(--color-primary-inverse) !important;
|
|
3
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
3
4
|
|
|
4
|
-
color: var(--color-
|
|
5
|
+
color: var(--color-text) !important;
|
|
5
6
|
background-color: rgba(var(--primary-rgb), var(--bg-opacity, 1)) !important;
|
|
6
7
|
}
|
|
7
8
|
|
|
8
9
|
.text-bg-secondary {
|
|
9
10
|
--color-text: var(--color-secondary-inverse) !important;
|
|
11
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
10
12
|
|
|
11
|
-
color: var(--color-
|
|
13
|
+
color: var(--color-text) !important;
|
|
12
14
|
background-color: rgba(var(--secondary-rgb), var(--bg-opacity, 1)) !important;
|
|
13
15
|
}
|
|
14
16
|
|
|
15
17
|
.text-bg-success {
|
|
16
18
|
--color-text: var(--color-success-inverse) !important;
|
|
19
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
17
20
|
|
|
18
|
-
color: var(--color-
|
|
21
|
+
color: var(--color-text) !important;
|
|
19
22
|
background-color: rgba(var(--success-rgb), var(--bg-opacity, 1)) !important;
|
|
20
23
|
}
|
|
21
24
|
|
|
22
25
|
.text-bg-info {
|
|
23
26
|
--color-text: var(--color-info-inverse) !important;
|
|
27
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
24
28
|
|
|
25
|
-
color: var(--color-
|
|
29
|
+
color: var(--color-text) !important;
|
|
26
30
|
background-color: rgba(var(--info-rgb), var(--bg-opacity, 1)) !important;
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
.text-bg-warning {
|
|
30
34
|
--color-text: var(--color-warning-inverse) !important;
|
|
35
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
31
36
|
|
|
32
|
-
color: var(--color-
|
|
37
|
+
color: var(--color-text) !important;
|
|
33
38
|
background-color: rgba(var(--warning-rgb), var(--bg-opacity, 1)) !important;
|
|
34
39
|
}
|
|
35
40
|
|
|
36
41
|
.text-bg-danger {
|
|
37
42
|
--color-text: var(--color-danger-inverse) !important;
|
|
43
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
38
44
|
|
|
39
|
-
color: var(--color-
|
|
45
|
+
color: var(--color-text) !important;
|
|
40
46
|
background-color: rgba(var(--danger-rgb), var(--bg-opacity, 1)) !important;
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
.text-bg-contrast {
|
|
44
50
|
--color-text: var(--color-contrast-inverse) !important;
|
|
51
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
45
52
|
|
|
46
|
-
color: var(--color-
|
|
53
|
+
color: var(--color-text) !important;
|
|
47
54
|
background-color: rgba(var(--contrast-rgb), var(--bg-opacity, 1)) !important;
|
|
48
55
|
}
|
|
49
56
|
|
|
@@ -207,3 +214,28 @@
|
|
|
207
214
|
.bg-gradient {
|
|
208
215
|
background-image: var(--gradient) !important;
|
|
209
216
|
}
|
|
217
|
+
|
|
218
|
+
/* Dark mode: headings should be lighter than inverse text (mix in white) */
|
|
219
|
+
@media (prefers-color-scheme: dark) {
|
|
220
|
+
.text-bg-primary,
|
|
221
|
+
.text-bg-secondary,
|
|
222
|
+
.text-bg-success,
|
|
223
|
+
.text-bg-info,
|
|
224
|
+
.text-bg-warning,
|
|
225
|
+
.text-bg-danger,
|
|
226
|
+
.text-bg-contrast {
|
|
227
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
[data-theme="dark"] {
|
|
232
|
+
.text-bg-primary,
|
|
233
|
+
.text-bg-secondary,
|
|
234
|
+
.text-bg-success,
|
|
235
|
+
.text-bg-info,
|
|
236
|
+
.text-bg-warning,
|
|
237
|
+
.text-bg-danger,
|
|
238
|
+
.text-bg-contrast {
|
|
239
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
|
|
240
|
+
}
|
|
241
|
+
}
|
|
@@ -88,68 +88,90 @@
|
|
|
88
88
|
|
|
89
89
|
.text-primary {
|
|
90
90
|
--text-opacity: 1;
|
|
91
|
+
--color-text: rgba(var(--primary-rgb), var(--text-opacity)) !important;
|
|
92
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
91
93
|
|
|
92
|
-
color:
|
|
94
|
+
color: var(--color-text) !important;
|
|
93
95
|
}
|
|
94
96
|
|
|
95
97
|
.text-secondary {
|
|
96
98
|
--text-opacity: 1;
|
|
99
|
+
--color-text: rgba(var(--secondary-rgb), var(--text-opacity)) !important;
|
|
100
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
97
101
|
|
|
98
|
-
color:
|
|
102
|
+
color: var(--color-text) !important;
|
|
99
103
|
}
|
|
100
104
|
|
|
101
105
|
.text-success {
|
|
102
106
|
--text-opacity: 1;
|
|
107
|
+
--color-text: rgba(var(--success-rgb), var(--text-opacity)) !important;
|
|
108
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
103
109
|
|
|
104
|
-
color:
|
|
110
|
+
color: var(--color-text) !important;
|
|
105
111
|
}
|
|
106
112
|
|
|
107
113
|
.text-info {
|
|
108
114
|
--text-opacity: 1;
|
|
115
|
+
--color-text: rgba(var(--info-rgb), var(--text-opacity)) !important;
|
|
116
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
109
117
|
|
|
110
|
-
color:
|
|
118
|
+
color: var(--color-text) !important;
|
|
111
119
|
}
|
|
112
120
|
|
|
113
121
|
.text-warning {
|
|
114
122
|
--text-opacity: 1;
|
|
123
|
+
--color-text: rgba(var(--warning-rgb), var(--text-opacity)) !important;
|
|
124
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
115
125
|
|
|
116
|
-
color:
|
|
126
|
+
color: var(--color-text) !important;
|
|
117
127
|
}
|
|
118
128
|
|
|
119
129
|
.text-danger {
|
|
120
130
|
--text-opacity: 1;
|
|
131
|
+
--color-text: rgba(var(--danger-rgb), var(--text-opacity)) !important;
|
|
132
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
121
133
|
|
|
122
|
-
color:
|
|
134
|
+
color: var(--color-text) !important;
|
|
123
135
|
}
|
|
124
136
|
|
|
125
137
|
.text-contrast {
|
|
126
138
|
--text-opacity: 1;
|
|
139
|
+
--color-text: rgba(var(--contrast-rgb), var(--text-opacity)) !important;
|
|
140
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
127
141
|
|
|
128
|
-
color:
|
|
142
|
+
color: var(--color-text) !important;
|
|
129
143
|
}
|
|
130
144
|
|
|
131
145
|
.text-body {
|
|
132
146
|
--text-opacity: 1;
|
|
147
|
+
--color-text: rgba(var(--body-color-rgb), var(--text-opacity)) !important;
|
|
148
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
133
149
|
|
|
134
|
-
color:
|
|
150
|
+
color: var(--color-text) !important;
|
|
135
151
|
}
|
|
136
152
|
|
|
137
153
|
.text-muted {
|
|
138
154
|
--text-opacity: 1;
|
|
155
|
+
--color-text: var(--secondary-color) !important;
|
|
156
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
139
157
|
|
|
140
|
-
color: var(--
|
|
158
|
+
color: var(--color-text) !important;
|
|
141
159
|
}
|
|
142
160
|
|
|
143
161
|
.text-body-secondary {
|
|
144
162
|
--text-opacity: 1;
|
|
163
|
+
--color-text: var(--secondary-color) !important;
|
|
164
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
145
165
|
|
|
146
|
-
color: var(--
|
|
166
|
+
color: var(--color-text) !important;
|
|
147
167
|
}
|
|
148
168
|
|
|
149
169
|
.text-body-emphasis {
|
|
150
170
|
--text-opacity: 1;
|
|
171
|
+
--color-text: var(--emphasis-color) !important;
|
|
172
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
151
173
|
|
|
152
|
-
color: var(--
|
|
174
|
+
color: var(--color-text) !important;
|
|
153
175
|
}
|
|
154
176
|
|
|
155
177
|
.text-reset {
|
|
@@ -175,31 +197,52 @@
|
|
|
175
197
|
}
|
|
176
198
|
|
|
177
199
|
.text-primary-emphasis {
|
|
178
|
-
color: var(--primary-text-emphasis) !important;
|
|
200
|
+
--color-text: var(--primary-text-emphasis) !important;
|
|
201
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
202
|
+
|
|
203
|
+
color: var(--color-text) !important;
|
|
179
204
|
}
|
|
180
205
|
|
|
181
206
|
.text-secondary-emphasis {
|
|
182
|
-
color: var(--secondary-text-emphasis) !important;
|
|
207
|
+
--color-text: var(--secondary-text-emphasis) !important;
|
|
208
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
209
|
+
|
|
210
|
+
color: var(--color-text) !important;
|
|
183
211
|
}
|
|
184
212
|
|
|
185
213
|
.text-success-emphasis {
|
|
186
|
-
color: var(--success-text-emphasis) !important;
|
|
214
|
+
--color-text: var(--success-text-emphasis) !important;
|
|
215
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
216
|
+
|
|
217
|
+
color: var(--color-text) !important;
|
|
187
218
|
}
|
|
188
219
|
|
|
189
220
|
.text-info-emphasis {
|
|
190
|
-
color: var(--info-text-emphasis) !important;
|
|
221
|
+
--color-text: var(--info-text-emphasis) !important;
|
|
222
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
223
|
+
|
|
224
|
+
color: var(--color-text) !important;
|
|
191
225
|
}
|
|
192
226
|
|
|
193
227
|
.text-warning-emphasis {
|
|
194
|
-
color: var(--warning-text-emphasis) !important;
|
|
228
|
+
--color-text: var(--warning-text-emphasis) !important;
|
|
229
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
230
|
+
|
|
231
|
+
color: var(--color-text) !important;
|
|
195
232
|
}
|
|
196
233
|
|
|
197
234
|
.text-danger-emphasis {
|
|
198
|
-
color: var(--danger-text-emphasis) !important;
|
|
235
|
+
--color-text: var(--danger-text-emphasis) !important;
|
|
236
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
237
|
+
|
|
238
|
+
color: var(--color-text) !important;
|
|
199
239
|
}
|
|
200
240
|
|
|
201
241
|
.text-contrast-emphasis {
|
|
202
|
-
color: var(--contrast-text-emphasis) !important;
|
|
242
|
+
--color-text: var(--contrast-text-emphasis) !important;
|
|
243
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
|
|
244
|
+
|
|
245
|
+
color: var(--color-text) !important;
|
|
203
246
|
}
|
|
204
247
|
|
|
205
248
|
.link-opacity-10 {
|
|
@@ -369,3 +412,50 @@
|
|
|
369
412
|
.link-underline-opacity-100-hover:hover {
|
|
370
413
|
--link-underline-opacity: 1;
|
|
371
414
|
}
|
|
415
|
+
|
|
416
|
+
/* Dark mode: headings should be lighter than text color (mix in white) */
|
|
417
|
+
@media (prefers-color-scheme: dark) {
|
|
418
|
+
.text-primary,
|
|
419
|
+
.text-secondary,
|
|
420
|
+
.text-success,
|
|
421
|
+
.text-info,
|
|
422
|
+
.text-warning,
|
|
423
|
+
.text-danger,
|
|
424
|
+
.text-contrast,
|
|
425
|
+
.text-body,
|
|
426
|
+
.text-muted,
|
|
427
|
+
.text-body-secondary,
|
|
428
|
+
.text-body-emphasis,
|
|
429
|
+
.text-primary-emphasis,
|
|
430
|
+
.text-secondary-emphasis,
|
|
431
|
+
.text-success-emphasis,
|
|
432
|
+
.text-info-emphasis,
|
|
433
|
+
.text-warning-emphasis,
|
|
434
|
+
.text-danger-emphasis,
|
|
435
|
+
.text-contrast-emphasis {
|
|
436
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
[data-theme="dark"] {
|
|
441
|
+
.text-primary,
|
|
442
|
+
.text-secondary,
|
|
443
|
+
.text-success,
|
|
444
|
+
.text-info,
|
|
445
|
+
.text-warning,
|
|
446
|
+
.text-danger,
|
|
447
|
+
.text-contrast,
|
|
448
|
+
.text-body,
|
|
449
|
+
.text-muted,
|
|
450
|
+
.text-body-secondary,
|
|
451
|
+
.text-body-emphasis,
|
|
452
|
+
.text-primary-emphasis,
|
|
453
|
+
.text-secondary-emphasis,
|
|
454
|
+
.text-success-emphasis,
|
|
455
|
+
.text-info-emphasis,
|
|
456
|
+
.text-warning-emphasis,
|
|
457
|
+
.text-danger-emphasis,
|
|
458
|
+
.text-contrast-emphasis {
|
|
459
|
+
--color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
|
|
460
|
+
}
|
|
461
|
+
}
|
package/src/variables/_all.css
CHANGED
|
@@ -89,13 +89,8 @@
|
|
|
89
89
|
--shadow-md: 0.0625rem 0.125rem 0.5rem rgba(129, 145, 181, 0.15); /* Medium elevation – e.g. dropdowns */
|
|
90
90
|
--shadow-lg: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); /* Multi-layer realistic shadow – e.g. cards, modals */
|
|
91
91
|
|
|
92
|
-
/* Headings
|
|
93
|
-
--color-
|
|
94
|
-
--color-h2: #373c44;
|
|
95
|
-
--color-h3: #424751;
|
|
96
|
-
--color-h4: #4d535e;
|
|
97
|
-
--color-h5: #5c6370;
|
|
98
|
-
--color-h6: #646b79;
|
|
92
|
+
/* Headings - base color for progressive lightness via color-mix */
|
|
93
|
+
--color-heading-base: #2d3138;
|
|
99
94
|
|
|
100
95
|
/* Mark & Text – colors for <mark>, <ins>, and <del> elements */
|
|
101
96
|
--color-mark-bg: rgb(252.5, 230.5, 191.5); /* Background highlight for <mark> */
|
|
@@ -285,13 +280,8 @@
|
|
|
285
280
|
--shadow-md: 0.0625rem 0.125rem 0.5rem rgba(7, 8.5, 12, 0.15);
|
|
286
281
|
--shadow-lg: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
|
|
287
282
|
|
|
288
|
-
/* Headings */
|
|
289
|
-
--color-
|
|
290
|
-
--color-h2: #e0e3e7;
|
|
291
|
-
--color-h3: #c2c7d0;
|
|
292
|
-
--color-h4: #b3b9c5;
|
|
293
|
-
--color-h5: #a4acba;
|
|
294
|
-
--color-h6: #8891a4;
|
|
283
|
+
/* Headings - base color for progressive lightness via color-mix */
|
|
284
|
+
--color-heading-base: #f0f1f3;
|
|
295
285
|
|
|
296
286
|
/* Mark & Text */
|
|
297
287
|
--color-mark-bg: #014063;
|
|
@@ -467,13 +457,8 @@
|
|
|
467
457
|
--shadow-md: 0.0625rem 0.125rem 0.5rem rgba(7, 8.5, 12, 0.15);
|
|
468
458
|
--shadow-lg: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
|
|
469
459
|
|
|
470
|
-
/* Headings */
|
|
471
|
-
--color-
|
|
472
|
-
--color-h2: #e0e3e7;
|
|
473
|
-
--color-h3: #c2c7d0;
|
|
474
|
-
--color-h4: #b3b9c5;
|
|
475
|
-
--color-h5: #a4acba;
|
|
476
|
-
--color-h6: #8891a4;
|
|
460
|
+
/* Headings - base color for progressive lightness via color-mix */
|
|
461
|
+
--color-heading-base: #f0f1f3;
|
|
477
462
|
|
|
478
463
|
/* Mark & Text */
|
|
479
464
|
--color-mark-bg: #014063;
|
package/src/variants/modules.css
CHANGED