@nordcode/ui 1.1.7 → 1.3.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.
Files changed (25) hide show
  1. package/CHANGELOG.md +55 -49
  2. package/out/bundle.css +94 -85
  3. package/out/bundle_configless.css +88 -80
  4. package/out/colors.css +66 -53
  5. package/out/complete.css +155 -118
  6. package/out/complete_configless.css +149 -113
  7. package/package.json +1 -1
  8. package/src/styles/components/alerts.css +2 -2
  9. package/src/styles/components/badges.css +1 -1
  10. package/src/styles/components/breadcrumbs.css +1 -1
  11. package/src/styles/components/buttons.css +59 -46
  12. package/src/styles/components/card.css +31 -1
  13. package/src/styles/components/dialogs.css +11 -8
  14. package/src/styles/components/forms.css +12 -6
  15. package/src/styles/components/inputs/base.css +75 -65
  16. package/src/styles/components/inputs/fields.css +11 -11
  17. package/src/styles/components/inputs/segmented.css +23 -13
  18. package/src/styles/components/inputs/tag-select.css +10 -6
  19. package/src/styles/components/lists.css +3 -3
  20. package/src/styles/components/notifications.css +8 -6
  21. package/src/styles/config/config.css +6 -5
  22. package/src/styles/utils/base.css +20 -21
  23. package/src/styles/utils/layouts.css +31 -20
  24. package/src/styles/utils/reset.css +1 -1
  25. package/transform.js +23 -11
package/CHANGELOG.md CHANGED
@@ -1,56 +1,55 @@
1
+ ## 1.3.0 (2025-04-18)
1
2
 
2
- ## v1.0.4 (2024-09-15)
3
+ ### improvements
3
4
 
4
- ### New Features
5
+ - Switch from ch (and in some cases lh) to em for more consistent sizing and to prevent possible CLS due to font switching
6
+ - Add new typography token: `--font-size-medium` to provide a token for slightly larger text
5
7
 
6
- - Added `.nc-alert` class, an alert and utility class for notifications.
7
- - Added `-aligned` variant to `.nc-button`, which applies negative margin, so you can visually align stealth buttons
8
+ ## 1.2.0 (2025-04-03)
8
9
 
9
- ### Fixes
10
+ ### Improvements
10
11
 
11
- - Fixed Webkit `<detail>` style
12
- - Shadows not working using `light-dark`
12
+ - Add clickable card class
13
13
 
14
- ## v1.0.5 (2024-11-28)
14
+ ## 1.1.6 (2025-01-09)
15
15
 
16
- ### Features
16
+ ### Improvements
17
17
 
18
- Make fieldset-based inputs more accessible by adding legends. This affects:
19
- - `nc-tag-select`
20
- - `nc-segmented-control`
21
- - `nc-radio-field`
22
- - `nc-checkbox-field`
18
+ - Small changes to spacings.
23
19
 
24
- Be sure to checkout the updated markup for these components in the documentation.
20
+ ## 1.1.5 (2025-01-09)
25
21
 
26
- ## v1.0.5 (2024-11-28)
22
+ ### Improvements
23
+
24
+ - Add `themed` class to apply `var(--text)` and `var(--surface)` colors
27
25
 
28
26
  ### Fixes
29
27
 
30
- - Fix fields not compiling
28
+ - Fix text colors for `<ins>` and `<del>`
31
29
 
32
- ## 1.0.8 (2024-12-27)
30
+ ## 1.1.4 (2025-01-04)
33
31
 
34
- ### Improvements
32
+ ### Fixes
35
33
 
36
- - Tweak Dialog Styles
37
- - Disable scroll when modal dialog is open
34
+ - Fix summary border-radius by using a border-radius token
35
+
36
+ ## 1.1.3 (2025-01-04)
38
37
 
39
38
  ### Fixes
40
39
 
41
- - Fix user selection styles
40
+ - Small design fixes and improvements
42
41
 
43
- ## 1.0.9 (2024-12-27)
42
+ ## 1.1.2 (2025-01-03)
44
43
 
45
- ### Improvements
44
+ ### Fixes
46
45
 
47
- - Tweak Dialog Radius and mobile styles
46
+ - Fix switch component not working
48
47
 
49
- ## 1.0.10 (2024-12-27)
48
+ ## 1.1.1 (2025-01-03)
50
49
 
