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

package/dist/js/start-dark-information-dense.js

@@ -11346,6 +11346,29 @@ export default {
         },
       },
     },
+    "breakout-section": {
+      "border-block-width": {
+        $value: "1px",
+        $type: "dimension",
+        $description:
+          "Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        filePath: "src/tokens/components/breakout-section.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.border.width.thin}",
+          $type: "dimension",
+          $description:
+            "Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        },
+        name: "DsnBreakoutSectionBorderBlockWidth",
+        attributes: {
+          category: "dsn",
+          type: "breakout-section",
+          item: "border-block-width",
+        },
+        path: ["dsn", "breakout-section", "border-block-width"],
+      },
+    },
     button: {
       "border-radius": {
         $value: "8px",
@@ -18502,6 +18525,27 @@ export default {
           path: ["dsn", "hero", "color", "inverse"],
         },
       },
+      "border-block-width": {
+        $value: "1px",
+        $type: "dimension",
+        $description:
+          "Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        filePath: "src/tokens/components/hero.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.border.width.thin}",
+          $type: "dimension",
+          $description:
+            "Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        },
+        name: "DsnHeroBorderBlockWidth",
+        attributes: {
+          category: "dsn",
+          type: "hero",
+          item: "border-block-width",
+        },
+        path: ["dsn", "hero", "border-block-width"],
+      },
       image: {
         "blend-color": {
           $value: "#8faed2",
@@ -22616,6 +22660,124 @@ export default {
         },
       },
     },
