diff --git a/docs/specs/158-device-icons-comparison.html b/docs/specs/158-device-icons-comparison.html index 00d6eb11..53a0c1b0 100644 --- a/docs/specs/158-device-icons-comparison.html +++ b/docs/specs/158-device-icons-comparison.html @@ -165,6 +165,9 @@ border-collapse: separate; border-spacing: 0; } + body[data-variants="both"] table { + min-width: max(2200px, calc(1500px + var(--s) * 20)); + } thead th { position: sticky; top: 65px; @@ -203,20 +206,80 @@ .sample { position: relative; display: grid; - min-height: clamp(156px, calc(var(--s) * 3.15), 310px); - place-items: center; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px; + padding: 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 13px; + background: color-mix(in srgb, var(--panel-solid) 80%, var(--line)); + isolation: isolate; + } + .theme-variant { + position: relative; + display: grid; + min-width: 0; + min-height: clamp(156px, calc(var(--s) * 3.15), 310px); + place-items: center; + overflow: hidden; + border: 1px solid color-mix(in srgb, var(--line) 62%, transparent); + border-radius: 9px; background: linear-gradient(135deg, var(--sample-a), var(--sample-b)); isolation: isolate; } - body[data-background="color"] .sample { + .theme-light { + color-scheme: light; + --sample-a: #edf2f6; + --sample-b: #f8fafc; + --old-bg: #fff; + --old-line: #cbd3df; + --old-text: #1d2733; + --glass: rgb(255 255 255 / 54%); + --glass-solid: #f8fafc; + --core: #fff; + --core-text: #050608; + --panel-solid: #fff; + color: #1c2430; + } + .theme-dark { + color-scheme: dark; + --sample-a: #151c26; + --sample-b: #202936; + --old-bg: #16212e; + --old-line: #34485c; + --old-text: #e6edf3; + --glass: rgb(38 43 52 / 62%); + --glass-solid: #2b313b; + --core: #2a3039; + --core-text: #f8fafc; + --panel-solid: #1c212a; + color: #f1f4f8; + } + .theme-label { + position: absolute; + top: 7px; + left: 7px; + z-index: 10; + padding: 3px 6px; + border: 1px solid color-mix(in srgb, currentColor 18%, transparent); + border-radius: 999px; + background: color-mix(in srgb, var(--panel-solid) 84%, transparent); + color: inherit; + font-size: 10px; + font-weight: 750; + line-height: 1; + pointer-events: none; + } + body[data-background="color"] .theme-variant { background: radial-gradient(circle at 19% 28%, rgb(240 160 12 / 28%), transparent 31%), radial-gradient(circle at 83% 19%, rgb(12 130 240 / 30%), transparent 34%), linear-gradient(145deg, #315b65 0%, #84725f 49%, #503d68 100%); } + body[data-variants="light"] .theme-dark, + body[data-variants="dark"] .theme-light { display: none; } + body[data-variants="light"] .sample, + body[data-variants="dark"] .sample { grid-template-columns: minmax(0, 1fr); } /* One normalized marker tree, two visual implementations. */ .marker { @@ -502,7 +565,7 @@ } - +

Issue #158 · S3 specification artifact

Все состояния устройств: сейчас → после реализации

-

Обе колонки строятся из одной state-матрицы. Левая воспроизводит текущий квадратный marker, правая — принятый круглый glass Device Face. Переключатели ниже меняют все строки одновременно.

+

Обе колонки строятся из одной state-матрицы. Левая воспроизводит текущий квадратный marker, правая — принятый круглый glass Device Face. По умолчанию каждое состояние одновременно показано в светлой и тёмной теме; переключатели ниже меняют все строки.

Это визуальный прототип ТЗ, а не production renderer @@ -526,7 +589,7 @@
- +
Размер marker
@@ -654,6 +717,10 @@ ]; const tbody = document.querySelector('#matrix'); + const themedSamples = (content) => `
+
Светлая${content}
+
Тёмная${content}
+
`; let count = 0; tbody.innerHTML = rows.map((row) => { if (row.group) return `${row.group}`; @@ -662,14 +729,18 @@ const after = row.special === 'lqi' ? lqiSet('new') : marker('new', row.options); return ` ${row.title}${row.code} -
${before}
-
${after}
+ ${themedSamples(before)} + ${themedSamples(after)} ${row.note} `; }).join(''); document.querySelector('#count').textContent = `${count} проверяемых строк`; - document.querySelector('#theme').addEventListener('change', (event) => { document.body.dataset.theme = event.target.value; }); + document.querySelector('#theme').addEventListener('change', (event) => { + const mode = event.target.value; + document.body.dataset.variants = mode; + document.body.dataset.theme = mode === 'dark' ? 'dark' : 'light'; + }); document.querySelector('#background').addEventListener('change', (event) => { document.body.dataset.background = event.target.value; }); document.querySelector('#reduced').addEventListener('change', (event) => { document.body.classList.toggle('reduced', event.target.checked); }); document.querySelector('#paused').addEventListener('change', (event) => { document.body.classList.toggle('paused', event.target.checked); }); diff --git a/docs/specs/158-device-icons-redesign.md b/docs/specs/158-device-icons-redesign.md index 8a27846e..86ed6db3 100644 --- a/docs/specs/158-device-icons-redesign.md +++ b/docs/specs/158-device-icons-redesign.md @@ -446,8 +446,9 @@ It must: - render columns «Сейчас» and «После #158» from one row matrix; - cover every row in §7–§9 plus Text, four Double positions, LQI unchanged, ghost/disabled and static icon; -- offer light/dark, plain/colored background, 32/56/96 px and reduced-motion - controls; +- show light and dark variants side by side in every «Сейчас»/«После #158» cell, + with a control to filter the matrix to either theme; +- offer plain/colored background, 32/56/96 px and reduced-motion controls; - require no build, server, HA session, font or network request; - show the accepted owner overrides prominently; - never be imported by production code or included as a runtime asset contract.