More color changes

front/components/assistant/conversation/input_bar/editor/useCustomEditor.tsx

@@ -216,7 +216,7 @@ const useCustomEditor = ({
     MentionWithPasteExtension.configure({
       HTMLAttributes: {
         class:
-          "min-w-0 px-0 py-0 border-none outline-none focus:outline-none focus:border-none ring-0 focus:ring-0 text-brand font-medium",
+          "min-w-0 px-0 py-0 border-none outline-none focus:outline-none focus:border-none ring-0 focus:ring-0 text-highlight-500 font-medium",
       },
       suggestion: makeGetAssistantSuggestions(),
     }),

sparkle/src/components/BarHeader.tsx

@@ -27,7 +27,7 @@ export function BarHeader({
   className = "",
 }: BarHeaderProps) {
   const titleClasses = classNames(
-    "s-text-element-800 dark:s-text-element-800-night",
+    "s-text-foreground dark:s-text-foreground-night",
     "s-text-base s-font-bold s-truncate s-grow"
   );
   const buttonBarClasses = "s-flex s-gap-1";
@@ -36,7 +36,7 @@ export function BarHeader({
     <div
       className={classNames(
         "s-fixed s-left-0 s-right-0 s-top-0 s-z-30 s-flex s-h-16 s-flex-row s-items-center s-gap-3 s-border-b s-px-4 s-backdrop-blur",
-        "s-border-border-dark/70 s-bg-white/80",
+        "s-border-border-dark/70 s-bg-background/80",
         "dark:s-border-border-dark-night/70 dark:s-bg-background-night/80",
         className
       )}

sparkle/src/components/Collapsible.tsx

@@ -12,13 +12,13 @@ const labelVariants = cva(
   {
     variants: {
       variant: {
-        primary: "s-text-action-600 dark:s-text-action-600-night",
+        primary: "s-text-highlight-600 dark:s-text-highlight-600-night",
         secondary: "s-text-foreground dark:s-text-foreground-night",
       },
       disabled: {
         true: "s-text-muted dark:s-text-muted-night",
         false:
-          "group-hover/col:s-text-action-500 dark:group-hover/col:s-text-action-500-night active:s-text-action-700 dark:active:s-text-action-700-night",
+          "group-hover/col:s-text-highlight-500 dark:group-hover/col:s-text-highlight-500-night active:s-text-highlight-700 dark:active:s-text-highlight-700-night",
       },
     },
     defaultVariants: {
@@ -37,7 +37,7 @@ const chevronVariants = cva("s-transition-transform s-duration-150", {
     disabled: {
       true: "s-text-muted dark:s-text-muted-night",
       false:
-        "group-hover/col:s-text-action-500 dark:group-hover/col:s-text-action-500-night active:s-text-action-700 dark:active:s-text-action-700-night",
+        "group-hover/col:s-text-highlight-500 dark:group-hover/col:s-text-highlight-500-night active:s-text-highlight-700 dark:active:s-text-highlight-700-night",
     },
   },
   defaultVariants: {

sparkle/src/components/ContentMessage.tsx

@@ -27,15 +27,15 @@ const contentMessageVariants = cva(
   {
     variants: {
       variant: {
-        emerald: "s-bg-emerald-100 dark:s-bg-emerald-100-night",
-        amber: "s-bg-amber-100 dark:s-bg-amber-100-night",
+        emerald: "s-bg-green-100 dark:s-bg-green-100-night",
+        amber: "s-bg-golden-100 dark:s-bg-golden-100-night",
         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-action-100 dark:s-bg-action-100-night",
+        action: "s-bg-highlight-100 dark:s-bg-highlight-100-night",
         red: "s-bg-red-100 dark:s-bg-red-100-night",
       },
       size: {
@@ -54,14 +54,14 @@ const contentMessageVariants = cva(
 const iconVariants = cva("s-shrink-0", {
   variants: {
     variant: {
-      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-slate-800 dark:s-text-slate-800-night",
+      emerald: "s-text-green-800 dark:s-text-green-800-night",
+      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-action-800 dark:s-text-action-800-night",
+      action: "s-text-highlight-800 dark:s-text-highlight-800-night",
       red: "s-text-red-800 dark:s-text-red-800-night",
     },
   },
@@ -70,14 +70,14 @@ const iconVariants = cva("s-shrink-0", {
 const titleVariants = cva("s-text-sm s-font-semibold", {
   variants: {
     variant: {
-      emerald: "s-text-emerald-800 dark:s-text-emerald-800-night",
-      amber: "s-text-amber-800 dark:s-text-amber-800-night",
+      emerald: "s-text-green-800 dark:s-text-green-800-night",
+      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-action-800 dark:s-text-action-800-night",
+      action: "s-text-highlight-800 dark:s-text-highlight-800-night",
       red: "s-text-red-800 dark:s-text-red-800-night",
     },
   },
@@ -86,14 +86,14 @@ const titleVariants = cva("s-text-sm s-font-semibold", {
 const textVariants = cva("s-text-sm", {
   variants: {
     variant: {
-      emerald: "s-text-emerald-950 dark:s-text-emerald-950-night",
-      amber: "s-text-amber-950 dark:s-text-amber-950-night",
+      emerald: "s-text-green-950 dark:s-text-green-950-night",
+      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-action-950 dark:s-text-action-950-night",
+      action: "s-text-highlight-950 dark:s-text-highlight-950-night",
       red: "s-text-red-950 dark:s-text-red-950-night",
     },
   },

sparkle/src/components/Counter.tsx

@@ -47,7 +47,7 @@ const counterVariants = cva(
       {
         isInButton: false,
         variant: "outline",
-        className: "s-bg-slate-200 s-text-slate-900",
+        className: "s-bg-primary-200 s-text-primary-900",
       },
       {
         isInButton: false,
@@ -74,13 +74,13 @@ const counterVariants = cva(
         isInButton: true,
         variant: "outline",
         className:
-          "s-bg-slate-200 dark:s-bg-slate-700 s-text-primary-700 dark:s-text-primary-300 s-font-semibold",
+          "s-bg-primary-200 dark:s-bg-primary-700 s-text-primary-700 dark:s-text-primary-300 s-font-semibold",
       },
       {
         isInButton: true,
         variant: ["ghost", "ghost-secondary"],
         className:
-          "s-bg-slate-200 dark:s-bg-slate-700 s-text-primary-700 dark:s-text-primary-300 s-font-semibold",
+          "s-bg-primary-200 dark:s-bg-primary-700 s-text-primary-700 dark:s-text-primary-300 s-font-semibold",
       },
     ],
     defaultVariants: {

sparkle/src/components/DropzoneOverlay.tsx

@@ -49,8 +49,8 @@ export default function DropzoneOverlay({
     <div
       className={cn(
         "s-absolute s-inset-0 s-z-50 s-flex s-h-full s-w-full s-flex-col s-items-center s-justify-center s-gap-0",
-        "dark:s-bg-slate-90/80 s-bg-white/80",
-        "s-text-element-800 dark:s-text-element-800-night"
+        "s-bg-background/80 dark:s-bg-background-night/80",
+        "s-text-foreground dark:s-text-foreground-night"
       )}
       onMouseLeave={() => {
         lottieRef.current?.setDirection(-1);
@@ -75,7 +75,9 @@ export default function DropzoneOverlay({
         </div>
       </div>
       <div className="s-text-xl s-font-bold">{title}</div>
-      <div className="s-font-base s-text-base">{description}</div>
+      <div className="s-font-base s-text-base s-text-muted-foreground dark:s-text-muted-foreground-night">
+        {description}
+      </div>
     </div>
   );
 }

sparkle/src/components/EmptyCTA.tsx

@@ -14,7 +14,8 @@ const EmptyCTA = React.forwardRef<HTMLDivElement, EmptyCTAProps>(
       ref={ref}
       className={cn(
         "s-flex s-w-full s-flex-col s-items-center s-justify-center s-gap-2 s-rounded-xl s-p-12",
-        "s-bg-structure-100 dark:s-bg-structure-100-night",
+        "s-border s-border-border s-bg-muted-background",
+        "dark:s-border-border-night dark:s-bg-muted-background-night",
         className
       )}
       {...props}

sparkle/src/components/IconButton.tsx

@@ -18,40 +18,40 @@ type IconButtonProps = {
 
 const styleVariants: Record<ButtonVariantType, string> = {
   primary: cn(
-    "s-text-action-500 dark:s-text-action-500-night",
-    "hover:s-text-action-400 dark:hover:s-text-action-500-night",
-    "active:s-text-action-600 dark:active:s-text-action-600-night",
-    "s-text-element-500 dark:s-text-element-500-night"
+    "s-text-highlight-500 dark:s-text-highlight-500-night",
+    "hover:s-text-highlight-400 dark:hover:s-text-highlight-500-night",
+    "active:s-text-highlight-600 dark:active:s-text-highlight-600-night",
+    "s-text-primary-500 dark:s-text-primary-500-night"
   ),
   warning: cn(
     "s-text-warning-500 dark:s-text-warning-500-night",
     "hover:s-text-warning-400 dark:hover:s-text-warning-500-night",
     "active:s-text-warning-600 dark:active:s-text-warning-600-night",
-    "s-text-element-500 dark:s-text-element-500-night"
+    "s-text-primary-500 dark:s-text-primary-500-night"
   ),
   highlight: cn(
     "s-text-foreground dark:s-text-foreground-night",
-    "hover:s-text-action-400 dark:hover:s-text-action-500-night",
-    "active:s-text-action-600 dark:active:s-text-action-600-night",
-    "s-text-element-500 dark:s-text-element-500-night"
+    "hover:s-text-highlight-400 dark:hover:s-text-highlight-500-night",
+    "active:s-text-highlight-600 dark:active:s-text-highlight-600-night",
+    "s-text-primary-500 dark:s-text-primary-500-night"
   ),
   outline: cn(
-    "s-text-element-700 dark:s-text-element-700-night",
-    "hover:s-text-action-400 dark:hover:s-text-action-500-night",
-    "active:s-text-action-600 dark:active:s-text-action-600-night",
-    "s-text-element-500 dark:s-text-element-500-night"
+    "s-text-primary-700 dark:s-text-primary-700-night",
+    "hover:s-text-highlight-400 dark:hover:s-text-highlight-500-night",
+    "active:s-text-highlight-600 dark:active:s-text-highlight-600-night",
+    "s-text-primary-500 dark:s-text-primary-500-night"
   ),
   ghost: cn(
-    "s-text-white dark:s-text-slate-950",
-    "hover:s-text-slate-100 dark:hover:s-text-slate-100-night",
-    "active:s-text-slate-200 dark:active:s-text-slate-200-night",
-    "s-text-white/50 dark:s-text-slate-950/50"
+    "s-text-white dark:s-text-primary-950",
+    "hover:s-text-primary-100 dark:hover:s-text-primary-100-night",
+    "active:s-text-primary-200 dark:active:s-text-primary-200-night",
+    "s-text-white/50 dark:s-text-primary-950/50"
   ),
   "ghost-secondary": cn(
     "s-text-white",
-    "hover:s-text-slate-100 dark:hover:s-text-slate-100-night",
-    "active:s-text-slate-200 dark:active:s-text-slate-200-night",
-    "s-text-white/50 dark:s-text-slate-950/50"
+    "hover:s-text-primary-100 dark:hover:s-text-primary-100-night",
+    "active:s-text-primary-200 dark:active:s-text-primary-200-night",
+    "s-text-white/50 dark:s-text-primary-950/50"
   ),
 };
 
@@ -62,7 +62,7 @@ const iconButtonVariants = cva(
       variant: styleVariants,
       disabled: {
         true: cn(
-          "s-text-element-500 dark:s-text-element-500-night",
+          "s-text-primary-500 dark:s-text-primary-500-night",
           "s-cursor-default hover:s-scale-100"
         ),
       },

sparkle/src/components/IconToggleButton.tsx

@@ -24,23 +24,29 @@ const baseClasses =
 const iconClasses = {
   secondary: {
     idle: cn("s-text-foreground", "dark:s-text-foreground-night"),
-    selected: cn("s-text-action-500", "dark:s-text-action-500-night"),
-    hover: cn("hover:s-text-action-400", "dark:hover:s-text-action-400-night"),
+    selected: cn("s-text-highlight-500", "dark:s-text-highlight-500-night"),
+    hover: cn(
+      "hover:s-text-highlight-400",
+      "dark:hover:s-text-highlight-400-night"
+    ),
     active: cn(
-      "active:s-text-action-600",
-      "dark:active:s-text-action-600-night"
+      "active:s-text-highlight-600",
+      "dark:active:s-text-highlight-600-night"
     ),
-    disabled: cn("s-text-element-500", "dark:s-text-element-500-night"),
+    disabled: cn("s-text-primary-500", "dark:s-text-primary-500-night"),
   },
   tertiary: {
-    idle: cn("s-text-element-600", "dark:s-text-element-600-night"),
-    selected: cn("s-text-action-500", "dark:s-text-action-500-night"),
-    hover: cn("hover:s-text-action-400", "dark:hover:s-text-action-400-night"),
+    idle: cn("s-text-primary-600", "dark:s-text-primary-600-night"),
+    selected: cn("s-text-highlight-500", "dark:s-text-highlight-500-night"),
+    hover: cn(
+      "hover:s-text-highlight-400",
+      "dark:hover:s-text-highlight-400-night"
+    ),
     active: cn(
-      "active:s-text-action-600",
-      "dark:active:s-text-action-600-night"
+      "active:s-text-highlight-600",
+      "dark:active:s-text-highlight-600-night"
     ),
-    disabled: cn("s-text-element-500", "dark:s-text-element-500-night"),
+    disabled: cn("s-text-primary-500", "dark:s-text-primary-500-night"),
   },
 };
 

sparkle/src/components/NavigationList.tsx

@@ -20,17 +20,16 @@ const NavigationListItemStyles = cva(
     "data-[disabled]:s-pointer-events-none",
     "data-[disabled]:s-text-muted-foreground dark:data-[disabled]:s-text-muted-foreground-night",
     "hover:s-text-foreground dark:hover:s-text-foreground-night",
-    "hover:s-bg-structure-150 dark:hover:s-bg-structure-150-night"
+    "hover:s-bg-primary-100 dark:hover:s-bg-primary-100-night"
   ),
   {
     variants: {
       state: {
-        active:
-          "active:s-bg-structure-200 dark:active:s-bg-structure-200-night",
+        active: "active:s-bg-primary-150 dark:active:s-bg-primary-150-night",
         selected: cn(
           "s-text-foreground dark:s-text-foreground-night",
           "s-font-medium",
-          "s-bg-structure-150 dark:s-bg-structure-150-night"
+          "s-bg-primary-100 dark:s-bg-primary-100-night"
         ),
         unselected:
           "s-text-muted-foreground dark:s-text-muted-foreground-night",

sparkle/src/components/Notification.tsx

@@ -30,16 +30,16 @@ function NotificationContent({ type, title, description }: NotificationType) {
     <div
       className={cn(
         "s-pointer-events-auto s-flex s-max-w-[400px] s-flex-row s-items-center s-gap-2 s-rounded-xl s-border",
-        "s-border-structure-100 dark:s-border-structure-100-night",
-        "s-bg-structure-0 dark:s-bg-structure-0-night",
+        "s-border-border dark:s-border-border-night",
+        "s-bg-background dark:s-bg-background-night",
         "s-p-4 s-shadow-xl"
       )}
     >
       {type === "success" ? (
         <Icon
           size="lg"
           visual={CheckCircleIcon}
-          className="s-pt-0.5 s-text-success-500 dark:s-text-success-500-night"
+          className="s-pt-0.5 s-text-success-600 dark:s-text-success-400-night"
           aria-hidden="true"
         />
       ) : (
@@ -55,7 +55,7 @@ function NotificationContent({ type, title, description }: NotificationType) {
           className={cn(
             "s-text-md s-line-clamp-1 s-h-6 s-grow s-font-semibold",
             type === "success"
-              ? "s-text-success-500 dark:s-text-success-500-night"
+              ? "s-text-success-600 dark:s-text-success-400-night"
               : "s-text-warning-500 dark:s-text-warning-500-night"
           )}
         >
@@ -64,7 +64,7 @@ function NotificationContent({ type, title, description }: NotificationType) {
         {description && (
           <div
             className={cn(
-              "s-text-element-700 dark:s-text-element-700-night",
+              "s-text-muted-foreground dark:s-text-muted-foreground-night",
               "s-line-clamp-3 s-pr-2 s-text-sm s-font-normal"
             )}
           >

sparkle/src/components/PriceTable.tsx

@@ -126,7 +126,7 @@ export function PriceTable({
         }}
         className={classNames(
           "s-flex s-h-full s-flex-col s-overflow-hidden s-shadow-md",
-          "s-bg-white dark:s-bg-structure-50-night"
+          "s-bg-background dark:s-bg-muted-background-night"
         )}
       >
         {childrenWithProps}
@@ -142,9 +142,9 @@ const iconTable = {
 };
 
 const iconColorTable = {
-  check: "s-text-emerald-500",
-  dash: "s-text-amber-500",
-  xmark: "s-text-red-500",
+  check: "s-text-green-500",
+  dash: "s-text-golden-500",
+  xmark: "s-text-rose-500",
 };
 
 interface PriceTableItemProps {

sparkle/src/components/SearchInput.tsx

@@ -80,7 +80,7 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
               className={cn(
                 "s-px-2",
                 disabled
-                  ? "s-text-element-600 dark:s-text-element-600-night"
+                  ? "s-text-muted-foreground dark:s-text-muted-foreground-night"
                   : "s-text-foreground dark:s-text-foreground-night"
               )}
             >