@nordcode/ui 1.0.2 → 1.0.4

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 (14) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/out/bundle.css +26 -40
  3. package/out/bundle_configless.css +6 -5
  4. package/out/colors.css +0 -5
  5. package/out/complete.css +179 -168
  6. package/out/complete_configless.css +159 -133
  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/config/config.css +253 -696
  12. package/src/styles/theme/colors.css +0 -13
  13. package/src/styles/utils/base.css +5 -0
  14. package/src/styles/utils/reset.css +11 -11
package/out/complete.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
  }
@@ -402,6 +382,7 @@
402
382
  background-color: var(--color-surface-muted);
403
383
  font-family: var(--font-family-default);
404
384
  line-height: var(--line-height-base);
385
+ min-block-size: 100%;
405
386
  font-style: normal;
406
387
  }
407
388
 
@@ -568,6 +549,10 @@
568
549
  padding-block-end: var(--p-y-details);
569
550
  }
570
551
 
552
+ :where(details) > summary::-webkit-details-marker {
553
+ display: none;
554
+ }
555
+
571
556
  :where(details) > summary {
572
557
  cursor: pointer;
573
558
  color: var(--color-text-base);
@@ -575,6 +560,7 @@
575
560
  font-weight: var(--font-weight-strong);
576
561
  padding-inline: var(--p-x-details);
577
562
  padding-block: var(--p-y-details);
563
+ list-style: none;
578
564
  }
579
565
 
580
566
  .note, blockquote {
@@ -1390,6 +1376,27 @@
1390
1376
  margin-inline-end: auto;
1391
1377
  }
1392
1378
 
1379
+ @layer components.alerts {
1380
+ :where(.nc-alert) {
1381
+ background: var(--surface);
1382
+ color: var(--text);
1383
+ gap: 1ch;
1384
+ }
1385
+
1386
+ :where(.nc-alert) > .nc-icon {
1387
+ margin-block: calc((var(--line-height-base) - var(--icon-size)) / 2);
1388
+ }
1389
+
1390
+ :where(.nc-alert-title) {
1391
+ font-weight: var(--font-weight-heading);
1392
+ }
1393
+
1394
+ :where(.nc-alert.-filled) {
1395
+ background: var(--surface-hover);
1396
+ color: var(--text-hover);
1397
+ }
1398
+ }
1399
+
1393
1400
  @layer components.badge {
1394
1401
  :where(.badge) {
1395
1402
  font-family: var(--font-family-mono);
@@ -1405,6 +1412,44 @@
1405
1412
  }
1406
1413
  }
1407
1414
 
1415
+ @layer components.breadcrumbs {
1416
+ :where(.nc-breadcrumbs) {
1417
+ background-color: var(--nc-breadcrumbs-surface, transparent);
1418
+ inline-size: max-content;
1419
+ max-inline-size: 100%;
1420
+ color: var(--nc-breadcrumbs-text, --color-text-muted);
1421
+ }
1422
+
1423
+ :where(.nc-breadcrumb-item) {
1424
+ color: inherit;
1425
+ }
1426
+
1427
+ :where(.nc-breadcrumb-item):last-child {
1428
+ color: var(--color-brand-primary-base);
1429
+ }
1430
+
1431
+ :where(.nc-breadcrumb-item):not(:last-child):after {
1432
+ color: inherit;
1433
+ content: "›";
1434
+ font-size: inherit;
1435
+ padding-inline: 1ch;
1436
+ }
1437
+
1438
+ :where(.nc-breadcrumb-link) {
1439
+ color: inherit;
1440
+ text-decoration: none;
1441
+ }
1442
+
1443
+ :where(.nc-breadcrumb-link):hover {
1444
+ text-decoration: underline;
1445
+ }
1446
+
1447
+ :where(.nc-breadcrumb-link)[aria-current="page"] {
1448
+ pointer-events: none;
1449
+ color: var(--nc-breadcrumbs-text-active, --color-text-base);
1450
+ }
1451
+ }
1452
+
1408
1453
  @layer components.buttons {
1409
1454
  .buttonReset {
1410
1455
  background: none;
@@ -1576,6 +1621,10 @@
1576
1621
  padding: 0;
1577
1622
  }
1578
1623
 
1624
+ :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-aligned {
1625
+ margin-inline: calc(-1 * var(--_button-padding-inline));
1626
+ }
1627
+
1579
1628
  :where(input[type="file"]:not([class])) {
1580
1629
  color: var(--_input-color);
1581
1630
  background-color: var(--_input-background);
@@ -1800,6 +1849,54 @@
1800
1849
  }
1801
1850
  }
