lashman/cruciverb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

palette and focus polish for AAA contrast

Browse Source
This commit is contained in:
lashman
2026-08-20 15:12:00 +03:00
parent 4689cb5971
commit a2938e0d64
3 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AnalyticsDashboard.tsx
+1 -1
View File
@@ -535,7 +535,7 @@ export default function AnalyticsDashboard({ onClose }: { onClose: () => void })
const presetDonutData = useMemo(() => {
if (!data?.by_preset) return []
const colors = ['var(--accent)', 'rgba(212,67,47,0.7)', 'rgba(212,67,47,0.45)', 'rgba(212,67,47,0.25)', 'rgba(212,67,47,0.12)']
const colors = ['var(--accent)', 'color-mix(in srgb, var(--accent) 70%, var(--bg))', 'color-mix(in srgb, var(--accent) 50%, var(--bg))', 'color-mix(in srgb, var(--accent) 30%, var(--bg))', 'color-mix(in srgb, var(--accent) 15%, var(--bg))']
return presetOrder
.filter(k => data.by_preset[k]?.count > 0)
.map((k, i) => ({
frontend/src/components/Grid.tsx
+2 -2
View File
@@ -107,8 +107,8 @@ export default function Grid() {
x={x} y={y}
width={CELL} height={CELL}
fill={fill}
stroke="var(--cell-border)"
strokeWidth={0.5}
stroke={isSelected ? 'var(--accent)' : 'var(--cell-border)'}
strokeWidth={isSelected ? 2 : 0.5}
/>
{!isBlack && num && (
<text
frontend/src/index.css
+35 -25
View File
@@ -13,58 +13,62 @@
--text-secondary: #454545;
--text-tertiary: #4a4a4a;
--border: #e0dcd8;
--border-light: #c5c0ba;
--accent: #d4432f;
--accent-hover: #ba3825;
--accent-soft: rgba(212, 67, 47, 0.06);
--border-light: #8f8b85;
--accent: #9c2418;
--accent-hover: #7e1d13;
--accent-soft: rgba(156, 36, 24, 0.07);
--btn-primary-text: #ffffff;
--cell-white: #ffffff;
--cell-black: #0d0d0d;
--cell-selected: #f5c888;
--cell-active: #f0d8a8;
--cell-border: #8a8480;
--correct: #2d7a4f;
--incorrect: #c93030;
--revealed: #3570a8;
--correct: #18603a;
--incorrect: #a90f1c;
--revealed: #1d5286;
--ink-color: #3a2820;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
--shadow-md: 0 4px 16px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--color-error: #ef4444;
--color-success: #22c55e;
--color-error: #a32020;
--color-success: #0f612f;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #111111; --bg-alt: #191919; --surface: #1a1a1a; --surface-raised: #222;
--text: #ededed; --text-secondary: #b5b5b5; --text-tertiary: #ababab;
--border: #2a2a2a; --border-light: #222;
--accent: #e8594a; --accent-hover: #d04a3c; --accent-soft: rgba(232, 89, 74, 0.1);
--border: #6b6b6b; --border-light: #8a8a8a;
--accent: #ee8a82; --accent-hover: #f5a49d; --accent-soft: rgba(238, 138, 130, 0.12); --btn-primary-text: #161313;
--cell-white: #1e1e1e; --cell-black: #090909;
--cell-selected: #5a3818; --cell-active: #4a3020; --cell-border: #555555;
--correct: #4cb87a; --incorrect: #e05050; --revealed: #5a9ad8; --ink-color: #d0b090;
--cell-selected: #8a6a33; --cell-active: #7c6a3a; --cell-border: #7a7a7a;
--correct: #4cb87a; --incorrect: #ed9f9f; --revealed: #7bb4e8; --ink-color: #d0b090;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
--color-error: #f87171;
--color-error: #f4a3a3;
--color-success: #4ade80;
}
}
:root[data-theme="dark"] {
--bg: #111111; --bg-alt: #191919; --surface: #1a1a1a; --surface-raised: #222;
--text: #ededed; --text-secondary: #b5b5b5; --text-tertiary: #ababab;
--border: #2a2a2a; --border-light: #222;
--accent: #e8594a; --accent-hover: #d04a3c; --accent-soft: rgba(232, 89, 74, 0.1);
--border: #6b6b6b; --border-light: #8a8a8a;
--accent: #ee8a82; --accent-hover: #f5a49d; --accent-soft: rgba(238, 138, 130, 0.12); --btn-primary-text: #161313;
--cell-white: #1e1e1e; --cell-black: #090909;
--cell-selected: #5a3818; --cell-active: #4a3020; --cell-border: #555555;
--correct: #4cb87a; --incorrect: #e05050; --revealed: #5a9ad8; --ink-color: #d0b090;
--cell-selected: #8a6a33; --cell-active: #7c6a3a; --cell-border: #7a7a7a;
--correct: #4cb87a; --incorrect: #ed9f9f; --revealed: #7bb4e8; --ink-color: #d0b090;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
--color-error: #f87171;
--color-error: #f4a3a3;
--color-success: #4ade80;
}
[data-colorblind="protanopia"] { --correct: #3b82f6; --incorrect: #f97316; }
[data-colorblind="deuteranopia"] { --correct: #3b82f6; --incorrect: #f97316; }
[data-colorblind="tritanopia"] { --correct: #ef4444; --incorrect: #06b6d4; }
[data-colorblind="protanopia"] { --correct: #1d6fe0; --incorrect: #b45309; }
:root[data-theme="dark"][data-colorblind="protanopia"] { --correct: #7db4f0; --incorrect: #f5b078; }
[data-colorblind="deuteranopia"] { --correct: #1d6fe0; --incorrect: #b45309; }
:root[data-theme="dark"][data-colorblind="deuteranopia"] { --correct: #7db4f0; --incorrect: #f5b078; }
[data-colorblind="tritanopia"] { --correct: #dc2626; --incorrect: #0b6a82; }
:root[data-theme="dark"][data-colorblind="tritanopia"] { --correct: #f1a0a0; --incorrect: #74d0e8; }
.grid-sr-grid {
position: absolute;
@@ -163,7 +167,7 @@ body { font-family: var(--font-body); background: var(--bg); color: var(--text);
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.3; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary { background: var(--accent); color: var(--btn-primary-text); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-sm { font-size: 0.625rem; padding: 0.5rem 0.75rem; min-height: 2.75rem; min-width: 2.75rem; }
.btn-ghost { border-color: transparent; }
@@ -2648,7 +2652,7 @@ svg text {
.cv-select { position: relative; display: inline-block; }
.cv-select-trigger {
display: flex; align-items: center; gap: 6px; justify-content: space-between;
background: var(--surface); border: 1px solid var(--border);
background: var(--surface); border: 1px solid var(--border-light);
color: var(--text); cursor: pointer; min-width: 6rem;
font-family: var(--font-mono); font-size: 0.688rem;
padding: 0.375rem 0.625rem;
@@ -2675,7 +2679,7 @@ svg text {
.cv-number {
display: inline-flex; align-items: center;
border: 1px solid var(--border);
border: 1px solid var(--border-light);
}
.cv-number-btn {
background: var(--surface); border: none; cursor: pointer;
@@ -3890,3 +3894,9 @@ svg text {
.settings-body { flex-direction: column; }
.settings-sidebar { flex-direction: row; overflow-x: auto; }
}
/* focus-visible contracts for composite controls */
.cv-number-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cv-select-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cv-select-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }