@dsn-starter-kit/design-tokens 1.0.0 → 1.0.2

package/dist/scss/_wireframe-light-information-dense.scss

@@ -402,6 +402,7 @@ $dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical
 $dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
 $dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
 $dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
+$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
 $dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
 $dsn-button-border-width: $dsn-border-width-thin; // Button border width
 $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
 $dsn-grid-margin: $dsn-space-column-3xl; // Outer padding on both sides of the grid container
 $dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
 $dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
+$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
 $dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
 $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
 $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
 $dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
 $dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
 $dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
+$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Pre-heading text color
+$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Pre-heading font family
+$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Pre-heading font size (same as body text)
+$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Pre-heading font weight (bold to distinguish from heading text)
+$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Pre-heading line height
+$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Space between pre-heading and heading text
 $dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
 $dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
 $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
 $dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
 $dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
 $dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
-$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
 $dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
 $dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
 $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
 $dsn-file-media-icon-size: $dsn-icon-size-md;
 $dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
 $dsn-file-status-icon-size: $dsn-icon-size-md;
+$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
+$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
+$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
+$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
 $dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Form field error message text color (negative sentiment)
 $dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Error message icon size
 $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
 $dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond — merkkleur accent-1
 $dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel — merkkleur voor branding
 $dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
-$dsn-progress-bar-color-fill: $dsn-color-accent-1-color-default; // Blauwe vulbalk — zelfde primaire accentkleur als Spinner
 $dsn-radio-group-legend-color: $dsn-form-field-label-color; // Text color for the legend (reuses form field label)
 $dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font family for the legend (reuses form field label)
 $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
 $dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
 $dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
-$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
-$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
-$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
 $dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
 $dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
 $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
 $dsn-number-badge-warning-background-color: $dsn-color-warning-inverse-bg-default; // Achtergrondkleur voor warning variant
 $dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant (wit op donkere achtergrond)
 $dsn-number-badge-info-background-color: $dsn-color-info-inverse-bg-default; // Achtergrondkleur voor info variant
+$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track
 $dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
 $dsn-radio-invalid-background-color: $dsn-form-control-invalid-background-color;
 $dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsn-starter-kit/design-tokens",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Design tokens for the design system",
   "main": "dist/js/tokens.js",
   "types": "dist/js/tokens.d.ts",