@firecms/ui 3.0.0-alpha.73 → 3.0.0-alpha.75

package/dist/styles.d.ts

@@ -1,10 +1,10 @@
 export declare const focusedMixin = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
-export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-gray-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
+export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
 export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-export declare const fieldBackgroundMixin = "bg-opacity-70 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-60 transition duration-150 ease-in-out";
-export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-150 ease-in-out";
-export declare const fieldBackgroundDisabledMixin = "bg-opacity-100 dark:bg-opacity-90";
-export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-90 dark:hover:bg-opacity-90";
+export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60 transition duration-150 ease-in-out";
+export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-150 ease-in-out";
+export declare const fieldBackgroundDisabledMixin = "bg-opacity-80 dark:bg-opacity-90";
+export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-90";
 export declare const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
 export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-90 border-gray-100";
 export declare const cardMixin = "bg-white rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 transition duration-200 ease-in-out m-1 -p-1 border border-transparent";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-alpha.73",
+    "version": "3.0.0-alpha.75",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -101,7 +101,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "df625cc7bd6af087b7012d1c9ae77d3a6c17a320",
+    "gitHead": "7d04e9e7855d1720e2b394091863dc3637a87712",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Alert.tsx

@@ -14,9 +14,9 @@ export interface AlertProps {
 const getSizeClasses = (size: "small" | "medium" | "large") => {
     switch (size) {
         case "small":
-            return "px-2 py-1";
+            return "px-4 py-1";
         case "large":
-            return "px-6 py-4";
+            return "px-4 py-4";
         case "medium":
         default:
             return "px-4 py-2";
@@ -52,11 +52,15 @@ export const Alert: React.FC<AlertProps> = ({
     return (
         <div
             style={style}
-            className={cn(getSizeClasses(size), "rounded-md flex items-center gap-2", classes, className)}
-        >
+            className={cn(
+                getSizeClasses(size),
+                "w-full",
+                "rounded-md flex items-center gap-2",
+                classes,
+                className)}>
             <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>

package/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>

package/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-12 h-12",
             )}>
             {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>

package/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";
     }
 }
 

package/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",

package/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
         }
     );
 

package/src/components/Card.tsx

@@ -12,7 +12,6 @@ export function Card({
     style?: React.CSSProperties;
     onClick?: () => void;
     className?: string;
-
 }) {
 
     const onKeyPress = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {

package/src/components/CenteredView.tsx

@@ -5,13 +5,11 @@ import { cn } from "../util";
 export function CenteredView({
                                  children,
                                  maxWidth,
-                                 fullScreen = false,
-                                 className,
+                                 className
                              }: {
     children: React.ReactNode;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
     className?: string;
-    fullScreen?: boolean,
 }) {
 
     return <div className={"flex flex-col flex-grow h-full"}>

package/src/components/Checkbox.tsx

@@ -10,6 +10,7 @@ interface CheckboxProps {
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     size?: "small" | "medium" | "large";
+    color?: "primary" | "secondary";
 }
 
 const sizeClasses = {
@@ -24,26 +25,37 @@ const outerSizeClasses = {
     large: "w-12 h-12"
 }
 
+const colorClasses = {
+    primary: "bg-primary",
+    secondary: "bg-secondary"
+}
+
 export const Checkbox = ({
                              checked,
                              indeterminate = false,
                              disabled,
                              size = "medium",
-                             onCheckedChange
+                             onCheckedChange,
+                             color = "primary"
                          }: CheckboxProps) => {
 
     const isChecked = indeterminate ? false : checked;
 
+    const iconSize = size === "medium"
+        ? 20
+        : size === "small"
+            ? 16
+            : 24;
     return (
         <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
                 asChild
-                checked={isChecked}
+                checked={indeterminate || isChecked}
                 disabled={disabled}
                 onCheckedChange={disabled ? undefined : onCheckedChange}>
                 <div
@@ -51,24 +63,29 @@ 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" : "",
+                            ? (indeterminate || isChecked ? "bg-slate-400 dark:bg-slate-600" : "bg-slate-400 dark:bg-slate-600")
+                            : (indeterminate || isChecked ? colorClasses[color] : "bg-white dark:bg-slate-900"),
+                        (indeterminate || isChecked) ? "text-slate-100 dark:text-slate-900" : "",
                         disabled
                             ? "border-transparent"
-                            : (isChecked ? "border-transparent" : "border-gray-800 dark:border-gray-200")
+                            : (indeterminate || isChecked ? "border-transparent" : "border-slate-800 dark:border-slate-200")
                     )}>
                     <CheckboxPrimitive.Indicator asChild>
                         {indeterminate
                             ? (
-                                <div className="w-full h-[1px] bg-currentColor"/>
+                                <Icon iconKey={"remove"} size={iconSize} className={"absolute"}/>
                             )
                             : (
-                                <Icon iconKey={"check"} size={20} className={"absolute"}/>
+                                <Icon iconKey={"check"} size={iconSize} className={"absolute"}/>
                             )}
                     </CheckboxPrimitive.Indicator>
                 </div>
             </CheckboxPrimitive.Root>
+            {/*{indeterminate && (*/}
+            {/*    <div >*/}
+            {/*         YO*/}
+            {/*    </div>*/}
+            {/*)}*/}
         </div>
     );
 };

package/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-200 dark:bg-slate-800 text-slate-800 dark:text-slate-200" : "",
                 error ? "text-red-500 dark:text-red-400" : "",
                 className)}
             onClick={onClick}

package/src/components/DateTimeField.tsx

@@ -81,7 +81,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                 {label && (
                     <InputLabel
                         className={cn("absolute top-1 pointer-events-none",
-                            !error ? (focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-600",
+                            !error ? (focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-500",
                             disabled ? "opacity-50" : "")}
                         shrink={hasValue || focused}
                     >
@@ -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>
                 )}

package/src/components/Dialog.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { paperMixin } from "../styles";
 import { cn } from "../util";
@@ -87,7 +86,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",

package/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-gray-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

package/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>

package/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
         )}
     >

package/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>;

package/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 ?? ""}

