zabi-components 5.0.17 → 5.0.18

package/dist/zabi-components.css

@@ -74,20 +74,20 @@
     --text-5xl--line-height: 1;
     --text-6xl: 3.75rem;
     --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-tight: -0.025em;
     --tracking-normal: 0em;
     --leading-relaxed: 1.625;
-    --radius-sm: 0.25rem;
+    --radius-xs: 0.125rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-3xl: 1.5rem;
-    --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
-    --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
-    --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
@@ -106,23 +106,11 @@
     --color-brand-800: #3f4fc0;
     --color-brand-900: #2f3c99;
     --color-brand-950: #1f2866;
-    --color-citron-300: #d5e184;
-    --color-citron-400: #c7d460;
-    --color-citron-500: #bbbe64;
-    --color-citron-600: #a3a852;
-    --color-citron-700: #848a43;
-    --color-pine-600: #0a513a;
-    --color-pine-700: #084532;
-    --color-pine-800: #063a2a;
-    --color-pine-900: #04231a;
     --color-iris-50: #f4f4fa;
     --color-iris-100: #e9e9f7;
     --color-iris-200: #d6d6f0;
     --color-iris-300: #bdbde6;
     --color-iris-500: #6969B3;
-    --color-iris-600: #58589e;
-    --color-iris-700: #474788;
-    --color-iris-800: #38386f;
     --color-iris-900: #2a2a56;
     --color-base-50: oklch(98.5% 0 0);
     --color-base-100: oklch(97% 0 0);
@@ -143,6 +131,7 @@
     --color-card-hover: var(--color-base-100);
     --color-card-active: var(--color-base-100);
     --color-card-elevated: #fff;
+    --color-overlay: rgba(0, 0, 0, 0.5);
     --color-input: var(--color-base-200);
     --color-input-hover: var(--color-base-100);
     --color-input-focus: var(--color-base-100);
@@ -185,18 +174,19 @@
     --color-neutral: var(--color-base-600);
     --color-info: #58589e;
     --color-info-text: var(--color-info);
-    --color-action-primary: #3f4fc0;
-    --color-action-primary-hover: #2f3c99;
-    --color-action-primary-active: #6e84fa;
-    --color-action-primary-disabled: #abc4ff;
-    --color-action-primary-subtle: #edf2fb;
-    --color-action-primary-subtle-hover: #dfe7fb;
-    --color-action-secondary: var(--color-base-600);
-    --color-action-secondary-hover: var(--color-base-700);
-    --color-action-secondary-active: var(--color-base-800);
-    --color-action-secondary-disabled: var(--color-base-300);
-    --color-action-secondary-subtle: var(--color-base-100);
-    --color-action-secondary-subtle-hover: var(--color-base-200);
+    --color-action-primary: var(--color-brand-950);
+    --color-action-primary-hover: var(--color-brand-900);
+    --color-action-primary-active: var(--color-brand-400);
+    --color-action-primary-disabled: var(--color-brand-500);
+    --color-action-primary-subtle: var(--color-brand-100);
+    --color-action-primary-subtle-hover: var(--color-brand-200);
+    --color-action-primary-text: var(--color-brand-50);
+    --color-action-secondary: var(--color-brand-200);
+    --color-action-secondary-hover: var(--color-brand-100);
+    --color-action-secondary-active: var(--color-brand-400);
+    --color-action-secondary-disabled: var(--color-brand-500);
+    --color-action-secondary-subtle: var(--color-brand-600);
+    --color-action-secondary-subtle-hover: var(--color-brand-700);
     --color-action-danger: oklch(57.7% 0.245 27.325);
     --color-action-danger-hover: oklch(50.5% 0.213 27.518);
     --color-action-danger-active: oklch(44.4% 0.177 26.899);
@@ -432,9 +422,6 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
-  .top-6 {
-    top: calc(var(--spacing) * 6);
-  }
   .top-8 {
     top: calc(var(--spacing) * 8);
   }
