@nordcode/ui 1.0.12 → 1.1.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 (20) hide show
  1. package/ATTRIBUTION.md +3 -0
  2. package/CHANGELOG.md +10 -0
  3. package/out/bundle.css +159 -192
  4. package/out/bundle_configless.css +66 -68
  5. package/out/colors.css +1 -1
  6. package/out/complete.css +174 -208
  7. package/out/complete_configless.css +81 -84
  8. package/package.json +1 -1
  9. package/src/styles/components/forms.css +3 -3
  10. package/src/styles/components/icons.css +2 -2
  11. package/src/styles/components/inputs/base.css +6 -5
  12. package/src/styles/components/inputs/fields.css +2 -3
  13. package/src/styles/components/inputs/segmented.css +1 -1
  14. package/src/styles/components/inputs/tag-select.css +1 -1
  15. package/src/styles/config/config.css +583 -268
  16. package/src/styles/config/extras.css +0 -6
  17. package/src/styles/theme/colors.css +1 -1
  18. package/src/styles/utils/base.css +29 -28
  19. package/src/styles/utils/layouts.css +3 -8
  20. package/src/styles/utils/reset.css +57 -41
package/out/complete.css CHANGED
@@ -8,10 +8,10 @@
8
8
  --font-weight-heading: 600;
9
9
  --font-weight-active: 600;
10
10
  --font-weight-strong: 600;
11
- --line-height-large: 3.4ex;
12
- --line-height-base: 3ex;
13
- --line-height-small: 2.4ex;
14
- --tracking-base: 0ch;
11
+ --line-height-large: 1.75;
12
+ --line-height-base: 1.5;
13
+ --line-height-small: 1.2;
14
+ --tracking-base: normal;
15
15
  --tracking-tight: -.04ch;
16
16
  --tracking-wide: .06ch;
17
17
  --measure-large: 88ch;
@@ -51,182 +51,155 @@
51
51
  --lightness-min: .03;
52
52
  --lightness-diff: calc(var(--lightness-max) - var(--lightness-min));
53
53
  --lightness-contrast-cutoff: calc(var(--lightness-min) + var(--lightness-diff) * .5 + .05);
54
- --neutral-chroma-scale: .25;
54
+ --neutral-chroma-scale: .95;
55
55
  --c-brand-primary: .3;
56
56
  --h-brand-primary: 265;
57
- --color-brand-primary-neutral-chroma: calc(var(--c-brand-primary) * var(--neutral-chroma-scale));
58
- --color-brand-primary-white: oklch(var(--lightness-max) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary));
59
- --color-brand-primary-black: oklch(var(--lightness-min) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary));
60
57
  --l-brand-primary-light: .56;
61
58
  --color-brand-primary-base-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary));
62
- --color-brand-primary-emphasis-light: color-mix(in oklch, oklch(var(--l-brand-primary-light) calc(1.25 * var(--c-brand-primary)) var(--h-brand-primary)), var(--color-brand-primary-black) 15%);
63
- --color-brand-primary-surface-light: color-mix(in oklch, oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary)), var(--color-brand-primary-white) 96%);
64
- --color-brand-primary-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-brand-primary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
65
- --color-brand-primary-contrast-light: oklch(var(--color-brand-primary-contrast-lightness-light) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary));
66
- --color-brand-primary-hover-light: color-mix(in oklch, var(--color-brand-primary-base-light) calc(var(--transparency-weaker) * 10%), transparent);
59
+ --color-brand-primary-emphasis-light: oklch(calc(var(--l-brand-primary-light) * .85) calc(var(--c-brand-primary) * 1.1) var(--h-brand-primary));
60
+ --color-brand-primary-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-brand-primary-light) / 10) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
61
+ --color-brand-primary-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-primary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
62
+ --color-brand-primary-contrast-light: oklch(var(--color-brand-primary-contrast-lightness-light) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
63
+ --color-brand-primary-hover-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary) / calc(var(--transparency-weaker) / 10));
67
64
  --l-brand-primary-dark: .75;
68
65
  --color-brand-primary-base-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary));
69
- --color-brand-primary-emphasis-dark: color-mix(in oklch, oklch(var(--l-brand-primary-dark) calc(1.25 * var(--c-brand-primary)) var(--h-brand-primary)), var(--color-brand-primary-white) 15%);
70
- --color-brand-primary-surface-dark: color-mix(in oklch, oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary)), var(--color-brand-primary-black) 65%);
71
- --color-brand-primary-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-brand-primary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
72
- --color-brand-primary-contrast-dark: oklch(var(--color-brand-primary-contrast-lightness-dark) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary));
73
- --color-brand-primary-hover-dark: color-mix(in oklch, var(--color-brand-primary-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
66
+ --color-brand-primary-emphasis-dark: oklch(calc(var(--l-brand-primary-dark) * 1.25) calc(var(--c-brand-primary) * 1.1) var(--h-brand-primary));
67
+ --color-brand-primary-surface-dark: oklch(calc(var(--lightness-min) + var(--l-brand-primary-dark) / 3) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
68
+ --color-brand-primary-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-primary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
69
+ --color-brand-primary-contrast-dark: oklch(var(--color-brand-primary-contrast-lightness-dark) calc(var(--c-brand-primary) * .25) var(--h-brand-primary));
70
+ --color-brand-primary-hover-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary) / calc(var(--transparency-weaker) / 10));
74
71
  --c-brand-secondary: .4;
75
72
  --h-brand-secondary: 215;
76
- --color-brand-secondary-neutral-chroma: calc(var(--c-brand-secondary) * var(--neutral-chroma-scale));
77
- --color-brand-secondary-white: oklch(var(--lightness-max) var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary));
78
- --color-brand-secondary-black: oklch(var(--lightness-min) var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary));
79
73
  --l-brand-secondary-light: .51;
80
74
  --color-brand-secondary-base-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary));
81
- --color-brand-secondary-emphasis-light: color-mix(in oklch, oklch(var(--l-brand-secondary-light) calc(1.25 * var(--c-brand-secondary)) var(--h-brand-secondary)), var(--color-brand-secondary-black) 15%);
82
- --color-brand-secondary-surface-light: color-mix(in oklch, oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary)), var(--color-brand-secondary-white) 96%);
83
- --color-brand-secondary-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-brand-secondary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
84
- --color-brand-secondary-contrast-light: oklch(var(--color-brand-secondary-contrast-lightness-light) var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary));
85
- --color-brand-secondary-hover-light: color-mix(in oklch, var(--color-brand-secondary-base-light) calc(var(--transparency-weaker) * 10%), transparent);
75
+ --color-brand-secondary-emphasis-light: oklch(calc(var(--l-brand-secondary-light) * .85) calc(var(--c-brand-secondary) * 1.1) var(--h-brand-secondary));
76
+ --color-brand-secondary-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-brand-secondary-light) / 10) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
77
+ --color-brand-secondary-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-secondary-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
78
+ --color-brand-secondary-contrast-light: oklch(var(--color-brand-secondary-contrast-lightness-light) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
79
+ --color-brand-secondary-hover-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary) / calc(var(--transparency-weaker) / 10));
86
80
  --l-brand-secondary-dark: .76;
87
81
  --color-brand-secondary-base-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary));
88
- --color-brand-secondary-emphasis-dark: color-mix(in oklch, oklch(var(--l-brand-secondary-dark) calc(1.25 * var(--c-brand-secondary)) var(--h-brand-secondary)), var(--color-brand-secondary-white) 15%);
89
- --color-brand-secondary-surface-dark: color-mix(in oklch, oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary)), var(--color-brand-secondary-black) 65%);
90
- --color-brand-secondary-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-brand-secondary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
91
- --color-brand-secondary-contrast-dark: oklch(var(--color-brand-secondary-contrast-lightness-dark) var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary));
92
- --color-brand-secondary-hover-dark: color-mix(in oklch, var(--color-brand-secondary-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
82
+ --color-brand-secondary-emphasis-dark: oklch(calc(var(--l-brand-secondary-dark) * 1.25) calc(var(--c-brand-secondary) * 1.1) var(--h-brand-secondary));
83
+ --color-brand-secondary-surface-dark: oklch(calc(var(--lightness-min) + var(--l-brand-secondary-dark) / 3) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
84
+ --color-brand-secondary-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-brand-secondary-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
85
+ --color-brand-secondary-contrast-dark: oklch(var(--color-brand-secondary-contrast-lightness-dark) calc(var(--c-brand-secondary) * .25) var(--h-brand-secondary));
86
+ --color-brand-secondary-hover-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary) / calc(var(--transparency-weaker) / 10));
93
87
  --l-text-light: .28;
94
88
  --c-text-light: .03;
95
89
  --h-text-light: var(--h-brand-primary);
96
- --scale-text-light: .1;
97
- --color-text-neutral-chroma-light: calc(var(--c-text-light) * var(--neutral-chroma-scale));
98
- --color-text-contrast-light: oklch(var(--lightness-max) var(--color-text-neutral-chroma-light) var(--h-text-light));
90
+ --scale-text-light: 1.25;
99
91
  --color-text-base-light: oklch(var(--l-text-light) var(--c-text-light) var(--h-text-light));
100
- --color-text-muted-light: color-mix(in oklch, var(--color-text-base-light), var(--color-text-contrast-light) calc(var(--scale-text-light) * 100%));
101
- --color-text-subtle-light: color-mix(in oklch, var(--color-text-base-light), var(--color-text-contrast-light) calc(var(--scale-text-light) * 2 * 100%));
102
- --color-text-on-emphasis-light: var(--color-text-contrast-light);
103
- --color-text-hover-light: color-mix(in oklch, var(--color-text-base-light) calc(var(--transparency-weaker) * 10%), transparent);
92
+ --color-text-muted-light: oklch(calc(var(--l-text-light) * var(--scale-text-light)) calc(var(--c-text-light) * var(--neutral-chroma-scale)) var(--h-text-light));
93
+ --color-text-subtle-light: oklch(calc(var(--l-text-light) * var(--scale-text-light) * var(--scale-text-light)) calc(var(--c-text-light) * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) var(--h-text-light));
94
+ --color-text-on-emphasis-light: oklch(var(--lightness-max) var(--c-text-light) var(--h-text-light));
95
+ --color-text-hover-light: oklch(var(--l-text-light) var(--c-text-light) var(--h-text-light) / calc(var(--transparency-weaker) / 10));
104
96
  --l-text-dark: .88;
105
97
  --c-text-dark: .05;
106
98
  --h-text-dark: var(--h-brand-primary);
107
- --color-text-neutral-chroma-dark: calc(var(--c-text-dark) * var(--neutral-chroma-scale));
108
- --color-text-contrast-dark: oklch(var(--lightness-min) var(--color-text-neutral-chroma-dark) var(--h-text-dark));
99
+ --scale-text-dark: .88;
109
100
  --color-text-base-dark: oklch(var(--l-text-dark) var(--c-text-dark) var(--h-text-dark));
110
- --color-text-muted-dark: color-mix(in oklch, var(--color-text-base-dark), var(--color-text-contrast-dark) 12%);
111
- --color-text-subtle-dark: color-mix(in oklch, var(--color-text-base-dark), var(--color-text-contrast-dark) 24%);
112
- --color-text-on-emphasis-dark: var(--color-text-contrast-dark);
113
- --color-text-hover-dark: color-mix(in oklch, var(--color-text-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
101
+ --color-text-muted-dark: oklch(calc(var(--l-text-dark) * var(--scale-text-dark)) calc(var(--c-text-dark) * var(--scale-text-dark)) var(--h-text-dark));
102
+ --color-text-subtle-dark: oklch(calc(var(--l-text-dark) * var(--scale-text-dark) * var(--scale-text-dark)) calc(var(--c-text-dark) * var(--scale-text-dark) * var(--scale-text-dark)) var(--h-text-dark));
103
+ --color-text-on-emphasis-dark: oklch(var(--lightness-min) var(--c-text-dark) var(--h-text-dark));
104
+ --color-text-hover-dark: oklch(var(--l-text-dark) var(--c-text-dark) var(--h-text-dark) / calc(var(--transparency-weaker) / 10));
114
105
  --l-surface-light: .99;
115
106
  --c-surface-light: .03;
116
107
  --h-surface-light: var(--h-brand-primary);
117
- --scale-surface-light: .02;
118
- --color-surface-neutral-chroma-light: calc(var(--c-surface-light) * var(--neutral-chroma-scale));
119
- --color-surface-contrast-light: oklch(var(--lightness-min) var(--color-surface-neutral-chroma-light) var(--h-surface-light));
108
+ --scale-surface-light: .98;
120
109
  --color-surface-base-light: oklch(var(--l-surface-light) var(--c-surface-light) var(--h-surface-light));
121
- --color-surface-muted-light: color-mix(in oklch, var(--color-surface-base-light), var(--color-surface-contrast-light) calc(var(--scale-surface-light) * 100%));
122
- --color-surface-subtle-light: color-mix(in oklch, var(--color-surface-base-light), var(--color-surface-contrast-light) calc(var(--scale-surface-light) * 2 * 100%));
123
- --color-surface-emphasis-light: var(--color-surface-contrast-light);
110
+ --color-surface-muted-light: oklch(calc(var(--l-surface-light) * var(--scale-surface-light)) calc(var(--c-surface-light) * var(--neutral-chroma-scale)) var(--h-surface-light));
111
+ --color-surface-subtle-light: oklch(calc(var(--l-surface-light) * var(--scale-surface-light) * var(--scale-surface-light)) calc(var(--c-surface-light) * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) var(--h-surface-light));
112
+ --color-surface-emphasis-light: oklch(var(--lightness-min) var(--c-surface-light) var(--h-surface-light));
124
113
  --l-surface-dark: .15;
125
114
  --c-surface-dark: .05;
126
115
  --h-surface-dark: var(--h-brand-primary);
127
- --color-surface-neutral-chroma-dark: calc(var(--c-surface-dark) * var(--neutral-chroma-scale));
128
- --color-surface-contrast-dark: oklch(var(--lightness-max) var(--color-surface-neutral-chroma-dark) var(--h-surface-dark));
116
+ --scale-surface-dark: 1.3;
129
117
  --color-surface-base-dark: oklch(var(--l-surface-dark) var(--c-surface-dark) var(--h-surface-dark));
130
- --color-surface-muted-dark: color-mix(in oklch, var(--color-surface-base-dark), var(--color-surface-contrast-dark) 6%);
131
- --color-surface-subtle-dark: color-mix(in oklch, var(--color-surface-base-dark), var(--color-surface-contrast-dark) 12%);
132
- --color-surface-emphasis-dark: var(--color-surface-contrast-dark);
118
+ --color-surface-muted-dark: oklch(calc(var(--l-surface-dark) * var(--scale-surface-dark)) calc(var(--c-surface-dark) * var(--neutral-chroma-scale)) var(--h-surface-dark));
119
+ --color-surface-subtle-dark: oklch(calc(var(--l-surface-dark) * var(--scale-surface-dark) * var(--scale-surface-dark)) calc(var(--c-surface-dark) * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) var(--h-surface-dark));
120
+ --color-surface-emphasis-dark: oklch(var(--lightness-max) var(--c-surface-dark) var(--h-surface-dark));
133
121
  --l-border-light: .87;
134
122
  --c-border-light: .03;
135
123
  --h-border-light: var(--h-brand-primary);
136
- --scale-border-light: .1;
137
- --color-border-neutral-chroma-light: calc(var(--c-border-light) * var(--neutral-chroma-scale));
138
- --color-border-contrast-light: oklch(var(--lightness-max) var(--color-border-neutral-chroma-light) var(--h-border-light));
124
+ --scale-border-light: 1.025;
139
125
  --color-border-base-light: oklch(var(--l-border-light) var(--c-border-light) var(--h-border-light));
140
- --color-border-muted-light: color-mix(in oklch, var(--color-border-base-light), var(--color-border-contrast-light) calc(var(--scale-border-light) * 100%));
141
- --color-border-subtle-light: color-mix(in oklch, var(--color-border-base-light), var(--color-border-contrast-light) calc(var(--scale-border-light) * 2 * 100%));
142
- --color-border-on-emphasis-light: var(--color-border-contrast-light);
143
- --color-border-hover-light: color-mix(in oklch, var(--color-border-base-light) calc(var(--transparency-weaker) * 10%), transparent);
126
+ --color-border-muted-light: oklch(calc(var(--l-border-light) * var(--scale-border-light)) calc(var(--c-border-light) * var(--neutral-chroma-scale)) var(--h-border-light));
127
+ --color-border-subtle-light: oklch(calc(var(--l-border-light) * var(--scale-border-light) * var(--scale-border-light)) calc(var(--c-border-light) * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) var(--h-border-light));
128
+ --color-border-on-emphasis-light: oklch(var(--lightness-max) var(--c-border-light) var(--h-border-light));
129
+ --color-border-hover-light: oklch(var(--l-border-light) var(--c-border-light) var(--h-border-light) / calc(var(--transparency-weaker) / 10));
144
130
  --l-border-dark: .3;
145
131
  --c-border-dark: .05;
132
+ --scale-border-dark: .98;
146
133
  --h-border-dark: var(--h-brand-primary);
147
- --color-border-neutral-chroma-dark: calc(var(--c-border-dark) * var(--neutral-chroma-scale));
148
- --color-border-contrast-dark: oklch(var(--lightness-min) var(--color-border-neutral-chroma-dark) var(--h-border-dark));
149
134
  --color-border-base-dark: oklch(var(--l-border-dark) var(--c-border-dark) var(--h-border-dark));
150
- --color-border-muted-dark: color-mix(in oklch, var(--color-border-base-dark), var(--color-border-contrast-dark) 12%);
151
- --color-border-subtle-dark: color-mix(in oklch, var(--color-border-base-dark), var(--color-border-contrast-dark) 24%);
152
- --color-border-on-emphasis-dark: var(--color-border-contrast-dark);
153
- --color-border-hover-dark: color-mix(in oklch, var(--color-border-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
135
+ --color-border-muted-dark: oklch(calc(var(--l-border-dark) * var(--scale-border-dark)) calc(var(--c-border-dark) * var(--neutral-chroma-scale)) var(--h-border-dark));
136
+ --color-border-subtle-dark: oklch(calc(var(--l-border-dark) * var(--scale-border-dark) * var(--scale-border-dark)) calc(var(--c-border-dark) * var(--neutral-chroma-scale) * var(--neutral-chroma-scale)) var(--h-border-dark));
137
+ --color-border-on-emphasis-dark: oklch(var(--lightness-min) var(--c-border-dark) var(--h-border-dark));
138
+ --color-border-hover-dark: oklch(var(--l-border-dark) var(--c-border-dark) var(--h-border-dark) / calc(var(--transparency-weaker) / 10));
154
139
  --c-status-success: .3;
155
140
  --h-status-success: 142;
156
- --color-status-success-neutral-chroma: calc(var(--c-status-success) * var(--neutral-chroma-scale));
157
- --color-status-success-white: oklch(var(--lightness-max) var(--color-status-success-neutral-chroma) var(--h-status-success));
158
- --color-status-success-black: oklch(var(--lightness-min) var(--color-status-success-neutral-chroma) var(--h-status-success));
159
141
  --l-status-success-light: .56;
160
142
  --color-status-success-base-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success));
161
- --color-status-success-emphasis-light: color-mix(in oklch, oklch(var(--l-status-success-light) calc(1.25 * var(--c-status-success)) var(--h-status-success)), var(--color-status-success-black) 15%);
162
- --color-status-success-surface-light: color-mix(in oklch, oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success)), var(--color-status-success-white) 96%);
163
- --color-status-success-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-success-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
164
- --color-status-success-contrast-light: oklch(var(--color-status-success-contrast-lightness-light) var(--color-status-success-neutral-chroma) var(--h-status-success));
165
- --color-status-success-hover-light: color-mix(in oklch, var(--color-status-success-base-light) calc(var(--transparency-weaker) * 10%), transparent);
143
+ --color-status-success-emphasis-light: oklch(calc(var(--l-status-success-light) * .85) calc(var(--c-status-success) * 1.1) var(--h-status-success));
144
+ --color-status-success-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-success-light) / 10) calc(var(--c-status-success) * .25) var(--h-status-success));
145
+ --color-status-success-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-success-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
146
+ --color-status-success-contrast-light: oklch(var(--color-status-success-contrast-lightness-light) calc(var(--c-status-success) * .25) var(--h-status-success));
147
+ --color-status-success-hover-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success) / calc(var(--transparency-weaker) / 10));
166
148
  --l-status-success-dark: .75;
