@dsn-starter-kit/design-tokens 4.0.0 → 4.1.0

package/dist/js/tokens-dark.js

@@ -23159,6 +23159,211 @@ export default {
         path: ["dsn", "password-input", "padding-inline-end"],
       },
     },
+    "popover-menu": {
+      "background-color": {
+        $value: "#111111",
+        $type: "color",
+        $description:
+          "Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.background-color}",
+          $type: "color",
+          $description:
+            "Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen",
+        },
+        name: "DsnPopoverMenuBackgroundColor",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "background-color",
+        },
+        path: ["dsn", "popover-menu", "background-color"],
+      },
+      "border-width": {
+        $value: "1px",
+        $type: "borderWidth",
+        $description: "Randbreedte van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.border-width}",
+          $type: "borderWidth",
+          $description: "Randbreedte van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBorderWidth",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "border-width",
+        },
+        path: ["dsn", "popover-menu", "border-width"],
+      },
+      "border-color": {
+        $value: "#3e3e3e",
+        $type: "color",
+        $description: "Randkleur van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.border-color}",
+          $type: "color",
+          $description: "Randkleur van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBorderColor",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "border-color",
+        },
+        path: ["dsn", "popover-menu", "border-color"],
+      },
+      "border-radius": {
+        $value: "8px",
+        $type: "dimension",
+        $description:
+          "Afgeronde hoeken van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.border-radius}",
+          $type: "dimension",
+          $description:
+            "Afgeronde hoeken van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBorderRadius",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "border-radius",
+        },
+        path: ["dsn", "popover-menu", "border-radius"],
+      },
+      "box-shadow": {
+        $value:
+          "0 2px 4px 0 color-mix(in srgb, black 60%, transparent), 0 8px 16px 0 color-mix(in srgb, black 40%, transparent), 0 0 0 1px color-mix(in srgb, white 8%, transparent)",
+        $type: "shadow",
+        $description: "Schaduw van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.box-shadow}",
+          $type: "shadow",
+          $description: "Schaduw van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuBoxShadow",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "box-shadow",
+        },
+        path: ["dsn", "popover-menu", "box-shadow"],
+      },
+      "min-width": {
+        $value: "12.5rem",
+        $type: "dimension",
+        $description:
+          "Minimale breedte van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.min-width}",
+          $type: "dimension",
+          $description:
+            "Minimale breedte van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuMinWidth",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "min-width",
+        },
+        path: ["dsn", "popover-menu", "min-width"],
+      },
+      "max-width": {
+        $value: "25rem",
+        $type: "dimension",
+        $description:
+          "Maximale breedte van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.max-width}",
+          $type: "dimension",
+          $description:
+            "Maximale breedte van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuMaxWidth",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "max-width",
+        },
+        path: ["dsn", "popover-menu", "max-width"],
+      },
+      "z-index": {
+        $value: "350",
+        $type: "number",
+        $description: "Z-index van het paneel: delegeert naar de Popover",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.z-index}",
+          $type: "number",
+          $description: "Z-index van het paneel: delegeert naar de Popover",
+        },
+        name: "DsnPopoverMenuZIndex",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "z-index",
+        },
+        path: ["dsn", "popover-menu", "z-index"],
+      },
+      "padding-block": {
+        $value: "calc(0.5rem * 2)",
+        $type: "spacing",
+        $description:
+          "Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.body.padding-block}",
+          $type: "spacing",
+          $description:
+            "Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben",
+        },
+        name: "DsnPopoverMenuPaddingBlock",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "padding-block",
+        },
+        path: ["dsn", "popover-menu", "padding-block"],
+      },
+      "padding-inline": {
+        $value: "calc(0.5rem * 2)",
+        $type: "spacing",
+        $description:
+          "Horizontale padding rond de lijst: delegeert naar de Popover-body",
+        filePath: "src/tokens/components/popover-menu.json",
+        isSource: true,
+        original: {
+          $value: "{dsn.popover.body.padding-inline}",
+          $type: "spacing",
+          $description:
+            "Horizontale padding rond de lijst: delegeert naar de Popover-body",
+        },
+        name: "DsnPopoverMenuPaddingInline",
+        attributes: {
+          category: "dsn",
+          type: "popover-menu",
+          item: "padding-inline",
+        },
+        path: ["dsn", "popover-menu", "padding-inline"],
+      },
+    },
     popover: {
       "background-color": {
         $value: "#111111",
@@ -29912,6 +30117,16 @@ export const DsnParagraphSmallPrintFontSize = "clamp(0.875rem, 0.75rem + 0.25vw,
 export const DsnParagraphSmallPrintLineHeight = "1.5";
 export const DsnParagraphSmallPrintMarginBlockEnd = "calc(0.5rem * 1)";
 export const DsnPasswordInputPaddingInlineEnd = "3rem";
+export const DsnPopoverMenuBackgroundColor = "#111111";
+export const DsnPopoverMenuBorderWidth = "1px";
+export const DsnPopoverMenuBorderColor = "#3e3e3e";
+export const DsnPopoverMenuBorderRadius = "8px";
+export const DsnPopoverMenuBoxShadow = "0 2px 4px 0 color-mix(in srgb, black 60%, transparent), 0 8px 16px 0 color-mix(in srgb, black 40%, transparent), 0 0 0 1px color-mix(in srgb, white 8%, transparent)";
+export const DsnPopoverMenuMinWidth = "12.5rem";
+export const DsnPopoverMenuMaxWidth = "25rem";
+export const DsnPopoverMenuZIndex = "350";
+export const DsnPopoverMenuPaddingBlock = "calc(0.5rem * 2)";
+export const DsnPopoverMenuPaddingInline = "calc(0.5rem * 2)";
 export const DsnPopoverBackgroundColor = "#111111";
 export const DsnPopoverBorderWidth = "1px";
 export const DsnPopoverBorderColor = "#3e3e3e";

package/dist/js/tokens.cjs

@@ -27928,6 +27928,238 @@ var tokens_default = { dsn: {
 			"padding-inline-end"
 		]
 	} },
+	"popover-menu": {
+		"background-color": {
+			$value: "#fcfcfc",
+			$type: "color",
+			$description: "Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen",
+			filePath: "src/tokens/components/popover-menu.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.popover.background-color}",
+				$type: "color",
+				$description: "Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen"
+			},
+			name: "DsnPopoverMenuBackgroundColor",
+			attributes: {
+				category: "dsn",
+				type: "popover-menu",
+				item: "background-color"
+			},
+			path: [
+				"dsn",
+				"popover-menu",
+				"background-color"
+			]
+		},
+		"border-width": {
+			$value: "1px",
+			$type: "borderWidth",
+			$description: "Randbreedte van het paneel: delegeert naar de Popover",
+			filePath: "src/tokens/components/popover-menu.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.popover.border-width}",
+				$type: "borderWidth",
+				$description: "Randbreedte van het paneel: delegeert naar de Popover"
+			},
+			name: "DsnPopoverMenuBorderWidth",
+			attributes: {
+				category: "dsn",
+				type: "popover-menu",
+				item: "border-width"
+			},
+			path: [
+				"dsn",
+				"popover-menu",
+				"border-width"
+			]
+		},
+		"border-color": {
+			$value: "#c4c4c4",
+			$type: "color",
+			$description: "Randkleur van het paneel: delegeert naar de Popover",
+			filePath: "src/tokens/components/popover-menu.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.popover.border-color}",
+				$type: "color",
+				$description: "Randkleur van het paneel: delegeert naar de Popover"
+			},
+			name: "DsnPopoverMenuBorderColor",
+			attributes: {
+				category: "dsn",
+				type: "popover-menu",
+				item: "border-color"
+			},
+			path: [
+				"dsn",
+				"popover-menu",
+				"border-color"
+			]
+		},
+		"border-radius": {
+			$value: "8px",
+			$type: "dimension",
+			$description: "Afgeronde hoeken van het paneel: delegeert naar de Popover",
+			filePath: "src/tokens/components/popover-menu.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.popover.border-radius}",
+				$type: "dimension",
+				$description: "Afgeronde hoeken van het paneel: delegeert naar de Popover"
+			},
+			name: "DsnPopoverMenuBorderRadius",
+			attributes: {
+				category: "dsn",
+				type: "popover-menu",
+				item: "border-radius"
+			},
+			path: [
+				"dsn",
+				"popover-menu",
+				"border-radius"
+			]
+		},
+		"box-shadow": {
+			$value: "0 2px 4px 0 color-mix(in srgb, black 12%, transparent), 0 8px 16px 0 color-mix(in srgb, black 6%, transparent), 0 0 0 1px #00000000",
+			$type: "shadow",
+			$description: "Schaduw van het paneel: delegeert naar de Popover",
+			filePath: "src/tokens/components/popover-menu.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.popover.box-shadow}",
+				$type: "shadow",
+				$description: "Schaduw van het paneel: delegeert naar de Popover"
+			},
+			name: "DsnPopoverMenuBoxShadow",
+			attributes: {
+				category: "dsn",
+				type: "popover-menu",
+				item: "box-shadow"
+			},
+			path: [
+				"dsn",
+				"popover-menu",
+				"box-shadow"
+			]
+		},
+		"min-width": {
+			$value: "12.5rem",
+			$type: "dimension",
+			$description: "Minimale breedte van het paneel: delegeert naar de Popover",
+			filePath: "src/tokens/components/popover-menu.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.popover.min-width}",
+				$type: "dimension",
+				$description: "Minimale breedte van het paneel: delegeert naar de Popover"
+			},
+			name: "DsnPopoverMenuMinWidth",
+			attributes: {
+				category: "dsn",
+				type: "popover-menu",
+				item: "min-width"
+			},
+			path: [
+				"dsn",
+				"popover-menu",
+				"min-width"
+			]
+		},
+		"max-width": {
+			$value: "25rem",
+			$type: "dimension",
+			$description: "Maximale breedte van het paneel: delegeert naar de Popover",
+			filePath: "src/tokens/components/popover-menu.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.popover.max-width}",
+				$type: "dimension",
+				$description: "Maximale breedte van het paneel: delegeert naar de Popover"
+			},
+			name: "DsnPopoverMenuMaxWidth",
+			attributes: {
+				category: "dsn",
+				type: "popover-menu",
+				item: "max-width"
+			},
+			path: [
+				"dsn",
+				"popover-menu",
+				"max-width"
+			]
+		},
+		"z-index": {
+			$value: "350",
+			$type: "number",
+			$description: "Z-index van het paneel: delegeert naar de Popover",
+			filePath: "src/tokens/components/popover-menu.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.popover.z-index}",
+				$type: "number",
+				$description: "Z-index van het paneel: delegeert naar de Popover"
+			},
+			name: "DsnPopoverMenuZIndex",
+			attributes: {
+				category: "dsn",
+				type: "popover-menu",
+				item: "z-index"
+			},
+			path: [
+				"dsn",
+				"popover-menu",
+				"z-index"
+			]
+		},
+		"padding-block": {
+			$value: "calc(0.5rem * 2)",
+			$type: "spacing",
+			$description: "Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben",
+			filePath: "src/tokens/components/popover-menu.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.popover.body.padding-block}",
+				$type: "spacing",
+				$description: "Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben"
+			},
+			name: "DsnPopoverMenuPaddingBlock",
+			attributes: {
+				category: "dsn",
+				type: "popover-menu",
+				item: "padding-block"
+			},
+			path: [
+				"dsn",
+				"popover-menu",
+				"padding-block"
+			]
+		},
+		"padding-inline": {
+			$value: "calc(0.5rem * 2)",
+			$type: "spacing",
+			$description: "Horizontale padding rond de lijst: delegeert naar de Popover-body",
+			filePath: "src/tokens/components/popover-menu.json",
+			isSource: true,
+			original: {
+				$value: "{dsn.popover.body.padding-inline}",
+				$type: "spacing",
+				$description: "Horizontale padding rond de lijst: delegeert naar de Popover-body"
+			},
+			name: "DsnPopoverMenuPaddingInline",
+			attributes: {
+				category: "dsn",
+				type: "popover-menu",
+				item: "padding-inline"
+			},
+			path: [
+				"dsn",
+				"popover-menu",
+				"padding-inline"
+			]
+		}
+	},
 	popover: {
 		"background-color": {
 			$value: "#fcfcfc",
@@ -35820,6 +36052,16 @@ const DsnParagraphSmallPrintFontSize = "clamp(0.875rem, 0.75rem + 0.25vw, 1.0625
 const DsnParagraphSmallPrintLineHeight = "1.5";
 const DsnParagraphSmallPrintMarginBlockEnd = "calc(0.5rem * 1)";
 const DsnPasswordInputPaddingInlineEnd = "3rem";
+const DsnPopoverMenuBackgroundColor = "#fcfcfc";
+const DsnPopoverMenuBorderWidth = "1px";
+const DsnPopoverMenuBorderColor = "#c4c4c4";
+const DsnPopoverMenuBorderRadius = "8px";
+const DsnPopoverMenuBoxShadow = "0 2px 4px 0 color-mix(in srgb, black 12%, transparent), 0 8px 16px 0 color-mix(in srgb, black 6%, transparent), 0 0 0 1px #00000000";
+const DsnPopoverMenuMinWidth = "12.5rem";
+const DsnPopoverMenuMaxWidth = "25rem";
+const DsnPopoverMenuZIndex = "350";
+const DsnPopoverMenuPaddingBlock = "calc(0.5rem * 2)";
+const DsnPopoverMenuPaddingInline = "calc(0.5rem * 2)";
 const DsnPopoverBackgroundColor = "#fcfcfc";
 const DsnPopoverBorderWidth = "1px";
 const DsnPopoverBorderColor = "#c4c4c4";
@@ -37160,6 +37402,16 @@ exports.DsnPopoverHeadingFontSize = DsnPopoverHeadingFontSize;
 exports.DsnPopoverHeadingFontWeight = DsnPopoverHeadingFontWeight;
 exports.DsnPopoverHeadingLineHeight = DsnPopoverHeadingLineHeight;
 exports.DsnPopoverMaxWidth = DsnPopoverMaxWidth;
+exports.DsnPopoverMenuBackgroundColor = DsnPopoverMenuBackgroundColor;
+exports.DsnPopoverMenuBorderColor = DsnPopoverMenuBorderColor;
+exports.DsnPopoverMenuBorderRadius = DsnPopoverMenuBorderRadius;
+exports.DsnPopoverMenuBorderWidth = DsnPopoverMenuBorderWidth;
+exports.DsnPopoverMenuBoxShadow = DsnPopoverMenuBoxShadow;
+exports.DsnPopoverMenuMaxWidth = DsnPopoverMenuMaxWidth;
+exports.DsnPopoverMenuMinWidth = DsnPopoverMenuMinWidth;
+exports.DsnPopoverMenuPaddingBlock = DsnPopoverMenuPaddingBlock;
+exports.DsnPopoverMenuPaddingInline = DsnPopoverMenuPaddingInline;
+exports.DsnPopoverMenuZIndex = DsnPopoverMenuZIndex;
 exports.DsnPopoverMinWidth = DsnPopoverMinWidth;
 exports.DsnPopoverZIndex = DsnPopoverZIndex;
 exports.DsnPreHeadingColor = DsnPreHeadingColor;

package/dist/js/tokens.d.cts

@@ -1127,6 +1127,16 @@ export declare const DsnParagraphSmallPrintFontSize: string;
 export declare const DsnParagraphSmallPrintLineHeight: string;
 export declare const DsnParagraphSmallPrintMarginBlockEnd: string;
 export declare const DsnPasswordInputPaddingInlineEnd: string;
+export declare const DsnPopoverMenuBackgroundColor: string;
+export declare const DsnPopoverMenuBorderWidth: string;
+export declare const DsnPopoverMenuBorderColor: string;
+export declare const DsnPopoverMenuBorderRadius: string;
+export declare const DsnPopoverMenuBoxShadow: string;
+export declare const DsnPopoverMenuMinWidth: string;
+export declare const DsnPopoverMenuMaxWidth: string;
+export declare const DsnPopoverMenuZIndex: string;
+export declare const DsnPopoverMenuPaddingBlock: string;
+export declare const DsnPopoverMenuPaddingInline: string;
 export declare const DsnPopoverBackgroundColor: string;
 export declare const DsnPopoverBorderWidth: string;
 export declare const DsnPopoverBorderColor: string;

package/dist/js/tokens.d.ts

@@ -1127,6 +1127,16 @@ export declare const DsnParagraphSmallPrintFontSize: string;
 export declare const DsnParagraphSmallPrintLineHeight: string;
 export declare const DsnParagraphSmallPrintMarginBlockEnd: string;
 export declare const DsnPasswordInputPaddingInlineEnd: string;
+export declare const DsnPopoverMenuBackgroundColor: string;
+export declare const DsnPopoverMenuBorderWidth: string;
+export declare const DsnPopoverMenuBorderColor: string;
+export declare const DsnPopoverMenuBorderRadius: string;
+export declare const DsnPopoverMenuBoxShadow: string;
+export declare const DsnPopoverMenuMinWidth: string;
+export declare const DsnPopoverMenuMaxWidth: string;
+export declare const DsnPopoverMenuZIndex: string;
+export declare const DsnPopoverMenuPaddingBlock: string;
+export declare const DsnPopoverMenuPaddingInline: string;
 export declare const DsnPopoverBackgroundColor: string;
 export declare const DsnPopoverBorderWidth: string;
 export declare const DsnPopoverBorderColor: string;