1802
1851
 
1852
+ @layer components.forms {
1853
+ :where(.nc-form) {
1854
+ inline-size: min(100%, var(--nc-form-max-inline-size, var(--measure-base)));
1855
+ }
1856
+
1857
+ :where(.nc-form-title) {
1858
+ font-size: var(--font-size-largest);
1859
+ font-weight: var(--font-weight-heading);
1860
+ line-height: var(--line-height-small);
1861
+ color: var(--color-text-base);
1862
+ }
1863
+
1864
+ :where(.nc-form-hint) {
1865
+ font-size: var(--font-size-large);
1866
+ color: var(--color-text-muted);
1867
+ margin-block: .5lh;
1868
+ }
1869
+
1870
+ :where(fieldset:not([class]), .nc-fieldset) {
1871
+ border: none;
1872
+ min-inline-size: 0;
1873
+ margin: 0;
1874
+ padding: 0;
1875
+ }
1876
+
1877
+ :where(legend:not([class]), .nc-legend) {
1878
+ font-family: var(--font-family-default);
1879
+ letter-spacing: var(--tracking-tight);
1880
+ font-weight: var(--font-weight-active);
1881
+ color: var(--text, var(--color-text-base));
1882
+ font-size: var(--font-size-base);
1883
+ border: none;
1884
+ border-radius: 0;
1885
+ inline-size: 100%;
1886
+ margin-block-end: .75lh;
1887
+ padding: 0;
1888
+ display: block;
1889
+ }
1890
+
1891
+ :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) {
1892
+ margin-block-end: 0;
1893
+ }
1894
+
1895
+ :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 {
1896
+ margin-block-end: .6lh;
1897
+ }
1898
+ }
1899
+
1803
1900
  @layer components.gallery {
1804
1901
  :where(.nc-gallery) {
1805
1902
  gap: var(--gallery-gap, var(--spacing-base));
@@ -2367,6 +2464,48 @@
2367
2464
  }
2368
2465
  }
2369
2466
 
2467
+ @layer components.lists {
2468
+ :where(.nc-meta-list) {
2469
+ inline-size: 100%;
2470
+ container: metalist / inline-size;
2471
+ }
2472
+
2473
+ :where(.nc-meta-list-item) {
2474
+ overflow-wrap: break-word;
2475
+ -webkit-hyphens: auto;
2476
+ hyphens: auto;
2477
+ inline-size: 100%;
2478
+ max-inline-size: 100%;
2479
+ }
2480
+
2481
+ :where(.nc-meta-list-item):not(:last-child) {
2482
+ margin-block-end: 1ch;
2483
+ }
2484
+
2485
+ @container metalist (width >= 20rem) {
2486
+ :where(.nc-meta-list-item) {
2487
+ inline-size: auto;
2488
+ }
2489
+
2490
+ :where(.nc-meta-list-item):not(:last-child):after {
2491
+ content: "";
2492
+ border-right: var(--border-width-medium) solid var(--color-border-muted);
2493
+ transform: calc(var(--border-width-medium) / 2);
2494
+ margin: 0 1ch;
2495
+ }
2496
+ }
2497
+
2498
+ :where(.nc-list-reset) {
2499
+ margin: 0;
2500
+ padding: 0;
2501
+ list-style: none;
2502
+ }
2503
+
2504
+ :where(.nc-list-reset) li {
2505
+ margin: 0;
2506
+ }
2507
+ }
2508
+
2370
2509
  @layer components.notifications {
2371
2510
  :root {
2372
2511
  --_notification-max-width: var(--notifications-max-width, 20rem);
@@ -2508,131 +2647,3 @@
2508
2647
  overflow-x: auto;
2509
2648
  }
2510
2649
  }