@@ -465,9 +452,6 @@
   .left-0\.5 {
     left: calc(var(--spacing) * 0.5);
   }
-  .left-6 {
-    left: calc(var(--spacing) * 6);
-  }
   .z-10 {
     z-index: 10;
   }
@@ -510,12 +494,18 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
   .mt-12 {
     margin-top: calc(var(--spacing) * 12);
   }
+  .mt-16 {
+    margin-top: calc(var(--spacing) * 16);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -819,6 +809,9 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .space-y-0 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -833,6 +826,13 @@
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-1\.5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -868,13 +868,6 @@
       margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-16 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -919,6 +912,9 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
   .rounded-t-3xl {
     border-top-left-radius: var(--radius-3xl);
     border-top-right-radius: var(--radius-3xl);
@@ -959,9 +955,16 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
   .border-\[var\(--color-success\)\] {
     border-color: var(--color-success);
   }
+  .border-action-primary {
+    border-color: var(--color-action-primary);
+  }
   .border-base-200 {
     border-color: var(--color-base-200);
   }
@@ -1043,12 +1046,26 @@
   .bg-action-primary {
     background-color: var(--color-action-primary);
   }
+  .bg-action-primary-subtle {
+    background-color: var(--color-action-primary-subtle);
+  }
   .bg-action-primary-subtle-hover {
     background-color: var(--color-action-primary-subtle-hover);
   }
+  .bg-action-secondary {
+    background-color: var(--color-action-secondary);
+  }
   .bg-background {
     background-color: var(--color-background);
   }
+  .bg-background\/95 {
+    background-color: color-mix(in srgb, theme(colors.neutral.100) 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        background-color: color-mix(in oklab, var(--color-background) 95%, transparent);
+      }
+    }
+  }
   .bg-base-50 {
     background-color: var(--color-base-50);
   }
@@ -1132,17 +1149,12 @@
   .bg-neutral {
     background-color: var(--color-neutral);
   }
+  .bg-overlay {
+    background-color: var(--color-overlay);
+  }
   .bg-primary {
     background-color: var(--color-primary);
   }
-  .bg-primary\/10 {
-    background-color: color-mix(in srgb, theme(colors.brand.600) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      & {
-        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
-      }
-    }
-  }
   .bg-purple-600 {
     background-color: var(--color-purple-600);
   }
@@ -1249,11 +1261,14 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .py-16 {
-    padding-block: calc(var(--spacing) * 16);
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+  .py-24 {
+    padding-block: calc(var(--spacing) * 24);
   }
-  .py-20 {
-    padding-block: calc(var(--spacing) * 20);
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
   }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
@@ -1276,9 +1291,6 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
-  .pl-14 {
-    padding-left: calc(var(--spacing) * 14);
-  }
   .text-center {
     text-align: center;
   }
@@ -1340,6 +1352,10 @@
     --tw-leading: calc(var(--spacing) * 8);
     line-height: calc(var(--spacing) * 8);
   }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -1376,12 +1392,19 @@
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
   }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
   .text-nowrap {
     text-wrap: nowrap;
   }
   .whitespace-pre {
     white-space: pre;
   }
+  .text-action-primary {
+    color: var(--color-action-primary);
+  }
   .text-base-50 {
     color: var(--color-base-50);
   }
@@ -1412,6 +1435,9 @@
   .text-body {
     color: var(--color-body);
   }
+  .text-brand-600 {
+    color: var(--color-brand-600);
+  }
   .text-brand-700 {
     color: var(--color-brand-700);
   }
@@ -1430,6 +1456,14 @@
   .text-description {
     color: var(--color-description);
   }
