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

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

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --dsn-text-font-family-default: IBM Plex Sans, sans-serif; /** Standaard lettertype voor bodytekst */
-  --dsn-text-font-family-monospace: IBM Plex Mono, monospace; /** Monospace lettertype voor code */
+  --dsn-text-font-family-default: Fira Sans, sans-serif; /** Standaard lettertype voor bodytekst */
+  --dsn-text-font-family-monospace: Fira Mono, monospace; /** Monospace lettertype voor code */
   --dsn-text-font-weight-default: 400; /** Regulier gewicht */
   --dsn-text-font-weight-bold: 700; /** Vet gewicht */
   --dsn-text-max-inline-size: 65ch; /** Maximale regellengte voor leesbare bodytekst (paragrafen, lijsten) */
@@ -22,7 +22,7 @@
   --dsn-text-font-size-2xl: clamp(2rem, 1.75rem + 0.75vw, 2.5625rem); /** 2XL text - 32px to 41px (fluid) */
   --dsn-text-font-size-3xl: clamp(2.5rem, 2.125rem + 1.125vw, 3.3125rem); /** 3XL text - 40px to 53px (fluid) */
   --dsn-text-font-size-4xl: clamp(3rem, 2.5rem + 1.5vw, 4.125rem); /** 4XL text - 48px to 66px (fluid) */
-  --dsn-heading-font-family: IBM Plex Sans, sans-serif; /** Lettertype voor koppen */
+  --dsn-heading-font-family: Fira Sans, sans-serif; /** Lettertype voor koppen */
   --dsn-heading-font-weight: 700; /** Vet gewicht voor koppen */
   --dsn-space-none: 0px; /** Geen afstand */
   --dsn-space-base: 0.5rem; /** 8px - Basiseenheid voor het 8pt-rastersysteem */
@@ -124,171 +124,171 @@
   --dsn-transition-easing-exit: cubic-bezier(0.4, 0, 1, 1); /** Elementen die het scherm verlaten (accelereren) */
   --dsn-transition-easing-move: cubic-bezier(0.4, 0, 0.2, 1); /** Elementen die van positie wisselen */
   --dsn-transition-easing-linear: linear; /** Progress bars, loaders */
-  --dsn-color-neutral-bg-document: #fcfcfc; /** Documentachtergrond */
-  --dsn-color-neutral-bg-elevated: #fcfcfc; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-neutral-bg-subtle: #f6f6f6; /** Subtiele achtergrond */
-  --dsn-color-neutral-bg-default: #f1f1f1; /** Standaard achtergrond */
-  --dsn-color-neutral-bg-hover: #ebebeb; /** Achtergrond in hover state */
-  --dsn-color-neutral-bg-active: #e5e5e5; /** Achtergrond in active state */
-  --dsn-color-neutral-border-subtle: #c4c4c4; /** Subtiele rand */
-  --dsn-color-neutral-border-default: #868686; /** Standaard rand */
-  --dsn-color-neutral-border-hover: #7c7c7c; /** Rand in hover state */
-  --dsn-color-neutral-border-active: #727272; /** Rand in active state */
-  --dsn-color-neutral-color-default: #595959; /** Standaard tekstkleur */
-  --dsn-color-neutral-color-hover: #4b4b4b; /** Tekst in hover state */
-  --dsn-color-neutral-color-active: #3e3e3e; /** Tekst in active state */
-  --dsn-color-neutral-color-subtle: #636363; /** Subtiele tekstkleur */
-  --dsn-color-neutral-color-document: #1b1b1b; /** Documenttekstkleur */
-  --dsn-color-accent-1-bg-document: #fbfcfd; /** Documentachtergrond */
-  --dsn-color-accent-1-bg-elevated: #fbfcfd; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-accent-1-bg-subtle: #f4f7fa; /** Subtiele achtergrond */
-  --dsn-color-accent-1-bg-default: #ecf1f7; /** Standaard achtergrond */
-  --dsn-color-accent-1-bg-hover: #e4ecf4; /** Achtergrond in hover state */
-  --dsn-color-accent-1-bg-active: #dde6f1; /** Achtergrond in active state */
-  --dsn-color-accent-1-border-subtle: #b0c6df; /** Subtiele rand */
-  --dsn-color-accent-1-border-default: #5c89be; /** Standaard rand */
-  --dsn-color-accent-1-border-hover: #4e7fb8; /** Rand in hover state */
-  --dsn-color-accent-1-border-active: #3f74b2; /** Rand in active state */
-  --dsn-color-accent-1-color-default: #1b59a4; /** Standaard tekstkleur */
-  --dsn-color-accent-1-color-hover: #04499a; /** Tekst in hover state */
-  --dsn-color-accent-1-color-active: #003b81; /** Tekst in active state */
-  --dsn-color-accent-1-color-subtle: #2964aa; /** Subtiele tekstkleur */
-  --dsn-color-accent-1-color-document: #001b3c; /** Documenttekstkleur */
-  --dsn-color-negative-bg-document: #fffbfb; /** Documentachtergrond */
-  --dsn-color-negative-bg-elevated: #fffbfb; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-negative-bg-subtle: #fef4f4; /** Subtiele achtergrond */
-  --dsn-color-negative-bg-default: #feeded; /** Standaard achtergrond */
-  --dsn-color-negative-bg-hover: #fde6e6; /** Achtergrond in hover state */
-  --dsn-color-negative-bg-active: #fddede; /** Achtergrond in active state */
-  --dsn-color-negative-border-subtle: #f9b1b1; /** Subtiele rand */
-  --dsn-color-negative-border-default: #f14848; /** Standaard rand */
-  --dsn-color-negative-border-hover: #ef2929; /** Rand in hover state */
-  --dsn-color-negative-border-active: #e60000; /** Rand in active state */
-  --dsn-color-negative-color-default: #b70000; /** Standaard tekstkleur */
-  --dsn-color-negative-color-hover: #9c0000; /** Tekst in hover state */
-  --dsn-color-negative-color-active: #930000; /** Tekst in active state */
-  --dsn-color-negative-color-subtle: #ca0000; /** Subtiele tekstkleur */
-  --dsn-color-negative-color-document: #410000; /** Documenttekstkleur */
-  --dsn-color-positive-bg-document: #fafdfb; /** Documentachtergrond */
-  --dsn-color-positive-bg-elevated: #fafdfb; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-positive-bg-subtle: #eff9f3; /** Subtiele achtergrond */
-  --dsn-color-positive-bg-default: #e4f5ea; /** Standaard achtergrond */
-  --dsn-color-positive-bg-hover: #d9f1e2; /** Achtergrond in hover state */
-  --dsn-color-positive-bg-active: #ceedd9; /** Achtergrond in active state */
-  --dsn-color-positive-border-subtle: #8ad3a6; /** Subtiele rand */
-  --dsn-color-positive-border-default: #009b3a; /** Standaard rand */
-  --dsn-color-positive-border-hover: #009036; /** Rand in hover state */
-  --dsn-color-positive-border-active: #008432; /** Rand in active state */
-  --dsn-color-positive-color-default: #006827; /** Standaard tekstkleur */
-  --dsn-color-positive-color-hover: #005821; /** Tekst in hover state */
-  --dsn-color-positive-color-active: #00481b; /** Tekst in active state */
-  --dsn-color-positive-color-subtle: #00732b; /** Subtiele tekstkleur */
-  --dsn-color-positive-color-document: #00210c; /** Documenttekstkleur */
-  --dsn-color-warning-bg-document: #fffcf8; /** Documentachtergrond */
-  --dsn-color-warning-bg-elevated: #fffcf8; /** Elevated background — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-warning-bg-subtle: #fff5eb; /** Subtiele achtergrond */
-  --dsn-color-warning-bg-default: #ffeedd; /** Standaard achtergrond */
-  --dsn-color-warning-bg-hover: #ffe7d0; /** Achtergrond in hover state */
-  --dsn-color-warning-bg-active: #ffe0c2; /** Achtergrond in active state */
-  --dsn-color-warning-border-subtle: #ffb46b; /** Subtiele rand */
-  --dsn-color-warning-border-default: #c8700e; /** Standaard rand */
-  --dsn-color-warning-border-hover: #b86810; /** Rand in hover state */
-  --dsn-color-warning-border-active: #a96011; /** Rand in active state */
-  --dsn-color-warning-color-default: #844c12; /** Standaard tekstkleur */
-  --dsn-color-warning-color-hover: #6f4012; /** Tekst in hover state */
-  --dsn-color-warning-color-active: #5a3511; /** Tekst in active state */
-  --dsn-color-warning-color-subtle: #935412; /** Subtiele tekstkleur */
-  --dsn-color-warning-color-document: #27190a; /** Documenttekstkleur */
-  --dsn-color-neutral-inverse-bg-document: #242424; /** Documentachtergrond (inverse) */
-  --dsn-color-neutral-inverse-bg-elevated: #242424; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-neutral-inverse-bg-subtle: #1b1b1b; /** Subtiele achtergrond (inverse) */
-  --dsn-color-neutral-inverse-bg-default: #595959; /** Standaard achtergrond (inverse) */
-  --dsn-color-neutral-inverse-bg-hover: #4b4b4b; /** Achtergrond in hover state (inverse) */
-  --dsn-color-neutral-inverse-bg-active: #3e3e3e; /** Achtergrond in active state (inverse) */
-  --dsn-color-neutral-inverse-border-subtle: #474747; /** Subtiele rand (inverse) */
-  --dsn-color-neutral-inverse-border-default: #c9c9c9; /** Standaard rand (inverse) */
-  --dsn-color-neutral-inverse-border-hover: #d4d4d4; /** Rand in hover state (inverse) */
-  --dsn-color-neutral-inverse-border-active: #dfdfdf; /** Rand in active state (inverse) */
-  --dsn-color-neutral-inverse-color-default: #ffffff; /** Standaard tekstkleur (inverse) */
-  --dsn-color-neutral-inverse-color-hover: #ffffff; /** Tekst in hover state (inverse) */
-  --dsn-color-neutral-inverse-color-active: #ffffff; /** Tekst in active state (inverse) */
-  --dsn-color-neutral-inverse-color-subtle: #c4c4c4; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-neutral-inverse-color-document: #ffffff; /** Documenttekstkleur (inverse) */
-  --dsn-color-accent-1-inverse-bg-document: #00234d; /** Documentachtergrond (inverse) */
-  --dsn-color-accent-1-inverse-bg-elevated: #00234d; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-accent-1-inverse-bg-subtle: #001b3c; /** Subtiele achtergrond (inverse) */
-  --dsn-color-accent-1-inverse-bg-default: #1b59a4; /** Standaard achtergrond (inverse) */
-  --dsn-color-accent-1-inverse-bg-hover: #04499a; /** Achtergrond in hover state (inverse) */
-  --dsn-color-accent-1-inverse-bg-active: #003b81; /** Achtergrond in active state (inverse) */
-  --dsn-color-accent-1-inverse-border-subtle: #004494; /** Subtiele rand (inverse) */
-  --dsn-color-accent-1-inverse-border-default: #b8cbe2; /** Standaard rand (inverse) */
-  --dsn-color-accent-1-inverse-border-hover: #c6d6e8; /** Rand in hover state (inverse) */
-  --dsn-color-accent-1-inverse-border-active: #d5e1ee; /** Rand in active state (inverse) */
-  --dsn-color-accent-1-inverse-color-default: #ffffff; /** Standaard tekstkleur (inverse) */
-  --dsn-color-accent-1-inverse-color-hover: #ffffff; /** Tekst in hover state (inverse) */
-  --dsn-color-accent-1-inverse-color-active: #ffffff; /** Tekst in active state (inverse) */
-  --dsn-color-accent-1-inverse-color-subtle: #b0c6df; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-accent-1-inverse-color-document: #ffffff; /** Documenttekstkleur (inverse) */
-  --dsn-color-info-inverse-bg-document: #00234d; /** Documentachtergrond (inverse) */
-  --dsn-color-info-inverse-bg-elevated: #00234d; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-info-inverse-bg-subtle: #001b3c; /** Subtiele achtergrond (inverse) */
-  --dsn-color-info-inverse-bg-default: #1b59a4; /** Standaard achtergrond (inverse) */
-  --dsn-color-info-inverse-bg-hover: #04499a; /** Achtergrond in hover state (inverse) */
-  --dsn-color-info-inverse-bg-active: #003b81; /** Achtergrond in active state (inverse) */
-  --dsn-color-info-inverse-border-subtle: #004494; /** Subtiele rand (inverse) */
-  --dsn-color-info-inverse-border-default: #b8cbe2; /** Standaard rand (inverse) */
-  --dsn-color-info-inverse-border-hover: #c6d6e8; /** Rand in hover state (inverse) */
-  --dsn-color-info-inverse-border-active: #d5e1ee; /** Rand in active state (inverse) */
-  --dsn-color-info-inverse-color-default: #ffffff; /** Standaard tekstkleur (inverse) */
-  --dsn-color-info-inverse-color-hover: #ffffff; /** Tekst in hover state (inverse) */
-  --dsn-color-info-inverse-color-active: #ffffff; /** Tekst in active state (inverse) */
-  --dsn-color-info-inverse-color-subtle: #b0c6df; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-info-inverse-color-document: #ffffff; /** Documenttekstkleur (inverse) */
-  --dsn-color-negative-inverse-bg-document: #510000; /** Documentachtergrond (inverse) */
-  --dsn-color-negative-inverse-bg-elevated: #510000; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-negative-inverse-bg-subtle: #410000; /** Subtiele achtergrond (inverse) */
-  --dsn-color-negative-inverse-bg-default: #b70000; /** Standaard achtergrond (inverse) */
-  --dsn-color-negative-inverse-bg-hover: #9c0000; /** Achtergrond in hover state (inverse) */
-  --dsn-color-negative-inverse-bg-active: #820000; /** Achtergrond in active state (inverse) */
-  --dsn-color-negative-inverse-border-subtle: #930000; /** Subtiele rand (inverse) */
-  --dsn-color-negative-inverse-border-default: #fab9b9; /** Standaard rand (inverse) */
-  --dsn-color-negative-inverse-border-hover: #fbc8c8; /** Rand in hover state (inverse) */
-  --dsn-color-negative-inverse-border-active: #fcd7d7; /** Rand in active state (inverse) */
-  --dsn-color-negative-inverse-color-default: #ffffff; /** Standaard tekstkleur (inverse) */
-  --dsn-color-negative-inverse-color-hover: #ffffff; /** Tekst in hover state (inverse) */
-  --dsn-color-negative-inverse-color-active: #ffffff; /** Tekst in active state (inverse) */
-  --dsn-color-negative-inverse-color-subtle: #f9b1b1; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-negative-inverse-color-document: #ffffff; /** Documenttekstkleur (inverse) */
-  --dsn-color-positive-inverse-bg-document: #002b10; /** Documentachtergrond (inverse) */
-  --dsn-color-positive-inverse-bg-elevated: #002b10; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-positive-inverse-bg-subtle: #00210c; /** Subtiele achtergrond (inverse) */
-  --dsn-color-positive-inverse-bg-default: #006827; /** Standaard achtergrond (inverse) */
-  --dsn-color-positive-inverse-bg-hover: #005821; /** Achtergrond in hover state (inverse) */
-  --dsn-color-positive-inverse-bg-active: #00481b; /** Achtergrond in active state (inverse) */
-  --dsn-color-positive-inverse-border-subtle: #00531f; /** Subtiele rand (inverse) */
-  --dsn-color-positive-inverse-border-default: #96d8ae; /** Standaard rand (inverse) */
-  --dsn-color-positive-inverse-border-hover: #ace0c0; /** Rand in hover state (inverse) */
-  --dsn-color-positive-inverse-border-active: #c3e9d1; /** Rand in active state (inverse) */
-  --dsn-color-positive-inverse-color-default: #ffffff; /** Standaard tekstkleur (inverse) */
-  --dsn-color-positive-inverse-color-hover: #ffffff; /** Tekst in hover state (inverse) */
-  --dsn-color-positive-inverse-color-active: #ffffff; /** Tekst in active state (inverse) */
-  --dsn-color-positive-inverse-color-subtle: #8ad3a6; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-positive-inverse-color-document: #ffffff; /** Documenttekstkleur (inverse) */
-  --dsn-color-warning-inverse-bg-document: #331f0d; /** Documentachtergrond (inverse) */
-  --dsn-color-warning-inverse-bg-elevated: #331f0d; /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
-  --dsn-color-warning-inverse-bg-subtle: #27190a; /** Subtiele achtergrond (inverse) */
-  --dsn-color-warning-inverse-bg-default: #844c12; /** Standaard achtergrond (inverse) */
-  --dsn-color-warning-inverse-bg-hover: #6f4012; /** Achtergrond in hover state (inverse) */
-  --dsn-color-warning-inverse-bg-active: #5a3511; /** Achtergrond in active state (inverse) */
-  --dsn-color-warning-inverse-border-subtle: #683c12; /** Subtiele rand (inverse) */
-  --dsn-color-warning-inverse-border-default: #ffbc7a; /** Standaard rand (inverse) */
-  --dsn-color-warning-inverse-border-hover: #ffcb98; /** Rand in hover state (inverse) */
-  --dsn-color-warning-inverse-border-active: #ffd9b4; /** Rand in active state (inverse) */
-  --dsn-color-warning-inverse-color-default: #ffffff; /** Standaard tekstkleur (inverse) */
-  --dsn-color-warning-inverse-color-hover: #ffffff; /** Tekst in hover state (inverse) */
-  --dsn-color-warning-inverse-color-active: #ffffff; /** Tekst in active state (inverse) */
-  --dsn-color-warning-inverse-color-subtle: #ffb46b; /** Subtiele tekstkleur (inverse) */
-  --dsn-color-warning-inverse-color-document: #ffffff; /** Documenttekstkleur (inverse) */
+  --dsn-color-neutral-bg-document: oklch(0.99 0 0); /** Documentachtergrond */
+  --dsn-color-neutral-bg-elevated: oklch(0.99 0 0); /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-neutral-bg-subtle: oklch(0.955 0 0); /** Subtiele achtergrond */
+  --dsn-color-neutral-bg-default: oklch(0.915 0 0); /** Standaard achtergrond */
+  --dsn-color-neutral-bg-hover: oklch(0.895 0 0); /** Achtergrond in hover state */
+  --dsn-color-neutral-bg-active: oklch(0.875 0 0); /** Achtergrond in active state */
+  --dsn-color-neutral-border-subtle: oklch(0.77 0 0); /** Subtiele rand */
+  --dsn-color-neutral-border-default: oklch(0.52 0 0); /** Standaard rand */
+  --dsn-color-neutral-border-hover: oklch(0.48 0 0); /** Rand in hover state */
+  --dsn-color-neutral-border-active: oklch(0.44 0 0); /** Rand in active state */
+  --dsn-color-neutral-color-default: oklch(0.4 0 0); /** Standaard tekstkleur */
+  --dsn-color-neutral-color-hover: oklch(0.36 0 0); /** Tekst in hover state */
+  --dsn-color-neutral-color-active: oklch(0.32 0 0); /** Tekst in active state */
+  --dsn-color-neutral-color-subtle: oklch(0.45 0 0); /** Subtiele tekstkleur */
+  --dsn-color-neutral-color-document: oklch(0.18 0 0); /** Documenttekstkleur */
+  --dsn-color-accent-1-bg-document: oklch(0.99 0.005 255.8); /** Documentachtergrond */
+  --dsn-color-accent-1-bg-elevated: oklch(0.99 0.005 255.8); /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-accent-1-bg-subtle: oklch(0.955 0.016 255.8); /** Subtiele achtergrond */
+  --dsn-color-accent-1-bg-default: oklch(0.915 0.023 255.8); /** Standaard achtergrond */
+  --dsn-color-accent-1-bg-hover: oklch(0.895 0.029 255.8); /** Achtergrond in hover state */
+  --dsn-color-accent-1-bg-active: oklch(0.875 0.036 255.8); /** Achtergrond in active state */
+  --dsn-color-accent-1-border-subtle: oklch(0.77 0.073 255.8); /** Subtiele rand */
+  --dsn-color-accent-1-border-default: oklch(0.52 0.163 255.8); /** Standaard rand */
+  --dsn-color-accent-1-border-hover: oklch(0.48 0.162 255.8); /** Rand in hover state */
+  --dsn-color-accent-1-border-active: oklch(0.44 0.149 255.8); /** Rand in active state */
+  --dsn-color-accent-1-color-default: oklch(0.4 0.135 255.8); /** Standaard tekstkleur */
+  --dsn-color-accent-1-color-hover: oklch(0.36 0.122 255.8); /** Tekst in hover state */
+  --dsn-color-accent-1-color-active: oklch(0.32 0.108 255.8); /** Tekst in active state */
+  --dsn-color-accent-1-color-subtle: oklch(0.45 0.152 255.8); /** Subtiele tekstkleur */
+  --dsn-color-accent-1-color-document: oklch(0.18 0.061 255.8); /** Documenttekstkleur */
+  --dsn-color-negative-bg-document: oklch(0.99 0.005 29.2); /** Documentachtergrond */
+  --dsn-color-negative-bg-elevated: oklch(0.99 0.005 29.2); /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-negative-bg-subtle: oklch(0.955 0.022 29.2); /** Subtiele achtergrond */
+  --dsn-color-negative-bg-default: oklch(0.915 0.034 29.2); /** Standaard achtergrond */
+  --dsn-color-negative-bg-hover: oklch(0.895 0.043 29.2); /** Achtergrond in hover state */
+  --dsn-color-negative-bg-active: oklch(0.875 0.053 29.2); /** Achtergrond in active state */
+  --dsn-color-negative-border-subtle: oklch(0.77 0.108 29.2); /** Subtiele rand */
+  --dsn-color-negative-border-default: oklch(0.52 0.213 29.2); /** Standaard rand */
+  --dsn-color-negative-border-hover: oklch(0.48 0.197 29.2); /** Rand in hover state */
+  --dsn-color-negative-border-active: oklch(0.44 0.181 29.2); /** Rand in active state */
+  --dsn-color-negative-color-default: oklch(0.4 0.164 29.2); /** Standaard tekstkleur */
+  --dsn-color-negative-color-hover: oklch(0.36 0.148 29.2); /** Tekst in hover state */
+  --dsn-color-negative-color-active: oklch(0.32 0.131 29.2); /** Tekst in active state */
+  --dsn-color-negative-color-subtle: oklch(0.45 0.185 29.2); /** Subtiele tekstkleur */
+  --dsn-color-negative-color-document: oklch(0.18 0.074 29.2); /** Documenttekstkleur */
+  --dsn-color-positive-bg-document: oklch(0.99 0.009 148.2); /** Documentachtergrond */
+  --dsn-color-positive-bg-elevated: oklch(0.99 0.009 148.2); /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-positive-bg-subtle: oklch(0.955 0.016 148.2); /** Subtiele achtergrond */
+  --dsn-color-positive-bg-default: oklch(0.915 0.022 148.2); /** Standaard achtergrond */
+  --dsn-color-positive-bg-hover: oklch(0.895 0.028 148.2); /** Achtergrond in hover state */
+  --dsn-color-positive-bg-active: oklch(0.875 0.034 148.2); /** Achtergrond in active state */
+  --dsn-color-positive-border-subtle: oklch(0.77 0.07 148.2); /** Subtiele rand */
+  --dsn-color-positive-border-default: oklch(0.52 0.15 148.2); /** Standaard rand */
+  --dsn-color-positive-border-hover: oklch(0.48 0.138 148.2); /** Rand in hover state */
+  --dsn-color-positive-border-active: oklch(0.44 0.127 148.2); /** Rand in active state */
+  --dsn-color-positive-color-default: oklch(0.4 0.115 148.2); /** Standaard tekstkleur */
+  --dsn-color-positive-color-hover: oklch(0.36 0.104 148.2); /** Tekst in hover state */
+  --dsn-color-positive-color-active: oklch(0.32 0.092 148.2); /** Tekst in active state */
+  --dsn-color-positive-color-subtle: oklch(0.45 0.13 148.2); /** Subtiele tekstkleur */
+  --dsn-color-positive-color-document: oklch(0.18 0.052 148.2); /** Documenttekstkleur */
+  --dsn-color-warning-bg-document: oklch(0.99 0.006 58.3); /** Documentachtergrond */
+  --dsn-color-warning-bg-elevated: oklch(0.99 0.006 58.3); /** Elevated background — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-warning-bg-subtle: oklch(0.955 0.019 58.3); /** Subtiele achtergrond */
+  --dsn-color-warning-bg-default: oklch(0.915 0.026 58.3); /** Standaard achtergrond */
+  --dsn-color-warning-bg-hover: oklch(0.895 0.034 58.3); /** Achtergrond in hover state */
+  --dsn-color-warning-bg-active: oklch(0.875 0.042 58.3); /** Achtergrond in active state */
+  --dsn-color-warning-border-subtle: oklch(0.77 0.085 58.3); /** Subtiele rand */
+  --dsn-color-warning-border-default: oklch(0.52 0.124 58.3); /** Standaard rand */
+  --dsn-color-warning-border-hover: oklch(0.48 0.115 58.3); /** Rand in hover state */
+  --dsn-color-warning-border-active: oklch(0.44 0.105 58.3); /** Rand in active state */
+  --dsn-color-warning-color-default: oklch(0.4 0.095 58.3); /** Standaard tekstkleur */
+  --dsn-color-warning-color-hover: oklch(0.36 0.086 58.3); /** Tekst in hover state */
+  --dsn-color-warning-color-active: oklch(0.32 0.076 58.3); /** Tekst in active state */
+  --dsn-color-warning-color-subtle: oklch(0.45 0.107 58.3); /** Subtiele tekstkleur */
+  --dsn-color-warning-color-document: oklch(0.18 0.043 58.3); /** Documenttekstkleur */
+  --dsn-color-neutral-inverse-bg-document: oklch(0.424 0 0); /** Documentachtergrond (inverse) */
+  --dsn-color-neutral-inverse-bg-elevated: oklch(0.424 0 0); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-neutral-inverse-bg-subtle: oklch(0.384 0 0); /** Subtiele achtergrond (inverse) */
+  --dsn-color-neutral-inverse-bg-default: oklch(0.464 0 0); /** Standaard achtergrond (inverse) */
+  --dsn-color-neutral-inverse-bg-hover: oklch(0.424 0 0); /** Achtergrond in hover state (inverse) */
+  --dsn-color-neutral-inverse-bg-active: oklch(0.384 0 0); /** Achtergrond in active state (inverse) */
+  --dsn-color-neutral-inverse-border-subtle: oklch(0.659 0 0); /** Subtiele rand (inverse) */
+  --dsn-color-neutral-inverse-border-default: oklch(0.739 0 0); /** Standaard rand (inverse) */
+  --dsn-color-neutral-inverse-border-hover: oklch(0.789 0 0); /** Rand in hover state (inverse) */
+  --dsn-color-neutral-inverse-border-active: oklch(0.839 0 0); /** Rand in active state (inverse) */
+  --dsn-color-neutral-inverse-color-default: oklch(0.99 0 0); /** Standaard tekstkleur (inverse) */
+  --dsn-color-neutral-inverse-color-hover: oklch(0.99 0 0); /** Tekst in hover state (inverse) */
+  --dsn-color-neutral-inverse-color-active: oklch(0.99 0 0); /** Tekst in active state (inverse) */
+  --dsn-color-neutral-inverse-color-subtle: oklch(0.94 0 0); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-neutral-inverse-color-document: oklch(0.99 0 0); /** Documenttekstkleur (inverse) */
+  --dsn-color-accent-1-inverse-bg-document: oklch(0.427 0.098 255.8); /** Documentachtergrond (inverse) */
+  --dsn-color-accent-1-inverse-bg-elevated: oklch(0.427 0.098 255.8); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-accent-1-inverse-bg-subtle: oklch(0.387 0.114 255.8); /** Subtiele achtergrond (inverse) */
+  --dsn-color-accent-1-inverse-bg-default: oklch(0.467 0.158 255.8); /** Standaard achtergrond (inverse) */
+  --dsn-color-accent-1-inverse-bg-hover: oklch(0.427 0.145 255.8); /** Achtergrond in hover state (inverse) */
+  --dsn-color-accent-1-inverse-bg-active: oklch(0.387 0.131 255.8); /** Achtergrond in active state (inverse) */
+  --dsn-color-accent-1-inverse-border-subtle: oklch(0.657 0.108 255.8); /** Subtiele rand (inverse) */
+  --dsn-color-accent-1-inverse-border-default: oklch(0.737 0.09 255.8); /** Standaard rand (inverse) */
+  --dsn-color-accent-1-inverse-border-hover: oklch(0.787 0.108 255.8); /** Rand in hover state (inverse) */
+  --dsn-color-accent-1-inverse-border-active: oklch(0.837 0.082 255.8); /** Rand in active state (inverse) */
+  --dsn-color-accent-1-inverse-color-default: oklch(0.99 0.005 255.8); /** Standaard tekstkleur (inverse) */
+  --dsn-color-accent-1-inverse-color-hover: oklch(0.99 0.005 255.8); /** Tekst in hover state (inverse) */
+  --dsn-color-accent-1-inverse-color-active: oklch(0.99 0.005 255.8); /** Tekst in active state (inverse) */
+  --dsn-color-accent-1-inverse-color-subtle: oklch(0.94 0.029 255.8); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-accent-1-inverse-color-document: oklch(0.99 0.005 255.8); /** Documenttekstkleur (inverse) */
+  --dsn-color-info-inverse-bg-document: oklch(0.427 0.098 255.8); /** Documentachtergrond (inverse) */
+  --dsn-color-info-inverse-bg-elevated: oklch(0.427 0.098 255.8); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-info-inverse-bg-subtle: oklch(0.387 0.114 255.8); /** Subtiele achtergrond (inverse) */
+  --dsn-color-info-inverse-bg-default: oklch(0.467 0.158 255.8); /** Standaard achtergrond (inverse) */
+  --dsn-color-info-inverse-bg-hover: oklch(0.427 0.145 255.8); /** Achtergrond in hover state (inverse) */
+  --dsn-color-info-inverse-bg-active: oklch(0.387 0.131 255.8); /** Achtergrond in active state (inverse) */
+  --dsn-color-info-inverse-border-subtle: oklch(0.657 0.108 255.8); /** Subtiele rand (inverse) */
+  --dsn-color-info-inverse-border-default: oklch(0.737 0.09 255.8); /** Standaard rand (inverse) */
+  --dsn-color-info-inverse-border-hover: oklch(0.787 0.108 255.8); /** Rand in hover state (inverse) */
+  --dsn-color-info-inverse-border-active: oklch(0.837 0.082 255.8); /** Rand in active state (inverse) */
+  --dsn-color-info-inverse-color-default: oklch(0.99 0.005 255.8); /** Standaard tekstkleur (inverse) */
+  --dsn-color-info-inverse-color-hover: oklch(0.99 0.005 255.8); /** Tekst in hover state (inverse) */
+  --dsn-color-info-inverse-color-active: oklch(0.99 0.005 255.8); /** Tekst in active state (inverse) */
+  --dsn-color-info-inverse-color-subtle: oklch(0.94 0.029 255.8); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-info-inverse-color-document: oklch(0.99 0.005 255.8); /** Documenttekstkleur (inverse) */
+  --dsn-color-negative-inverse-bg-document: oklch(0.449 0.145 29.2); /** Documentachtergrond (inverse) */
+  --dsn-color-negative-inverse-bg-elevated: oklch(0.449 0.145 29.2); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-negative-inverse-bg-subtle: oklch(0.409 0.168 29.2); /** Subtiele achtergrond (inverse) */
+  --dsn-color-negative-inverse-bg-default: oklch(0.489 0.201 29.2); /** Standaard achtergrond (inverse) */
+  --dsn-color-negative-inverse-bg-hover: oklch(0.449 0.184 29.2); /** Achtergrond in hover state (inverse) */
+  --dsn-color-negative-inverse-bg-active: oklch(0.409 0.168 29.2); /** Achtergrond in active state (inverse) */
+  --dsn-color-negative-inverse-border-subtle: oklch(0.674 0.159 29.2); /** Subtiele rand (inverse) */
+  --dsn-color-negative-inverse-border-default: oklch(0.754 0.133 29.2); /** Standaard rand (inverse) */
+  --dsn-color-negative-inverse-border-hover: oklch(0.804 0.112 29.2); /** Rand in hover state (inverse) */
+  --dsn-color-negative-inverse-border-active: oklch(0.854 0.079 29.2); /** Rand in active state (inverse) */
+  --dsn-color-negative-inverse-color-default: oklch(0.99 0.005 29.2); /** Standaard tekstkleur (inverse) */
+  --dsn-color-negative-inverse-color-hover: oklch(0.99 0.005 29.2); /** Tekst in hover state (inverse) */
+  --dsn-color-negative-inverse-color-active: oklch(0.99 0.005 29.2); /** Tekst in active state (inverse) */
+  --dsn-color-negative-inverse-color-subtle: oklch(0.94 0.03 29.2); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-negative-inverse-color-document: oklch(0.99 0.005 29.2); /** Documenttekstkleur (inverse) */
+  --dsn-color-positive-inverse-bg-document: oklch(0.411 0.094 148.2); /** Documentachtergrond (inverse) */
+  --dsn-color-positive-inverse-bg-elevated: oklch(0.411 0.094 148.2); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-positive-inverse-bg-subtle: oklch(0.371 0.107 148.2); /** Subtiele achtergrond (inverse) */
+  --dsn-color-positive-inverse-bg-default: oklch(0.451 0.13 148.2); /** Standaard achtergrond (inverse) */
+  --dsn-color-positive-inverse-bg-hover: oklch(0.411 0.118 148.2); /** Achtergrond in hover state (inverse) */
+  --dsn-color-positive-inverse-bg-active: oklch(0.371 0.107 148.2); /** Achtergrond in active state (inverse) */
+  --dsn-color-positive-inverse-border-subtle: oklch(0.651 0.103 148.2); /** Subtiele rand (inverse) */
+  --dsn-color-positive-inverse-border-default: oklch(0.731 0.086 148.2); /** Standaard rand (inverse) */
+  --dsn-color-positive-inverse-border-hover: oklch(0.781 0.103 148.2); /** Rand in hover state (inverse) */
+  --dsn-color-positive-inverse-border-active: oklch(0.831 0.123 148.2); /** Rand in active state (inverse) */
+  --dsn-color-positive-inverse-color-default: oklch(0.99 0.009 148.2); /** Standaard tekstkleur (inverse) */
+  --dsn-color-positive-inverse-color-hover: oklch(0.99 0.009 148.2); /** Tekst in hover state (inverse) */
+  --dsn-color-positive-inverse-color-active: oklch(0.99 0.009 148.2); /** Tekst in active state (inverse) */
+  --dsn-color-positive-inverse-color-subtle: oklch(0.94 0.062 148.2); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-positive-inverse-color-document: oklch(0.99 0.009 148.2); /** Documenttekstkleur (inverse) */
+  --dsn-color-warning-inverse-bg-document: oklch(0.41 0.098 58.3); /** Documentachtergrond (inverse) */
+  --dsn-color-warning-inverse-bg-elevated: oklch(0.41 0.098 58.3); /** Elevated background (inverse) — for floating layers (modals, popovers, dropdowns) */
+  --dsn-color-warning-inverse-bg-subtle: oklch(0.37 0.088 58.3); /** Subtiele achtergrond (inverse) */
+  --dsn-color-warning-inverse-bg-default: oklch(0.45 0.107 58.3); /** Standaard achtergrond (inverse) */
+  --dsn-color-warning-inverse-bg-hover: oklch(0.41 0.098 58.3); /** Achtergrond in hover state (inverse) */
+  --dsn-color-warning-inverse-bg-active: oklch(0.37 0.088 58.3); /** Achtergrond in active state (inverse) */
+  --dsn-color-warning-inverse-border-subtle: oklch(0.64 0.125 58.3); /** Subtiele rand (inverse) */
+  --dsn-color-warning-inverse-border-default: oklch(0.72 0.104 58.3); /** Standaard rand (inverse) */
+  --dsn-color-warning-inverse-border-hover: oklch(0.77 0.125 58.3); /** Rand in hover state (inverse) */
+  --dsn-color-warning-inverse-border-active: oklch(0.82 0.122 58.3); /** Rand in active state (inverse) */
+  --dsn-color-warning-inverse-color-default: oklch(0.99 0.006 58.3); /** Standaard tekstkleur (inverse) */
+  --dsn-color-warning-inverse-color-hover: oklch(0.99 0.006 58.3); /** Tekst in hover state (inverse) */
+  --dsn-color-warning-inverse-color-active: oklch(0.99 0.006 58.3); /** Tekst in active state (inverse) */
+  --dsn-color-warning-inverse-color-subtle: oklch(0.94 0.037 58.3); /** Subtiele tekstkleur (inverse) */
+  --dsn-color-warning-inverse-color-document: oklch(0.99 0.006 58.3); /** Documenttekstkleur (inverse) */
   --dsn-color-transparent: rgba(0, 0, 0, 0); /** Volledig transparant — voor onzichtbare achtergronden en randen */
   --dsn-color-shadow-direct: color-mix(in srgb, black 12%, transparent); /** Scherpe schaduwlaag — direct licht, dichtbij het object */
   --dsn-color-shadow-ambient: color-mix(in srgb, black 6%, transparent); /** Diffuse schaduwlaag — omgevingslicht, verder weg */
@@ -591,7 +591,7 @@
   --dsn-color-action-2-inverse-color-active: var(--dsn-color-accent-1-inverse-color-active); /** Tekst in active state (inverse) — secundaire acties (links, navigatie) */
   --dsn-color-action-2-inverse-color-subtle: var(--dsn-color-accent-1-inverse-color-subtle); /** Subtiele tekstkleur (inverse) — secundaire acties (links, navigatie) */
   --dsn-color-action-2-inverse-color-document: var(--dsn-color-accent-1-inverse-color-document); /** Documenttekstkleur (inverse) — secundaire acties (links, navigatie) */
-  --dsn-backdrop-background-color: var(--dsn-color-neutral-inverse-bg-document); /** Achtergrondkleur van de backdrop — altijd donker, ongeacht light mode. Gebruikt neutral-inverse.bg-document (#242424) zodat de overlay donker blijft in light mode. */
+  --dsn-backdrop-background-color: var(--dsn-color-neutral-inverse-bg-document); /** Achtergrondkleur van de backdrop — altijd donker, ongeacht light mode. Gebruikt neutral-inverse.bg-document zodat de overlay donker blijft in light mode. */
   --dsn-backdrop-z-index: var(--dsn-z-index-400); /** Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600) */
   --dsn-action-group-column-gap: var(--dsn-space-inline-lg); /** Horizontal gap between actions in horizontal direction */
   --dsn-action-group-row-gap: var(--dsn-space-row-lg); /** Vertical gap between wrapped rows in horizontal direction */
@@ -1030,6 +1030,8 @@
   --dsn-paragraph-small-print-font-size: var(--dsn-text-font-size-sm); /** Font-size van de kleine tekst alinea */
   --dsn-paragraph-small-print-line-height: var(--dsn-text-line-height-sm); /** Line-height van de kleine tekst alinea */
   --dsn-paragraph-small-print-margin-block-end: var(--dsn-space-row-md); /** Onderste margin van de kleine tekst alinea */
+  --dsn-popover-menu-min-width: var(--dsn-popover-min-width); /** Minimale breedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-max-width: var(--dsn-popover-max-width); /** Maximale breedte van het paneel: delegeert naar de Popover */
   --dsn-popover-background-color: var(--dsn-color-neutral-bg-elevated); /** Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina */
   --dsn-popover-border-width: var(--dsn-border-width-thin); /** Randbreedte van de popover */
   --dsn-popover-border-color: var(--dsn-color-neutral-border-subtle); /** Randkleur van de popover */
@@ -1295,6 +1297,13 @@
   --dsn-note-info-color: var(--dsn-color-info-color-document); /** Tekstkleur voor info variant */
   --dsn-note-info-icon-color: var(--dsn-color-info-color-default); /** Icoonkleur voor info variant */
   --dsn-option-label-disabled-color: var(--dsn-form-control-disabled-color);