51
50
  ### Fixes
52
51
 
53
- - Fix radius for real
52
+ - Made details full width again
54
53
 
55
54
  ## 1.1.0 (2025-01-03)
56
55
 
@@ -62,48 +61,55 @@ Lots of spring cleaning
62
61
  - Changed default styling for details
63
62
  - Cleanup unused styles
64
63
 
65
- ## 1.1.1 (2025-01-03)
64
+ ## 1.0.10 (2024-12-27)
66
65
 
67
66
  ### Fixes
68
67
 
69
- - Made details full width again
70
-
71
- ## 1.1.2 (2025-01-03)
68
+ - Fix radius for real
72
69
 
73
- ### Fixes
70
+ ## 1.0.9 (2024-12-27)
74
71
 
75
- - Fix switch component not working
72
+ ### Improvements
76
73
 
77
- ## 1.1.3 (2025-01-04)
74
+ - Tweak Dialog Radius and mobile styles
78
75
 
79
- ### Fixes
76
+ ## 1.0.8 (2024-12-27)
80
77
 
81
- - Small design fixes and improvements
78
+ ### Improvements
82
79
 
83
- ## 1.1.4 (2025-01-04)
80
+ - Tweak Dialog Styles
81
+ - Disable scroll when modal dialog is open
84
82
 
85
83
  ### Fixes
86
84
 
87
- - Fix summary border-radius by using a border-radius token
85
+ - Fix user selection styles
88
86
 
89
- ## 1.1.5 (2025-01-09)
87
+ ## v1.0.5 (2024-11-28)
90
88
 
91
- ### Improvements
89
+ ### Fixes
92
90
 
93
- - Add `themed` class to apply `var(--text)` and `var(--surface)` colors
91
+ - Fix fields not compiling
94
92
 
95
- ### Fixes
93
+ ## v1.0.5 (2024-11-28)
96
94
 
97
- - Fix text colors for `<ins>` and `<del>`
95
+ ### Features
98
96
 
99
- ## 1.1.6 (2025-01-09)
97
+ Make fieldset-based inputs more accessible by adding legends. This affects:
98
+ - `nc-tag-select`
99
+ - `nc-segmented-control`
100
+ - `nc-radio-field`
101
+ - `nc-checkbox-field`
100
102
 
101
- ### Improvements
103
+ Be sure to checkout the updated markup for these components in the documentation.
102
104
 
103
- - Small changes to spacings.
105
+ ## v1.0.4 (2024-09-15)
104
106
 
105
- ## 1.1.7 (2025-02-23)
107
+ ### New Features
106
108
 
107
- ### Improvements
109
+ - Added `.nc-alert` class, an alert and utility class for notifications.
110
+ - Added `-aligned` variant to `.nc-button`, which applies negative margin, so you can visually align stealth buttons
111
+
112
+ ### Fixes
108
113
 
109
- - Small improvements to typography settings
114
+ - Fixed Webkit `<detail>` style
115
+ - Shadows not working using `light-dark`
package/out/bundle.css CHANGED
@@ -12,14 +12,15 @@
12
12
  --line-height-base: 1.55;
13
13
  --line-height-small: 1.1;
14
14
  --tracking-base: normal;
15
- --tracking-tight: -.04ch;
16
- --tracking-wide: .06ch;
17
- --measure-large: 88ch;
18
- --measure-base: 72ch;
19
- --measure-small: 44ch;
15
+ --tracking-tight: -.02em;
16
+ --tracking-wide: .03em;
17
+ --measure-large: 44em;
18
+ --measure-base: 36em;
19
+ --measure-small: 22em;
20
20
  --font-size-smallest: max(.75rem, 12px);
21
21
  --font-size-small: max(.875rem, 14px);
22
22
  --font-size-base: 1rem;
23
+ --font-size-medium: 1.125rem;
23
24
  --font-size-large: 1.25rem;
24
25
  --font-size-largest: 1.5rem;
25
26
  --font-size-display: 3.5rem;
@@ -221,71 +222,84 @@
221
222
 
