till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:21:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactor(theme): migrate --theme-* tokens in shared-auth-ui

Browse source 
Third naming convention uncovered: six shared-auth-ui components
(PasskeyManager, SessionManager, TwoFactorSetup, AuditLog,
ChangePassword, SecurityOnboarding) use --theme-muted, --theme-border,
etc. These tokens are not defined anywhere in the Mana theme system —
they only rendered because of inline raw-channel fallbacks, so they
never tracked the active theme variant.

Map to the canonical --color-* tokens:
  --theme-background       → --color-background
  --theme-border           → --color-border
  --theme-foreground       → --color-foreground
  --theme-muted            → --color-muted
  --theme-muted-foreground → --color-muted-foreground
  --theme-surface          → --color-surface

Visible on the Security tab in the unified settings page, where the
inner passkey/session/2FA/audit cards can now pick up theme changes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-16 00:16:39 +02:00
parent cd22e42afc
commit fdc1c0023a
6 changed files with 95 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

22
packages/shared-auth-ui/src/components/AuditLog.svelte
View file

@ -265,7 +265,7 @@
.audit-subtitle { .audit-subtitle {
font-size: 0.875rem; font-size: 0.875rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin: 0; margin: 0;
} }
@ -276,16 +276,16 @@
width: 2.25rem; width: 2.25rem;
height: 2.25rem; height: 2.25rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
background: transparent; background: transparent;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
.refresh-button:hover:not(:disabled) { .refresh-button:hover:not(:disabled) {
background: hsl(var(--theme-muted, 220 14% 96%)); background: hsl(var(--color-muted, 220 14% 96%));
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.refresh-button:disabled { .refresh-button:disabled {
@ -317,7 +317,7 @@
.loading-spinner { .loading-spinner {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border: 3px solid hsl(var(--theme-border, 220 13% 91%)); border: 3px solid hsl(var(--color-border, 220 13% 91%));
border-top-color: var(--primary-color); border-top-color: var(--primary-color);
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
@ -326,7 +326,7 @@
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
font-size: 0.875rem; font-size: 0.875rem;
} }
@ -335,7 +335,7 @@
flex-direction: column; flex-direction: column;
max-height: 28rem; max-height: 28rem;
overflow-y: auto; overflow-y: auto;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
border-radius: 0.75rem; border-radius: 0.75rem;
} }
@ -344,7 +344,7 @@
align-items: flex-start; align-items: flex-start;
gap: 0.75rem; gap: 0.75rem;
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
border-bottom: 1px solid hsl(var(--theme-border, 220 13% 91%)); border-bottom: 1px solid hsl(var(--color-border, 220 13% 91%));
} }
.event-item:last-child { .event-item:last-child {
@ -406,7 +406,7 @@
.event-meta { .event-meta {
font-size: 0.75rem; font-size: 0.75rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin-top: 0.125rem; margin-top: 0.125rem;
} }
@ -416,7 +416,7 @@
.event-device { .event-device {
font-size: 0.75rem; font-size: 0.75rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
opacity: 0.8; opacity: 0.8;
} }

22
packages/shared-auth-ui/src/components/ChangePassword.svelte
View file

@ -222,15 +222,15 @@
.change-password { .change-password {
padding: 1rem; padding: 1rem;
border-radius: 0.75rem; border-radius: 0.75rem;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
background: hsl(var(--theme-surface, 0 0% 100%) / 0.5); background: hsl(var(--color-surface, 0 0% 100%) / 0.5);
} }
.section-title { .section-title {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
margin: 0 0 1rem; margin: 0 0 1rem;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
/* Semantic green kept */ /* Semantic green kept */
@ -272,7 +272,7 @@
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
margin-bottom: 0.375rem; margin-bottom: 0.375rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
} }
.input-wrapper { .input-wrapper {
@ -283,11 +283,11 @@
width: 100%; width: 100%;
height: 2.75rem; height: 2.75rem;
padding: 0 0.75rem; padding: 0 0.75rem;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.9375rem; font-size: 0.9375rem;
background: hsl(var(--theme-background, 0 0% 100%)); background: hsl(var(--color-background, 0 0% 100%));
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
transition: transition:
border-color 0.2s, border-color 0.2s,
box-shadow 0.2s; box-shadow 0.2s;
@ -314,7 +314,7 @@
transform: translateY(-50%); transform: translateY(-50%);
background: none; background: none;
border: none; border: none;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
cursor: pointer; cursor: pointer;
padding: 0.25rem; padding: 0.25rem;
display: flex; display: flex;
@ -323,13 +323,13 @@
} }
.password-toggle:hover { .password-toggle:hover {
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.field-hint { .field-hint {
font-size: 0.75rem; font-size: 0.75rem;
margin: 0.25rem 0 0; margin: 0.25rem 0 0;
color: hsl(var(--theme-muted-foreground, 220 9% 46%) / 0.7); color: hsl(var(--color-muted-foreground, 220 9% 46%) / 0.7);
} }
/* Semantic red kept */ /* Semantic red kept */
@ -346,7 +346,7 @@
font-size: 0.875rem; font-size: 0.875rem;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: opacity 0.2s;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
margin-top: 0.5rem; margin-top: 0.5rem;
} }

44
packages/shared-auth-ui/src/components/PasskeyManager.svelte
View file

@ -405,7 +405,7 @@
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
margin: 0 0 1rem; margin: 0 0 1rem;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
/* Warning — semantic amber colors kept */ /* Warning — semantic amber colors kept */
@ -469,7 +469,7 @@
/* Empty state */ /* Empty state */
.pm-empty { .pm-empty {
font-size: 0.875rem; font-size: 0.875rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin: 0 0 1rem; margin: 0 0 1rem;
} }
@ -485,14 +485,14 @@
.pm-item { .pm-item {
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
background: hsl(var(--theme-muted, 220 14% 96%)); background: hsl(var(--color-muted, 220 14% 96%));
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
border-radius: 0.625rem; border-radius: 0.625rem;
transition: border-color 150ms ease; transition: border-color 150ms ease;
} }
.pm-item:hover { .pm-item:hover {
border-color: hsl(var(--theme-foreground, 220 9% 10%) / 0.2); border-color: hsl(var(--color-foreground, 220 9% 10%) / 0.2);
} }
/* Item header */ /* Item header */
@ -520,7 +520,7 @@
.pm-item-name { .pm-item-name {
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: 500; font-weight: 500;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -528,7 +528,7 @@
.pm-item-meta { .pm-item-meta {
font-size: 0.75rem; font-size: 0.75rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
} }
/* Badges — semantic green/amber colors kept */ /* Badges — semantic green/amber colors kept */
@ -567,7 +567,7 @@
gap: 0.375rem; gap: 0.375rem;
margin-top: 0.625rem; margin-top: 0.625rem;
padding-top: 0.625rem; padding-top: 0.625rem;
border-top: 1px solid hsl(var(--theme-border, 220 13% 91%)); border-top: 1px solid hsl(var(--color-border, 220 13% 91%));
} }
/* Buttons */ /* Buttons */
@ -603,12 +603,12 @@
.pm-btn-cancel { .pm-btn-cancel {
background: transparent; background: transparent;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
border-color: hsl(var(--theme-border, 220 13% 91%)); border-color: hsl(var(--color-border, 220 13% 91%));
} }
.pm-btn-cancel:hover:not(:disabled) { .pm-btn-cancel:hover:not(:disabled) {
background: hsl(var(--theme-muted, 220 14% 96%)); background: hsl(var(--color-muted, 220 14% 96%));
} }
/* Danger button — semantic red kept */ /* Danger button — semantic red kept */
@ -624,14 +624,14 @@
.pm-btn-ghost { .pm-btn-ghost {
background: transparent; background: transparent;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
padding: 0.3125rem 0.625rem; padding: 0.3125rem 0.625rem;
font-size: 0.75rem; font-size: 0.75rem;
} }
.pm-btn-ghost:hover:not(:disabled) { .pm-btn-ghost:hover:not(:disabled) {
background: hsl(var(--theme-muted, 220 14% 96%)); background: hsl(var(--color-muted, 220 14% 96%));
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
/* Danger ghost — semantic red kept */ /* Danger ghost — semantic red kept */
@ -665,10 +665,10 @@
width: 100%; width: 100%;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
font-size: 0.875rem; font-size: 0.875rem;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
border-radius: 0.5rem; border-radius: 0.5rem;
background: hsl(var(--theme-background, 0 0% 100%)); background: hsl(var(--color-background, 0 0% 100%));
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
outline: none; outline: none;
transition: border-color 150ms ease; transition: border-color 150ms ease;
box-sizing: border-box; box-sizing: border-box;
@ -711,7 +711,7 @@
.pm-confirm-message { .pm-confirm-message {
font-size: 0.8125rem; font-size: 0.8125rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin: 0 0 0.75rem; margin: 0 0 0.75rem;
line-height: 1.4; line-height: 1.4;
} }
@ -725,8 +725,8 @@
/* Register form */ /* Register form */
.pm-register-form { .pm-register-form {
padding: 1rem; padding: 1rem;
background: hsl(var(--theme-muted, 220 14% 96%)); background: hsl(var(--color-muted, 220 14% 96%));
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
border-radius: 0.625rem; border-radius: 0.625rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -736,13 +736,13 @@
.pm-register-title { .pm-register-title {
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: 600; font-weight: 600;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
margin: 0; margin: 0;
} }
.pm-register-label { .pm-register-label {
font-size: 0.8125rem; font-size: 0.8125rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
} }
.pm-register-actions { .pm-register-actions {

32
packages/shared-auth-ui/src/components/SecurityOnboarding.svelte
View file

@ -184,20 +184,20 @@
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
border-radius: 1rem; border-radius: 1rem;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
background: hsl(var(--theme-surface, 0 0% 100%) / 0.5); background: hsl(var(--color-surface, 0 0% 100%) / 0.5);
} }
.icon-circle { .icon-circle {
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
border-radius: 50%; border-radius: 50%;
border: 2px solid hsl(var(--theme-border, 220 13% 91%)); border: 2px solid hsl(var(--color-border, 220 13% 91%));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
color: hsl(var(--theme-foreground, 220 9% 10%) / 0.7); color: hsl(var(--color-foreground, 220 9% 10%) / 0.7);
} }
/* Semantic green kept */ /* Semantic green kept */
@ -210,12 +210,12 @@
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.onboarding-description { .onboarding-description {
font-size: 0.875rem; font-size: 0.875rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin: 0 0 1.5rem; margin: 0 0 1.5rem;
line-height: 1.5; line-height: 1.5;
} }
@ -245,13 +245,13 @@
gap: 0.75rem; gap: 0.75rem;
padding: 1.25rem; padding: 1.25rem;
border-radius: 0.75rem; border-radius: 0.75rem;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
background: hsl(var(--theme-surface, 0 0% 100%) / 0.5); background: hsl(var(--color-surface, 0 0% 100%) / 0.5);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.option-icon { .option-icon {
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
} }
.option-content { .option-content {
@ -262,12 +262,12 @@
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: 600; font-weight: 600;
margin: 0 0 0.25rem; margin: 0 0 0.25rem;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.option-description { .option-description {
font-size: 0.8125rem; font-size: 0.8125rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin: 0; margin: 0;
line-height: 1.4; line-height: 1.4;
} }
@ -281,7 +281,7 @@
font-size: 0.875rem; font-size: 0.875rem;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: opacity 0.2s;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
background: transparent; background: transparent;
} }
@ -296,7 +296,7 @@
.hint-text { .hint-text {
font-size: 0.8125rem; font-size: 0.8125rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%) / 0.7); color: hsl(var(--color-muted-foreground, 220 9% 46%) / 0.7);
margin: 0 0 1.25rem; margin: 0 0 1.25rem;
} }
@ -305,14 +305,14 @@
border: none; border: none;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
cursor: pointer; cursor: pointer;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
transition: color 0.2s; transition: color 0.2s;
} }
.skip-button:hover { .skip-button:hover {
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.primary-button { .primary-button {
@ -324,7 +324,7 @@
font-size: 0.875rem; font-size: 0.875rem;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: opacity 0.2s;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.primary-button:hover { .primary-button:hover {

28
packages/shared-auth-ui/src/components/SessionManager.svelte
View file

@ -343,7 +343,7 @@
.session-subtitle { .session-subtitle {
font-size: 0.875rem; font-size: 0.875rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin: 0; margin: 0;
} }
@ -354,16 +354,16 @@
width: 2.25rem; width: 2.25rem;
height: 2.25rem; height: 2.25rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
background: transparent; background: transparent;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
.refresh-button:hover:not(:disabled) { .refresh-button:hover:not(:disabled) {
background: hsl(var(--theme-muted, 220 14% 96%)); background: hsl(var(--color-muted, 220 14% 96%));
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.refresh-button:disabled { .refresh-button:disabled {
@ -412,7 +412,7 @@
.loading-spinner { .loading-spinner {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border: 3px solid hsl(var(--theme-border, 220 13% 91%)); border: 3px solid hsl(var(--color-border, 220 13% 91%));
border-top-color: var(--primary-color); border-top-color: var(--primary-color);
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
@ -421,14 +421,14 @@
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
font-size: 0.875rem; font-size: 0.875rem;
} }
.session-list { .session-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
border-radius: 0.75rem; border-radius: 0.75rem;
overflow: hidden; overflow: hidden;
} }
@ -438,7 +438,7 @@
align-items: flex-start; align-items: flex-start;
gap: 0.75rem; gap: 0.75rem;
padding: 1rem; padding: 1rem;
border-bottom: 1px solid hsl(var(--theme-border, 220 13% 91%)); border-bottom: 1px solid hsl(var(--color-border, 220 13% 91%));
} }
.session-item:last-child { .session-item:last-child {
@ -457,8 +457,8 @@
width: 2.25rem; width: 2.25rem;
height: 2.25rem; height: 2.25rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: hsl(var(--theme-muted, 220 14% 96%)); background-color: hsl(var(--color-muted, 220 14% 96%));
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
} }
.device-icon { .device-icon {
@ -498,13 +498,13 @@
.session-ip { .session-ip {
font-size: 0.75rem; font-size: 0.75rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin-top: 0.125rem; margin-top: 0.125rem;
} }
.session-activity { .session-activity {
font-size: 0.75rem; font-size: 0.75rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
opacity: 0.8; opacity: 0.8;
} }
@ -516,7 +516,7 @@
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
border-radius: 0.375rem; border-radius: 0.375rem;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
background: transparent; background: transparent;
color: #dc2626; color: #dc2626;
cursor: pointer; cursor: pointer;

42
packages/shared-auth-ui/src/components/TwoFactorSetup.svelte
View file

@ -388,8 +388,8 @@
.two-factor-setup { .two-factor-setup {
padding: 1rem; padding: 1rem;
border-radius: 0.75rem; border-radius: 0.75rem;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
background: hsl(var(--theme-surface, 0 0% 100%) / 0.5); background: hsl(var(--color-surface, 0 0% 100%) / 0.5);
} }
.section-header { .section-header {
@ -405,7 +405,7 @@
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.status-badge { .status-badge {
@ -425,8 +425,8 @@
} }
.status-disabled { .status-disabled {
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
background: hsl(var(--theme-muted, 220 14% 96%)); background: hsl(var(--color-muted, 220 14% 96%));
} }
.status-dot { .status-dot {
@ -451,7 +451,7 @@
font-size: 0.875rem; font-size: 0.875rem;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: opacity 0.2s;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.action-button.primary { .action-button.primary {
@ -460,7 +460,7 @@
.action-button.secondary { .action-button.secondary {
background: transparent; background: transparent;
border-color: hsl(var(--theme-border, 220 13% 91%)); border-color: hsl(var(--color-border, 220 13% 91%));
} }
/* Semantic red kept */ /* Semantic red kept */
@ -481,7 +481,7 @@
.confirm-text { .confirm-text {
font-size: 0.875rem; font-size: 0.875rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -494,18 +494,18 @@
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
margin-bottom: 0.375rem; margin-bottom: 0.375rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
} }
.input-field { .input-field {
width: 100%; width: 100%;
height: 2.75rem; height: 2.75rem;
padding: 0 0.75rem; padding: 0 0.75rem;
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.9375rem; font-size: 0.9375rem;
background: hsl(var(--theme-background, 0 0% 100%)); background: hsl(var(--color-background, 0 0% 100%));
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
transition: transition:
border-color 0.2s, border-color 0.2s,
box-shadow 0.2s; box-shadow 0.2s;
@ -539,7 +539,7 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.qr-section { .qr-section {
@ -556,7 +556,7 @@
.qr-placeholder { .qr-placeholder {
border-radius: 0.5rem; border-radius: 0.5rem;
background: hsl(var(--theme-muted, 220 14% 96%)); background: hsl(var(--color-muted, 220 14% 96%));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -568,7 +568,7 @@
.manual-label { .manual-label {
font-size: 0.8125rem; font-size: 0.8125rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%)); color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin-bottom: 0.375rem; margin-bottom: 0.375rem;
} }
@ -578,8 +578,8 @@
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: hsl(var(--theme-muted, 220 14% 96%)); background: hsl(var(--color-muted, 220 14% 96%));
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
} }
.secret-code { .secret-code {
@ -587,7 +587,7 @@
font-size: 0.8125rem; font-size: 0.8125rem;
font-family: monospace; font-family: monospace;
word-break: break-all; word-break: break-all;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
.copy-button { .copy-button {
@ -620,12 +620,12 @@
.backup-code { .backup-code {
padding: 0.375rem 0.5rem; padding: 0.375rem 0.5rem;
border-radius: 0.375rem; border-radius: 0.375rem;
background: hsl(var(--theme-muted, 220 14% 96%)); background: hsl(var(--color-muted, 220 14% 96%));
border: 1px solid hsl(var(--theme-border, 220 13% 91%)); border: 1px solid hsl(var(--color-border, 220 13% 91%));
font-size: 0.8125rem; font-size: 0.8125rem;
font-family: monospace; font-family: monospace;
text-align: center; text-align: center;
color: hsl(var(--theme-foreground, 220 9% 10%)); color: hsl(var(--color-foreground, 220 9% 10%));
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {