@firecms/ui 3.0.0-canary.143 → 3.0.0-canary.145

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

package/src/components/Sheet.tsx

@@ -66,7 +66,7 @@ export const Sheet: React.FC<SheetProps> = ({
                     className={cls(
                         "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
                         "bg-black bg-opacity-50",
-                        "dark:bg-gray-900 dark:bg-opacity-60",
+                        "dark:bg-surface-900 dark:bg-opacity-60",
                         displayed && open ? "opacity-100" : "opacity-0",
                         overlayClassName
                     )}
@@ -82,11 +82,11 @@ export const Sheet: React.FC<SheetProps> = ({
                         defaultBorderMixin,
                         "transform-gpu",
                         "will-change-transform",
-                        "text-slate-900 dark:text-white",
+                        "text-surface-accent-900 dark:text-white",
                         "fixed transform z-20 transition-all ease-in-out",
                         !displayed ? "duration-150" : "duration-100",
                         "outline-none focus:outline-none",
-                        transparent ? "" : "shadow-md bg-white dark:bg-gray-950",
+                        transparent ? "" : "shadow-md bg-white dark:bg-surface-950",
                         side === "top" || side === "bottom" ? "w-full" : "h-full",
                         side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0",
                         displayed && open ? "opacity-100" : "opacity-50",

package/src/components/Skeleton.tsx

@@ -20,7 +20,7 @@ export function Skeleton({
         className={
         cls(
             "block",
-            "bg-slate-200 dark:bg-slate-800 rounded-md",
+            "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md",
             "animate-pulse",
             "max-w-full max-h-full",
             className)

package/src/components/Slider.tsx

@@ -33,7 +33,7 @@ function SliderThumb(props: {
             <SliderPrimitive.Thumb
                 className={cls({
                         "border-primary bg-primary hover:bg-primary-dark outline-none": !props.props.disabled,
-                        "border-slate-300 bg-slate-300 dark:border-gray-700 dark:bg-gray-700": props.props.disabled
+                        "border-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-700": props.props.disabled
                     },
                     props.classes,
                     "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50",
@@ -47,7 +47,7 @@ function SliderThumb(props: {
                                   className={cls(
                                       "TooltipContent",
                                       "max-w-lg leading-relaxed",
-                                      "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",
+                                      "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
                                   )}>
             {props.props.value?.[props.index]}
         </TooltipPrimitive.Content>
@@ -83,12 +83,12 @@ const Slider = React.forwardRef<
             >
                 <SliderPrimitive.Track
                     style={{ height: size === "small" ? 4 : 8 }}
-                    className={"relative w-full grow overflow-hidden rounded-full bg-slate-300 bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40"}>
+                    className={"relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 dark:bg-surface-700 dark:bg-opacity-40"}>
 
                     <SliderPrimitive.Range
                         className={cls("absolute h-full", {
                             "bg-primary": !props.disabled,
-                            "bg-slate-300 dark:bg-gray-700": props.disabled,
+                            "bg-surface-accent-300 dark:bg-surface-700": props.disabled,
                         })}
                     />
                 </SliderPrimitive.Track>

package/src/components/Table.tsx

@@ -15,7 +15,7 @@ export const Table = ({
                           ...rest
                       }: TableProps) => (
     <table
-        className={cls("text-left text-gray-800 dark:text-white rounded-md overflow-x-auto", className)}
+        className={cls("text-left text-surface-800 dark:text-white rounded-md overflow-x-auto", className)}
         style={style}
         {...rest}
     >
@@ -34,7 +34,7 @@ export const TableBody = ({
                               ...rest
                           }: TableBodyProps) => (
     <tbody
-        className={cls("bg-white dark:bg-gray-950 text-sm divide-y divide-gray-100 dark:divide-gray-700 dark:divide-opacity-70", className)}
+        className={cls("bg-white dark:bg-surface-950 text-sm divide-y divide-surface-100 dark:divide-surface-700 dark:divide-opacity-70", className)}
         {...rest}
     >
     {children}
@@ -55,8 +55,8 @@ export const TableHeader = ({
     <tr
         className={cls(
             defaultBorderMixin,
-            "text-sm font-medium text-gray-700 dark:text-slate-300",
-            "bg-slate-50 border-b dark:bg-gray-900",
+            "text-sm font-medium text-surface-700 dark:text-surface-accent-300",
+            "bg-surface-accent-50 border-b dark:bg-surface-900",
             className
         )}
     >
@@ -83,8 +83,8 @@ export const TableRow = ({
         onClick={onClick}
         style={style}
         className={cls(
-            "bg-white dark:bg-gray-950",
-            onClick ? "hover:bg-slate-100 dark:hover:bg-slate-800 cursor-pointer" : "",
+            "bg-white dark:bg-surface-950",
+            onClick ? "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 cursor-pointer" : "",
             className
         )}
         {...rest}

package/src/components/Tabs.tsx

@@ -18,7 +18,7 @@ export function Tabs({
 
     return <TabsPrimitive.Root value={value} onValueChange={onValueChange}>
         <TabsPrimitive.List className={cls(
-            "flex text-sm font-medium text-center text-slate-800 dark:text-white max-w-full overflow-auto no-scrollbar",
+            "flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar",
             className)
         }>
             {children}
@@ -45,15 +45,15 @@ export function Tab({
                                       "border-b-2 border-transparent",
                                       "data-[state=active]:border-secondary",
                                       disabled
-                                          ? "text-slate-400 dark:text-slate-500"
-                                          : cls("text-slate-700 dark:text-slate-300",
-                                              "data-[state=active]:text-slate-900 data-[state=active]:dark:text-white",
-                                              "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",
+                                          ? "text-surface-accent-400 dark:text-surface-accent-500"
+                                          : cls("text-surface-accent-700 dark:text-surface-accent-300",
+                                              "data-[state=active]:text-surface-accent-900 data-[state=active]:dark:text-white",
+                                              "hover:text-surface-accent-800 dark:hover:text-surface-accent-200"),
+                                      // disabled ? "text-surface-accent-400 dark:text-surface-accent-500" : "data-[state=active]:text-primary",
+                                      // "data-[state=active]:bg-surface-accent-50 data-[state=active]:dark:bg-surface-accent-800",
                                       className)}>
         <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
-            "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800")}>
+            "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800")}>
             {children}
         </div>
     </TabsPrimitive.Trigger>;

package/src/components/TextField.tsx

@@ -111,7 +111,7 @@ export function TextField<T extends string | number>({
             className={cls(
                 invisible ? focusedInvisibleMixin : "",
                 "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
-                disabled && "border border-transparent outline-none opacity-50 text-slate-600 dark:text-slate-500"
+                disabled && "border border-transparent outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
             )}
         />
         : <input
@@ -129,7 +129,7 @@ export function TextField<T extends string | number>({
                 label ? (size === "medium" ? "pt-8 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-slate-800 dark:text-white",
+                disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white",
                 inputClassName
             )}
             placeholder={focused || hasValue || !label ? placeholder : undefined}

package/src/components/Tooltip.tsx

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

package/src/components/common/SelectInputLabel.tsx

@@ -3,7 +3,7 @@ import { cls } from "../../util";
 
 export function SelectInputLabel({ children, error }: { children: React.ReactNode, error?: boolean }) {
     return <div className={cls("text-sm  font-medium ml-3.5 mb-1",
-        error ? "text-red-500 dark:text-red-600" : "text-slate-500 dark:text-slate-300",)}>
+        error ? "text-red-500 dark:text-red-600" : "text-surface-accent-500 dark:text-surface-accent-300",)}>
         {children}
     </div>;
 }

package/src/styles.ts

@@ -1,12 +1,12 @@
 export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
+export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60";
 export const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
-export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
-export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
-export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
-export const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-40";
-export 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 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 const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
+export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
+export const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
+export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
+export const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
+export 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 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 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 const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";

package/tailwind.config.js

@@ -1,3 +1,5 @@
+import typography from "@tailwindcss/typography";
+
 export default {
     darkMode: ["selector", "[data-theme=\"dark\"]"],
     mode: "jit",
@@ -7,7 +9,7 @@ export default {
         "./node_modules/@firecms/**/*.{js,ts,jsx,tsx}"
     ],
     plugins: [
-        require("@tailwindcss/typography")
+        typography
     ],
     theme: {
         extend: {
@@ -34,35 +36,46 @@ export default {
                 ]
             },
             colors: {
-                primary: "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
+                "primary": "var(--fcms-primary)",
                 "primary-bg": "var(--fcms-primary-bg)",
-                secondary: "var(--fcms-secondary)",
-                field: {
-                    disabled: "rgb(224 224 226)",
+                "secondary": "var(--fcms-secondary)",
+                "field": {
+                    "disabled": "rgb(224 224 226)",
                     "disabled-dark": "rgb(35 35 37)"
                 },
-                text: {
-                    primary: "rgba(0, 0, 0, 0.87)",
+                "text": {
+                    "primary": "rgba(0, 0, 0, 0.87)",
+                    "secondary": "rgba(0, 0, 0, 0.55)",
+                    "disabled": "rgba(0, 0, 0, 0.38)",
                     "primary-dark": "#ffffff",
-                    secondary: "rgba(0, 0, 0, 0.6)",
-                    "secondary-dark": "rgba(255, 255, 255, 0.7)",
-                    disabled: "rgba(0, 0, 0, 0.38)",
-                    "disabled-dark": "rgba(255, 255, 255, 0.5)",
-                    label: "rgb(131, 131, 131)"
+                    "secondary-dark": "rgba(255, 255, 255, 0.60)",
+                    "disabled-dark": "rgba(255, 255, 255, 0.48)"
                 },
-                gray: {
-                    50: "#f8f8fc",
-                    100: "#E7E7EB",
-                    200: "#CFCFD6",
-                    300: "#B7B7BF",
-                    400: "#A0A0A9",
-                    500: "#87878F",
-                    600: "#6B6B74",
-                    700: "#454552",
-                    800: "#292934",
-                    900: "#18181C",
-                    950: "#101013"
+                "surface": {
+                    "50": "#f8f8fc",
+                    "100": "#E7E7EB",
+                    "200": "#CFCFD6",
+                    "300": "#B7B7BF",
+                    "400": "#A0A0A9",
+                    "500": "#87878F",
+                    "600": "#6B6B74",
+                    "700": "#454552",
+                    "800": "#292934",
+                    "900": "#18181C",
+                    "950": "#101013"
+                },
+                "surface-accent": {
+                    "50": "#f8fafc",
+                    "100": "#f1f5f9",
+                    "200": "#e2e8f0",
+                    "300": "#cbd5e1",
+                    "400": "#94a3b8",
+                    "500": "#64748b",
+                    "600": "#475569",
+                    "700": "#334155",
+                    "800": "#1e293b",
+                    "900": "#0f172a",
+                    "950": "#020617"
                 }
             }
         }