@dsn-starter-kit/design-tokens 1.0.0 → 1.0.2
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/css/scoped/density-default.css +1 -1
- package/dist/css/scoped/density-information-dense.css +1 -1
- package/dist/css/scoped/wireframe-dark.css +1 -1
- package/dist/css/scoped/wireframe-light.css +1 -1
- package/dist/css/start-dark-default.css +14 -6
- package/dist/css/start-dark-information-dense.css +14 -6
- package/dist/css/start-light-default.css +14 -6
- package/dist/css/start-light-information-dense.css +14 -6
- package/dist/css/variables-dark.css +14 -6
- package/dist/css/variables.css +14 -6
- package/dist/css/wireframe-dark-default.css +13 -5
- package/dist/css/wireframe-dark-information-dense.css +13 -5
- package/dist/css/wireframe-light-default.css +13 -5
- package/dist/css/wireframe-light-information-dense.css +13 -5
- package/dist/js/start-dark-default.d.ts +8 -0
- package/dist/js/start-dark-default.js +165 -3
- package/dist/js/start-dark-information-dense.d.ts +8 -0
- package/dist/js/start-dark-information-dense.js +165 -3
- package/dist/js/start-light-default.d.ts +8 -0
- package/dist/js/start-light-default.js +165 -3
- package/dist/js/start-light-information-dense.d.ts +8 -0
- package/dist/js/start-light-information-dense.js +165 -3
- package/dist/js/tokens-dark.d.ts +8 -0
- package/dist/js/tokens-dark.js +165 -3
- package/dist/js/tokens.d.ts +8 -0
- package/dist/js/tokens.js +165 -3
- package/dist/js/wireframe-dark-default.d.ts +8 -0
- package/dist/js/wireframe-dark-default.js +165 -3
- package/dist/js/wireframe-dark-information-dense.d.ts +8 -0
- package/dist/js/wireframe-dark-information-dense.js +165 -3
- package/dist/js/wireframe-light-default.d.ts +8 -0
- package/dist/js/wireframe-light-default.js +165 -3
- package/dist/js/wireframe-light-information-dense.d.ts +8 -0
- package/dist/js/wireframe-light-information-dense.js +165 -3
- package/dist/json/start-dark-default.json +8 -0
- package/dist/json/start-dark-information-dense.json +8 -0
- package/dist/json/start-light-default.json +8 -0
- package/dist/json/start-light-information-dense.json +8 -0
- package/dist/json/tokens-dark.json +8 -0
- package/dist/json/tokens.json +8 -0
- package/dist/json/wireframe-dark-default.json +8 -0
- package/dist/json/wireframe-dark-information-dense.json +8 -0
- package/dist/json/wireframe-light-default.json +8 -0
- package/dist/json/wireframe-light-information-dense.json +8 -0
- package/dist/scss/_start-dark-default.scss +14 -6
- package/dist/scss/_start-dark-information-dense.scss +14 -6
- package/dist/scss/_start-light-default.scss +14 -6
- package/dist/scss/_start-light-information-dense.scss +14 -6
- package/dist/scss/_variables-dark.scss +14 -6
- package/dist/scss/_variables.scss +14 -6
- package/dist/scss/_wireframe-dark-default.scss +13 -5
- package/dist/scss/_wireframe-dark-information-dense.scss +13 -5
- package/dist/scss/_wireframe-light-default.scss +13 -5
- package/dist/scss/_wireframe-light-information-dense.scss +13 -5
- package/package.json +1 -1
|
@@ -616,6 +616,7 @@ $dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical
|
|
|
616
616
|
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
|
|
617
617
|
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
|
|
618
618
|
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
|
|
619
|
+
$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
619
620
|
$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
|
|
620
621
|
$dsn-button-border-width: $dsn-border-width-thin; // Button border width
|
|
621
622
|
$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
|
|
@@ -852,6 +853,7 @@ $dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergro
|
|
|
852
853
|
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero — donker blauw
|
|
853
854
|
$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
|
|
854
855
|
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond
|
|
856
|
+
$dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
855
857
|
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang
|
|
856
858
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
857
859
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
@@ -1007,8 +1009,14 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
1007
1009
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
1008
1010
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
1009
1011
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
1012
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Pre-heading text color
|
|
1013
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Pre-heading font family
|
|
1014
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Pre-heading font size (same as body text)
|
|
1015
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Pre-heading font weight (bold to distinguish from heading text)
|
|
1016
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Pre-heading line height
|
|
1017
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Space between pre-heading and heading text
|
|
1010
1018
|
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
|
|
1011
|
-
$dsn-progress-bar-color-fill: $dsn-color-accent-1-
|
|
1019
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track
|
|
1012
1020
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
1013
1021
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
1014
1022
|
$dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
|
|
@@ -1186,13 +1194,13 @@ $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
|
1186
1194
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1187
1195
|
$dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
|
|
1188
1196
|
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
|
|
1189
|
-
$dsn-details-
|
|
1197
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1190
1198
|
$dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
|
|
1191
1199
|
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1192
1200
|
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1193
1201
|
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1194
1202
|
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
|
|
1195
|
-
$dsn-details-
|
|
1203
|
+
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
|
|
1196
1204
|
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
|
|
1197
1205
|
$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
|
|
1198
1206
|
$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
|
|
@@ -1329,8 +1337,6 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
|
|
|
1329
1337
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1330
1338
|
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1331
1339
|
$dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1332
|
-
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1333
|
-
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1334
1340
|
$dsn-radio-checked-background-color: $dsn-form-control-accent-color;
|
|
1335
1341
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1336
1342
|
$dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
@@ -1343,9 +1349,11 @@ $dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color;
|
|
|
1343
1349
|
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Text area focus box shadow color
|
|
1344
1350
|
$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Text area focus text color
|
|
1345
1351
|
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Text area hover box shadow color
|
|
1352
|
+
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|
|
1353
|
+
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1354
|
+
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1346
1355
|
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Text area invalid box shadow color
|
|
1347
1356
|
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Text input focus background
|
|
1348
1357
|
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Text input focus box shadow color
|
|
1349
1358
|
$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Text input focus text color
|
|
1350
1359
|
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Text input hover box shadow color
|
|
1351
|
-
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|
|
@@ -614,6 +614,7 @@ $dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical
|
|
|
614
614
|
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
|
|
615
615
|
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
|
|
616
616
|
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
|
|
617
|
+
$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
617
618
|
$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
|
|
618
619
|
$dsn-button-border-width: $dsn-border-width-thin; // Button border width
|
|
619
620
|
$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
|
|
@@ -852,6 +853,7 @@ $dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergro
|
|
|
852
853
|
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero — donker blauw
|
|
853
854
|
$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
|
|
854
855
|
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond
|
|
856
|
+
$dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
855
857
|
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang
|
|
856
858
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
857
859
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
@@ -1007,8 +1009,14 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
1007
1009
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
1008
1010
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
1009
1011
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
1012
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Pre-heading text color
|
|
1013
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Pre-heading font family
|
|
1014
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Pre-heading font size (same as body text)
|
|
1015
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Pre-heading font weight (bold to distinguish from heading text)
|
|
1016
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Pre-heading line height
|
|
1017
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Space between pre-heading and heading text
|
|
1010
1018
|
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
|
|
1011
|
-
$dsn-progress-bar-color-fill: $dsn-color-accent-1-
|
|
1019
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track
|
|
1012
1020
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
1013
1021
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
1014
1022
|
$dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
|
|
@@ -1186,13 +1194,13 @@ $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
|
1186
1194
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1187
1195
|
$dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
|
|
1188
1196
|
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
|
|
1189
|
-
$dsn-details-
|
|
1197
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1190
1198
|
$dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
|
|
1191
1199
|
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1192
1200
|
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1193
1201
|
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1194
1202
|
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
|
|
1195
|
-
$dsn-details-
|
|
1203
|
+
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
|
|
1196
1204
|
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
|
|
1197
1205
|
$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
|
|
1198
1206
|
$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
|
|
@@ -1329,8 +1337,6 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
|
|
|
1329
1337
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1330
1338
|
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1331
1339
|
$dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1332
|
-
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1333
|
-
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1334
1340
|
$dsn-radio-checked-background-color: $dsn-form-control-accent-color;
|
|
1335
1341
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1336
1342
|
$dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
@@ -1343,9 +1349,11 @@ $dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color;
|
|
|
1343
1349
|
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Text area focus box shadow color
|
|
1344
1350
|
$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Text area focus text color
|
|
1345
1351
|
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Text area hover box shadow color
|
|
1352
|
+
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|
|
1353
|
+
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1354
|
+
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1346
1355
|
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Text area invalid box shadow color
|
|
1347
1356
|
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Text input focus background
|
|
1348
1357
|
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Text input focus box shadow color
|
|
1349
1358
|
$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Text input focus text color
|
|
1350
1359
|
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Text input hover box shadow color
|
|
1351
|
-
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|
|
@@ -616,6 +616,7 @@ $dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical
|
|
|
616
616
|
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
|
|
617
617
|
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
|
|
618
618
|
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
|
|
619
|
+
$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
619
620
|
$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
|
|
620
621
|
$dsn-button-border-width: $dsn-border-width-thin; // Button border width
|
|
621
622
|
$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
|
|
@@ -852,6 +853,7 @@ $dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergro
|
|
|
852
853
|
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero — donker blauw
|
|
853
854
|
$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
|
|
854
855
|
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond
|
|
856
|
+
$dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
855
857
|
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang
|
|
856
858
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
857
859
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
@@ -1007,8 +1009,14 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
1007
1009
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
1008
1010
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
1009
1011
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
1012
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Pre-heading text color
|
|
1013
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Pre-heading font family
|
|
1014
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Pre-heading font size (same as body text)
|
|
1015
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Pre-heading font weight (bold to distinguish from heading text)
|
|
1016
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Pre-heading line height
|
|
1017
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Space between pre-heading and heading text
|
|
1010
1018
|
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
|
|
1011
|
-
$dsn-progress-bar-color-fill: $dsn-color-accent-1-
|
|
1019
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track
|
|
1012
1020
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
1013
1021
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
1014
1022
|
$dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
|
|
@@ -1186,13 +1194,13 @@ $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
|
1186
1194
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1187
1195
|
$dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
|
|
1188
1196
|
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
|
|
1189
|
-
$dsn-details-
|
|
1197
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1190
1198
|
$dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
|
|
1191
1199
|
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1192
1200
|
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1193
1201
|
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1194
1202
|
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
|
|
1195
|
-
$dsn-details-
|
|
1203
|
+
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
|
|
1196
1204
|
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
|
|
1197
1205
|
$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
|
|
1198
1206
|
$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
|
|
@@ -1329,8 +1337,6 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
|
|
|
1329
1337
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1330
1338
|
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1331
1339
|
$dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1332
|
-
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1333
|
-
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1334
1340
|
$dsn-radio-checked-background-color: $dsn-form-control-accent-color;
|
|
1335
1341
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1336
1342
|
$dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
@@ -1343,9 +1349,11 @@ $dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color;
|
|
|
1343
1349
|
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Text area focus box shadow color
|
|
1344
1350
|
$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Text area focus text color
|
|
1345
1351
|
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Text area hover box shadow color
|
|
1352
|
+
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|
|
1353
|
+
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1354
|
+
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1346
1355
|
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Text area invalid box shadow color
|
|
1347
1356
|
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Text input focus background
|
|
1348
1357
|
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Text input focus box shadow color
|
|
1349
1358
|
$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Text input focus text color
|
|
1350
1359
|
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Text input hover box shadow color
|
|
1351
|
-
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|
|
@@ -614,6 +614,7 @@ $dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical
|
|
|
614
614
|
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
|
|
615
615
|
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
|
|
616
616
|
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
|
|
617
|
+
$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
617
618
|
$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
|
|
618
619
|
$dsn-button-border-width: $dsn-border-width-thin; // Button border width
|
|
619
620
|
$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
|
|
@@ -852,6 +853,7 @@ $dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergro
|
|
|
852
853
|
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero — donker blauw
|
|
853
854
|
$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
|
|
854
855
|
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond
|
|
856
|
+
$dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
855
857
|
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang
|
|
856
858
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
857
859
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
@@ -1007,8 +1009,14 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
1007
1009
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
1008
1010
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
1009
1011
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
1012
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Pre-heading text color
|
|
1013
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Pre-heading font family
|
|
1014
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Pre-heading font size (same as body text)
|
|
1015
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Pre-heading font weight (bold to distinguish from heading text)
|
|
1016
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Pre-heading line height
|
|
1017
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Space between pre-heading and heading text
|
|
1010
1018
|
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
|
|
1011
|
-
$dsn-progress-bar-color-fill: $dsn-color-accent-1-
|
|
1019
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track
|
|
1012
1020
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
1013
1021
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
1014
1022
|
$dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
|
|
@@ -1186,13 +1194,13 @@ $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
|
1186
1194
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1187
1195
|
$dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
|
|
1188
1196
|
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
|
|
1189
|
-
$dsn-details-
|
|
1197
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1190
1198
|
$dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
|
|
1191
1199
|
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1192
1200
|
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1193
1201
|
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1194
1202
|
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
|
|
1195
|
-
$dsn-details-
|
|
1203
|
+
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
|
|
1196
1204
|
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
|
|
1197
1205
|
$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
|
|
1198
1206
|
$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
|
|
@@ -1329,8 +1337,6 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
|
|
|
1329
1337
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1330
1338
|
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1331
1339
|
$dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1332
|
-
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1333
|
-
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1334
1340
|
$dsn-radio-checked-background-color: $dsn-form-control-accent-color;
|
|
1335
1341
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1336
1342
|
$dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
@@ -1343,9 +1349,11 @@ $dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color;
|
|
|
1343
1349
|
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Text area focus box shadow color
|
|
1344
1350
|
$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Text area focus text color
|
|
1345
1351
|
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Text area hover box shadow color
|
|
1352
|
+
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|
|
1353
|
+
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1354
|
+
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1346
1355
|
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Text area invalid box shadow color
|
|
1347
1356
|
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Text input focus background
|
|
1348
1357
|
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Text input focus box shadow color
|
|
1349
1358
|
$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Text input focus text color
|
|
1350
1359
|
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Text input hover box shadow color
|
|
1351
|
-
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|
|
@@ -614,6 +614,7 @@ $dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical
|
|
|
614
614
|
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
|
|
615
615
|
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
|
|
616
616
|
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
|
|
617
|
+
$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
617
618
|
$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
|
|
618
619
|
$dsn-button-border-width: $dsn-border-width-thin; // Button border width
|
|
619
620
|
$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
|
|
@@ -852,6 +853,7 @@ $dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergro
|
|
|
852
853
|
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero — donker blauw
|
|
853
854
|
$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
|
|
854
855
|
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond
|
|
856
|
+
$dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
855
857
|
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang
|
|
856
858
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
857
859
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
@@ -1007,8 +1009,14 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
1007
1009
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
1008
1010
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
1009
1011
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
1012
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Pre-heading text color
|
|
1013
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Pre-heading font family
|
|
1014
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Pre-heading font size (same as body text)
|
|
1015
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Pre-heading font weight (bold to distinguish from heading text)
|
|
1016
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Pre-heading line height
|
|
1017
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Space between pre-heading and heading text
|
|
1010
1018
|
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
|
|
1011
|
-
$dsn-progress-bar-color-fill: $dsn-color-accent-1-
|
|
1019
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track
|
|
1012
1020
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
1013
1021
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
1014
1022
|
$dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
|
|
@@ -1186,13 +1194,13 @@ $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
|
1186
1194
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1187
1195
|
$dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
|
|
1188
1196
|
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
|
|
1189
|
-
$dsn-details-
|
|
1197
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1190
1198
|
$dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
|
|
1191
1199
|
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1192
1200
|
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1193
1201
|
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1194
1202
|
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
|
|
1195
|
-
$dsn-details-
|
|
1203
|
+
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
|
|
1196
1204
|
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
|
|
1197
1205
|
$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
|
|
1198
1206
|
$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
|
|
@@ -1329,8 +1337,6 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
|
|
|
1329
1337
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1330
1338
|
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1331
1339
|
$dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1332
|
-
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1333
|
-
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1334
1340
|
$dsn-radio-checked-background-color: $dsn-form-control-accent-color;
|
|
1335
1341
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1336
1342
|
$dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
@@ -1343,9 +1349,11 @@ $dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color;
|
|
|
1343
1349
|
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Text area focus box shadow color
|
|
1344
1350
|
$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Text area focus text color
|
|
1345
1351
|
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Text area hover box shadow color
|
|
1352
|
+
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|
|
1353
|
+
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1354
|
+
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1346
1355
|
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Text area invalid box shadow color
|
|
1347
1356
|
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Text input focus background
|
|
1348
1357
|
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Text input focus box shadow color
|
|
1349
1358
|
$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Text input focus text color
|
|
1350
1359
|
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Text input hover box shadow color
|
|
1351
|
-
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|
|
@@ -400,6 +400,7 @@ $dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical
|
|
|
400
400
|
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
|
|
401
401
|
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
|
|
402
402
|
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
|
|
403
|
+
$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
403
404
|
$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
|
|
404
405
|
$dsn-button-border-width: $dsn-border-width-thin; // Button border width
|
|
405
406
|
$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
|
|
@@ -588,6 +589,7 @@ $dsn-grid-row-gap: $dsn-space-column-xl; // Vertical gap between grid rows (over
|
|
|
588
589
|
$dsn-grid-margin: $dsn-space-column-3xl; // Outer padding on both sides of the grid container
|
|
589
590
|
$dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
|
|
590
591
|
$dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
|
|
592
|
+
$dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
591
593
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
592
594
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
593
595
|
$dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
|
|
@@ -716,6 +718,12 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
716
718
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
717
719
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
718
720
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
721
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Pre-heading text color
|
|
722
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Pre-heading font family
|
|
723
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Pre-heading font size (same as body text)
|
|
724
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Pre-heading font weight (bold to distinguish from heading text)
|
|
725
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Pre-heading line height
|
|
726
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Space between pre-heading and heading text
|
|
719
727
|
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
|
|
720
728
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
721
729
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
@@ -1037,7 +1045,6 @@ $dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-bo
|
|
|
1037
1045
|
$dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
1038
1046
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1039
1047
|
$dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1040
|
-
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1041
1048
|
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
|
|
1042
1049
|
$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
|
|
1043
1050
|
$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
|
|
@@ -1048,6 +1055,10 @@ $dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur i
|
|
|
1048
1055
|
$dsn-file-media-icon-size: $dsn-icon-size-md;
|
|
1049
1056
|
$dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
|
|
1050
1057
|
$dsn-file-status-icon-size: $dsn-icon-size-md;
|
|
1058
|
+
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1059
|
+
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1060
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1061
|
+
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1051
1062
|
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Form field error message text color (negative sentiment)
|
|
1052
1063
|
$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Error message icon size
|
|
1053
1064
|
$dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icon size for positive and warning variants
|
|
@@ -1088,7 +1099,6 @@ $dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // K
|
|
|
1088
1099
|
$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond — merkkleur accent-1
|
|
1089
1100
|
$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel — merkkleur voor branding
|
|
1090
1101
|
$dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
|
|
1091
|
-
$dsn-progress-bar-color-fill: $dsn-color-accent-1-color-default; // Blauwe vulbalk — zelfde primaire accentkleur als Spinner
|
|
1092
1102
|
$dsn-radio-group-legend-color: $dsn-form-field-label-color; // Text color for the legend (reuses form field label)
|
|
1093
1103
|
$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font family for the legend (reuses form field label)
|
|
1094
1104
|
$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font size for the legend (reuses form field label)
|
|
@@ -1270,9 +1280,6 @@ $dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background
|
|
|
1270
1280
|
$dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
|
|
1271
1281
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1272
1282
|
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1273
|
-
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1274
|
-
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1275
|
-
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1276
1283
|
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
|
|
1277
1284
|
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
|
|
1278
1285
|
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
|
|
@@ -1304,6 +1311,7 @@ $dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Te
|
|
|
1304
1311
|
$dsn-number-badge-warning-background-color: $dsn-color-warning-inverse-bg-default; // Achtergrondkleur voor warning variant
|
|
1305
1312
|
$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant (wit op donkere achtergrond)
|
|
1306
1313
|
$dsn-number-badge-info-background-color: $dsn-color-info-inverse-bg-default; // Achtergrondkleur voor info variant
|
|
1314
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track
|
|
1307
1315
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1308
1316
|
$dsn-radio-invalid-background-color: $dsn-form-control-invalid-background-color;
|
|
1309
1317
|
$dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;
|
|
@@ -402,6 +402,7 @@ $dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical
|
|
|
402
402
|
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
|
|
403
403
|
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
|
|
404
404
|
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
|
|
405
|
+
$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
405
406
|
$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
|
|
406
407
|
$dsn-button-border-width: $dsn-border-width-thin; // Button border width
|
|
407
408
|
$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
|
|
@@ -588,6 +589,7 @@ $dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Left padd
|
|
|
588
589
|
$dsn-grid-margin: $dsn-space-column-3xl; // Outer padding on both sides of the grid container
|
|
589
590
|
$dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
|
|
590
591
|
$dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
|
|
592
|
+
$dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
591
593
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
592
594
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
593
595
|
$dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
|
|
@@ -716,6 +718,12 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
716
718
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
717
719
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
718
720
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
721
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Pre-heading text color
|
|
722
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Pre-heading font family
|
|
723
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Pre-heading font size (same as body text)
|
|
724
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Pre-heading font weight (bold to distinguish from heading text)
|
|
725
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Pre-heading line height
|
|
726
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Space between pre-heading and heading text
|
|
719
727
|
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
|
|
720
728
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
721
729
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
@@ -1037,7 +1045,6 @@ $dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-bo
|
|
|
1037
1045
|
$dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
1038
1046
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1039
1047
|
$dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1040
|
-
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1041
1048
|
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
|
|
1042
1049
|
$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
|
|
1043
1050
|
$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
|
|
@@ -1048,6 +1055,10 @@ $dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur i
|
|
|
1048
1055
|
$dsn-file-media-icon-size: $dsn-icon-size-md;
|
|
1049
1056
|
$dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
|
|
1050
1057
|
$dsn-file-status-icon-size: $dsn-icon-size-md;
|
|
1058
|
+
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1059
|
+
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1060
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1061
|
+
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1051
1062
|
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Form field error message text color (negative sentiment)
|
|
1052
1063
|
$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Error message icon size
|
|
1053
1064
|
$dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icon size for positive and warning variants
|
|
@@ -1088,7 +1099,6 @@ $dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // K
|
|
|
1088
1099
|
$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond — merkkleur accent-1
|
|
1089
1100
|
$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel — merkkleur voor branding
|
|
1090
1101
|
$dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
|
|
1091
|
-
$dsn-progress-bar-color-fill: $dsn-color-accent-1-color-default; // Blauwe vulbalk — zelfde primaire accentkleur als Spinner
|
|
1092
1102
|
$dsn-radio-group-legend-color: $dsn-form-field-label-color; // Text color for the legend (reuses form field label)
|
|
1093
1103
|
$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font family for the legend (reuses form field label)
|
|
1094
1104
|
$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font size for the legend (reuses form field label)
|
|
@@ -1270,9 +1280,6 @@ $dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background
|
|
|
1270
1280
|
$dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
|
|
1271
1281
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1272
1282
|
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1273
|
-
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1274
|
-
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1275
|
-
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1276
1283
|
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
|
|
1277
1284
|
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
|
|
1278
1285
|
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
|
|
@@ -1304,6 +1311,7 @@ $dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Te
|
|
|
1304
1311
|
$dsn-number-badge-warning-background-color: $dsn-color-warning-inverse-bg-default; // Achtergrondkleur voor warning variant
|
|
1305
1312
|
$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant (wit op donkere achtergrond)
|
|
1306
1313
|
$dsn-number-badge-info-background-color: $dsn-color-info-inverse-bg-default; // Achtergrondkleur voor info variant
|
|
1314
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track
|
|
1307
1315
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1308
1316
|
$dsn-radio-invalid-background-color: $dsn-form-control-invalid-background-color;
|
|
1309
1317
|
$dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;
|
|
@@ -400,6 +400,7 @@ $dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical
|
|
|
400
400
|
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
|
|
401
401
|
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
|
|
402
402
|
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
|
|
403
|
+
$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
403
404
|
$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
|
|
404
405
|
$dsn-button-border-width: $dsn-border-width-thin; // Button border width
|
|
405
406
|
$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
|
|
@@ -588,6 +589,7 @@ $dsn-grid-row-gap: $dsn-space-column-xl; // Vertical gap between grid rows (over
|
|
|
588
589
|
$dsn-grid-margin: $dsn-space-column-3xl; // Outer padding on both sides of the grid container
|
|
589
590
|
$dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
|
|
590
591
|
$dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
|
|
592
|
+
$dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
591
593
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
592
594
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
593
595
|
$dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
|
|
@@ -716,6 +718,12 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
716
718
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
717
719
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
718
720
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
721
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Pre-heading text color
|
|
722
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Pre-heading font family
|
|
723
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Pre-heading font size (same as body text)
|
|
724
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Pre-heading font weight (bold to distinguish from heading text)
|
|
725
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Pre-heading line height
|
|
726
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Space between pre-heading and heading text
|
|
719
727
|
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
|
|
720
728
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
721
729
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
@@ -1037,7 +1045,6 @@ $dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-bo
|
|
|
1037
1045
|
$dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
1038
1046
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1039
1047
|
$dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1040
|
-
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1041
1048
|
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
|
|
1042
1049
|
$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
|
|
1043
1050
|
$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
|
|
@@ -1048,6 +1055,10 @@ $dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur i
|
|
|
1048
1055
|
$dsn-file-media-icon-size: $dsn-icon-size-md;
|
|
1049
1056
|
$dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
|
|
1050
1057
|
$dsn-file-status-icon-size: $dsn-icon-size-md;
|
|
1058
|
+
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1059
|
+
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1060
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1061
|
+
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1051
1062
|
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Form field error message text color (negative sentiment)
|
|
1052
1063
|
$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Error message icon size
|
|
1053
1064
|
$dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icon size for positive and warning variants
|
|
@@ -1088,7 +1099,6 @@ $dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // K
|
|
|
1088
1099
|
$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond — merkkleur accent-1
|
|
1089
1100
|
$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel — merkkleur voor branding
|
|
1090
1101
|
$dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
|
|
1091
|
-
$dsn-progress-bar-color-fill: $dsn-color-accent-1-color-default; // Blauwe vulbalk — zelfde primaire accentkleur als Spinner
|
|
1092
1102
|
$dsn-radio-group-legend-color: $dsn-form-field-label-color; // Text color for the legend (reuses form field label)
|
|
1093
1103
|
$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font family for the legend (reuses form field label)
|
|
1094
1104
|
$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font size for the legend (reuses form field label)
|
|
@@ -1270,9 +1280,6 @@ $dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background
|
|
|
1270
1280
|
$dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
|
|
1271
1281
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1272
1282
|
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1273
|
-
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1274
|
-
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1275
|
-
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1276
1283
|
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
|
|
1277
1284
|
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
|
|
1278
1285
|
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
|
|
@@ -1304,6 +1311,7 @@ $dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Te
|
|
|
1304
1311
|
$dsn-number-badge-warning-background-color: $dsn-color-warning-inverse-bg-default; // Achtergrondkleur voor warning variant
|
|
1305
1312
|
$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant (wit op donkere achtergrond)
|
|
1306
1313
|
$dsn-number-badge-info-background-color: $dsn-color-info-inverse-bg-default; // Achtergrondkleur voor info variant
|
|
1314
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track
|
|
1307
1315
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1308
1316
|
$dsn-radio-invalid-background-color: $dsn-form-control-invalid-background-color;
|
|
1309
1317
|
$dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;
|