+    "pre-heading": {
+      color: {
+        $type: "color",
+        $value: "#f1f1f1",
+        $description: "Pre-heading text color",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "color",
+          $value: "{dsn.color.neutral.color-document}",
+          $description: "Pre-heading text color",
+        },
+        name: "DsnPreHeadingColor",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "color",
+        },
+        path: ["dsn", "pre-heading", "color"],
+      },
+      "font-family": {
+        $type: "fontFamily",
+        $value: "IBM Plex Sans, sans-serif",
+        $description: "Pre-heading font family",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontFamily",
+          $value: "{dsn.text.font-family.default}",
+          $description: "Pre-heading font family",
+        },
+        name: "DsnPreHeadingFontFamily",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-family",
+        },
+        path: ["dsn", "pre-heading", "font-family"],
+      },
+      "font-size": {
+        $type: "fontSize",
+        $value: "1rem",
+        $description: "Pre-heading font size (same as body text)",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontSize",
+          $value: "{dsn.text.font-size.md}",
+          $description: "Pre-heading font size (same as body text)",
+        },
+        name: "DsnPreHeadingFontSize",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-size",
+        },
+        path: ["dsn", "pre-heading", "font-size"],
+      },
+      "font-weight": {
+        $type: "fontWeight",
+        $value: "700",
+        $description:
+          "Pre-heading font weight (bold to distinguish from heading text)",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontWeight",
+          $value: "{dsn.text.font-weight.bold}",
+          $description:
+            "Pre-heading font weight (bold to distinguish from heading text)",
+        },
+        name: "DsnPreHeadingFontWeight",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-weight",
+        },
+        path: ["dsn", "pre-heading", "font-weight"],
+      },
+      "line-height": {
+        $type: "lineHeight",
+        $value: "1.5",
+        $description: "Pre-heading line height",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "lineHeight",
+          $value: "{dsn.text.line-height.md}",
+          $description: "Pre-heading line height",
+        },
+        name: "DsnPreHeadingLineHeight",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "line-height",
+        },
+        path: ["dsn", "pre-heading", "line-height"],
+      },
+      "margin-block-end": {
+        $type: "spacing",
+        $value: "calc(0.5rem * 0.25)",
+        $description: "Space between pre-heading and heading text",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "spacing",
+          $value: "{dsn.space.row.xs}",
+          $description: "Space between pre-heading and heading text",
+        },
+        name: "DsnPreHeadingMarginBlockEnd",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "margin-block-end",
+        },
+        path: ["dsn", "pre-heading", "margin-block-end"],
+      },
+    },
     "progress-bar": {
       color: {
         track: {
@@ -22642,14 +22804,14 @@ export default {
           $value: "#8faed2",
           $type: "color",
           $description:
-            "Blauwe vulbalk — zelfde primaire accentkleur als Spinner",
+            "Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track",
           filePath: "src/tokens/components/progress-bar.json",
           isSource: true,
           original: {
-            $value: "{dsn.color.accent-1.color-default}",
+            $value: "{dsn.color.accent-1-inverse.bg-default}",
             $type: "color",
             $description:
-              "Blauwe vulbalk — zelfde primaire accentkleur als Spinner",
+              "Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track",
           },
           name: "DsnProgressBarColorFill",
           attributes: {

package/dist/js/start-light-default.d.ts

@@ -560,6 +560,7 @@ export declare const DsnBreadcrumbNavigationLinkActiveTextDecorationLine: string
 export declare const DsnBreadcrumbNavigationSeparatorColor: string;
 export declare const DsnBreadcrumbNavigationSeparatorSize: string;
 export declare const DsnBreadcrumbNavigationIconSize: string;
+export declare const DsnBreakoutSectionBorderBlockWidth: string;
 export declare const DsnButtonBorderRadius: string;
 export declare const DsnButtonBorderWidth: string;
 export declare const DsnButtonFontFamily: string;
@@ -906,6 +907,7 @@ export declare const DsnHeroBackgroundColorDefault: string;
 export declare const DsnHeroBackgroundColorInverse: string;
 export declare const DsnHeroColorDefault: string;
 export declare const DsnHeroColorInverse: string;
+export declare const DsnHeroBorderBlockWidth: string;
 export declare const DsnHeroImageBlendColor: string;
 export declare const DsnImageBorderRadius: string;
 export declare const DsnImageCaptionColor: string;
@@ -1104,6 +1106,12 @@ export declare const DsnPopoverBodyPaddingInline: string;
 export declare const DsnPopoverFooterPaddingBlockStart: string;
 export declare const DsnPopoverFooterPaddingBlockEnd: string;
 export declare const DsnPopoverFooterPaddingInline: string;
+export declare const DsnPreHeadingColor: string;
+export declare const DsnPreHeadingFontFamily: string;
+export declare const DsnPreHeadingFontSize: string;
+export declare const DsnPreHeadingFontWeight: string;
+export declare const DsnPreHeadingLineHeight: string;
+export declare const DsnPreHeadingMarginBlockEnd: string;
 export declare const DsnProgressBarColorTrack: string;
 export declare const DsnProgressBarColorFill: string;
 export declare const DsnProgressBarBlockSize: string;

package/dist/js/start-light-default.js

@@ -11337,6 +11337,29 @@ export default {
         },
       },
     },
+    "breakout-section": {
+      "border-block-width": {
+        $value: "1px",
+        $type: "dimension",
+        $description:
+          "Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        filePath: "src/tokens/components/breakout-section.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.border.width.thin}",
+          $type: "dimension",
+          $description:
+            "Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        },
+        name: "DsnBreakoutSectionBorderBlockWidth",
+        attributes: {
+          category: "dsn",
+          type: "breakout-section",
+          item: "border-block-width",
+        },
+        path: ["dsn", "breakout-section", "border-block-width"],
+      },
+    },
     button: {
       "border-radius": {
         $value: "8px",
@@ -18494,6 +18517,27 @@ export default {
           path: ["dsn", "hero", "color", "inverse"],
         },
       },
+      "border-block-width": {
+        $value: "1px",
+        $type: "dimension",
+        $description:
+          "Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        filePath: "src/tokens/components/hero.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.border.width.thin}",
+          $type: "dimension",
+          $description:
+            "Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        },
+        name: "DsnHeroBorderBlockWidth",
+        attributes: {
+          category: "dsn",
+          type: "hero",
+          item: "border-block-width",
+        },
+        path: ["dsn", "hero", "border-block-width"],
+      },
       image: {
         "blend-color": {
           $value: "#1b59a4",
@@ -22609,6 +22653,124 @@ export default {
         },
       },
     },
+    "pre-heading": {
+      color: {
+        $type: "color",
+        $value: "#1b1b1b",
+        $description: "Pre-heading text color",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "color",
+          $value: "{dsn.color.neutral.color-document}",
+          $description: "Pre-heading text color",
+        },
+        name: "DsnPreHeadingColor",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "color",
+        },
+        path: ["dsn", "pre-heading", "color"],
+      },
+      "font-family": {
+        $type: "fontFamily",
+        $value: "IBM Plex Sans, sans-serif",
+        $description: "Pre-heading font family",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontFamily",
+          $value: "{dsn.text.font-family.default}",
+          $description: "Pre-heading font family",
+        },
+        name: "DsnPreHeadingFontFamily",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-family",
+        },
+        path: ["dsn", "pre-heading", "font-family"],
+      },
+      "font-size": {
+        $type: "fontSize",
+        $value: "clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)",
+        $description: "Pre-heading font size (same as body text)",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontSize",
+          $value: "{dsn.text.font-size.md}",
+          $description: "Pre-heading font size (same as body text)",
+        },
+        name: "DsnPreHeadingFontSize",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-size",
+        },
+        path: ["dsn", "pre-heading", "font-size"],
+      },
+      "font-weight": {
+        $type: "fontWeight",
+        $value: "700",
+        $description:
+          "Pre-heading font weight (bold to distinguish from heading text)",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontWeight",
+          $value: "{dsn.text.font-weight.bold}",
+          $description:
+            "Pre-heading font weight (bold to distinguish from heading text)",
+        },
+        name: "DsnPreHeadingFontWeight",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-weight",
+        },
+        path: ["dsn", "pre-heading", "font-weight"],
+      },
+      "line-height": {
+        $type: "lineHeight",
+        $value: "1.5",
+        $description: "Pre-heading line height",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "lineHeight",
+          $value: "{dsn.text.line-height.md}",
+          $description: "Pre-heading line height",
+        },
+        name: "DsnPreHeadingLineHeight",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "line-height",
+        },
+        path: ["dsn", "pre-heading", "line-height"],
+      },
+      "margin-block-end": {
+        $type: "spacing",
+        $value: "calc(0.5rem * 0.25)",
+        $description: "Space between pre-heading and heading text",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "spacing",
+          $value: "{dsn.space.row.xs}",
+          $description: "Space between pre-heading and heading text",
+        },
+        name: "DsnPreHeadingMarginBlockEnd",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "margin-block-end",
+        },
+        path: ["dsn", "pre-heading", "margin-block-end"],
+      },
+    },
     "progress-bar": {
       color: {
         track: {
@@ -22635,14 +22797,14 @@ export default {
           $value: "#1b59a4",
           $type: "color",
           $description:
-            "Blauwe vulbalk — zelfde primaire accentkleur als Spinner",
+            "Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track",
           filePath: "src/tokens/components/progress-bar.json",
           isSource: true,
           original: {
-            $value: "{dsn.color.accent-1.color-default}",
+            $value: "{dsn.color.accent-1-inverse.bg-default}",
             $type: "color",
             $description:
-              "Blauwe vulbalk — zelfde primaire accentkleur als Spinner",
+              "Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track",
           },
           name: "DsnProgressBarColorFill",
           attributes: {

package/dist/js/start-light-information-dense.d.ts

@@ -560,6 +560,7 @@ export declare const DsnBreadcrumbNavigationLinkActiveTextDecorationLine: string
 export declare const DsnBreadcrumbNavigationSeparatorColor: string;
 export declare const DsnBreadcrumbNavigationSeparatorSize: string;
 export declare const DsnBreadcrumbNavigationIconSize: string;
+export declare const DsnBreakoutSectionBorderBlockWidth: string;
 export declare const DsnButtonBorderRadius: string;
 export declare const DsnButtonBorderWidth: string;
 export declare const DsnButtonFontFamily: string;
@@ -906,6 +907,7 @@ export declare const DsnHeroBackgroundColorDefault: string;
 export declare const DsnHeroBackgroundColorInverse: string;
 export declare const DsnHeroColorDefault: string;
 export declare const DsnHeroColorInverse: string;
+export declare const DsnHeroBorderBlockWidth: string;
 export declare const DsnHeroImageBlendColor: string;
 export declare const DsnImageBorderRadius: string;
 export declare const DsnImageCaptionColor: string;
@@ -1104,6 +1106,12 @@ export declare const DsnPopoverBodyPaddingInline: string;
 export declare const DsnPopoverFooterPaddingBlockStart: string;
 export declare const DsnPopoverFooterPaddingBlockEnd: string;
 export declare const DsnPopoverFooterPaddingInline: string;
+export declare const DsnPreHeadingColor: string;
+export declare const DsnPreHeadingFontFamily: string;
+export declare const DsnPreHeadingFontSize: string;
+export declare const DsnPreHeadingFontWeight: string;
+export declare const DsnPreHeadingLineHeight: string;
+export declare const DsnPreHeadingMarginBlockEnd: string;
 export declare const DsnProgressBarColorTrack: string;
 export declare const DsnProgressBarColorFill: string;
 export declare const DsnProgressBarBlockSize: string;

package/dist/js/start-light-information-dense.js

@@ -11344,6 +11344,29 @@ export default {
         },
       },
     },
+    "breakout-section": {
+      "border-block-width": {
+        $value: "1px",
+        $type: "dimension",
+        $description:
+          "Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        filePath: "src/tokens/components/breakout-section.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.border.width.thin}",
+          $type: "dimension",
+          $description:
+            "Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        },
+        name: "DsnBreakoutSectionBorderBlockWidth",
+        attributes: {
+          category: "dsn",
+          type: "breakout-section",
+          item: "border-block-width",
+        },
+        path: ["dsn", "breakout-section", "border-block-width"],
+      },
+    },
     button: {
       "border-radius": {
         $value: "8px",
@@ -18500,6 +18523,27 @@ export default {
           path: ["dsn", "hero", "color", "inverse"],
         },
       },
+      "border-block-width": {
+        $value: "1px",
+        $type: "dimension",
+        $description:
+          "Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        filePath: "src/tokens/components/hero.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.border.width.thin}",
+          $type: "dimension",
+          $description:
+            "Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven",
+        },
+        name: "DsnHeroBorderBlockWidth",
+        attributes: {
+          category: "dsn",
+          type: "hero",
+          item: "border-block-width",
+        },
+        path: ["dsn", "hero", "border-block-width"],
+      },
       image: {
         "blend-color": {
           $value: "#1b59a4",
@@ -22614,6 +22658,124 @@ export default {
         },
       },
     },
+    "pre-heading": {
+      color: {
+        $type: "color",
+        $value: "#1b1b1b",
+        $description: "Pre-heading text color",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "color",
+          $value: "{dsn.color.neutral.color-document}",
+          $description: "Pre-heading text color",
+        },
+        name: "DsnPreHeadingColor",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "color",
+        },
+        path: ["dsn", "pre-heading", "color"],
+      },
+      "font-family": {
+        $type: "fontFamily",
+        $value: "IBM Plex Sans, sans-serif",
+        $description: "Pre-heading font family",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontFamily",
+          $value: "{dsn.text.font-family.default}",
+          $description: "Pre-heading font family",
+        },
+        name: "DsnPreHeadingFontFamily",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-family",
+        },
+        path: ["dsn", "pre-heading", "font-family"],
+      },
+      "font-size": {
+        $type: "fontSize",
+        $value: "1rem",
+        $description: "Pre-heading font size (same as body text)",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontSize",
+          $value: "{dsn.text.font-size.md}",
+          $description: "Pre-heading font size (same as body text)",
+        },
+        name: "DsnPreHeadingFontSize",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-size",
+        },
+        path: ["dsn", "pre-heading", "font-size"],
+      },
+      "font-weight": {
+        $type: "fontWeight",
+        $value: "700",
+        $description:
+          "Pre-heading font weight (bold to distinguish from heading text)",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "fontWeight",
+          $value: "{dsn.text.font-weight.bold}",
+          $description:
+            "Pre-heading font weight (bold to distinguish from heading text)",
+        },
+        name: "DsnPreHeadingFontWeight",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "font-weight",
+        },
+        path: ["dsn", "pre-heading", "font-weight"],
+      },
+      "line-height": {
+        $type: "lineHeight",
+        $value: "1.5",
+        $description: "Pre-heading line height",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "lineHeight",
+          $value: "{dsn.text.line-height.md}",
+          $description: "Pre-heading line height",
+        },
+        name: "DsnPreHeadingLineHeight",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "line-height",
+        },
+        path: ["dsn", "pre-heading", "line-height"],
+      },
+      "margin-block-end": {
+        $type: "spacing",
+        $value: "calc(0.5rem * 0.25)",
+        $description: "Space between pre-heading and heading text",
+        filePath: "src/tokens/components/pre-heading.json",
+        isSource: true,
+        original: {
+          $type: "spacing",
+          $value: "{dsn.space.row.xs}",
+          $description: "Space between pre-heading and heading text",
+        },
+        name: "DsnPreHeadingMarginBlockEnd",
+        attributes: {
+          category: "dsn",
+          type: "pre-heading",
+          item: "margin-block-end",
+        },
+        path: ["dsn", "pre-heading", "margin-block-end"],
+      },
+    },
     "progress-bar": {
       color: {
         track: {
@@ -22640,14 +22802,14 @@ export default {
           $value: "#1b59a4",
           $type: "color",
           $description:
-            "Blauwe vulbalk — zelfde primaire accentkleur als Spinner",
+            "Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track",
           filePath: "src/tokens/components/progress-bar.json",
           isSource: true,
           original: {
-            $value: "{dsn.color.accent-1.color-default}",
+            $value: "{dsn.color.accent-1-inverse.bg-default}",
             $type: "color",
             $description:
-              "Blauwe vulbalk — zelfde primaire accentkleur als Spinner",
+              "Vulbalk — donkerblauwe inverse achtergrondkleur voor voldoende contrast op de lichte track",
           },
           name: "DsnProgressBarColorFill",
           attributes: {