@firecms/core 3.0.0-canary.144 → 3.0.0-canary.145

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -259,7 +259,7 @@ function StorageUpload({
                 className="flex-grow m-2 max-w-[200px]"
                 onClick={open}>
                 <Typography
-                    className="text-gray-400 dark:text-gray-600"
+                    className="text-surface-400 dark:text-surface-600"
                     variant={"body2"}
                     align={"center"}>
                     {helpText}
@@ -276,7 +276,7 @@ function StorageUpload({
                     color={"inherit"}
                     size={"small"}
                     onClick={open}>
-                    <EditIcon size={"small"} className={"text-gray-500"}/>
+                    <EditIcon size={"small"} className={"text-surface-500"}/>
                 </IconButton>
             </EntityTableCellActions>
 

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -71,7 +71,7 @@ export function CollectionTableToolbar({
 
     return (
         <div
-            className={cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
+            className={cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
 
             <div className="flex items-center gap-2 md:mr-4 mr-2">
 

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -188,10 +188,10 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 className={cls(
                     "transition-colors duration-100 ease-in-out",
                     `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
-                    onHover && !disabled ? "bg-gray-50 dark:bg-gray-900" : "",
-                    saved ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "",
+                    onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : "",
+                    saved ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "",
                     hideOverflow ? "overflow-hidden" : "",
-                    isSelected ? "bg-gray-50 dark:bg-gray-900" : "",
+                    isSelected ? "bg-surface-50 dark:bg-surface-900" : "",
                     borderClass
                 )}
                 ref={ref}
@@ -236,7 +236,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 {disabled && onHover && disabledTooltip &&
                     <div className="absolute top-1 right-1 text-xs">
                         <Tooltip title={disabledTooltip}>
-                            <RemoveCircleIcon size={"smallest"} color={"disabled"} className={"text-gray-500"}/>
+                            <RemoveCircleIcon size={"smallest"} color={"disabled"} className={"text-surface-500"}/>
                         </Tooltip>
                     </div>}
 

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -353,7 +353,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         });
     }
     const form = <div
-        className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
+        className={`text-surface-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-surface-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
 
         {internalForm}
 
@@ -370,7 +370,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             style={{
                 boxShadow: "0 0 0 2px rgba(128,128,128,0.2)",
             }}
-            className={`inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-gray-950 ${
+            className={`inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-surface-950 ${
                 !open ? "invisible" : "visible"
             } cursor-grab overflow-visible`}
             ref={draggableRef}>
@@ -383,7 +383,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                 {form}
 
                 <div
-                    className="absolute -top-3.5 -right-3.5 bg-gray-500 rounded-full"
+                    className="absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full"
                     style={{
                         width: "32px",
                         height: "32px"

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -538,7 +538,7 @@ export const EntityCollectionView = React.memo(
             </div>}
         >
 
-            {collection.description && <div className="m-4 text-gray-900 dark:text-white">
+            {collection.description && <div className="m-4 text-surface-900 dark:text-white">
                 <Markdown source={collection.description}/>
             </div>}
 
@@ -798,7 +798,7 @@ function EntityIdHeaderWidget({
                         <SearchIcon size={"small"}/>
                     </IconButton>
                 }>
-                <div className={cls("my-2 rounded-lg bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-white")}>
+                <div className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
                     <form noValidate={true}
                           onSubmit={(e) => {
                               e.preventDefault();
@@ -823,7 +823,7 @@ function EntityIdHeaderWidget({
                                     setSearchString(e.target.value);
                                 }}
                                 value={searchString}
-                                className={"rounded-lg bg-white dark:bg-gray-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled}/>
+                                className={"rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled}/>
                             <Button variant={"text"}
                                     disabled={!(searchString.trim())}
                                     type={"submit"}

package/src/components/EntityPreview.tsx

@@ -200,11 +200,11 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
             tabindex: 0
         }}
         className={cls(
-            "bg-white dark:bg-gray-900",
+            "bg-white dark:bg-surface-900",
             "min-h-[42px]",
             fullwidth ? "w-full" : "",
             "items-center",
-            hover ? "hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800" : "",
+            hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
             size === "smallest" ? "p-1" : "px-2 py-1",
             "flex border rounded-lg",
             onClick ? "cursor-pointer" : "",

package/src/components/EntityView.tsx

@@ -40,10 +40,10 @@ export function EntityView<M extends Record<string, any>>(
             <div className={"w-full mb-4"}>
                 <div className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
                     <div className="flex items-center w-1/4">
-                        <span className="pl-2 text-sm text-gray-600">Id</span>
+                        <span className="pl-2 text-sm text-surface-600">Id</span>
                     </div>
                     <div
-                        className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                        className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
                         <span className="flex-grow mr-2">{entity.id}</span>
                         {customizationController?.entityLinkBuilder &&
                             <a href={customizationController.entityLinkBuilder({ entity })}
@@ -64,10 +64,10 @@ export function EntityView<M extends Record<string, any>>(
                                 key={`reference_previews_${key}`}
                                 className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
                                 <div className="flex items-center w-1/4">
-                                    <span className="pl-2 text-sm text-gray-600">{property.name}</span>
+                                    <span className="pl-2 text-sm text-surface-600">{property.name}</span>
                                 </div>
                                 <div
-                                    className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                                    className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
                                     <PropertyPreview
                                         propertyKey={key}
                                         value={value}

package/src/components/HomePage/FavouritesView.tsx

@@ -38,7 +38,7 @@ function NavigationChip({ entry }: { entry: TopNavigationEntry }) {
                 : <StarBorderIcon
                     onClick={onIconClick}
                     size={18}
-                    className={"text-gray-400 dark:text-gray-500"}/>}>
+                    className={"text-surface-400 dark:text-surface-500"}/>}>
         {entry.name}
     </Chip>;
 }

package/src/components/HomePage/NavigationCard.tsx

@@ -27,7 +27,7 @@ export function NavigationCard({
                 className="flex-grow w-full">
 
                 <div
-                    className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
+                    className="h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600">
 
                     {icon}
 

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -67,7 +67,7 @@ export function NavigationCardBinding({
                             className={"text-secondary"}/>
                         : <StarBorderIcon
                             size={18}
-                            className={"text-gray-400 dark:text-gray-500"}/>}
+                            className={"text-surface-400 dark:text-surface-500"}/>}
             </IconButton>
         ]
         : [];

package/src/components/HomePage/NavigationGroup.tsx

@@ -12,7 +12,7 @@ export function NavigationGroup({
     return (
         <ExpandablePanel
             invisible={true}
-            titleClassName={"font-medium text-sm text-gray-600 dark:text-gray-400"}
+            titleClassName={"font-medium text-sm text-surface-600 dark:text-surface-400"}
             innerClassName={"py-4"}
             initiallyExpanded={!(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped")}
             onExpandedChange={expanded => {

package/src/components/PropertyConfigBadge.tsx

@@ -9,7 +9,7 @@ export function PropertyConfigBadge({
     propertyConfig: PropertyConfig | undefined,
     disabled?: boolean
 }): React.ReactNode {
-    const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-gray-400 dark:bg-gray-600" : "");
+    const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
 
     const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : undefined;
 

package/src/components/PropertyIdCopyTooltip.tsx

@@ -29,7 +29,7 @@ export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: str
     return (
         <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
             <div>
-                <Typography variant={"caption"} className={"min-w-20 text-slate-400"}
+                <Typography variant={"caption"} className={"min-w-20 text-surface-accent-400"}
                             color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
                 <Typography variant={"caption"} className={"text-white"}><code>{propertyKey}</code></Typography>
             </div>

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -293,7 +293,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                             <IconForView
                                 size={"small"}
                                 collectionOrView={collection}
-                                className={"text-gray-300 dark:text-gray-600"}/>
+                                className={"text-surface-300 dark:text-surface-600"}/>
                             {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}
                         </Typography>}
                         defaultSize={collection.defaultSize}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -210,7 +210,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                     selectedCell,
                 }}
             >
-                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950"
+                <div className="h-full w-full flex flex-col bg-white dark:bg-surface-950"
                      ref={ref}>
 
                     <VirtualTable
@@ -232,7 +232,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                         checkFilterCombination={checkFilterCombination}
                         createFilterField={filterable ? createFilterField : undefined}
                         rowClassName={useCallback((entity: Entity<M>) => {
-                            return highlightedRow?.(entity) ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "";
+                            return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
                         }, [highlightedRow])}
                         className="flex-grow"
                         emptyComponent={emptyComponent}

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -102,7 +102,7 @@ export function DateTimeFilterField({
                 />
 
                 <Label
-                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800"
                     htmlFor="null-filter"
                 >
                     <Checkbox id="null-filter"

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -179,7 +179,7 @@ export function ReferenceFilterField({
                 }
 
                 {!isArray && <Label
-                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800"
                     htmlFor="null-filter"
                 >
                     <Checkbox id="null-filter"

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -203,7 +203,7 @@ export function StringNumberFilterField({
                 }
 
                 {!isArray && <Label
-                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800"
                     htmlFor="null-filter"
                 >
                     <Checkbox id="null-filter"

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -85,9 +85,9 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         return (
             <ErrorBoundary>
                 <div
-                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-gray-50 dark:bg-gray-900",
-                        "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 ",
-                        "hover:bg-gray-100 dark:hover:bg-gray-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
+                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900",
+                        "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
+                        "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
                         column.frozen ? "sticky left-0 z-10" : "relative z-0"
                     )}
                     style={{
@@ -130,7 +130,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                    invisible={!sort}>
                                 <IconButton
                                     size={"small"}
-                                    className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
+                                    className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                     onClick={() => {
                                         onColumnSort(column.key as Extract<keyof M, string>);
                                     }}
@@ -157,7 +157,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                 modal={true}
                                 trigger={
                                     <IconButton
-                                        className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
+                                        className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
                                         <FilterListIcon size={"small"}/>
@@ -181,7 +181,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                         ref={resizeHandleRef}
                         className={cls(
                             "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
-                            hovered && "bg-gray-300 dark:bg-gray-700"
+                            hovered && "bg-surface-300 dark:bg-surface-700"
                         )}
                         onMouseDown={onClickResizeColumn ? () => onClickResizeColumn(columnIndex, column) : undefined}
                     />}
@@ -238,9 +238,9 @@ function FilterForm<M>({
                   e.preventDefault();
                   submit();
               }}
-              className={"text-gray-900 dark:text-white"}>
+              className={"text-surface-900 dark:text-white"}>
             <div
-                className={cls(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
+                className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
                 {column.title ?? id}
             </div>
             {filterField && <div className="m-4">

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -100,7 +100,7 @@ export const VirtualTableHeaderRow = ({
 
     return (
         <div
-            className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-gray-50 dark:bg-gray-900")}>
+            className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-surface-50 dark:bg-surface-900")}>
             {columns.map((c, columnIndex) => {
                 const column = columns[columnIndex];
 

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -29,7 +29,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
         return (
             <div
                 className={cls(
-                    "flex min-w-full text-sm border-b border-gray-200 dark:border-gray-800 border-opacity-40 dark:border-opacity-40",
+                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 dark:border-opacity-40",
                     rowClassName ? rowClassName(rowData) : "",
                     {
                         "hover:bg-opacity-95": hoverRow,

package/src/components/common/useDataSourceEntityCollectionTableController.tsx

@@ -52,7 +52,7 @@ export type DataSourceEntityCollectionTableControllerProps<M extends Record<stri
  * @param lastDeleteTimestamp
  * @param forceFilterFromProps
  */
-export function useDataSourceEntityCollectionTableController<M extends Record<string, any> = any, UserType extends User = User>(
+export function useDataSourceEntityCollectionTableController<M extends Record<string, any> = any, USER extends User = User>(
     {
         fullPath,
         collection,
@@ -112,7 +112,7 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [rawData, setRawData] = useState<Entity<M>[]>([]);
 

package/src/core/DefaultDrawer.tsx

@@ -85,7 +85,7 @@ export function DefaultDrawer({
 
                     {groupsWithoutAdmin.map((group) => (
                         <div
-                            className={"bg-gray-50 dark:bg-gray-800 dark:bg-opacity-30 my-4 rounded-lg ml-4"}
+                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-4"}
                             key={`drawer_group_${group}`}>
                             {buildGroupHeader(group)}
                             {Object.values(navigationEntries)
@@ -112,7 +112,7 @@ export function DefaultDrawer({
                     trigger={
                         <IconButton
                             shape={"square"}
-                            className={"m-4 text-gray-900 dark:text-white w-fit"}>
+                            className={"m-4 text-surface-900 dark:text-white w-fit"}>
                             <Tooltip title={"Admin"}
                                      open={tooltipsOpen}
                                      side={"right"} sideOffset={28}>

package/src/core/DrawerNavigationItem.tsx

@@ -22,7 +22,7 @@ export function DrawerNavigationItem({
 }) {
 
     const iconWrap = <div
-        className={"text-gray-600 dark:text-gray-500"}>
+        className={"text-text-secondary dark:text-text-secondary-dark"}>
         {icon}
     </div>;
 
@@ -34,13 +34,13 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-slate-800 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-secondary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
                 drawerOpen ? "pl-4 h-12" : "pl-4 h-11",
                 "font-medium text-sm",
-                isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-50" : ""
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
             )}
             to={url}
         >

package/src/core/EntityEditView.tsx

@@ -95,7 +95,7 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
  * You probably don't want to use this view directly since it is bound to the
  * side panel.
  */
-export function EntityEditView<M extends Record<string, any>, UserType extends User>({
+export function EntityEditView<M extends Record<string, any>, USER extends User>({
                                                                                          entityId,
                                                                                          ...props
                                                                                      }: EntityEditViewProps<M>) {
@@ -104,7 +104,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
         dataLoading,
         // eslint-disable-next-line no-unused-vars
         dataLoadingError
-    } = useEntityFetch<M, UserType>({
+    } = useEntityFetch<M, USER>({
         path: props.path,
         entityId: entityId,
         collection: props.collection,
@@ -888,7 +888,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         let form = <>
 
             {pluginActions.length > 0 && <div
-                className={cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
+                className={cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-surface-accent-200 dark:bg-opacity-60 dark:bg-surface-accent-800 backdrop-blur-md")}>
                 {pluginActions}
             </div>}
 
@@ -1004,7 +1004,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             <div className="flex flex-col h-full w-full">
 
                 <div
-                    className={cls(defaultBorderMixin, "no-scrollbar h-16 border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-gray-50 dark:bg-gray-950")}>
+                    className={cls(defaultBorderMixin, "no-scrollbar h-16 border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-surface-50 dark:bg-surface-950")}>
 
                     <div
                         className="pb-1 self-center">

package/src/core/FireCMS.tsx

@@ -30,7 +30,7 @@ import { useProjectLog } from "../hooks/useProjectLog";
 
  * @group Core
  */
-export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
+export function FireCMS<USER extends User, EC extends EntityCollection>(props: FireCMSProps<USER, EC>) {
 
     const {
         children,

package/src/core/SideDialogs.tsx

@@ -130,7 +130,7 @@ function SideDialogView({
             >
                 {panel &&
                     <div
-                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-gray-900 "}
+                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-900 "}
                         style={{
                             width: panel.width,
                             transform: `translateX(-${offsetPosition * 200}px)`

package/src/core/field_configs.tsx

@@ -129,7 +129,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     },
     multi_select: {
         key: "multi_select",
-        name: "Multi select",
+        name: "Multi select (enum)",
         description: "Select multiple text values from within an enumeration",
         Icon: ListAltIcon,
         color: "#4223c9",

package/src/form/components/StorageItemPreview.tsx

@@ -36,7 +36,7 @@ export function StorageItemPreview({
 
             {!placeholder && !disabled &&
                 <div
-                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900">
+                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-surface-900">
 
                     <Tooltip
                         asChild={true}
@@ -67,7 +67,7 @@ export function StorageItemPreview({
                 <div
                     onClick={(e) => e.stopPropagation()}
                     className="flex flex-col items-center justify-center w-full h-full">
-                    <DescriptionIcon className="text-gray-700 dark:text-gray-300"/>
+                    <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
                 </div>
             }
 

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -112,7 +112,7 @@ export function MapFieldBinding({
                                                          expanded
                                                      });
                                                  }}
-                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-gray-900"}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
                                                  title={title}>{mapFormView}</ExpandablePanel>}
 
             {minimalistView && mapFormView}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -111,12 +111,12 @@ function ReferenceFieldBindingInternal({
                 {!value && <div className="justify-center text-left">
                     <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
                         disabled || isSubmitting
-                            ? "text-slate-500"
-                            : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
+                            ? "text-surface-accent-500"
+                            : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
                                             onClick={onEntryClick}
                                             size={"medium"}>
                         <IconForView collectionOrView={collection}
-                                     className={"text-gray-300 dark:text-gray-600"}/>
+                                     className={"text-surface-300 dark:text-surface-600"}/>
                         {`Edit ${property.name}`.toUpperCase()}
                     </EntityPreviewContainer>
                 </div>}

package/src/hooks/data/delete.ts

@@ -12,10 +12,10 @@ import {
 /**
  * @group Hooks and utilities
  */
-export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, UserType extends User = User> =
+export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, USER extends User = User> =
     DeleteEntityProps<M>
     & {
-    callbacks?: EntityCallbacks<M, UserType>;
+    callbacks?: EntityCallbacks<M, USER>;
     onDeleteSuccess?: (entity: Entity<M>) => void;
     onDeleteFailure?: (entity: Entity<M>, e: Error) => void;
     onPreDeleteHookError?: (entity: Entity<M>, e: Error) => void;
@@ -43,7 +43,7 @@ export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, UserTy
  * @param context
  * @group Hooks and utilities
  */
-export async function deleteEntityWithCallbacks<M extends Record<string, any>, UserType extends User>({
+export async function deleteEntityWithCallbacks<M extends Record<string, any>, USER extends User>({
                                                                                                           dataSource,
                                                                                                           entity,
                                                                                                           collection,
@@ -56,7 +56,7 @@ export async function deleteEntityWithCallbacks<M extends Record<string, any>, U
                                                                                                       }: DeleteEntityWithCallbacksProps<M> & {
                                                                                                           collection: ResolvedEntityCollection<M>,
                                                                                                           dataSource: DataSource,
-                                                                                                          context: FireCMSContext<UserType>
+                                                                                                          context: FireCMSContext<USER>
                                                                                                       }
 ): Promise<boolean> {
 

package/src/hooks/data/save.ts

@@ -48,7 +48,7 @@ export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
  * @see useDataSource
  * @group Hooks and utilities
  */
-export async function saveEntityWithCallbacks<M extends Record<string, any>, UserType extends User>({
+export async function saveEntityWithCallbacks<M extends Record<string, any>, USER extends User>({
                                                                                                         collection,
                                                                                                         path,
                                                                                                         entityId,
@@ -62,9 +62,9 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                                                                                                         onPreSaveHookError,
                                                                                                         onSaveSuccessHookError
                                                                                                     }: SaveEntityWithCallbacksProps<M> & {
-                                                                                                        collection: EntityCollection<M, UserType>,
+                                                                                                        collection: EntityCollection<M, USER>,
                                                                                                         dataSource: DataSource,
-                                                                                                        context: FireCMSContext<UserType>,
+                                                                                                        context: FireCMSContext<USER>,
                                                                                                     }
 ): Promise<void> {
 

package/src/hooks/data/useCollectionFetch.tsx

@@ -60,7 +60,7 @@ export interface CollectionFetchResult<M extends Record<string, any>> {
  * @param searchString
  * @group Hooks and utilities
  */
-export function useCollectionFetch<M extends Record<string, any>, UserType extends User>(
+export function useCollectionFetch<M extends Record<string, any>, USER extends User>(
     {
         path: inputPath,
         collection,
@@ -78,7 +78,7 @@ export function useCollectionFetch<M extends Record<string, any>, UserType exten
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [data, setData] = useState<Entity<M>[]>([]);