@nordcode/ui 1.2.0 → 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 (23) hide show
  1. package/CHANGELOG.md +55 -49
  2. package/out/bundle.css +26 -29
  3. package/out/bundle_configless.css +20 -24
  4. package/out/complete.css +60 -62
  5. package/out/complete_configless.css +54 -57
  6. package/package.json +1 -1
  7. package/src/styles/components/alerts.css +2 -2
  8. package/src/styles/components/badges.css +1 -1
  9. package/src/styles/components/breadcrumbs.css +1 -1
  10. package/src/styles/components/buttons.css +59 -46
  11. package/src/styles/components/card.css +2 -1
  12. package/src/styles/components/dialogs.css +11 -8
  13. package/src/styles/components/forms.css +12 -6
  14. package/src/styles/components/inputs/base.css +75 -65
  15. package/src/styles/components/inputs/fields.css +11 -11
  16. package/src/styles/components/inputs/segmented.css +23 -13
  17. package/src/styles/components/inputs/tag-select.css +10 -6
  18. package/src/styles/components/lists.css +3 -3
  19. package/src/styles/components/notifications.css +8 -6
  20. package/src/styles/config/config.css +6 -5
  21. package/src/styles/utils/base.css +18 -18
  22. package/src/styles/utils/layouts.css +31 -20
  23. package/src/styles/utils/reset.css +1 -1
package/src/styles/components/dialogs.css CHANGED
@@ -3,15 +3,18 @@
3
3
  --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
4
4
  --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
5
5
  --_dialog-close-size: var(--dialog-close-size, var(--button-height-base));
6
- --_dialog-transition-duration: var(--dialog-transition-duration,
7
- var(--transition-duration-base));
6
+ --_dialog-transition-duration: var(
7
+ --dialog-transition-duration,
8
+ var(--transition-duration-base)
9
+ );
8
10
  --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
9
11
  --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
10
12
 
11
13
  --_dialog-radius: 0;
12
14
  display: block;
13
15
  z-index: var(--layer-important);
14
- animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1) forwards;
16
+ animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1)
17
+ forwards;
15
18
  transition: opacity var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1);
16
19
  position: fixed;
17
20
  inset: 0;
@@ -25,7 +28,7 @@
25
28
  padding: 0;
26
29
  border-radius: var(--_dialog-radius);
27
30
  overflow: clip;
28
- overflow-clip-margin: 1rem;
31
+ overflow-clip-margin: 1em;
29
32
  pointer-events: all;
30
33
 
