@navikt/ds-css 5.4.0 → 5.5.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 (21) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/baseline/_utilities.css +2 -0
  3. package/config/_mappings.js +28 -24
  4. package/dist/component/index.css +194 -76
  5. package/dist/component/index.min.css +31 -3
  6. package/dist/component/primitives.css +118 -0
  7. package/dist/component/primitives.min.css +29 -1
  8. package/dist/component/skeleton.css +4 -0
  9. package/dist/component/skeleton.min.css +1 -1
  10. package/dist/components.css +122 -0
  11. package/dist/components.min.css +30 -2
  12. package/dist/global/baseline.css +2 -0
  13. package/dist/global/baseline.min.css +1 -1
  14. package/dist/global/tokens.css +76 -76
  15. package/dist/global/tokens.min.css +1 -1
  16. package/dist/index.css +194 -76
  17. package/dist/index.min.css +31 -3
  18. package/package.json +2 -2
  19. package/primitives/box.css +117 -0
  20. package/primitives/index.css +1 -0
  21. package/skeleton.css +4 -0
package/dist/global/baseline.css CHANGED
@@ -82,6 +82,7 @@ legend {
82
82
  .navds-sr-only {
83
83
  border: 0;
84
84
  clip: rect(0, 0, 0, 0);
85
+ clip-path: inset(50%);
85
86
  height: 1px;
86
87
  margin: -1px;
87
88
  overflow: hidden;
@@ -104,6 +105,7 @@ legend {
104
105
  .navds-sr-only.focusable:active,
105
106
  .navds-sr-only.focusable:focus {
106
107
  clip: auto;
108
+ clip-path: none;
107
109
  height: auto;
108
110
  margin: 0;
109
111
  overflow: visible;
package/dist/global/baseline.min.css CHANGED
@@ -1 +1 @@
1
- :host,html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}[hidden]{display:none}@media (prefers-reduced-motion:reduce){:after,:before,:not(.navds-loader *):not(.navds-loader){-webkit-animation-delay:-1ms!important;animation-delay:-1ms!important;-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;background-attachment:scroll!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}.navds-sr-only,.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navds-sr-only.focusable:active,.navds-sr-only.focusable:focus,.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}:host,:root,[data-theme=light]{--a-shadow-focus:0 0 0 3px var(--a-border-focus);color:var(--a-text-default)}[data-theme=dark]{--a-shadow-focus:var(--a-shadow-focus-inverted);color:var(--a-text-on-inverted)}:host,body{font-family:var(--a-font-family,"Source Sans Pro",Arial,sans-serif);font-size:1.125rem;line-height:1.333}a{color:var(--a-text-action)}
1
+ :host,html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}[hidden]{display:none}@media (prefers-reduced-motion:reduce){:after,:before,:not(.navds-loader *):not(.navds-loader){-webkit-animation-delay:-1ms!important;animation-delay:-1ms!important;-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;background-attachment:scroll!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}.navds-sr-only,.sr-only{clip:rect(0,0,0,0);border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.navds-sr-only.focusable:active,.navds-sr-only.focusable:focus,.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;-webkit-clip-path:none;clip-path:none;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}:host,:root,[data-theme=light]{--a-shadow-focus:0 0 0 3px var(--a-border-focus);color:var(--a-text-default)}[data-theme=dark]{--a-shadow-focus:var(--a-shadow-focus-inverted);color:var(--a-text-on-inverted)}:host,body{font-family:var(--a-font-family,"Source Sans Pro",Arial,sans-serif);font-size:1.125rem;line-height:1.333}a{color:var(--a-text-action)}
package/dist/global/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 07 Sep 2023 12:27:29 GMT
3
+ * Generated on Wed, 13 Sep 2023 13:01:01 GMT
4
4
  */
5
5
 
6
6
  :root, :host {
@@ -172,25 +172,41 @@
172
172
  --a-breakpoint-sm-down: 479px;
173
173
  --a-breakpoint-sm: 480px;
174
174
  --a-breakpoint-xs: 0;
175
- --a-icon-on-info: var(--a-gray-900);
176
- --a-icon-on-warning: var(--a-gray-900);
177
- --a-icon-on-danger: var(--a-white);
178
- --a-icon-on-success: var(--a-white);
179
- --a-icon-on-action: var(--a-white);
180
- --a-icon-on-inverted: var(--a-white);
181
- --a-icon-on-neutral: var(--a-white);
182
- --a-icon-alt-3: var(--a-deepblue-500);
183
- --a-icon-alt-2: var(--a-limegreen-700);
184
- --a-icon-alt-1: var(--a-purple-500);
185
- --a-icon-info: var(--a-lightblue-800);
186
- --a-icon-warning: var(--a-orange-600);
187
- --a-icon-danger: var(--a-red-500);
188
- --a-icon-success: var(--a-green-500);
189
- --a-icon-action: var(--a-blue-500);
190
- --a-icon-action-on-action-subtle: var(--a-blue-600);
191
- --a-icon-action-selected: var(--a-blue-700);
192
- --a-icon-subtle: var(--a-grayalpha-700);
193
- --a-icon-default: var(--a-gray-900);
175
+ --a-data-border-6: var(--a-purple-400);
176
+ --a-data-border-5: var(--a-green-400);
177
+ --a-data-border-4: var(--a-lightblue-700);
178
+ --a-data-border-3: var(--a-orange-600);
179
+ --a-data-border-2: var(--a-deepblue-500);
180
+ --a-data-border-1: var(--a-blue-400);
181
+ --a-data-surface-6-subtle: var(--a-purple-200);
182
+ --a-data-surface-6: var(--a-purple-400);
183
+ --a-data-surface-5-subtle: var(--a-green-200);
184
+ --a-data-surface-5: var(--a-green-400);
185
+ --a-data-surface-4-subtle: var(--a-lightblue-500);
186
+ --a-data-surface-4: var(--a-lightblue-700);
187
+ --a-data-surface-3-subtle: var(--a-orange-300);
188
+ --a-data-surface-3: var(--a-orange-600);
189
+ --a-data-surface-2-subtle: var(--a-deepblue-200);
190
+ --a-data-surface-2: var(--a-deepblue-500);
191
+ --a-data-surface-1-subtle: var(--a-blue-100);
192
+ --a-data-surface-1: var(--a-blue-400);
193
+ --a-text-on-alt-3: var(--a-white);
194
+ --a-text-on-alt-2: var(--a-gray-900);
195
+ --a-text-on-alt-1: var(--a-white);
196
+ --a-text-on-info: var(--a-gray-900);
197
+ --a-text-on-warning: var(--a-gray-900);
198
+ --a-text-on-danger: var(--a-white);
199
+ --a-text-on-success: var(--a-white);
200
+ --a-text-on-action: var(--a-white);
201
+ --a-text-on-neutral: var(--a-white);
202
+ --a-text-on-inverted: var(--a-white);
203
+ --a-text-action: var(--a-blue-500);
204
+ --a-text-action-on-action-subtle: var(--a-blue-600);
205
+ --a-text-action-selected: var(--a-blue-700);
206
+ --a-text-danger: var(--a-red-500);
207
+ --a-text-visited: var(--a-purple-500);
208
+ --a-text-subtle: var(--a-grayalpha-700);
209
+ --a-text-default: var(--a-gray-900);
194
210
  --a-surface-alt-3: var(--a-deepblue-500);
195
211
  --a-surface-alt-3-strong: var(--a-deepblue-800);
196
212
  --a-surface-alt-3-moderate: var(--a-deepblue-200);
@@ -204,83 +220,65 @@
204
220
  --a-surface-info: var(--a-lightblue-500);
205
221
  --a-surface-info-moderate: var(--a-lightblue-200);
206
222
  --a-surface-info-subtle: var(--a-lightblue-100);
207
- --a-surface-info-subtle-hover: var(--a-lightblue-200);
208
223
  --a-surface-warning: var(--a-orange-500);
209
224
  --a-surface-warning-moderate: var(--a-orange-200);
210
225
  --a-surface-warning-subtle: var(--a-orange-100);
211
- --a-surface-warning-subtle-hover: var(--a-orange-200);
212
226
  --a-surface-danger: var(--a-red-500);
213
- --a-surface-danger-active: var(--a-red-700);
214
- --a-surface-danger-hover: var(--a-red-600);
215
227
  --a-surface-danger-moderate: var(--a-red-200);
216
228
  --a-surface-danger-subtle: var(--a-red-100);
217
- --a-surface-danger-subtle-hover: var(--a-red-200);
218
- --a-surface-success-hover: var(--a-green-600);
219
229
  --a-surface-success: var(--a-green-500);
220
230
  --a-surface-success-moderate: var(--a-green-200);
221
231
  --a-surface-success-subtle: var(--a-green-100);
222
- --a-surface-success-subtle-hover: var(--a-green-200);
223
232
  --a-surface-neutral: var(--a-gray-700);
224
- --a-surface-neutral-active: var(--a-gray-900);
225
233
  --a-surface-neutral-selected: var(--a-gray-900);
226
- --a-surface-neutral-hover: var(--a-gray-800);
227
234
  --a-surface-neutral-moderate: var(--a-grayalpha-200);
228
235
  --a-surface-neutral-subtle: var(--a-grayalpha-100);
229
- --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
230
236
  --a-surface-action: var(--a-blue-500);
231
237
  --a-surface-action-selected: var(--a-blue-700);
232
- --a-surface-action-selected-hover: var(--a-blue-800);
233
- --a-surface-action-active: var(--a-blue-700);
234
- --a-surface-action-hover: var(--a-blue-600);
235
238
  --a-surface-action-subtle: var(--a-blue-50);
236
- --a-surface-action-subtle-hover: var(--a-blue-100);
237
239
  --a-surface-inverted: var(--a-gray-900);
238
- --a-surface-inverted-active: var(--a-gray-700);
239
- --a-surface-inverted-hover: var(--a-gray-800);
240
240
  --a-surface-backdrop: var(--a-grayalpha-500);
241
241
  --a-surface-transparent: var(--a-transparent);
242
242
  --a-surface-subtle: var(--a-gray-50);
243
243
  --a-surface-selected: var(--a-blue-50);
244
+ --a-surface-default: var(--a-white);
245
+ --a-surface-info-subtle-hover: var(--a-lightblue-200);
246
+ --a-surface-warning-subtle-hover: var(--a-orange-200);
247
+ --a-surface-danger-active: var(--a-red-700);
248
+ --a-surface-danger-hover: var(--a-red-600);
249
+ --a-surface-danger-subtle-hover: var(--a-red-200);
250
+ --a-surface-success-hover: var(--a-green-600);
251
+ --a-surface-success-subtle-hover: var(--a-green-200);
252
+ --a-surface-neutral-hover: var(--a-gray-800);
253
+ --a-surface-neutral-active: var(--a-gray-900);
254
+ --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
255
+ --a-surface-action-selected-hover: var(--a-blue-800);
256
+ --a-surface-action-active: var(--a-blue-700);
257
+ --a-surface-action-hover: var(--a-blue-600);
258
+ --a-surface-action-subtle-hover: var(--a-blue-100);
259
+ --a-surface-inverted-active: var(--a-gray-700);
260
+ --a-surface-inverted-hover: var(--a-gray-800);
244
261
  --a-surface-active: var(--a-grayalpha-200);
245
262
  --a-surface-hover: var(--a-grayalpha-100);
246
- --a-surface-default: var(--a-white);
247
- --a-bg-subtle: var(--a-gray-100);
248
- --a-bg-default: var(--a-white);
249
- --a-text-on-alt-3: var(--a-white);
250
- --a-text-on-alt-2: var(--a-gray-900);
251
- --a-text-on-alt-1: var(--a-white);
252
- --a-text-on-info: var(--a-gray-900);
253
- --a-text-on-warning: var(--a-gray-900);
254
- --a-text-on-danger: var(--a-white);
255
- --a-text-on-success: var(--a-white);
256
- --a-text-on-action: var(--a-white);
257
- --a-text-on-neutral: var(--a-white);
258
- --a-text-on-inverted: var(--a-white);
259
- --a-text-action: var(--a-blue-500);
260
- --a-text-action-on-action-subtle: var(--a-blue-600);
261
- --a-text-action-selected: var(--a-blue-700);
262
- --a-text-danger: var(--a-red-500);
263
- --a-text-visited: var(--a-purple-500);
264
- --a-text-subtle: var(--a-grayalpha-700);
265
- --a-text-default: var(--a-gray-900);
266
- --a-data-border-6: var(--a-purple-400);
267
- --a-data-border-5: var(--a-green-400);
268
- --a-data-border-4: var(--a-lightblue-700);
269
- --a-data-border-3: var(--a-orange-600);
270
- --a-data-border-2: var(--a-deepblue-500);
271
- --a-data-border-1: var(--a-blue-400);
272
- --a-data-surface-6-subtle: var(--a-purple-200);
273
- --a-data-surface-6: var(--a-purple-400);
274
- --a-data-surface-5-subtle: var(--a-green-200);
275
- --a-data-surface-5: var(--a-green-400);
276
- --a-data-surface-4-subtle: var(--a-lightblue-500);
277
- --a-data-surface-4: var(--a-lightblue-700);
278
- --a-data-surface-3-subtle: var(--a-orange-300);
279
- --a-data-surface-3: var(--a-orange-600);
280
- --a-data-surface-2-subtle: var(--a-deepblue-200);
281
- --a-data-surface-2: var(--a-deepblue-500);
282
- --a-data-surface-1-subtle: var(--a-blue-100);
283
- --a-data-surface-1: var(--a-blue-400);
263
+ --a-icon-on-info: var(--a-gray-900);
264
+ --a-icon-on-warning: var(--a-gray-900);
265
+ --a-icon-on-danger: var(--a-white);
266
+ --a-icon-on-success: var(--a-white);
267
+ --a-icon-on-action: var(--a-white);
268
+ --a-icon-on-inverted: var(--a-white);
269
+ --a-icon-on-neutral: var(--a-white);
270
+ --a-icon-alt-3: var(--a-deepblue-500);
271
+ --a-icon-alt-2: var(--a-limegreen-700);
272
+ --a-icon-alt-1: var(--a-purple-500);
273
+ --a-icon-info: var(--a-lightblue-800);
274
+ --a-icon-warning: var(--a-orange-600);
275
+ --a-icon-danger: var(--a-red-500);
276
+ --a-icon-success: var(--a-green-500);
277
+ --a-icon-action: var(--a-blue-500);
278
+ --a-icon-action-on-action-subtle: var(--a-blue-600);
279
+ --a-icon-action-selected: var(--a-blue-700);
280
+ --a-icon-subtle: var(--a-grayalpha-700);
281
+ --a-icon-default: var(--a-gray-900);
284
282
  --a-border-alt-3: var(--a-deepblue-500);
285
283
  --a-border-alt-2: var(--a-limegreen-700);
286
284
  --a-border-alt-1: var(--a-purple-400);
@@ -296,10 +294,12 @@
296
294
  --a-border-action: var(--a-blue-500);
297
295
  --a-border-action-selected: var(--a-blue-700);
298
296
  --a-border-subtle: var(--a-grayalpha-300);
299
- --a-border-subtle-hover: var(--a-grayalpha-400);
300
297
  --a-border-divider: var(--a-grayalpha-300);
301
298
  --a-border-strong: var(--a-grayalpha-700);
302
299
  --a-border-default: var(--a-grayalpha-500);
303
- --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
300
+ --a-border-subtle-hover: var(--a-grayalpha-400);
301
+ --a-bg-subtle: var(--a-gray-100);
302
+ --a-bg-default: var(--a-white);
304
303
  --a-shadow-focus-inverted: 0 0 0 3px var(--a-border-focus-on-inverted);
304
+ --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
305
305
  }
package/dist/global/tokens.min.css CHANGED
@@ -1 +1 @@
1
- :host,:root{--a-spacing-05:0.125rem;--a-spacing-32:8rem;--a-spacing-24:6rem;--a-spacing-20:5rem;--a-spacing-18:4.5rem;--a-spacing-16:4rem;--a-spacing-14:3.5rem;--a-spacing-12:3rem;--a-spacing-11:2.75rem;--a-spacing-10:2.5rem;--a-spacing-9:2.25rem;--a-spacing-8:2rem;--a-spacing-7:1.75rem;--a-spacing-6:1.5rem;--a-spacing-5:1.25rem;--a-spacing-4:1rem;--a-spacing-3:0.75rem;--a-spacing-2:0.5rem;--a-spacing-1:0.25rem;--a-spacing-0:0;--a-shadow-xlarge:0px 2px 5px 0px rgba(0,0,0,.15),0px 10px 24px 0px rgba(0,0,0,.18),0px 0px 1px 0px rgba(0,0,0,.08);--a-shadow-large:0px 2px 5px 0px rgba(0,0,0,.15),0px 10px 16px 0px rgba(0,0,0,.12),0px 0px 1px 0px rgba(0,0,0,.12);--a-shadow-medium:0px 5px 12px 0px rgba(0,0,0,.13),0px 1px 3px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.15);--a-shadow-small:0px 3px 8px 0px rgba(0,0,0,.1),0px 1px 3px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.18);--a-shadow-xsmall:0px 1px 3px 0px rgba(0,0,0,.15),0px 0px 1px 0px rgba(0,0,0,.2);--a-purple-900:#1f142f;--a-purple-800:#301f46;--a-purple-700:#412b5d;--a-purple-600:#523874;--a-purple-500:#634689;--a-purple-400:#8269a2;--a-purple-300:#a18dbb;--a-purple-200:#c0b2d2;--a-purple-100:#e0d8e9;--a-purple-50:#efecf4;--a-orange-900:#523300;--a-orange-800:#7d4c00;--a-orange-700:#a86400;--a-orange-600:#c77300;--a-orange-500:#ff9100;--a-orange-400:#fa3;--a-orange-300:#ffc166;--a-orange-200:#ffd799;--a-orange-100:#ffeccc;--a-orange-50:#fff9f0;--a-limegreen-900:#474e00;--a-limegreen-800:#666e00;--a-limegreen-700:#7f8900;--a-limegreen-600:#939e00;--a-limegreen-500:#a2ad00;--a-limegreen-400:#c1cb33;--a-limegreen-300:#d9e366;--a-limegreen-200:#ecf399;--a-limegreen-100:#f9fccc;--a-limegreen-50:#fdffe6;--a-lightblue-900:#134852;--a-lightblue-800:#236b7d;--a-lightblue-700:#368da8;--a-lightblue-600:#4cadcd;--a-lightblue-500:#66cbec;--a-lightblue-400:#7cdaf8;--a-lightblue-300:#97e6ff;--a-lightblue-200:#b5f1ff;--a-lightblue-100:#d8f9ff;--a-lightblue-50:#ebfcff;--a-green-900:#003b0f;--a-green-800:#005519;--a-green-700:#006a23;--a-green-600:#007c2e;--a-green-500:#06893a;--a-green-400:#33aa5f;--a-green-300:#66c786;--a-green-200:#99dead;--a-green-100:#ccf1d6;--a-green-50:#f3fcf5;--a-deepblue-900:#00243a;--a-deepblue-800:#003453;--a-deepblue-700:#004367;--a-deepblue-600:#005077;--a-deepblue-500:#005b82;--a-deepblue-400:#3380a5;--a-deepblue-300:#66a3c4;--a-deepblue-200:#99c4dd;--a-deepblue-100:#cce2f0;--a-deepblue-50:#e6f1f8;--a-red-900:#260000;--a-red-800:#5c0000;--a-red-700:#8c0000;--a-red-600:#ad0000;--a-red-500:#c30000;--a-red-400:#de2e2e;--a-red-300:#f25c5c;--a-red-200:#f68282;--a-red-100:#ffc2c2;--a-red-50:#ffe6e6;--a-blue-900:#002252;--a-blue-800:#00347d;--a-blue-700:#00459c;--a-blue-600:#0056b4;--a-blue-500:#0067c5;--a-blue-400:#3386e0;--a-blue-300:#66a5f4;--a-blue-200:#99c3ff;--a-blue-100:#cce1ff;--a-blue-50:#e6f0ff;--a-grayalpha-900:rgba(2,5,9,.87);--a-grayalpha-800:rgba(3,11,22,.75);--a-grayalpha-700:rgba(1,11,24,.68);--a-grayalpha-600:rgba(2,15,34,.6);--a-grayalpha-500:rgba(2,20,49,.49);--a-grayalpha-400:rgba(5,23,51,.34);--a-grayalpha-300:rgba(7,26,54,.21);--a-grayalpha-200:rgba(17,41,64,.13);--a-grayalpha-100:rgba(18,43,68,.08);--a-grayalpha-50:rgba(38,55,89,.06);--a-gray-900:#23262a;--a-gray-800:#42474f;--a-gray-700:#525962;--a-gray-600:#676f7b;--a-gray-500:#838c9a;--a-gray-400:#aab0ba;--a-gray-300:#cbcfd5;--a-gray-200:#e0e3e6;--a-gray-100:#eceef0;--a-gray-50:#f2f3f5;--a-nav-red:#c30000;--a-white:#fff;--a-transparent:hsla(0,0%,100%,0);--a-border-radius-full:9999px;--a-border-radius-xlarge:12px;--a-border-radius-large:8px;--a-border-radius-medium:4px;--a-border-radius-small:2px;--a-z-index-tooltip:3000;--a-z-index-focus:10;--a-z-index-popover:1000;--a-z-index-modal:2000;--a-font-weight-regular:400;--a-font-weight-bold:600;--a-font-size-small:0.875rem;--a-font-size-medium:1rem;--a-font-size-large:1.125rem;--a-font-size-xlarge:1.25rem;--a-font-size-heading-xsmall:1.125rem;--a-font-size-heading-small:1.25rem;--a-font-size-heading-medium:1.5rem;--a-font-size-heading-large:1.75rem;--a-font-size-heading-xlarge:2rem;--a-font-size-heading-2xlarge:2.5rem;--a-font-line-height-medium:1.25rem;--a-font-line-height-large:1.5rem;--a-font-line-height-xlarge:1.75rem;--a-font-line-height-heading-xsmall:1.5rem;--a-font-line-height-heading-small:1.75rem;--a-font-line-height-heading-medium:2rem;--a-font-line-height-heading-large:2.25rem;--a-font-line-height-heading-xlarge:2.5rem;--a-font-line-height-heading-2xlarge:3.25rem;--a-font-family:"Source Sans Pro",Arial,sans-serif;--a-breakpoint-xl-down:1279px;--a-breakpoint-xl:1280px;--a-breakpoint-lg-down:1023px;--a-breakpoint-lg:1024px;--a-breakpoint-md-down:767px;--a-breakpoint-md:768px;--a-breakpoint-sm-down:479px;--a-breakpoint-sm:480px;--a-breakpoint-xs:0;--a-icon-on-info:var(--a-gray-900);--a-icon-on-warning:var(--a-gray-900);--a-icon-on-danger:var(--a-white);--a-icon-on-success:var(--a-white);--a-icon-on-action:var(--a-white);--a-icon-on-inverted:var(--a-white);--a-icon-on-neutral:var(--a-white);--a-icon-alt-3:var(--a-deepblue-500);--a-icon-alt-2:var(--a-limegreen-700);--a-icon-alt-1:var(--a-purple-500);--a-icon-info:var(--a-lightblue-800);--a-icon-warning:var(--a-orange-600);--a-icon-danger:var(--a-red-500);--a-icon-success:var(--a-green-500);--a-icon-action:var(--a-blue-500);--a-icon-action-on-action-subtle:var(--a-blue-600);--a-icon-action-selected:var(--a-blue-700);--a-icon-subtle:var(--a-grayalpha-700);--a-icon-default:var(--a-gray-900);--a-surface-alt-3:var(--a-deepblue-500);--a-surface-alt-3-strong:var(--a-deepblue-800);--a-surface-alt-3-moderate:var(--a-deepblue-200);--a-surface-alt-3-subtle:var(--a-deepblue-100);--a-surface-alt-2:var(--a-limegreen-400);--a-surface-alt-2-moderate:var(--a-limegreen-200);--a-surface-alt-2-subtle:var(--a-limegreen-100);--a-surface-alt-1:var(--a-purple-400);--a-surface-alt-1-moderate:var(--a-purple-200);--a-surface-alt-1-subtle:var(--a-purple-100);--a-surface-info:var(--a-lightblue-500);--a-surface-info-moderate:var(--a-lightblue-200);--a-surface-info-subtle:var(--a-lightblue-100);--a-surface-info-subtle-hover:var(--a-lightblue-200);--a-surface-warning:var(--a-orange-500);--a-surface-warning-moderate:var(--a-orange-200);--a-surface-warning-subtle:var(--a-orange-100);--a-surface-warning-subtle-hover:var(--a-orange-200);--a-surface-danger:var(--a-red-500);--a-surface-danger-active:var(--a-red-700);--a-surface-danger-hover:var(--a-red-600);--a-surface-danger-moderate:var(--a-red-200);--a-surface-danger-subtle:var(--a-red-100);--a-surface-danger-subtle-hover:var(--a-red-200);--a-surface-success-hover:var(--a-green-600);--a-surface-success:var(--a-green-500);--a-surface-success-moderate:var(--a-green-200);--a-surface-success-subtle:var(--a-green-100);--a-surface-success-subtle-hover:var(--a-green-200);--a-surface-neutral:var(--a-gray-700);--a-surface-neutral-active:var(--a-gray-900);--a-surface-neutral-selected:var(--a-gray-900);--a-surface-neutral-hover:var(--a-gray-800);--a-surface-neutral-moderate:var(--a-grayalpha-200);--a-surface-neutral-subtle:var(--a-grayalpha-100);--a-surface-neutral-subtle-hover:var(--a-grayalpha-200);--a-surface-action:var(--a-blue-500);--a-surface-action-selected:var(--a-blue-700);--a-surface-action-selected-hover:var(--a-blue-800);--a-surface-action-active:var(--a-blue-700);--a-surface-action-hover:var(--a-blue-600);--a-surface-action-subtle:var(--a-blue-50);--a-surface-action-subtle-hover:var(--a-blue-100);--a-surface-inverted:var(--a-gray-900);--a-surface-inverted-active:var(--a-gray-700);--a-surface-inverted-hover:var(--a-gray-800);--a-surface-backdrop:var(--a-grayalpha-500);--a-surface-transparent:var(--a-transparent);--a-surface-subtle:var(--a-gray-50);--a-surface-selected:var(--a-blue-50);--a-surface-active:var(--a-grayalpha-200);--a-surface-hover:var(--a-grayalpha-100);--a-surface-default:var(--a-white);--a-bg-subtle:var(--a-gray-100);--a-bg-default:var(--a-white);--a-text-on-alt-3:var(--a-white);--a-text-on-alt-2:var(--a-gray-900);--a-text-on-alt-1:var(--a-white);--a-text-on-info:var(--a-gray-900);--a-text-on-warning:var(--a-gray-900);--a-text-on-danger:var(--a-white);--a-text-on-success:var(--a-white);--a-text-on-action:var(--a-white);--a-text-on-neutral:var(--a-white);--a-text-on-inverted:var(--a-white);--a-text-action:var(--a-blue-500);--a-text-action-on-action-subtle:var(--a-blue-600);--a-text-action-selected:var(--a-blue-700);--a-text-danger:var(--a-red-500);--a-text-visited:var(--a-purple-500);--a-text-subtle:var(--a-grayalpha-700);--a-text-default:var(--a-gray-900);--a-data-border-6:var(--a-purple-400);--a-data-border-5:var(--a-green-400);--a-data-border-4:var(--a-lightblue-700);--a-data-border-3:var(--a-orange-600);--a-data-border-2:var(--a-deepblue-500);--a-data-border-1:var(--a-blue-400);--a-data-surface-6-subtle:var(--a-purple-200);--a-data-surface-6:var(--a-purple-400);--a-data-surface-5-subtle:var(--a-green-200);--a-data-surface-5:var(--a-green-400);--a-data-surface-4-subtle:var(--a-lightblue-500);--a-data-surface-4:var(--a-lightblue-700);--a-data-surface-3-subtle:var(--a-orange-300);--a-data-surface-3:var(--a-orange-600);--a-data-surface-2-subtle:var(--a-deepblue-200);--a-data-surface-2:var(--a-deepblue-500);--a-data-surface-1-subtle:var(--a-blue-100);--a-data-surface-1:var(--a-blue-400);--a-border-alt-3:var(--a-deepblue-500);--a-border-alt-2:var(--a-limegreen-700);--a-border-alt-1:var(--a-purple-400);--a-border-on-inverted-subtle:var(--a-gray-700);--a-border-on-inverted:var(--a-gray-200);--a-border-focus:var(--a-blue-800);--a-border-focus-on-inverted:var(--a-blue-200);--a-border-info:var(--a-lightblue-700);--a-border-warning:var(--a-orange-600);--a-border-danger:var(--a-red-500);--a-border-success:var(--a-green-500);--a-border-selected:var(--a-blue-500);--a-border-action:var(--a-blue-500);--a-border-action-selected:var(--a-blue-700);--a-border-subtle:var(--a-grayalpha-300);--a-border-subtle-hover:var(--a-grayalpha-400);--a-border-divider:var(--a-grayalpha-300);--a-border-strong:var(--a-grayalpha-700);--a-border-default:var(--a-grayalpha-500);--a-shadow-focus:0 0 0 3px var(--a-border-focus);--a-shadow-focus-inverted:0 0 0 3px var(--a-border-focus-on-inverted)}
1
+ :host,:root{--a-spacing-05:0.125rem;--a-spacing-32:8rem;--a-spacing-24:6rem;--a-spacing-20:5rem;--a-spacing-18:4.5rem;--a-spacing-16:4rem;--a-spacing-14:3.5rem;--a-spacing-12:3rem;--a-spacing-11:2.75rem;--a-spacing-10:2.5rem;--a-spacing-9:2.25rem;--a-spacing-8:2rem;--a-spacing-7:1.75rem;--a-spacing-6:1.5rem;--a-spacing-5:1.25rem;--a-spacing-4:1rem;--a-spacing-3:0.75rem;--a-spacing-2:0.5rem;--a-spacing-1:0.25rem;--a-spacing-0:0;--a-shadow-xlarge:0px 2px 5px 0px rgba(0,0,0,.15),0px 10px 24px 0px rgba(0,0,0,.18),0px 0px 1px 0px rgba(0,0,0,.08);--a-shadow-large:0px 2px 5px 0px rgba(0,0,0,.15),0px 10px 16px 0px rgba(0,0,0,.12),0px 0px 1px 0px rgba(0,0,0,.12);--a-shadow-medium:0px 5px 12px 0px rgba(0,0,0,.13),0px 1px 3px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.15);--a-shadow-small:0px 3px 8px 0px rgba(0,0,0,.1),0px 1px 3px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.18);--a-shadow-xsmall:0px 1px 3px 0px rgba(0,0,0,.15),0px 0px 1px 0px rgba(0,0,0,.2);--a-purple-900:#1f142f;--a-purple-800:#301f46;--a-purple-700:#412b5d;--a-purple-600:#523874;--a-purple-500:#634689;--a-purple-400:#8269a2;--a-purple-300:#a18dbb;--a-purple-200:#c0b2d2;--a-purple-100:#e0d8e9;--a-purple-50:#efecf4;--a-orange-900:#523300;--a-orange-800:#7d4c00;--a-orange-700:#a86400;--a-orange-600:#c77300;--a-orange-500:#ff9100;--a-orange-400:#fa3;--a-orange-300:#ffc166;--a-orange-200:#ffd799;--a-orange-100:#ffeccc;--a-orange-50:#fff9f0;--a-limegreen-900:#474e00;--a-limegreen-800:#666e00;--a-limegreen-700:#7f8900;--a-limegreen-600:#939e00;--a-limegreen-500:#a2ad00;--a-limegreen-400:#c1cb33;--a-limegreen-300:#d9e366;--a-limegreen-200:#ecf399;--a-limegreen-100:#f9fccc;--a-limegreen-50:#fdffe6;--a-lightblue-900:#134852;--a-lightblue-800:#236b7d;--a-lightblue-700:#368da8;--a-lightblue-600:#4cadcd;--a-lightblue-500:#66cbec;--a-lightblue-400:#7cdaf8;--a-lightblue-300:#97e6ff;--a-lightblue-200:#b5f1ff;--a-lightblue-100:#d8f9ff;--a-lightblue-50:#ebfcff;--a-green-900:#003b0f;--a-green-800:#005519;--a-green-700:#006a23;--a-green-600:#007c2e;--a-green-500:#06893a;--a-green-400:#33aa5f;--a-green-300:#66c786;--a-green-200:#99dead;--a-green-100:#ccf1d6;--a-green-50:#f3fcf5;--a-deepblue-900:#00243a;--a-deepblue-800:#003453;--a-deepblue-700:#004367;--a-deepblue-600:#005077;--a-deepblue-500:#005b82;--a-deepblue-400:#3380a5;--a-deepblue-300:#66a3c4;--a-deepblue-200:#99c4dd;--a-deepblue-100:#cce2f0;--a-deepblue-50:#e6f1f8;--a-red-900:#260000;--a-red-800:#5c0000;--a-red-700:#8c0000;--a-red-600:#ad0000;--a-red-500:#c30000;--a-red-400:#de2e2e;--a-red-300:#f25c5c;--a-red-200:#f68282;--a-red-100:#ffc2c2;--a-red-50:#ffe6e6;--a-blue-900:#002252;--a-blue-800:#00347d;--a-blue-700:#00459c;--a-blue-600:#0056b4;--a-blue-500:#0067c5;--a-blue-400:#3386e0;--a-blue-300:#66a5f4;--a-blue-200:#99c3ff;--a-blue-100:#cce1ff;--a-blue-50:#e6f0ff;--a-grayalpha-900:rgba(2,5,9,.87);--a-grayalpha-800:rgba(3,11,22,.75);--a-grayalpha-700:rgba(1,11,24,.68);--a-grayalpha-600:rgba(2,15,34,.6);--a-grayalpha-500:rgba(2,20,49,.49);--a-grayalpha-400:rgba(5,23,51,.34);--a-grayalpha-300:rgba(7,26,54,.21);--a-grayalpha-200:rgba(17,41,64,.13);--a-grayalpha-100:rgba(18,43,68,.08);--a-grayalpha-50:rgba(38,55,89,.06);--a-gray-900:#23262a;--a-gray-800:#42474f;--a-gray-700:#525962;--a-gray-600:#676f7b;--a-gray-500:#838c9a;--a-gray-400:#aab0ba;--a-gray-300:#cbcfd5;--a-gray-200:#e0e3e6;--a-gray-100:#eceef0;--a-gray-50:#f2f3f5;--a-nav-red:#c30000;--a-white:#fff;--a-transparent:hsla(0,0%,100%,0);--a-border-radius-full:9999px;--a-border-radius-xlarge:12px;--a-border-radius-large:8px;--a-border-radius-medium:4px;--a-border-radius-small:2px;--a-z-index-tooltip:3000;--a-z-index-focus:10;--a-z-index-popover:1000;--a-z-index-modal:2000;--a-font-weight-regular:400;--a-font-weight-bold:600;--a-font-size-small:0.875rem;--a-font-size-medium:1rem;--a-font-size-large:1.125rem;--a-font-size-xlarge:1.25rem;--a-font-size-heading-xsmall:1.125rem;--a-font-size-heading-small:1.25rem;--a-font-size-heading-medium:1.5rem;--a-font-size-heading-large:1.75rem;--a-font-size-heading-xlarge:2rem;--a-font-size-heading-2xlarge:2.5rem;--a-font-line-height-medium:1.25rem;--a-font-line-height-large:1.5rem;--a-font-line-height-xlarge:1.75rem;--a-font-line-height-heading-xsmall:1.5rem;--a-font-line-height-heading-small:1.75rem;--a-font-line-height-heading-medium:2rem;--a-font-line-height-heading-large:2.25rem;--a-font-line-height-heading-xlarge:2.5rem;--a-font-line-height-heading-2xlarge:3.25rem;--a-font-family:"Source Sans Pro",Arial,sans-serif;--a-breakpoint-xl-down:1279px;--a-breakpoint-xl:1280px;--a-breakpoint-lg-down:1023px;--a-breakpoint-lg:1024px;--a-breakpoint-md-down:767px;--a-breakpoint-md:768px;--a-breakpoint-sm-down:479px;--a-breakpoint-sm:480px;--a-breakpoint-xs:0;--a-data-border-6:var(--a-purple-400);--a-data-border-5:var(--a-green-400);--a-data-border-4:var(--a-lightblue-700);--a-data-border-3:var(--a-orange-600);--a-data-border-2:var(--a-deepblue-500);--a-data-border-1:var(--a-blue-400);--a-data-surface-6-subtle:var(--a-purple-200);--a-data-surface-6:var(--a-purple-400);--a-data-surface-5-subtle:var(--a-green-200);--a-data-surface-5:var(--a-green-400);--a-data-surface-4-subtle:var(--a-lightblue-500);--a-data-surface-4:var(--a-lightblue-700);--a-data-surface-3-subtle:var(--a-orange-300);--a-data-surface-3:var(--a-orange-600);--a-data-surface-2-subtle:var(--a-deepblue-200);--a-data-surface-2:var(--a-deepblue-500);--a-data-surface-1-subtle:var(--a-blue-100);--a-data-surface-1:var(--a-blue-400);--a-text-on-alt-3:var(--a-white);--a-text-on-alt-2:var(--a-gray-900);--a-text-on-alt-1:var(--a-white);--a-text-on-info:var(--a-gray-900);--a-text-on-warning:var(--a-gray-900);--a-text-on-danger:var(--a-white);--a-text-on-success:var(--a-white);--a-text-on-action:var(--a-white);--a-text-on-neutral:var(--a-white);--a-text-on-inverted:var(--a-white);--a-text-action:var(--a-blue-500);--a-text-action-on-action-subtle:var(--a-blue-600);--a-text-action-selected:var(--a-blue-700);--a-text-danger:var(--a-red-500);--a-text-visited:var(--a-purple-500);--a-text-subtle:var(--a-grayalpha-700);--a-text-default:var(--a-gray-900);--a-surface-alt-3:var(--a-deepblue-500);--a-surface-alt-3-strong:var(--a-deepblue-800);--a-surface-alt-3-moderate:var(--a-deepblue-200);--a-surface-alt-3-subtle:var(--a-deepblue-100);--a-surface-alt-2:var(--a-limegreen-400);--a-surface-alt-2-moderate:var(--a-limegreen-200);--a-surface-alt-2-subtle:var(--a-limegreen-100);--a-surface-alt-1:var(--a-purple-400);--a-surface-alt-1-moderate:var(--a-purple-200);--a-surface-alt-1-subtle:var(--a-purple-100);--a-surface-info:var(--a-lightblue-500);--a-surface-info-moderate:var(--a-lightblue-200);--a-surface-info-subtle:var(--a-lightblue-100);--a-surface-warning:var(--a-orange-500);--a-surface-warning-moderate:var(--a-orange-200);--a-surface-warning-subtle:var(--a-orange-100);--a-surface-danger:var(--a-red-500);--a-surface-danger-moderate:var(--a-red-200);--a-surface-danger-subtle:var(--a-red-100);--a-surface-success:var(--a-green-500);--a-surface-success-moderate:var(--a-green-200);--a-surface-success-subtle:var(--a-green-100);--a-surface-neutral:var(--a-gray-700);--a-surface-neutral-selected:var(--a-gray-900);--a-surface-neutral-moderate:var(--a-grayalpha-200);--a-surface-neutral-subtle:var(--a-grayalpha-100);--a-surface-action:var(--a-blue-500);--a-surface-action-selected:var(--a-blue-700);--a-surface-action-subtle:var(--a-blue-50);--a-surface-inverted:var(--a-gray-900);--a-surface-backdrop:var(--a-grayalpha-500);--a-surface-transparent:var(--a-transparent);--a-surface-subtle:var(--a-gray-50);--a-surface-selected:var(--a-blue-50);--a-surface-default:var(--a-white);--a-surface-info-subtle-hover:var(--a-lightblue-200);--a-surface-warning-subtle-hover:var(--a-orange-200);--a-surface-danger-active:var(--a-red-700);--a-surface-danger-hover:var(--a-red-600);--a-surface-danger-subtle-hover:var(--a-red-200);--a-surface-success-hover:var(--a-green-600);--a-surface-success-subtle-hover:var(--a-green-200);--a-surface-neutral-hover:var(--a-gray-800);--a-surface-neutral-active:var(--a-gray-900);--a-surface-neutral-subtle-hover:var(--a-grayalpha-200);--a-surface-action-selected-hover:var(--a-blue-800);--a-surface-action-active:var(--a-blue-700);--a-surface-action-hover:var(--a-blue-600);--a-surface-action-subtle-hover:var(--a-blue-100);--a-surface-inverted-active:var(--a-gray-700);--a-surface-inverted-hover:var(--a-gray-800);--a-surface-active:var(--a-grayalpha-200);--a-surface-hover:var(--a-grayalpha-100);--a-icon-on-info:var(--a-gray-900);--a-icon-on-warning:var(--a-gray-900);--a-icon-on-danger:var(--a-white);--a-icon-on-success:var(--a-white);--a-icon-on-action:var(--a-white);--a-icon-on-inverted:var(--a-white);--a-icon-on-neutral:var(--a-white);--a-icon-alt-3:var(--a-deepblue-500);--a-icon-alt-2:var(--a-limegreen-700);--a-icon-alt-1:var(--a-purple-500);--a-icon-info:var(--a-lightblue-800);--a-icon-warning:var(--a-orange-600);--a-icon-danger:var(--a-red-500);--a-icon-success:var(--a-green-500);--a-icon-action:var(--a-blue-500);--a-icon-action-on-action-subtle:var(--a-blue-600);--a-icon-action-selected:var(--a-blue-700);--a-icon-subtle:var(--a-grayalpha-700);--a-icon-default:var(--a-gray-900);--a-border-alt-3:var(--a-deepblue-500);--a-border-alt-2:var(--a-limegreen-700);--a-border-alt-1:var(--a-purple-400);--a-border-on-inverted-subtle:var(--a-gray-700);--a-border-on-inverted:var(--a-gray-200);--a-border-focus:var(--a-blue-800);--a-border-focus-on-inverted:var(--a-blue-200);--a-border-info:var(--a-lightblue-700);--a-border-warning:var(--a-orange-600);--a-border-danger:var(--a-red-500);--a-border-success:var(--a-green-500);--a-border-selected:var(--a-blue-500);--a-border-action:var(--a-blue-500);--a-border-action-selected:var(--a-blue-700);--a-border-subtle:var(--a-grayalpha-300);--a-border-divider:var(--a-grayalpha-300);--a-border-strong:var(--a-grayalpha-700);--a-border-default:var(--a-grayalpha-500);--a-border-subtle-hover:var(--a-grayalpha-400);--a-bg-subtle:var(--a-gray-100);--a-bg-default:var(--a-white);--a-shadow-focus-inverted:0 0 0 3px var(--a-border-focus-on-inverted);--a-shadow-focus:0 0 0 3px var(--a-border-focus)}
package/dist/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Thu, 07 Sep 2023 12:27:29 GMT
4
+ * Generated on Wed, 13 Sep 2023 13:01:01 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-05: 0.125rem;
@@ -172,25 +172,41 @@
172
172
  --a-breakpoint-sm-down: 479px;
173
173
  --a-breakpoint-sm: 480px;
174
174
  --a-breakpoint-xs: 0;
175
- --a-icon-on-info: var(--a-gray-900);
176
- --a-icon-on-warning: var(--a-gray-900);
177
- --a-icon-on-danger: var(--a-white);
178
- --a-icon-on-success: var(--a-white);
179
- --a-icon-on-action: var(--a-white);
180
- --a-icon-on-inverted: var(--a-white);
181
- --a-icon-on-neutral: var(--a-white);
182
- --a-icon-alt-3: var(--a-deepblue-500);
183
- --a-icon-alt-2: var(--a-limegreen-700);
184
- --a-icon-alt-1: var(--a-purple-500);
185
- --a-icon-info: var(--a-lightblue-800);
186
- --a-icon-warning: var(--a-orange-600);
187
- --a-icon-danger: var(--a-red-500);
188
- --a-icon-success: var(--a-green-500);
189
- --a-icon-action: var(--a-blue-500);
190
- --a-icon-action-on-action-subtle: var(--a-blue-600);
191
- --a-icon-action-selected: var(--a-blue-700);
192
- --a-icon-subtle: var(--a-grayalpha-700);
193
- --a-icon-default: var(--a-gray-900);
175
+ --a-data-border-6: var(--a-purple-400);
176
+ --a-data-border-5: var(--a-green-400);
177
+ --a-data-border-4: var(--a-lightblue-700);
178
+ --a-data-border-3: var(--a-orange-600);
179
+ --a-data-border-2: var(--a-deepblue-500);
180
+ --a-data-border-1: var(--a-blue-400);
181
+ --a-data-surface-6-subtle: var(--a-purple-200);
182
+ --a-data-surface-6: var(--a-purple-400);
183
+ --a-data-surface-5-subtle: var(--a-green-200);
184
+ --a-data-surface-5: var(--a-green-400);
185
+ --a-data-surface-4-subtle: var(--a-lightblue-500);
186
+ --a-data-surface-4: var(--a-lightblue-700);
187
+ --a-data-surface-3-subtle: var(--a-orange-300);
188
+ --a-data-surface-3: var(--a-orange-600);
189
+ --a-data-surface-2-subtle: var(--a-deepblue-200);
190
+ --a-data-surface-2: var(--a-deepblue-500);
191
+ --a-data-surface-1-subtle: var(--a-blue-100);
192
+ --a-data-surface-1: var(--a-blue-400);
193
+ --a-text-on-alt-3: var(--a-white);
194
+ --a-text-on-alt-2: var(--a-gray-900);
195
+ --a-text-on-alt-1: var(--a-white);
196
+ --a-text-on-info: var(--a-gray-900);
197
+ --a-text-on-warning: var(--a-gray-900);
198
+ --a-text-on-danger: var(--a-white);
199
+ --a-text-on-success: var(--a-white);
200
+ --a-text-on-action: var(--a-white);
201
+ --a-text-on-neutral: var(--a-white);
202
+ --a-text-on-inverted: var(--a-white);
203
+ --a-text-action: var(--a-blue-500);
204
+ --a-text-action-on-action-subtle: var(--a-blue-600);
205
+ --a-text-action-selected: var(--a-blue-700);
206
+ --a-text-danger: var(--a-red-500);
207
+ --a-text-visited: var(--a-purple-500);
208
+ --a-text-subtle: var(--a-grayalpha-700);
209
+ --a-text-default: var(--a-gray-900);
194
210
  --a-surface-alt-3: var(--a-deepblue-500);
195
211
  --a-surface-alt-3-strong: var(--a-deepblue-800);
196
212
  --a-surface-alt-3-moderate: var(--a-deepblue-200);
@@ -204,83 +220,65 @@
204
220
  --a-surface-info: var(--a-lightblue-500);
205
221
  --a-surface-info-moderate: var(--a-lightblue-200);
206
222
  --a-surface-info-subtle: var(--a-lightblue-100);
207
- --a-surface-info-subtle-hover: var(--a-lightblue-200);
208
223
  --a-surface-warning: var(--a-orange-500);
209
224
  --a-surface-warning-moderate: var(--a-orange-200);
210
225
  --a-surface-warning-subtle: var(--a-orange-100);
211
- --a-surface-warning-subtle-hover: var(--a-orange-200);
212
226
  --a-surface-danger: var(--a-red-500);
213
- --a-surface-danger-active: var(--a-red-700);
214
- --a-surface-danger-hover: var(--a-red-600);
215
227
  --a-surface-danger-moderate: var(--a-red-200);
216
228
  --a-surface-danger-subtle: var(--a-red-100);
217
- --a-surface-danger-subtle-hover: var(--a-red-200);
218
- --a-surface-success-hover: var(--a-green-600);
219
229
  --a-surface-success: var(--a-green-500);
220
230
  --a-surface-success-moderate: var(--a-green-200);
221
231
  --a-surface-success-subtle: var(--a-green-100);
222
- --a-surface-success-subtle-hover: var(--a-green-200);
223
232
  --a-surface-neutral: var(--a-gray-700);
224
- --a-surface-neutral-active: var(--a-gray-900);
225
233
  --a-surface-neutral-selected: var(--a-gray-900);
226
- --a-surface-neutral-hover: var(--a-gray-800);
227
234
  --a-surface-neutral-moderate: var(--a-grayalpha-200);
228
235
  --a-surface-neutral-subtle: var(--a-grayalpha-100);
229
- --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
230
236
  --a-surface-action: var(--a-blue-500);
231
237
  --a-surface-action-selected: var(--a-blue-700);
232
- --a-surface-action-selected-hover: var(--a-blue-800);
233
- --a-surface-action-active: var(--a-blue-700);
234
- --a-surface-action-hover: var(--a-blue-600);
235
238
  --a-surface-action-subtle: var(--a-blue-50);
236
- --a-surface-action-subtle-hover: var(--a-blue-100);
237
239
  --a-surface-inverted: var(--a-gray-900);
238
- --a-surface-inverted-active: var(--a-gray-700);
239
- --a-surface-inverted-hover: var(--a-gray-800);
240
240
  --a-surface-backdrop: var(--a-grayalpha-500);
241
241
  --a-surface-transparent: var(--a-transparent);
242
242
  --a-surface-subtle: var(--a-gray-50);
243
243
  --a-surface-selected: var(--a-blue-50);
244
+ --a-surface-default: var(--a-white);
245
+ --a-surface-info-subtle-hover: var(--a-lightblue-200);
246
+ --a-surface-warning-subtle-hover: var(--a-orange-200);
247
+ --a-surface-danger-active: var(--a-red-700);
248
+ --a-surface-danger-hover: var(--a-red-600);
249
+ --a-surface-danger-subtle-hover: var(--a-red-200);
250
+ --a-surface-success-hover: var(--a-green-600);
251
+ --a-surface-success-subtle-hover: var(--a-green-200);
252
+ --a-surface-neutral-hover: var(--a-gray-800);
253
+ --a-surface-neutral-active: var(--a-gray-900);
254
+ --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
255
+ --a-surface-action-selected-hover: var(--a-blue-800);
256
+ --a-surface-action-active: var(--a-blue-700);
257
+ --a-surface-action-hover: var(--a-blue-600);
258
+ --a-surface-action-subtle-hover: var(--a-blue-100);
259
+ --a-surface-inverted-active: var(--a-gray-700);
260
+ --a-surface-inverted-hover: var(--a-gray-800);
244
261
  --a-surface-active: var(--a-grayalpha-200);
245
262
  --a-surface-hover: var(--a-grayalpha-100);
246
- --a-surface-default: var(--a-white);
247
- --a-bg-subtle: var(--a-gray-100);
248
- --a-bg-default: var(--a-white);
249
- --a-text-on-alt-3: var(--a-white);
250
- --a-text-on-alt-2: var(--a-gray-900);
251
- --a-text-on-alt-1: var(--a-white);
252
- --a-text-on-info: var(--a-gray-900);
253
- --a-text-on-warning: var(--a-gray-900);
254
- --a-text-on-danger: var(--a-white);
255
- --a-text-on-success: var(--a-white);
256
- --a-text-on-action: var(--a-white);
257
- --a-text-on-neutral: var(--a-white);
258
- --a-text-on-inverted: var(--a-white);
259
- --a-text-action: var(--a-blue-500);
260
- --a-text-action-on-action-subtle: var(--a-blue-600);
261
- --a-text-action-selected: var(--a-blue-700);
262
- --a-text-danger: var(--a-red-500);
263
- --a-text-visited: var(--a-purple-500);
264
- --a-text-subtle: var(--a-grayalpha-700);
265
- --a-text-default: var(--a-gray-900);
266
- --a-data-border-6: var(--a-purple-400);
267
- --a-data-border-5: var(--a-green-400);
268
- --a-data-border-4: var(--a-lightblue-700);
269
- --a-data-border-3: var(--a-orange-600);
270
- --a-data-border-2: var(--a-deepblue-500);
271
- --a-data-border-1: var(--a-blue-400);
272
- --a-data-surface-6-subtle: var(--a-purple-200);
273
- --a-data-surface-6: var(--a-purple-400);
274
- --a-data-surface-5-subtle: var(--a-green-200);
275
- --a-data-surface-5: var(--a-green-400);
276
- --a-data-surface-4-subtle: var(--a-lightblue-500);
277
- --a-data-surface-4: var(--a-lightblue-700);
278
- --a-data-surface-3-subtle: var(--a-orange-300);
279
- --a-data-surface-3: var(--a-orange-600);
280
- --a-data-surface-2-subtle: var(--a-deepblue-200);
281
- --a-data-surface-2: var(--a-deepblue-500);
282
- --a-data-surface-1-subtle: var(--a-blue-100);
283
- --a-data-surface-1: var(--a-blue-400);
263
+ --a-icon-on-info: var(--a-gray-900);
264
+ --a-icon-on-warning: var(--a-gray-900);
265
+ --a-icon-on-danger: var(--a-white);
266
+ --a-icon-on-success: var(--a-white);
267
+ --a-icon-on-action: var(--a-white);
268
+ --a-icon-on-inverted: var(--a-white);
269
+ --a-icon-on-neutral: var(--a-white);
270
+ --a-icon-alt-3: var(--a-deepblue-500);
271
+ --a-icon-alt-2: var(--a-limegreen-700);
272
+ --a-icon-alt-1: var(--a-purple-500);
273
+ --a-icon-info: var(--a-lightblue-800);
274
+ --a-icon-warning: var(--a-orange-600);
275
+ --a-icon-danger: var(--a-red-500);
276
+ --a-icon-success: var(--a-green-500);
277
+ --a-icon-action: var(--a-blue-500);
278
+ --a-icon-action-on-action-subtle: var(--a-blue-600);
279
+ --a-icon-action-selected: var(--a-blue-700);
280
+ --a-icon-subtle: var(--a-grayalpha-700);
281
+ --a-icon-default: var(--a-gray-900);
284
282
  --a-border-alt-3: var(--a-deepblue-500);
285
283
  --a-border-alt-2: var(--a-limegreen-700);
286
284
  --a-border-alt-1: var(--a-purple-400);
@@ -296,12 +294,14 @@
296
294
  --a-border-action: var(--a-blue-500);
297
295
  --a-border-action-selected: var(--a-blue-700);
298
296
  --a-border-subtle: var(--a-grayalpha-300);
299
- --a-border-subtle-hover: var(--a-grayalpha-400);
300
297
  --a-border-divider: var(--a-grayalpha-300);
301
298
  --a-border-strong: var(--a-grayalpha-700);
302
299
  --a-border-default: var(--a-grayalpha-500);
303
- --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
300
+ --a-border-subtle-hover: var(--a-grayalpha-400);
301
+ --a-bg-subtle: var(--a-gray-100);
302
+ --a-bg-default: var(--a-white);
304
303
  --a-shadow-focus-inverted: 0 0 0 3px var(--a-border-focus-on-inverted);
304
+ --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
305
305
  --navds-content-container-max-width: 79.5rem;
306
306
  }