+  .text-description\/60 {
+    color: color-mix(in srgb, theme(colors.neutral.600) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        color: color-mix(in oklab, var(--color-description) 60%, transparent);
+      }
+    }
+  }
   .text-description\/80 {
     color: color-mix(in srgb, theme(colors.neutral.600) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1474,9 +1508,6 @@
   .text-primary {
     color: var(--color-primary);
   }
-  .text-red-500 {
-    color: var(--color-red-500);
-  }
   .text-red-800 {
     color: var(--color-red-800);
   }
@@ -1504,22 +1535,30 @@
   .underline {
     text-decoration-line: underline;
   }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
   .opacity-0 {
     opacity: 0%;
   }
   .opacity-50 {
     opacity: 50%;
   }
-  .opacity-75 {
-    opacity: 75%;
-  }
   .opacity-100 {
     opacity: 100%;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 1px 2px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1540,6 +1579,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur {
+    --tw-backdrop-blur: blur(8px);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1668,6 +1711,20 @@
       }
     }
   }
+  .hover\:bg-action-secondary {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-action-secondary);
+      }
+    }
+  }
+  .hover\:bg-action-secondary-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-action-secondary-hover);
+      }
+    }
+  }
   .hover\:bg-base-50 {
     &:hover {
       @media (hover: hover) {
@@ -1703,13 +1760,6 @@
       }
     }
   }
-  .hover\:bg-brand-200 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-brand-200);
-      }
-    }
-  }
   .hover\:bg-card-hover {
     &:hover {
       @media (hover: hover) {
@@ -1745,6 +1795,13 @@
       }
     }
   }
+  .hover\:text-action-primary {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-action-primary);
+      }
+    }
+  }
   .hover\:text-base-600 {
     &:hover {
       @media (hover: hover) {
@@ -1780,6 +1837,13 @@
       }
     }
   }
+  .hover\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
   .hover\:shadow-lg {
     &:hover {
       @media (hover: hover) {
@@ -1812,6 +1876,18 @@
       }
     }
   }
+  .focus\:not-sr-only {
+    &:focus {
+      position: static;
+      width: auto;
+      height: auto;
+      padding: 0;
+      margin: 0;
+      overflow: visible;
+      clip-path: none;
+      white-space: normal;
+    }
+  }
   .focus\:border-blue-500 {
     &:focus {
       border-color: var(--color-blue-500);
@@ -1964,6 +2040,11 @@
       background-color: var(--color-action-primary-active);
     }
   }
+  .active\:bg-action-secondary-active {
+    &:active {
+      background-color: var(--color-action-secondary-active);
+    }
+  }
   .active\:bg-base-200 {
     &:active {
       background-color: var(--color-base-200);
@@ -1979,11 +2060,6 @@
       background-color: var(--color-blue-800);
     }
   }
-  .active\:bg-brand-300 {
-    &:active {
-      background-color: var(--color-brand-300);
-    }
-  }
   .active\:bg-green-800 {
     &:active {
       background-color: var(--color-green-800);
@@ -1999,6 +2075,16 @@
       background-color: var(--color-red-800);
     }
   }
+  .active\:text-action-primary {
+    &:active {
+      color: var(--color-action-primary);
+    }
+  }
+  .active\:text-brand-700 {
+    &:active {
+      color: var(--color-brand-700);
+    }
+  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -2009,6 +2095,11 @@
       cursor: not-allowed;
     }
   }
+  .disabled\:border-disabled {
+    &:disabled {
+      border-color: var(--color-disabled);
+    }
+  }
   .disabled\:bg-base-200 {
     &:disabled {
       background-color: var(--color-base-200);
@@ -2054,11 +2145,26 @@
       color: var(--color-disabled);
     }
   }
+  .disabled\:no-underline {
+    &:disabled {
+      text-decoration-line: none;
+    }
+  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
     }
   }