222
223
  @layer theme {
223
224
  :where(html) {
225
+ --lightningcss-light: initial;
226
+ --lightningcss-dark: ;
224
227
  color-scheme: light dark;
225
228
  }
226
229
 
230
+ @media (prefers-color-scheme: dark) {
231
+ :where(html) {
232
+ --lightningcss-light: ;
233
+ --lightningcss-dark: initial;
234
+ }
235
+ }
236
+
227
237
  :where([data-theme="light"]) {
238
+ --lightningcss-light: initial;
239
+ --lightningcss-dark: ;
228
240
  color-scheme: light;
229
241
  }
230
242
 
231
243
  :where([data-theme="dark"]) {
244
+ --lightningcss-light: ;
245
+ --lightningcss-dark: initial;
232
246
  color-scheme: dark;
233
247
  }
234
248
 
235
249
  :where(:root) {
236
- --l-brand-primary: light-dark(var(--l-brand-primary-light), var(--l-brand-primary-dark));
237
- --color-brand-primary-emphasis: light-dark(var(--color-brand-primary-emphasis-light), var(--color-brand-primary-emphasis-dark));
238
- --color-brand-primary-base: light-dark(var(--color-brand-primary-base-light), var(--color-brand-primary-base-dark));
239
- --color-brand-primary-surface: light-dark(var(--color-brand-primary-surface-light), var(--color-brand-primary-surface-dark));
240
- --color-brand-primary-hover: light-dark(var(--color-brand-primary-hover-light), var(--color-brand-primary-hover-light));
241
- --color-brand-primary-contrast-lightness: light-dark(var(--color-brand-primary-contrast-lightness-light), var(--color-brand-primary-contrast-lightness-dark));
242
- --color-brand-primary-contrast: light-dark(var(--color-brand-primary-contrast-light), var(--color-brand-primary-contrast-dark));
243
- --color-brand-secondary-emphasis: light-dark(var(--color-brand-secondary-emphasis-light), var(--color-brand-secondary-emphasis-dark));
244
- --color-brand-secondary-base: light-dark(var(--color-brand-secondary-base-light), var(--color-brand-secondary-base-dark));
245
- --color-brand-secondary-surface: light-dark(var(--color-brand-secondary-surface-light), var(--color-brand-secondary-surface-dark));
246
- --color-brand-secondary-hover: light-dark(var(--color-brand-secondary-hover-light), var(--color-brand-secondary-hover-dark));
247
- --color-brand-secondary-contrast: light-dark(var(--color-brand-secondary-contrast-light), var(--color-brand-secondary-contrast-dark));
248
- --color-text-base: light-dark(var(--color-text-base-light), var(--color-text-base-dark));
249
- --color-text-muted: light-dark(var(--color-text-muted-light), var(--color-text-muted-dark));
250
- --color-text-subtle: light-dark(var(--color-text-subtle-light), var(--color-text-subtle-dark));
251
- --color-text-on-emphasis: light-dark(var(--color-text-on-emphasis-light), var(--color-text-on-emphasis-dark));
252
- --color-text-hover: light-dark(var(--color-text-hover-light), var(--color-text-hover-dark));
253
- --color-surface-base: light-dark(var(--color-surface-base-light), var(--color-surface-base-dark));
254
- --color-surface-muted: light-dark(var(--color-surface-muted-light), var(--color-surface-muted-dark));
255
- --color-surface-subtle: light-dark(var(--color-surface-subtle-light), var(--color-surface-subtle-dark));
256
- --color-surface-emphasis: light-dark(var(--color-surface-emphasis-light), var(--color-surface-emphasis-dark));
257
- --color-border-base: light-dark(var(--color-border-base-light), var(--color-border-base-dark));
258
- --color-border-muted: light-dark(var(--color-border-muted-light), var(--color-border-muted-dark));
259
- --color-border-subtle: light-dark(var(--color-border-subtle-light), var(--color-border-subtle-dark));
260
- --color-border-on-emphasis: light-dark(var(--color-border-on-emphasis-light), var(--color-border-on-emphasis-dark));
261
- --color-border-hover: light-dark(var(--color-border-hover-light), var(--color-border-hover-dark));
262
- --color-status-info-emphasis: light-dark(var(--color-status-info-emphasis-light), var(--color-status-info-emphasis-dark));
263
- --color-status-info-base: light-dark(var(--color-status-info-base-light), var(--color-status-info-base-dark));
264
- --color-status-info-surface: light-dark(var(--color-status-info-surface-light), var(--color-status-info-surface-dark));
265
- --color-status-info-hover: light-dark(var(--color-status-info-hover-light), var(--color-status-info-hover-light));
266
- --color-status-info-contrast-lightness: light-dark(var(--color-status-info-contrast-lightness-light), var(--color-status-info-contrast-lightness-dark));
267
- --color-status-info-contrast: light-dark(var(--color-status-info-contrast-light), var(--color-status-info-contrast-dark));
268
- --color-status-success-emphasis: light-dark(var(--color-status-success-emphasis-light), var(--color-status-success-emphasis-dark));
269
- --color-status-success-base: light-dark(var(--color-status-success-base-light), var(--color-status-success-base-dark));
270
- --color-status-success-surface: light-dark(var(--color-status-success-surface-light), var(--color-status-success-surface-dark));
271
- --color-status-success-hover: light-dark(var(--color-status-success-hover-light), var(--color-status-success-hover-light));
272
- --color-status-success-contrast-lightness: light-dark(var(--color-status-success-contrast-lightness-light), var(--color-status-success-contrast-lightness-dark));
273
- --color-status-success-contrast: light-dark(var(--color-status-success-contrast-light), var(--color-status-success-contrast-dark));
274
- --color-status-warning-emphasis: light-dark(var(--color-status-warning-emphasis-light), var(--color-status-warning-emphasis-dark));
275
- --color-status-warning-base: light-dark(var(--color-status-warning-base-light), var(--color-status-warning-base-dark));
276
- --color-status-warning-surface: light-dark(var(--color-status-warning-surface-light), var(--color-status-warning-surface-dark));
277
- --color-status-warning-hover: light-dark(var(--color-status-warning-hover-light), var(--color-status-warning-hover-light));
278
- --color-status-warning-contrast-lightness: light-dark(var(--color-status-warning-contrast-lightness-light), var(--color-status-warning-contrast-lightness-dark));
279
- --color-status-warning-contrast: light-dark(var(--color-status-warning-contrast-light), var(--color-status-warning-contrast-dark));
280
- --color-status-danger-emphasis: light-dark(var(--color-status-danger-emphasis-light), var(--color-status-danger-emphasis-dark));
281
- --color-status-danger-base: light-dark(var(--color-status-danger-base-light), var(--color-status-danger-base-dark));
282
- --color-status-danger-surface: light-dark(var(--color-status-danger-surface-light), var(--color-status-danger-surface-dark));
283
- --color-status-danger-hover: light-dark(var(--color-status-danger-hover-light), var(--color-status-danger-hover-light));
284
- --color-status-danger-contrast-lightness: light-dark(var(--color-status-danger-contrast-lightness-light), var(--color-status-danger-contrast-lightness-dark));
285
- --color-status-danger-contrast: light-dark(var(--color-status-danger-contrast-light), var(--color-status-danger-contrast-dark));
286
- --shadow-color: light-dark(var(--shadow-color-light), var(--shadow-color-dark));
287
- --triangle-down-url: light-dark(var(--triangle-down-url-light), var(--triangle-down-url-dark));
288
- --triangle-up-url: light-dark(var(--triangle-up-url-light), var(--triangle-up-url-dark));
250
+ --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
251
+ --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
252
+ --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
253
+ --color-brand-primary-surface: var(--lightningcss-light, var(--color-brand-primary-surface-light)) var(--lightningcss-dark, var(--color-brand-primary-surface-dark));
254
+ --color-brand-primary-hover: var(--lightningcss-light, var(--color-brand-primary-hover-light)) var(--lightningcss-dark, var(--color-brand-primary-hover-light));
255
+ --color-brand-primary-contrast-lightness: var(--lightningcss-light, var(--color-brand-primary-contrast-lightness-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-lightness-dark));
256
+ --color-brand-primary-contrast: var(--lightningcss-light, var(--color-brand-primary-contrast-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-dark));
257
+ --color-brand-secondary-emphasis: var(--lightningcss-light, var(--color-brand-secondary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-secondary-emphasis-dark));
258
+ --color-brand-secondary-base: var(--lightningcss-light, var(--color-brand-secondary-base-light)) var(--lightningcss-dark, var(--color-brand-secondary-base-dark));
259
+ --color-brand-secondary-surface: var(--lightningcss-light, var(--color-brand-secondary-surface-light)) var(--lightningcss-dark, var(--color-brand-secondary-surface-dark));
260
+ --color-brand-secondary-hover: var(--lightningcss-light, var(--color-brand-secondary-hover-light)) var(--lightningcss-dark, var(--color-brand-secondary-hover-dark));
261
+ --color-brand-secondary-contrast: var(--lightningcss-light, var(--color-brand-secondary-contrast-light)) var(--lightningcss-dark, var(--color-brand-secondary-contrast-dark));
262
+ --color-text-base: var(--lightningcss-light, var(--color-text-base-light)) var(--lightningcss-dark, var(--color-text-base-dark));
263
+ --color-text-muted: var(--lightningcss-light, var(--color-text-muted-light)) var(--lightningcss-dark, var(--color-text-muted-dark));
264
+ --color-text-subtle: var(--lightningcss-light, var(--color-text-subtle-light)) var(--lightningcss-dark, var(--color-text-subtle-dark));
265
+ --color-text-on-emphasis: var(--lightningcss-light, var(--color-text-on-emphasis-light)) var(--lightningcss-dark, var(--color-text-on-emphasis-dark));
266
+ --color-text-hover: var(--lightningcss-light, var(--color-text-hover-light)) var(--lightningcss-dark, var(--color-text-hover-dark));
267
+ --color-surface-base: var(--lightningcss-light, var(--color-surface-base-light)) var(--lightningcss-dark, var(--color-surface-base-dark));
268
+ --color-surface-muted: var(--lightningcss-light, var(--color-surface-muted-light)) var(--lightningcss-dark, var(--color-surface-muted-dark));
269
+ --color-surface-subtle: var(--lightningcss-light, var(--color-surface-subtle-light)) var(--lightningcss-dark, var(--color-surface-subtle-dark));
270
+ --color-surface-emphasis: var(--lightningcss-light, var(--color-surface-emphasis-light)) var(--lightningcss-dark, var(--color-surface-emphasis-dark));
271
+ --color-border-base: var(--lightningcss-light, var(--color-border-base-light)) var(--lightningcss-dark, var(--color-border-base-dark));
272
+ --color-border-muted: var(--lightningcss-light, var(--color-border-muted-light)) var(--lightningcss-dark, var(--color-border-muted-dark));
273
+ --color-border-subtle: var(--lightningcss-light, var(--color-border-subtle-light)) var(--lightningcss-dark, var(--color-border-subtle-dark));
274
+ --color-border-on-emphasis: var(--lightningcss-light, var(--color-border-on-emphasis-light)) var(--lightningcss-dark, var(--color-border-on-emphasis-dark));
275
+ --color-border-hover: var(--lightningcss-light, var(--color-border-hover-light)) var(--lightningcss-dark, var(--color-border-hover-dark));
276
+ --color-status-info-emphasis: var(--lightningcss-light, var(--color-status-info-emphasis-light)) var(--lightningcss-dark, var(--color-status-info-emphasis-dark));
277
+ --color-status-info-base: var(--lightningcss-light, var(--color-status-info-base-light)) var(--lightningcss-dark, var(--color-status-info-base-dark));
278
+ --color-status-info-surface: var(--lightningcss-light, var(--color-status-info-surface-light)) var(--lightningcss-dark, var(--color-status-info-surface-dark));
279
+ --color-status-info-hover: var(--lightningcss-light, var(--color-status-info-hover-light)) var(--lightningcss-dark, var(--color-status-info-hover-light));
280
+ --color-status-info-contrast-lightness: var(--lightningcss-light, var(--color-status-info-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-info-contrast-lightness-dark));
281
+ --color-status-info-contrast: var(--lightningcss-light, var(--color-status-info-contrast-light)) var(--lightningcss-dark, var(--color-status-info-contrast-dark));
282
+ --color-status-success-emphasis: var(--lightningcss-light, var(--color-status-success-emphasis-light)) var(--lightningcss-dark, var(--color-status-success-emphasis-dark));
283
+ --color-status-success-base: var(--lightningcss-light, var(--color-status-success-base-light)) var(--lightningcss-dark, var(--color-status-success-base-dark));
284
+ --color-status-success-surface: var(--lightningcss-light, var(--color-status-success-surface-light)) var(--lightningcss-dark, var(--color-status-success-surface-dark));
285
+ --color-status-success-hover: var(--lightningcss-light, var(--color-status-success-hover-light)) var(--lightningcss-dark, var(--color-status-success-hover-light));
286
+ --color-status-success-contrast-lightness: var(--lightningcss-light, var(--color-status-success-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-success-contrast-lightness-dark));
287
+ --color-status-success-contrast: var(--lightningcss-light, var(--color-status-success-contrast-light)) var(--lightningcss-dark, var(--color-status-success-contrast-dark));
288
+ --color-status-warning-emphasis: var(--lightningcss-light, var(--color-status-warning-emphasis-light)) var(--lightningcss-dark, var(--color-status-warning-emphasis-dark));
289
+ --color-status-warning-base: var(--lightningcss-light, var(--color-status-warning-base-light)) var(--lightningcss-dark, var(--color-status-warning-base-dark));
290
+ --color-status-warning-surface: var(--lightningcss-light, var(--color-status-warning-surface-light)) var(--lightningcss-dark, var(--color-status-warning-surface-dark));
291
+ --color-status-warning-hover: var(--lightningcss-light, var(--color-status-warning-hover-light)) var(--lightningcss-dark, var(--color-status-warning-hover-light));
292
+ --color-status-warning-contrast-lightness: var(--lightningcss-light, var(--color-status-warning-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-lightness-dark));
293
+ --color-status-warning-contrast: var(--lightningcss-light, var(--color-status-warning-contrast-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-dark));
294
+ --color-status-danger-emphasis: var(--lightningcss-light, var(--color-status-danger-emphasis-light)) var(--lightningcss-dark, var(--color-status-danger-emphasis-dark));
295
+ --color-status-danger-base: var(--lightningcss-light, var(--color-status-danger-base-light)) var(--lightningcss-dark, var(--color-status-danger-base-dark));
296
+ --color-status-danger-surface: var(--lightningcss-light, var(--color-status-danger-surface-light)) var(--lightningcss-dark, var(--color-status-danger-surface-dark));
297
+ --color-status-danger-hover: var(--lightningcss-light, var(--color-status-danger-hover-light)) var(--lightningcss-dark, var(--color-status-danger-hover-light));
298
+ --color-status-danger-contrast-lightness: var(--lightningcss-light, var(--color-status-danger-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-lightness-dark));
299
+ --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
300
+ --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
301
+ --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
302
+ --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
289
303
  }
290
304
  }