31
34
  @media (min-width: 36rem) {
@@ -60,13 +63,13 @@
60
63
  block-size: max-content;
61
64
  max-block-size: var(--_dialog-max-block-size);
62
65
  overflow: clip;
63
- overflow-clip-margin: 1rem;
66
+ overflow-clip-margin: 1em;
64
67
 
65
- &>*:first-child {
68
+ & > *:first-child {
66
69
  border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
67
70
  }
68
71
 
69
- &>*:last-child {
72
+ & > *:last-child {
70
73
  border-radius: 0 0 var(--_dialog-radius) var(--_dialog-radius);
71
74
  }
72
75
  }
@@ -83,7 +86,7 @@
83
86
  min-inline-size: calc(2 * var(--spacing-near) + var(--_dialog-close-size));
84
87
  }
85
88
 
86
- :where(.dialog-header)>button[data-closes-dialog] {
89
+ :where(.dialog-header) > button[data-closes-dialog] {
87
90
  grid-area: close;
88
91
  inline-size: var(--_dialog-close-size);
89
92
  block-size: var(--_dialog-close-size);
package/src/styles/components/forms.css CHANGED
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  :where(.nc-form-hint) {
14
- margin-block: 0.5lh;
14
+ margin-block: 0.75em;
15
15
  font-size: var(--font-size-large);
16
16
  color: var(--color-text-muted);
17
17
  }
@@ -29,13 +29,19 @@
29
29
  border-radius: 0;
30
30
  inline-size: 100%;
31
31
 
32
- &+* {
33
- margin-block-start: var(--nc-legend-spacing, 0.8lh);
32
+ & + * {
33
+ margin-block-start: var(--nc-legend-spacing, 1em);
34
34
  }
35
35
  }
36
36
 
37
- :where(:is(fieldset:not([class]), .nc-fieldset):has( :is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend) + .nc-hint) {
38
- --nc-legend-spacing: .125lh;
39
- margin-block-end: 0.5lh;
37
+ :where(
38
+ :is(fieldset:not([class]), .nc-fieldset):has(
39
+ :is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)
40
+ )
41
+ > :is(legend:not([class]), .nc-legend)
42
+ + .nc-hint
43
+ ) {
44
+ --nc-legend-spacing: .2em;
45
+ margin-block-end: 0.75em;
40
46
  }
41
47
  }
package/src/styles/components/inputs/base.css CHANGED
@@ -10,49 +10,55 @@
10
10
  align-items: center;
11
11
  }
12
12
 
13
- :where(input[type="text"],
14
- input[type="email"],
15
- input[type="password"],
16
- input[type="number"],
17
- input[type="url"],
18
- input[type="search"],
19
- input[type="date"],
20
- input[type="month"],
21
- input[type="week"],
22
- input[type="text"],
23
- input[type="datetime"],
24
- input[type="datetime-local"],
25
- input[type="time"],
26
- input[type="tel"],
27
- input[type="color"],
28
- input[type="file"],
29
- input[type="checkbox"],
30
- input[type="radio"],
31
- textarea,
32
- select,
33
- .nc-input,
34
- .nc-select,
35
- .nc-textarea,
36
- .nc-input-checkbox,
37
- .nc-input-radio,
38
- .nc-input-label,
39
- .nc-input-color,
40
- .nc-input-field,
41
- .nc-input-error,
42
- .nc-checkbox-wrapper,
43
- .nc-input-switch,
44
- .nc-radio-field,
45
- .nc-checkbox-field) {
13
+ :where(
14
+ input[type="text"],
15
+ input[type="email"],
16
+ input[type="password"],
17
+ input[type="number"],
18
+ input[type="url"],
19
+ input[type="search"],
20
+ input[type="date"],
21
+ input[type="month"],
22
+ input[type="week"],
23
+ input[type="text"],
24
+ input[type="datetime"],
25
+ input[type="datetime-local"],
26
+ input[type="time"],
27
+ input[type="tel"],
28
+ input[type="color"],
29
+ input[type="file"],
30
+ input[type="checkbox"],
31
+ input[type="radio"],
32
+ textarea,
33
+ select,
34
+ .nc-input,
35
+ .nc-select,
36
+ .nc-textarea,
37
+ .nc-input-checkbox,
38
+ .nc-input-radio,
39
+ .nc-input-label,
40
+ .nc-input-color,
41
+ .nc-input-field,
42
+ .nc-input-error,
43
+ .nc-checkbox-wrapper,
44
+ .nc-input-switch,
45
+ .nc-radio-field,
46
+ .nc-checkbox-field
47
+ ) {
46
48
  --_input-background: var(--input-background, var(--color-surface-subtle));
47
49
  --_input-background-active: var(--input-background-active, var(--color-surface-base));
48
50
  --_input-color: var(--input-color, var(--color-text-base));
49
- --_input-border: var(--input-border,
50
- var(--border-width-thin) solid var(--color-border-base));
51
+ --_input-border: var(
52
+ --input-border,
53
+ var(--border-width-thin) solid var(--color-border-base)
54
+ );
51
55
  --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
52
56
 
53
57
  --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
54
- --_input-outline: var(--input-outline,
55
- var(--border-width-medium) solid var(--color-brand-primary-base));
58
+ --_input-outline: var(
59
+ --input-outline,
60
+ var(--border-width-medium) solid var(--color-brand-primary-base)
61
+ );
56
62
  --_input-disabled-filter: var(--input-disabled-filter, contrast(0.72) opacity(0.72));
57
63
 
58
64
  --_input-padding-block: var(--input-padding-block, 0.125lh);
@@ -60,25 +66,27 @@
60
66
  --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
61
67
  }
62
68
 
63
- :where(input[type="text"],
64
- input[type="email"],
65
- input[type="password"],
66
- input[type="number"],
67
- input[type="url"],
68
- input[type="search"],
69
- input[type="date"],
70
- input[type="month"],
71
- input[type="week"],
72
- input[type="text"],
73
- input[type="datetime"],
74
- input[type="datetime-local"],
75
- input[type="time"],
76
- input[type="tel"],
77
- input[type="color"],
78
- input[type="file"],
79
- textarea,
80
- select,
81
- .nc-input) {
69
+ :where(
70
+ input[type="text"],
71
+ input[type="email"],
72
+ input[type="password"],
73
+ input[type="number"],
74
+ input[type="url"],
75
+ input[type="search"],
76
+ input[type="date"],
77
+ input[type="month"],
78
+ input[type="week"],
79
+ input[type="text"],
80
+ input[type="datetime"],
81
+ input[type="datetime-local"],
82
+ input[type="time"],
83
+ input[type="tel"],
84
+ input[type="color"],
85
+ input[type="file"],
86
+ textarea,
87
+ select,
88
+ .nc-input
89
+ ) {
82
90
  font: inherit;
83
91
  letter-spacing: inherit;
84
92
  word-spacing: inherit;
@@ -122,10 +130,10 @@
122
130
  }
123
131
 
124
132
  :where(select:not([class]), .nc-select) {
125
- padding-inline-end: 3.5ch;
133
+ padding-inline-end: 1.75em;
126
134
  background-image: var(--triangle-down-url);
127
- background-position: right 1ch top 50%;
128
- background-size: 1.5ch 1.25ch;
135
+ background-position: right 0.5em top 50%;
136
+ background-size: 1em 0.75em;
129
137
  }
130
138
 
131
139
  :where(textarea:not([class]), .nc-textarea) {
@@ -139,11 +147,13 @@
139
147
  field-sizing: content;
140
148
  }
141
149
 
142
- :where(input[type="checkbox"]:not([class]),
143
- input[type="radio"]:not([class]),
144
- .nc-input-checkbox,
145
- .nc-input-radio,
146
- .nc-input-switch) {
150
+ :where(
151
+ input[type="checkbox"]:not([class]),
152
+ input[type="radio"]:not([class]),
153
+ .nc-input-checkbox,
154
+ .nc-input-radio,
155
+ .nc-input-switch
156
+ ) {
147
157
  inline-size: 1lh;
148
158
  block-size: 1lh;
149
159
  padding: 0;
@@ -224,7 +234,7 @@
224
234
  }
225
235
 
226
236
  :where(input[type="range"], .nc-input-range) {
227
- &>.nc-hint {
237
+ & > .nc-hint {
228
238
  margin-inline-start: auto;
229
239
  }
230
240
 
package/src/styles/components/inputs/fields.css CHANGED
@@ -1,20 +1,20 @@
1
1
  @layer components.input-fields {
2
2
  :where(.nc-input-field) {
3
3
  display: grid;
4
- gap: 0.25lh;
4
+ gap: 0.35em;
5
5
  grid-template-columns: minmax(0, 1fr);
6
6
  inline-size: 100%;
7
7
  min-inline-size: var(--input-field-min-inline-size);
8
8
  max-inline-size: var(--input-field-max-inline-size);
9
9
  place-items: start;
10
10
 
11
- &>label,
12
- &>.nc-stack {
11
+ & > label,
12
+ & > .nc-stack {
13
13
  gap: 0;
14
14
  }
15
15
 
16
- &>.nc-cluster {
17
- gap: 1ch;
16
+ & > .nc-cluster {
17
+ gap: 0.5em;
18
18
  }
19
19
  }
20
20
 
@@ -33,7 +33,7 @@
33
33
  justify-content: center;
34
34
  background-color: var(--color-base);
35
35
  color: var(--color-surface-subtle);
36
- margin-inline-end: 1ch;
36
+ margin-inline-end: 0.5em;
37
37
  inline-size: 1em;
38
38
  block-size: 1em;
39
39
  flex-shrink: 0;
@@ -48,16 +48,16 @@
48
48
  place-items: start;
49
49
  gap: 0;
50
50
 
51
- &>[data-label] {
51
+ & > [data-label] {
52
52
  grid-area: label;
53
- padding-inline-start: 1ch;
53
+ padding-inline-start: 0.5em;
54
54
  }
55
55
 
56
56
  & .nc-input-label {
57
57
  min-block-size: var(--line-height-base);
58
58
  }
59
59
 
60
- &>[data-input] {
60
+ & > [data-input] {
61
61
  grid-area: checkbox;
62
62
  }
63
63
 
@@ -69,8 +69,8 @@
69
69
  :where(.nc-radio-field, .nc-checkbox-field) {
70
70
  gap: 0;
71
71
 
72
- >*:not(:first-child) {
73
- margin-block-start: 0.6lh;
72
+ > *:not(:first-child) {
73
+ margin-block-start: 0.75em;
74
74
  }
75
75
  }
76
76
  }
package/src/styles/components/inputs/segmented.css CHANGED
@@ -1,15 +1,21 @@
1
1
  @layer components.inputs-segmented {
2
2
  :where(.nc-segmented-control-group) {
3
- --_segmented-control-border-radius: var(--segmented-control-border-radius,
4
- var(--_input-border-radius));
5
- --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color,
6
- var(--color-brand-primary-contrast));
7
- --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color,
8
- var(--color-brand-primary-base));
3
+ --_segmented-control-border-radius: var(
4
+ --segmented-control-border-radius,
5
+ var(--_input-border-radius)
6
+ );
7
+ --_segmented-control-checked-text-color: var(
8
+ --segmented-control-checked-text-color,
9
+ var(--color-brand-primary-contrast)
10
+ );
11
+ --_segmented-control-checked-surface-color: var(
12
+ --segmented-control-checked-surface-color,
13
+ var(--color-brand-primary-base)
14
+ );
9
15
 
10
16
  container: segmented-control / inline-size;
11
17
 
12
- --nc-legend-spacing: 0.25lh;
18
+ --nc-legend-spacing: 0.35em;
13
19
  }
14
20
 
15
21
  :where(.nc-segmented-control) {
@@ -43,7 +49,7 @@
43
49
  align-items: center;
44
50
  justify-content: center;
45
51
 
46
- >.nc-input-label {
52
+ > .nc-input-label {
47
53
  color: inherit;
48
54
  }
49
55
 
@@ -53,11 +59,13 @@
53
59
  }
54
60
 
55
61
  &:first-child {
56
- border-radius: var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0 0;
62
+ border-radius: var(--_segmented-control-border-radius)
63
+ var(--_segmented-control-border-radius) 0 0;
57
64
  }
58
65
 
59
66
  &:last-child {
60
- border-radius: 0 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius);
67
+ border-radius: 0 0 var(--_segmented-control-border-radius)
68
+ var(--_segmented-control-border-radius);
61
69
  }
62
70
 
63
71
  &:not(:last-child) {
@@ -90,13 +98,15 @@
90
98
  grid-auto-columns: 1fr;
91
99
  grid-auto-flow: column;
92
100
 
93
- >label {
101
+ > label {
94
102
  &:first-child {
95
- border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
103
+ border-radius: var(--_segmented-control-border-radius) 0 0
104
+ var(--_segmented-control-border-radius);
96
105
  }
97
106
 
98
107
  &:last-child {
99
- border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
108
+ border-radius: 0 var(--_segmented-control-border-radius)
109
+ var(--_segmented-control-border-radius) 0;
100
110
  }
101
111
 
102
112
  &:not(:last-child) {
package/src/styles/components/inputs/tag-select.css CHANGED
@@ -1,14 +1,18 @@
1
1
  @layer components.inputs {
2
2
  :where(.nc-tag-select-field) {
3
- --_tag-select-checked-text-color: var(--tag-select-checked-text-color,
4
- var(--color-brand-primary-contrast));
5
- --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color,
6
- var(--color-brand-primary-base));
3
+ --_tag-select-checked-text-color: var(
4
+ --tag-select-checked-text-color,
5
+ var(--color-brand-primary-contrast)
6
+ );
7
+ --_tag-select-checked-surface-color: var(
8
+ --tag-select-checked-surface-color,
9
+ var(--color-brand-primary-base)
10
+ );
7
11
  --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
8
- --nc-legend-spacing: 0.25lh;
12
+ --nc-legend-spacing: 0.35em;
9
13
 
10
14
  &:focus-within:has(:focus-visible) {
11
- outline-offset: 1ch;
15
+ outline-offset: 0.5em;
12
16
  outline: var(--_input-outline);
13
17
  border-radius: var(--_tag-select-border-radius);
14
18
  }
package/src/styles/components/lists.css CHANGED
@@ -11,7 +11,7 @@
11
11
  inline-size: 100%;
12
12
 
13
13
  &:not(:last-child) {
14
- margin-block-end: 1ch;
14
+ margin-block-end: 0.5em;
15
15
  }
16
16
  }
17
17
 
@@ -20,9 +20,9 @@
20
20
  inline-size: auto;
21
21
 
22
22
  &:not(:last-child):after {
23
- content: '';
23
+ content: "";
24
24
  border-right: var(--border-width-medium) solid var(--color-border-muted);
25
- margin: 0 1ch;
25
+ margin: 0 0.5em;
26
26
  transform: calc(var(--border-width-medium) / 2);
27
27
  }
28
28
  }
package/src/styles/components/notifications.css CHANGED
@@ -3,9 +3,10 @@
3
3
  --_notification-max-width: var(--notifications-max-width, 20rem);
4
4
  --_notification-gap: var(--notification-gap, var(--spacing-base));
5
5
  --_notification-border-color: var(--notification-border-color, var(--color-border-base));
6
- --_notification-center-background: var(--notification-center-background,
7
- color-mix(in oklch, var(---color-surface-subtle), transparent 95%);
8
- );
6
+ --_notification-center-background: var(
7
+ --notification-center-background,
8
+ color-mix(in oklch, var(---color-surface-subtle), transparent 95%)
9
+ );
9
10
  }
10
11
 
11
12
  :where(.nc-notification-center, .nc-notification-output) {
@@ -61,7 +62,7 @@
61
62
  }
62
63
 
63
64
  :where(.nc-notification) {
64
- padding: 0.5lh 2ch;
65
+ padding: 0.5em 1em;
65
66
  background: var(--color-surface-base);
66
67
  border: var(--border-width-thin) solid var(--_notification-border-color);
67
68
  display: flex;
@@ -98,7 +99,7 @@
98
99
  justify-content: space-between;
99
100
  align-items: flex-end;
100
101
  inline-size: 100%;
101
- margin-block-start: 0.5ch;
102
+ margin-block-start: 0.25em;
102
103
  }
103
104
 
104
105
  :where(.nc-notification .nc-button, .nc-notification-center .nc-button) {
@@ -107,7 +108,8 @@
107
108
  }
108
109
 
109
110
  :where(.nc-notification.-closing) {
110
- animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1) forwards;
111
+ animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1)
112
+ forwards;
111
113
  }
112
114
 
113
115
  @keyframes pop-in {
package/src/styles/config/config.css CHANGED
@@ -17,16 +17,17 @@
17
17
  --line-height-small: 1.1;
18
18
 
19
19
  --tracking-base: normal;
20
- --tracking-tight: -0.04ch;
21
- --tracking-wide: 0.06ch;
20
+ --tracking-tight: -0.02em;
21
+ --tracking-wide: 0.03em;
22
22
 
23
- --measure-large: 88ch;
24
- --measure-base: 72ch;
25
- --measure-small: 44ch;
23
+ --measure-large: 44em;
24
+ --measure-base: 36em;
25
+ --measure-small: 22em;
26
26
 
27
27
  --font-size-smallest: max(0.75rem, 12px);
28
28
  --font-size-small: max(0.875rem, 14px);
29
29
  --font-size-base: 1rem;
30
+ --font-size-medium: 1.125rem;
30
31
  --font-size-large: 1.25rem;
31
32
  --font-size-largest: 1.5rem;
32
33
  --font-size-display: 3.5rem;
package/src/styles/utils/base.css CHANGED
@@ -39,7 +39,7 @@
39
39
  @container description-list (min-width: 30rem) {
40
40
  :where(dt) {
41
41
  grid-column: 1 / 1;
42
- padding-inline-end: 2ch;
42
+ padding-inline-end: 1em;
43
43
  padding-block-end: 0;
44
44
  min-block-size: 100%;
45
45
 
@@ -78,19 +78,20 @@
78
78
  display: block;
79
79
  color: var(--color-surface-subtle);
80
80
  background-color: var(--color-text-base);
81
- padding: 0.25lh 1ch;
81
+ padding: 0.35em 0.5em;
82
82
  }
83
83
 
84
84
  :where(details) {
85
- --p-x-details: 2ch;
86
- --p-y-details: 0.75lh;
85
+ --p-x-details: 1em;
86
+ --p-y-details: 1em;
87
87
  --b-r-details: var(--border-radius-medium);
88
88
 
89
89
  background-color: var(--color-surface-muted);
90
90
  border-radius: var(--b-r-details);
91
- border: var(--border-width-thin) solid var(--color-border-base);
91
+ /* border: var(--border-width-thin) solid var(--color-border-base); */
92
92
  padding: var(--p-y-details) var(--p-x-details);
93
93
  inline-size: 100%;
94
+ box-shadow: 0 0 0 var(--border-width-thin) var(--color-border-base);
94
95
 
95
96
  & > summary {
96
97
  color: var(--color-text-base);
@@ -98,8 +99,7 @@
98
99
  font-weight: var(--font-weight-heading);
99
100
  border-radius: var(--b-r-details);
100
101
  padding: var(--p-y-details) var(--p-x-details);
101
- margin: calc(-1 * var(--p-y-details))
102
- calc(-1 * var(--p-x-details) + var(--border-width-thin));
102
+ margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details));
103
103
  }
104
104
 
105
105
  &[open] > summary {
@@ -112,7 +112,7 @@
112
112
  .note,
113
113
  blockquote {
114
114
  padding: 0;
115
- padding-inline-start: 2ch;
115
+ padding-inline-start: 1em;
116
116
  inline-size: 100%;
117
117
  color: var(--color-text-base);
118
118
  position: relative;
@@ -148,7 +148,7 @@
148
148
 
149
149
  & cite:before {
150
150
  content: "—";
151
- margin-inline-end: 0.5ch;
151
+ margin-inline-end: 0.5em;
152
152
  }
153
153
  }
154
154
 
@@ -209,7 +209,7 @@
209
209
  color: inherit;
210
210
  font-family: var(--font-family-link);
211
211
  text-decoration: underline;
212
- text-underline-offset: 0.25lh;
212
+ text-underline-offset: 0.35em;
213
213
  text-decoration-thickness: from-font;
214
214
  font-weight: var(--font-weight-default);
215
215
  text-decoration-color: currentColor;
@@ -254,7 +254,7 @@
254
254
  }
255
255
 
256
256
  :where(del, ins, mark, code, kbd, var) {
257
- padding-inline: 0.5ch;
257
+ padding-inline: 0.25em;
258
258
  border-radius: var(--border-radius-small);
259
259
  line-height: inherit;
260
260
  box-decoration-break: clone;
@@ -265,7 +265,7 @@
265
265
  font-family: var(--font-family-mono);
266
266
  letter-spacing: 0;
267
267
  font-weight: var(--font-weight-default);
268
- padding-block: 0.125lh;
268
+ padding-block: 0.2em;
269
269
  max-inline-size: fit-content;
270
270
  hyphens: none;
271
271
  tab-size: 4;
@@ -292,7 +292,7 @@
292
292
  }
293
293
 
294
294
  :where(pre) {
295
- padding: 0.5lh 2ch;
295
+ padding: 1em;
296
296
  inline-size: 100%;
297
297
  overflow-x: auto;
298
298
  color: var(--color-text-base);
@@ -336,7 +336,7 @@
336
336
  }
337
337
 
338
338
  :where(td, th) {
339
- padding: 0.4lh 1ch;
339
+ padding: 0.5em;
340
340
  line-height: var(--line-height-small);
341
341
  white-space: nowrap;
342
342
  font-variant-numeric: tabular-nums;
@@ -411,15 +411,15 @@
411
411
  }
412
412
 
413
413
  :where(ul, ol) {
414
- padding-inline-start: 2ch;
414
+ padding-inline-start: 1em;
415
415
  }
416
416
 
417
417
  :where(li + li) {
418
- margin-block-start: 0.5lh;
418
+ margin-block-start: 0.5em;
419
419
  }
420
420
 
421
421
  :where(li > :is(ul, ol)) {
422
- margin-block-start: 0.25lh;
422
+ margin-block-start: 0.5em;
423
423
  }
424
424
 
425
425
  @supports (font-variant-position: sub) {
@@ -465,7 +465,7 @@
465
465
  }
466
466
 
467
467
  :where(.quoted p:first-of-type::before) {
468
- margin-inline-start: -0.87ch;
468
+ margin-inline-start: -0.5em;
469
469
  }
470
470
  :where(.quoted p) {
471
471
  hanging-punctuation: first last;