@dust-tt/sparkle 0.2.451 → 0.2.453

package/dist/sparkle.css

@@ -2785,6 +2785,10 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.s-bg-background\/50 {
+  background-color: rgb(255 255 255 / 0.5);
+}
+
 .s-bg-background\/80 {
   background-color: rgb(255 255 255 / 0.8);
 }
@@ -4078,10 +4082,6 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.s-bg-white\/50 {
-  background-color: rgb(255 255 255 / 0.5);
-}
-
 .s-bg-white\/80 {
   background-color: rgb(255 255 255 / 0.8);
 }
@@ -4183,6 +4183,12 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.s-from-primary-600 {
+  --tw-gradient-from: #545D6C var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(84 93 108 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .s-from-purple-800 {
   --tw-gradient-from: #6b21a8 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(107 33 168 / 0) var(--tw-gradient-to-position);
@@ -4201,12 +4207,6 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.s-from-slate-600 {
-  --tw-gradient-from: #545D6C var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(84 93 108 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .s-from-stone-400 {
   --tw-gradient-from: #a8a29e var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(168 162 158 / 0) var(--tw-gradient-to-position);
@@ -4245,6 +4245,11 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), #220A04 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
+.s-via-primary-950 {
+  --tw-gradient-to: rgb(17 20 24 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #111418 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
 .s-via-primary-950\/80 {
   --tw-gradient-to: rgb(17 20 24 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), rgb(17 20 24 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
@@ -4265,11 +4270,6 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), #041728 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.s-via-slate-950 {
-  --tw-gradient-to: rgb(17 20 24 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #111418 var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
 .s-via-warning-950 {
   --tw-gradient-to: rgb(34 10 4 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #220A04 var(--tw-gradient-via-position), var(--tw-gradient-to);
@@ -4299,6 +4299,10 @@ select {
   --tw-gradient-to: #8C230D var(--tw-gradient-to-position);
 }
 
+.s-to-primary-600 {
+  --tw-gradient-to: #545D6C var(--tw-gradient-to-position);
+}
+
 .s-to-purple-800 {
   --tw-gradient-to: #6b21a8 var(--tw-gradient-to-position);
 }
@@ -4311,10 +4315,6 @@ select {
   --tw-gradient-to: #085092 var(--tw-gradient-to-position);
 }
 
-.s-to-slate-600 {
-  --tw-gradient-to: #545D6C var(--tw-gradient-to-position);
-}
-
 .s-to-stone-300 {
   --tw-gradient-to: #d6d3d1 var(--tw-gradient-to-position);
 }
@@ -8183,10 +8183,6 @@ select {
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
 
-:is(.s-dark .dark\:s-bg-slate-950\/50) {
-  background-color: rgb(17 20 24 / 0.5);
-}
-
 :is(.s-dark .dark\:s-bg-success-100-night) {
   --tw-bg-opacity: 1;
   background-color: rgb(10 54 26 / var(--tw-bg-opacity));
@@ -8486,6 +8482,12 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+:is(.s-dark .dark\:s-from-primary-600-night) {
+  --tw-gradient-from: #969CA5 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(150 156 165 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 :is(.s-dark .dark\:s-from-purple-800-night) {
   --tw-gradient-from: #e9d5ff var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(233 213 255 / 0) var(--tw-gradient-to-position);
@@ -8504,12 +8506,6 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-:is(.s-dark .dark\:s-from-slate-600-night) {
-  --tw-gradient-from: #969CA5 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(150 156 165 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 :is(.s-dark .dark\:s-from-transparent) {
   --tw-gradient-from: transparent var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
@@ -8547,6 +8543,11 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), rgb(247 247 247 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
+:is(.s-dark .dark\:s-via-primary-950-night) {
+  --tw-gradient-to: rgb(238 238 239 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #EEEEEF var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
 :is(.s-dark .dark\:s-via-purple-950-night) {
   --tw-gradient-to: rgb(250 245 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #faf5ff var(--tw-gradient-via-position), var(--tw-gradient-to);
@@ -8562,11 +8563,6 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), #E9F7FF var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-:is(.s-dark .dark\:s-via-slate-950-night) {
-  --tw-gradient-to: rgb(247 247 247 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #F7F7F7 var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
 :is(.s-dark .dark\:s-via-warning-950-night) {
   --tw-gradient-to: rgb(255 241 247 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #FFF1F7 var(--tw-gradient-via-position), var(--tw-gradient-to);
@@ -8592,6 +8588,10 @@ select {
   --tw-gradient-to: #FFC3DF var(--tw-gradient-to-position);
 }
 
+:is(.s-dark .dark\:s-to-primary-600-night) {
+  --tw-gradient-to: #969CA5 var(--tw-gradient-to-position);
+}
+
 :is(.s-dark .dark\:s-to-purple-800-night) {
   --tw-gradient-to: #e9d5ff var(--tw-gradient-to-position);
 }
@@ -8604,10 +8604,6 @@ select {
   --tw-gradient-to: #9FDBFF var(--tw-gradient-to-position);
 }
 
-:is(.s-dark .dark\:s-to-slate-600-night) {
-  --tw-gradient-to: #969CA5 var(--tw-gradient-to-position);
-}
-
 :is(.s-dark .dark\:s-to-transparent) {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
@@ -8641,6 +8637,10 @@ select {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:s-text-background-night\/50) {
+  color: rgb(0 0 0 / 0.5);
+}
+
 :is(.s-dark .dark\:s-text-blue-500-night) {
   --tw-text-opacity: 1;
   color: rgb(28 145 255 / var(--tw-text-opacity));
@@ -8951,6 +8951,11 @@ select {
   color: rgb(84 93 108 / var(--tw-text-opacity));
 }
 
+:is(.s-dark .dark\:s-text-primary-50) {
+  --tw-text-opacity: 1;
+  color: rgb(247 247 247 / var(--tw-text-opacity));
+}
+
 :is(.s-dark .dark\:s-text-primary-50-night) {
   --tw-text-opacity: 1;
   color: rgb(17 20 24 / var(--tw-text-opacity));
@@ -9095,11 +9100,6 @@ select {
   color: rgb(233 247 255 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .dark\:s-text-slate-50) {
-  --tw-text-opacity: 1;
-  color: rgb(247 247 247 / var(--tw-text-opacity));
-}
-
 :is(.s-dark .dark\:s-text-slate-500-night) {
   --tw-text-opacity: 1;
   color: rgb(123 129 141 / var(--tw-text-opacity));
@@ -9115,11 +9115,6 @@ select {
   color: rgb(238 238 239 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .dark\:s-text-slate-950) {
-  --tw-text-opacity: 1;
-  color: rgb(17 20 24 / var(--tw-text-opacity));
-}
-
 :is(.s-dark .dark\:s-text-slate-950-night) {
   --tw-text-opacity: 1;
   color: rgb(247 247 247 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.451",
+  "version": "0.2.453",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/AnimatedText.tsx

@@ -37,12 +37,12 @@ const animatedVariants: Record<AnimatedTextVariantType, string> = {
     "dark:s-from-amber-800-night dark:s-via-amber-950-night dark:s-via-50% dark:s-to-amber-800-night"
   ),
   white: cn(
-    "s-from-slate-600 s-via-slate-950 s-via-50% s-to-slate-600",
-    "dark:s-from-slate-600-night dark:s-via-slate-950-night dark:s-via-50% dark:s-to-slate-600-night"
+    "s-from-primary-600 s-via-primary-950 s-via-50% s-to-primary-600",
+    "dark:s-from-primary-600-night dark:s-via-primary-950-night dark:s-via-50% dark:s-to-primary-600-night"
   ),
   slate: cn(
-    "s-from-slate-600 s-via-slate-950 s-via-50% s-to-slate-600",
-    "dark:s-from-slate-600-night dark:s-via-slate-950-night dark:s-via-50% dark:s-to-slate-600-night"
+    "s-from-primary-600 s-via-primary-950 s-via-50% s-to-primary-600",
+    "dark:s-from-primary-600-night dark:s-via-primary-950-night dark:s-via-50% dark:s-to-primary-600-night"
   ),
   purple: cn(
     "s-from-purple-800 s-via-purple-950 s-via-50% s-to-purple-800",

package/src/components/AttachmentChip.tsx

@@ -1,33 +1,54 @@
+import { cva } from "class-variance-authority";
 import React from "react";
 
 import { cn } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
+import { LinkWrapper, LinkWrapperProps } from "./LinkWrapper";
 
-interface AttachmentChipProps {
+const attachmentChipVariants = cva(
+  cn(
+    "s-box-border s-inline-flex s-items-center s-gap-1.5 s-rounded-lg s-px-2 s-py-1 s-text-sm s-font-semibold",
+    "s-border-border s-bg-background",
+    "dark:s-border-border-night dark:s-bg-background-night",
+    "s-text-foreground dark:s-text-foreground-night",
+    "s-max-w-44"
+  )
+);
+
+interface AttachmentChipBaseProps {
   label: string;
   icon?: React.ComponentType;
   className?: string;
 }
 
+type AttachmentChipButtonProps = AttachmentChipBaseProps & {
+  href?: never;
+} & {
+  [K in keyof Omit<LinkWrapperProps, "children">]?: never;
+};
+
+type AttachmentChipLinkProps = AttachmentChipBaseProps &
+  Omit<LinkWrapperProps, "children">;
+
+type AttachmentChipProps = AttachmentChipButtonProps | AttachmentChipLinkProps;
+
 export function AttachmentChip({
   label,
   icon,
   className,
+  ...props
 }: AttachmentChipProps) {
-  return (
-    <div
-      className={cn(
-        "s-box-border s-inline-flex s-items-center s-gap-1.5 s-rounded-lg s-px-2 s-py-1 s-text-sm s-font-semibold",
-        "s-border-border s-bg-background",
-        "dark:s-border-border-night dark:s-bg-background-night",
-        "s-text-foreground dark:s-text-foreground-night",
-        "s-max-w-44",
-        className
-      )}
-    >
+  const chipContent = (
+    <div className={cn(attachmentChipVariants({}), className)}>
       <Icon visual={icon} size="xs" className="s-shrink-0" />
       <span className="s-pointer s-grow s-truncate">{label}</span>
     </div>
   );
+
+  return "href" in props && props.href ? (
+    <LinkWrapper {...props}>{chipContent}</LinkWrapper>
+  ) : (
+    chipContent
+  );
 }

package/src/components/DropzoneOverlay.tsx

@@ -21,7 +21,7 @@ export default function DropzoneOverlay({
     <Icon
       visual={ArrowUpOnSquareIcon}
       size="lg"
-      className="s-text-white dark:s-text-slate-950"
+      className="s-text-white dark:s-text-primary-950"
     />
   ),
 }: DropzoneOverlayProps) {

package/src/components/Hoverable.tsx

@@ -16,13 +16,13 @@ export type HoverableVariantType = (typeof HOVERABLE_VARIANTS)[number];
 const hoverableVariants: Record<HoverableVariantType, string> = {
   invisible: cn("hover:s-text-highlight-light", "active:s-text-highlight-dark"),
   primary: cn(
-    "s-font-medium",
+    "s-font-semibold",
     "s-text-foreground dark:s-text-foreground-night",
     "hover:s-text-highlight-light dark:hover:s-text-highlight-light-night",
     "active:s-text-highlight-dark dark:active:s-text-highlight-dark-night"
   ),
   highlight: cn(
-    "s-font-medium",
+    "s-font-semibold",
     "s-text-highlight dark:s-text-highlight-night",
     "hover:s-text-highlight-light dark:hover:s-text-highlight-light-night",
     "active:s-text-highlight-dark dark:active:s-text-highlight-dark-night"

package/src/components/Input.tsx

@@ -64,7 +64,7 @@ const messageVariant = cva("", {
 
 const inputStyleClasses = cva(
   cn(
-    "dark:s-text-slate-50",
+    "dark:s-text-primary-50",
     "s-text-sm s-rounded-xl s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
     "s-bg-muted-background dark:s-bg-muted-background-night",
     "s-border focus-visible:s-ring",

package/src/components/Notification.tsx

@@ -73,9 +73,7 @@ function NotificationContent({ type, title, description }: NotificationType) {
         <div
           className={cn(
             "s-text-md s-line-clamp-1 s-h-6 s-grow s-font-semibold",
-            type === "success"
-              ? "s-text-success-600 dark:s-text-success-400-night"
-              : "s-text-warning-500 dark:s-text-warning-500-night"
+            variantClassName({ type })
           )}
         >
           {title || type}

package/src/components/SplitButton.tsx

@@ -139,9 +139,9 @@ const SplitButton = React.forwardRef<HTMLButtonElement, SplitButtonProps>(
 );
 
 const flexSeparatorVariants: Record<ButtonVariantType, string> = {
-  primary: "s-bg-white/50 dark:s-bg-slate-950/50",
-  highlight: "s-bg-white/50 dark:s-bg-slate-950/50",
-  warning: "s-bg-white/50 dark:s-bg-slate-950/50",
+  primary: "s-bg-background/50 dark:s-text-background-night/50",
+  highlight: "s-bg-background/50 dark:s-text-background-night/50",
+  warning: "s-bg-background/50 dark:s-text-background-night/50",
   outline: "s-bg-separator dark:s-bg-separator-night",
   ghost: "s-bg-separator dark:s-bg-separator-night",
   "ghost-secondary": "s-bg-separator dark:s-bg-separator-night",

package/src/logo/platforms/Hubspot.tsx

@@ -2,17 +2,15 @@ import type { SVGProps } from "react";
 import * as React from "react";
 const SvgHubspot = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
     height="1em"
-    fill="none"
-    viewBox="0 0 24 24"
+    viewBox="6.20856283 .64498824 244.26943717 251.24701176"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <path fill="none" d="M0 0h150v150H0z" />
     <path
-      d="M109.46 49.94V32.18a13.69 13.69 0 0 0 7.89-12.33v-.41a13.69 13.69 0 0 0-13.68-13.68h-.41a13.68 13.68 0 0 0-13.68 13.68v.41a13.66 13.66 0 0 0 7.89 12.33v17.76a38.75 38.75 0 0 0-18.42 8.11L30.33 20.11a15.09 15.09 0 0 0 .55-3.84 15.41 15.41 0 1 0-15.44 15.38A15.25 15.25 0 0 0 23 29.59l48 37.33a38.86 38.86 0 0 0 .59 43.77L57 125.28a12.21 12.21 0 0 0-3.64-.59A12.66 12.66 0 1 0 66 137.35a12.23 12.23 0 0 0-.59-3.65l14.44-14.43a38.92 38.92 0 1 0 29.58-69.33m-6 58.42a20 20 0 1 1 20-20 20 20 0 0 1-20 20"
-      fill="#f4795b"
+      d="m191.385 85.694v-29.506a22.722 22.722 0 0 0 13.101-20.48v-.677c0-12.549-10.173-22.722-22.721-22.722h-.678c-12.549 0-22.722 10.173-22.722 22.722v.677a22.722 22.722 0 0 0 13.101 20.48v29.506a64.342 64.342 0 0 0 -30.594 13.47l-80.922-63.03c.577-2.083.878-4.225.912-6.375a25.6 25.6 0 1 0 -25.633 25.55 25.323 25.323 0 0 0 12.607-3.43l79.685 62.007c-14.65 22.131-14.258 50.974.987 72.7l-24.236 24.243c-1.96-.626-4-.959-6.057-.987-11.607.01-21.01 9.423-21.007 21.03.003 11.606 9.412 21.014 21.018 21.017 11.607.003 21.02-9.4 21.03-21.007a20.747 20.747 0 0 0 -.988-6.056l23.976-23.985c21.423 16.492 50.846 17.913 73.759 3.562 22.912-14.352 34.475-41.446 28.985-67.918-5.49-26.473-26.873-46.734-53.603-50.792m-9.938 97.044a33.17 33.17 0 1 1 0-66.316c17.85.625 32 15.272 32.01 33.134.008 17.86-14.127 32.522-31.977 33.165"
+      fill="#ff7a59"
     />
   </svg>
 );

package/src/logo/src/platforms/Hubspot.svg

@@ -1 +1,10 @@
-<svg id="dust_hubspot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><path fill="none" d="M0 0h150v150H0z"/><path d="M109.46 49.94V32.18a13.69 13.69 0 0 0 7.89-12.33v-.41a13.69 13.69 0 0 0-13.68-13.68h-.41a13.68 13.68 0 0 0-13.68 13.68v.41a13.66 13.66 0 0 0 7.89 12.33v17.76a38.75 38.75 0 0 0-18.42 8.11L30.33 20.11a15.09 15.09 0 0 0 .55-3.84 15.41 15.41 0 1 0-15.44 15.38A15.25 15.25 0 0 0 23 29.59l48 37.33a38.86 38.86 0 0 0 .59 43.77L57 125.28a12.21 12.21 0 0 0-3.64-.59A12.66 12.66 0 1 0 66 137.35a12.23 12.23 0 0 0-.59-3.65l14.44-14.43a38.92 38.92 0 1 0 29.58-69.33m-6 58.42a20 20 0 1 1 20-20 20 20 0 0 1-20 20" fill="#f4795b"/></svg>
+  <svg
+    height="1em"
+    viewBox="6.20856283 .64498824 244.26943717 251.24701176"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m191.385 85.694v-29.506a22.722 22.722 0 0 0 13.101-20.48v-.677c0-12.549-10.173-22.722-22.721-22.722h-.678c-12.549 0-22.722 10.173-22.722 22.722v.677a22.722 22.722 0 0 0 13.101 20.48v29.506a64.342 64.342 0 0 0 -30.594 13.47l-80.922-63.03c.577-2.083.878-4.225.912-6.375a25.6 25.6 0 1 0 -25.633 25.55 25.323 25.323 0 0 0 12.607-3.43l79.685 62.007c-14.65 22.131-14.258 50.974.987 72.7l-24.236 24.243c-1.96-.626-4-.959-6.057-.987-11.607.01-21.01 9.423-21.007 21.03.003 11.606 9.412 21.014 21.018 21.017 11.607.003 21.02-9.4 21.03-21.007a20.747 20.747 0 0 0 -.988-6.056l23.976-23.985c21.423 16.492 50.846 17.913 73.759 3.562 22.912-14.352 34.475-41.446 28.985-67.918-5.49-26.473-26.873-46.734-53.603-50.792m-9.938 97.044a33.17 33.17 0 1 1 0-66.316c17.85.625 32 15.272 32.01 33.134.008 17.86-14.127 32.522-31.977 33.165"
+      fill="#ff7a59"
+    />
+  </svg>

package/src/stories/Avatar.stories.tsx

@@ -47,9 +47,9 @@ export const AvatarExample = () => (
     <div>With emoji</div>
     <div className="s-flex s-gap-4">
       <Avatar size="xs" emoji="❤️" backgroundColor="s-bg-red-100" />
-      <Avatar size="sm" emoji="💀" backgroundColor="s-bg-slate-800" />
+      <Avatar size="sm" emoji="💀" backgroundColor="s-bg-gray-800" />
       <Avatar size="md" emoji="😂" backgroundColor="s-bg-amber-200" />
-      <Avatar size="lg" emoji="🧑‍🚀" backgroundColor="s-bg-slate-200" />
+      <Avatar size="lg" emoji="🧑‍🚀" backgroundColor="s-bg-gray-200" />
       <Avatar size="xl" emoji="👕" backgroundColor="s-bg-sky-200" />
       <Avatar size="xxl" emoji="👕" backgroundColor="s-bg-sky-200" />
     </div>

package/src/stories/Button.stories.tsx

@@ -105,7 +105,7 @@ const ButtonBySize = ({
 }) => (
   <>
     <Separator />
-    <h3 className="s-text-primary dark:s-text-slate-50">
+    <h3 className="s-text-primary dark:s-text-primary-50">
       {size?.toUpperCase()}
     </h3>
     <div className="s-flex s-items-center s-gap-4">

package/src/stories/Collapsible.stories.tsx

@@ -21,7 +21,7 @@ export const CollapsibleExample = () => (
     <Collapsible>
       <CollapsibleTrigger label="Click me" />
       <CollapsibleContent>
-        <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-slate-200">
+        <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-muted-background">
           Hello
         </div>
       </CollapsibleContent>
@@ -30,7 +30,7 @@ export const CollapsibleExample = () => (
     <Collapsible>
       <CollapsibleTrigger label="Click me" />
       <CollapsibleContent>
-        <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-slate-200">
+        <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-muted-background">
           Hello
         </div>
       </CollapsibleContent>
@@ -38,7 +38,7 @@ export const CollapsibleExample = () => (
     <Collapsible>
       <CollapsibleTrigger label="Click me" />
       <CollapsibleContent>
-        <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-slate-200">
+        <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-muted-background">
           Hello
         </div>
       </CollapsibleContent>
@@ -48,7 +48,7 @@ export const CollapsibleExample = () => (
         <Chip>Click me custom</Chip>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="mt-1 s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-slate-200">
+        <div className="mt-1 s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-muted-background">
           Anything goes for the Collapsible button
         </div>
       </CollapsibleContent>
@@ -59,7 +59,7 @@ export const CollapsibleExample = () => (
         rootProps={{ defaultOpen: true }}
         triggerProps={{ label: "Open by default" }}
         contentChildren={
-          <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-slate-200">
+          <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-muted-background">
             This collapsible is open by default
           </div>
         }

package/src/stories/Hover3D.stories.tsx

@@ -27,7 +27,7 @@ export const Hover3DExample = () => (
       </div>
       <div>
         <Hover3D
-          className="s-rounded-2xl s-bg-slate-200 s-p-3 s-shadow-xl"
+          className="s-rounded-2xl s-bg-muted-background s-p-3 s-shadow-xl"
           depth={-20}
         >
           <Div3D depth={50}>
@@ -36,7 +36,7 @@ export const Hover3DExample = () => (
         </Hover3D>
       </div>
       <div>
-        <Hover3D className="s-rounded-[24px] s-bg-slate-800 s-p-8">
+        <Hover3D className="s-rounded-[24px] s-bg-primary-800 s-p-8">
           <Div3D depth={60}>
             <Icon visual={DustLogoSquare} size="2xl" />
           </Div3D>
@@ -71,7 +71,7 @@ export const Hover3DExample = () => (
       </div>
       <div>
         <Hover3D
-          className="s-rounded-2xl s-bg-slate-200 s-p-3 s-shadow-xl"
+          className="s-rounded-2xl s-bg-muted-background s-p-3 s-shadow-xl"
           depth={-20}
           perspective={1000}
           fullscreenSensible
@@ -83,7 +83,7 @@ export const Hover3DExample = () => (
       </div>
       <div>
         <Hover3D
-          className="s-rounded-[24px] s-bg-slate-800 s-p-8"
+          className="s-rounded-[24px] s-bg-primary-800 s-p-8"
           perspective={1000}
           fullscreenSensible
         >

package/src/stories/Logo.stories.tsx

@@ -47,7 +47,7 @@ export const DustLogos = () => (
           DustLogoGray
         </div>
       </div>
-      <div className="s-bg-slate-800 s-p-6">
+      <div className="s-bg-primary-800 s-p-6">
         <DustLogoWhite className="s-h-8 s-w-32" />
         <div
           style={itemStyle as React.CSSProperties}
@@ -71,7 +71,7 @@ export const DustLogos = () => (
           DustLogoSquareGray
         </div>
       </div>
-      <div className="s-bg-slate-800 s-p-6">
+      <div className="s-bg-primary-800 s-p-6">
         <DustLogoSquareWhite className="s-h-16 s-w-16" />
         <div
           style={itemStyle as React.CSSProperties}

package/src/stories/Resizable.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 
 export const TooltipLongLabel = () => (
-  <div className="s-flex s-flex-col s-bg-slate-50 s-p-12">
+  <div className="s-flex s-flex-col s-bg-muted-background s-p-12">
     <div className="s-flex s-h-[600px] s-w-[800px] s-flex-col s-gap-16 s-p-12">
       <ResizableDemo />
     </div>
@@ -85,7 +85,7 @@ export function ResizableGrabDemo() {
       className="s-min-h-[200px] s-max-w-md s-rounded-lg s-border s-bg-white md:s-min-w-[450px]"
     >
       <ResizablePanel defaultSize={25}>
-        <div className="s-flex s-h-full s-items-center s-justify-center s-bg-slate-900 s-p-6 s-text-white">
+        <div className="s-flex s-h-full s-items-center s-justify-center s-bg-primary-900 s-p-6 s-text-white">
           <span className="s-font-semibold">Sidebar</span>
         </div>
       </ResizablePanel>