YaroslavKartashov
/
MAI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): improve theme swatch contrast

Browse Source
main
AlexsandrSnytkin 14 hours ago
parent c286f719f8
commit c552a69483
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File

12
ui_server.py
Unescape Escape View File

@ -1412,12 +1412,12 @@ HTML = """<!doctype html>
.appearance-group { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ui-border); }
.appearance-group-head span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.appearance-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 6px; }
.appearance-options button { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 6px; height: 34px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--ui-border) 88%, var(--ui-text)); border-radius: 8px; background: color-mix(in srgb, var(--ui-input) 88%, var(--ui-surface)); color: color-mix(in srgb, var(--ui-text) 76%, var(--ui-muted)); font: 10px/1.05 ui-sans-serif, system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.appearance-options button { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 6px; height: 34px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--appearance-option-accent, var(--ui-border)) 26%, var(--ui-border)); border-radius: 8px; background: color-mix(in srgb, var(--ui-input) 88%, var(--ui-surface)); color: color-mix(in srgb, var(--ui-text) 76%, var(--ui-muted)); font: 10px/1.05 ui-sans-serif, system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.appearance-options button:hover { color: var(--ui-text); border-color: color-mix(in srgb, var(--ui-accent) 62%, var(--ui-border)); transform: translateY(-1px); }
.appearance-options button.is-active { color: var(--ui-text); border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 22%, transparent); }
.appearance-options button.is-active .appearance-swatch { box-shadow: 0 0 0 2px var(--ui-accent), inset 0 0 0 4px var(--appearance-swatch-2, transparent); }
.appearance-options button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appearance-swatch { width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--ui-text) 18%, transparent); border-radius: 6px; background: var(--appearance-swatch); box-shadow: inset 0 0 0 4px var(--appearance-swatch-2, transparent); }
.appearance-swatch { width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--appearance-option-accent, var(--ui-text)) 32%, var(--ui-text)); border-radius: 6px; background: linear-gradient(135deg, var(--appearance-option-accent, var(--appearance-swatch)) 0 28%, var(--appearance-swatch) 28% 100%); box-shadow: inset 0 0 0 4px var(--appearance-swatch-2, transparent); }
.accent-options button { grid-template-columns: 14px minmax(0, 1fr); }
.accent-options .appearance-swatch { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--appearance-swatch); box-shadow: 0 0 0 3px color-mix(in srgb, var(--appearance-swatch) 17%, transparent); }
.appearance-custom { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; color: var(--ui-muted) !important; font-size: 10px !important; }
@ -2982,6 +2982,9 @@ HTML = """<!doctype html>
const ACCENTS = {
blue: '#8fb8ff', cyan: '#67e8f9', green: '#7ee787', violet: '#c4b5fd', orange: '#ffb86b', red: '#ff8e9e', pink: '#f9a8d4', lime: '#b7f36b', indigo: '#818cf8', teal: '#2dd4bf', gold: '#facc15', sky: '#38bdf8', coral: '#fb7185'
};
const THEME_ACCENTS = {
dark: '#8fb8ff', light: '#4778b8', amber: '#f2b84b', midnight: '#5aa7ff', forest: '#56c788', rose: '#ef78ad', graphite: '#9bbcff', solarized: '#b58900', ocean: '#38c6df', neon: '#d38cff', copper: '#e08a5b', mono: '#d2d7dd'
};
const FONT_STACKS = {
system: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
inter: 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
@ -3116,6 +3119,7 @@ HTML = """<!doctype html>
button.dataset[`${kind}Value`] = value;
button.setAttribute('role', 'option');
button.setAttribute('aria-label', label);
if (colors[2]) button.style.setProperty('--appearance-option-accent', colors[2]);
const swatch = document.createElement('span');
swatch.className = 'appearance-swatch';
swatch.style.setProperty('--appearance-swatch', colors[0]);
@ -3134,9 +3138,9 @@ HTML = """<!doctype html>
if (!themeOptions || !accentOptions) return;
themeOptions.replaceChildren(...[...$('themeSelect').options].map(option => {
const palette = THEMES[option.value] || THEMES.dark;
return makeOption(option.value, option.textContent, 'theme', [palette.surface, palette.bg]);
return makeOption(option.value, option.textContent, 'theme', [palette.surface, palette.bg, THEME_ACCENTS[option.value] || ACCENTS.blue]);
}));
accentOptions.replaceChildren(...[...$('accentSelect').options].filter(option => option.value !== 'custom').map(option => makeOption(option.value, option.textContent, 'accent', [ACCENTS[option.value] || ACCENTS.blue])));
accentOptions.replaceChildren(...[...$('accentSelect').options].filter(option => option.value !== 'custom').map(option => makeOption(option.value, option.textContent, 'accent', [ACCENTS[option.value] || ACCENTS.blue, '', ACCENTS[option.value] || ACCENTS.blue])));
syncAppearanceModule();
}
async function loadModels() {

Write Preview
Loading…
Cancel
Save