@firecms/ui 3.0.0-canary.144 → 3.0.0-canary.146

package/dist/styles.d.ts

@@ -1,12 +1,12 @@
 export declare const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-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 focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-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-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
-export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
-export declare const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
-export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
-export declare const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
-export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
-export declare const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-40 m-1 -p-1";
+export declare const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
+export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
+export declare const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
+export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
+export declare const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
+export declare const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
+export declare const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40 m-1 -p-1";
 export declare const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
 export declare const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.0.0-canary.144",
+  "version": "3.0.0-canary.146",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -107,7 +107,7 @@
     "src",
     "tailwind.config.js"
   ],
-  "gitHead": "8f862289db623ffd350e61e4ab4a06957ed97bdf",
+  "gitHead": "601e622a79787f5b08f7ac27646d044787b972f1",
   "publishConfig": {
     "access": "public"
   }

package/src/components/Alert.tsx

@@ -34,7 +34,7 @@ const getColorClasses = (severity: string) => {
             return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
         case "base":
         default:
-            return "bg-slate-50 dark:bg-slate-800 dark:text-white text-slate-900";
+            return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900";
     }
 };
 
@@ -61,7 +61,7 @@ export const Alert: React.FC<AlertProps> = ({
                 className)}>
             <div className={"flex-grow"}>{children}</div>
             {onDismiss && (
-                <button className="text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-400"
+                <button className="text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400"
                         onClick={onDismiss}>
                     &times;
                 </button>

package/src/components/Autocomplete.tsx

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

package/src/components/Avatar.tsx

@@ -35,14 +35,14 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
             {...props}
             className={cls(
                 "rounded-full flex items-center justify-center overflow-hidden",
-                "p-1 hover:bg-slate-200 hover:dark:bg-slate-700 w-12 h-12 min-w-12 min-h-12",
+                "p-1 hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700 w-12 h-12 min-w-12 min-h-12",
                 outerClassName
             )}
         >
             {src && !isImageError ? (
                 <img
                     className={cls(
-                        "bg-slate-100 dark:bg-slate-800",
+                        "bg-surface-accent-100 dark:bg-surface-accent-800",
                         "w-full h-full object-cover rounded-full",
                         className
                     )}
@@ -53,9 +53,9 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
             ) : (
                 <span
                     className={cls(
-                        "bg-slate-100 dark:bg-slate-800",
+                        "bg-surface-accent-100 dark:bg-surface-accent-800",
                         "flex items-center justify-center",
-                        "w-full h-full py-1.5 text-lg font-medium text-slate-900 dark:text-white rounded-full",
+                        "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full",
                         className
                     )}
                 >

package/src/components/Badge.tsx

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

package/src/components/BooleanSwitch.tsx

@@ -43,8 +43,8 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 size === "smallest" ? "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-slate-950 border-slate-100 dark:border-slate-700 ring-1 ring-slate-200 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-200 dark:ring-slate-700",
+                    ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700"
+                    : "ring-secondary ring-1 bg-secondary dark:bg-secondary") : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700",
                 className
             )}
             {...props}
@@ -53,7 +53,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 key={"knob"}
                 className={cls(
                     "block rounded-full transition-transform duration-100 transform will-change-auto",
-                    disabled ? "bg-slate-400 dark:bg-slate-600" : "bg-slate-400 dark:bg-slate-600",
+                    disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600",
                     {
                         "w-[21px] h-[10px]": size === "small" || size === "medium",
                         "w-[19px] h-[8px]": size === "smallest",
@@ -67,7 +67,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 key={"knob"}
                 className={cls(
                     "block rounded-full transition-transform duration-100 transform will-change-auto",
-                    disabled ? "bg-slate-300 dark:bg-slate-700" : (value ? "bg-white" : "bg-slate-600 dark:bg-slate-400"),
+                    disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : (value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400"),
                     {
                         "w-[21px] h-[21px]": size === "small" || size === "medium",
                         "w-[19px] h-[19px]": size === "smallest",

package/src/components/Button.tsx

@@ -39,21 +39,21 @@ const ButtonInner = React.forwardRef<
         "border border-primary bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
         "border border-secondary bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
         "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
-        "border border-slate-200 bg-slate-200 hover:bg-slate-300 focus:ring-slate-400 shadow hover:ring-1 hover:ring-slate-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
         // Text Variants
-        "border border-transparent text-primary hover:text-primary hover:bg-slate-200 dark:hover:bg-gray-900": variant === "text" && color === "primary" && !disabled,
+        "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 dark:hover:bg-surface-900": variant === "text" && color === "primary" && !disabled,
         "border border-transparent text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "text" && color === "secondary" && !disabled,
         "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": variant === "text" && color === "error" && !disabled,
-        "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-slate-200 hover:dark:bg-gray-700": variant === "text" && color === "text" && !disabled,
+        "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": variant === "text" && color === "text" && !disabled,
         // Outlined Variants
         "border border-primary text-primary hover:text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
         "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
         "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
-        "border border-slate-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-slate-200": variant === "outlined" && color === "text" && !disabled,
+        "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": variant === "outlined" && color === "text" && !disabled,
         // Disabled states for all variants
         "border border-transparent opacity-50": variant === "text" && disabled,
-        "border border-gray-500 opacity-50": variant === "outlined" && disabled,
-        "border border-gray-500 bg-gray-500 opacity-50": variant === "filled" && disabled,
+        "border border-surface-500 opacity-50": variant === "outlined" && disabled,
+        "border border-surface-500 bg-surface-500 opacity-50": variant === "filled" && disabled,
     });
 
     const sizeClasses = cls(

package/src/components/Checkbox.tsx

@@ -71,7 +71,7 @@ export const Checkbox = ({
                 padding ? paddingClasses[size] : "",
                 outerSizeClasses[size],
                 "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
-                onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
+                onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75" : "",
                 onCheckedChange ? "cursor-pointer" : "cursor-default"
             )}>
                 <div
@@ -79,12 +79,12 @@ export const Checkbox = ({
                         "border-2 relative transition-colors ease-in-out duration-150",
                         sizeClasses[size],
                         disabled
-                            ? (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" : "",
+                            ? (indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600")
+                            : (indeterminate || isChecked ? colorClasses[color] : "bg-white dark:bg-surface-900"),
+                        (indeterminate || isChecked) ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
                         disabled
                             ? "border-transparent"
-                            : (indeterminate || isChecked ? "border-transparent" : "border-slate-800 dark:border-slate-200")
+                            : (indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200")
                     )}>
                     <CheckboxPrimitive.Indicator asChild>
                         {indeterminate

package/src/components/Chip.tsx

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

package/src/components/CircularProgress.tsx

@@ -35,7 +35,7 @@ export function CircularProgress({
                 sizeClasses,
                 borderClasses,
                 "inline-block animate-spin rounded-full border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",
-                "text-primary-dark dark:text-primary",
+                "text-primary dark:text-primary",
                 className)}
             role="status">
               <span

package/src/components/DateTimeField.tsx

@@ -155,7 +155,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                             label ? "pt-8 pb-2" : "py-2",
                             inputClassName,
                             disabled &&
-                            "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-600 dark:text-slate-500"
+                            "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
                         )}
                     />
                 <IconButton
@@ -163,14 +163,14 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                         e.stopPropagation();
                         inputRef.current?.showPicker();
                     }}
-                    className="absolute right-3 top-1/2 transform -translate-y-1/2 !text-slate-500"
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500"
                 >
                     <CalendarMonthIcon color={"disabled"}/>
                 </IconButton>
                 {clearable && value && (
                     <IconButton
                         onClick={handleClear}
-                        className="absolute right-14 top-1/2 transform -translate-y-1/2 text-slate-400 "
+                        className="absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 "
                     >
                         <ClearIcon/>
                     </IconButton>

package/src/components/Dialog.tsx

@@ -99,7 +99,7 @@ export const Dialog = ({
                                 "outline-none focus:outline-none",
                                 fullWidth && !fullScreen ? "w-11/12" : undefined,
                                 fullHeight && !fullScreen ? "h-full" : undefined,
-                                "text-slate-900 dark:text-white",
+                                "text-surface-accent-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/DialogActions.tsx

@@ -19,7 +19,7 @@ export function DialogActions({
             defaultBorderMixin,
             "py-3 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2",
             position,
-            "bg-white bg-opacity-60 dark:bg-gray-900 dark:bg-opacity-60",
+            "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60",
             translucent ? "backdrop-blur-sm" : "",
             className)}>
         {children}

package/src/components/ExpandablePanel.tsx

@@ -94,7 +94,7 @@ export function ExpandablePanel({
                 <Collapsible.Trigger
                     className={cls(
                         "rounded-t flex items-center justify-between w-full min-h-[52px]",
-                        "hover:bg-slate-200 hover:bg-opacity-20 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
+                        "hover:bg-surface-accent-200 hover:bg-opacity-20 dark:hover:bg-surface-800 dark:hover:bg-opacity-20",
                         invisible ? "border-b px-2" : "p-4",
                         open ? "py-6" : "py-4",
                         "transition-all duration-200",

package/src/components/IconButton.tsx

@@ -13,11 +13,9 @@ export type IconButtonProps<C extends React.ElementType> =
     onClick?: React.MouseEventHandler<any>
 }
 
-const buttonClasses =
-    "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800";
-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 = "text-slate-600 visited:text-slate-600 dark:text-slate-300 dark:visited:text-gray-300";
+const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800";
+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 = "text-surface-accent-600 visited:text-surface-accent-600 dark:text-surface-accent-300 dark:visited:text-surface-300";
 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 +39,7 @@ const IconButtonInner = <C extends React.ElementType = "button">({
                                                                      ...props
                                                                  }: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-200 bg-opacity-50 dark:bg-gray-950 dark:bg-opacity-50";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 dark:bg-surface-950 dark:bg-opacity-50";
     const Component: React.ElementType<any> = component || "button";
     return (
         <Component

package/src/components/Label.tsx

@@ -20,8 +20,8 @@ const Label = React.forwardRef<
         ref={ref}
         onClick={onClick}
         className={cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-            border && "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-1.5",
-            onClick && "hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
+            border && "border border-surface-300 dark:border-surface-700 rounded-md px-3 py-1.5",
+            onClick && "hover:cursor-pointer hover:bg-surface-200 dark:hover:bg-surface-800",
             defaultBorderMixin, className)}
         {...props}
     />

package/src/components/Markdown.tsx

@@ -13,8 +13,8 @@ export interface MarkdownProps {
 }
 
 const proseClasses = {
-    small: "prose-sm text-sm",
-    medium: "prose text-base",
+    small: "prose-sm typography-body2",
+    medium: "prose typography-body1",
     large: "prose-lg",
     xl: "prose-xl",
     "2xl": "prose-2xl"

package/src/components/Menu.tsx

@@ -66,7 +66,7 @@ export function MenuItem({
     // Dynamically adjusting the class based on the "dense" prop
     const classNames = cls(
         onClick && "cursor-pointer",
-        "rounded-md 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",
+        "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900 flex items-center gap-4",
         dense ? "px-3 py-1.5" : "px-4 py-2"
     );
 

package/src/components/Menubar.tsx

@@ -16,7 +16,7 @@ export function Menubar({
     return (
         <MenubarPrimitive.Root
             onSelect={onSelect}
-            className={cls("z-10 flex bg-white dark:bg-gray-950 p-[3px] rounded-sm shadow-sm", className)}>
+            className={cls("z-10 flex bg-white dark:bg-surface-950 p-[3px] rounded-sm shadow-sm", className)}>
             {children}
         </MenubarPrimitive.Root>
     )
@@ -44,7 +44,7 @@ export function MenubarTrigger({
     return (
         <MenubarPrimitive.Trigger
             onSelect={onSelect}
-            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50",
+            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-700 dark:hover:bg-opacity-50",
                 className)}>
             {children}
         </MenubarPrimitive.Trigger>
@@ -80,7 +80,7 @@ export function MenubarContent({
     return (
         <MenubarPrimitive.Content
             onSelect={onSelect}
-            className={cls("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className)}
+            className={cls("min-w-[220px] bg-white dark:bg-surface-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className)}
             align={align ?? "start"}
             sideOffset={sideOffset ?? 5}
             alignOffset={alignOffset ?? -3}
@@ -108,7 +108,7 @@ export function MenubarItem({
     return (
         <MenubarPrimitive.Item
             onSelect={onSelect}
-            className={cls("group text-[13px] leading-none rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+            className={cls("group text-[13px] leading-none rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 leftPadding ? "pl-5" : "",
                 disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark",
                 className)}
@@ -130,7 +130,7 @@ export function MenubarSeparator({
 }) {
     return (
         <MenubarPrimitive.Separator
-            className={cls("h-[1px] bg-slate-100 dark:bg-gray-800 m-[5px]", className)}
+            className={cls("h-[1px] bg-surface-accent-100 dark:bg-surface-800 m-[5px]", className)}
             {...rest}
         >
             {children}
@@ -166,7 +166,7 @@ export function MenubarSubTrigger({
     return (
         <MenubarPrimitive.SubTrigger
             onSelect={onSelect}
-            className={cls("group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+            className={cls("group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             {...rest}
         >
@@ -191,7 +191,7 @@ export function MenubarSubContent({
         <MenubarPrimitive.SubContent
             onSelect={onSelect}
             alignOffset={alignOffset ?? -5}
-            className={cls("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]",
+            className={cls("min-w-[220px] bg-white dark:bg-surface-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]",
                 className)}
             {...rest}
         >
@@ -217,7 +217,7 @@ export function MenubarCheckboxItem({
     return (
         <MenubarPrimitive.CheckboxItem
             onSelect={onSelect}
-            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             checked={checked}
             onCheckedChange={onCheckedChange}
@@ -286,7 +286,7 @@ export function MenubarRadioItem({
     return (
         <MenubarPrimitive.RadioItem
             onSelect={onSelect}
-            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             value={value}
             {...rest}>

package/src/components/MultiSelect.tsx

@@ -270,7 +270,7 @@ export const MultiSelect = React.forwardRef<
                         </button>
                     </PopoverPrimitive.Trigger>
                     <PopoverPrimitive.Content
-                        className={cls("z-50 relative overflow-hidden border bg-white dark:bg-gray-900 rounded-lg w-[400px]", defaultBorderMixin)}
+                        className={cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin)}
                         align="start"
                         sideOffset={8}
                         onEscapeKeyDown={() => onPopoverOpenChange(false)}
@@ -306,8 +306,8 @@ export const MultiSelect = React.forwardRef<
                                                 "m-1",
                                                 "ring-offset-transparent",
                                                 "p-1 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-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"
+                                                "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+                                                "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"
                                             )
                                         }
                                     >
@@ -359,13 +359,13 @@ export function MultiSelectItem({
         }}
         className={cls(
             "flex flex-row items-center gap-1.5",
-            isSelected ? "bg-slate-200 dark:bg-slate-950" : "",
+            isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "",
             "cursor-pointer",
             "m-1",
             "ring-offset-transparent",
             "p-1 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-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",
+            "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+            "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
             className
         )}
     >
@@ -385,9 +385,9 @@ function InnerCheckBox({ checked }: { checked: boolean }) {
             className={cls(
                 "border-2 relative transition-colors ease-in-out duration-150",
                 "w-4 h-4 rounded flex items-center justify-center",
-                (checked ? "bg-primary" : "bg-white dark:bg-slate-900"),
-                (checked) ? "text-slate-100 dark:text-slate-900" : "",
-                (checked ? "border-transparent" : "border-slate-800 dark:border-slate-200")
+                (checked ? "bg-primary" : "bg-white dark:bg-surface-accent-900"),
+                (checked) ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
+                (checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200")
             )}>
             {checked && <Icon iconKey={"check"} size={16} className={"absolute"}/>}
         </div>

package/src/components/Popover.tsx

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

package/src/components/SearchBar.tsx

@@ -63,13 +63,13 @@ export function SearchBar({
             onClick={onClick}
             className={cls("relative",
                 large ? "h-14" : "h-[42px]",
-                "bg-slate-50 dark:bg-gray-800 border",
+                "bg-surface-accent-50 dark:bg-surface-800 border",
                 defaultBorderMixin,
                 "rounded-lg",
                 className)}>
             <div
                 className="absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0">
-                {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-slate-500 dark:text-gray-500"}/>}
+                {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"}/>}
             </div>
             <input
                 value={searchText ?? ""}
@@ -87,7 +87,8 @@ export function SearchBar({
                 onBlur={() => setActive(false)}
                 className={cls(
                     (disabled || loading) && "pointer-events-none",
-                    "relative flex items-center rounded transition-all bg-transparent outline-none appearance-none border-none",
+                    "placeholder-text-disabled dark:placeholder-text-disabled-dark",
+                    "relative flex items-center rounded-lg transition-all bg-transparent outline-none appearance-none border-none",
                     "pl-12 h-full text-current ",
                     expandable ? (active ? "w-[220px]" : "w-[180px]") : "",
                     innerClassName

package/src/components/Select.tsx

@@ -115,7 +115,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         "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-slate-600 dark:text-slate-400" : "text-slate-800 dark:text-white",
+                        disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
                         "relative flex flex-row items-center",
                         inputClassName
                     )}>
@@ -159,7 +159,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             </div>
             <SelectPrimitive.Portal>
                 <SelectPrimitive.Content position={position}
-                                         className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-gray-900 p-2 rounded-lg", defaultBorderMixin)}>
+                                         className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
                     <SelectPrimitive.Viewport className={"p-1"}
                                               style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
                         {children}
@@ -191,10 +191,10 @@ export function SelectItem({
         disabled={disabled}
         className={cls(
             "w-full",
-            "relative flex items-center p-2 rounded-md text-sm text-slate-700 dark:text-slate-300",
+            "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300",
             "focus:z-10",
-            "data-[state=checked]:bg-slate-100 data-[state=checked]:dark:bg-slate-800 focus:bg-slate-100 dark:focus:bg-gray-950",
-            "data-[state=checked]:focus:bg-slate-200 data-[state=checked]:dark:focus:bg-gray-950",
+            "data-[state=checked]:bg-surface-accent-100 data-[state=checked]:dark:bg-surface-accent-800 focus:bg-surface-accent-100 dark:focus:bg-surface-950",
+            "data-[state=checked]:focus:bg-surface-accent-200 data-[state=checked]:dark:focus:bg-surface-950",
             disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
             "[&>*]:w-full",
             "overflow-visible",
@@ -222,7 +222,7 @@ export function SelectGroup({
     return <>
         <SelectPrimitive.Group
             className={cls(
-                "text-xs text-slate-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
+                "text-xs text-surface-accent-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
                 "px-2 py-2",
                 className
             )}>

package/src/components/Separator.tsx

@@ -15,12 +15,12 @@ export function Separator({
             <SeparatorPrimitive.Root
                 decorative={decorative}
                 orientation="horizontal"
-                className={cls("dark:bg-opacity-80 dark:bg-gray-800 bg-gray-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
+                className={cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
         );
     else
         return (
             <SeparatorPrimitive.Root
-                className={cls("dark:bg-opacity-80 dark:bg-gray-800 bg-gray-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
+                className={cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
                 decorative={decorative}
                 orientation="vertical"
             />