2511
-
2512
- @layer components.lists {
2513
- :where(.nc-meta-list) {
2514
- inline-size: 100%;
2515
- container: metalist / inline-size;
2516
- }
2517
-
2518
- :where(.nc-meta-list-item) {
2519
- overflow-wrap: break-word;
2520
- -webkit-hyphens: auto;
2521
- hyphens: auto;
2522
- inline-size: 100%;
2523
- max-inline-size: 100%;
2524
- }
2525
-
2526
- :where(.nc-meta-list-item):not(:last-child) {
2527
- margin-block-end: 1ch;
2528
- }
2529
-
2530
- @container metalist (width >= 20rem) {
2531
- :where(.nc-meta-list-item) {
2532
- inline-size: auto;
2533
- }
2534
-
2535
- :where(.nc-meta-list-item):not(:last-child):after {
2536
- content: "";
2537
- border-right: var(--border-width-medium) solid var(--color-border-muted);
2538
- transform: calc(var(--border-width-medium) / 2);
2539
- margin: 0 1ch;
2540
- }
2541
- }
2542
-
2543
- :where(.nc-list-reset) {
2544
- margin: 0;
2545
- padding: 0;
2546
- list-style: none;
2547
- }
2548
-
2549
- :where(.nc-list-reset) li {
2550
- margin: 0;
2551
- }
2552
- }
2553
-
2554
- @layer components.breadcrumbs {
2555
- :where(.nc-breadcrumbs) {
2556
- background-color: var(--nc-breadcrumbs-surface, transparent);
2557
- inline-size: max-content;
2558
- max-inline-size: 100%;
2559
- color: var(--nc-breadcrumbs-text, --color-text-muted);
2560
- }
2561
-
2562
- :where(.nc-breadcrumb-item) {
2563
- color: inherit;
2564
- }
2565
-
2566
- :where(.nc-breadcrumb-item):last-child {
2567
- color: var(--color-brand-primary-base);
2568
- }
2569
-
2570
- :where(.nc-breadcrumb-item):not(:last-child):after {
2571
- color: inherit;
2572
- content: "›";
2573
- font-size: inherit;
2574
- padding-inline: 1ch;
2575
- }
2576
-
2577
- :where(.nc-breadcrumb-link) {
2578
- color: inherit;
2579
- text-decoration: none;
2580
- }
2581
-
2582
- :where(.nc-breadcrumb-link):hover {
2583
- text-decoration: underline;
2584
- }
2585
-
2586
- :where(.nc-breadcrumb-link)[aria-current="page"] {
2587
- pointer-events: none;
2588
- color: var(--nc-breadcrumbs-text-active, --color-text-base);
2589
- }
2590
- }
2591
-
2592
- @layer components.forms {
2593
- :where(.nc-form) {
2594
- inline-size: min(100%, var(--nc-form-max-inline-size, var(--measure-base)));
2595
- }
2596
-
2597
- :where(.nc-form-title) {
2598
- font-size: var(--font-size-largest);
2599
- font-weight: var(--font-weight-heading);
2600
- line-height: var(--line-height-small);
2601
- color: var(--color-text-base);
2602
- }
2603
-
2604
- :where(.nc-form-hint) {
2605
- font-size: var(--font-size-large);
2606
- color: var(--color-text-muted);
2607
- margin-block: .5lh;
2608
- }
2609
-
2610
- :where(fieldset:not([class]), .nc-fieldset) {
2611
- border: none;
2612
- min-inline-size: 0;
2613
- margin: 0;
2614
- padding: 0;
2615
- }
2616
-
2617
- :where(legend:not([class]), .nc-legend) {
2618
- font-family: var(--font-family-default);
2619
- letter-spacing: var(--tracking-tight);
2620
- font-weight: var(--font-weight-active);
2621
- color: var(--text, var(--color-text-base));
2622
- font-size: var(--font-size-base);
2623
- border: none;
2624
- border-radius: 0;
2625
- inline-size: 100%;
2626
- margin-block-end: .75lh;
2627
- padding: 0;
2628
- display: block;
2629
- }
2630
-
2631
- :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) {
2632
- margin-block-end: 0;
2633
- }
2634
-
2635
- :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 {
2636
- margin-block-end: .6lh;
2637
- }
2638
- }