Changed UI to slate instead of gray

Author: fgatti675

packages/ui/src/components/Alert.tsx

@@ -56,7 +56,7 @@ export const Alert: React.FC<AlertProps> = ({
         >
             <span className={"flex-grow"}>{children}</span>
             {onDismiss && (
-                <button className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400"
+                <button className="text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-400"
                         onClick={onDismiss}>
                     &times;
                 </button>

packages/ui/src/components/Autocomplete.tsx

@@ -58,7 +58,7 @@ export function Autocomplete({
         <div ref={autocompleteRef}
              className={cn(
                  open ? paperMixin : "",
-                 "bg-gray-50 dark:bg-gray-900 py-2"
+                 "bg-slate-50 dark:bg-slate-900 py-2"
              )}>
             {children}
         </div>
@@ -78,7 +78,7 @@ export function AutocompleteItem({
 
     return (
         <div
-            className="flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+            className="flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800"
             onClick={onClick}>
             {children}
         </div>

packages/ui/src/components/Avatar.tsx

@@ -27,12 +27,12 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
             {...props}
             className={cn("rounded-full flex items-center justify-center overflow-hidden",
                 focusedMixin,
-                "p-1 hover:bg-gray-200 hover:dark:bg-gray-700 w-14 h-14",
+                "p-1 hover:bg-slate-200 hover:dark:bg-slate-700 w-14 h-14",
             )}>
             {src
                 ? (
                     <img className={cn(
-                        "bg-gray-100 dark:bg-gray-800",
+                        "bg-slate-100 dark:bg-slate-800",
                         "w-full h-full object-cover rounded-full",
                         className)}
                          src={src}
@@ -41,9 +41,9 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
                 : (
                     <span
                         className={cn(
-                            "bg-gray-100 dark:bg-gray-800",
+                            "bg-slate-100 dark:bg-slate-800",
                             "flex items-center justify-center",
-                            "w-full h-full py-1.5 text-lg font-medium text-gray-900 dark:text-white rounded-full",
+                            "w-full h-full py-1.5 text-lg font-medium text-slate-900 dark:text-white rounded-full",
                             className)}>
                         {children}
                     </span>

packages/ui/src/components/Badge.tsx

@@ -17,7 +17,7 @@ const getColor = (color: BadgeColor) => {
         case "error":
             return "bg-red-500";
         default:
-            return "bg-gray-300 dark:bg-gray-700";
+            return "bg-slate-300 dark:bg-slate-700";
     }
 }
 

packages/ui/src/components/BooleanSwitch.tsx

@@ -42,8 +42,8 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
                 "outline-none rounded-full relative shadow-sm",
                 value ? (disabled
-                    ? "bg-white bg-opacity-54 dark:bg-gray-950 border-gray-100 dark:border-gray-700 ring-1 ring-gray-100 dark:ring-gray-700"
-                    : "ring-secondary ring-1 bg-secondary dark:bg-secondary") : "bg-white bg-opacity-54 dark:bg-gray-900 ring-1 ring-gray-100 dark:ring-gray-700",
+                    ? "bg-white bg-opacity-54 dark:bg-slate-950 border-slate-100 dark:border-slate-700 ring-1 ring-slate-100 dark:ring-slate-700"
+                    : "ring-secondary ring-1 bg-secondary dark:bg-secondary") : "bg-white bg-opacity-54 dark:bg-slate-900 ring-1 ring-slate-100 dark:ring-slate-700",
                 className
             )}
             {...props}
@@ -52,7 +52,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 key={"knob"}
                 className={cn(
                     "block rounded-full transition-transform duration-100 transform will-change-auto",
-                    disabled ? "bg-gray-400 dark:bg-gray-600" : "bg-gray-400 dark:bg-gray-600",
+                    disabled ? "bg-slate-400 dark:bg-slate-600" : "bg-slate-400 dark:bg-slate-600",
                     {
                         "w-[21px] h-[10px]": size === "medium",
                         "w-[19px] h-[8px]": size === "small",
@@ -66,7 +66,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 key={"knob"}
                 className={cn(
                     "block rounded-full transition-transform duration-100 transform will-change-auto",
-                    disabled ? "bg-gray-300 dark:bg-gray-700" : (value ? "bg-white" : "bg-gray-600 dark:bg-gray-400"),
+                    disabled ? "bg-slate-300 dark:bg-slate-700" : (value ? "bg-white" : "bg-slate-600 dark:bg-slate-400"),
                     {
                         "w-[21px] h-[21px]": size === "medium",
                         "w-[19px] h-[19px]": size === "small",

packages/ui/src/components/Button.tsx

@@ -38,7 +38,7 @@ export function Button<P extends React.ElementType>({
             "border-primary !text-primary hover:bg-primary hover:bg-opacity-10 hover:border-blue-600 !hover:text-blue-600 focus:ring-blue-400 hover:ring-1 hover:ring-primary": variant === "outlined" && !disabled,
             "border-transparent !text-primary !hover:text-blue-600 hover:bg-primary hover:bg-opacity-10": variant === "text" && !disabled,
             "border-blue-600 border-opacity-50 dark:border-blue-500 dark:border-opacity-50 opacity-50 !text-blue-600 !dark:text-blue-500 text-opacity-50 dark:text-opacity-50": variant === "outlined" && disabled,
-            "border-transparent outline-none opacity-50 !text-gray-600 !dark:text-gray-500": (variant === "filled" || variant === "text") && disabled
+            "border-transparent outline-none opacity-50 !text-slate-600 !dark:text-slate-500": (variant === "filled" || variant === "text") && disabled
         }
     );
 

packages/ui/src/components/Checkbox.tsx

@@ -38,7 +38,7 @@ export const Checkbox = ({
         <div className={cn(
             outerSizeClasses[size],
             "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
-            onCheckedChange ? "rounded-full hover:bg-gray-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75" : "",
+            onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
             onCheckedChange ? "cursor-pointer" : "cursor-default"
         )}>
             <CheckboxPrimitive.Root
@@ -51,12 +51,12 @@ export const Checkbox = ({
                         "border-2 relative transition-colors ease-in-out duration-150",
                         sizeClasses[size],
                         disabled
-                            ? (isChecked ? "bg-gray-400 dark:bg-gray-600" : "bg-gray-400 dark:bg-gray-600")
-                            : (isChecked ? "bg-primary" : "bg-white dark:bg-gray-900"),
-                        isChecked ? "text-gray-100 dark:text-gray-900" : "",
+                            ? (isChecked ? "bg-slate-400 dark:bg-slate-600" : "bg-slate-400 dark:bg-slate-600")
+                            : (isChecked ? "bg-primary" : "bg-white dark:bg-slate-900"),
+                        isChecked ? "text-slate-100 dark:text-slate-900" : "",
                         disabled
                             ? "border-transparent"
-                            : (isChecked ? "border-transparent" : "border-gray-800 dark:border-gray-200")
+                            : (isChecked ? "border-transparent" : "border-slate-800 dark:border-slate-200")
                     )}>
                     <CheckboxPrimitive.Indicator asChild>
                         {indeterminate

packages/ui/src/components/Chip.tsx

@@ -44,9 +44,9 @@ export function Chip({
         <div
             className={cn("rounded-lg w-fit h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
-                onClick ? "cursor-pointer hover:bg-gray-300 hover:dark:bg-gray-700" : "",
+                onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
                 sizeClassNames[size],
-                error || !usedColorScheme ? "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200" : "",
+                error || !usedColorScheme ? "bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200" : "",
                 error ? "text-red-500 dark:text-red-400" : "",
                 className)}
             onClick={onClick}

packages/ui/src/components/DateTimeField.tsx

@@ -113,7 +113,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                         size === "small" ? "min-h-[48px]" : "min-h-[64px]",
                         label ? "pt-[28px] pb-2" : "py-2",
                         inputClassName,
-                        disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-gray-600 dark:text-gray-500"
+                        disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-600 dark:text-slate-500"
                     )}
                 />
 
@@ -123,14 +123,14 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                         // @ts-ignore
                         return ref.current?.setOpen(true);
                     }}
-                    className="absolute right-3 top-1/2 transform -translate-y-1/2 !text-gray-500 ">
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 !text-slate-500 ">
                     <CalendarMonthIcon color={"disabled"}/>
                 </IconButton>
 
                 {clearable && value && (
                     <IconButton
                         onClick={handleClear}
-                        className="absolute right-14 top-1/2 transform -translate-y-1/2 text-gray-400 ">
+                        className="absolute right-14 top-1/2 transform -translate-y-1/2 text-slate-400 ">
                         <ClearIcon/>
                     </IconButton>
                 )}

packages/ui/src/components/Dialog.tsx

@@ -87,7 +87,7 @@ export const Dialog = ({
                                 "outline-none focus:outline-none",
                                 fullWidth && !fullScreen ? "w-11/12" : undefined,
                                 fullHeight && !fullScreen ? "h-full" : undefined,
-                                "text-gray-900 dark:text-white",
+                                "text-slate-900 dark:text-white",
                                 "justify-center items-center",
                                 fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl",
                                 "ease-in-out duration-200",

packages/ui/src/components/IconButton.tsx

@@ -15,10 +15,10 @@ export type IconButtonProps<C extends React.ElementType> =
 }
 
 const buttonClasses =
-    "hover:bg-gray-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75";
+    "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75";
 const baseClasses =
     "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
-const colorClasses = "dark:text-gray-100 text-gray-700 visited:text-gray-700 dark:visited:text-gray-100";
+const colorClasses = "dark:text-slate-100 text-slate-700 visited:text-slate-700 dark:visited:text-slate-100";
 const sizeClasses = {
     medium: "w-10 !h-10 min-w-10 min-h-10",
     small: "w-8 !h-8 min-w-8 min-h-8",
@@ -41,7 +41,7 @@ const IconButtonInner = <C extends React.ElementType = "button">({
                                                                      ...props
                                                                  }: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-gray-50 dark:bg-gray-900";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-50 dark:bg-slate-900";
     const Component: React.ElementType<any> = component || "button";
     return (
         <Component

packages/ui/src/components/Menu.tsx

@@ -51,7 +51,7 @@ export function MenuItem({
         <DropdownMenu.Item
             className={cn(focusedMixin,
                 onClick && "cursor-pointer",
-                "rounded-md px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-900 flex items-center gap-4")}
+                "rounded-md px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center gap-4")}
             onClick={onClick}>
             {children}
         </DropdownMenu.Item>

packages/ui/src/components/MultiSelect.tsx

@@ -172,7 +172,7 @@ export function MultiSelect({
                                 }}>
 
                                 <CommandPrimitive.Group
-                                    className="mt-2 text-gray-900 dark:text-white animate-in z-50 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800 p-2 rounded-lg shadow-lg flex flex-col outline-none w-full"
+                                    className="mt-2 text-slate-900 dark:text-white animate-in z-50 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg flex flex-col outline-none w-full"
                                 >
 
                                     {children}
@@ -210,13 +210,13 @@ export function MultiSelectItem({ children, value, className }: MultiSelectItemP
             onValueChangeInternal(value);
         }}
         className={cn(
-            (fieldValue ?? []).includes(value) ? "bg-gray-200 dark:bg-gray-950" : "",
+            (fieldValue ?? []).includes(value) ? "bg-slate-200 dark:bg-slate-950" : "",
             "cursor-pointer",
             "m-1",
             "ring-offset-transparent",
             "p-2 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
-            "aria-[selected=true]:bg-gray-100 aria-[selected=true]:dark:bg-gray-900",
-            "cursor-pointer p-2 rounded aria-[selected=true]:bg-gray-100 aria-[selected=true]:dark:bg-gray-900",
+            "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+            "cursor-pointer p-2 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
             className
         )}
     >

packages/ui/src/components/Popover.tsx

@@ -67,7 +67,7 @@ export function Popover({
                                       avoidCollisions={avoidCollisions}>
 
                 {children}
-                <PopoverPrimitive.Arrow className="fill-white dark:fill-gray-950"/>
+                <PopoverPrimitive.Arrow className="fill-white dark:fill-slate-950"/>
             </PopoverPrimitive.Content>
         </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>;

packages/ui/src/components/SearchBar.tsx

@@ -62,13 +62,13 @@ export function SearchBar({
             onClick={onClick}
             className={cn("relative",
                 large ? "h-14" : "h-[42px]",
-                "bg-gray-50 dark:bg-gray-800 transition duration-150 ease-in-out border",
+                "bg-slate-50 dark:bg-gray-800 transition duration-150 ease-in-out border",
                 defaultBorderMixin,
                 "rounded",
                 className)}>
             <div
                 className="absolute p-0 px-4 h-full absolute pointer-events-none flex items-center justify-center top-0">
-                {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-gray-500"}/>}
+                {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-slate-500 dark:text-gray-500"}/>}
             </div>
             <input
                 value={searchText ?? ""}

packages/ui/src/components/Select.tsx

@@ -131,7 +131,7 @@ export function Select({
                         "select-none rounded-md text-sm",
                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
                         error ? "border border-red-500 dark:border-red-600" : "",
-                        disabled ? "text-gray-600 dark:text-gray-400" : "text-gray-800 dark:text-gray-200",
+                        disabled ? "text-slate-600 dark:text-slate-400" : "text-slate-800 dark:text-slate-200",
                         "relative flex items-center",
                         includeFocusOutline ? focusedMixin : "",
                         inputClassName
@@ -179,7 +179,7 @@ export function Select({
             <SelectPrimitive.Portal>
                 <SelectPrimitive.Content
                     position={position}
-                    className="z-50 relative overflow-hidden border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800 p-2 rounded-lg shadow-lg">
+                    className="z-50 relative overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg">
                     <SelectPrimitive.Viewport
                         className={"p-1"}
                         style={{
@@ -216,11 +216,11 @@ export function SelectItem({
         }}
         className={cn(
             "w-full",
-            "relative relative flex items-center p-2 rounded-md text-sm text-gray-700 dark:text-gray-300",
+            "relative relative flex items-center p-2 rounded-md text-sm text-slate-700 dark:text-slate-300",
             focusedMixin,
             "focus:z-10",
-            "data-[state=checked]:bg-gray-100 data-[state=checked]:dark:bg-gray-900 focus:bg-gray-100 dark:focus:bg-gray-950",
-            "data-[state=checked]:focus:bg-gray-200 data-[state=checked]:dark:focus:bg-gray-950",
+            "data-[state=checked]:bg-slate-100 data-[state=checked]:dark:bg-slate-900 focus:bg-slate-100 dark:focus:bg-slate-950",
+            "data-[state=checked]:focus:bg-slate-200 data-[state=checked]:dark:focus:bg-slate-950",
             disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
             "[&>*]:w-full",
             "overflow-visible",
@@ -249,7 +249,7 @@ export function SelectGroup({
     return <>
         <SelectPrimitive.Group
             className={cn(
-                "text-xs text-gray-900 dark:text-gray-100 uppercase tracking-wider font-bold mt-6 first:mt-2",
+                "text-xs text-slate-900 dark:text-slate-100 uppercase tracking-wider font-bold mt-6 first:mt-2",
                 "px-2 py-2",
                 className
             )}>

packages/ui/src/components/Sheet.tsx

@@ -62,7 +62,7 @@ export const Sheet: React.FC<SheetProps> = ({
                     className={cn(
                         // "transform-gpu",
                         "will-change-transform",
-                        "text-gray-900 dark:text-white",
+                        "text-slate-900 dark:text-white",
                         "fixed transform z-20 transition-all duration-[240ms] ease-in-out",
                         "outline-none focus:outline-none",
                         !transparent ? "shadow-md" : "",

packages/ui/src/components/Skeleton.tsx

@@ -15,7 +15,7 @@ export function Skeleton({
     return <span className={
         cn(
             "block",
-            "bg-gray-200 dark:bg-gray-800 rounded",
+            "bg-slate-200 dark:bg-slate-800 rounded",
             "animate-pulse",
             width ? `w-[${width}px]` : "w-full",
             height ? `h-[${height}px]` : "h-3",

packages/ui/src/components/Spinner.tsx

@@ -2,7 +2,7 @@ import React from "react";
 export function Spinner() {
     return (
         <div role="status">
-            <svg aria-hidden="true" className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-primary"
+            <svg aria-hidden="true" className="w-8 h-8 mr-2 text-slate-200 animate-spin dark:text-slate-600 fill-primary"
                  viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"