291
305
 
@@ -317,7 +331,7 @@
317
331
 
318
332
  :where(:not(:active):focus-visible) {
319
333
  outline: var(--border-width-medium) solid var(--color-brand-primary-base);
320
- outline-offset: 1ch;
334
+ outline-offset: .5em;
321
335
  }
322
336
 
323
337
  :where(:focus:not(:focus-visible)) {
@@ -427,7 +441,7 @@
427
441
  }
428
442
 
429
443
  :where(dl:not([class]), .nc-description-list) {
430
- word-break: break-word;
444
+ overflow-wrap: anywhere;
431
445
  grid-template-columns: .25fr .75fr;
432
446
  align-items: flex-start;
433
447
  row-gap: .5lh;
@@ -447,7 +461,7 @@
447
461
  grid-column: 1 / 1;
448
462
  min-block-size: 100%;
449
463
  padding-block-end: 0;
450
- padding-inline-end: 2ch;
464
+ padding-inline-end: 1em;
451
465
  }
452
466
 
453
467
  :where(dt):not(:last-of-type) {
@@ -483,19 +497,19 @@
483
497
  :where(figcaption) {
484
498
  color: var(--color-surface-subtle);
485
499
  background-color: var(--color-text-base);
486
- padding: .25lh 1ch;
500
+ padding: .35em .5em;
487
501
  display: block;
488
502
  }
489
503
 
490
504
  :where(details) {
491
- --p-x-details: 2ch;
492
- --p-y-details: .75lh;
505
+ --p-x-details: 1em;
506
+ --p-y-details: 1em;
493
507
  --b-r-details: var(--border-radius-medium);
494
508
  background-color: var(--color-surface-muted);
495
509
  border-radius: var(--b-r-details);
496
- border: var(--border-width-thin) solid var(--color-border-base);
497
510
  padding: var(--p-y-details) var(--p-x-details);
498
511
  inline-size: 100%;
512
+ box-shadow: 0 0 0 var(--border-width-thin) var(--color-border-base);
499
513
  }
500
514
 
501
515
  :where(details) > summary {
@@ -504,7 +518,7 @@
504
518
  font-weight: var(--font-weight-heading);
505
519
  border-radius: var(--b-r-details);
506
520
  padding: var(--p-y-details) var(--p-x-details);
507
- margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
521
+ margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details));
508
522
  }
