@dust-tt/sparkle 0.2.454 → 0.2.455

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.454",
+  "version": "0.2.455",
   "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

@@ -4,30 +4,75 @@ import React, { ReactNode } from "react";
 import { cn } from "@sparkle/lib/utils";
 
 const ANIMATED_TEXT_VARIANTS = [
+  "primary",
   "muted",
+  "white",
   "highlight",
+  "success",
+  "warning",
+  "info",
+  "green",
+  "blue",
+  "rose",
+  "golden",
+  //to be removed
   "emerald",
   "amber",
   "slate",
   "purple",
-  "warning",
   "sky",
   "pink",
   "red",
-  "white",
 ] as const;
 
 type AnimatedTextVariantType = (typeof ANIMATED_TEXT_VARIANTS)[number];
 
 const animatedVariants: Record<AnimatedTextVariantType, string> = {
+  primary: cn(
+    "s-from-primary-800 s-via-primary-950 s-via-50% s-to-primary-800",
+    "dark:s-from-primary-800-night dark:s-via-primary-950-night dark:s-via-50% dark:s-to-primary-800-night"
+  ),
   muted: cn(
     "s-from-transparent s-via-primary-950/80 s-via-50% s-to-transparent",
     "dark:s-from-transparent dark:s-via-primary-50/80 dark:s-via-50% dark:s-to-transparent"
   ),
+  white: cn(
+    "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"
+  ),
   highlight: cn(
     "s-from-highlight s-via-highlight-800 s-via-50% s-to-highlight",
     "dark:s-from-highlight-night dark:s-via-highlight-800-night dark:s-via-50% dark:s-to-highlight-night"
   ),
+  warning: cn(
+    "s-from-warning-800 s-via-warning-950 s-via-50% s-to-warning-800",
+    "dark:s-from-warning-800-night dark:s-via-warning-950-night dark:s-via-50% dark:s-to-warning-800-night"
+  ),
+  success: cn(
+    "s-from-success-800 s-via-success-950 s-via-50% s-to-success-800",
+    "dark:s-from-success-800-night dark:s-via-success-950-night dark:s-via-50% dark:s-to-success-800-night"
+  ),
+  info: cn(
+    "s-from-info-800 s-via-info-950 s-via-50% s-to-info-800",
+    "dark:s-from-info-800-night dark:s-via-info-950-night dark:s-via-50% dark:s-to-info-800-night"
+  ),
+  green: cn(
+    "s-from-emerald-800 s-via-emerald-950 s-via-50% s-to-emerald-800",
+    "dark:s-from-emerald-800-night dark:s-via-emerald-950-night dark:s-via-50% dark:s-to-emerald-800-night"
+  ),
+  blue: cn(
+    "s-from-sky-800 s-via-sky-950 s-via-50% s-to-sky-800",
+    "dark:s-from-sky-800-night dark:s-via-sky-950-night dark:s-via-50% dark:s-to-sky-800-night"
+  ),
+  rose: cn(
+    "s-from-rose-800 s-via-rose-950 s-via-50% s-to-rose-800",
+    "dark:s-from-rose-800-night dark:s-via-rose-950-night dark:s-via-50% dark:s-to-rose-800-night"
+  ),
+  golden: cn(
+    "s-from-golden-800 s-via-golden-950 s-via-50% s-to-golden-800",
+    "dark:s-from-golden-800-night dark:s-via-golden-950-night dark:s-via-50% dark:s-to-golden-800-night"
+  ),
+  // To be removed
   emerald: cn(
     "s-from-emerald-800 s-via-emerald-950 s-via-50% s-to-emerald-800",
     "dark:s-from-emerald-800-night dark:s-via-emerald-950-night dark:s-via-50% dark:s-to-emerald-800-night"
@@ -36,9 +81,13 @@ const animatedVariants: Record<AnimatedTextVariantType, string> = {
     "s-from-amber-800 s-via-amber-950 s-via-50% s-to-amber-800",
     "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-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"
+  red: cn(
+    "s-from-red-800 s-via-red-950 s-via-50% s-to-red-800",
+    "dark:s-from-red-800-night dark:s-via-red-950-night dark:s-via-50% dark:s-to-red-800-night"
+  ),
+  sky: cn(
+    "s-from-sky-800 s-via-sky-950 s-via-50% s-to-sky-800",
+    "dark:s-from-sky-800-night dark:s-via-sky-950-night dark:s-via-50% dark:s-to-sky-800-night"
   ),
   slate: cn(
     "s-from-primary-600 s-via-primary-950 s-via-50% s-to-primary-600",
@@ -48,22 +97,10 @@ const animatedVariants: Record<AnimatedTextVariantType, string> = {
     "s-from-purple-800 s-via-purple-950 s-via-50% s-to-purple-800",
     "dark:s-from-purple-800-night dark:s-via-purple-950-night dark:s-via-50% dark:s-to-purple-800-night"
   ),
-  warning: cn(
-    "s-from-warning-800 s-via-warning-950 s-via-50% s-to-warning-800",
-    "dark:s-from-warning-800-night dark:s-via-warning-950-night dark:s-via-50% dark:s-to-warning-800-night"
-  ),
-  sky: cn(
-    "s-from-sky-800 s-via-sky-950 s-via-50% s-to-sky-800",
-    "dark:s-from-sky-800-night dark:s-via-sky-950-night dark:s-via-50% dark:s-to-sky-800-night"
-  ),
   pink: cn(
     "s-from-pink-800 s-via-pink-950 s-via-50% s-to-pink-800",
     "dark:s-from-pink-800-night dark:s-via-pink-950-night dark:s-via-50% dark:s-to-pink-800-night"
   ),
-  red: cn(
-    "s-from-red-800 s-via-red-950 s-via-50% s-to-red-800",
-    "dark:s-from-red-800-night dark:s-via-red-950-night dark:s-via-50% dark:s-to-red-800-night"
-  ),
 };
 
 const animVariants = cva(
@@ -79,14 +116,22 @@ const animVariants = cva(
 );
 
 const animatedTextVariants: Record<AnimatedTextVariantType, string> = {
+  primary: "s-text-primary-800 dark:s-text-primary-800-night",
+  white: "s-text-muted-foreground dark:s-text-muted-foreground-night",
   muted: "s-text-muted-foreground dark:s-text-muted-foreground-night",
   highlight: "s-text-highlight dark:s-text-highlight-night",
+  success: "s-text-success-800 dark:s-text-success-800-night",
+  info: "s-text-info-800 dark:s-text-info-800-night",
+  warning: "s-text-warning-800 dark:s-text-warning-800-night",
+  green: "s-text-emerald-800 dark:s-text-emerald-800-night",
+  blue: "s-text-sky-800 dark:s-text-sky-800-night",
+  rose: "s-text-rose-800 dark:s-text-rose-800-night",
+  golden: "s-text-golden-800 dark:s-text-rose-golden-night",
+  //To be removed
   emerald: "s-text-emerald-800 dark:s-text-emerald-800-night",
   amber: "s-text-amber-800 dark:s-text-amber-800-night",
   slate: "s-text-muted-foreground dark:s-text-muted-foreground-night",
-  white: "s-text-muted-foreground dark:s-text-muted-foreground-night",
   purple: "s-text-purple-800 dark:s-text-purple-800-night",
-  warning: "s-text-warning-800 dark:s-text-warning-800-night",
   sky: "s-text-sky-800 dark:s-text-sky-800-night",
   pink: "s-text-pink-800 dark:s-text-pink-800-night",
   red: "s-text-red-800 dark:s-text-red-800-night",

package/src/components/Avatar.tsx

@@ -106,22 +106,14 @@ const getColor = (name: string) => {
     hash = name.charCodeAt(i) + ((hash << 5) - hash);
   }
   const colors = [
+    "s-bg-blue-300",
+    "s-bg-violet-300",
+    "s-bg-pink-300",
     "s-bg-red-300",
     "s-bg-orange-300",
-    "s-bg-amber-300",
-    "s-bg-yellow-300",
+    "s-bg-golden-300",
     "s-bg-lime-300",
-    "s-bg-green-300",
     "s-bg-emerald-300",
-    "s-bg-teal-300",
-    "s-bg-cyan-300",
-    "s-bg-sky-300",
-    "s-bg-blue-300",
-    "s-bg-indigo-300",
-    "s-bg-violet-300",
-    "s-bg-purple-300",
-    "s-bg-fuchsia-300",
-    "s-bg-rose-300",
   ];
   return colors[Math.abs(hash) % colors.length];
 };
@@ -135,22 +127,14 @@ const getTextVariant = (name: string) => {
     hash = name.charCodeAt(i) + ((hash << 5) - hash);
   }
   const txtColors = [
+    "s-text-blue-700",
+    "s-text-violet-700",
+    "s-text-pink-700",
     "s-text-red-700",
     "s-text-orange-700",
-    "s-text-amber-700",
-    "s-text-yellow-700",
+    "s-text-golden-700",
     "s-text-lime-700",
-    "s-text-green-700",
     "s-text-emerald-700",
-    "s-text-teal-700",
-    "s-text-cyan-700",
-    "s-text-sky-700",
-    "s-text-blue-700",
-    "s-text-indigo-700",
-    "s-text-violet-700",
-    "s-text-purple-700",
-    "s-text-fuchsia-700",
-    "s-text-rose-700",
   ];
   return txtColors[Math.abs(hash) % txtColors.length];
 };

package/src/components/Chip.tsx

@@ -16,15 +16,23 @@ export const CHIP_SIZES = ["xs", "sm"] as const;
 type ChipSizeType = (typeof CHIP_SIZES)[number];
 
 export const CHIP_COLORS = [
+  "primary",
+  "white",
+  "success",
+  "warning",
+  "info",
+  "highlight",
+  "green",
+  "blue",
+  "rose",
+  "golden",
   "emerald",
   "amber",
   "slate",
-  "purple",
-  "warning",
   "sky",
   "pink",
   "red",
-  "white",
+  "purple",
 ] as const;
 
 type ChipColorType = (typeof CHIP_COLORS)[number];
@@ -35,6 +43,55 @@ const sizeVariants: Record<ChipSizeType, string> = {
 };
 
 const backgroundVariants: Record<ChipColorType, string> = {
+  primary: cn(
+    "s-bg-muted-background s-border-border",
+    "dark:s-bg-muted-background-night dark:s-border-border-night"
+  ),
+  white: cn(
+    "s-bg-background s-border-border",
+    "dark:s-bg-muted-background-night dark:s-border-border-night"
+  ),
+  highlight: cn(
+    "s-bg-highlight-100 s-border-highlight-200",
+    "dark:s-bg-highlight-100-night dark:s-border-highlight-200-night"
+  ),
+  success: cn(
+    "s-bg-success-100 s-border-success-200",
+    "dark:s-bg-success-100-night dark:s-border-success-200-night"
+  ),
+  info: cn(
+    "s-bg-info-100 s-border-info-200",
+    "dark:s-bg-info-100-night dark:s-border-info-200-night"
+  ),
+  warning: cn(
+    "s-bg-warning-100 s-border-warning-200",
+    "dark:s-bg-warning-100-night dark:s-border-warning-200-night"
+  ),
+  green: cn(
+    "s-bg-green-100 s-border-green-200",
+    "dark:s-bg-green-100-night dark:s-border-green-200-night"
+  ),
+  blue: cn(
+    "s-bg-sky-100 s-border-sky-200",
+    "dark:s-bg-sky-100-night dark:s-border-sky-200-night"
+  ),
+  rose: cn(
+    "s-bg-rose-100 s-border-rose-200",
+    "dark:s-bg-rose-100-night dark:s-border-rose-200-night"
+  ),
+  golden: cn(
+    "s-bg-golden-100 s-border-golden-200",
+    "dark:s-bg-golden-100-night dark:s-border-golden-200-night"
+  ),
+  // To be removed
+  slate: cn(
+    "s-bg-muted-background s-border-border",
+    "dark:s-bg-muted-background-night dark:s-border-border-night"
+  ),
+  red: cn(
+    "s-bg-red-100 s-border-red-200",
+    "dark:s-bg-red-100-night dark:s-border-red-200-night"
+  ),
   emerald: cn(
     "s-bg-emerald-100 s-border-emerald-200",
     "dark:s-bg-emerald-100-night dark:s-border-emerald-200-night"
@@ -43,22 +100,10 @@ const backgroundVariants: Record<ChipColorType, string> = {
     "s-bg-amber-100 s-border-amber-200",
     "dark:s-bg-amber-100-night dark:s-border-amber-200-night"
   ),
-  slate: cn(
-    "s-bg-muted-background s-border-border",
-    "dark:s-bg-muted-background-night dark:s-border-border-night"
-  ),
   purple: cn(
     "s-bg-purple-100 s-border-purple-200",
     "dark:s-bg-purple-100-night dark:s-border-purple-200-night"
   ),
-  white: cn(
-    "s-bg-background s-border-border",
-    "dark:s-bg-muted-background-night dark:s-border-border-night"
-  ),
-  warning: cn(
-    "s-bg-warning-100 s-border-warning-200",
-    "dark:s-bg-warning-100-night dark:s-border-warning-200-night"
-  ),
   sky: cn(
     "s-bg-sky-100 s-border-sky-200",
     "dark:s-bg-sky-100-night dark:s-border-sky-200-night"
@@ -67,22 +112,27 @@ const backgroundVariants: Record<ChipColorType, string> = {
     "s-bg-pink-100 s-border-pink-200",
     "dark:s-bg-pink-100-night dark:s-border-pink-200-night"
   ),
-  red: cn(
-    "s-bg-red-100 s-border-red-200",
-    "dark:s-bg-red-100-night dark:s-border-red-200-night"
-  ),
 };
 
 const textVariants: Record<ChipColorType, string> = {
+  primary: "s-text-primary-900 dark:s-text-primary-900-night",
+  white: "s-text-foreground dark:s-text-foreground-night",
+  highlight: "s-text-highlight-900 dark:s-text-highlight-900-night",
+  success: "s-text-success-900 dark:s-text-success-900-night",
+  warning: "s-text-warning-900 dark:s-text-warning-900-night",
+  info: "s-text-info-900 dark:s-text-info-900-night",
+  green: "s-text-green-900 dark:s-text-green-900-night",
+  blue: "s-text-sky-900 dark:s-text-sky-900-night",
+  rose: "s-text-rose-900 dark:s-text-rose-900-night",
+  golden: "s-text-golden-900 dark:s-text-golden-900-night",
+  // To be removed
   emerald: "s-text-emerald-900 dark:s-text-emerald-900-night",
   amber: "s-text-amber-900 dark:s-text-amber-900-night",
   slate: "s-text-foreground dark:s-text-foreground-night",
-  purple: "s-text-purple-900 dark:s-text-purple-900-night",
-  warning: "s-text-warning-900 dark:s-text-warning-900-night",
   sky: "s-text-sky-900 dark:s-text-sky-900-night",
   pink: "s-text-pink-900 dark:s-text-pink-900-night",
   red: "s-text-red-900 dark:s-text-red-900-night",
-  white: "s-text-foreground dark:s-text-foreground-night",
+  purple: "s-text-purple-900 dark:s-text-purple-900-night",
 };
 
 const chipVariants = cva("s-inline-flex s-box-border s-items-center", {

package/src/components/ColorPicker.tsx

@@ -24,7 +24,7 @@ export function ColorPicker<T extends string>({
   onColorSelect,
 }: ColorPickerProps<T>) {
   return (
-    <div className="s-grid-rows-20 w-auto s-grid s-grid-cols-8 s-gap-1.5 s-rounded s-p-2 s-shadow-lg">
+    <div className="s-grid-rows-20 w-auto s-grid s-grid-cols-8 s-gap-1.5 s-rounded s-p-2">
       {colors.map((color) => {
         return (
           <ColorSwatch

package/src/components/ContentMessage.tsx

@@ -9,11 +9,20 @@ const CONTENT_MESSAGE_VARIANTS = [
   "amber",
   "slate",
   "purple",
-  "warning",
   "sky",
   "pink",
   "action",
   "red",
+  //New variants
+  "primary",
+  "warning",
+  "success",
+  "highlight",
+  "info",
+  "green",
+  "blue",
+  "rose",
+  "golden",
 ] as const;
 
 type ContentMessageVariantType = (typeof CONTENT_MESSAGE_VARIANTS)[number];
@@ -23,20 +32,38 @@ const CONTENT_MESSAGE_SIZES = ["sm", "md", "lg"] as const;
 type ContentMessageSizeType = (typeof CONTENT_MESSAGE_SIZES)[number];
 
 const contentMessageVariants = cva(
-  "s-flex s-flex-col s-gap-1 s-rounded-2xl s-p-4",
+  "s-flex s-flex-col s-gap-1 s-rounded-2xl s-p-4 s-border",
   {
     variants: {
       variant: {
-        emerald: "s-bg-green-100 dark:s-bg-green-100-night",
-        amber: "s-bg-golden-100 dark:s-bg-golden-100-night",
+        emerald:
+          "s-bg-green-100 dark:s-bg-green-100-night s-border-transparent",
+        amber:
+          "s-bg-golden-100 dark:s-bg-golden-100-night s-border-transparent",
         slate:
           "s-bg-muted-background dark:s-bg-muted-background-night s-border s-border-border dark:s-border-border-night",
-        purple: "s-bg-purple-100 dark:s-bg-purple-100-night",
-        warning: "s-bg-warning-100 dark:s-bg-warning-100-night",
-        sky: "s-bg-sky-100 dark:s-bg-sky-100-night",
-        pink: "s-bg-pink-100 dark:s-bg-pink-100-night",
-        action: "s-bg-highlight-100 dark:s-bg-highlight-100-night",
-        red: "s-bg-red-100 dark:s-bg-red-100-night",
+        purple:
+          "s-bg-purple-100 dark:s-bg-purple-100-night s-border-transparent",
+        sky: "s-bg-sky-100 dark:s-bg-sky-100-night s-border-transparent",
+        pink: "s-bg-pink-100 dark:s-bg-pink-100-night s-border-transparent",
+        action:
+          "s-bg-highlight-100 dark:s-bg-highlight-100-night s-border-transparent",
+        red: "s-bg-red-100 dark:s-bg-red-100-night s-border-transparent",
+        // tbr
+        primary:
+          "s-bg-muted-background dark:s-bg-muted-background-night s-border-border dark:s-border-border-night",
+        success:
+          "s-bg-success-100 dark:s-bg-success-100-night s-border-transparent",
+        warning:
+          "s-bg-warning-100 dark:s-bg-warning-100-night s-border-transparent",
+        highlight:
+          "s-bg-highlight-100 dark:s-bg-highlight-100-night s-border-transparent",
+        info: "s-bg-info-100 dark:s-bg-info-100-night s-border-transparent",
+        green: "s-bg-green-100 dark:s-bg-green-100-night s-border-transparent",
+        blue: "s-bg-blue-100 dark:s-bg-blue-100-night s-border-transparent",
+        rose: "s-bg-rose-100 dark:s-bg-rose-100-night s-border-transparent",
+        golden:
+          "s-bg-golden-100 dark:s-bg-golden-100-night s-border-transparent",
       },
       size: {
         lg: "",
@@ -45,7 +72,7 @@ const contentMessageVariants = cva(
       },
     },
     defaultVariants: {
-      variant: "amber",
+      variant: "info",
       size: "md",
     },
   }
@@ -58,11 +85,20 @@ const iconVariants = cva("s-shrink-0", {
       amber: "s-text-golden-800 dark:s-text-golden-800-night",
       slate: "s-text-primary-800 dark:s-text-primary-800-night",
       purple: "s-text-purple-800 dark:s-text-purple-800-night",
-      warning: "s-text-warning-800 dark:s-text-warning-800-night",
       sky: "s-text-sky-800 dark:s-text-sky-800-night",
       pink: "s-text-pink-800 dark:s-text-pink-800-night",
       action: "s-text-highlight-800 dark:s-text-highlight-800-night",
       red: "s-text-red-800 dark:s-text-red-800-night",
+      // tbr
+      primary: "s-text-primary-800 dark:s-text-primary-800-night",
+      warning: "s-text-warning-800 dark:s-text-warning-800-night",
+      success: "s-text-success-800 dark:s-text-success-800-night",
+      highlight: "s-text-highlight-800 dark:s-text-highlight-800-night",
+      info: "s-text-info-800 dark:s-text-info-800-night",
+      green: "s-text-green-800 dark:s-text-green-800-night",
+      blue: "s-text-blue-800 dark:s-text-blue-800-night",
+      rose: "s-text-rose-800 dark:s-text-rose-800-night",
+      golden: "s-text-golden-800 dark:s-text-golden-800-night",
     },
   },
 });
@@ -74,11 +110,20 @@ const titleVariants = cva("s-text-sm s-font-semibold", {
       amber: "s-text-golden-800 dark:s-text-golden-800-night",
       slate: "s-text-foreground dark:s-text-foreground-night",
       purple: "s-text-purple-800 dark:s-text-purple-800-night",
-      warning: "s-text-warning-800 dark:s-text-warning-800-night",
       sky: "s-text-sky-800 dark:s-text-sky-800-night",
       pink: "s-text-pink-800 dark:s-text-pink-800-night",
       action: "s-text-highlight-800 dark:s-text-highlight-800-night",
       red: "s-text-red-800 dark:s-text-red-800-night",
+      // tbr
+      primary: "s-text-foreground dark:s-text-foreground-night",
+      warning: "s-text-warning-800 dark:s-text-warning-800-night",
+      success: "s-text-success-800 dark:s-text-success-800-night",
+      highlight: "s-text-highlight-800 dark:s-text-highlight-800-night",
+      info: "s-text-info-800 dark:s-text-info-800-night",
+      green: "s-text-green-800 dark:s-text-green-800-night",
+      blue: "s-text-blue-800 dark:s-text-blue-800-night",
+      rose: "s-text-rose-800 dark:s-text-rose-800-night",
+      golden: "s-text-golden-800 dark:s-text-golden-800-night",
     },
   },
 });
@@ -90,11 +135,20 @@ const textVariants = cva("s-text-sm", {
       amber: "s-text-golden-950 dark:s-text-golden-950-night",
       slate: "s-text-muted-foreground dark:s-text-muted-foreground-night",
       purple: "s-text-purple-950 dark:s-text-purple-950-night",
-      warning: "s-text-warning-950 dark:s-text-warning-950-night",
       sky: "s-text-sky-950 dark:s-text-sky-950-night",
       pink: "s-text-pink-950 dark:s-text-pink-950-night",
       action: "s-text-highlight-950 dark:s-text-highlight-950-night",
       red: "s-text-red-950 dark:s-text-red-950-night",
+      // tbr
+      primary: "s-text-muted-foreground dark:s-text-muted-foreground-night",
+      warning: "s-text-warning-950 dark:s-text-warning-950-night",
+      success: "s-text-success-950 dark:s-text-success-950-night",
+      highlight: "s-text-highlight-950 dark:s-text-highlight-950-night",
+      info: "s-text-info-950 dark:s-text-info-950-night",
+      green: "s-text-green-950 dark:s-text-green-950-night",
+      blue: "s-text-blue-950 dark:s-text-blue-950-night",
+      rose: "s-text-rose-950 dark:s-text-rose-950-night",
+      golden: "s-text-golden-950 dark:s-text-golden-950-night",
     },
   },
 });

package/src/components/PriceTable.tsx

@@ -24,14 +24,6 @@ const colorTable = {
   emerald: "s-bg-brand-tea-green",
 };
 
-// const colorTable = {
-//   pink: "s-bg-brand-support-rose",
-//   amber: "s-bg-brand-support-golden ",
-//   sky: "s-bg-brand-support-blue",
-//   blue: "s-bg-brand-support-blue",
-//   emerald: "s-bg-brand-support-green",
-// };
-
 const textColorTable = {
   pink: " s-text-brand-red-rose",
   amber: "s-text-brand-orange-golden",

package/src/stories/Avatar.stories.tsx

@@ -48,10 +48,10 @@ export const AvatarExample = () => (
     <div className="s-flex s-gap-4">
       <Avatar size="xs" emoji="❤️" backgroundColor="s-bg-red-100" />
       <Avatar size="sm" emoji="💀" backgroundColor="s-bg-gray-800" />
-      <Avatar size="md" emoji="😂" backgroundColor="s-bg-amber-200" />
+      <Avatar size="md" emoji="😂" backgroundColor="s-bg-info-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" />
+      <Avatar size="xl" emoji="👕" backgroundColor="s-bg-blue-200" />
+      <Avatar size="xxl" emoji="👕" backgroundColor="s-bg-blue-200" />
     </div>
     <div className="s-flex s-gap-4">
       <Avatar size="sm" name="Eleanor Wright" />

package/src/stories/ColorPalette.stories.tsx

@@ -18,6 +18,16 @@ const semanticColorFamilies = [
   "warning",
   "info",
 ] as const;
+const extendedColorFamilies = [
+  "blue",
+  "violet",
+  "pink",
+  "red",
+  "orange",
+  "golden",
+  "lime",
+  "emerald",
+] as const;
 
 // Shades to display for each color
 const shades = [
@@ -34,6 +44,21 @@ const shades = [
   "950",
 ] as const;
 
+const semanticShades = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950",
+  "muted",
+] as const;
+
 const ColorSwatch = ({
   colorClass,
   label,
@@ -63,9 +88,15 @@ const ColorSwatch = ({
   </div>
 );
 
-export const ColorPalette = () => {
+export const UIColorPalette = () => {
   return (
     <div className="s-flex s-flex-col s-gap-8">
+      <div className="s-flex s-flex-col s-gap-2">
+        <h2 className="s-text-xl s-font-semibold">UI Color Palette</h2>
+        <p className="s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          Colors to use in the UI for all direct color references.
+        </p>
+      </div>
       {colorFamilies.map((family) => (
         <div key={family} className="s-flex s-flex-col s-gap-4">
           <h3 className="s-text-lg s-font-semibold s-capitalize">{family}</h3>
@@ -88,11 +119,17 @@ export const ColorPalette = () => {
 export const SemanticColorPalette = () => {
   return (
     <div className="s-flex s-flex-col s-gap-8">
+      <div className="s-flex s-flex-col s-gap-2">
+        <h2 className="s-text-xl s-font-semibold">Semantic Color Palette</h2>
+        <p className="s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          Colors to use in the UI for all functional elements.
+        </p>
+      </div>
       {semanticColorFamilies.map((family) => (
         <div key={family} className="s-flex s-flex-col s-gap-4">
           <h3 className="s-text-lg s-font-semibold s-capitalize">{family}</h3>
           <div className="s-flex s-flex-wrap s-gap-4">
-            {shades.map((shade) => (
+            {semanticShades.map((shade) => (
               <div key={shade}>
                 <ColorSwatch
                   colorClass={`s-bg-${family}-${shade} dark:s-bg-${family}-${shade}-night`}
@@ -153,6 +190,16 @@ const brandColorFamilies = [
 export const BrandColorPalette = () => {
   return (
     <div className="s-flex s-flex-col s-gap-8">
+      <div className="s-flex s-flex-col s-gap-2">
+        <h2 className="s-text-xl s-font-semibold">Brand Color Palette</h2>
+        <p className="s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          Colors to use in Marketing / Brand situations:
+        </p>
+        <ul className="s-ml-4 s-list-disc s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          <li>Block colors on the website</li>
+          <li>Communication in the product</li>
+        </ul>
+      </div>
       {brandColorFamilies.map((family) => (
         <div key={family.name} className="s-flex s-flex-col s-gap-4">
           <h3 className="s-text-lg s-font-semibold s-capitalize">
@@ -173,3 +220,37 @@ export const BrandColorPalette = () => {
     </div>
   );
 };
+
+export const ExtendedColorPalette = () => {
+  return (
+    <div className="s-flex s-flex-col s-gap-8">
+      <div className="s-flex s-flex-col s-gap-2">
+        <h2 className="s-text-xl s-font-semibold">Extended Color Palette</h2>
+        <p className="s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          These colors are available for product-specific use cases where
+          semantic colors might not be appropriate. Use them when you need to
+          create visual distinctions, such as:
+        </p>
+        <ul className="s-ml-4 s-list-disc s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          <li>Avatar background colors</li>
+          <li>Data visualization</li>
+        </ul>
+      </div>
+      {extendedColorFamilies.map((family) => (
+        <div key={family} className="s-flex s-flex-col s-gap-4">
+          <h3 className="s-text-lg s-font-semibold s-capitalize">{family}</h3>
+          <div className="s-flex s-flex-wrap s-gap-4">
+            {shades.map((shade) => (
+              <div key={shade}>
+                <ColorSwatch
+                  colorClass={`s-bg-${family}-${shade} dark:s-bg-${family}-${shade}-night`}
+                  label={`${family}-${shade}`}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};