+  --dsn-popover-menu-background-color: var(--dsn-popover-background-color); /** Achtergrondkleur van het paneel: delegeert naar de Popover, zodat beide panelen gelijk ogen */
+  --dsn-popover-menu-border-width: var(--dsn-popover-border-width); /** Randbreedte van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-color: var(--dsn-popover-border-color); /** Randkleur van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-border-radius: var(--dsn-popover-border-radius); /** Afgeronde hoeken van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-z-index: var(--dsn-popover-z-index); /** Z-index van het paneel: delegeert naar de Popover */
+  --dsn-popover-menu-padding-block: var(--dsn-popover-body-padding-block); /** Verticale padding rond de lijst: delegeert naar de Popover-body, zodat beide panelen dezelfde binnenruimte hebben */
+  --dsn-popover-menu-padding-inline: var(--dsn-popover-body-padding-inline); /** Horizontale padding rond de lijst: delegeert naar de Popover-body */
   --dsn-popover-box-shadow: var(--dsn-box-shadow-md); /** Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals */
   --dsn-popover-heading-color: var(--dsn-heading-color); /** Kleur van de popover-heading */
   --dsn-radio-group-legend-color: var(--dsn-form-field-label-color); /** Tekstkleur van de legend (hergebruikt van het formulierveldlabel) */
@@ -1393,6 +1402,7 @@
   --dsn-checkbox-indeterminate-focus-color: var(--dsn-form-control-focus-color);
   --dsn-checkbox-indeterminate-hover-background-color: var(--dsn-form-control-hover-accent-color);
   --dsn-date-input-icon-size: var(--dsn-button-size-small-icon-size); /** Calendar icon size — matches the small button icon size */
+  --dsn-popover-menu-box-shadow: var(--dsn-popover-box-shadow); /** Schaduw van het paneel: delegeert naar de Popover */
   --dsn-radio-checked-background-color: var(--dsn-form-control-accent-color);
   --dsn-radio-focus-background-color: var(--dsn-form-control-focus-background-color);
   --dsn-radio-checked-active-background-color: var(--dsn-form-control-active-accent-color);