@vertesia/ui 1.5.0-dev.20260905.011013Z → 1.5.0-dev.20260910.052912Z

package/src/features/permissions/useRoleMappings.ts

@@ -0,0 +1,105 @@
+import type { VertesiaClient } from '@vertesia/client';
+import type { AuthTokenPayload, SystemRoleDefinition } from '@vertesia/common';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+type RoleMappingsState =
+    | { status: 'loading' | 'retrying' }
+    | { status: 'ready'; roles: SystemRoleDefinition[] }
+    | { status: 'error'; error?: unknown };
+
+export function roleMappingsErrorStatus(error: unknown): number | undefined {
+    if (error && typeof error === 'object' && 'status' in error && typeof error.status === 'number') {
+        return error.status;
+    }
+    return undefined;
+}
+
+function isTransient(error: unknown): boolean {
+    const status = roleMappingsErrorStatus(error);
+    return (
+        status === 0 ||
+        status === 502 ||
+        status === 503 ||
+        status === 504 ||
+        (error instanceof Error && error.name === 'TimeoutError')
+    );
+}
+
+/** Each session gets an independent, cancellable recovery window. Never reuse another session's roles. */
+export function useRoleMappings(client: VertesiaClient, authToken?: AuthTokenPayload) {
+    // UserSession.rawAuthToken decodes the cached JWT on each authenticated request.
+    // Object identity would restart recovery on every failure (or success), forever.
+    // Preserve all claims in the identity: subject/account/expiry can stay the same
+    // when project, roles, or other authorization claims change.
+    const tokenKey = useMemo(() => (authToken ? JSON.stringify(authToken) : undefined), [authToken]);
+    const needsMappings = Boolean(authToken && !authToken.permissions);
+    const [attempt, setAttempt] = useState(0);
+    const [result, setResult] = useState<{
+        client: VertesiaClient;
+        tokenKey: string | undefined;
+        attempt: number;
+        state: RoleMappingsState;
+    }>();
+    const retry = useCallback(() => setAttempt((value) => value + 1), []);
+
+    useEffect(() => {
+        if (!needsMappings) return;
+
+        const controller = new AbortController();
+        let stopped = false;
+        let failures = 0;
+        let lastError: unknown;
+        let retryTimer: ReturnType<typeof setTimeout> | undefined;
+        const update = (state: RoleMappingsState) => setResult({ client, tokenKey, attempt, state });
+        const stop = () => {
+            stopped = true;
+            clearTimeout(slowTimer);
+            clearTimeout(deadlineTimer);
+            clearTimeout(retryTimer);
+            controller.abort();
+        };
+        const slowTimer = setTimeout(() => update({ status: 'retrying' }), 5_000);
+        // Bound the whole recovery window, including requests that never settle.
+        const deadlineTimer = setTimeout(() => {
+            stop();
+            update({ status: 'error', error: lastError });
+        }, 60_000);
+
+        const fetchRoles = async () => {
+            try {
+                const roles = await client.iam.roles.listSystem({
+                    signal: controller.signal,
+                    timeoutMs: 15_000,
+                    // This hook owns backoff and the overall deadline, not the client's retry policy.
+                    retryPolicy: false,
+                });
+                if (stopped) return;
+                stop();
+                update({ status: 'ready', roles });
+            } catch (error) {
+                if (stopped) return;
+                lastError = error;
+                if (!isTransient(error)) {
+                    stop();
+                    update({ status: 'error', error });
+                    return;
+                }
+                update({ status: 'retrying' });
+                const delay = Math.min(1_000 * 2 ** failures++, 8_000) * (0.5 + Math.random() * 0.5);
+                retryTimer = setTimeout(() => {
+                    void fetchRoles();
+                }, delay);
+            }
+        };
+
+        update({ status: 'loading' });
+        void fetchRoles();
+        return stop;
+    }, [client, tokenKey, needsMappings, attempt]);
+
+    const state: RoleMappingsState =
+        result?.client === client && result.tokenKey === tokenKey && result.attempt === attempt
+            ? result.state
+            : { status: 'loading' };
+    return { state, retry };
+}