167
149
  --color-status-success-base-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success));
168
- --color-status-success-emphasis-dark: color-mix(in oklch, oklch(var(--l-status-success-dark) calc(1.25 * var(--c-status-success)) var(--h-status-success)), var(--color-status-success-white) 15%);
169
- --color-status-success-surface-dark: color-mix(in oklch, oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success)), var(--color-status-success-black) 65%);
170
- --color-status-success-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-success-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
171
- --color-status-success-contrast-dark: oklch(var(--color-status-success-contrast-lightness-dark) var(--color-status-success-neutral-chroma) var(--h-status-success));
172
- --color-status-success-hover-dark: color-mix(in oklch, var(--color-status-success-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
150
+ --color-status-success-emphasis-dark: oklch(calc(var(--l-status-success-dark) * 1.25) calc(var(--c-status-success) * 1.1) var(--h-status-success));
151
+ --color-status-success-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-success-dark) / 3) calc(var(--c-status-success) * .25) var(--h-status-success));
152
+ --color-status-success-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-success-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
153
+ --color-status-success-contrast-dark: oklch(var(--color-status-success-contrast-lightness-dark) calc(var(--c-status-success) * .25) var(--h-status-success));
154
+ --color-status-success-hover-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success) / calc(var(--transparency-weaker) / 10));
173
155
  --c-status-warning: .3;
174
156
  --h-status-warning: 97;
175
- --color-status-warning-neutral-chroma: calc(var(--c-status-warning) * var(--neutral-chroma-scale));
176
- --color-status-warning-white: oklch(var(--lightness-max) var(--color-status-warning-neutral-chroma) var(--h-status-warning));
177
- --color-status-warning-black: oklch(var(--lightness-min) var(--color-status-warning-neutral-chroma) var(--h-status-warning));
178
157
  --l-status-warning-light: .56;
179
158
  --color-status-warning-base-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning));
180
- --color-status-warning-emphasis-light: color-mix(in oklch, oklch(var(--l-status-warning-light) calc(1.25 * var(--c-status-warning)) var(--h-status-warning)), var(--color-status-warning-black) 15%);
181
- --color-status-warning-surface-light: color-mix(in oklch, oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning)), var(--color-status-warning-white) 96%);
182
- --color-status-warning-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-warning-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
183
- --color-status-warning-contrast-light: oklch(var(--color-status-warning-contrast-lightness-light) var(--color-status-warning-neutral-chroma) var(--h-status-warning));
184
- --color-status-warning-hover-light: color-mix(in oklch, var(--color-status-warning-base-light) calc(var(--transparency-weaker) * 10%), transparent);
159
+ --color-status-warning-emphasis-light: oklch(calc(var(--l-status-warning-light) * .85) calc(var(--c-status-warning) * 1.1) var(--h-status-warning));
160
+ --color-status-warning-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-warning-light) / 10) calc(var(--c-status-warning) * .25) var(--h-status-warning));
161
+ --color-status-warning-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-warning-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
162
+ --color-status-warning-contrast-light: oklch(var(--color-status-warning-contrast-lightness-light) calc(var(--c-status-warning) * .25) var(--h-status-warning));
163
+ --color-status-warning-hover-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning) / calc(var(--transparency-weaker) / 10));
185
164
  --l-status-warning-dark: .75;
186
165
  --color-status-warning-base-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning));
187
- --color-status-warning-emphasis-dark: color-mix(in oklch, oklch(var(--l-status-warning-dark) calc(1.25 * var(--c-status-warning)) var(--h-status-warning)), var(--color-status-warning-white) 15%);
188
- --color-status-warning-surface-dark: color-mix(in oklch, oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning)), var(--color-status-warning-black) 65%);
189
- --color-status-warning-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-warning-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
190
- --color-status-warning-contrast-dark: oklch(var(--color-status-warning-contrast-lightness-dark) var(--color-status-warning-neutral-chroma) var(--h-status-warning));
191
- --color-status-warning-hover-dark: color-mix(in oklch, var(--color-status-warning-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
166
+ --color-status-warning-emphasis-dark: oklch(calc(var(--l-status-warning-dark) * 1.25) calc(var(--c-status-warning) * 1.1) var(--h-status-warning));
167
+ --color-status-warning-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-warning-dark) / 3) calc(var(--c-status-warning) * .25) var(--h-status-warning));
168
+ --color-status-warning-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-warning-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
169
+ --color-status-warning-contrast-dark: oklch(var(--color-status-warning-contrast-lightness-dark) calc(var(--c-status-warning) * .25) var(--h-status-warning));
170
+ --color-status-warning-hover-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning) / calc(var(--transparency-weaker) / 10));
192
171
  --c-status-danger: .3;
193
172
  --h-status-danger: 32;
194
- --color-status-danger-neutral-chroma: calc(var(--c-status-danger) * var(--neutral-chroma-scale));
195
- --color-status-danger-white: oklch(var(--lightness-max) var(--color-status-danger-neutral-chroma) var(--h-status-danger));
196
- --color-status-danger-black: oklch(var(--lightness-min) var(--color-status-danger-neutral-chroma) var(--h-status-danger));
197
173
  --l-status-danger-light: .56;
198
174
  --color-status-danger-base-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger));
199
- --color-status-danger-emphasis-light: color-mix(in oklch, oklch(var(--l-status-danger-light) calc(1.25 * var(--c-status-danger)) var(--h-status-danger)), var(--color-status-danger-black) 15%);
200
- --color-status-danger-surface-light: color-mix(in oklch, oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger)), var(--color-status-danger-white) 96%);
201
- --color-status-danger-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-danger-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
202
- --color-status-danger-contrast-light: oklch(var(--color-status-danger-contrast-lightness-light) var(--color-status-danger-neutral-chroma) var(--h-status-danger));
203
- --color-status-danger-hover-light: color-mix(in oklch, var(--color-status-danger-base-light) calc(var(--transparency-weaker) * 10%), transparent);
175
+ --color-status-danger-emphasis-light: oklch(calc(var(--l-status-danger-light) * .85) calc(var(--c-status-danger) * 1.1) var(--h-status-danger));
176
+ --color-status-danger-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-danger-light) / 10) calc(var(--c-status-danger) * .25) var(--h-status-danger));
177
+ --color-status-danger-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-danger-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
178
+ --color-status-danger-contrast-light: oklch(var(--color-status-danger-contrast-lightness-light) calc(var(--c-status-danger) * .25) var(--h-status-danger));
179
+ --color-status-danger-hover-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger) / calc(var(--transparency-weaker) / 10));
204
180
  --l-status-danger-dark: .75;
205
181
  --color-status-danger-base-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger));
206
- --color-status-danger-emphasis-dark: color-mix(in oklch, oklch(var(--l-status-danger-dark) calc(1.25 * var(--c-status-danger)) var(--h-status-danger)), var(--color-status-danger-white) 15%);
207
- --color-status-danger-surface-dark: color-mix(in oklch, oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger)), var(--color-status-danger-black) 65%);
208
- --color-status-danger-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-danger-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
209
- --color-status-danger-contrast-dark: oklch(var(--color-status-danger-contrast-lightness-dark) var(--color-status-danger-neutral-chroma) var(--h-status-danger));
210
- --color-status-danger-hover-dark: color-mix(in oklch, var(--color-status-danger-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
182
+ --color-status-danger-emphasis-dark: oklch(calc(var(--l-status-danger-dark) * 1.25) calc(var(--c-status-danger) * 1.1) var(--h-status-danger));
183
+ --color-status-danger-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-danger-dark) / 3) calc(var(--c-status-danger) * .25) var(--h-status-danger));
184
+ --color-status-danger-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-danger-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
185
+ --color-status-danger-contrast-dark: oklch(var(--color-status-danger-contrast-lightness-dark) calc(var(--c-status-danger) * .25) var(--h-status-danger));
186
+ --color-status-danger-hover-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger) / calc(var(--transparency-weaker) / 10));
211
187
  --c-status-info: .3;
212
188
  --h-status-info: 245;
213
- --color-status-info-neutral-chroma: calc(var(--c-status-info) * var(--neutral-chroma-scale));
214
- --color-status-info-white: oklch(var(--lightness-max) var(--color-status-info-neutral-chroma) var(--h-status-info));
215
- --color-status-info-black: oklch(var(--lightness-min) var(--color-status-info-neutral-chroma) var(--h-status-info));
216
189
  --l-status-info-light: .56;
217
190
  --color-status-info-base-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info));