509
523
 
510
524
  :where(details)[open] > summary {
@@ -521,7 +535,7 @@
521
535
  font-size: var(--font-size-large);
522
536
  margin-inline: 0;
523
537
  padding: 0;
524
- padding-inline-start: 2ch;
538
+ padding-inline-start: 1em;
525
539
  position: relative;
526
540
  }
527
541
 
@@ -548,7 +562,7 @@
548
562
 
549
563
  :is(.note, blockquote) cite:before {
550
564
  content: "—";
551
- margin-inline-end: .5ch;
565
+ margin-inline-end: .5em;
552
566
  }
553
567
 
554
568
  cite {
@@ -611,7 +625,7 @@
611
625
  :where(a, .nc-link) {
612
626
  color: inherit;
613
627
  font-family: var(--font-family-link);
614
- text-underline-offset: .25lh;
628
+ text-underline-offset: .35em;
615
629
  font-weight: var(--font-weight-default);
616
630
  cursor: pointer;
617
631
  letter-spacing: var(--tracking-tight);
@@ -662,7 +676,7 @@
662
676
  line-height: inherit;
663
677
  -webkit-box-decoration-break: clone;
664
678
  box-decoration-break: clone;
665
- padding-inline: .5ch;
679
+ padding-inline: .25em;
666
680
  }
667
681
 
668
682
  :where(code, kbd, var) {
@@ -674,10 +688,9 @@
674
688
  tab-size: 4;
675
689
  text-align: left;
676
690
  word-spacing: normal;
677
- word-break: normal;
678
- word-wrap: normal;
691
+ overflow-wrap: normal;
679
692
  max-inline-size: fit-content;
680
- padding-block: .125lh;
693
+ padding-block: .2em;
681
694
  font-style: normal;
682
695
  }
683
696
 
@@ -704,7 +717,7 @@
704
717
  border-radius: var(--border-radius-medium);
705
718
  background: var(--color-surface-subtle);
706
719
  -webkit-overflow-scrolling: touch;
707
- padding: .5lh 2ch;
720
+ padding: 1em;
708
721
  overflow-x: auto;
709
722
  }