307
307
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@@ -708,6 +708,7 @@ button,
708
708
  .navds-sr-only {
709
709
  border: 0;
710
710
  clip: rect(0, 0, 0, 0);
711
+ clip-path: inset(50%);
711
712
  height: 1px;
712
713
  margin: -1px;
713
714
  overflow: hidden;
@@ -728,6 +729,7 @@ button,
728
729
  .navds-sr-only.focusable:active,
729
730
  .navds-sr-only.focusable:focus {
730
731
  clip: auto;
732
+ clip-path: none;
731
733
  height: auto;
732
734
  margin: 0;
733
735
  overflow: visible;
@@ -1043,6 +1045,119 @@ body,
1043
1045
  .navds-typo--color-subtle {
1044
1046
  color: var(--__ac-typo-text-subtle, var(--a-text-subtle));
1045
1047
  }
1048
+ .navds-box {
1049
+ --__ac-box-padding-xs: initial;
1050
+ --__ac-box-padding-sm: initial;
1051
+ --__ac-box-padding-md: initial;
1052
+ --__ac-box-padding-lg: initial;
1053
+ --__ac-box-padding-xl: initial;
1054
+ --__ac-box-padding-block-xs: initial;
1055
+ --__ac-box-padding-inline-xs: initial;
1056
+ --__ac-box-padding-block-sm: initial;
1057
+ --__ac-box-padding-inline-sm: initial;
1058
+ --__ac-box-padding-block-md: initial;
1059
+ --__ac-box-padding-inline-md: initial;
1060
+ --__ac-box-padding-block-lg: initial;
1061
+ --__ac-box-padding-inline-lg: initial;
1062
+ --__ac-box-padding-block-xl: initial;
1063
+ --__ac-box-padding-inline-xl: initial;
1064
+ --__ac-box-padding: var(--__ac-box-padding-xs);
1065
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
1066
+ --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
1067
+ --__ac-box-background: initial;
1068
+ --__ac-box-border-color: initial;
1069
+ --__ac-box-shadow: initial;
1070
+ --__ac-box-border-width: initial;
1071
+ --__ac-box-border-radius-xs: initial;
1072
+ --__ac-box-border-radius-sm: initial;
1073
+ --__ac-box-border-radius-md: initial;
1074
+ --__ac-box-border-radius-lg: initial;
1075
+ --__ac-box-border-radius-xl: initial;
1076
+ --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
1077
+
1078
+ padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
1079
+ padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
1080
+ background-color: var(--__ac-box-background);
1081
+ border-style: solid;
1082
+ border-color: var(--__ac-box-border-color);
1083
+ border-radius: var(--__ac-box-border-radius);
1084
+ box-shadow: var(--__ac-box-shadow);
1085
+ border-width: var(--__ac-box-border-width, 0);
1086
+ }
1087
+ @media (min-width: 480px) {
1088
+ .navds-box {
1089
+ --__ac-box-padding: var(--__ac-box-padding-sm, var(--__ac-box-padding-xs));
1090
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
1091
+ --__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
1092
+ --__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
1093
+ }
1094
+ }
1095
+ @media (min-width: 768px) {
1096
+ .navds-box {
1097
+ --__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
1098
+ --__ac-box-padding-inline: var(
1099
+ --__ac-box-padding-inline-md,
1100
+ var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
1101
+ );
1102
+ --__ac-box-padding-block: var(
1103
+ --__ac-box-padding-block-md,
1104
+ var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
1105
+ );
1106
+ --__ac-box-border-radius: var(
1107
+ --__ac-box-border-radius-md,
1108
+ var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
1109
+ );
1110
+ }
1111
+ }
1112
+ @media (min-width: 1024px) {
1113
+ .navds-box {
1114
+ --__ac-box-padding: var(
1115
+ --__ac-box-padding-lg,
1116
+ var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
1117
+ );
1118
+ --__ac-box-padding-inline: var(
1119
+ --__ac-box-padding-inline-lg,
1120
+ var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
1121
+ );
1122
+ --__ac-box-padding-block: var(
1123
+ --__ac-box-padding-block-lg,
1124
+ var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
1125
+ );
1126
+ --__ac-box-border-radius: var(
1127
+ --__ac-box-border-radius-lg,
1128
+ var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
1129
+ );
1130
+ }
1131
+ }
1132
+ @media (min-width: 1280px) {
1133
+ .navds-box {
1134
+ --__ac-box-padding: var(
1135
+ --__ac-box-padding-xl,
1136
+ var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
1137
+ );
1138
+ --__ac-box-padding-inline: var(
1139
+ --__ac-box-padding-inline-xl,
1140
+ var(
1141
+ --__ac-box-padding-inline-lg,
1142
+ var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
1143
+ )
1144
+ );
1145
+ --__ac-box-padding-block: var(
1146
+ --__ac-box-padding-block-xl,
1147
+ var(
1148
+ --__ac-box-padding-block-lg,
1149
+ var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
1150
+ )
1151
+ );
1152
+ --__ac-box-border-radius: var(
1153
+ --__ac-box-border-radius-xl,
1154
+ var(
1155
+ --__ac-box-border-radius-lg,
1156
+ var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
1157
+ )
1158
+ );
1159
+ }
1160
+ }
1046
1161
  .navds-hgrid {
1047
1162
  --__ac-hgrid-columns-xs: initial;
1048
1163
  --__ac-hgrid-columns-sm: initial;
@@ -5417,6 +5532,9 @@ button.navds-internalheader__title:active,
5417
5532
  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
5418
5533
  pointer-events: none;
5419
5534
  }
5535
+ .navds-skeleton--inline {
5536
+ display: inline-block;
5537
+ }
5420
5538
  .navds-skeleton--has-children {
5421
5539
  color: transparent;
5422
5540
  }