package/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
             )}>

package/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" : "",

package/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",

package/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"

package/src/components/Table.tsx

@@ -13,7 +13,7 @@ export const Table = ({
                           className,
                           style
                       }: TableProps) => (
-    <table className={cn("w-full text-left text-gray-800 dark:text-gray-200 rounded-md overflow-x-auto",
+    <table className={cn("w-full text-left text-slate-800 dark:text-slate-200 rounded-md overflow-x-auto",
         className)}
            style={style}>
         {children}
@@ -29,7 +29,7 @@ export const TableBody = ({
                               className
                           }: TableBodyProps) => (
     <tbody
-        className={cn("bg-white text-sm dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700", className)}>
+        className={cn("bg-white text-sm dark:bg-slate-800 divide-y divide-slate-200 dark:divide-slate-700", className)}>
     {children}
     </tbody>
 );
@@ -46,8 +46,8 @@ export const TableHeader = ({
     <thead>
     <tr className={cn(
         defaultBorderMixin,
-        "text-sm font-medium text-gray-700 dark:text-gray-300",
-        "bg-gray-50 border-b dark:bg-gray-900", className)}>
+        "text-sm font-medium text-slate-700 dark:text-slate-300",
+        "bg-slate-50 border-b dark:bg-slate-900", className)}>
         {children}
     </tr>
     </thead>
@@ -70,9 +70,9 @@ export const TableRow = ({
         onClick={onClick}
         style={style}
         className={cn(
-            "divide-gray-100 dark:divide-gray-800",
-            "bg-white dark:bg-gray-950",
-            onClick ? "hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer" : "",
+            "divide-slate-100 dark:divide-slate-800",
+            "bg-white dark:bg-slate-950",
+            onClick ? "hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer" : "",
             className)}
     >
         {children}

package/src/components/Tabs.tsx

@@ -19,7 +19,7 @@ export function Tabs({
 
     return <TabsPrimitive.Root value={value} onValueChange={onValueChange}>
         <TabsPrimitive.List className={cn(
-            "flex text-sm font-medium text-center text-gray-800 dark:text-gray-200",
+            "flex text-sm font-medium text-center text-slate-800 dark:text-slate-200",
             className)
         }>
             {children}
@@ -46,15 +46,15 @@ export function Tab({
                                       "border-b-2 border-transparent",
                                       "data-[state=active]:border-secondary",
                                       disabled
-                                          ? "text-gray-400 dark:text-gray-500"
-                                          : cn("text-gray-700 dark:text-gray-300",
-                                              "data-[state=active]:text-gray-900 data-[state=active]:dark:text-gray-100",
-                                              "hover:text-gray-800 dark:hover:text-gray-200"),
-                                      // disabled ? "text-gray-400 dark:text-gray-500" : "data-[state=active]:text-primary",
-                                      // "data-[state=active]:bg-gray-50 data-[state=active]:dark:bg-gray-800",
+                                          ? "text-slate-400 dark:text-slate-500"
+                                          : cn("text-slate-700 dark:text-slate-300",
+                                              "data-[state=active]:text-slate-900 data-[state=active]:dark:text-slate-100",
+                                              "hover:text-slate-800 dark:hover:text-slate-200"),
+                                      // disabled ? "text-slate-400 dark:text-slate-500" : "data-[state=active]:text-primary",
+                                      // "data-[state=active]:bg-slate-50 data-[state=active]:dark:bg-slate-800",
                                       className)}>
         <div className={cn("uppercase inline-block p-2 px-4 m-2 rounded",
-            "hover:bg-gray-100 dark:hover:bg-gray-800")}>
+            "hover:bg-slate-100 dark:hover:bg-slate-800")}>
             {children}
         </div>
     </TabsPrimitive.Trigger>;

package/src/components/TextField.tsx

@@ -100,7 +100,7 @@ export function TextField<T extends string | number>({
             className={cn(
                 invisible ? focusedInvisibleMixin : focusedMixin,
                 "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-[28px]",
-                disabled && "border border-transparent outline-none opacity-50 text-gray-600 dark:text-gray-500"
+                disabled && "border border-transparent outline-none opacity-50 text-slate-600 dark:text-slate-500"
             )}
         />
         : <input
@@ -118,7 +118,7 @@ export function TextField<T extends string | number>({
                 label ? (size === "medium" ? "pt-[28px] pb-2" : "pt-4 pb-2") : "py-2",
                 focused ? "text-text-primary dark:text-text-primary-dark" : "",
                 endAdornment ? "pr-10" : "pr-3",
-                disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-gray-800 dark:text-gray-200",
+                disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-800 dark:text-slate-200",
                 inputClassName
             )}
             placeholder={focused || hasValue || !label ? placeholder : undefined}

package/src/components/Tooltip.tsx

@@ -44,12 +44,12 @@ export const Tooltip = ({
                     <TooltipPrimitive.Content
                         className={cn("TooltipContent",
                             "max-w-lg leading-relaxed",
-                            "z-50 rounded px-3 py-2 text-xs leading-none bg-gray-700 dark:bg-gray-800 bg-opacity-90 font-medium text-gray-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
+                            "z-50 rounded px-3 py-2 text-xs leading-none bg-slate-700 dark:bg-slate-800 bg-opacity-90 font-medium text-slate-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
                             tooltipClassName)}
                         sideOffset={sideOffset === undefined ? 4 : sideOffset}
                         side={side}>
                         {title}
-                        {/*<TooltipPrimitive.Arrow className="fill-gray-600"/>*/}
+                        {/*<TooltipPrimitive.Arrow className="fill-slate-600"/>*/}
                     </TooltipPrimitive.Content>
                 </TooltipPrimitive.Portal>
             </TooltipPrimitive.Root>