218
- --color-status-info-emphasis-light: color-mix(in oklch, oklch(var(--l-status-info-light) calc(1.25 * var(--c-status-info)) var(--h-status-info)), var(--color-status-info-black) 15%);
219
- --color-status-info-surface-light: color-mix(in oklch, oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info)), var(--color-status-info-white) 96%);
220
- --color-status-info-contrast-lightness-light: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-info-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
221
- --color-status-info-contrast-light: oklch(var(--color-status-info-contrast-lightness-light) var(--color-status-info-neutral-chroma) var(--h-status-info));
222
- --color-status-info-hover-light: color-mix(in oklch, var(--color-status-info-base-light) calc(var(--transparency-weaker) * 10%), transparent);
191
+ --color-status-info-emphasis-light: oklch(calc(var(--l-status-info-light) * .85) calc(var(--c-status-info) * 1.1) var(--h-status-info));
192
+ --color-status-info-surface-light: oklch(calc(var(--lightness-max) - .1 + var(--l-status-info-light) / 10) calc(var(--c-status-info) * .25) var(--h-status-info));
193
+ --color-status-info-contrast-lightness-light: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-info-light) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
194
+ --color-status-info-contrast-light: oklch(var(--color-status-info-contrast-lightness-light) calc(var(--c-status-info) * .25) var(--h-status-info));
195
+ --color-status-info-hover-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
223
196
  --l-status-info-dark: .75;
224
197
  --color-status-info-base-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info));
225
- --color-status-info-emphasis-dark: color-mix(in oklch, oklch(var(--l-status-info-dark) calc(1.25 * var(--c-status-info)) var(--h-status-info)), var(--color-status-info-white) 15%);
226
- --color-status-info-surface-dark: color-mix(in oklch, oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info)), var(--color-status-info-black) 65%);
227
- --color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - (var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
228
- --color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) var(--color-status-info-neutral-chroma) var(--h-status-info));
229
- --color-status-info-hover-dark: color-mix(in oklch, var(--color-status-info-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
198
+ --color-status-info-emphasis-dark: oklch(calc(var(--l-status-info-dark) * 1.25) calc(var(--c-status-info) * 1.1) var(--h-status-info));
199
+ --color-status-info-surface-dark: oklch(calc(var(--lightness-min) + var(--l-status-info-dark) / 3) calc(var(--c-status-info) * .25) var(--h-status-info));
200
+ --color-status-info-contrast-lightness-dark: calc(var(--lightness-max) - ( var(--lightness-diff) * min(max((var(--l-status-info-dark) - var(--lightness-contrast-cutoff)) * 1000000, 0), 1)));
201
+ --color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) calc(var(--c-status-info) * .25) var(--h-status-info));
202
+ --color-status-info-hover-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info) / calc(var(--transparency-weaker) / 10));
230
203
  }
231
204
 
232
205
  @supports (color: lab(0% 0 0)) {
@@ -243,10 +216,6 @@
243
216
  --font-family-button: var(--font-family-default);
244
217
  --input-height-base: 2.5rem;
245
218
  --input-height-small: 2rem;
246
- --triangle-down-url-dark: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 84L12.7609 19.5L87.2391 19.5L50 84Z' fill='%23fff4f5'/%3E%3C/svg%3E");
247
- --triangle-up-url-dark: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 16L87.2391 80.5H12.7609L50 16Z' fill='%23fff4f5'/%3E%3C/svg%3E%0A");
248
- --triangle-down-url-light: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 84L12.7609 19.5L87.2391 19.5L50 84Z' fill='%231a0004'/%3E%3C/svg%3E");
249
- --triangle-up-url-light: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 16L87.2391 80.5H12.7609L50 16Z' fill='%231a0004'/%3E%3C/svg%3E%0A");
250
219
  }
251
220
  }
252
221
 
@@ -276,7 +245,7 @@
276
245
  color-scheme: dark;
277
246
  }
278
247
 
