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 {
font-size: 0.875rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%));
color: hsl(var(--color-muted-foreground, 220 9% 46%));
margin: 0;
}
@ -276,16 +276,16 @@
width: 2.25rem;
height: 2.25rem;
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;
color: hsl(var(--theme-muted-foreground, 220 9% 46%));
color: hsl(var(--color-muted-foreground, 220 9% 46%));
cursor: pointer;
transition: all 0.2s;
}
.refresh-button:hover:not(:disabled) {
background: hsl(var(--theme-muted, 220 14% 96%));
color: hsl(var(--theme-foreground, 220 9% 10%));
background: hsl(var(--color-muted, 220 14% 96%));
color: hsl(var(--color-foreground, 220 9% 10%));
}
.refresh-button:disabled {
@ -317,7 +317,7 @@
.loading-spinner {
width: 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-radius: 50%;
animation: spin 0.8s linear infinite;
@ -326,7 +326,7 @@
.empty-state {
text-align: center;
padding: 2rem;
color: hsl(var(--theme-muted-foreground, 220 9% 46%));
color: hsl(var(--color-muted-foreground, 220 9% 46%));
font-size: 0.875rem;
}
@ -335,7 +335,7 @@
flex-direction: column;
max-height: 28rem;
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;
}
@ -344,7 +344,7 @@
align-items: flex-start;
gap: 0.75rem;
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 {
@ -406,7 +406,7 @@
.event-meta {
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;
}
@ -416,7 +416,7 @@
.event-device {
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;
}

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

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

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

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

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

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

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

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

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

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