@nd-storybook/storybook 0.3.2 → 0.3.4

package/dist/css/tailwind.css

@@ -1,7 +1,5 @@
 @import "tokens.css";
 @import "typography.css";
-@import "button.css";
-@import "badge.css";
 
 @import "molecules/form.css";
 
@@ -11,9 +9,7 @@
 @import "components/portal/accordionItem.css";
 @import "components/portal/accordion.css";
 @import "components/portal/navigationCard.css";
-@import "experimental/collapsed-card.css";
 @import "components/portal/menuItem.css";
-@import "components/portal/tabs.css";
 @import "components/portal/dataFrame.css";
 @import "components/portal/alert.css";
 @tailwind base;

package/dist/css/tokens.css

@@ -1,15 +1,14 @@
 /**
  * Design System Tokens
  * Generated from design tokens - DO NOT EDIT DIRECTLY
- * Last generated: 2025-08-25T13:26:41.758Z
+ * Last generated: 2025-12-08T13:56:43.111Z
  */
 
 :root {
-  --font-family-gulliver: Gulliver Web, Georgia, serif;
-  --font-family-fira-sans: Fira Sans, Arial, sans-serif;
-  --font-family-montserrat: Montserrat;
-  --font-family-abril-fatface: Abril Fatface;
-  --font-family-gulliver-semibold: Gulliver Web, Georgia, serif;
+  --font-family-gulliver: "Gulliver Web", Georgia, serif;
+  --font-family-fira-sans: "Fira Sans", Arial, sans-serif;
+  --font-family-montserrat: "Montserrat", "Helvetica Neue", Arial, sans-serif;
+  --font-family-abril-fatface: "Abril Fatface", "Playfair Display", Georgia, serif;
   --font-weight-bold: 700;
   --font-weight-semibold: 600;
   --font-weight-regular: 400;
@@ -46,10 +45,11 @@
   --color-blue-500: #0096cb;
   --color-blue-900: #09254a;
   --color-blue-500-10: #02a1d91a;
-  --color-pink-200: #fdecef;
+  --color-pink-200: #fef3f2;
   --color-pink-400: #f2e1df;
   --color-pink-600: #ec596f;
   --color-pink-700: #e9425b;
+  --color-pink-800: #be123c;
   --color-brown-500: #a27675;
   --color-brown-800: #6a4847;
   --color-brown-900: #3a1a1c;
@@ -67,7 +67,7 @@
   --color-neutral-white: #ffffff;
   --color-neutral-white-30: #ffffff4d;
   --color-text-default: #000000;
-  --color-text-subtle: #bdbdbd;
+  --color-text-subtle: #727272;
   --color-text-brand: #0096cb;
   --color-text-brand-subtle: #02b4f2;
   --color-text-accent-brown: #6a4847;
@@ -96,6 +96,8 @@
   --color-icons-warning: #e9425b;
   --color-icons-inverse: #ffffff;
   --color-shadow-default: #0000001a;
+  --color-dnk-brand: #be123c;
+  --color-dnk-background: #fef3f2;
   --color-form-background-input-field-default: #ffffff;
   --color-form-background-checkbox-default: #ffffff;
   --color-form-border-input-field-default: #bdbdbd;
@@ -113,7 +115,7 @@
   --color-button-text-dark-default: #ffffff;
   --color-button-text-secondary-default: #0096cb;
   --color-button-text-ghost-default: #0096cb;
-  --color-button-text-pill-default: #bdbdbd;
+  --color-button-text-pill-default: #727272;
   --color-link-text-default-default: #000000;
   --color-link-text-brown-default: #6a4847;
   --color-form-background-input-field-hover: #f8f8f8;
@@ -133,7 +135,7 @@
   --color-button-text-dark-hover: #ffffff;
   --color-button-text-secondary-hover: #0096cb;
   --color-button-text-ghost-hover: #02b4f2;
-  --color-button-text-pill-hover: #bdbdbd;
+  --color-button-text-pill-hover: #727272;
   --color-link-text-default-hover: #000000;
   --color-link-text-brown-hover: #a27675;
   --color-form-background-input-field-active: #ffffff;
@@ -153,7 +155,7 @@
   --color-button-text-dark-active: #ffffff;
   --color-button-text-secondary-active: #0096cb;
   --color-button-text-ghost-active: #02b4f2;
-  --color-button-text-pill-active: #bdbdbd;
+  --color-button-text-pill-active: #727272;
   --color-link-text-default-active: #000000;
   --color-link-text-brown-active: #a27675;
   --color-form-background-input-field-disabled: #f2f2f2;
@@ -179,10 +181,6 @@
   --box-shadow-s: 0px 1px 8px 0px #0000001a;
   --box-shadow-m: 0px 10px 20px 0px #0000001a, 0px 1px 2px 0px #0000001a;
   --box-shadow-l: 0px -10px 20px 0px #0000001a, 0px 1px 2px 0px #0000001a;
-  --spacing-layout-breakpoints: 360px;
-  --spacing-layout-columns: 4px;
-  --spacing-layout-padding: 16px;
-  --spacing-layout-gutter: 16px;
   --spacing-0: 0px;
   --spacing-xxs: 4px;
   --spacing-xs: 8px;
@@ -196,265 +194,6 @@
   --border-radius-pill: 80px;
   --border-width-0: 0px;
   --border-width-s: 1px;
-  --article-heading-fontFamily: Gulliver Web, Georgia, serif;
-  --article-heading-fontSize: 28px;
-  --article-heading-fontWeight: 700;
-  --article-heading-letterSpacing: 0px;
-  --article-heading-lineHeight: 130%;
-  --article-heading-textTransform: none;
-  --article-heading-textDecoration: none;
-  --article-heading-light-fontFamily: Gulliver Web, Georgia, serif;
-  --article-heading-light-fontSize: 28px;
-  --article-heading-light-fontWeight: 400;
-  --article-heading-light-letterSpacing: 0px;
-  --article-heading-light-lineHeight: 130%;
-  --article-heading-light-textTransform: none;
-  --article-heading-light-textDecoration: none;
-  --article-heading-alternate-fontFamily: Montserrat;
-  --article-heading-alternate-fontSize: 28px;
-  --article-heading-alternate-fontWeight: 300;
-  --article-heading-alternate-letterSpacing: 0px;
-  --article-heading-alternate-lineHeight: 130%;
-  --article-heading-alternate-textTransform: none;
-  --article-heading-alternate-textDecoration: none;
-  --article-heading-2-fontFamily: Gulliver Web, Georgia, serif;
-  --article-heading-2-fontSize: 20px;
-  --article-heading-2-fontWeight: 700;
-  --article-heading-2-letterSpacing: 0px;
-  --article-heading-2-lineHeight: 130%;
-  --article-heading-2-textTransform: none;
-  --article-heading-2-textDecoration: none;
-  --article-heading-2-light-fontFamily: Gulliver Web, Georgia, serif;
-  --article-heading-2-light-fontSize: 20px;
-  --article-heading-2-light-fontWeight: 400;
-  --article-heading-2-light-letterSpacing: 0px;
-  --article-heading-2-light-lineHeight: 130%;
-  --article-heading-2-light-textTransform: none;
-  --article-heading-2-light-textDecoration: none;
-  --article-heading-2-alternate-fontFamily: Montserrat;
-  --article-heading-2-alternate-fontSize: 20px;
-  --article-heading-2-alternate-fontWeight: 700;
-  --article-heading-2-alternate-letterSpacing: 0px;
-  --article-heading-2-alternate-lineHeight: 130%;
-  --article-heading-2-alternate-textTransform: none;
-  --article-heading-2-alternate-textDecoration: none;
-  --article-body-fontFamily: Fira Sans, Arial, sans-serif;
-  --article-body-fontSize: 18px;
-  --article-body-fontWeight: 400;
-  --article-body-letterSpacing: 0px;
-  --article-body-lineHeight: 160%;
-  --article-body-textTransform: none;
-  --article-body-textDecoration: none;
-  --article-type-fontFamily: Fira Sans, Arial, sans-serif;
-  --article-type-fontSize: 22px;
-  --article-type-fontWeight: 700;
-  --article-type-letterSpacing: 1.6px;
-  --article-type-lineHeight: 160%;
-  --article-type-textTransform: small-caps;
-  --article-type-textDecoration: none;
-  --article-intro-fontFamily: Fira Sans, Arial, sans-serif;
-  --article-intro-fontSize: 20px;
-  --article-intro-fontWeight: 300;
-  --article-intro-letterSpacing: 0px;
-  --article-intro-lineHeight: 160%;
-  --article-intro-textTransform: none;
-  --article-intro-textDecoration: none;
-  --article-city-fontFamily: Fira Sans, Arial, sans-serif;
-  --article-city-fontSize: 22px;
-  --article-city-fontWeight: 400;
-  --article-city-letterSpacing: 2.4px;
-  --article-city-lineHeight: 160%;
-  --article-city-textTransform: small-caps;
-  --article-city-textDecoration: none;
-  --article-quote-fontFamily: Gulliver Web, Georgia, serif;
-  --article-quote-fontSize: 28px;
-  --article-quote-fontWeight: 700;
-  --article-quote-letterSpacing: 0px;
-  --article-quote-lineHeight: 130%;
-  --article-quote-textTransform: none;
-  --article-quote-textDecoration: none;
-  --article-question-fontFamily: Fira Sans, Arial, sans-serif;
-  --article-question-fontSize: 18px;
-  --article-question-fontWeight: 700;
-  --article-question-letterSpacing: 0px;
-  --article-question-lineHeight: 160%;
-  --article-question-textTransform: none;
-  --article-question-textDecoration: none;
-  --article-drop-cap-fontFamily: Abril Fatface;
-  --article-drop-cap-fontSize: 96px;
-  --article-drop-cap-fontWeight: 700;
-  --article-drop-cap-letterSpacing: 0px;
-  --article-drop-cap-lineHeight: 160%;
-  --article-drop-cap-textTransform: none;
-  --article-drop-cap-textDecoration: none;
-  --article-drop-cap-alternate-fontFamily: Montserrat;
-  --article-drop-cap-alternate-fontSize: 96px;
-  --article-drop-cap-alternate-fontWeight: 300;
-  --article-drop-cap-alternate-letterSpacing: 0px;
-  --article-drop-cap-alternate-lineHeight: 160%;
-  --article-drop-cap-alternate-textTransform: none;
-  --article-drop-cap-alternate-textDecoration: none;
-  --body-light-fontFamily: Fira Sans, Arial, sans-serif;
-  --body-light-fontSize: 18px;
-  --body-light-fontWeight: 300;
-  --body-light-letterSpacing: 0px;
-  --body-light-lineHeight: 160%;
-  --body-light-textTransform: none;
-  --body-light-textDecoration: none;
-  --body-regular-fontFamily: Fira Sans, Arial, sans-serif;
-  --body-regular-fontSize: 18px;
-  --body-regular-fontWeight: 400;
-  --body-regular-letterSpacing: 0px;
-  --body-regular-lineHeight: 160%;
-  --body-regular-textTransform: none;
-  --body-regular-textDecoration: none;
-  --body-bold-fontFamily: Fira Sans, Arial, sans-serif;
-  --body-bold-fontSize: 18px;
-  --body-bold-fontWeight: 700;
-  --body-bold-letterSpacing: 0px;
-  --body-bold-lineHeight: 160%;
-  --body-bold-textTransform: none;
-  --body-bold-textDecoration: none;
-  --body-uppercase-fontFamily: Fira Sans, Arial, sans-serif;
-  --body-uppercase-fontSize: 22px;
-  --body-uppercase-fontWeight: 400;
-  --body-uppercase-letterSpacing: 1.6px;
-  --body-uppercase-lineHeight: normal;
-  --body-uppercase-textTransform: small-caps;
-  --body-uppercase-textDecoration: none;
-  --body-uppercase-bold-fontFamily: Fira Sans, Arial, sans-serif;
-  --body-uppercase-bold-fontSize: 22px;
-  --body-uppercase-bold-fontWeight: 700;
-  --body-uppercase-bold-letterSpacing: 1.6px;
-  --body-uppercase-bold-lineHeight: normal;
-  --body-uppercase-bold-textTransform: small-caps;
-  --body-uppercase-bold-textDecoration: none;
-  --body-uppercase-bold-small-fontFamily: Fira Sans, Arial, sans-serif;
-  --body-uppercase-bold-small-fontSize: 20px;
-  --body-uppercase-bold-small-fontWeight: 700;
-  --body-uppercase-bold-small-letterSpacing: 1.6px;
-  --body-uppercase-bold-small-lineHeight: normal;
-  --body-uppercase-bold-small-textTransform: small-caps;
-  --body-uppercase-bold-small-textDecoration: none;
-  --heading-2-fontFamily: Gulliver Web, Georgia, serif;
-  --heading-2-fontSize: 20px;
-  --heading-2-fontWeight: 700;
-  --heading-2-letterSpacing: 0px;
-  --heading-2-lineHeight: 130%;
-  --heading-2-textTransform: none;
-  --heading-2-textDecoration: none;
-  --heading-3-fontFamily: Fira Sans, Arial, sans-serif;
-  --heading-3-fontSize: 18px;
-  --heading-3-fontWeight: 700;
-  --heading-3-letterSpacing: 0px;
-  --heading-3-lineHeight: 130%;
-  --heading-3-textTransform: none;
-  --heading-3-textDecoration: none;
-  --heading-page-fontFamily: Gulliver Web, Georgia, serif;
-  --heading-page-fontSize: 25px;
-  --heading-page-fontWeight: 700;
-  --heading-page-letterSpacing: 0px;
-  --heading-page-lineHeight: 130%;
-  --heading-page-textTransform: none;
-  --heading-page-textDecoration: none;
-  --heading-subheading-fontFamily: Gulliver Web, Georgia, serif;
-  --heading-subheading-fontSize: 25px;
-  --heading-subheading-fontWeight: 400;
-  --heading-subheading-letterSpacing: 0px;
-  --heading-subheading-lineHeight: 130%;
-  --heading-subheading-textTransform: none;
-  --heading-subheading-textDecoration: none;
-  --heading-uppercase-fontFamily: Fira Sans, Arial, sans-serif;
-  --heading-uppercase-fontSize: 14px;
-  --heading-uppercase-fontWeight: 700;
-  --heading-uppercase-letterSpacing: 4px;
-  --heading-uppercase-lineHeight: 130%;
-  --heading-uppercase-textTransform: small-caps;
-  --heading-uppercase-textDecoration: none;
-  --meta-light-fontFamily: Fira Sans, Arial, sans-serif;
-  --meta-light-fontSize: 14px;
-  --meta-light-fontWeight: 300;
-  --meta-light-letterSpacing: 0px;
-  --meta-light-lineHeight: 140%;
-  --meta-light-textTransform: none;
-  --meta-light-textDecoration: none;
-  --meta-regular-fontFamily: Fira Sans, Arial, sans-serif;
-  --meta-regular-fontSize: 14px;
-  --meta-regular-fontWeight: 400;
-  --meta-regular-letterSpacing: 0px;
-  --meta-regular-lineHeight: 140%;
-  --meta-regular-textTransform: none;
-  --meta-regular-textDecoration: none;
-  --meta-bold-fontFamily: Fira Sans, Arial, sans-serif;
-  --meta-bold-fontSize: 14px;
-  --meta-bold-fontWeight: 700;
-  --meta-bold-letterSpacing: 0px;
-  --meta-bold-lineHeight: 140%;
-  --meta-bold-textTransform: none;
-  --meta-bold-textDecoration: none;
-  --menu-menu-primary-fontFamily: Fira Sans, Arial, sans-serif;
-  --menu-menu-primary-fontSize: 22px;
-  --menu-menu-primary-fontWeight: 400;
-  --menu-menu-primary-letterSpacing: 0px;
-  --menu-menu-primary-lineHeight: 140%;
-  --menu-menu-primary-textTransform: small-caps;
-  --menu-menu-primary-textDecoration: none;
-  --menu-menu-secondary-fontFamily: Fira Sans, Arial, sans-serif;
-  --menu-menu-secondary-fontSize: 14px;
-  --menu-menu-secondary-fontWeight: 400;
-  --menu-menu-secondary-letterSpacing: 0px;
-  --menu-menu-secondary-lineHeight: 140%;
-  --menu-menu-secondary-textTransform: none;
-  --menu-menu-secondary-textDecoration: none;
-  --menu-menu-submenu-fontFamily: Fira Sans, Arial, sans-serif;
-  --menu-menu-submenu-fontSize: 16px;
-  --menu-menu-submenu-fontWeight: 300;
-  --menu-menu-submenu-letterSpacing: 0px;
-  --menu-menu-submenu-lineHeight: 140%;
-  --menu-menu-submenu-textTransform: none;
-  --menu-menu-submenu-textDecoration: none;
-  --menu-menu-tabbar-fontFamily: Fira Sans, Arial, sans-serif;
-  --menu-menu-tabbar-fontSize: 12px;
-  --menu-menu-tabbar-fontWeight: 400;
-  --menu-menu-tabbar-letterSpacing: 0px;
-  --menu-menu-tabbar-lineHeight: 140%;
-  --menu-menu-tabbar-textTransform: none;
-  --menu-menu-tabbar-textDecoration: none;
-  --menu-menu-tabbar-active-fontFamily: Fira Sans, Arial, sans-serif;
-  --menu-menu-tabbar-active-fontSize: 12px;
-  --menu-menu-tabbar-active-fontWeight: 700;
-  --menu-menu-tabbar-active-letterSpacing: 0px;
-  --menu-menu-tabbar-active-lineHeight: 140%;
-  --menu-menu-tabbar-active-textTransform: none;
-  --menu-menu-tabbar-active-textDecoration: none;
-  --menu-menu-tab-item-fontFamily: Gulliver Web, Georgia, serif;
-  --menu-menu-tab-item-fontSize: 1.25rem;
-  --menu-menu-tab-item-fontWeight: 400;
-  --menu-menu-tab-item-letterSpacing: 0%;
-  --menu-menu-tab-item-lineHeight: 130%;
-  --menu-menu-tab-item-textTransform: none;
-  --menu-menu-tab-item-textDecoration: none;
-  --menu-menu-tab-item-active-fontFamily: Gulliver Web, Georgia, serif;
-  --menu-menu-tab-item-active-fontSize: 1.25rem;
-  --menu-menu-tab-item-active-fontWeight: 700;
-  --menu-menu-tab-item-active-letterSpacing: 0%;
-  --menu-menu-tab-item-active-lineHeight: 130%;
-  --menu-menu-tab-item-active-textTransform: none;
-  --menu-menu-tab-item-active-textDecoration: underline;
-  --mijn-nd-heading-fontFamily: Fira Sans, Arial, sans-serif;
-  --mijn-nd-heading-fontSize: 1.125rem;
-  --mijn-nd-heading-fontWeight: 700;
-  --mijn-nd-heading-letterSpacing: 0px;
-  --mijn-nd-heading-lineHeight: 160%;
-  --mijn-nd-heading-textTransform: none;
-  --mijn-nd-heading-textDecoration: none;
-  --mijn-nd-description-fontFamily: Fira Sans, Arial, sans-serif;
-  --mijn-nd-description-fontSize: 1.125rem;
-  --mijn-nd-description-fontWeight: 300;
-  --mijn-nd-description-letterSpacing: 0px;
-  --mijn-nd-description-lineHeight: 160%;
-  --mijn-nd-description-textTransform: none;
-  --mijn-nd-description-textDecoration: none;
   --font-size-heading-xs: 14px;
   --font-size-heading-s: 18px;
   --font-size-heading-m: 20px;
@@ -470,6 +209,50 @@
   --font-size-meta: 14px;
 }
 
