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

package/dist/js/wireframe-dark-default.js

@@ -10900,6 +10900,29 @@ export default {
         },
       },
     },
+    "breakout-section": {
+      "border-block-width": {
+        $value: "2px",
+        $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: "4px",
@@ -18053,6 +18076,27 @@ export default {
           path: ["dsn", "hero", "color", "inverse"],
         },
       },
+      "border-block-width": {
+        $value: "2px",
+        $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: "#ffffff",
@@ -22166,6 +22210,124 @@ export default {
         },
       },
     },
+    "pre-heading": {
+      color: {
+        $type: "color",
+        $value: "#ffffff",
+        $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: "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+        $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: "600",
+        $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.4",
+        $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: {
@@ -22192,14 +22354,14 @@ export default {
           $value: "#ffffff",
           $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/wireframe-dark-information-dense.d.ts

@@ -556,6 +556,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;
@@ -902,6 +903,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;
@@ -1100,6 +1102,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/wireframe-dark-information-dense.js

@@ -10907,6 +10907,29 @@ export default {
         },
       },
     },
+    "breakout-section": {
+      "border-block-width": {
+        $value: "2px",
+        $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: "4px",
@@ -18059,6 +18082,27 @@ export default {
           path: ["dsn", "hero", "color", "inverse"],
         },
       },
+      "border-block-width": {
+        $value: "2px",
+        $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: "#ffffff",
@@ -22171,6 +22215,124 @@ export default {
         },
       },
     },
+    "pre-heading": {
+      color: {
+        $type: "color",
+        $value: "#ffffff",
+        $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: "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+        $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: "600",
+        $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.4",
+        $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: {
@@ -22197,14 +22359,14 @@ export default {
           $value: "#ffffff",
           $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/wireframe-light-default.d.ts

@@ -556,6 +556,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;
@@ -902,6 +903,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;
@@ -1100,6 +1102,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/wireframe-light-default.js

@@ -10900,6 +10900,29 @@ export default {
         },
       },
     },
+    "breakout-section": {
+      "border-block-width": {
+        $value: "2px",
+        $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: "4px",
@@ -18053,6 +18076,27 @@ export default {
           path: ["dsn", "hero", "color", "inverse"],
         },
       },
+      "border-block-width": {
+        $value: "2px",
+        $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: "#000000",
@@ -22166,6 +22210,124 @@ export default {
         },
       },
     },
+    "pre-heading": {
+      color: {
+        $type: "color",
+        $value: "#000000",
+        $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: "'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive",
+        $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: "600",
+        $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.4",
+        $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: {
@@ -22192,14 +22354,14 @@ export default {
           $value: "#000000",
           $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: {