fix: design constitution compliance — decorations true, UpdateChecker tokens
- tauri.conf.json: decorations false → true (Linux Desktop Norm: use OS title bar) - UpdateChecker.svelte: all hardcoded hex/rgb → design token CSS custom properties (var(--color-success), var(--color-warning), var(--color-accent), etc.) All hardcoded spacing → var(--space-*) tokens All hardcoded font sizes → var(--font-size-*) tokens
This commit is contained in:
Nick
@@ -200,71 +200,71 @@
|
||||
<style>
|
||||
.update-checker {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
gap: var(--space-sm, 0.5rem);
|
||||
padding: var(--space-sm, 0.5rem) 0;
|
||||
}
|
||||
.version-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
gap: var(--space-lg, 1rem);
|
||||
}
|
||||
.version-label { color: var(--text-dim, #9fb0ca); }
|
||||
.version-value { color: var(--text, #ffffff); font-weight: 700; }
|
||||
.version-label { color: var(--color-text-secondary, #9fb0ca); }
|
||||
.version-value { color: var(--color-text-primary, #ffffff); font-weight: 700; }
|
||||
|
||||
.update-status {
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: var(--space-sm, 0.5rem) var(--space-md, 0.75rem);
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--font-size-base, 0.9rem);
|
||||
}
|
||||
.status-ok {
|
||||
background: rgb(63 185 80 / 12%);
|
||||
border: 1px solid rgb(63 185 80 / 25%);
|
||||
color: #7ee99b;
|
||||
background: color-mix(in oklch, var(--color-success, oklch(0.62 0.18 145)) 12%, transparent);
|
||||
border: 1px solid color-mix(in oklch, var(--color-success, oklch(0.62 0.18 145)) 25%, transparent);
|
||||
color: var(--color-success, #7ee99b);
|
||||
}
|
||||
.status-update {
|
||||
background: rgb(255 196 0 / 12%);
|
||||
border: 1px solid rgb(255 196 0 / 25%);
|
||||
color: #ffd54f;
|
||||
background: color-mix(in oklch, var(--color-warning, oklch(0.72 0.15 80)) 12%, transparent);
|
||||
border: 1px solid color-mix(in oklch, var(--color-warning, oklch(0.72 0.15 80)) 25%, transparent);
|
||||
color: var(--color-warning, #ffd54f);
|
||||
}
|
||||
.status-installing {
|
||||
background: rgb(88 166 255 / 12%);
|
||||
border: 1px solid rgb(88 166 255 / 25%);
|
||||
color: #79c0ff;
|
||||
background: color-mix(in oklch, var(--color-accent, oklch(0.62 0.18 260)) 12%, transparent);
|
||||
border: 1px solid color-mix(in oklch, var(--color-accent, oklch(0.62 0.18 260)) 25%, transparent);
|
||||
color: var(--color-accent, #79c0ff);
|
||||
}
|
||||
.status-error {
|
||||
background: rgb(255 136 136 / 12%);
|
||||
border: 1px solid rgb(255 136 136 / 25%);
|
||||
color: #ff9999;
|
||||
font-size: 0.85rem;
|
||||
background: color-mix(in oklch, var(--color-danger, oklch(0.55 0.20 25)) 12%, transparent);
|
||||
border: 1px solid color-mix(in oklch, var(--color-danger, oklch(0.55 0.20 25)) 25%, transparent);
|
||||
color: var(--color-danger, #ff9999);
|
||||
font-size: var(--font-size-sm, 0.85rem);
|
||||
}
|
||||
|
||||
.update-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
gap: var(--space-sm, 0.5rem);
|
||||
margin-top: var(--space-xs, 0.25rem);
|
||||
}
|
||||
.refresh-button, .update-button {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid rgb(255 255 255 / 15%);
|
||||
padding: var(--space-sm, 0.5rem) var(--space-lg, 1rem);
|
||||
border: 1px solid var(--color-border-default, rgb(255 255 255 / 14%));
|
||||
border-radius: 0.5rem;
|
||||
background: rgb(255 255 255 / 5%);
|
||||
color: var(--text, #e8edff);
|
||||
background: var(--color-surface-raised, rgb(255 255 255 / 5%));
|
||||
color: var(--color-text-primary, #e8edff);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--font-size-base, 0.9rem);
|
||||
}
|
||||
.refresh-button:hover, .update-button:hover {
|
||||
background: rgb(139 156 255 / 16%);
|
||||
border-color: rgb(139 156 255 / 55%);
|
||||
background: var(--color-surface-overlay, rgb(139 156 255 / 16%));
|
||||
border-color: var(--color-accent, rgb(139 156 255 / 55%));
|
||||
}
|
||||
.update-button {
|
||||
background: rgb(63 185 80 / 15%);
|
||||
border-color: rgb(63 185 80 / 35%);
|
||||
color: #7ee99b;
|
||||
background: color-mix(in oklch, var(--color-success, oklch(0.62 0.18 145)) 15%, transparent);
|
||||
border-color: color-mix(in oklch, var(--color-success, oklch(0.62 0.18 145)) 35%, transparent);
|
||||
color: var(--color-success, #7ee99b);
|
||||
font-weight: 600;
|
||||
}
|
||||
.update-button:hover {
|
||||
background: rgb(63 185 80 / 25%);
|
||||
border-color: rgb(63 185 80 / 50%);
|
||||
background: color-mix(in oklch, var(--color-success, oklch(0.62 0.18 145)) 25%, transparent);
|
||||
border-color: color-mix(in oklch, var(--color-success, oklch(0.62 0.18 145)) 50%, transparent);
|
||||
}
|
||||
.refresh-button:disabled, .update-button:disabled {
|
||||
opacity: 0.5;
|
||||
@@ -284,54 +284,54 @@
|
||||
z-index: 1000;
|
||||
}
|
||||
.confirm-dialog {
|
||||
background: var(--surface, #161b22);
|
||||
border: 1px solid var(--border, #30363d);
|
||||
background: var(--color-surface-overlay, #161b22);
|
||||
border: 1px solid var(--color-border-default, #30363d);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
padding: var(--space-xl, 1.5rem);
|
||||
max-width: 400px;
|
||||
box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
|
||||
}
|
||||
.confirm-dialog h3 {
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--text, #ffffff);
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 var(--space-md, 0.75rem);
|
||||
color: var(--color-text-primary, #ffffff);
|
||||
font-size: var(--font-size-lg, 1.1rem);
|
||||
}
|
||||
.confirm-dialog p {
|
||||
margin: 0.3rem 0;
|
||||
color: var(--text-dim, #9fb0ca);
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary, #9fb0ca);
|
||||
font-size: var(--font-size-base, 0.9rem);
|
||||
}
|
||||
.confirm-hint {
|
||||
font-size: 0.8rem !important;
|
||||
color: var(--text-dim, #8b949e);
|
||||
font-size: var(--font-size-sm, 0.8rem) !important;
|
||||
color: var(--color-text-dim, #8b949e);
|
||||
}
|
||||
.confirm-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.25rem;
|
||||
gap: var(--space-md, 0.75rem);
|
||||
margin-top: var(--space-lg, 1.25rem);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.confirm-yes, .confirm-no {
|
||||
padding: 0.5rem 1.25rem;
|
||||
padding: var(--space-sm, 0.5rem) var(--space-lg, 1.25rem);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid rgb(255 255 255 / 15%);
|
||||
border: 1px solid var(--color-border-default, rgb(255 255 255 / 15%));
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--font-size-base, 0.9rem);
|
||||
}
|
||||
.confirm-yes {
|
||||
background: rgb(63 185 80 / 20%);
|
||||
border-color: rgb(63 185 80 / 40%);
|
||||
color: #7ee99b;
|
||||
background: color-mix(in oklch, var(--color-success, oklch(0.62 0.18 145)) 20%, transparent);
|
||||
border-color: color-mix(in oklch, var(--color-success, oklch(0.62 0.18 145)) 40%, transparent);
|
||||
color: var(--color-success, #7ee99b);
|
||||
font-weight: 600;
|
||||
}
|
||||
.confirm-yes:hover {
|
||||
background: rgb(63 185 80 / 30%);
|
||||
background: color-mix(in oklch, var(--color-success, oklch(0.62 0.18 145)) 30%, transparent);
|
||||
}
|
||||
.confirm-no {
|
||||
background: rgb(255 255 255 / 5%);
|
||||
color: var(--text-dim, #9fb0ca);
|
||||
background: var(--color-surface-raised, rgb(255 255 255 / 5%));
|
||||
color: var(--color-text-secondary, #9fb0ca);
|
||||
}
|
||||
.confirm-no:hover {
|
||||
background: rgb(255 255 255 / 10%);
|
||||
background: var(--color-surface-overlay, rgb(255 255 255 / 10%));
|
||||
}
|
||||
</style>
|
||||
@@ -19,7 +19,7 @@
|
||||
"minWidth": 900,
|
||||
"minHeight": 600,
|
||||
"resizable": true,
|
||||
"decorations": false,
|
||||
"decorations": true,
|
||||
"transparent": false
|
||||
}
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user