+/* Dark Mode Colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text-default: #ffffff;
+    --color-text-subtle: #bdbdbd;
+    --color-text-brand: #0096cb;
+    --color-text-brand-subtle: #02b4f2;
+    --color-text-accent-brown: #a27675;
+    --color-text-accent-brown-subtle: #a27675;
+    --color-text-accent-pink: #e9425b;
+    --color-text-disabled: #bdbdbd;
+    --color-text-inverse: #ffffff;
+    --color-text-warning: #e9425b;
+    --color-text-warning-inverse: #ffffff;
+    --color-background-default: #121212;
+    --color-background-dark: #222222;
+    --color-background-dark-subtle: #727272;
+    --color-background-brand: #0096cb;
+    --color-background-brand-subtle: #02b4f2;
+    --color-background-brand-subtlest: #02a1d91a;
+    --color-background-accent-gray: #484544;
+    --color-background-accent-gray-subtle: #222222;
+    --color-background-accent-brown: #a27675;
+    --color-background-accent-pink: #e9425b;
+    --color-background-accent-pink-subtle: #ec596f;
+    --color-background-accent-pink-subtlest: #f2e1df;
+    --color-background-disabled: #222222;
+    --color-border-default: #ffffff;
+    --color-border-brand: #0096cb;
+    --color-border-accent-gray: #999999;
+    --color-border-accent-gray-subtle: #727272;
+    --color-border-disabled: #999999;
+    --color-border-warning: #e9425b;
+    --color-icons-default: #ffffff;
+    --color-icons-gray: #bdbdbd;
+    --color-icons-brand: #0096cb;
+    --color-icons-warning: #e9425b;
+    --color-icons-inverse: #ffffff;
+    --color-shadow-default: #ffffff4d;
+    --color-dnk-brand: #be123c;
+    --color-dnk-background: #fef3f2;
+  }
+}
+
 /* Mobile Typography (Default) */
 @media (max-width: 767px) {
   :root {