@nd-storybook/storybook 0.3.0 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nd-storybook/storybook",
-  "version": "0.3.0",
+  "version": "0.3.4",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/tailwind.config.js

@@ -21,7 +21,7 @@ export default {
     "./src/**/*.{vue,js,ts,jsx,tsx,stories.js}",
     "./storybook/**/*.{mdx,vue,js,ts,jsx,tsx,stories.js}",
   ],
-  darkMode: 'class',
+  darkMode: 'media',
   theme: {
     extend: {
         colors: {

package/tailwind.tokens.js

@@ -1,5 +1,5 @@
 // Generated from design tokens - DO NOT EDIT DIRECTLY
-// Last generated: 2025-11-24T13:43:30.556Z
+// Last generated: 2025-12-08T13:56:43.110Z
 
 export const primitiveColors = {
   "blue-400": "var(--color-blue-400)",
@@ -10,6 +10,7 @@ export const primitiveColors = {
   "pink-400": "var(--color-pink-400)",
   "pink-600": "var(--color-pink-600)",
   "pink-700": "var(--color-pink-700)",
+  "pink-800": "var(--color-pink-800)",
   "brown-500": "var(--color-brown-500)",
   "brown-800": "var(--color-brown-800)",
   "brown-900": "var(--color-brown-900)",
@@ -63,7 +64,9 @@ export const semanticColors = {
   "icons-brand": "var(--color-icons-brand)",
   "icons-warning": "var(--color-icons-warning)",
   "icons-inverse": "var(--color-icons-inverse)",
-  "shadow-default": "var(--color-shadow-default)"
+  "shadow-default": "var(--color-shadow-default)",
+  "dnk-brand": "var(--color-dnk-brand)",
+  "dnk-background": "var(--color-dnk-background)"
 };
 export const componentColors = {
   "form-background-input-field": "var(--color-form-background-input-field-default)",

package/tokens.utilities.js

@@ -1,7 +1,7 @@
 /**
  * Tailwind CSS Utilities Plugin
  * Generated from design tokens - DO NOT EDIT DIRECTLY
- * Last generated: 2025-11-24T13:43:30.558Z
+ * Last generated: 2025-12-08T13:56:43.112Z
  */
 
 export default function ({ addUtilities }) {

package/dist/css/badge.css

@@ -1,20 +0,0 @@
-@layer components {
-
-  .badge-premium {
-    @apply
-      inline-flex
-      items-center
-      gap-x-xs
-      p-s
-      bg-background-accent-pink-subtlest
-      text-meta-regular
-  }
-
-  .badge-premium-small {
-    @apply
-      p-xs
-      gap-x-xs
-      text-meta-regular
-  }
-
-}

package/dist/css/components/portal/tabs.css

@@ -1,220 +0,0 @@
-/* Tabs Component Styles - Using Design System Tokens */
-
-/* Tab Container */
-.tabs {
-    display: flex;
-    position: relative;
-}
-
-.tabs--desktop {
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacing-0);
-    margin-bottom: var(--spacing-m);
-}
-
-.tabs--mobile {
-    flex-direction: column;
-    width: 100%;
-}
-
-/* Tab Item Base */
-.tab-item {
-    background: var(--color-background-default);
-    border: var(--border-width-0);
-    cursor: pointer;
-    text-decoration: none;
-    position: relative;
-    display: flex;
-    align-items: center;
-    outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    transition: all 200ms ease-in-out;
-    color: var(--color-text-default);
-}
-
-/* Desktop Tab Item */
-.tab-item--desktop {
-    padding: var(--spacing-s) var(--spacing-m);
-    justify-content: center;
-    position: relative;
-}
-
-/* Mobile Tab Item */
-.tab-item--mobile {
-    padding: var(--spacing-s) var(--spacing-0);
-    width: 100%;
-    justify-content: space-between;
-    flex-direction: row;
-    border-bottom: var(--border-width-s) solid var(--color-border-accent-gray-subtle);
-}
-
-.tab-item__content {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-xs);
-}
-
-/* Tab Text */
-.tab-item__text {
-    display: inline-block;
-    white-space: nowrap;
-    text-align: center;
-    color: var(--color-text-default);
-}
-
-/* =========================
-   DESKTOP STYLES
-   ========================= */
-
-/* Desktop Default State */
-.tab-item--desktop:not(.active) .tab-item__text {
-    font-family: var(--menu-menu-tab-item-fontFamily);  /* ← Use the correct variable */
-    font-size: var(--menu-menu-tab-item-fontSize);
-    font-weight: var(--menu-menu-tab-item-fontWeight);
-    line-height: var(--menu-menu-tab-item-lineHeight);
-    letter-spacing: var(--menu-menu-tab-item-letterSpacing);
-    text-decoration: none;
-    color: var(--color-text-default);
-}
-
-
-/* Desktop Hover State */
-.tab-item--desktop:not(.active):hover {
-    background: var(--color-background-default);
-}
-
-.tab-item--desktop:not(.active):hover .tab-item__text {
-    color: var(--color-text-default);
-    text-decoration: underline;
-    text-decoration-color: var(--color-border-accent-gray);
-    text-underline-offset: 8px;
-    text-decoration-thickness: 2px;
-}
-
-/* Desktop Active State - Matching Figma exactly */
-.tab-item--desktop.active,
-.tab-item--desktop[data-active="true"] {
-    background: var(--color-background-default);
-}
-
-.tab-item--desktop.active .tab-item__text,
-.tab-item--desktop[data-active="true"] .tab-item__text {
-    font-family: var(--menu-menu-tab-item-active-fontFamily);  /* ← Use the correct variable */
-    font-size: var(--menu-menu-tab-item-active-fontSize);
-    font-weight: var(--menu-menu-tab-item-active-fontWeight);
-    line-height: var(--menu-menu-tab-item-active-lineHeight);
-    letter-spacing: var(--menu-menu-tab-item-active-letterSpacing);
-    text-decoration: underline;
-    text-decoration-color: var(--color-border-brand);
-    text-underline-offset: 25%;
-    color: var(--color-text-default);
-}
-
-/* =========================
-   MOBILE STYLES
-   ========================= */
-
-/* Mobile Default State */
-.tab-item--mobile:not(.active) {
-    background: var(--color-background-default);
-}
-
-.tab-item--mobile:not(.active) .tab-item__text {
-    font-family: var(--menu-menu-tab-item-fontFamily);
-    font-size: var(--font-size-body-m);
-    font-weight: var(--menu-menu-tab-item-fontWeight);
-    line-height: var(--menu-menu-tab-item-lineHeight);
-    letter-spacing: var(--menu-menu-tab-item-letterSpacing);
-    text-decoration: none;
-    color: var(--color-text-default);
-}
-
-/* Mobile Hover State */
-.tab-item--mobile:not(.active):hover {
-    background: var(--color-background-accent-gray-subtle);
-}
-
-/* Mobile Active State */
-.tab-item--mobile.active,
-.tab-item--mobile[data-active="true"] {
-    background: var(--color-background-default);
-    border-bottom-width: 2px;
-    border-bottom-color: var(--color-border-brand);
-    padding-bottom: calc(var(--spacing-s) - 1px); /* Adjust for thicker border */
-}
-
-.tab-item--mobile.active .tab-item__text,
-.tab-item--mobile[data-active="true"] .tab-item__text {
-    font-family: var(--menu-menu-tab-item-active-fontFamily);
-    font-size: var(--font-size-body-m);
-    font-weight: var(--menu-menu-tab-item-active-fontWeight);
-    line-height: var(--menu-menu-tab-item-active-lineHeight);
-    letter-spacing: var(--menu-menu-tab-item-active-letterSpacing);
-    text-decoration: none;
-    color: var(--color-text-default);
-}
-
-/* Mobile chevron icons */
-.tab-item__icon {
-    width: 7px;
-    height: 12px;
-    color: var(--color-icons-default);
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: left;
-}
-
-.tab-item__icon svg {
-    width: 100%;
-    height: 100%;
-    stroke: currentColor;
-    stroke-width: var(--border-width-s);
-}
-
-/* Hide icons based on state */
-.tab-item--mobile:not(.active) .tab-item__icon--left {
-    display: none;
-}
-
-.tab-item--mobile.active .tab-item__icon--right,
-.tab-item--mobile[data-active="true"] .tab-item__icon--right {
-    display: none;
-}
-
-/* Focus styles for accessibility */
-.tab-item:focus-visible {
-    outline: 2px solid var(--color-border-brand);
-    outline-offset: 2px;
-    border-radius: var(--border-radius-0);
-}
-
-/* Remove focus outline when clicking (mouse users) */
-.tab-item:focus:not(:focus-visible) {
-    outline: none;
-}
-
-/* Responsive adjustments */
-@media (min-width: 768px) {
-    .tabs--desktop {
-        /* REMOVED: border-bottom line that was causing the gray border */
-        margin-bottom: var(--spacing-l);
-    }
-
-    .tab-item--desktop {
-        padding: var(--spacing-s) var(--spacing-l);
-    }
-}
-
-@media (max-width: 767px) {
-    .tabs--mobile {
-        margin-top: var(--spacing-s);
-    }
-
-    .tab-item--mobile {
-        padding: var(--spacing-s) var(--spacing-0);
-    }
-}

package/dist/css/experimental/collapsed-card.css

@@ -1,16 +0,0 @@
-@layer components {
-
-    /* Collapsed Card Component */
-    .collapsed-card {
-        @apply bg-white;
-    }
-
-    .collapsed-card-header {
-        @apply bg-gray-50 hover:bg-gray-100 transition-colors;
-    }
-
-    .collapsed-card-content {
-        @apply bg-white;
-    }
-
-}