+  .supports-\[backdrop-filter\]\:bg-background\/60 {
+    @supports (backdrop-filter: var(--tw)) {
+      background-color: color-mix(in srgb, theme(colors.neutral.100) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        & {
+          background-color: color-mix(in oklab, var(--color-background) 60%, transparent);
+        }
+      }
+    }
+  }
   .motion-reduce\:transition-none {
     @media (prefers-reduced-motion: reduce) {
       transition-property: none;
@@ -2079,6 +2185,29 @@
       padding-inline: calc(var(--spacing) * 6);
     }
   }
+  .sm\:py-32 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 32);
+    }
+  }
+  .sm\:text-2xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .sm\:text-4xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .sm\:text-6xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
+  }
   .md\:block {
     @media (width >= 48rem) {
       display: block;
@@ -2139,16 +2268,10 @@
       text-align: left;
     }
   }
-  .md\:text-2xl {
-    @media (width >= 48rem) {
-      font-size: var(--text-2xl);
-      line-height: var(--tw-leading, var(--text-2xl--line-height));
-    }
-  }
-  .md\:text-6xl {
+  .md\:text-7xl {
     @media (width >= 48rem) {
-      font-size: var(--text-6xl);
-      line-height: var(--tw-leading, var(--text-6xl--line-height));
+      font-size: var(--text-7xl);
+      line-height: var(--tw-leading, var(--text-7xl--line-height));
     }
   }
   .lg\:grid-cols-3 {
@@ -2235,6 +2358,7 @@ body {
   --color-card-hover: var(--color-base-300);
   --color-card-active: var(--color-base-400);
   --color-card-elevated: var(--color-base-200);
+  --color-overlay: rgba(0, 0, 0, 0.7);
   --color-input: var(--color-base-300);
   --color-input-hover: var(--color-base-400);
   --color-input-focus: var(--color-base-300);
@@ -2261,6 +2385,7 @@ body {
   --color-info-medium: #a3a3d8;
   --color-info-strong: #bdbde6;
   --color-info-text: var(--color-info);
+  --color-action-primary-text: var(--color-brand-50);
   --color-action-danger: oklch(63.7% 0.237 25.331);
   --color-action-danger-hover: oklch(57.7% 0.245 27.325);
   --color-action-danger-active: oklch(50.5% 0.213 27.518);
@@ -2324,6 +2449,9 @@ body {
 .hover\:bg-card-hover:hover {
   background-color: var(--color-card-hover);
 }
+.bg-overlay {
+  background-color: var(--color-overlay);
+}
 .bg-input {
   background-color: var(--color-input);
 }
@@ -2570,6 +2698,9 @@ body {
 .bg-action-primary-subtle:hover {
   background-color: var(--color-action-primary-subtle-hover);
 }
+.text-action-primary {
+  color: var(--color-action-primary-text);
+}
 .bg-action-secondary {
   background-color: var(--color-action-secondary);
 }
@@ -2817,6 +2948,42 @@ body {
   syntax: "*";
   inherits: false;
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -2890,6 +3057,15 @@ body {
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-scale-x: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zabi-components",
-  "version": "5.0.17",
+  "version": "5.0.18",
   "description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS v4, and 100% SSR-safe components",
   "type": "module",
   "main": "dist/index.js",
@@ -82,7 +82,7 @@
     "build:components": "svelte-package -o dist --input src/components",
     "build:lib-files": "mkdir -p dist/routes/lib && cp src/routes/lib/ssr-safe.ts dist/routes/lib/ && cp src/routes/lib/variant-utils.ts dist/routes/lib/",
     "build:lib": "npm run build:css && npm run build:components && npm run build:lib-files && npm run build:types && npm run build:css && node scripts/verify-build.js",
-    "build:css": "node scripts/build-css.js && node scripts/validate-theme.js && cp src/styles/colors.css dist/zabi-components-colors.css && node scripts/cleanup-css.js",
+    "build:css": "node scripts/build-css.js && node scripts/validate-theme.js && node scripts/cleanup-css.js",
     "build:types": "tsc --project tsconfig.lib.json",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",