@nordcode/ui 1.0.3 → 1.0.5

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 (17) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/out/bundle.css +25 -40
  3. package/out/bundle_configless.css +5 -5
  4. package/out/colors.css +0 -5
  5. package/out/complete.css +190 -183
  6. package/out/complete_configless.css +170 -148
  7. package/package.json +2 -1
  8. package/src/styles/components/alerts.css +20 -0
  9. package/src/styles/components/bundle.css +4 -3
  10. package/src/styles/components/buttons.css +4 -0
  11. package/src/styles/components/forms.css +5 -9
  12. package/src/styles/components/inputs/fields.css +7 -10
  13. package/src/styles/components/inputs/segmented.css +24 -33
  14. package/src/styles/components/inputs/tag-select.css +5 -8
  15. package/src/styles/config/config.css +253 -696
  16. package/src/styles/theme/colors.css +0 -13
  17. package/src/styles/utils/base.css +5 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,24 @@
1
+
2
+ ## v1.0.4 (2024-09-15)
3
+
4
+ ### New Features
5
+
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
+
9
+ ### Fixes
10
+
11
+ - Fixed Webkit `<detail>` style
12
+ - Shadows not working using `light-dark`
13
+
14
+ ## v1.0.5 (2024-11-28)
15
+
16
+ ### Fixes
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`
23
+
24
+ Be sure to checkout the updated markup for these components in the documentation.
package/out/bundle.css CHANGED
@@ -38,20 +38,15 @@
38
38
  --border-radius-medium: 4px;
39
39
  --border-radius-large: 8px;
40
40
  --border-radius-round: 100000px;
41
- --shadow-inset-light: inset .24px .8px 1.6px 0px #b4bed24d, inset .31px 1.04px 2.08px -4px #b4bed241;
42
- --shadow-nearest-light: .24px .8px 1.6px 0px #b4bed24d, .31px 1.04px 2.08px -4px #b4bed241;
43
- --shadow-near-light: .24px .8px 1.6px 0px #b4bed24d, .31px 1.04px 2.08px -1.33px #b4bed241, .41px 1.35px 2.7px -2.67px #b4bed237, .53px 1.76px 3.52px -4px #b4bed22f;
44
- --shadow-medium-light: .24px .8px 1.6px 0px #b4bed24d, .31px 1.04px 2.08px -.8px #b4bed241, .41px 1.35px 2.7px -1.6px #b4bed237, .53px 1.76px 3.52px -2.4px #b4bed22f, .68px 2.28px 4.56px -3.2px #b4bed228, .89px 2.97px 5.94px -4px #b4bed222;
45
- --shadow-far-light: .24px .8px 1.6px 0px #b4bed24d, .31px 1.04px 2.08px -.5px #b4bed241, .41px 1.35px 2.7px -1px #b4bed237, .53px 1.76px 3.52px -1.5px #b4bed22f, .68px 2.28px 4.56px -2px #b4bed228, .89px 2.97px 5.94px -2.5px #b4bed222, 1.16px 3.86px 7.72px -3px #b4bed21d, 1.51px 5.02px 10.04px -3.5px #b4bed219, 1.96px 6.53px 13.06px -4px #b4bed215;
41
+ --shadow-inset: inset .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), inset .9px 3px 6px -4px color-mix(in oklch, var(--shadow-color), transparent 60.5%);
42
+ --shadow-nearest: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -4px color-mix(in oklch, var(--shadow-color), transparent 60.5%);
43
+ --shadow-near: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -1.33px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -2.67px color-mix(in oklch, var(--shadow-color), transparent 68.79%), 8.1px 27px 54px -4px color-mix(in oklch, var(--shadow-color), transparent 75.35%);
44
+ --shadow-medium: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -.8px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -1.6px color-mix(in oklch, var(--shadow-color), transparent 68.79%), 8.1px 27px 54px -2.4px color-mix(in oklch, var(--shadow-color), transparent 75.35%), 24.3px 81px 162px -3.2px color-mix(in oklch, var(--shadow-color), transparent 80.52%), 72.9px 243px 486px -4px color-mix(in oklch, var(--shadow-color), transparent 84.61%);
45
+ --shadow-far: .3px 1px 2px 0px color-mix(in oklch, var(--shadow-color), transparent 50%), .9px 3px 6px -.5px color-mix(in oklch, var(--shadow-color), transparent 60.5%), 2.7px 9px 18px -1px color-mix(in oklch, var(--shadow-color), transparent 68.79%), 8.1px 27px 54px -1.5px color-mix(in oklch, var(--shadow-color), transparent 75.35%), 24.3px 81px 162px -2px color-mix(in oklch, var(--shadow-color), transparent 80.52%), 72.9px 243px 486px -2.5px color-mix(in oklch, var(--shadow-color), transparent 84.61%), 218.7px 729px 1458px -3px color-mix(in oklch, var(--shadow-color), transparent 87.85%), 656.1px 2187px 4374px -3.5px color-mix(in oklch, var(--shadow-color), transparent 90.4%), 1968.3px 6561px 13122px -4px color-mix(in oklch, var(--shadow-color), transparent 92.41%);
46
46
  --shadow-color-light: #b4bed2;
47
47
  --shadow-color-light-lch: 80% .03 265;
48
- --shadow-inset-dark: inset inset .24px .8px 1.6px 0px #212d474d, inset .31px 1.04px 2.08px -4px #212d4741;
49
- --shadow-nearest-dark: .24px .8px 1.6px 0px #212d474d, .31px 1.04px 2.08px -4px #212d4741;
50
- --shadow-near-dark: .24px .8px 1.6px 0px #212d474d, .31px 1.04px 2.08px -1.33px #212d4741, .41px 1.35px 2.7px -2.67px #212d4737, .53px 1.76px 3.52px -4px #212d472f;
51
- --shadow-medium-dark: .24px .8px 1.6px 0px #212d474d, .31px 1.04px 2.08px -.8px #212d4741, .41px 1.35px 2.7px -1.6px #212d4737, .53px 1.76px 3.52px -2.4px #212d472f, .68px 2.28px 4.56px -3.2px #212d4728, .89px 2.97px 5.94px -4px #212d4722;
52
- --shadow-far-dark: .24px .8px 1.6px 0px #212d474d, .31px 1.04px 2.08px -.5px #212d4741, .41px 1.35px 2.7px -1px #212d4737, .53px 1.76px 3.52px -1.5px #212d472f, .68px 2.28px 4.56px -2px #212d4728, .89px 2.97px 5.94px -2.5px #212d4722, 1.16px 3.86px 7.72px -3px #212d471d, 1.51px 5.02px 10.04px -3.5px #212d4719, 1.96px 6.53px 13.06px -4px #212d4715;
53
- --shadow-color-dark: #212d47;
54
- --shadow-color-dark-lch: 30% .05 265;
48
+ --shadow-color-dark: #131e37;
49
+ --shadow-color-dark-lch: 24% .05 265;
55
50
  --lightness-max: .99;
56
51
  --lightness-min: .03;
57
52
  --lightness-diff: calc(var(--lightness-max) - var(--lightness-min));
@@ -66,14 +61,14 @@
66
61
  --color-brand-primary-base-light: oklch(var(--l-brand-primary-light) var(--c-brand-primary) var(--h-brand-primary));
67
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%);
68
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%);
69
- --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)));
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)));
70
65
  --color-brand-primary-contrast-light: oklch(var(--color-brand-primary-contrast-lightness-light) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary));
71
66
  --color-brand-primary-hover-light: color-mix(in oklch, var(--color-brand-primary-base-light) calc(var(--transparency-weaker) * 10%), transparent);
72
67
  --l-brand-primary-dark: .75;
73
68
  --color-brand-primary-base-dark: oklch(var(--l-brand-primary-dark) var(--c-brand-primary) var(--h-brand-primary));
74
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%);
75
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%);
76
- --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)));
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)));
77
72
  --color-brand-primary-contrast-dark: oklch(var(--color-brand-primary-contrast-lightness-dark) var(--color-brand-primary-neutral-chroma) var(--h-brand-primary));
78
73
  --color-brand-primary-hover-dark: color-mix(in oklch, var(--color-brand-primary-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
79
74
  --c-brand-secondary: .4;
@@ -85,14 +80,14 @@
85
80
  --color-brand-secondary-base-light: oklch(var(--l-brand-secondary-light) var(--c-brand-secondary) var(--h-brand-secondary));
86
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%);
87
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%);
88
- --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)));
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)));
89
84
  --color-brand-secondary-contrast-light: oklch(var(--color-brand-secondary-contrast-lightness-light) var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary));
90
85
  --color-brand-secondary-hover-light: color-mix(in oklch, var(--color-brand-secondary-base-light) calc(var(--transparency-weaker) * 10%), transparent);
91
86
  --l-brand-secondary-dark: .76;
92
87
  --color-brand-secondary-base-dark: oklch(var(--l-brand-secondary-dark) var(--c-brand-secondary) var(--h-brand-secondary));
93
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%);
94
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%);
95
- --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)));
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)));
96
91
  --color-brand-secondary-contrast-dark: oklch(var(--color-brand-secondary-contrast-lightness-dark) var(--color-brand-secondary-neutral-chroma) var(--h-brand-secondary));
97
92
  --color-brand-secondary-hover-dark: color-mix(in oklch, var(--color-brand-secondary-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
98
93
  --l-text-light: .28;
@@ -165,14 +160,14 @@
165
160
  --color-status-success-base-light: oklch(var(--l-status-success-light) var(--c-status-success) var(--h-status-success));
166
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%);
167
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%);
168
- --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)));
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)));
169
164
  --color-status-success-contrast-light: oklch(var(--color-status-success-contrast-lightness-light) var(--color-status-success-neutral-chroma) var(--h-status-success));
170
165
  --color-status-success-hover-light: color-mix(in oklch, var(--color-status-success-base-light) calc(var(--transparency-weaker) * 10%), transparent);
171
166
  --l-status-success-dark: .75;
172
167
  --color-status-success-base-dark: oklch(var(--l-status-success-dark) var(--c-status-success) var(--h-status-success));
173
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%);
174
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%);
175
- --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)));
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)));
176
171
  --color-status-success-contrast-dark: oklch(var(--color-status-success-contrast-lightness-dark) var(--color-status-success-neutral-chroma) var(--h-status-success));
177
172
  --color-status-success-hover-dark: color-mix(in oklch, var(--color-status-success-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
178
173
  --c-status-warning: .3;
@@ -184,14 +179,14 @@
184
179
  --color-status-warning-base-light: oklch(var(--l-status-warning-light) var(--c-status-warning) var(--h-status-warning));
185
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%);
186
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%);
187
- --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)));
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)));
188
183
  --color-status-warning-contrast-light: oklch(var(--color-status-warning-contrast-lightness-light) var(--color-status-warning-neutral-chroma) var(--h-status-warning));
189
184
  --color-status-warning-hover-light: color-mix(in oklch, var(--color-status-warning-base-light) calc(var(--transparency-weaker) * 10%), transparent);
190
185
  --l-status-warning-dark: .75;
191
186
  --color-status-warning-base-dark: oklch(var(--l-status-warning-dark) var(--c-status-warning) var(--h-status-warning));
192
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%);
193
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%);
194
- --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)));
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)));
195
190
  --color-status-warning-contrast-dark: oklch(var(--color-status-warning-contrast-lightness-dark) var(--color-status-warning-neutral-chroma) var(--h-status-warning));
196
191
  --color-status-warning-hover-dark: color-mix(in oklch, var(--color-status-warning-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
197
192
  --c-status-danger: .3;
@@ -203,14 +198,14 @@
203
198
  --color-status-danger-base-light: oklch(var(--l-status-danger-light) var(--c-status-danger) var(--h-status-danger));
204
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%);
205
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%);
206
- --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)));
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)));
207
202
  --color-status-danger-contrast-light: oklch(var(--color-status-danger-contrast-lightness-light) var(--color-status-danger-neutral-chroma) var(--h-status-danger));
208
203
  --color-status-danger-hover-light: color-mix(in oklch, var(--color-status-danger-base-light) calc(var(--transparency-weaker) * 10%), transparent);
209
204
  --l-status-danger-dark: .75;
210
205
  --color-status-danger-base-dark: oklch(var(--l-status-danger-dark) var(--c-status-danger) var(--h-status-danger));
211
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%);
212
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%);
213
- --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)));
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)));
214
209
  --color-status-danger-contrast-dark: oklch(var(--color-status-danger-contrast-lightness-dark) var(--color-status-danger-neutral-chroma) var(--h-status-danger));
215
210
  --color-status-danger-hover-dark: color-mix(in oklch, var(--color-status-danger-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
216
211
  --c-status-info: .3;
@@ -222,32 +217,22 @@
222
217
  --color-status-info-base-light: oklch(var(--l-status-info-light) var(--c-status-info) var(--h-status-info));
223
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%);
224
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%);
225
- --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)));
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)));
226
221
  --color-status-info-contrast-light: oklch(var(--color-status-info-contrast-lightness-light) var(--color-status-info-neutral-chroma) var(--h-status-info));
227
222
  --color-status-info-hover-light: color-mix(in oklch, var(--color-status-info-base-light) calc(var(--transparency-weaker) * 10%), transparent);
228
223
  --l-status-info-dark: .75;
229
224
  --color-status-info-base-dark: oklch(var(--l-status-info-dark) var(--c-status-info) var(--h-status-info));
230
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%);
231
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%);
232
- --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)));
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)));
233
228
  --color-status-info-contrast-dark: oklch(var(--color-status-info-contrast-lightness-dark) var(--color-status-info-neutral-chroma) var(--h-status-info));
234
229
  --color-status-info-hover-dark: color-mix(in oklch, var(--color-status-info-base-dark) calc(var(--transparency-weaker) * 10%), transparent);
235
230
  }
236
231
 
237
232
  @supports (color: lab(0% 0 0)) {
238
233
  :where(html) {
239
- --shadow-inset-light: inset .24px .8px 1.6px 0px lab(76.6551% -.431716 -11.1996 / .3), inset .31px 1.04px 2.08px -4px lab(76.6551% -.431716 -11.1996 / .255);
240
- --shadow-nearest-light: .24px .8px 1.6px 0px lab(76.6551% -.431716 -11.1996 / .3), .31px 1.04px 2.08px -4px lab(76.6551% -.431716 -11.1996 / .255);
241
- --shadow-near-light: .24px .8px 1.6px 0px lab(76.6551% -.431716 -11.1996 / .3), .31px 1.04px 2.08px -1.33px lab(76.6551% -.431716 -11.1996 / .255), .41px 1.35px 2.7px -2.67px lab(76.6551% -.431716 -11.1996 / .2167), .53px 1.76px 3.52px -4px lab(76.6551% -.431716 -11.1996 / .1842);
242
- --shadow-medium-light: .24px .8px 1.6px 0px lab(76.6551% -.431716 -11.1996 / .3), .31px 1.04px 2.08px -.8px lab(76.6551% -.431716 -11.1996 / .255), .41px 1.35px 2.7px -1.6px lab(76.6551% -.431716 -11.1996 / .2167), .53px 1.76px 3.52px -2.4px lab(76.6551% -.431716 -11.1996 / .1842), .68px 2.28px 4.56px -3.2px lab(76.6551% -.431716 -11.1996 / .1566), .89px 2.97px 5.94px -4px lab(76.6551% -.431716 -11.1996 / .1331);
243
- --shadow-far-light: .24px .8px 1.6px 0px lab(76.6551% -.431716 -11.1996 / .3), .31px 1.04px 2.08px -.5px lab(76.6551% -.431716 -11.1996 / .255), .41px 1.35px 2.7px -1px lab(76.6551% -.431716 -11.1996 / .2167), .53px 1.76px 3.52px -1.5px lab(76.6551% -.431716 -11.1996 / .1842), .68px 2.28px 4.56px -2px lab(76.6551% -.431716 -11.1996 / .1566), .89px 2.97px 5.94px -2.5px lab(76.6551% -.431716 -11.1996 / .1331), 1.16px 3.86px 7.72px -3px lab(76.6551% -.431716 -11.1996 / .1131), 1.51px 5.02px 10.04px -3.5px lab(76.6551% -.431716 -11.1996 / .0962), 1.96px 6.53px 13.06px -4px lab(76.6551% -.431716 -11.1996 / .0817);
244
234
  --shadow-color-light: lab(76.6551% -.431716 -11.1996);
245
- --shadow-inset-dark: inset inset .24px .8px 1.6px 0px lab(18.4368% 1.36815 -18.0135 / .3), inset .31px 1.04px 2.08px -4px lab(18.4368% 1.36815 -18.0135 / .255);
246
- --shadow-nearest-dark: .24px .8px 1.6px 0px lab(18.4368% 1.36815 -18.0135 / .3), .31px 1.04px 2.08px -4px lab(18.4368% 1.36815 -18.0135 / .255);
247
- --shadow-near-dark: .24px .8px 1.6px 0px lab(18.4368% 1.36815 -18.0135 / .3), .31px 1.04px 2.08px -1.33px lab(18.4368% 1.36815 -18.0135 / .255), .41px 1.35px 2.7px -2.67px lab(18.4368% 1.36815 -18.0135 / .2167), .53px 1.76px 3.52px -4px lab(18.4368% 1.36815 -18.0135 / .1842);
248
- --shadow-medium-dark: .24px .8px 1.6px 0px lab(18.4368% 1.36815 -18.0135 / .3), .31px 1.04px 2.08px -.8px lab(18.4368% 1.36815 -18.0135 / .255), .41px 1.35px 2.7px -1.6px lab(18.4368% 1.36815 -18.0135 / .2167), .53px 1.76px 3.52px -2.4px lab(18.4368% 1.36815 -18.0135 / .1842), .68px 2.28px 4.56px -3.2px lab(18.4368% 1.36815 -18.0135 / .1566), .89px 2.97px 5.94px -4px lab(18.4368% 1.36815 -18.0135 / .1331);
249
- --shadow-far-dark: .24px .8px 1.6px 0px lab(18.4368% 1.36815 -18.0135 / .3), .31px 1.04px 2.08px -.5px lab(18.4368% 1.36815 -18.0135 / .255), .41px 1.35px 2.7px -1px lab(18.4368% 1.36815 -18.0135 / .2167), .53px 1.76px 3.52px -1.5px lab(18.4368% 1.36815 -18.0135 / .1842), .68px 2.28px 4.56px -2px lab(18.4368% 1.36815 -18.0135 / .1566), .89px 2.97px 5.94px -2.5px lab(18.4368% 1.36815 -18.0135 / .1331), 1.16px 3.86px 7.72px -3px lab(18.4368% 1.36815 -18.0135 / .1131), 1.51px 5.02px 10.04px -3.5px lab(18.4368% 1.36815 -18.0135 / .0962), 1.96px 6.53px 13.06px -4px lab(18.4368% 1.36815 -18.0135 / .0817);
250
- --shadow-color-dark: lab(18.4368% 1.36815 -18.0135);
235
+ --shadow-color-dark: lab(11.4338% 2.08272 -17.8892);
251
236
  }
252
237
  }
253
238
 
@@ -343,11 +328,6 @@
343
328
  --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));
344
329
  --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
345
330
  --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
346
- --shadow-inset: var(--lightningcss-light, var(--shadow-inset-light)) var(--lightningcss-dark, var(--shadow-inset-dark));
347
- --shadow-nearest: var(--lightningcss-light, var(--shadow-nearest-light)) var(--lightningcss-dark, var(--shadow-nearest-dark));
348
- --shadow-near: var(--lightningcss-light, var(--shadow-near-light)) var(--lightningcss-dark, var(--shadow-near-dark));
349
- --shadow-medium: var(--lightningcss-light, var(--shadow-medium-light)) var(--lightningcss-dark, var(--shadow-medium-dark));
350
- --shadow-far: var(--lightningcss-light, var(--shadow-far-light)) var(--lightningcss-dark, var(--shadow-far-dark));
351
331
  --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
352
332
  --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
353
333
  }
@@ -569,6 +549,10 @@
569
549
  padding-block-end: var(--p-y-details);
570
550
  }
571
551
 
552
+ :where(details) > summary::-webkit-details-marker {
553
+ display: none;
554
+ }
555
+
572
556
  :where(details) > summary {
573
557
  cursor: pointer;
574
558
  color: var(--color-text-base);
@@ -576,6 +560,7 @@
576
560
  font-weight: var(--font-weight-strong);
577
561
  padding-inline: var(--p-x-details);
578
562
  padding-block: var(--p-y-details);
563
+ list-style: none;
579
564
  }
580
565
 
581
566
  .note, blockquote {
package/out/bundle_configless.css CHANGED
@@ -78,11 +78,6 @@
78
78
  --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));
79
79
  --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
80
80
  --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
81
- --shadow-inset: var(--lightningcss-light, var(--shadow-inset-light)) var(--lightningcss-dark, var(--shadow-inset-dark));
82
- --shadow-nearest: var(--lightningcss-light, var(--shadow-nearest-light)) var(--lightningcss-dark, var(--shadow-nearest-dark));
83
- --shadow-near: var(--lightningcss-light, var(--shadow-near-light)) var(--lightningcss-dark, var(--shadow-near-dark));
84
- --shadow-medium: var(--lightningcss-light, var(--shadow-medium-light)) var(--lightningcss-dark, var(--shadow-medium-dark));
85
- --shadow-far: var(--lightningcss-light, var(--shadow-far-light)) var(--lightningcss-dark, var(--shadow-far-dark));
86
81
  --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
87
82
  --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
88
83
  }
@@ -304,6 +299,10 @@
304
299
  padding-block-end: var(--p-y-details);
305
300
  }
306
301
 
302
+ :where(details) > summary::-webkit-details-marker {
303
+ display: none;
304
+ }
305
+
307
306
  :where(details) > summary {
308
307
  cursor: pointer;
309
308
  color: var(--color-text-base);
@@ -311,6 +310,7 @@
311
310
  font-weight: var(--font-weight-strong);
312
311
  padding-inline: var(--p-x-details);
313
312
  padding-block: var(--p-y-details);
313
+ list-style: none;
314
314
  }
315
315
 
316
316
  .note, blockquote {
package/out/colors.css CHANGED
@@ -76,11 +76,6 @@
76
76
  --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));
77
77
  --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
78
78
  --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
79
- --shadow-inset: var(--lightningcss-light, var(--shadow-inset-light)) var(--lightningcss-dark, var(--shadow-inset-dark));
80
- --shadow-nearest: var(--lightningcss-light, var(--shadow-nearest-light)) var(--lightningcss-dark, var(--shadow-nearest-dark));
81
- --shadow-near: var(--lightningcss-light, var(--shadow-near-light)) var(--lightningcss-dark, var(--shadow-near-dark));
82
- --shadow-medium: var(--lightningcss-light, var(--shadow-medium-light)) var(--lightningcss-dark, var(--shadow-medium-dark));
83
- --shadow-far: var(--lightningcss-light, var(--shadow-far-light)) var(--lightningcss-dark, var(--shadow-far-dark));
84
79
  --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
85
80
  --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
86
81
  }