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

package/dist/js/start-dark-information-dense.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;

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

@@ -23164,6 +23164,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",
@@ -29916,6 +30121,16 @@ export const DsnParagraphSmallPrintFontSize = "0.875rem";
 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/start-light-default.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;

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

@@ -23155,6 +23155,211 @@ export default {
         path: ["dsn", "password-input", "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",
@@ -29908,6 +30113,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 = "#fcfcfc";
+export const DsnPopoverMenuBorderWidth = "1px";
+export const DsnPopoverMenuBorderColor = "#c4c4c4";
+export const DsnPopoverMenuBorderRadius = "8px";
+export 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";
+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 = "#fcfcfc";
 export const DsnPopoverBorderWidth = "1px";
 export const DsnPopoverBorderColor = "#c4c4c4";

package/dist/js/start-light-information-dense.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;