Moving to the new colors (#8392)

* Moving to the new colors * patch * adding hite bg on outline * fixing config * fix: lint/format --------- Co-authored-by: Jules <[email protected]>
dust-tt · Nov 2, 2024 · 063ea91 · 063ea91
1 parent 651a9a3
commit 063ea91
Show file tree

Hide file tree

Showing 16 changed files with 144 additions and 130 deletions.
diff --git a/front/components/ContentNodeTree.tsx b/front/components/ContentNodeTree.tsx
@@ -151,7 +151,7 @@ function ContentNodeTreeChildren({
 
   if (isResourcesError) {
     return (
-      <div className="text-warning text-sm">
+      <div className="text-sm text-warning">
         Failed to retrieve permissions likely due to a revoked authorization.
       </div>
     );

diff --git a/front/components/assistant/conversation/input_bar/InputBar.tsx b/front/components/assistant/conversation/input_bar/InputBar.tsx
@@ -228,7 +228,7 @@ export function AssistantInputBar({
         <div className="flex justify-center px-4 pb-4">
           <Button
             className="mt-4"
-            variant="white"
+            variant="ghost"
             label={isProcessing ? "Stopping generation..." : "Stop generation"}
             icon={StopIcon}
             onClick={handleStopGeneration}

diff --git a/front/components/poke/shadcn/ui/data_table_faceted_filter.tsx b/front/components/poke/shadcn/ui/data_table_faceted_filter.tsx
@@ -104,9 +104,9 @@ export function PokeDataTableFacetedFilter<TData, TValue>({
                   >
                     <div
                       className={cn(
-                        "border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                         isSelected
-                          ? "bg-primary text-primary-foreground"
+                          ? "text-primary-foreground bg-primary"
                           : "[&_svg]:invisible"
                       )}
                     >

diff --git a/front/components/poke/shadcn/ui/dialog.tsx b/front/components/poke/shadcn/ui/dialog.tsx
@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="focus:ring-ring data-[state=open]:bg-accent absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="data-[state=open]:bg-accent absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:text-muted-foreground">
         <XIcon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

diff --git a/front/components/poke/shadcn/ui/select.tsx b/front/components/poke/shadcn/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "border-input focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "border-input flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}

diff --git a/front/pages/poke/[wId]/index.tsx b/front/pages/poke/[wId]/index.tsx
@@ -382,17 +382,17 @@ function DeleteWorkspaceModal({
         <div className="flex flex-col gap-2 pt-4">
           <div>
             {dataSources.length > 0 && (
-              <p className="text-warning mb-4 text-sm">
+              <p className="mb-4 text-sm text-warning">
                 Delete data sources before deleting the workspace.
               </p>
             )}
             {subscription.plan.code !== FREE_NO_PLAN_CODE && (
-              <p className="text-warning mb-4 text-sm">
+              <p className="mb-4 text-sm text-warning">
                 Downgrade workspace before deleting its data.
               </p>
             )}
             {isLoading ? (
-              <p className="text-warning mb-4 text-sm">
+              <p className="mb-4 text-sm text-warning">
                 Deleting workspace data...
                 <Spinner />
               </p>

diff --git a/front/tailwind.config.js b/front/tailwind.config.js
@@ -150,91 +150,109 @@ module.exports = {
         fadeout: "fadeout 500ms ease-out",
       },
       colors: {
-        separator: {
-          DEFAULT: colors.slate[200],
-          dark: colors.slate[800],
+        brand: {
+          DEFAULT: colors.emerald[500],
+          dark: colors.emerald[500],
         },
         border: {
-          DEFAULT: colors.slate[100],
-          dark: colors.slate[900],
-        },
-        "border-dark": {
-          DEFAULT: colors.slate[200],
-          dark: colors.slate[800],
+          DEFAULT: { DEFAULT: colors.slate[100], dark: colors.slate[900] },
+          dark: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
+          darker: { DEFAULT: colors.slate[400], dark: colors.slate[6800] },
+          focus: {
+            DEFAULT: colors.slate[400],
+            dark: colors.slate[600],
+          },
+          warning: {
+            DEFAULT: colors.red[200],
+            dark: colors.red[800],
+          },
         },
-        background: {
-          DEFAULT: colors.white,
-          dark: colors.slate[950],
+        separator: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
+        ring: {
+          DEFAULT: colors.blue[300],
+          dark: colors.slate[700],
+          warning: {
+            DEFAULT: colors.red[300],
+            dark: colors.red[700],
+          },
         },
+        background: { DEFAULT: colors.white, dark: colors.slate[950] },
         foreground: {
           DEFAULT: colors.slate[950],
           dark: colors.white,
+          warning: {
+            DEFAULT: colors.red[500],
+            dark: colors.red[500],
+          },
         },
         muted: {
-          DEFAULT: colors.slate[50],
-          dark: colors.slate[900],
-        },
-        "muted-foreground": {
-          DEFAULT: colors.slate[500],
-          dark: colors.slate[500],
+          DEFAULT: { DEFAULT: colors.slate[100], dark: colors.slate[900] },
+          foreground: {
+            DEFAULT: colors.slate[500],
+            dark: colors.slate[500],
+          },
+          background: {
+            DEFAULT: colors.slate[100],
+            dark: colors.slate[900],
+          },
         },
         highlight: {
+          DEFAULT: colors.blue[500],
+          light: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
+          dark: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
+          muted: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
           950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
           900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
           800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
           700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
           600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
-          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
+          500: colors.blue[500],
           400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
           300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
           200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
           100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
           50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
         },
         primary: {
-          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
-          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
-          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
-          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
-          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
-          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
-          400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
-          300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
-          200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
-          100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
-          50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
-        },
-        brand: {
-          DEFAULT: colors.emerald[500],
-          dark: colors.emerald[500],
-        },
-        action: {
-          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
-          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
-          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
-          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
-          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
-          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
-          400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
-          200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
-          300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
-          100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
-          50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
+          DEFAULT: colors.slate[500],
+          light: { DEFAULT: colors.slate[700], dark: colors.slate[300] },
+          dark: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
+          muted: { DEFAULT: colors.slate[400], dark: colors.slate[600] },
+          950: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
+          900: { DEFAULT: colors.slate[900], dark: colors.slate[100] },
+          800: { DEFAULT: colors.slate[800], dark: colors.slate[200] },
+          700: { DEFAULT: colors.slate[700], dark: colors.slate[300] },
+          600: { DEFAULT: colors.slate[600], dark: colors.slate[400] },
+          500: { DEFAULT: colors.slate[500], dark: colors.slate[500] },
+          400: { DEFAULT: colors.slate[400], dark: colors.slate[600] },
+          300: { DEFAULT: colors.slate[300], dark: colors.slate[700] },
+          200: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
+          150: { DEFAULT: "#E9EFF5", dark: "#172033" },
+          100: { DEFAULT: colors.slate[100], dark: colors.slate[900] },
+          50: { DEFAULT: colors.slate[50], dark: colors.slate[950] },
         },
         warning: {
+          DEFAULT: colors.red[500],
+          light: { DEFAULT: colors.red[400], dark: colors.red[600] },
+          dark: { DEFAULT: colors.red[600], dark: colors.red[400] },
+          muted: { DEFAULT: colors.red[300], dark: colors.red[700] },
+          950: { DEFAULT: colors.red[950], dark: colors.red[50] },
+          900: { DEFAULT: colors.red[900], dark: colors.red[100] },
+          800: { DEFAULT: colors.red[800], dark: colors.red[200] },
+          700: { DEFAULT: colors.red[700], dark: colors.red[300] },
+          600: { DEFAULT: colors.red[600], dark: colors.red[400] },
           500: { DEFAULT: colors.red[500], dark: colors.red[500] },
           400: { DEFAULT: colors.red[400], dark: colors.red[600] },
           200: { DEFAULT: colors.red[200], dark: colors.red[800] },
           300: { DEFAULT: colors.red[300], dark: colors.red[700] },
           100: { DEFAULT: colors.red[100], dark: colors.red[900] },
-          600: { DEFAULT: colors.red[600], dark: colors.red[400] },
-          700: { DEFAULT: colors.red[700], dark: colors.red[300] },
-          800: { DEFAULT: colors.red[800], dark: colors.red[200] },
-          900: { DEFAULT: colors.red[900], dark: colors.red[100] },
-          950: { DEFAULT: colors.red[950], dark: colors.red[50] },
           50: { DEFAULT: colors.red[50], dark: colors.red[950] },
         },
         success: {
+          DEFAULT: colors.emerald[500],
+          light: { DEFAULT: colors.emerald[400], dark: colors.emerald[600] },
+          dark: { DEFAULT: colors.emerald[600], dark: colors.emerald[400] },
+          muted: { DEFAULT: colors.emerald[300], dark: colors.emerald[700] },
           500: { DEFAULT: colors.emerald[500], dark: colors.emerald[500] },
           400: { DEFAULT: colors.emerald[400], dark: colors.emerald[600] },
           200: { DEFAULT: colors.emerald[200], dark: colors.emerald[800] },
@@ -247,15 +265,30 @@ module.exports = {
           950: { DEFAULT: colors.emerald[950], dark: colors.emerald[50] },
           50: { DEFAULT: colors.emerald[50], dark: colors.emerald[950] },
         },
+        action: {
+          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
+          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
+          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
+          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
+          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
+          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
+          400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
+          300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
+          200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
+          100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
+          50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
+        },
         structure: {
           0: { DEFAULT: colors.white, dark: colors.black },
           50: { DEFAULT: colors.slate[50], dark: colors.slate[900] },
           100: { DEFAULT: colors.slate[100], dark: colors.slate[800] },
+          150: { DEFAULT: "#E9EFF5", dark: "#172033" },
           200: { DEFAULT: colors.slate[200], dark: colors.slate[700] },
           300: { DEFAULT: colors.slate[300], dark: colors.slate[600] },
         },
         element: {
-          900: { DEFAULT: colors.slate[900], dark: colors.slate[50] },
+          950: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
+          900: { DEFAULT: colors.slate[900], dark: colors.slate[100] },
           800: { DEFAULT: colors.slate[700], dark: colors.slate[200] },
           700: { DEFAULT: colors.slate[500], dark: colors.slate[300] },
           600: { DEFAULT: colors.slate[400], dark: colors.slate[400] },

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.290",
+  "version": "0.2.291",
   "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",

diff --git a/sparkle/src/components/Button.tsx b/sparkle/src/components/Button.tsx
@@ -19,7 +19,6 @@ const BUTTON_VARIANTS = [
   "warning",
   "outline",
   "ghost",
-  "white",
 ] as const;
 
 export type ButtonVariantType = (typeof BUTTON_VARIANTS)[number];
@@ -36,11 +35,9 @@ const styleVariants: Record<ButtonVariantType, string> = {
   warning:
     "s-bg-warning s-text-white hover:s-bg-warning-light active:s-bg-warning-dark disabled:s-bg-warning-muted",
   outline:
-    "s-border s-text-primary-dark s-border-border-dark hover:s-text-primary hover:s-bg-primary-100 hover:s-border-primary-200 active:s-bg-primary-300 disabled:s-text-primary-muted disabled:s-border-structure-100",
+    "s-border s-text-primary-dark s-bg-background s-border-border-dark hover:s-text-primary hover:s-bg-primary-150 hover:s-border-primary-150 active:s-bg-primary-300 disabled:s-text-primary-muted disabled:s-border-structure-100",
   ghost:
-    "s-border s-border-primary-200/0 s-text-primary-950 hover:s-bg-primary-100 hover:s-text-primary-900 active:s-bg-primary-200 hover:s-border-primary-200 disabled:s-text-primary-400",
-  white:
-    "s-bg-white s-text-primary-dark s-border s-border-border-dark hover:s-bg-primary-100 hover:s-border-primary-200 active:s-bg-primary-300 disabled:s-text-primary-muted",
+    "s-border s-border-primary-200/0 s-text-primary-950 hover:s-bg-primary-150 hover:s-text-primary-900 hover:s-border-primary-150 active:s-bg-primary-300 disabled:s-text-primary-400",
 };
 
 const sizeVariants: Record<ButtonSizeType, string> = {
@@ -69,14 +66,12 @@ const spinnerVariantsMap: Record<ButtonVariantType, SpinnerVariant> = {
   warning: "light",
   outline: "dark",
   ghost: "dark",
-  white: "light",
 };
 
 const spinnerVariantsMapIsLoading: Record<ButtonVariantType, SpinnerVariant> = {
   primary: "light",
   highlight: "light",
   warning: "light",
-  white: "light",
   outline: "slate400",
   ghost: "slate400",
 };

diff --git a/sparkle/src/components/IconButton.tsx b/sparkle/src/components/IconButton.tsx
@@ -42,11 +42,6 @@ const styleVariants: Record<ButtonVariantType, string> = {
     "hover:s-text-slate-100 hover:s-text-slate-100" +
     "active:s-text-slate-200 active:s-text-slate-200" +
     "s-text-white/50 s-text-white/50",
-  white:
-    "s-text-element-700 dark:s-text-element-700-dark" +
-    "hover:s-text-action-400 dark:hover:s-text-action-500-dark" +
-    "active:s-text-action-600 dark:active:s-text-action-600-dark" +
-    "s-text-element-500 dark:s-text-element-500-dark",
 };
 
 const iconButtonVariants = cva(

diff --git a/sparkle/src/components/NewDropdown.tsx b/sparkle/src/components/NewDropdown.tsx
@@ -23,7 +23,7 @@ export const menuStyleClasses = {
     {
       variants: {
         variant: {
-          default: "focus:s-text-primary-950 focus:s-bg-primary-100",
+          default: "focus:s-text-primary-950 focus:s-bg-primary-150",
           warning:
             "s-text-warning-500 hover:s-bg-warning-50 active:s-bg-warning-100",
         },

diff --git a/sparkle/src/components/Tabs.tsx b/sparkle/src/components/Tabs.tsx
@@ -7,14 +7,21 @@ import { cn } from "@sparkle/lib/utils";
 
 const Tabs = TabsPrimitive.Root;
 
+type TabsListProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.List
+> & {
+  isFullSize?: boolean;
+};
+
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
+  TabsListProps
+>(({ className, isFullSize = true, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
     className={cn(
       "s-inline-flex s-h-10 s-items-center s-gap-2 s-border-b s-border-separator",
+      isFullSize && "s-w-full",
       className
     )}
     {...props}

diff --git a/sparkle/src/stories/Button.stories.tsx b/sparkle/src/stories/Button.stories.tsx
@@ -13,13 +13,12 @@ export default meta;
 const IconButtonExamples = () => (
   <>
     <h3>Icon buttons</h3>
-    <div className="s-flex s-items-center s-gap-4 s-bg-emerald-200">
+    <div className="s-flex s-items-center s-gap-4 s-bg-muted">
       <Button size="xs" icon={PlusIcon} label="hello" isPulsing />
       <Button size="xs" variant="outline" label="hello" icon={PlusIcon} />
       <Button size="xs" variant="highlight" label="hello" icon={PlusIcon} />
       <Button size="xs" variant="warning" label="hello" icon={PlusIcon} />
       <Button size="xs" variant="ghost" label="hello" icon={PlusIcon} />
-      <Button size="xs" variant="white" label="hello" icon={PlusIcon} />
     </div>
     <div className="s-flex s-items-center s-gap-4">
       <Button size="sm" icon={PlusIcon} isPulsing />