710
723
 
@@ -745,7 +758,7 @@
745
758
  line-height: var(--line-height-small);
746
759
  white-space: nowrap;
747
760
  font-variant-numeric: tabular-nums;
748
- padding: .4lh 1ch;
761
+ padding: .5em;
749
762
  }
750
763
 
751
764
  :where(td), :where(thead th) {
@@ -815,15 +828,11 @@
815
828
  }
816
829
 
817
830
  :where(ul, ol) {
818
- padding-inline-start: 2ch;
819
- }
820
-
821
- :where(li + li) {
822
- margin-block-start: .5lh;
831
+ padding-inline-start: 1em;
823
832
  }
824
833
 
825
- :where(li > :is(ul, ol)) {
826
- margin-block-start: .25lh;
834
+ :where(li + li), :where(li > :is(ul, ol)) {
835
+ margin-block-start: .5em;
827
836
  }
828
837
 
829
838
  @supports (font-variant-position: sub) {
@@ -857,7 +866,7 @@
857
866
  content: close-quote;
858
867
  content: "“";
859
868
  content: "”";
860
- margin-inline-start: -.87ch;
869
+ margin-inline-start: -.5em;
861
870
  }
862
871
 
863
872
  :where(.quoted p) {
@@ -950,11 +959,11 @@
950
959
  }
951
960
 
952
961
  :where(.nc-flow) > * {
953
- max-inline-size: var(--flow-base-meassure, 72ch);
962
+ max-inline-size: var(--flow-base-meassure, 36em);
954
963
  }
955
964
 
956
965
  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
957
- max-inline-size: var(--flow-headline-meassure, 32ch);
966
+ max-inline-size: var(--flow-headline-meassure, 16em);
958
967
  --flow-gap: 1.5lh;
959
968
  }
960
969