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

package/dist/types/auth.d.ts

@@ -8,16 +8,16 @@ import { StorageSource } from "./storage";
  * to do it as the result of a hook.
  * @group Hooks and utilities
  */
-export type AuthController<UserType extends User = any, ExtraData = any> = {
+export type AuthController<USER extends User = any, ExtraData = any> = {
     /**
      * The user currently logged in
      * The values can be: the user object, null if they skipped login
      */
-    user: UserType | null;
+    user: USER | null;
     /**
      * Roles related to the logged user
      */
-    roles?: Role[];
+    userRoles?: Role[];
     /**
      * Initial loading flag. It is used not to display the login screen
      * when the app first loads, and it has not been checked whether the user
@@ -51,20 +51,22 @@ export type AuthController<UserType extends User = any, ExtraData = any> = {
     loginSkipped: boolean;
     extra: ExtraData;
     setExtra: (extra: ExtraData) => void;
+    setUser?: (user: USER | null) => void;
+    setUserRoles?: (roles: Role[]) => void;
 };
 /**
  * Implement this function to allow access to specific users.
  * @group Hooks and utilities
  */
-export type Authenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>> = (props: {
+export type Authenticator<USER extends User = User> = (props: {
     /**
      * Logged-in user or null
      */
-    user: UserType | null;
+    user: USER | null;
     /**
      * AuthController
      */
-    authController: Controller;
+    authController: AuthController<USER>;
     /**
      * Connector to your database, e.g. your Firestore database
      */

package/dist/types/collections.d.ts

@@ -16,7 +16,7 @@ import { EntityOverrides } from "./entity_overrides";
  *
  * @group Models
  */
-export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = any> {
+export interface EntityCollection<M extends Record<string, any> = any, USER extends User = any> {
     /**
      * You can set an alias that will be used internally instead of the `path`.
      * The `alias` value will be used to determine the URL of the collection,
@@ -122,7 +122,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * Permissions the logged-in user can perform on this collection.
      * If not specified everything defaults to `true`.
      */
-    permissions?: Permissions | PermissionsBuilder<EntityCollection, UserType, M>;
+    permissions?: Permissions | PermissionsBuilder<EntityCollection, USER, M>;
     /**
      * Are the entities in this collection selectable. Defaults to `true`
      */
@@ -138,7 +138,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * is being created, updated or deleted.
      * Useful for adding your own logic or blocking the execution of the operation.
      */
-    callbacks?: EntityCallbacks<M, UserType>;
+    callbacks?: EntityCallbacks<M, USER>;
     /**
      * Builder for rendering additional components such as buttons in the
      * collection toolbar
@@ -167,7 +167,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * }
      * ```
      */
-    entityActions?: EntityAction<M, UserType>[];
+    entityActions?: EntityAction<M, USER>[];
     /**
      * Pass your own selection controller if you want to control selected
      * entities externally.
@@ -212,7 +212,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * You can add additional fields to the collection view by implementing
      * an additional field delegate.
      */
-    additionalFields?: AdditionalFieldDelegate<M, UserType>[];
+    additionalFields?: AdditionalFieldDelegate<M, USER>[];
     /**
      * Default size of the rendered collection
      */
@@ -257,7 +257,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
     /**
      *
      */
-    exportable?: boolean | ExportConfig<UserType>;
+    exportable?: boolean | ExportConfig<USER>;
     /**
      * User id of the owner of this collection. This is used only by plugins, or if you
      * are writing custom code
@@ -283,7 +283,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
  *
  * @group Models
  */
-export interface CollectionActionsProps<M extends Record<string, any> = any, UserType extends User = User, EC extends EntityCollection<M> = EntityCollection<M>> {
+export interface CollectionActionsProps<M extends Record<string, any> = any, USER extends User = User, EC extends EntityCollection<M> = EntityCollection<M>> {
     /**
      * Full collection path of this entity. This is the full path, like
      * `users/1234/addresses`
@@ -314,7 +314,7 @@ export interface CollectionActionsProps<M extends Record<string, any> = any, Use
     /**
      * Context of the app status
      */
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
     /**
      * Count of the entities in this collection
      */
@@ -357,16 +357,16 @@ export type FilterCombination<Key extends string> = Partial<Record<Key, "asc" |
  * @group Models
  */
 export type CollectionSize = "xs" | "s" | "m" | "l" | "xl";
-export type AdditionalFieldDelegateProps<M extends Record<string, any> = any, UserType extends User = User> = {
+export type AdditionalFieldDelegateProps<M extends Record<string, any> = any, USER extends User = User> = {
     entity: Entity<M>;
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
 };
 /**
  * Use this interface for adding additional fields to entity collection views.
  * If you need to do some async loading you can use {@link AsyncPreviewComponent}
  * @group Models
  */
-export interface AdditionalFieldDelegate<M extends Record<string, any> = any, UserType extends User = User> {
+export interface AdditionalFieldDelegate<M extends Record<string, any> = any, USER extends User = User> {
     /**
      * ID of this column. You can use this id in the `properties` field of the
      * collection in any order you want
@@ -383,7 +383,7 @@ export interface AdditionalFieldDelegate<M extends Record<string, any> = any, Us
     /**
      * Builder for the content of the cell for this column
      */
-    Builder?: React.ComponentType<AdditionalFieldDelegateProps<M, UserType>>;
+    Builder?: React.ComponentType<AdditionalFieldDelegateProps<M, USER>>;
     /**
      * If this column needs to update dynamically based on other properties,
      * you can define an array of keys as strings with the

package/dist/types/datasource.d.ts

@@ -177,10 +177,6 @@ export interface DataSourceDelegate {
      * If the data source has been initialised
      */
     initialised?: boolean;
-    /**
-     * If the user is authenticated to use the data source
-     */
-    authenticated?: boolean;
     /**
      * Fetch data from a collection
      * @param path

package/dist/types/entity_actions.d.ts

@@ -8,7 +8,7 @@ import { SideEntityController } from "./side_entity_controller";
  * An entity action is a custom action that can be performed on an entity.
  * They are displayed in the entity view and in the collection view.
  */
-export type EntityAction<M extends object = any, UserType extends User = User> = {
+export type EntityAction<M extends object = any, USER extends User = User> = {
     /**
      * Title of the action
      */
@@ -21,7 +21,7 @@ export type EntityAction<M extends object = any, UserType extends User = User> =
      * Callback when the action is clicked
      * @param props
      */
-    onClick: (props: EntityActionClickProps<M, UserType>) => Promise<void> | void;
+    onClick: (props: EntityActionClickProps<M, USER>) => Promise<void> | void;
     /**
      * Show this action collapsed in the menu of the collection view.
      * Defaults to true
@@ -33,9 +33,9 @@ export type EntityAction<M extends object = any, UserType extends User = User> =
      */
     includeInForm?: boolean;
 };
-export type EntityActionClickProps<M extends object, UserType extends User = User> = {
+export type EntityActionClickProps<M extends object, USER extends User = User> = {
     entity: Entity<M>;
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
     fullPath?: string;
     collection?: EntityCollection<M>;
     selectionController?: SelectionController;

package/dist/types/entity_callbacks.d.ts

@@ -9,29 +9,29 @@ import { User } from "./user";
  * Useful for adding your own logic or blocking the execution of the operation.
  * @group Models
  */
-export type EntityCallbacks<M extends Record<string, any> = any, UserType extends User = User> = {
+export type EntityCallbacks<M extends Record<string, any> = any, USER extends User = User> = {
     /**
      * Callback used after fetching data
      * @param entityFetchProps
      */
-    onFetch?(entityFetchProps: EntityOnFetchProps<M, UserType>): Promise<Entity<M>> | Entity<M>;
+    onFetch?(entityFetchProps: EntityOnFetchProps<M, USER>): Promise<Entity<M>> | Entity<M>;
     /**
      * Callback used when save is successful
      * @param entitySaveProps
      */
-    onSaveSuccess?(entitySaveProps: EntityOnSaveProps<M, UserType>): Promise<void> | void;
+    onSaveSuccess?(entitySaveProps: EntityOnSaveProps<M, USER>): Promise<void> | void;
     /**
      * Callback used when saving fails
      * @param entitySaveProps
      */
-    onSaveFailure?(entitySaveProps: EntityOnSaveFailureProps<M, UserType>): Promise<void> | void;
+    onSaveFailure?(entitySaveProps: EntityOnSaveFailureProps<M, USER>): Promise<void> | void;
     /**
      * Callback used before saving, you need to return the values that will get
      * saved. If you throw an error in this method the process stops, and an
      * error snackbar gets displayed.
      * @param entitySaveProps
      */
-    onPreSave?(entitySaveProps: EntityOnPreSaveProps<M, UserType>): Promise<Partial<EntityValues<M>>> | Partial<EntityValues<M>>;
+    onPreSave?(entitySaveProps: EntityOnPreSaveProps<M, USER>): Promise<Partial<EntityValues<M>>> | Partial<EntityValues<M>>;
     /**
      * Callback used after the entity is deleted.
      * If you throw an error in this method the process stops, and an
@@ -39,13 +39,13 @@ export type EntityCallbacks<M extends Record<string, any> = any, UserType extend
      *
      * @param entityDeleteProps
      */
-    onPreDelete?(entityDeleteProps: EntityOnDeleteProps<M, UserType>): void;
+    onPreDelete?(entityDeleteProps: EntityOnDeleteProps<M, USER>): void;
     /**
      * Callback used after the entity is deleted.
      *
      * @param entityDeleteProps
      */
-    onDelete?(entityDeleteProps: EntityOnDeleteProps<M, UserType>): void;
+    onDelete?(entityDeleteProps: EntityOnDeleteProps<M, USER>): void;
     /**
      * Callback fired when any value in the form changes. You can use it
      * to define the ID of a `new` entity based on the current values.
@@ -59,11 +59,11 @@ export type EntityCallbacks<M extends Record<string, any> = any, UserType extend
  * Parameters passed to hooks when an entity is fetched
  * @group Models
  */
-export interface EntityOnFetchProps<M extends Record<string, any> = any, UserType extends User = User> {
+export interface EntityOnFetchProps<M extends Record<string, any> = any, USER extends User = User> {
     /**
      * Collection of the entity
      */
-    collection: EntityCollection<M, UserType>;
+    collection: EntityCollection<M, USER>;
     /**
      * Full path of the CMS where this collection is being fetched.
      * Might contain unresolved aliases.
@@ -76,27 +76,27 @@ export interface EntityOnFetchProps<M extends Record<string, any> = any, UserTyp
     /**
      * Context of the app status
      */
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
 }
 /**
  * Parameters passed to hooks before an entity is saved
  * @group Models
  */
-export type EntityOnPreSaveProps<M extends Record<string, any> = any, UserType extends User = User> = Omit<EntityOnSaveProps<M, UserType>, "entityId"> & {
+export type EntityOnPreSaveProps<M extends Record<string, any> = any, USER extends User = User> = Omit<EntityOnSaveProps<M, USER>, "entityId"> & {
     entityId?: string;
 };
 /**
  * Parameters passed to hooks before an entity is saved
  * @group Models
  */
-export type EntityOnSaveFailureProps<M extends Record<string, any> = any, UserType extends User = User> = Omit<EntityOnSaveProps<M, UserType>, "entityId"> & {
+export type EntityOnSaveFailureProps<M extends Record<string, any> = any, USER extends User = User> = Omit<EntityOnSaveProps<M, USER>, "entityId"> & {
     entityId?: string;
 };
 /**
  * Parameters passed to hooks when an entity is saved
  * @group Models
  */
-export interface EntityOnSaveProps<M extends Record<string, any> = any, UserType extends User = User> {
+export interface EntityOnSaveProps<M extends Record<string, any> = any, USER extends User = User> {
     /**
      * Resolved collection of the entity
      */
@@ -129,13 +129,13 @@ export interface EntityOnSaveProps<M extends Record<string, any> = any, UserType
     /**
      * Context of the app status
      */
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
 }
 /**
  * Parameters passed to hooks when an entity is deleted
  * @group Models
  */
-export interface EntityOnDeleteProps<M extends Record<string, any> = any, UserType extends User = User> {
+export interface EntityOnDeleteProps<M extends Record<string, any> = any, USER extends User = User> {
     /**
      * collection of the entity being deleted
      */
@@ -155,7 +155,7 @@ export interface EntityOnDeleteProps<M extends Record<string, any> = any, UserTy
     /**
      * Context of the app status
      */
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
 }
 /**
  * Parameters passed to hooks when an entity is deleted

package/dist/types/export_import.d.ts

@@ -6,16 +6,16 @@ import { FireCMSContext } from "./firecms_context";
  * exports
  * @group Models
  */
-export interface ExportConfig<UserType extends User = User> {
-    additionalFields: ExportMappingFunction<UserType>[];
+export interface ExportConfig<USER extends User = User> {
+    additionalFields: ExportMappingFunction<USER>[];
 }
 /**
  * @group Models
  */
-export interface ExportMappingFunction<UserType extends User = User> {
+export interface ExportMappingFunction<USER extends User = User> {
     key: string;
     builder: ({ entity, context }: {
         entity: Entity<any>;
-        context: FireCMSContext<UserType>;
+        context: FireCMSContext<USER>;
     }) => Promise<string> | string;
 }

package/dist/types/firecms.d.ts

@@ -44,7 +44,7 @@ export type CMSViewsBuilder = (params: {
 /**
  * @group Models
  */
-export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
+export type FireCMSProps<USER extends User, EC extends EntityCollection> = {
     /**
      * Use this function to return the components you want to render under
      * FireCMS
@@ -105,7 +105,7 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
     /**
      * Delegate for implementing your auth operations.
      */
-    authController: AuthController<UserType>;
+    authController: AuthController<USER>;
     /**
      * Use this controller to access the configuration that is stored locally,
      * and not defined in code

package/dist/types/firecms_context.d.ts

@@ -17,7 +17,7 @@ import { AnalyticsController } from "./analytics_controller";
  * @group Hooks and utilities
  * @see useFireCMSContext
  */
-export type FireCMSContext<UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>> = {
+export type FireCMSContext<USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>> = {
     /**
      * Connector to your database, e.g. your Firestore database
      */

package/dist/types/permissions.d.ts

@@ -30,7 +30,7 @@ export interface Permissions {
  * Props passed to a {@link PermissionsBuilder}
  * @group Models
  */
-export interface PermissionsBuilderProps<EC extends EntityCollection = EntityCollection, UserType extends User = User, M extends object = InferCollectionType<EC>> {
+export interface PermissionsBuilderProps<EC extends EntityCollection = EntityCollection, USER extends User = User, M extends object = InferCollectionType<EC>> {
     /**
      * Entity being edited, might be null in some cases, when the operation
      * refers to the collection.
@@ -49,7 +49,7 @@ export interface PermissionsBuilderProps<EC extends EntityCollection = EntityCol
     /**
      * Logged in user
      */
-    user: UserType | null;
+    user: USER | null;
     /**
      * Collection these permissions apply to
      */
@@ -57,11 +57,11 @@ export interface PermissionsBuilderProps<EC extends EntityCollection = EntityCol
     /**
      * Auth controller
      */
-    authController: AuthController<UserType>;
+    authController: AuthController<USER>;
 }
 /**
  * Builder used to assign permissions to entities,
  * based on the logged user or collection.
  * @group Models
  */
-export type PermissionsBuilder<EC extends EntityCollection = EntityCollection, UserType extends User = User, M extends object = InferCollectionType<EC>> = (({ pathSegments, user, collection, authController }: PermissionsBuilderProps<EC, UserType, M>) => Permissions | undefined);
+export type PermissionsBuilder<EC extends EntityCollection = EntityCollection, USER extends User = User, M extends object = InferCollectionType<EC>> = (({ pathSegments, user, collection, authController }: PermissionsBuilderProps<EC, USER, M>) => Permissions | undefined);

package/dist/types/plugins.d.ts

@@ -138,7 +138,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
  *
  * @group Models
  */
-export interface PluginHomePageActionsProps<EP extends object = object, M extends Record<string, any> = any, UserType extends User = User, EC extends EntityCollection<M> = EntityCollection<M>> {
+export interface PluginHomePageActionsProps<EP extends object = object, M extends Record<string, any> = any, USER extends User = User, EC extends EntityCollection<M> = EntityCollection<M>> {
     /**
      * Collection path of this entity. This is the full path, like
      * `users/1234/addresses`
@@ -151,16 +151,16 @@ export interface PluginHomePageActionsProps<EP extends object = object, M extend
     /**
      * Context of the app status
      */
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
     extraProps?: EP;
 }
-export interface PluginFormActionProps<UserType extends User = User, EC extends EntityCollection = EntityCollection> {
+export interface PluginFormActionProps<USER extends User = User, EC extends EntityCollection = EntityCollection> {
     entityId?: string;
     path: string;
     status: EntityStatus;
     collection: EC;
     formContext?: FormContext<any>;
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
     currentEntityId?: string;
 }
 export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any, EC extends EntityCollection<M> = EntityCollection<M>> = {
@@ -172,10 +172,10 @@ export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Reco
     path?: string;
     collection?: EC;
 };
-export interface PluginGenericProps<UserType extends User = User> {
-    context: FireCMSContext<UserType>;
+export interface PluginGenericProps<USER extends User = User> {
+    context: FireCMSContext<USER>;
 }
-export interface PluginHomePageAdditionalCardsProps<UserType extends User = User> {
+export interface PluginHomePageAdditionalCardsProps<USER extends User = User> {
     group?: string;
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
 }

package/dist/types/user.d.ts

@@ -38,4 +38,5 @@ export type User = {
      *
      */
     roles?: Role[];
+    getIdToken?: (forceRefresh?: boolean) => Promise<string>;
 };

package/dist/util/builders.d.ts

@@ -5,7 +5,7 @@ import { AdditionalFieldDelegate, ArrayProperty, BooleanProperty, CMSType, DateP
  * @param collection
  * @group Builder
  */
-export declare function buildCollection<M extends Record<string, any> = any, UserType extends User = User>(collection: EntityCollection<M, UserType>): EntityCollection<M, UserType>;
+export declare function buildCollection<M extends Record<string, any> = any, USER extends User = User>(collection: EntityCollection<M, USER>): EntityCollection<M, USER>;
 /**
  * Identity function we use to defeat the type system of Typescript and preserve
  * the property keys.
@@ -54,7 +54,7 @@ export declare function buildEntityCallbacks<M extends Record<string, any> = any
  * @param additionalFieldDelegate
  * @group Builder
  */
-export declare function buildAdditionalFieldDelegate<M extends Record<string, any>, UserType extends User = User>(additionalFieldDelegate: AdditionalFieldDelegate<M, UserType>): AdditionalFieldDelegate<M, UserType>;
+export declare function buildAdditionalFieldDelegate<M extends Record<string, any>, USER extends User = User>(additionalFieldDelegate: AdditionalFieldDelegate<M, USER>): AdditionalFieldDelegate<M, USER>;
 /**
  * Identity function we use to defeat the type system of Typescript and build
  * additional field delegates views with all its properties

package/dist/util/permissions.d.ts

@@ -1,5 +1,5 @@
 import { AuthController, Entity, EntityCollection, Permissions, User } from "../types";
-export declare function resolvePermissions<M extends Record<string, any>, UserType extends User>(collection: EntityCollection<M>, authController: AuthController<UserType>, path: string, entity: Entity<M> | null): Permissions | undefined;
-export declare function canEditEntity<M extends Record<string, any>, UserType extends User>(collection: EntityCollection<M>, authController: AuthController<UserType>, path: string, entity: Entity<M> | null): boolean;
-export declare function canCreateEntity<M extends Record<string, any>, UserType extends User>(collection: EntityCollection<M>, authController: AuthController<UserType>, path: string, entity: Entity<M> | null): boolean;
-export declare function canDeleteEntity<M extends Record<string, any>, UserType extends User>(collection: EntityCollection<M>, authController: AuthController<UserType>, path: string, entity: Entity<M> | null): boolean;
+export declare function resolvePermissions<M extends Record<string, any>, USER extends User>(collection: EntityCollection<M>, authController: AuthController<USER>, path: string, entity: Entity<M> | null): Permissions | undefined;
+export declare function canEditEntity<M extends Record<string, any>, USER extends User>(collection: EntityCollection<M>, authController: AuthController<USER>, path: string, entity: Entity<M> | null): boolean;
+export declare function canCreateEntity<M extends Record<string, any>, USER extends User>(collection: EntityCollection<M>, authController: AuthController<USER>, path: string, entity: Entity<M> | null): boolean;
+export declare function canDeleteEntity<M extends Record<string, any>, USER extends User>(collection: EntityCollection<M>, authController: AuthController<USER>, path: string, entity: Entity<M> | null): boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.144",
+    "version": "3.0.0-canary.145",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,9 +46,9 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/editor": "^3.0.0-canary.144",
-        "@firecms/formex": "^3.0.0-canary.144",
-        "@firecms/ui": "^3.0.0-canary.144",
+        "@firecms/editor": "^3.0.0-canary.145",
+        "@firecms/formex": "^3.0.0-canary.145",
+        "@firecms/ui": "^3.0.0-canary.145",
         "@hello-pangea/dnd": "^17.0.0",
         "@radix-ui/react-portal": "^1.1.2",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "8f862289db623ffd350e61e4ab4a06957ed97bdf",
+    "gitHead": "e5d660f00c5806e1b63839c013af3c973f3dd47e",
     "publishConfig": {
         "access": "public"
     },

package/src/app/Scaffold.tsx

@@ -91,7 +91,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                 autoOpenDrawer
             }}>
                 <div
-                    className={cls("flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden", className)}
+                    className={cls("flex h-screen w-screen bg-surface-50 dark:bg-surface-900 text-surface-900 dark:text-white overflow-hidden", className)}
                     style={{
                         paddingTop: "env(safe-area-inset-top)",
                         paddingLeft: "env(safe-area-inset-left)",
@@ -168,7 +168,7 @@ function DrawerWrapper(props: {
                      sideOffset={12}
                      asChild={true}>
                 <div
-                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20">
+                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-3 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
                     <IconButton
                         color="inherit"
                         aria-label="Open menu"

package/src/components/ArrayContainer.tsx

@@ -256,7 +256,7 @@ export function ArrayContainerItem({
         {...provided.draggableProps}
         style={provided.draggableProps.style}
         className={`${
-            !isDragging ? "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20" : ""
+            !isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""
         } rounded-md opacity-100`}
     >
         <div

package/src/components/CircularProgressCenter.tsx

@@ -13,7 +13,7 @@ export function CircularProgressCenter({ text, ...props }: CircularProgressProps
 }) {
     return (
         <div
-            className="flex w-full h-screen max-h-full max-w-full bg-gray-50 dark:bg-gray-900 gap-4">
+            className="flex w-full h-screen max-h-full max-w-full bg-surface-50 dark:bg-surface-900 gap-4">
             <div className="m-auto flex flex-col gap-2 items-center">
                 <CircularProgress {...props}/>
                 {text && <Typography

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -66,7 +66,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     return (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
             style={{

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -41,7 +41,7 @@ import { getRowHeight } from "../common/table_height";
  * @see VirtualTable
  * @group Components
  */
-export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
+export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, USER extends User>
 ({
      className,
      style,
@@ -84,7 +84,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
     const largeLayout = useLargeLayout();
     const selectedEntities = (selectionController?.selectedEntities?.length > 0 ? selectionController?.selectedEntities : highlightedEntities)?.filter(Boolean);
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [size, setSize] = React.useState<CollectionSize>(defaultSize ?? "m");
 
@@ -98,12 +98,12 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const onTextSearch = useCallback((newSearchString?: string) => tableController.setSearchString?.(newSearchString), []);
 
-    const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, UserType>> = useMemo(() => {
+    const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, USER>> = useMemo(() => {
         return (additionalFields
             ? additionalFields
                 .map((aC) => ({ [aC.key]: aC as AdditionalFieldDelegate<M, any> }))
                 .reduce((a, b) => ({ ...a, ...b }), {})
-            : {}) as Record<string, AdditionalFieldDelegate<M, UserType>>;
+            : {}) as Record<string, AdditionalFieldDelegate<M, USER>>;
     }, [additionalFields]);
 
     const customFieldValidator: CustomFieldValidator | undefined = uniqueFieldValidator;
@@ -292,7 +292,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         <div ref={ref}
              style={style}
-             className={cls("h-full w-full flex flex-col bg-white dark:bg-gray-950", className)}>
+             className={cls("h-full w-full flex flex-col bg-white dark:bg-surface-950", className)}>
 
             <CollectionTableToolbar
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -16,7 +16,7 @@ import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from ".
  * @group Collection components
  */
 export type EntityCollectionTableProps<M extends Record<string, any>,
-    UserType extends User = User> = {
+    USER extends User = User> = {
 
     className?: string;
 
@@ -103,7 +103,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     inlineEditing?: boolean;
 
-    additionalFields?: AdditionalFieldDelegate<M, UserType>[];
+    additionalFields?: AdditionalFieldDelegate<M, USER>[];
 
     defaultSize?: CollectionSize;
 

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

@@ -154,14 +154,14 @@ export const TableReferenceFieldInternal = React.memo(
                         className={cls("px-4 py-2 text-sm font-medium flex items-center uppercase",
                             multiselect ? "gap-4" : "gap-6",
                             disabled
-                                ? "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={handleOpen}
                         size={"medium"}>
                         <IconForView
                             size={"small"}
                             collectionOrView={collection}
-                            className={"text-gray-300 dark:text-gray-600"}/>
+                            className={"text-surface-300 dark:text-surface-600"}/>
                         Edit {title}
                     </EntityPreviewContainer>}