package/src/features/store/collections/SelectCollection.tsx

@@ -217,7 +217,7 @@ export function SelectCollection({
                             placeholder={resolvedSearchPlaceholder}
                             value={searchQuery}
                             onValueChange={handleSearchChange}
-                            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted disabled:cursor-not-allowed disabled:opacity-50"
                         />
                         {isSearching && (
                             <div className="me-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />

package/src/features/store/objects/DocumentPreviewPanel.tsx

@@ -127,13 +127,13 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
 
     return (
         <div
-            className={`fixed inset-y-0 end-0 w-2/5 dark:bg-slate-900 shadow-xl z-50 flex flex-col transition-transform duration-300 transform ${panelTranslateClass}`}
+            className={`fixed inset-y-0 end-0 w-2/5 dark:bg-muted shadow-xl z-50 flex flex-col transition-transform duration-300 transform ${panelTranslateClass}`}
         >
             {/* Header */}
-            <div className="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700 bg-gradient-to-r from-indigo-50 to-gray-50 dark:from-gray-800 dark:to-gray-900">
+            <div className="flex items-center justify-between px-4 py-3 border-b dark:border-border bg-gradient-to-r from-indigo-50 to-gray-50 dark:from-gray-800 dark:to-gray-900">
                 <div className="flex items-center">
-                    <FileText className="h-5 w-5 text-indigo-600 me-2" />
-                    <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200 truncate">
+                    <FileText className="h-5 w-5 text-primary me-2" />
+                    <h2 className="text-lg font-semibold text-foreground truncate">
                         {isLoading ? t('store.loadingDocument') : object?.name || t('store.documentPreview')}
                     </h2>
                 </div>
@@ -142,7 +142,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                         variant="ghost"
                         size="sm"
                         onClick={handleViewFullDocument}
-                        className="flex items-center gap-1 text-indigo-600 hover:text-indigo-800"
+                        className="flex items-center gap-1 text-primary hover:text-primary"
                     >
                         <Maximize2 className="h-4 w-4" />
                         <span>{t('store.fullView')}</span>
@@ -151,7 +151,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                         variant="ghost"
                         size="sm"
                         onClick={onClose}
-                        className="flex items-center text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100"
+                        className="flex items-center text-muted hover:text-foreground dark:text-foreground"
                     >
                         <X className="h-5 w-5" />
                     </Button>
@@ -162,8 +162,8 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
             {isLoading ? (
                 <div className="flex-1 flex items-center justify-center">
                     <div className="text-center">
-                        <Spinner size="lg" className="text-indigo-600 dark:text-indigo-400 mb-2" />
-                        <p className="text-gray-600 dark:text-gray-400">{t('store.loadingDocument')}</p>
+                        <Spinner size="lg" className="text-primary mb-2" />
+                        <p className="text-muted">{t('store.loadingDocument')}</p>
                     </div>
                 </div>
             ) : (
@@ -175,8 +175,8 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 variant="unstyled"
                                 className={`py-2 px-4 font-medium border-b-2 ${
                                     currentTab === 'preview'
-                                        ? 'border-indigo-600 text-indigo-700 dark:text-indigo-300'
-                                        : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+                                        ? 'border-primary text-primary'
+                                        : 'border-transparent text-muted hover:text-foreground'
                                 }`}
                                 onClick={() => setCurrentTab('preview')}
                             >
@@ -189,8 +189,8 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 variant="unstyled"
                                 className={`py-2 px-4 font-medium border-b-2 ${
                                     currentTab === 'properties'
-                                        ? 'border-indigo-600 text-indigo-700 dark:text-indigo-300'
-                                        : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+                                        ? 'border-primary text-primary'
+                                        : 'border-transparent text-muted hover:text-foreground'
                                 }`}
                                 onClick={() => setCurrentTab('properties')}
                             >
@@ -209,16 +209,16 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 {/* Text/Markdown Content */}
                                 {loadingText ? (
                                     <div className="flex items-center justify-center h-40">
-                                        <Spinner size="md" className="text-indigo-600 dark:text-indigo-400" />
+                                        <Spinner size="md" className="text-primary" />
                                     </div>
                                 ) : text ? (
-                                    <div className="shadow rounded-md p-4 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+                                    <div className="shadow rounded-md p-4 border border-border bg-white dark:bg-muted">
                                         {seemsMarkdown ? (
-                                            <div className="prose prose-sm max-w-none prose-p:my-2 prose-pre:bg-gray-800 prose-pre:my-2 prose-headings:text-indigo-700 dark:prose-invert dark:prose-headings:text-indigo-300">
+                                            <div className="prose prose-sm max-w-none prose-p:my-2 prose-pre:bg-muted prose-pre:my-2 prose-headings:text-primary dark:prose-invert">
                                                 <MarkdownRenderer>{text}</MarkdownRenderer>
                                             </div>
                                         ) : (
-                                            <pre className="text-wrap whitespace-pre-wrap dark:text-gray-200">
+                                            <pre className="text-wrap whitespace-pre-wrap dark:text-foreground">
                                                 {text}
                                             </pre>
                                         )}
@@ -229,7 +229,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 {isImage && (
                                     <div className="mt-4">
                                         {imageUrl ? (
-                                            <div className="border border-gray-200 dark:border-gray-700 rounded-md p-2 bg-white dark:bg-gray-800">
+                                            <div className="border border-border rounded-md p-2 bg-white dark:bg-muted">
                                                 <img
                                                     src={imageUrl}
                                                     alt={object?.name}
@@ -238,7 +238,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                             </div>
                                         ) : (
                                             <div className="flex items-center justify-center h-40">
-                                                <Spinner size="md" className="text-indigo-600 dark:text-indigo-400" />
+                                                <Spinner size="md" className="text-primary" />
                                             </div>
                                         )}
                                     </div>
@@ -246,14 +246,12 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
 
                                 {/* PDF Content Notice */}
                                 {isPdf && (
-                                    <div className="flex flex-col items-center justify-center h-64 border border-gray-200 dark:border-gray-700 rounded-md p-4 bg-gray-50 dark:bg-gray-800">
-                                        <FileText className="h-16 w-16 text-indigo-300 dark:text-indigo-400 mb-4" />
-                                        <p className="text-gray-600 dark:text-gray-400 text-center mb-4">
-                                            {t('store.pdfPreviewFullView')}
-                                        </p>
+                                    <div className="flex flex-col items-center justify-center h-64 border border-border rounded-md p-4 bg-muted">
+                                        <FileText className="h-16 w-16 text-primary mb-4" />
+                                        <p className="text-muted text-center mb-4">{t('store.pdfPreviewFullView')}</p>
                                         <Button
                                             onClick={handleViewFullDocument}
-                                            className="bg-indigo-600 hover:bg-indigo-700 text-white"
+                                            className="bg-primary hover:bg-primary text-white"
                                         >
                                             {t('store.openFullDocumentView')}
                                         </Button>
@@ -262,11 +260,9 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
 
                                 {/* No Content Notice */}
                                 {!isImage && !text && !isPdf && !loadingText && (
-                                    <div className="flex flex-col items-center justify-center h-64 border border-gray-200 dark:border-gray-700 rounded-md p-4 bg-gray-50 dark:bg-gray-800">
-                                        <FileText className="h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" />
-                                        <p className="text-gray-600 dark:text-gray-400 text-center">
-                                            {t('store.noPreviewAvailable')}
-                                        </p>
+                                    <div className="flex flex-col items-center justify-center h-64 border border-border rounded-md p-4 bg-muted">
+                                        <FileText className="h-16 w-16 text-foreground dark:text-muted mb-4" />
+                                        <p className="text-muted text-center">{t('store.noPreviewAvailable')}</p>
                                     </div>
                                 )}
                             </div>
@@ -275,56 +271,50 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                         {currentTab === 'properties' && object && (
                             <div className="h-full">
                                 {object.properties ? (
-                                    <div className="shadow rounded-md p-4 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+                                    <div className="shadow rounded-md p-4 border border-border bg-white dark:bg-muted">
                                         <JSONDisplay value={object.properties} />
                                     </div>
                                 ) : (
-                                    <div className="flex flex-col items-center justify-center h-64 border border-gray-200 dark:border-gray-700 rounded-md p-4 bg-gray-50 dark:bg-gray-800">
-                                        <Info className="h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" />
-                                        <p className="text-gray-600 dark:text-gray-400 text-center">
-                                            {t('store.noPropertiesAvailable')}
-                                        </p>
+                                    <div className="flex flex-col items-center justify-center h-64 border border-border rounded-md p-4 bg-muted">
+                                        <Info className="h-16 w-16 text-foreground dark:text-muted mb-4" />
+                                        <p className="text-muted text-center">{t('store.noPropertiesAvailable')}</p>
                                     </div>
                                 )}
 
                                 <div className="mt-4">
-                                    <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                                    <h3 className="text-sm font-semibold text-foreground mb-2">
                                         {t('store.documentInformation')}
                                     </h3>
-                                    <div className="shadow rounded-md p-4 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+                                    <div className="shadow rounded-md p-4 border border-border bg-white dark:bg-muted">
                                         <div className="grid grid-cols-2 gap-y-2 gap-x-4 text-sm">
-                                            <div className="text-gray-500 dark:text-gray-400">{t('store.id')}</div>
-                                            <div className="font-medium dark:text-gray-200">{object.id}</div>
+                                            <div className="text-muted">{t('store.id')}</div>
+                                            <div className="font-medium dark:text-foreground">{object.id}</div>
 
-                                            <div className="text-gray-500 dark:text-gray-400">
-                                                {t('store.contentType')}
-                                            </div>
-                                            <div className="font-medium dark:text-gray-200">
+                                            <div className="text-muted">{t('store.contentType')}</div>
+                                            <div className="font-medium dark:text-foreground">
                                                 {object.type?.name || t('store.unknown')}
                                             </div>
 
-                                            <div className="text-gray-500 dark:text-gray-400">
-                                                {t('store.contentType')}
-                                            </div>
-                                            <div className="font-medium dark:text-gray-200">
+                                            <div className="text-muted">{t('store.contentType')}</div>
+                                            <div className="font-medium dark:text-foreground">
                                                 {object.content?.type || t('store.na')}
                                             </div>
 
-                                            <div className="text-gray-500">{t('store.size')}</div>
+                                            <div className="text-muted">{t('store.size')}</div>
                                             <div className="font-medium">
                                                 {object.content && 'size' in object.content
                                                     ? formatFileSize(object.content.size as number)
                                                     : t('store.unknown')}
                                             </div>
 
-                                            <div className="text-gray-500">{t('store.created')}</div>
+                                            <div className="text-muted">{t('store.created')}</div>
                                             <div className="font-medium">
                                                 {object.created_at
                                                     ? new Date(object.created_at).toLocaleString()
                                                     : t('store.na')}
                                             </div>
 
-                                            <div className="text-gray-500">{t('store.updated')}</div>
+                                            <div className="text-muted">{t('store.updated')}</div>
                                             <div className="font-medium">
                                                 {object.updated_at
                                                     ? new Date(object.updated_at).toLocaleString()
@@ -340,7 +330,7 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
             )}
 
             {/* Footer actions */}
-            <div className="flex items-center justify-between p-4 border-t bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
+            <div className="flex items-center justify-between p-4 border-t bg-muted dark:border-border">
                 <div>
                     {object?.content?.source && (
                         <Button
@@ -363,14 +353,14 @@ export function DocumentPreviewPanel({ objectId, isOpen, onClose }: DocumentPrev
                                 }
                             }}
                             variant="outline"
-                            className="text-indigo-600 border-indigo-300 hover:bg-indigo-50"
+                            className="text-primary border-primary hover:bg-info"
                         >
                             <Download className="h-4 w-4 me-2" />
                             {t('pdf.download')}
                         </Button>
                     )}
                 </div>
-                <Button onClick={handleViewFullDocument} className="bg-indigo-600 hover:bg-indigo-700 text-white">
+                <Button onClick={handleViewFullDocument} className="bg-primary hover:bg-primary text-white">
                     {t('store.openFullDocument')}
                     <ChevronRight className="h-4 w-4 ms-2 cn-rtl-flip" />
                 </Button>

package/src/features/store/objects/DocumentTable.tsx

@@ -213,7 +213,7 @@ function ObjectTableWithDropZone({
             {/* Loading overlay */}
             <div
                 className={clsx(
-                    'bg-white dark:bg-gray-800 opacity-40 absolute inset-0 z-50 flex justify-center items-center',
+                    'bg-white dark:bg-muted opacity-40 absolute inset-0 z-50 flex justify-center items-center',
                     isLoading ? 'block' : 'hidden',
                 )}
             >
@@ -230,7 +230,7 @@ function ObjectTableWithDropZone({
                         onDrop={handleFileDrop}
                         message="Drop files or folders here to upload"
                         className={clsx(
-                            'absolute inset-0 bg-white/90 dark:bg-gray-800/90 pointer-events-auto',
+                            'absolute inset-0 bg-white/90 dark:bg-muted/90 pointer-events-auto',
                             isDragging ? 'flex' : 'hidden',
                         )}
                         buttonLabel="Select Files or Folders"

package/src/features/store/objects/components/DocumentIcon.tsx

@@ -80,12 +80,12 @@ export function DocumentIcon({
 
     return (
         <Card
-            className={`relative flex flex-col border h-fit w-full ${selectedObject?.id === document.id ? 'border-attention border-4' : ''} ${isHighlighted ? 'border-blue-400 dark:border-blue-500 bg-blue-50/50 dark:bg-blue-900/20' : ''}`}
+            className={`relative flex flex-col border h-fit w-full ${selectedObject?.id === document.id ? 'border-attention border-4' : ''} ${isHighlighted ? 'border-info bg-info/50 dark:bg-info/20' : ''}`}
             onClick={() => onRowClick?.(document)}
         >
             {isHighlighted && (
                 <div className="absolute top-2 end-8 z-10">
-                    <CheckIcon className="size-4 text-blue-600 dark:text-blue-400" />
+                    <CheckIcon className="size-4 text-info" />
                 </div>
             )}
             {selection && (
@@ -116,11 +116,11 @@ export function DocumentIcon({
             {renditionUrl && renditionStatus === 'ready' ? (
                 <img src={renditionUrl} alt={renditionAlt} className="w-auto h-48 object-cover rounded-t-xl" />
             ) : (
-                <div className="h-48 bg-gray-700 rounded-t-xl flex items-center justify-center text-muted">
+                <div className="h-48 bg-muted rounded-t-xl flex items-center justify-center text-muted">
                     {renditionStatus}
                 </div>
             )}
-            <Separator className="bg-gray-200 h-[2px]" />
+            <Separator className="bg-muted h-[2px]" />
             <CardContent className="p-2 flex flex-col">
                 <div className="flex flex-col overflow-hidden">
                     <VTooltip placement="top" description={title}>

package/src/features/store/objects/components/DocumentInput.tsx

@@ -73,21 +73,21 @@ export function DocumentInput({ object }: DocumentInputProps) {
                         <Button
                             onClick={clearValue}
                             variant="unstyled"
-                            className="hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-600"
+                            className="hover:text-destructive hover:bg-muted"
                         >
                             <X className="size-5" />
                         </Button>
                     </div>
                 )}
                 <div className="absolute inset-y-0 end-0 flex items-center justify-center">
-                    <Button onClick={on} variant="unstyled" className="hover:bg-gray-100 dark:hover:bg-gray-600">
+                    <Button onClick={on} variant="unstyled" className="hover:bg-muted">
                         <ChevronsUpDown className="size-5" />
                     </Button>
                 </div>
                 <SelectDocumentModal value={actualValue} isOpen={isOn} onClose={onSelect} />
             </div>
             {doc && (
-                <div className="p-1 semibold text-sm text-gray-600 dark:text-slate-300">
+                <div className="p-1 semibold text-sm text-muted dark:text-foreground">
                     {typeof doc.properties?.title === 'string' ? doc.properties.title : doc.name}
                 </div>
             )}

package/src/features/store/objects/components/PropertiesEditorModal.tsx

@@ -196,7 +196,7 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
             >
                 <ModalTitle>{t('store.editProperties')}</ModalTitle>
                 <ModalBody>
-                    <div className="mb-2 text-sm text-gray-500">
+                    <div className="mb-2 text-sm text-muted">
                         {object.type?.name ? (
                             <span>
                                 Editing properties for object type: <strong>{object.type.name}</strong>
@@ -205,7 +205,7 @@ export function PropertiesEditorModal({ isOpen, onClose, object, refetch }: Prop
                             <span>{t('store.editingGenericDocument')}</span>
                         )}
                         {jsonSchema !== null && (
-                            <span className="ms-2 text-green-600">(JSON schema validation enabled)</span>
+                            <span className="ms-2 text-success">(JSON schema validation enabled)</span>
                         )}
                     </div>
                     <div className="h-[75vh] border rounded-md overflow-hidden">

package/src/features/store/objects/components/SaveVersionConfirmModal.tsx

@@ -100,8 +100,8 @@ export function SaveVersionConfirmModal({
             <ModalBody>
                 <div className="space-y-4">
                     {uploadedFileName && (
-                        <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md">
-                            <p className="text-sm text-blue-700 dark:text-blue-300 font-medium">
+                        <div className="mb-4 p-3 bg-info rounded-md">
+                            <p className="text-sm text-info font-medium">
                                 {t('modal.saveVersion.replaceFile')}{' '}
                                 <span className="font-bold">{uploadedFileName}</span>
                             </p>

package/src/features/store/objects/layout/documentLayout.tsx

@@ -53,7 +53,7 @@ export function DocumentTableView({
                     return (
                         <tr
                             key={obj.id}
-                            className={`group cursor-pointer hover:bg-muted ${selectedObject?.id === obj.id ? 'bg-muted' : ''} ${isHighlighted ? 'bg-blue-50 dark:bg-blue-900/20' : ''}`}
+                            className={`group cursor-pointer hover:bg-muted ${selectedObject?.id === obj.id ? 'bg-muted' : ''} ${isHighlighted ? 'bg-info' : ''}`}
                             onClick={() => {
                                 onRowClick?.(obj);
                             }}
@@ -71,9 +71,7 @@ export function DocumentTableView({
                             )}
                             {columns.map((col, index) => col.render(obj, index))}
                             <td className="w-8 text-center">
-                                {isHighlighted && (
-                                    <CheckIcon className="size-4 text-blue-600 dark:text-blue-400 inline-block" />
-                                )}
+                                {isHighlighted && <CheckIcon className="size-4 text-info inline-block" />}
                             </td>
                         </tr>
                     );

package/src/features/store/objects/selection/SelectionActions.tsx

@@ -110,7 +110,7 @@ export function UploadObjectsButton({
 function optionLayout(option: ObjectsActionSpec) {
     return {
         label: option.name,
-        className: clsx('flex-1 px-2 py-2 hover:bg-accent nowrap', option.destructive ? 'text-destructive' : ''),
+        className: clsx('flex-1 px-2 py-2 hover:bg-muted nowrap', option.destructive ? 'text-destructive' : ''),
     };
 }