279
- :where(*) {
248
+ :where(:root) {
280
249
  --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
281
250
  --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
282
251
  --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
@@ -336,10 +305,6 @@
336
305
  @layer reset {
337
306
  *, :after, :before {
338
307
  box-sizing: border-box;
339
- accent-color: var(--color-brand-primary-base);
340
- font-kerning: normal;
341
- -moz-osx-font-smoothing: grayscale;
342
- -webkit-font-smoothing: antialiased;
343
308
  }
344
309
 
345
310
  :where(:not(dialog)) {
@@ -353,11 +318,17 @@
353
318
  border-width: 0;
354
319
  }
355
320
 
356
- :where(:focus-visible) {
357
- transition: outline-offset var(--transition-duration-short) var(--ease-2);
321
+ @media (prefers-reduced-motion: no-preference) {
322
+ :where(:focus-visible) {
323
+ transition: outline-offset var(--transition-duration-short) var(--ease-2);
324
+ }
325
+
326
+ :where(:not(:active):focus-visible) {
327
+ transition-duration: var(--transition-duration-base);
328
+ }
358
329
  }
359
330
 
360
- :where(:focus-visible, :focus) {
331
+ :where(:not(:active):focus-visible) {
361
332
  outline: var(--border-width-medium) solid var(--color-brand-primary-base);
362
333
  outline-offset: 1ch;
363
334
  }
@@ -366,25 +337,25 @@
366
337
  outline: none;
367
338
  }
368
339
 
369
- :where(html) {
340
+ :where(:root) {
370
341
  -webkit-text-size-adjust: none;
371
342
  -moz-text-size-adjust: none;
372
343
  text-size-adjust: none;
373
344
  block-size: 100%;
374
- }
375
-
376
- :where(body) {
345
+ color: var(--color-text-base);
346
+ background-color: var(--color-surface-muted);
377
347
  font-family: var(--font-family-default);
348
+ line-height: var(--line-height-base);
378
349
  font-weight: var(--font-weight-default);
379
350
  font-size-adjust: from-font;
380
- line-height: var(--line-height-base);
381
- color: var(--color-text-base);
382
- background-color: var(--color-surface-muted);
383
- min-block-size: 100vh;
351
+ interpolate-size: allow-keywords;
352
+ font-kerning: normal;
353
+ -moz-osx-font-smoothing: grayscale;
354
+ -webkit-font-smoothing: antialiased;
384
355
  }
385
356
 
386
- :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
387
- margin: 0;
357
+ :where(body) {
358
+ min-block-size: 100vh;
388
359
  }
389
360
 
390
361
  :where(ul[role="list"], ol[role="list"]) {
@@ -411,13 +382,17 @@
411
382
  }
412
383
 
413
384
  :where(figure) {
414
- flex-direction: column;
385
+ grid-template-rows: 1fr auto;
386
+ place-content: center;
415
387
  gap: 0;
416
- display: flex;
388
+ display: grid;
417
389
  }
418
390
 
419
- :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
391
+ :where(a[href], area, button, input:not([type="text"], [type="email"], [type="number"], [type="password"], [type=""], [type="tel"], [type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"], pre)) {
420
392
  cursor: pointer;
393
+ }
394
+
395
+ :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
421
396
  touch-action: manipulation;
422
397
  -webkit-tap-highlight-color: transparent;
423
398
  }
@@ -434,19 +409,10 @@
434
409
  letter-spacing: inherit;
435
410
  }
436
411
 
437
- :where(label:not(class) + input, label:not(class) + select, label:not(class) + textarea) {
438
- display: block;
439
- }
440
-
441
- :where(p, summary) {
442
- max-inline-size: var(--measure-base);
443
- font-size: inherit;
444
- line-height: var(--line-height-base);
445
- margin: 0;
446
- }
447
-
448
412
  :where(p) {
413
+ text-wrap: balance;
449
414
  text-wrap: pretty;
415
+ max-inline-size: var(--measure-base);
450
416
  }
451
417
 
452
418
  :where(html):has(dialog:modal) {
@@ -456,6 +422,12 @@
456
422
  }
457
423
 
458
424
  @layer base {
425
+ :where(:root) {
426
+ accent-color: var(--color-brand-primary-base);
427
+ caret-color: var(--color-brand-primary-base);
428
+ scrollbar-color: var(--color-text-subtle) transparent;
429
+ }
430
+
459
431
  :where(dt) {
460
432
  font-weight: var(--font-weight-active);
461
433
  color: var(--color-text-base);
@@ -525,9 +497,6 @@
525
497
  }
526
498
 
527
499
  :where(figcaption) {
528
- font-family: var(--font-family-sans);
529
- font-weight: var(--font-weight-default);
530
- line-height: var(--line-height-base);
531
500
  color: var(--color-surface-subtle);
532
501
  background-color: var(--color-text-base);
533
502
  padding: .3lh 1ch;
@@ -536,33 +505,26 @@
536
505
 
537
506
  :where(details) {
538
507
  --p-x-details: 2ch;
539
- --p-y-details: .75lh;
540
- background-color: var(--color-surface-subtle);
508
+ --p-y-details: .8lh;
509
+ background-color: var(--color-surface-muted);
541
510
  border-radius: var(--border-radius-medium);
542
511
  border: var(--border-width-thin) solid var(--color-border-base);
543
- inline-size: 100%;
544
- }
545
-
546
- :where(details) > * {
547
- padding-inline: var(--p-x-details);
548
- }
549
-
550
- :where(details) > :last-child {
551
- padding-block-end: var(--p-y-details);
552
- }
553
-
554
- :where(details) > summary::-webkit-details-marker {
555
- display: none;
512
+ padding: var(--p-y-details) var(--p-x-details);
556
513
  }
557
514
 
558
515
  :where(details) > summary {
559
- cursor: pointer;
560
516
  color: var(--color-text-base);
561
- inline-size: 100%;
562
- font-weight: var(--font-weight-strong);
563
- padding-inline: var(--p-x-details);
564
- padding-block: var(--p-y-details);
565
- list-style: none;
517
+ background: var(--color-surface-subtle);
518
+ border-radius: var(--border-radius-medium);
519
+ font-weight: var(--font-weight-heading);
520
+ padding: var(--p-y-details) var(--p-x-details);
521
+ margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details) + var(--border-width-thin));
522
+ }
523
+
524
+ :where(details)[open] > summary {
525
+ border-end-end-radius: 0;
526
+ border-end-start-radius: 0;
527
+ margin-block-end: var(--p-y-details);
566
528
  }
567
529
 
568
530
  .note, blockquote {
@@ -609,9 +571,10 @@
609
571
  }
610
572
 
611
573
  :where(hr) {
612
- border-top: var(--border-width-medium) solid var(--color-border-base);
613
- block-size: 0;
614
574
  inline-size: 100%;
575
+ block-size: var(--border-width-medium);
576
+ background: var(--color-border-base);
577
+ border-block-start: 0;
615
578
  }
616
579
 
617
580
  :where(h1, h2, h3, h4, h5, h6) {
@@ -693,6 +656,11 @@
693
656
  font-weight: var(--font-weight-default);
694
657
  }
695
658
 
659
+ :where(abbr) {
660
+ -webkit-text-decoration-color: var(--color-brand-primary-base);
661
+ text-decoration-color: var(--color-brand-primary-base);
662
+ }
663
+
696
664
  :where([aria-disabled="true"], .disabled, :disabled) {
697
665
  color: inherit;
698
666
  opacity: 1;
@@ -857,8 +825,12 @@
857
825
  padding-inline-start: 2ch;
858
826
  }
859
827
 
860
- :where(li + li), :where(li > :is(ul, ol)) {
861
- margin-top: .5lh;
828
+ :where(li + li) {
829
+ margin-block-start: .5lh;
830
+ }
831
+
832
+ :where(li > :is(ul, ol)) {
833
+ margin-block-start: .3lh;
862
834
  }
863
835
  }
864
836
 
@@ -916,7 +888,7 @@
916
888
  }
917
889
 
918
890
  :where(.nc-flow) > * + * {
919
- margin-block-start: var(--flow-gap, .6lh);
891
+ margin-block-start: var(--flow-gap, .8lh);
920
892
  }
921
893
 
922
894
  :where(.nc-flow) > * {
@@ -928,16 +900,11 @@
928
900
  --flow-gap: 1.3lh;
929
901
  }
930
902
 
931
- :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + p {
932
- --flow-gap: .5lh;
933
- }
934
-
935
- :where(.nc-flow) > p + p {
936
- --flow-gap: .8lh;
903
+ :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
904
+ --flow-gap: .3lh;
937
905
  }
938
906
 
939
907
  :where(.nc-flow) > figure {
940
- margin-block: 1lh;
941
908
  margin-inline: 0;
942
909
  }
943
910
 
@@ -1916,12 +1883,12 @@
1916
1883
  }
1917
1884
 
1918
1885
  :where(legend:not([class]), .nc-legend) + * {
1919
- margin-block-start: var(--nc-legend-spacing, .75lh);
1886
+ margin-block-start: var(--nc-legend-spacing, .8lh);
1920
1887
  }
1921
1888
 
1922
1889
  :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) {
1923
- --nc-legend-spacing: 0;
1924
- margin-block-end: .6lh;
1890
+ --nc-legend-spacing: .125lh;
1891
+ margin-block-end: .5lh;
1925
1892
  }
1926
1893
  }
1927
1894
 
@@ -2006,7 +1973,7 @@
2006
1973
  }
2007
1974
 
2008
1975
  :where(.nc-icon)[data-size="inline"] {
2009
- --icon-size: .75lh;
1976
+ --icon-size: .8lh;
2010
1977
  }
2011
1978
 
2012
1979
  :where(.nc-icon)[data-size="button"] {
@@ -2039,7 +2006,6 @@
2039
2006
  font-weight: var(--font-weight-active);
2040
2007
  color: var(--color-text-base);
2041
2008
  font-size: inherit;
2042
- cursor: pointer;
2043
2009
  align-items: center;
2044
2010
  gap: .15lh;
2045
2011
  display: inline-flex;
@@ -2109,9 +2075,12 @@
2109
2075
 
2110
2076
  :where(textarea:not([class]), .nc-textarea) {
2111
2077
  min-block-size: calc(5lh + 2 * var(--_input-padding-block));
2078
+ max-block-size: 80svh;
2112
2079
  min-inline-size: var(--input-inline-size, 100%);
2113
2080
  max-inline-size: 100%;
2114
2081
  padding-block: var(--_input-padding-block);
2082
+ resize: block;
2083
+ field-sizing: content;
2115
2084
  }
2116
2085
 
2117
2086
  :where(input[type="checkbox"]:not([class]), input[type="radio"]:not([class]), .nc-input-checkbox, .nc-input-radio, .nc-input-switch) {
@@ -2119,14 +2088,12 @@
2119
2088
  border: var(--_input-border);
2120
2089
  --current-background: var(--_input-background);
2121
2090
  background: var(--current-background);
2122
- cursor: pointer;
2123
2091
  block-size: 1lh;
2124
2092
  inline-size: 1lh;
2125
2093
  transition: var(--transition-duration-short) background var(--ease-2);
2126
2094
  box-shadow: var(--_input-box-shadow);
2127
2095
  justify-content: center;
2128
2096
  align-items: center;
2129
- margin: 0;
2130
2097
  padding: 0;
2131
2098
  display: inline-flex;
2132
2099
  }
@@ -2202,12 +2169,12 @@
2202
2169
 
2203
2170
  :where(input[type="range"], .nc-input-range)::-webkit-slider-thumb {
2204
2171
  appearance: none;
2172
+ inline-size: calc(var(--button-height-base) * .7);
2173
+ block-size: calc(var(--button-height-base) * .7);
2205
2174
  border-radius: var(--_input-border-radius);
2206
2175
  border: var(--_input-border);
2207
2176
  border-color: var(--color-text-base);
2208
2177
  background-color: var(--color-text-base);
2209
- block-size: 1lh;
2210
- inline-size: 1lh;
2211
2178
  box-shadow: var(--shadow-near);
2212
2179
  cursor: pointer;
2213
2180
  }
@@ -2219,12 +2186,12 @@
2219
2186
 
2220
2187
  :where(input[type="range"], .nc-input-range)::-moz-range-thumb {
2221
2188
  appearance: none;
2189
+ inline-size: calc(var(--button-height-base) * .7);
2190
+ block-size: calc(var(--button-height-base) * .7);
2222
2191
  border-radius: var(--_input-border-radius);
2223
2192
  border: var(--_input-border);
2224
2193
  border-color: var(--color-text-base);
2225
2194
  background-color: var(--color-text-base);
2226
- block-size: 1lh;
2227
- inline-size: 1lh;
2228
2195
  box-shadow: var(--shadow-near);
2229
2196
  cursor: pointer;
2230
2197
  }
@@ -2238,7 +2205,7 @@
2238
2205
  --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
2239
2206
  --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
2240
2207
  --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
2241
- --nc-legend-spacing: .25lh;
2208
+ --nc-legend-spacing: .3lh;
2242
2209
  }
2243
2210
 
2244
2211
  :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
@@ -2279,13 +2246,12 @@
2279
2246
  max-inline-size: var(--input-field-max-inline-size);
2280
2247
  grid-template-columns: minmax(0, 1fr);
2281
2248
  place-items: start;
2282
- gap: .25lh;
2249
+ gap: .3lh;
2283
2250
  display: grid;
2284
2251
  }
2285
2252
 
2286
2253
  :where(.nc-input-field) > label, :where(.nc-input-field) > .nc-stack {
2287
- line-height: var(--line-height-small);
2288
- gap: .125lh;
2254
+ gap: .15lh;
2289
2255
  }
2290
2256
 
2291
2257
  :where(.nc-input-field) > .nc-cluster {
@@ -2353,7 +2319,7 @@
2353
2319
  --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
2354
2320
  --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
2355
2321
  --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
2356
- --nc-legend-spacing: .25lh;
2322
+ --nc-legend-spacing: .3lh;
2357
2323
  container: segmented-control / inline-size;
2358
2324
  }
2359
2325