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

package/src/session/auth/domainRouting.test.ts

@@ -1,7 +1,12 @@
-import { afterEach, describe, expect, it } from 'vitest';
+import { Env } from '@vertesia/ui/env';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
     centralAuthRedirectUrl,
+    clearCentralAuthRoundTripMarker,
+    isCentralAuthRedirectPending,
+    markCentralAuthRoundTripStarted,
     mountRootUrl,
+    redirectToCentralAuth,
     shouldRedirectToCentralAuth,
     shouldUseFirebaseAuth,
 } from './domainRouting';
@@ -74,3 +79,166 @@ describe('domainRouting', () => {
         });
     });
 });
+
+// The boot-time counterpart of the redirect UserSessionProvider performs after mounting. It must
+// answer true only when that provider is certain to redirect, because an app's entry module skips
+// the whole React tree on the strength of it -- and false whenever the answer is not certain, which
+// only costs the (current) wasted boot.
+describe('isCentralAuthRedirectPending', () => {
+    function initEnv(props: {
+        isLocalDev?: boolean;
+        devAuthToken?: string;
+        authTokenProvider?: () => Promise<string>;
+    }) {
+        Env.init({
+            name: 'test',
+            version: '0',
+            isDocker: false,
+            type: 'development',
+            isLocalDev: props.isLocalDev ?? false,
+            devAuthToken: props.devAuthToken,
+            authTokenProvider: props.authTokenProvider,
+            endpoints: { studio: 'https://studio.test', zeno: 'https://zeno.test', sts: 'https://sts.test' },
+        });
+    }
+
+    function setLocation(hash: string) {
+        (globalThis as { window?: unknown }).window = { AUTH_MODE: 'central', location: { hash } };
+    }
+
+    afterEach(() => {
+        delete (globalThis as { window?: unknown }).window;
+    });
+
+    it('is true for a plain cold load in central-auth mode', () => {
+        initEnv({});
+        setLocation('');
+        expect(isCentralAuthRedirectPending()).toBe(true);
+    });
+
+    it('is false when AUTH_MODE is firebase, which signs in without the broker', () => {
+        initEnv({});
+        (globalThis as { window?: unknown }).window = { AUTH_MODE: 'firebase', location: { hash: '' } };
+        expect(isCentralAuthRedirectPending()).toBe(false);
+    });
+
+    it('is false on the return leg carrying both token and state', () => {
+        initEnv({});
+        setLocation('#token=abc&state=xyz');
+        expect(isCentralAuthRedirectPending()).toBe(false);
+    });
+
+    // A hash with only one half of the pair is not a usable return leg: UserSessionProvider falls
+    // through to a fresh redirect, so the shortcut must agree.
+    it('is true when the hash carries a token but no state', () => {
+        initEnv({});
+        setLocation('#token=abc');
+        expect(isCentralAuthRedirectPending()).toBe(true);
+    });
+
+    it('is true when the hash carries a state but no token', () => {
+        initEnv({});
+        setLocation('#state=xyz');
+        expect(isCentralAuthRedirectPending()).toBe(true);
+    });
+
+    it('is false when a host app injects a token provider', () => {
+        initEnv({ authTokenProvider: async () => 'injected' });
+        setLocation('');
+        expect(isCentralAuthRedirectPending()).toBe(false);
+    });
+
+    it('is false in local development with a dev auth token', () => {
+        initEnv({ isLocalDev: true, devAuthToken: 'dev-token' });
+        setLocation('');
+        expect(isCentralAuthRedirectPending()).toBe(false);
+    });
+
+    it('is true in local development without a dev auth token', () => {
+        initEnv({ isLocalDev: true });
+        setLocation('');
+        expect(isCentralAuthRedirectPending()).toBe(true);
+    });
+});
+
+// The marker exists for a server that generates the page: it is the only way to tell the leg that
+// is about to redirect from the leg that came back, since the token returns in the URL fragment and
+// never reaches a server. Its exact attributes are the contract -- a cookie the browser refuses to
+// store, or one that is not sent on the top-level navigation back from the broker, degrades to "no
+// marker" silently and costs a round-trip on every load instead.
+describe('central auth round-trip marker', () => {
+    function setProtocol(protocol: string): { cookie: string } {
+        const document = { cookie: '' };
+        (globalThis as { window?: unknown }).window = { location: { protocol } };
+        (globalThis as { document?: unknown }).document = document;
+        return document;
+    }
+
+    afterEach(() => {
+        delete (globalThis as { window?: unknown }).window;
+        delete (globalThis as { document?: unknown }).document;
+    });
+
+    it('sets a short-lived, root-scoped cookie that survives the navigation back from the broker', () => {
+        const document = setProtocol('https:');
+        markCentralAuthRoundTripStarted();
+        // Lax, not Strict: the return leg is a cross-site top-level GET, which Strict would drop.
+        expect(document.cookie).toBe('vtsauth=1; Path=/; Max-Age=300; SameSite=Lax; Secure');
+    });
+
+    it('omits Secure over http so local development keeps the marker', () => {
+        const document = setProtocol('http:');
+        markCentralAuthRoundTripStarted();
+        expect(document.cookie).toBe('vtsauth=1; Path=/; Max-Age=300; SameSite=Lax');
+    });
+
+    it('expires the cookie on the same path when the app mounts', () => {
+        const document = setProtocol('https:');
+        clearCentralAuthRoundTripMarker();
+        // Same name and Path, or the browser keeps the original cookie alongside this one.
+        expect(document.cookie).toBe('vtsauth=; Path=/; Max-Age=0; SameSite=Lax; Secure');
+    });
+});
+
+// The shared redirect must preserve release/1.5's gateway selection and write state that
+// the provider's hook accepts when the broker returns.
+describe('redirectToCentralAuth', () => {
+    afterEach(() => {
+        vi.unstubAllGlobals();
+        sessionStorage.clear();
+        Env.init();
+    });
+
+    it('keeps the gateway mount and selection, records state, and marks the round trip before navigating', async () => {
+        const { verifyAuthState, clearAuthState } = await import('./authState');
+        const mount = 'https://apps.test/tenants/t/apps/a/versions/v/app/';
+        const document = { baseURI: mount, cookie: '' };
+        const replace = vi.fn((target: string) => {
+            const url = new URL(target);
+            expect(document.cookie).toBe('vtsauth=1; Path=/; Max-Age=300; SameSite=Lax; Secure');
+            expect(verifyAuthState(url.searchParams.get('state'))).toBeUndefined();
+        });
+        vi.stubGlobal('window', { location: { href: 'https://apps.test/?view=grid#old', protocol: 'https:' } });
+        vi.stubGlobal('document', document);
+        vi.stubGlobal('location', { replace });
+        Env.init({
+            name: 'test',
+            version: '0',
+            isLocalDev: false,
+            isDocker: false,
+            type: 'production',
+            endpoints: { studio: 'https://studio.test', zeno: 'https://zeno.test', sts: 'https://sts.test/?x=1&y=2' },
+        });
+
+        redirectToCentralAuth({ accountId: 'account-1', projectId: 'project-1' });
+
+        expect(replace).toHaveBeenCalledOnce();
+        const url = new URL(replace.mock.calls[0][0]);
+        expect(url.origin).toBe('https://internal-auth.vertesia.app');
+        expect(url.searchParams.get('sts')).toBe('https://sts.test/?x=1&y=2');
+        expect(url.searchParams.get('redirect_uri')).toBe(`${mount}?p=project-1&a=account-1`);
+        expect(verifyAuthState('wrong')).toContain('State mismatched');
+        clearAuthState();
+        expect(verifyAuthState(url.searchParams.get('state'))).toContain('State mismatched');
+    });
+});

package/src/session/auth/domainRouting.ts

@@ -1,3 +1,6 @@
+import { Env } from '@vertesia/ui/env';
+import { generateAuthState } from './authState';
+
 declare global {
     interface Window {
         AUTH_MODE?: 'firebase' | 'central';
@@ -78,3 +81,89 @@ export function mountRootUrl(): URL {
     url.search = '';
     return url;
 }
+
+/**
+ * A short-lived marker saying "a Central Auth round-trip is in flight for this browser".
+ *
+ * It exists for the server that generates index.html. Preload hints are markup, so they start
+ * fetching before any script runs: a page load that is going to bounce off to the broker cannot
+ * avoid downloading the application by any decision made in the page itself. The server can, but
+ * only if it can tell the outgoing leg from the return leg -- and the token comes back in the URL
+ * *fragment*, which a server never sees. Hence a cookie: set here, immediately before navigating to
+ * the broker, and cleared by the app as soon as it mounts.
+ *
+ * It carries no identity and grants nothing; it is a hint about which of two page loads this is.
+ * The TTL bounds the cost of the case where the app never mounts (the visitor abandons the login
+ * screen): after it lapses, cold loads are back to withholding the application preloads.
+ */
+const AUTH_ROUND_TRIP_COOKIE = 'vtsauth';
+const AUTH_ROUND_TRIP_TTL_SECONDS = 300;
+
+function authRoundTripCookie(value: string, maxAgeSeconds: number): string {
+    // Secure only over https: setting it on http://localhost would make the browser drop the
+    // cookie, and local development would silently lose the return-leg preloads.
+    const secure = window.location.protocol === 'https:' ? '; Secure' : '';
+    return `${AUTH_ROUND_TRIP_COOKIE}=${value}; Path=/; Max-Age=${maxAgeSeconds}; SameSite=Lax${secure}`;
+}
+
+/** Record that this browser is on its way to the broker. Called for you by {@link redirectToCentralAuth}. */
+export function markCentralAuthRoundTripStarted(): void {
+    // biome-ignore lint/suspicious/noDocumentCookie: CookieStore is async; this must land before location.replace()
+    document.cookie = authRoundTripCookie('1', AUTH_ROUND_TRIP_TTL_SECONDS);
+}
+
+/**
+ * Drop the marker. An app calls this once it is actually rendering, so that its *next* cold load is
+ * recognized as an outgoing leg again and does not preload an application it is about to discard.
+ */
+export function clearCentralAuthRoundTripMarker(): void {
+    // biome-ignore lint/suspicious/noDocumentCookie: pairs with the write above; see that comment.
+    document.cookie = authRoundTripCookie('', 0);
+}
+
+/**
+ * Start a Central Auth round-trip for the current page.
+ *
+ * The single place the broker URL is assembled, so the boot-time shortcut in an app's entry module
+ * and {@link isCentralAuthRedirectPending}'s counterpart inside `UserSessionProvider` cannot drift
+ * into producing different `redirect_uri` / `state` / `sts` values for the same page load.
+ */
+export function redirectToCentralAuth(selection: { accountId?: string; projectId?: string } = {}): void {
+    const url = centralAuthRedirectUrl({
+        centralAuthUrl: 'https://internal-auth.vertesia.app/',
+        stsEndpoint: Env.endpoints.sts ?? 'https://sts.vertesia.io',
+        returnUrl: authReturnUrl(),
+        state: generateAuthState(),
+        ...selection,
+    });
+    markCentralAuthRoundTripStarted();
+    location.replace(url.toString());
+}
+
+/**
+ * Whether this page load is already certain to end in a Central Auth round-trip, decidable before
+ * any application module has run.
+ *
+ * A fresh `UserSession` holds no token and nothing persists one across loads, so on a cold load
+ * `session.isLoggedIn()` in `UserSessionProvider` is always false. Every condition that can keep
+ * that provider from redirecting is therefore knowable up front, and this predicate enumerates
+ * them in the same order:
+ *
+ *   - Apps configured with Firebase auth sign in in place rather than at the broker;
+ *   - a host app that injects a token through `Env.authTokenProvider` may not need the broker
+ *     (and when its token turns out to be empty the provider still redirects — answering `false`
+ *     here just lets the normal flow decide, which is the safe direction);
+ *   - local development with a configured dev token skips auth entirely;
+ *   - a load carrying `#token=…&state=…` *is* the return leg and must be allowed to exchange it.
+ *
+ * When this returns true the app is going to navigate away, so an entry module can redirect
+ * immediately instead of mounting a full React tree, initializing telemetry and warming route
+ * chunks that the navigation is about to discard.
+ */
+export function isCentralAuthRedirectPending(): boolean {
+    if (!shouldRedirectToCentralAuth()) return false;
+    if (Env.authTokenProvider) return false;
+    if (Env.isLocalDev && Env.devAuthToken) return false;
+    const hashParams = new URLSearchParams(window.location.hash.substring(1));
+    return !(hashParams.get('token') && hashParams.get('state'));
+}

package/src/session/auth/useAuthState.ts

@@ -1,54 +1,10 @@
-/**
- * This hook is used to generate and verify state for OAuth2 authorization requests.
- * @returns
- */
-
+/** React wrappers for the state record shared with boot-time Central Auth redirects. */
 import { useCallback } from 'react';
-
-const AUTH_STATE_KEY = 'auth_state';
-const STATE_EXPIRY_KEY = 'auth_state_expiry';
-const STATE_TTL = 5 * 60 * 1000; // 5 min
+import { clearAuthState, generateAuthState, verifyAuthState } from './authState';
 
 export function useAuthState() {
-    // Generate new state
-    const generateState = useCallback(() => {
-        const state = crypto.randomUUID();
-        const expiryTime = Date.now() + STATE_TTL;
-
-        // Store state and expiry
-        sessionStorage.setItem(AUTH_STATE_KEY, state);
-        sessionStorage.setItem(STATE_EXPIRY_KEY, expiryTime.toString());
-
-        return state;
-    }, []);
-
-    // Verify returned state
-    const verifyState = useCallback((returnedState: string | null): string | undefined => {
-        if (!returnedState) {
-            return 'Missing state';
-        }
-
-        const savedState = sessionStorage.getItem(AUTH_STATE_KEY);
-        const expiryTime = parseInt(sessionStorage.getItem(STATE_EXPIRY_KEY) || '0', 10);
-        let reason: string | undefined;
-
-        // Verify state matches and hasn't expired
-        if (savedState !== returnedState) {
-            reason = `State mismatched (${savedState} !== ${returnedState})`;
-        } else if (Date.now() > expiryTime) {
-            reason = 'State expired';
-        } else {
-            reason = undefined; // No errors
-        }
-
-        return reason;
-    }, []);
-
-    // Clear state (useful for cleanup)
-    const clearState = useCallback(() => {
-        sessionStorage.removeItem(AUTH_STATE_KEY);
-        sessionStorage.removeItem(STATE_EXPIRY_KEY);
-    }, []);
-
+    const generateState = useCallback(generateAuthState, []);
+    const verifyState = useCallback(verifyAuthState, []);
+    const clearState = useCallback(clearAuthState, []);
     return { generateState, verifyState, clearState };
 }

package/src/session/index.ts

@@ -1,4 +1,10 @@
 export * from './auth/composable';
+// Publish the boot-time auth entry points.
+export {
+    clearCentralAuthRoundTripMarker,
+    isCentralAuthRedirectPending,
+    redirectToCentralAuth,
+} from './auth/domainRouting';
 export * from './auth/firebase';
 export * from './auth/useAuthState';
 export * from './auth/useCurrentTenant';

package/src/shell/SplashScreen.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import type { AuthTokenPayload } from '@vertesia/common';
+import { describe, expect, it, vi } from 'vitest';
+import { SplashScreen } from './SplashScreen';
+
+const session = { isLoading: true, authToken: undefined as AuthTokenPayload | undefined };
+vi.mock('@vertesia/ui/session', () => ({ useUserSession: () => session }));
+
+describe('SplashScreen handoff', () => {
+    it.each([true, false])('removes the splash immediately when a token arrives with isLoading=%s', (isLoading) => {
+        session.isLoading = true;
+        session.authToken = undefined;
+        const view = render(<SplashScreen icon={<span>Startup indicator</span>} />);
+        expect(screen.getByText('Startup indicator')).toBeTruthy();
+
+        session.isLoading = isLoading;
+        session.authToken = {} as AuthTokenPayload;
+        view.rerender(<SplashScreen icon={<span>Startup indicator</span>} />);
+        // No fading splash remains over the permission gate's connection screen.
+        expect(screen.queryByText('Startup indicator')).toBeNull();
+    });
+});

package/src/shell/SplashScreen.tsx

@@ -6,7 +6,7 @@ interface SplashScreenProps {
     icon?: ReactNode;
 }
 export function SplashScreen({ icon: Icon }: SplashScreenProps) {
-    const { isLoading } = useUserSession();
+    const { isLoading, authToken } = useUserSession();
     const [show, setShow] = useState(true);
 
     useEffect(() => {
@@ -15,6 +15,10 @@ export function SplashScreen({ icon: Icon }: SplashScreenProps) {
         }
     }, [isLoading]);
 
+    // The permission gate owns the loading UI once a token is available.
+    // Skip the exit animation too, so two loading indicators never overlap.
+    if (authToken) return null;
+
     return (
         <AnimatePresence>
             {show && (
@@ -54,7 +58,7 @@ function LoadingIcon() {
         <svg
             width="32"
             height="32"
-            className="w-8 h-8 text-indigo-600"
+            className="w-8 h-8 text-primary"
             viewBox="0 0 50 50"
             xmlns="http://www.w3.org/2000/svg"
             role="img"

package/src/shell/VertesiaShell.tsx

@@ -49,7 +49,7 @@ export function VertesiaShell({
                                 />
                             </>
                         )}
-                        <UserPermissionProvider>{children}</UserPermissionProvider>
+                        <UserPermissionProvider loadingIcon={loadingIcon}>{children}</UserPermissionProvider>
                     </LanguageBoundI18nProvider>
                 </LanguageProvider>
             </ThemeProvider>

package/src/shell/apps/AppProjectSelector.tsx

@@ -29,7 +29,7 @@ export function AppProjectSelector({ app, onChange, placeholder }: AppProjectSel
     };
 
     if (error) {
-        return <span className="text-red-600">Error: failed to fetch projects: {errorMessage(error)}</span>;
+        return <span className="text-destructive">Error: failed to fetch projects: {errorMessage(error)}</span>;
     }
     return (
         <SelectProject

package/src/shell/apps/StandaloneApp.tsx

@@ -116,15 +116,15 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
     const selectedOrg = orgOptions.find((a) => a.id === selectedAccountId);
 
     return (
-        <Center className="pt-10 flex flex-col items-center text-center text-gray-700">
-            <LockIcon className="w-10 h-10 mb-4 text-gray-500" />
+        <Center className="pt-10 flex flex-col items-center text-center text-foreground">
+            <LockIcon className="w-10 h-10 mb-4 text-muted" />
             <div className="text-xl font-semibold">{t('shell.accessDenied')}</div>
-            <div className="mt-2 text-sm text-gray-500">
+            <div className="mt-2 text-sm text-muted">
                 You don&apos;t have permission to view the <span className="font-semibold">{name}</span> app in project:{' '}
                 <span className="font-semibold">&laquo;{project?.name}&raquo;</span>.
             </div>
             {orgOptions.length === 0 && allProjects !== undefined && (
-                <div className="mt-4 text-sm text-gray-500">
+                <div className="mt-4 text-sm text-muted">
                     This app is not installed in any project you have access to.
                 </div>
             )}
@@ -132,7 +132,7 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
                 <div className="mt-4 flex flex-row gap-4 items-end">
                     {orgOptions.length > 1 && (
                         <div>
-                            <div className="text-sm text-gray-500 mb-2">{t('shell.organization')}</div>
+                            <div className="text-sm text-muted mb-2">{t('shell.organization')}</div>
                             <SelectBox
                                 by="id"
                                 value={selectedOrg}
@@ -145,7 +145,7 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
                     )}
                     <div>
                         {orgOptions.length > 1 && (
-                            <div className="text-sm text-gray-500 mb-2">{t('login.terminal.project')}</div>
+                            <div className="text-sm text-muted mb-2">{t('login.terminal.project')}</div>
                         )}
                         <SelectBox
                             by="id"
@@ -165,10 +165,10 @@ function AccessDeniedMessage({ name }: AccessDeniedMessageProps) {
 function UnknownAppName() {
     const { t } = useUITranslation();
     return (
-        <Center className="pt-10 flex flex-col items-center text-center text-gray-700">
-            <LockIcon className="w-10 h-10 mb-4 text-gray-500" />
+        <Center className="pt-10 flex flex-col items-center text-center text-foreground">
+            <LockIcon className="w-10 h-10 mb-4 text-muted" />
             <div className="text-xl font-semibold">{t('shell.applicationNotRegistered')}</div>
-            <div className="mt-2 text-sm text-gray-500">
+            <div className="mt-2 text-sm text-muted">
                 Before starting to code a Vertesia application you must register an application manifest in Vertesia
                 Studio then install it in one or more projects.
                 <p />

package/src/shell/login/SignInPrimitives.tsx

@@ -355,7 +355,7 @@ export function SignInCallout({ icon: Icon, title, meta }: SignInCalloutProps) {
 /** Horizontal rule with a centered label. */
 export function SignInOrDivider({ children }: { children: ReactNode }) {
     return (
-        <div className="flex items-center gap-3 my-2 text-muted-foreground text-[10.5px] uppercase tracking-widest">
+        <div className="flex items-center gap-3 my-2 text-muted text-[10.5px] uppercase tracking-widest">
             <div className="flex-1 h-px bg-border" />
             <span>{children}</span>
             <div className="flex-1 h-px bg-border" />
@@ -393,7 +393,7 @@ export function SignInEmailField({
                 id="vt-login-email"
                 name="vt-login-email"
                 type="email"
-                className="h-[42px] px-3.5 rounded-md border border-border bg-background text-sm text-foreground placeholder:text-muted-foreground outline-none transition focus:border-info focus:ring-4 focus:ring-info/15 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/15"
+                className="h-[42px] px-3.5 rounded-md border border-border bg-background text-sm text-foreground placeholder:text-muted outline-none transition focus:border-info focus:ring-4 focus:ring-info/15 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/15"
                 placeholder={placeholder}
                 value={value}
                 onChange={(e) => onChange(e.target.value)}

package/src/shell/login/SigninScreen.tsx

@@ -385,7 +385,7 @@ function SigninScreenImpl({
                         </div>
                     )}
 
-                    <div className="flex items-center gap-5 mt-10 text-xs text-muted-foreground">
+                    <div className="flex items-center gap-5 mt-10 text-xs text-muted">
                         <a href="https://vertesiahq.com/privacy" className="hover:text-foreground transition">
                             {t('auth.privacyPolicy')}
                         </a>

package/src/shell/login/SignupForm.tsx

@@ -126,7 +126,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
                 <>
                     <FormItem label={t('signup.companySize')}>
                         <SelectBox
-                            className="w-full border border-accent bg-muted"
+                            className="w-full border border-muted bg-muted"
                             value={companySize}
                             options={companySizeOptions}
                             onChange={setCompanySize}
@@ -144,7 +144,7 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
             )}
             <FormItem label={t('signup.projectMaturity')}>
                 <SelectBox
-                    className="w-full border border-accent bg-muted"
+                    className="w-full border border-muted bg-muted"
                     options={projectMaturityOptions}
                     value={projectMaturityOptions.find((option) => option.id === projectMaturity)}
                     optionLabel={(option) => option?.label}

package/src/shell/login/TerminalLogin.tsx

@@ -220,14 +220,14 @@ function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenPro
         <>
             <div className="w-1/3">
                 <div className="mb-4 text-xl font-semibold text-info">Authorizing client on {envName} environment.</div>
-                <div className="mb-2 text-md text-muted-foreground">
+                <div className="mb-2 text-base text-muted">
                     <div>{t('login.terminal.clientWantsAuth')}</div>
                     <div>
                         The client app code is <b className="text-foreground">{clientInfo.code}</b>. You can check if
                         the code is correct in the terminal.
                     </div>
                 </div>
-                <div className="mb-2 text-sm text-muted-foreground">
+                <div className="mb-2 text-sm text-muted">
                     <div>{t('login.terminal.chooseAccountProject')}</div>
                     <div>{t('login.terminal.profileNameNote')}</div>
                 </div>
@@ -307,15 +307,15 @@ function ProfileForm({ allProjects, data, onAccept }: Readonly<ProfileFormProps>
     return (
         <div className="w-1/3">
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted-foreground">{t('login.terminal.profileName')}</span>
+                <span className="font-semibold text-muted">{t('login.terminal.profileName')}</span>
                 <Input type="text" value={currentData.profile} onChange={onChangeProfile} />
             </div>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted-foreground">{t('login.terminal.account')}</span>
+                <span className="font-semibold text-muted">{t('login.terminal.account')}</span>
                 <SelectAccount value={currentData.account} onChange={onChangeAccount} accounts={accounts || []} />
             </div>
             <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted-foreground">{t('login.terminal.project')}</span>
+                <span className="font-semibold text-muted">{t('login.terminal.project')}</span>
                 <SelectProject value={currentData.project} onChange={onChangeProject} projects={projects} />
             </div>
             <div className="mb-4 text-sm text-attention">{t('login.terminal.browserPermissionNote')}</div>

package/src/shell/login/UserInfo.tsx

@@ -17,7 +17,7 @@ export function InfoItems({ title, value }: { title: string; value: string }) {
     return (
         <div className="w-full flex justify-between items-center mb-1">
             <div className="flex flex-col w-[calc(100%-3rem)]">
-                <div className="text-sm px-2 dark:text-slate-200">{title}</div>
+                <div className="text-sm px-2 dark:text-foreground">{title}</div>
                 <VTooltip description={value} size="xs" placement="left">
                     <div className="text-xs truncate text-muted w-full text-start px-2">{value} </div>
                 </VTooltip>
@@ -25,10 +25,7 @@ export function InfoItems({ title, value }: { title: string; value: string }) {
             {isCopied ? (
                 <Check className="size-4 cursor-pointer text-success" />
             ) : (
-                <CopyIcon
-                    className="size-4 cursor-pointer text-gray-400 dark:text-slate-400"
-                    onClick={() => copyToClipboard(value)}
-                />
+                <CopyIcon className="size-4 cursor-pointer text-muted" onClick={() => copyToClipboard(value)} />
             )}
         </div>
     );

package/src/shell/login/UserSessionMenu.tsx

@@ -71,10 +71,10 @@ function UserSessionPopup({ className, asMenuTrigger = false }: UserSessionPopup
                 </div>
             </PopoverTrigger>
             <PopoverContent align="start" className="w-[280px] mx-2 my-1 p-0">
-                <div className="divide-y divide-gray-200 dark:divide-slate-700">
+                <div className="divide-y divide-border">
                     <div className="py-2 ps-2">
                         <p className="px-4 dark:text-white mb-1">{user?.name ?? 'Unknown'}</p>
-                        <p className="px-4 text-xs text-gray-500">{user?.email ?? ''}</p>
+                        <p className="px-4 text-xs text-muted">{user?.email ?? ''}</p>
                     </div>
                     <div className="w-full p-1">
                         <InfoList />

package/src/widgets/Progress.tsx

@@ -3,8 +3,8 @@ interface ProgressProps {
 }
 export function Progress({ percent }: ProgressProps) {
     return (
-        <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-            <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: `${percent}%` }}></div>
+        <div className="w-full bg-muted rounded-full h-2.5">
+            <div className="bg-primary h-2.5 rounded-full" style={{ width: `${percent}%` }}></div>
         </div>
     );
 }

package/src/widgets/form/Form.tsx

@@ -120,8 +120,8 @@ interface ObjectFormProps {
 }
 function CompositeField({ object }: ObjectFormProps) {
     return (
-        <div className="flex flex-col gap-4 my-4 py-2 ps-4 border-s-4 border-s-solid border-s-slate-100 dark:border-s-slate-600">
-            {!object.isListItem && <div className="text-gray-900 dark:text-gray-200 font-semibold">{object.title}</div>}
+        <div className="flex flex-col gap-4 my-4 py-2 ps-4 border-s-4 border-s-solid border-s-border">
+            {!object.isListItem && <div className="text-foreground font-semibold">{object.title}</div>}
             {object.properties.map(renderProperty)}
         </div>
     );
@@ -150,8 +150,8 @@ function ListField({ object }: ListFieldProps) {
     };
 
     return (
-        <div className="flex flex-col gap-4 my-4 py-2 ps-4 border-s-4 border-s-solid border-s-slate-100 darK:border-s-slate-600">
-            {!object.isListItem && <div className="text-gray-900 dark:text-gray-200 font-semibold">{object.title}</div>}
+        <div className="flex flex-col gap-4 my-4 py-2 ps-4 border-s-4 border-s-solid border-s-border darK:border-s-border">
+            {!object.isListItem && <div className="text-foreground font-semibold">{object.title}</div>}
             {object.items.map((item, index) => {
                 const rowId = rowIds[index];
                 return (

package/src/widgets/form/fields.tsx

@@ -17,12 +17,12 @@ interface FormHelperProps {
     children: React.ReactNode | React.ReactNode[];
 }
 export function FormHelper({ children }: FormHelperProps) {
-    return <p className="mt-2 text-sm text-gray-500">{children}</p>;
+    return <p className="mt-2 text-sm text-muted">{children}</p>;
 }
 
 interface FormErrorProps {
     children: React.ReactNode | React.ReactNode[];
 }
 export function FormError({ children }: FormErrorProps) {
-    return <p className="mt-2 text-sm text-red-600">{children}</p>;
+    return <p className="mt-2 text-sm text-destructive">{children}</p>;
 }