@nldd/design-system 0.8.52 → 0.8.53
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.
- package/dist/assets/styles/slotted-reset.d.ts +51 -0
- package/dist/assets/styles/slotted-reset.d.ts.map +1 -0
- package/dist/assets/styles/slotted-reset.fixtures.d.ts +12 -0
- package/dist/assets/styles/slotted-reset.fixtures.d.ts.map +1 -0
- package/dist/assets/styles/slotted-reset.fixtures.js +21 -0
- package/dist/assets/styles/slotted-reset.fixtures.js.map +1 -0
- package/dist/assets/styles/slotted-reset.js +59 -0
- package/dist/assets/styles/slotted-reset.js.map +1 -0
- package/dist/components/actions/button/button.styles.d.ts.map +1 -1
- package/dist/components/actions/button/button.styles.js +2 -0
- package/dist/components/actions/button/button.styles.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.js +4 -1
- package/dist/components/actions/icon-button/icon-button.styles.js.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.js +2 -0
- package/dist/components/actions/split-button/split-button.styles.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.js +4 -2
- package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
- package/dist/components/components.js +1 -1
- package/dist/components/content/blockquote/blockquote.styles.d.ts.map +1 -1
- package/dist/components/content/blockquote/blockquote.styles.js +6 -2
- package/dist/components/content/blockquote/blockquote.styles.js.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.d.ts.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.js +2 -0
- package/dist/components/content/code-viewer/code-viewer.styles.js.map +1 -1
- package/dist/components/content/icon/icon-aliases.js +5 -5
- package/dist/components/content/icon/icon-aliases.js.map +1 -1
- package/dist/components/content/icon/icon-registry.js +2 -2
- package/dist/components/content/icon/icon-registry.js.map +1 -1
- package/dist/components/content/image/image.styles.d.ts.map +1 -1
- package/dist/components/content/image/image.styles.js +18 -6
- package/dist/components/content/image/image.styles.js.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js +2 -0
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js.map +1 -1
- package/dist/components/content/tag/tag.styles.d.ts.map +1 -1
- package/dist/components/content/tag/tag.styles.js +4 -2
- package/dist/components/content/tag/tag.styles.js.map +1 -1
- package/dist/components/content/title/title.styles.d.ts.map +1 -1
- package/dist/components/content/title/title.styles.js +21 -13
- package/dist/components/content/title/title.styles.js.map +1 -1
- package/dist/components/content/tooltip/tooltip.styles.d.ts.map +1 -1
- package/dist/components/content/tooltip/tooltip.styles.js +2 -0
- package/dist/components/content/tooltip/tooltip.styles.js.map +1 -1
- package/dist/components/forms/form-field/form-field.styles.d.ts.map +1 -1
- package/dist/components/forms/form-field/form-field.styles.js +34 -21
- package/dist/components/forms/form-field/form-field.styles.js.map +1 -1
- package/dist/components/{index-DYnIl3ts.js → index-Cwro7Ee_.js} +488 -298
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.js +2 -0
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.js.map +1 -1
- package/dist/components/inputs/code-editor/code-editor.styles.d.ts.map +1 -1
- package/dist/components/inputs/code-editor/code-editor.styles.js +9 -0
- package/dist/components/inputs/code-editor/code-editor.styles.js.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.d.ts.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.js +2 -0
- package/dist/components/inputs/combo-box/combo-box.styles.js.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.js +16 -13
- package/dist/components/inputs/dropdown/dropdown.styles.js.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +2 -0
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.js +2 -0
- package/dist/components/inputs/number-field/number-field.styles.js.map +1 -1
- package/dist/components/inputs/password-field/password-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/password-field/password-field.styles.js +2 -0
- package/dist/components/inputs/password-field/password-field.styles.js.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.js +2 -0
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.js.map +1 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.js +2 -0
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.js.map +1 -1
- package/dist/components/inputs/search-field/search-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/search-field/search-field.styles.js +2 -0
- package/dist/components/inputs/search-field/search-field.styles.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.d.ts +5 -5
- package/dist/components/inputs/segmented-control/segmented-control.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.js +4 -4
- package/dist/components/inputs/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.js +15 -2
- package/dist/components/inputs/segmented-control/segmented-control.styles.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.template.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.template.js +6 -3
- package/dist/components/inputs/segmented-control/segmented-control.template.js.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.styles.js +2 -0
- package/dist/components/inputs/switch-field/switch-field.styles.js.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.js +2 -0
- package/dist/components/inputs/text-field/text-field.styles.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.js +3 -3
- package/dist/components/inputs/toggle-button/toggle-button.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.js +2 -0
- package/dist/components/inputs/toggle-button/toggle-button.styles.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.template.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.template.js +6 -1
- package/dist/components/inputs/toggle-button/toggle-button.template.js.map +1 -1
- package/dist/components/inputs/token/token.styles.d.ts.map +1 -1
- package/dist/components/inputs/token/token.styles.js +2 -0
- package/dist/components/inputs/token/token.styles.js.map +1 -1
- package/dist/components/layout/card/card.styles.d.ts.map +1 -1
- package/dist/components/layout/card/card.styles.js +12 -0
- package/dist/components/layout/card/card.styles.js.map +1 -1
- package/dist/components/layout/page-footer/page-footer.styles.d.ts.map +1 -1
- package/dist/components/layout/page-footer/page-footer.styles.js +2 -0
- package/dist/components/layout/page-footer/page-footer.styles.js.map +1 -1
- package/dist/components/layout/window/window.styles.d.ts.map +1 -1
- package/dist/components/layout/window/window.styles.js +2 -0
- package/dist/components/layout/window/window.styles.js.map +1 -1
- package/dist/components/lists-and-menus/cells/cell/cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/cells/cell/cell.styles.js +2 -0
- package/dist/components/lists-and-menus/cells/cell/cell.styles.js.map +1 -1
- package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.js +18 -12
- package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.js.map +1 -1
- package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.js +2 -0
- package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.js.map +1 -1
- package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.js +2 -0
- package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.js.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.styles.js +4 -0
- package/dist/components/lists-and-menus/menu/menu.styles.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +3 -0
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +3 -0
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/link/link.styles.d.ts.map +1 -1
- package/dist/components/navigation/link/link.styles.js +2 -0
- package/dist/components/navigation/link/link.styles.js.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.js +2 -0
- package/dist/components/navigation/menu-bar/menu-bar.styles.js.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +2 -0
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.js +2 -0
- package/dist/components/navigation/pagination/pagination.styles.js.map +1 -1
- package/dist/components/navigation/skip-link/skip-link.styles.d.ts.map +1 -1
- package/dist/components/navigation/skip-link/skip-link.styles.js +3 -1
- package/dist/components/navigation/skip-link/skip-link.styles.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.js +4 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +3 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +4 -2
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map +1 -1
- package/dist/components/{prism-python-C9GXiQLy.js → prism-python-DupfA39T.js} +1 -1
- package/dist/components/{prism-rust-De_U8Otq.js → prism-rust-yPrYE0Hd.js} +1 -1
- package/dist/components/{prism-typescript-BJbUDHsa.js → prism-typescript-C1NT9IBX.js} +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.js +4 -2
- package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.d.ts +3 -3
- package/dist/components/status-and-feedback/banner/banner.d.ts.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.js +3 -2
- package/dist/components/status-and-feedback/banner/banner.js.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.js +12 -10
- package/dist/components/status-and-feedback/banner/banner.styles.js.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.template.js +2 -4
- package/dist/components/status-and-feedback/banner/banner.template.js.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +2 -0
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +2 -0
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress/progress.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress/progress.styles.js +2 -0
- package/dist/components/status-and-feedback/progress/progress.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.d.ts +9 -6
- package/dist/components/status-and-feedback/progress-bar/progress-bar.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.js +22 -19
- package/dist/components/status-and-feedback/progress-bar/progress-bar.js.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js +77 -75
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.template.js +8 -8
- package/dist/components/status-and-feedback/progress-bar/progress-bar.template.js.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.d.ts +25 -8
- package/dist/components/status-and-feedback/progress-circle/progress-circle.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.js +42 -19
- package/dist/components/status-and-feedback/progress-circle/progress-circle.js.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js +88 -72
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.d.ts +6 -0
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js +60 -19
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js.map +1 -1
- package/dist/css/settings.css +207 -96
- package/package.json +1 -1
package/dist/css/settings.css
CHANGED
|
@@ -304,11 +304,11 @@
|
|
|
304
304
|
--primitives-corner-radius-xxs: 3px;
|
|
305
305
|
--primitives-corner-radius-xs: 4px;
|
|
306
306
|
--primitives-corner-radius-sm: 6px;
|
|
307
|
-
--primitives-corner-radius-md:
|
|
308
|
-
--primitives-corner-radius-lg:
|
|
309
|
-
--primitives-corner-radius-xl:
|
|
310
|
-
--primitives-corner-radius-xxl:
|
|
311
|
-
--primitives-corner-radius-xxxl:
|
|
307
|
+
--primitives-corner-radius-md: 8px;
|
|
308
|
+
--primitives-corner-radius-lg: 10px;
|
|
309
|
+
--primitives-corner-radius-xl: 12px;
|
|
310
|
+
--primitives-corner-radius-xxl: 16px;
|
|
311
|
+
--primitives-corner-radius-xxxl: 24px;
|
|
312
312
|
--primitives-corner-radius-full: 9999px;
|
|
313
313
|
|
|
314
314
|
/* ## Typography */
|
|
@@ -342,9 +342,9 @@
|
|
|
342
342
|
--primitives-font-weight-body-thin: 200;
|
|
343
343
|
--primitives-font-weight-body-light: 300;
|
|
344
344
|
--primitives-font-weight-body-regular: 400;
|
|
345
|
-
--primitives-font-weight-body-medium:
|
|
346
|
-
--primitives-font-weight-body-semi-bold:
|
|
347
|
-
--primitives-font-weight-body-bold:
|
|
345
|
+
--primitives-font-weight-body-medium: 475;
|
|
346
|
+
--primitives-font-weight-body-semi-bold: 550;
|
|
347
|
+
--primitives-font-weight-body-bold: 600;
|
|
348
348
|
--primitives-font-weight-body-extra-bold: 700;
|
|
349
349
|
--primitives-font-weight-body-black: 800;
|
|
350
350
|
|
|
@@ -352,9 +352,9 @@
|
|
|
352
352
|
--primitives-font-weight-display-thin: 200;
|
|
353
353
|
--primitives-font-weight-display-light: 300;
|
|
354
354
|
--primitives-font-weight-display-regular: 400;
|
|
355
|
-
--primitives-font-weight-display-medium:
|
|
356
|
-
--primitives-font-weight-display-semi-bold:
|
|
357
|
-
--primitives-font-weight-display-bold:
|
|
355
|
+
--primitives-font-weight-display-medium: 475;
|
|
356
|
+
--primitives-font-weight-display-semi-bold: 550;
|
|
357
|
+
--primitives-font-weight-display-bold: 600;
|
|
358
358
|
--primitives-font-weight-display-extra-bold: 700;
|
|
359
359
|
--primitives-font-weight-display-black: 800;
|
|
360
360
|
|
|
@@ -383,6 +383,26 @@
|
|
|
383
383
|
var(--primitives-font-size-200) / var(--primitives-line-height-flat)
|
|
384
384
|
var(--primitives-font-family-body)
|
|
385
385
|
;
|
|
386
|
+
--primitives-font-body-lg-medium-loose:
|
|
387
|
+
var(--primitives-font-weight-body-medium)
|
|
388
|
+
var(--primitives-font-size-200) / var(--primitives-line-height-loose)
|
|
389
|
+
var(--primitives-font-family-body)
|
|
390
|
+
;
|
|
391
|
+
--primitives-font-body-lg-medium-snug:
|
|
392
|
+
var(--primitives-font-weight-body-medium)
|
|
393
|
+
var(--primitives-font-size-200) / var(--primitives-line-height-snug)
|
|
394
|
+
var(--primitives-font-family-body)
|
|
395
|
+
;
|
|
396
|
+
--primitives-font-body-lg-medium-tight:
|
|
397
|
+
var(--primitives-font-weight-body-medium)
|
|
398
|
+
var(--primitives-font-size-200) / var(--primitives-line-height-tight)
|
|
399
|
+
var(--primitives-font-family-body)
|
|
400
|
+
;
|
|
401
|
+
--primitives-font-body-lg-medium-flat:
|
|
402
|
+
var(--primitives-font-weight-body-medium)
|
|
403
|
+
var(--primitives-font-size-200) / var(--primitives-line-height-flat)
|
|
404
|
+
var(--primitives-font-family-body)
|
|
405
|
+
;
|
|
386
406
|
--primitives-font-body-lg-bold-loose:
|
|
387
407
|
var(--primitives-font-weight-body-bold)
|
|
388
408
|
var(--primitives-font-size-200) / var(--primitives-line-height-loose)
|
|
@@ -423,6 +443,26 @@
|
|
|
423
443
|
var(--primitives-font-size-100) / var(--primitives-line-height-flat)
|
|
424
444
|
var(--primitives-font-family-body)
|
|
425
445
|
;
|
|
446
|
+
--primitives-font-body-md-medium-loose:
|
|
447
|
+
var(--primitives-font-weight-body-medium)
|
|
448
|
+
var(--primitives-font-size-100) / var(--primitives-line-height-loose)
|
|
449
|
+
var(--primitives-font-family-body)
|
|
450
|
+
;
|
|
451
|
+
--primitives-font-body-md-medium-snug:
|
|
452
|
+
var(--primitives-font-weight-body-medium)
|
|
453
|
+
var(--primitives-font-size-100) / var(--primitives-line-height-snug)
|
|
454
|
+
var(--primitives-font-family-body)
|
|
455
|
+
;
|
|
456
|
+
--primitives-font-body-md-medium-tight:
|
|
457
|
+
var(--primitives-font-weight-body-medium)
|
|
458
|
+
var(--primitives-font-size-100) / var(--primitives-line-height-tight)
|
|
459
|
+
var(--primitives-font-family-body)
|
|
460
|
+
;
|
|
461
|
+
--primitives-font-body-md-medium-flat:
|
|
462
|
+
var(--primitives-font-weight-body-medium)
|
|
463
|
+
var(--primitives-font-size-100) / var(--primitives-line-height-flat)
|
|
464
|
+
var(--primitives-font-family-body)
|
|
465
|
+
;
|
|
426
466
|
--primitives-font-body-md-bold-loose:
|
|
427
467
|
var(--primitives-font-weight-body-bold)
|
|
428
468
|
var(--primitives-font-size-100) / var(--primitives-line-height-loose)
|
|
@@ -463,6 +503,26 @@
|
|
|
463
503
|
var(--primitives-font-size-90) / var(--primitives-line-height-flat)
|
|
464
504
|
var(--primitives-font-family-body)
|
|
465
505
|
;
|
|
506
|
+
--primitives-font-body-sm-medium-loose:
|
|
507
|
+
var(--primitives-font-weight-body-medium)
|
|
508
|
+
var(--primitives-font-size-90) / var(--primitives-line-height-loose)
|
|
509
|
+
var(--primitives-font-family-body)
|
|
510
|
+
;
|
|
511
|
+
--primitives-font-body-sm-medium-snug:
|
|
512
|
+
var(--primitives-font-weight-body-medium)
|
|
513
|
+
var(--primitives-font-size-90) / var(--primitives-line-height-snug)
|
|
514
|
+
var(--primitives-font-family-body)
|
|
515
|
+
;
|
|
516
|
+
--primitives-font-body-sm-medium-tight:
|
|
517
|
+
var(--primitives-font-weight-body-medium)
|
|
518
|
+
var(--primitives-font-size-90) / var(--primitives-line-height-tight)
|
|
519
|
+
var(--primitives-font-family-body)
|
|
520
|
+
;
|
|
521
|
+
--primitives-font-body-sm-medium-flat:
|
|
522
|
+
var(--primitives-font-weight-body-medium)
|
|
523
|
+
var(--primitives-font-size-90) / var(--primitives-line-height-flat)
|
|
524
|
+
var(--primitives-font-family-body)
|
|
525
|
+
;
|
|
466
526
|
--primitives-font-body-sm-bold-loose:
|
|
467
527
|
var(--primitives-font-weight-body-bold)
|
|
468
528
|
var(--primitives-font-size-90) / var(--primitives-line-height-loose)
|
|
@@ -503,6 +563,26 @@
|
|
|
503
563
|
var(--primitives-font-size-80) / var(--primitives-line-height-flat)
|
|
504
564
|
var(--primitives-font-family-body)
|
|
505
565
|
;
|
|
566
|
+
--primitives-font-body-xs-medium-loose:
|
|
567
|
+
var(--primitives-font-weight-body-medium)
|
|
568
|
+
var(--primitives-font-size-80) / var(--primitives-line-height-loose)
|
|
569
|
+
var(--primitives-font-family-body)
|
|
570
|
+
;
|
|
571
|
+
--primitives-font-body-xs-medium-snug:
|
|
572
|
+
var(--primitives-font-weight-body-medium)
|
|
573
|
+
var(--primitives-font-size-80) / var(--primitives-line-height-snug)
|
|
574
|
+
var(--primitives-font-family-body)
|
|
575
|
+
;
|
|
576
|
+
--primitives-font-body-xs-medium-tight:
|
|
577
|
+
var(--primitives-font-weight-body-medium)
|
|
578
|
+
var(--primitives-font-size-80) / var(--primitives-line-height-tight)
|
|
579
|
+
var(--primitives-font-family-body)
|
|
580
|
+
;
|
|
581
|
+
--primitives-font-body-xs-medium-flat:
|
|
582
|
+
var(--primitives-font-weight-body-medium)
|
|
583
|
+
var(--primitives-font-size-80) / var(--primitives-line-height-flat)
|
|
584
|
+
var(--primitives-font-family-body)
|
|
585
|
+
;
|
|
506
586
|
--primitives-font-body-xs-bold-loose:
|
|
507
587
|
var(--primitives-font-weight-body-bold)
|
|
508
588
|
var(--primitives-font-size-80) / var(--primitives-line-height-loose)
|
|
@@ -548,6 +628,26 @@
|
|
|
548
628
|
var(--primitives-font-size-70) / var(--primitives-line-height-flat)
|
|
549
629
|
var(--primitives-font-family-body)
|
|
550
630
|
;
|
|
631
|
+
--primitives-font-body-xxs-medium-loose:
|
|
632
|
+
var(--primitives-font-weight-body-medium)
|
|
633
|
+
var(--primitives-font-size-70) / var(--primitives-line-height-loose)
|
|
634
|
+
var(--primitives-font-family-body)
|
|
635
|
+
;
|
|
636
|
+
--primitives-font-body-xxs-medium-snug:
|
|
637
|
+
var(--primitives-font-weight-body-medium)
|
|
638
|
+
var(--primitives-font-size-70) / var(--primitives-line-height-snug)
|
|
639
|
+
var(--primitives-font-family-body)
|
|
640
|
+
;
|
|
641
|
+
--primitives-font-body-xxs-medium-tight:
|
|
642
|
+
var(--primitives-font-weight-body-medium)
|
|
643
|
+
var(--primitives-font-size-70) / var(--primitives-line-height-tight)
|
|
644
|
+
var(--primitives-font-family-body)
|
|
645
|
+
;
|
|
646
|
+
--primitives-font-body-xxs-medium-flat:
|
|
647
|
+
var(--primitives-font-weight-body-medium)
|
|
648
|
+
var(--primitives-font-size-70) / var(--primitives-line-height-flat)
|
|
649
|
+
var(--primitives-font-family-body)
|
|
650
|
+
;
|
|
551
651
|
--primitives-font-body-xxs-bold-loose:
|
|
552
652
|
var(--primitives-font-weight-body-bold)
|
|
553
653
|
var(--primitives-font-size-70) / var(--primitives-line-height-loose)
|
|
@@ -773,6 +873,7 @@
|
|
|
773
873
|
--semantics-surfaces-border-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
|
|
774
874
|
--semantics-surfaces-tinted-background-color: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-75));
|
|
775
875
|
--semantics-surfaces-tinted-border-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
|
|
876
|
+
--semantics-surfaces-corner-radius: var(--primitives-corner-radius-lg);
|
|
776
877
|
|
|
777
878
|
/* ## Content */
|
|
778
879
|
|
|
@@ -820,14 +921,6 @@
|
|
|
820
921
|
--semantics-controls-md-min-size: var(--primitives-space-44);
|
|
821
922
|
--semantics-controls-lg-min-size: var(--primitives-space-56);
|
|
822
923
|
|
|
823
|
-
--semantics-buttons-xs-icon-size: var(--primitives-space-16);
|
|
824
|
-
--semantics-buttons-sm-icon-size: var(--primitives-space-18);
|
|
825
|
-
--semantics-buttons-md-icon-size: var(--primitives-space-20);
|
|
826
|
-
|
|
827
|
-
--semantics-buttons-xs-icon-only-icon-size: var(--primitives-space-16);
|
|
828
|
-
--semantics-buttons-sm-icon-only-icon-size: var(--primitives-space-20);
|
|
829
|
-
--semantics-buttons-md-icon-only-icon-size: var(--primitives-space-24);
|
|
830
|
-
|
|
831
924
|
--semantics-controls-md-inline-padding: var(--primitives-space-12);
|
|
832
925
|
--semantics-controls-sm-inline-padding: var(--primitives-space-10);
|
|
833
926
|
--semantics-controls-xs-inline-padding: var(--primitives-space-6);
|
|
@@ -854,17 +947,25 @@
|
|
|
854
947
|
|
|
855
948
|
/* ## Buttons */
|
|
856
949
|
|
|
857
|
-
--semantics-buttons-
|
|
858
|
-
--semantics-buttons-sm-font: var(--primitives-font-body-sm-
|
|
859
|
-
--semantics-buttons-
|
|
950
|
+
--semantics-buttons-xs-font: var(--primitives-font-body-xs-medium-flat);
|
|
951
|
+
--semantics-buttons-sm-font: var(--primitives-font-body-sm-medium-flat);
|
|
952
|
+
--semantics-buttons-md-font: var(--primitives-font-body-md-medium-flat);
|
|
860
953
|
|
|
861
954
|
--semantics-buttons-xs-divider-length: var(--primitives-space-14);
|
|
862
955
|
--semantics-buttons-sm-divider-length: var(--primitives-space-20);
|
|
863
956
|
--semantics-buttons-md-divider-length: var(--primitives-space-28);
|
|
864
957
|
|
|
865
|
-
--semantics-buttons-md-gap: var(--primitives-space-4);
|
|
866
|
-
--semantics-buttons-sm-gap: var(--primitives-space-3);
|
|
867
958
|
--semantics-buttons-xs-gap: var(--primitives-space-2);
|
|
959
|
+
--semantics-buttons-sm-gap: var(--primitives-space-3);
|
|
960
|
+
--semantics-buttons-md-gap: var(--primitives-space-4);
|
|
961
|
+
|
|
962
|
+
--semantics-buttons-xs-icon-size: var(--primitives-space-16);
|
|
963
|
+
--semantics-buttons-sm-icon-size: var(--primitives-space-18);
|
|
964
|
+
--semantics-buttons-md-icon-size: var(--primitives-space-20);
|
|
965
|
+
|
|
966
|
+
--semantics-buttons-xs-icon-only-icon-size: var(--primitives-space-16);
|
|
967
|
+
--semantics-buttons-sm-icon-only-icon-size: var(--primitives-space-20);
|
|
968
|
+
--semantics-buttons-md-icon-only-icon-size: var(--primitives-space-24);
|
|
868
969
|
|
|
869
970
|
--semantics-buttons-neutral-tinted-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
|
|
870
971
|
--semantics-buttons-neutral-tinted-content-color: light-dark(var(--primitives-color-neutral-900), var(--primitives-color-neutral-900));
|
|
@@ -1181,21 +1282,24 @@
|
|
|
1181
1282
|
|
|
1182
1283
|
/* ## Banner */
|
|
1183
1284
|
|
|
1184
|
-
--components-banner-corner-radius: var(--
|
|
1185
|
-
--components-banner-padding: var(--primitives-space-
|
|
1285
|
+
--components-banner-corner-radius: var(--semantics-surfaces-corner-radius);
|
|
1286
|
+
--components-banner-padding: var(--primitives-space-12);
|
|
1186
1287
|
--components-banner-content-color: var(--semantics-content-color);
|
|
1187
1288
|
--components-banner-content-secondary-color: var(--semantics-content-secondary-color);
|
|
1188
1289
|
--components-banner-neutral-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-75));
|
|
1189
|
-
--components-banner-success-background-color: light-dark(var(--primitives-color-success-50), var(--primitives-color-success-75));
|
|
1190
|
-
--components-banner-warning-background-color: light-dark(var(--primitives-color-warning-50), var(--primitives-color-warning-75));
|
|
1191
|
-
--components-banner-critical-background-color: light-dark(var(--primitives-color-critical-50), var(--primitives-color-critical-75));
|
|
1192
1290
|
--components-banner-neutral-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-150));
|
|
1291
|
+
--components-banner-neutral-icon-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-550));
|
|
1292
|
+
--components-banner-accent-background-color: light-dark(var(--primitives-color-accent-50), var(--primitives-color-accent-75));
|
|
1293
|
+
--components-banner-accent-border-color: light-dark(var(--primitives-color-accent-100), var(--primitives-color-accent-150));
|
|
1294
|
+
--components-banner-accent-icon-color: light-dark(var(--primitives-color-accent-600), var(--primitives-color-accent-500));
|
|
1295
|
+
--components-banner-success-background-color: light-dark(var(--primitives-color-success-50), var(--primitives-color-success-75));
|
|
1193
1296
|
--components-banner-success-border-color: light-dark(var(--primitives-color-success-100), var(--primitives-color-success-150));
|
|
1194
|
-
--components-banner-warning-border-color: light-dark(var(--primitives-color-warning-100), var(--primitives-color-warning-150));
|
|
1195
|
-
--components-banner-critical-border-color: light-dark(var(--primitives-color-critical-100), var(--primitives-color-critical-150));
|
|
1196
|
-
--components-banner-neutral-icon-color: var(--semantics-content-color);
|
|
1197
1297
|
--components-banner-success-icon-color: light-dark(var(--primitives-color-success-500), var(--primitives-color-success-600));
|
|
1298
|
+
--components-banner-warning-background-color: light-dark(var(--primitives-color-warning-50), var(--primitives-color-warning-75));
|
|
1299
|
+
--components-banner-warning-border-color: light-dark(var(--primitives-color-warning-100), var(--primitives-color-warning-150));
|
|
1198
1300
|
--components-banner-warning-icon-color: light-dark(var(--primitives-color-warning-450), var(--primitives-color-warning-700));
|
|
1301
|
+
--components-banner-critical-background-color: light-dark(var(--primitives-color-critical-50), var(--primitives-color-critical-75));
|
|
1302
|
+
--components-banner-critical-border-color: light-dark(var(--primitives-color-critical-100), var(--primitives-color-critical-150));
|
|
1199
1303
|
--components-banner-critical-icon-color: light-dark(var(--primitives-color-critical-550), var(--primitives-color-critical-600));
|
|
1200
1304
|
|
|
1201
1305
|
/* ## Box */
|
|
@@ -1204,7 +1308,7 @@
|
|
|
1204
1308
|
--components-box-base-background-color: var(--semantics-surfaces-background-color);
|
|
1205
1309
|
--components-box-border-color: var(--semantics-surfaces-tinted-border-color);
|
|
1206
1310
|
--components-box-base-border-color: var(--semantics-surfaces-border-color);
|
|
1207
|
-
--components-box-corner-radius: var(--
|
|
1311
|
+
--components-box-corner-radius: var(--semantics-surfaces-corner-radius);
|
|
1208
1312
|
--components-box-padding: var(--primitives-space-16);
|
|
1209
1313
|
|
|
1210
1314
|
/* ## Button group */
|
|
@@ -1215,8 +1319,13 @@
|
|
|
1215
1319
|
/* ## Card */
|
|
1216
1320
|
|
|
1217
1321
|
--components-card-background-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-75));
|
|
1218
|
-
--components-card-corner-radius: var(--
|
|
1219
|
-
--components-card-box-shadow: var(--primitives-box-shadows-level-
|
|
1322
|
+
--components-card-corner-radius: var(--semantics-surfaces-corner-radius);
|
|
1323
|
+
--components-card-box-shadow: var(--primitives-box-shadows-level-1);
|
|
1324
|
+
--components-card-highlight-border-width: var(--primitives-border-width-thin);
|
|
1325
|
+
--components-card-highlight-border-color: light-dark(
|
|
1326
|
+
color-mix(in srgb, var(--primitives-color-neutral-0) 25%, transparent),
|
|
1327
|
+
color-mix(in srgb, var(--primitives-color-neutral-1000) 10%, transparent)
|
|
1328
|
+
);
|
|
1220
1329
|
|
|
1221
1330
|
/* ## Checkbox */
|
|
1222
1331
|
|
|
@@ -1243,7 +1352,7 @@
|
|
|
1243
1352
|
|
|
1244
1353
|
/* ## Document tab bar */
|
|
1245
1354
|
|
|
1246
|
-
--components-document-tab-bar-tab-title-font: var(--primitives-font-body-sm-
|
|
1355
|
+
--components-document-tab-bar-tab-title-font: var(--primitives-font-body-sm-medium-flat);
|
|
1247
1356
|
|
|
1248
1357
|
/* ## Icon — rijkskleuren
|
|
1249
1358
|
|
|
@@ -1339,7 +1448,7 @@
|
|
|
1339
1448
|
|
|
1340
1449
|
/* ## List */
|
|
1341
1450
|
|
|
1342
|
-
--components-list-corner-radius: var(--semantics-
|
|
1451
|
+
--components-list-corner-radius: var(--semantics-surfaces-corner-radius);
|
|
1343
1452
|
--components-list-drag-placeholder-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
|
|
1344
1453
|
|
|
1345
1454
|
--components-list-item-sm-padding-block: var(--primitives-space-6);
|
|
@@ -1365,7 +1474,7 @@
|
|
|
1365
1474
|
|
|
1366
1475
|
/* ## Menu bar */
|
|
1367
1476
|
|
|
1368
|
-
--components-menu-bar-item-font: var(--primitives-font-body-md-
|
|
1477
|
+
--components-menu-bar-item-font: var(--primitives-font-body-md-medium-flat);
|
|
1369
1478
|
--components-menu-bar-item-inline-padding: var(--primitives-space-8);
|
|
1370
1479
|
--components-menu-bar-item-content-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-750));
|
|
1371
1480
|
--components-menu-bar-item-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
|
|
@@ -1388,7 +1497,7 @@
|
|
|
1388
1497
|
|
|
1389
1498
|
--components-progress-bar-corner-radius: var(--primitives-corner-radius-full);
|
|
1390
1499
|
--components-progress-bar-distribution-corner-radius: var(--primitives-corner-radius-xxs);
|
|
1391
|
-
--components-progress-bar-track-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
|
|
1500
|
+
--components-progress-bar-track-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
|
|
1392
1501
|
--components-progress-bar-track-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
|
|
1393
1502
|
--components-progress-bar-track-border-width: var(--primitives-border-width-thin);
|
|
1394
1503
|
--components-progress-bar-progress-segment-gap: var(--primitives-space-1);
|
|
@@ -1397,75 +1506,77 @@
|
|
|
1397
1506
|
--components-progress-bar-sm-height: var(--primitives-space-4);
|
|
1398
1507
|
--components-progress-bar-md-height: var(--primitives-space-8);
|
|
1399
1508
|
--components-progress-bar-lg-height: var(--primitives-space-16);
|
|
1400
|
-
--components-progress-bar-
|
|
1401
|
-
--components-progress-bar-
|
|
1402
|
-
--components-progress-bar-
|
|
1403
|
-
--components-progress-bar-
|
|
1404
|
-
--components-progress-bar-
|
|
1509
|
+
--components-progress-bar-caption-gap: var(--primitives-space-6);
|
|
1510
|
+
--components-progress-bar-text-color: var(--semantics-content-color);
|
|
1511
|
+
--components-progress-bar-supporting-text-color: var(--semantics-content-secondary-color);
|
|
1512
|
+
--components-progress-bar-text-font: var(--primitives-font-body-md-regular-tight);
|
|
1513
|
+
--components-progress-bar-supporting-text-font: var(--primitives-font-body-md-regular-tight);
|
|
1405
1514
|
|
|
1406
1515
|
/* ### Progress bar — semantic variants */
|
|
1407
1516
|
|
|
1408
1517
|
--components-progress-bar-segment-border-width: var(--primitives-border-width-thin);
|
|
1409
1518
|
|
|
1410
|
-
--components-progress-bar-neutral-
|
|
1519
|
+
--components-progress-bar-neutral-background-color: var(--semantics-categories-filled-neutral-background-color);
|
|
1411
1520
|
--components-progress-bar-neutral-border-color: var(--semantics-categories-filled-neutral-border-color);
|
|
1412
|
-
--components-progress-bar-accent-
|
|
1521
|
+
--components-progress-bar-accent-background-color: var(--semantics-categories-filled-accent-background-color);
|
|
1413
1522
|
--components-progress-bar-accent-border-color: var(--semantics-categories-filled-accent-border-color);
|
|
1414
|
-
--components-progress-bar-success-
|
|
1523
|
+
--components-progress-bar-success-background-color: var(--semantics-categories-filled-success-background-color);
|
|
1415
1524
|
--components-progress-bar-success-border-color: var(--semantics-categories-filled-success-border-color);
|
|
1416
|
-
--components-progress-bar-warning-
|
|
1525
|
+
--components-progress-bar-warning-background-color: var(--semantics-categories-filled-warning-background-color);
|
|
1417
1526
|
--components-progress-bar-warning-border-color: var(--semantics-categories-filled-warning-border-color);
|
|
1418
|
-
--components-progress-bar-critical-
|
|
1527
|
+
--components-progress-bar-critical-background-color: var(--semantics-categories-filled-critical-background-color);
|
|
1419
1528
|
--components-progress-bar-critical-border-color: var(--semantics-categories-filled-critical-border-color);
|
|
1420
1529
|
|
|
1421
1530
|
/* ### Progress bar — rijkskleuren */
|
|
1422
1531
|
|
|
1423
|
-
--components-progress-bar-coolgray-
|
|
1532
|
+
--components-progress-bar-coolgray-background-color: var(--semantics-categories-filled-coolgray-background-color);
|
|
1424
1533
|
--components-progress-bar-coolgray-border-color: var(--semantics-categories-filled-coolgray-border-color);
|
|
1425
|
-
--components-progress-bar-lintblauw-
|
|
1534
|
+
--components-progress-bar-lintblauw-background-color: var(--semantics-categories-filled-lintblauw-background-color);
|
|
1426
1535
|
--components-progress-bar-lintblauw-border-color: var(--semantics-categories-filled-lintblauw-border-color);
|
|
1427
|
-
--components-progress-bar-donkerblauw-
|
|
1536
|
+
--components-progress-bar-donkerblauw-background-color: var(--semantics-categories-filled-donkerblauw-background-color);
|
|
1428
1537
|
--components-progress-bar-donkerblauw-border-color: var(--semantics-categories-filled-donkerblauw-border-color);
|
|
1429
|
-
--components-progress-bar-hemelblauw-
|
|
1538
|
+
--components-progress-bar-hemelblauw-background-color: var(--semantics-categories-filled-hemelblauw-background-color);
|
|
1430
1539
|
--components-progress-bar-hemelblauw-border-color: var(--semantics-categories-filled-hemelblauw-border-color);
|
|
1431
|
-
--components-progress-bar-lichtblauw-
|
|
1540
|
+
--components-progress-bar-lichtblauw-background-color: var(--semantics-categories-filled-lichtblauw-background-color);
|
|
1432
1541
|
--components-progress-bar-lichtblauw-border-color: var(--semantics-categories-filled-lichtblauw-border-color);
|
|
1433
|
-
--components-progress-bar-paars-
|
|
1542
|
+
--components-progress-bar-paars-background-color: var(--semantics-categories-filled-paars-background-color);
|
|
1434
1543
|
--components-progress-bar-paars-border-color: var(--semantics-categories-filled-paars-border-color);
|
|
1435
|
-
--components-progress-bar-violet-
|
|
1544
|
+
--components-progress-bar-violet-background-color: var(--semantics-categories-filled-violet-background-color);
|
|
1436
1545
|
--components-progress-bar-violet-border-color: var(--semantics-categories-filled-violet-border-color);
|
|
1437
|
-
--components-progress-bar-robijnrood-
|
|
1546
|
+
--components-progress-bar-robijnrood-background-color: var(--semantics-categories-filled-robijnrood-background-color);
|
|
1438
1547
|
--components-progress-bar-robijnrood-border-color: var(--semantics-categories-filled-robijnrood-border-color);
|
|
1439
|
-
--components-progress-bar-roze-
|
|
1548
|
+
--components-progress-bar-roze-background-color: var(--semantics-categories-filled-roze-background-color);
|
|
1440
1549
|
--components-progress-bar-roze-border-color: var(--semantics-categories-filled-roze-border-color);
|
|
1441
|
-
--components-progress-bar-rood-
|
|
1550
|
+
--components-progress-bar-rood-background-color: var(--semantics-categories-filled-rood-background-color);
|
|
1442
1551
|
--components-progress-bar-rood-border-color: var(--semantics-categories-filled-rood-border-color);
|
|
1443
|
-
--components-progress-bar-oranje-
|
|
1552
|
+
--components-progress-bar-oranje-background-color: var(--semantics-categories-filled-oranje-background-color);
|
|
1444
1553
|
--components-progress-bar-oranje-border-color: var(--semantics-categories-filled-oranje-border-color);
|
|
1445
|
-
--components-progress-bar-donkergeel-
|
|
1554
|
+
--components-progress-bar-donkergeel-background-color: var(--semantics-categories-filled-donkergeel-background-color);
|
|
1446
1555
|
--components-progress-bar-donkergeel-border-color: var(--semantics-categories-filled-donkergeel-border-color);
|
|
1447
|
-
--components-progress-bar-geel-
|
|
1556
|
+
--components-progress-bar-geel-background-color: var(--semantics-categories-filled-geel-background-color);
|
|
1448
1557
|
--components-progress-bar-geel-border-color: var(--semantics-categories-filled-geel-border-color);
|
|
1449
|
-
--components-progress-bar-donkerbruin-
|
|
1558
|
+
--components-progress-bar-donkerbruin-background-color: var(--semantics-categories-filled-donkerbruin-background-color);
|
|
1450
1559
|
--components-progress-bar-donkerbruin-border-color: var(--semantics-categories-filled-donkerbruin-border-color);
|
|
1451
|
-
--components-progress-bar-bruin-
|
|
1560
|
+
--components-progress-bar-bruin-background-color: var(--semantics-categories-filled-bruin-background-color);
|
|
1452
1561
|
--components-progress-bar-bruin-border-color: var(--semantics-categories-filled-bruin-border-color);
|
|
1453
|
-
--components-progress-bar-donkergroen-
|
|
1562
|
+
--components-progress-bar-donkergroen-background-color: var(--semantics-categories-filled-donkergroen-background-color);
|
|
1454
1563
|
--components-progress-bar-donkergroen-border-color: var(--semantics-categories-filled-donkergroen-border-color);
|
|
1455
|
-
--components-progress-bar-groen-
|
|
1564
|
+
--components-progress-bar-groen-background-color: var(--semantics-categories-filled-groen-background-color);
|
|
1456
1565
|
--components-progress-bar-groen-border-color: var(--semantics-categories-filled-groen-border-color);
|
|
1457
|
-
--components-progress-bar-mosgroen-
|
|
1566
|
+
--components-progress-bar-mosgroen-background-color: var(--semantics-categories-filled-mosgroen-background-color);
|
|
1458
1567
|
--components-progress-bar-mosgroen-border-color: var(--semantics-categories-filled-mosgroen-border-color);
|
|
1459
|
-
--components-progress-bar-mintgroen-
|
|
1568
|
+
--components-progress-bar-mintgroen-background-color: var(--semantics-categories-filled-mintgroen-background-color);
|
|
1460
1569
|
--components-progress-bar-mintgroen-border-color: var(--semantics-categories-filled-mintgroen-border-color);
|
|
1461
1570
|
|
|
1462
1571
|
/* ## Progress circle */
|
|
1463
1572
|
|
|
1464
|
-
--components-progress-circle-track-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
|
|
1573
|
+
--components-progress-circle-track-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
|
|
1465
1574
|
--components-progress-circle-track-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
|
|
1466
|
-
--components-progress-circle-
|
|
1467
|
-
--components-progress-circle-
|
|
1468
|
-
--components-progress-circle-
|
|
1575
|
+
--components-progress-circle-caption-gap: var(--primitives-space-8);
|
|
1576
|
+
--components-progress-circle-text-color: var(--semantics-content-color);
|
|
1577
|
+
--components-progress-circle-text-font: var(--primitives-font-body-md-regular-tight);
|
|
1578
|
+
--components-progress-circle-supporting-text-color: var(--semantics-content-secondary-color);
|
|
1579
|
+
--components-progress-circle-supporting-text-font: var(--primitives-font-body-sm-regular-tight);
|
|
1469
1580
|
/* Segment gap is intentionally hard-coded in progress-circle.ts as 1px /
|
|
1470
1581
|
2px (visual gap) and scaled per render into SVG user units, so that the
|
|
1471
1582
|
gap stays a consistent pixel width across every host size. Exposing it
|
|
@@ -1475,56 +1586,56 @@
|
|
|
1475
1586
|
|
|
1476
1587
|
/* ### Progress circle — semantic variants */
|
|
1477
1588
|
|
|
1478
|
-
--components-progress-circle-neutral-
|
|
1589
|
+
--components-progress-circle-neutral-background-color: var(--semantics-categories-filled-neutral-background-color);
|
|
1479
1590
|
--components-progress-circle-neutral-border-color: var(--semantics-categories-filled-neutral-border-color);
|
|
1480
|
-
--components-progress-circle-accent-
|
|
1591
|
+
--components-progress-circle-accent-background-color: var(--semantics-categories-filled-accent-background-color);
|
|
1481
1592
|
--components-progress-circle-accent-border-color: var(--semantics-categories-filled-accent-border-color);
|
|
1482
|
-
--components-progress-circle-success-
|
|
1593
|
+
--components-progress-circle-success-background-color: var(--semantics-categories-filled-success-background-color);
|
|
1483
1594
|
--components-progress-circle-success-border-color: var(--semantics-categories-filled-success-border-color);
|
|
1484
|
-
--components-progress-circle-warning-
|
|
1595
|
+
--components-progress-circle-warning-background-color: var(--semantics-categories-filled-warning-background-color);
|
|
1485
1596
|
--components-progress-circle-warning-border-color: var(--semantics-categories-filled-warning-border-color);
|
|
1486
|
-
--components-progress-circle-critical-
|
|
1597
|
+
--components-progress-circle-critical-background-color: var(--semantics-categories-filled-critical-background-color);
|
|
1487
1598
|
--components-progress-circle-critical-border-color: var(--semantics-categories-filled-critical-border-color);
|
|
1488
1599
|
|
|
1489
1600
|
/* ### Progress circle — rijkskleuren */
|
|
1490
1601
|
|
|
1491
|
-
--components-progress-circle-coolgray-
|
|
1602
|
+
--components-progress-circle-coolgray-background-color: var(--semantics-categories-filled-coolgray-background-color);
|
|
1492
1603
|
--components-progress-circle-coolgray-border-color: var(--semantics-categories-filled-coolgray-border-color);
|
|
1493
|
-
--components-progress-circle-lintblauw-
|
|
1604
|
+
--components-progress-circle-lintblauw-background-color: var(--semantics-categories-filled-lintblauw-background-color);
|
|
1494
1605
|
--components-progress-circle-lintblauw-border-color: var(--semantics-categories-filled-lintblauw-border-color);
|
|
1495
|
-
--components-progress-circle-donkerblauw-
|
|
1606
|
+
--components-progress-circle-donkerblauw-background-color: var(--semantics-categories-filled-donkerblauw-background-color);
|
|
1496
1607
|
--components-progress-circle-donkerblauw-border-color: var(--semantics-categories-filled-donkerblauw-border-color);
|
|
1497
|
-
--components-progress-circle-hemelblauw-
|
|
1608
|
+
--components-progress-circle-hemelblauw-background-color: var(--semantics-categories-filled-hemelblauw-background-color);
|
|
1498
1609
|
--components-progress-circle-hemelblauw-border-color: var(--semantics-categories-filled-hemelblauw-border-color);
|
|
1499
|
-
--components-progress-circle-lichtblauw-
|
|
1610
|
+
--components-progress-circle-lichtblauw-background-color: var(--semantics-categories-filled-lichtblauw-background-color);
|
|
1500
1611
|
--components-progress-circle-lichtblauw-border-color: var(--semantics-categories-filled-lichtblauw-border-color);
|
|
1501
|
-
--components-progress-circle-paars-
|
|
1612
|
+
--components-progress-circle-paars-background-color: var(--semantics-categories-filled-paars-background-color);
|
|
1502
1613
|
--components-progress-circle-paars-border-color: var(--semantics-categories-filled-paars-border-color);
|
|
1503
|
-
--components-progress-circle-violet-
|
|
1614
|
+
--components-progress-circle-violet-background-color: var(--semantics-categories-filled-violet-background-color);
|
|
1504
1615
|
--components-progress-circle-violet-border-color: var(--semantics-categories-filled-violet-border-color);
|
|
1505
|
-
--components-progress-circle-robijnrood-
|
|
1616
|
+
--components-progress-circle-robijnrood-background-color: var(--semantics-categories-filled-robijnrood-background-color);
|
|
1506
1617
|
--components-progress-circle-robijnrood-border-color: var(--semantics-categories-filled-robijnrood-border-color);
|
|
1507
|
-
--components-progress-circle-roze-
|
|
1618
|
+
--components-progress-circle-roze-background-color: var(--semantics-categories-filled-roze-background-color);
|
|
1508
1619
|
--components-progress-circle-roze-border-color: var(--semantics-categories-filled-roze-border-color);
|
|
1509
|
-
--components-progress-circle-rood-
|
|
1620
|
+
--components-progress-circle-rood-background-color: var(--semantics-categories-filled-rood-background-color);
|
|
1510
1621
|
--components-progress-circle-rood-border-color: var(--semantics-categories-filled-rood-border-color);
|
|
1511
|
-
--components-progress-circle-oranje-
|
|
1622
|
+
--components-progress-circle-oranje-background-color: var(--semantics-categories-filled-oranje-background-color);
|
|
1512
1623
|
--components-progress-circle-oranje-border-color: var(--semantics-categories-filled-oranje-border-color);
|
|
1513
|
-
--components-progress-circle-donkergeel-
|
|
1624
|
+
--components-progress-circle-donkergeel-background-color: var(--semantics-categories-filled-donkergeel-background-color);
|
|
1514
1625
|
--components-progress-circle-donkergeel-border-color: var(--semantics-categories-filled-donkergeel-border-color);
|
|
1515
|
-
--components-progress-circle-geel-
|
|
1626
|
+
--components-progress-circle-geel-background-color: var(--semantics-categories-filled-geel-background-color);
|
|
1516
1627
|
--components-progress-circle-geel-border-color: var(--semantics-categories-filled-geel-border-color);
|
|
1517
|
-
--components-progress-circle-donkerbruin-
|
|
1628
|
+
--components-progress-circle-donkerbruin-background-color: var(--semantics-categories-filled-donkerbruin-background-color);
|
|
1518
1629
|
--components-progress-circle-donkerbruin-border-color: var(--semantics-categories-filled-donkerbruin-border-color);
|
|
1519
|
-
--components-progress-circle-bruin-
|
|
1630
|
+
--components-progress-circle-bruin-background-color: var(--semantics-categories-filled-bruin-background-color);
|
|
1520
1631
|
--components-progress-circle-bruin-border-color: var(--semantics-categories-filled-bruin-border-color);
|
|
1521
|
-
--components-progress-circle-donkergroen-
|
|
1632
|
+
--components-progress-circle-donkergroen-background-color: var(--semantics-categories-filled-donkergroen-background-color);
|
|
1522
1633
|
--components-progress-circle-donkergroen-border-color: var(--semantics-categories-filled-donkergroen-border-color);
|
|
1523
|
-
--components-progress-circle-groen-
|
|
1634
|
+
--components-progress-circle-groen-background-color: var(--semantics-categories-filled-groen-background-color);
|
|
1524
1635
|
--components-progress-circle-groen-border-color: var(--semantics-categories-filled-groen-border-color);
|
|
1525
|
-
--components-progress-circle-mosgroen-
|
|
1636
|
+
--components-progress-circle-mosgroen-background-color: var(--semantics-categories-filled-mosgroen-background-color);
|
|
1526
1637
|
--components-progress-circle-mosgroen-border-color: var(--semantics-categories-filled-mosgroen-border-color);
|
|
1527
|
-
--components-progress-circle-mintgroen-
|
|
1638
|
+
--components-progress-circle-mintgroen-background-color: var(--semantics-categories-filled-mintgroen-background-color);
|
|
1528
1639
|
--components-progress-circle-mintgroen-border-color: var(--semantics-categories-filled-mintgroen-border-color);
|
|
1529
1640
|
|
|
1530
1641
|
/* ## Radio button */
|