From 761347ed858e216078cf95e8343637fbb9e37c0f Mon Sep 17 00:00:00 2001 From: AR 15 M4 Date: Sun, 22 Mar 2026 19:29:27 +0500 Subject: [PATCH] =?UTF-8?q?feat(colors):=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5?= =?UTF-8?q?=D0=BB=20=C2=AB=D0=A6=D0=B2=D0=B5=D1=82=D0=B0=20=D1=81=20=D1=81?= =?UTF-8?q?=D0=B0=D0=B9=D1=82=D0=B0=C2=BB=20+=20=D0=B4=D0=BE=D0=BA=D1=83?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=86=D0=B8=D1=8F=20=D0=B8=D1=81?= =?UTF-8?q?=D1=82=D0=BE=D1=87=D0=BD=D0=B8=D0=BA=D0=B0=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Добавлен массив WEB_COLORS (8 цветов из CSS темы oclinica.ru) - Добавлен компонент WebColorCard с группой, счётчиком применений, HEX/RGB/HSL - Новый раздел «Цвета с сайта» со ссылкой на CSS-источник в интерфейсе - TZ.md: ОВ-07 — зафиксирован URL темы clinic_bootstrap_mobile и метод извлечения Источник CSS: perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css Co-Authored-By: Claude Sonnet 4.6 --- apps/web/app/foundation/colors/page.tsx | 91 ++++++++++++++++++++++++- docs/TZ.md | 3 +- 2 files changed, 92 insertions(+), 2 deletions(-) diff --git a/apps/web/app/foundation/colors/page.tsx b/apps/web/app/foundation/colors/page.tsx index ac89a99..131b755 100644 --- a/apps/web/app/foundation/colors/page.tsx +++ b/apps/web/app/foundation/colors/page.tsx @@ -102,6 +102,20 @@ const BRAND_COLORS = [ }, ]; +/* ─── Цвета с сайта ────────────────────────────────────────────────── */ +// Источник: https://perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css +// Извлечены парсингом CSS: grep + python Counter по property/value, 2026-03-22 +const WEB_COLORS = [ + { name: "Бежевый", hex: "#bf9975", usage: "Основной тёплый акцент, фоны, рамки, текст", count: 12, group: "Акценты" }, + { name: "Серо-бирюзовый", hex: "#60959c", usage: "Основной холодный акцент, ссылки", count: 7, group: "Акценты" }, + { name: "Бирюзовый", hex: "#63bac3", usage: "Фоны акцентных блоков, иконки", count: 4, group: "Акценты" }, + { name: "Бирюзовый средний", hex: "#52b4bd", usage: "Вторичные цветовые акценты", count: 4, group: "Акценты" }, + { name: "Основной текст", hex: "#464646", usage: "Цвет основного текста на сайте", count: 3, group: "Текст" }, + { name: "Второстепенный текст", hex: "#949290", usage: "Подписи, второстепенный контент", count: 4, group: "Текст" }, + { name: "Светло-бирюзовый фон", hex: "#b8e6ed", usage: "Фоны светлых секций с акцентом", count: 1, group: "Фоны" }, + { name: "Кремовый фон", hex: "#e9e4d4", usage: "Тёплые фоны секций", count: 1, group: "Фоны" }, +]; + const CONTRAST_PAIRS = [ { fg: "#ffffff", bg: "#5b7b87", label: "Белый на тёмном серо-голубом" }, { fg: "#ffffff", bg: "#1b4c72", label: "Белый на тёмно-синем" }, @@ -245,6 +259,56 @@ function ContrastRow({ pair }: { pair: typeof CONTRAST_PAIRS[0] }) { ); } +function WebColorCard({ color }: { color: typeof WEB_COLORS[0] }) { + const { r, g, b } = hexToRgb(color.hex); + const { h, s, l } = rgbToHsl(r, g, b); + const isLight = l > 60; + + return ( +
+
+ + {color.group} + + + ×{color.count} + +
+
+

+ {color.name} +

+

+ {color.usage} +

+
+ + + +
+
+
+ ); +} + /* ─── Экспорт токенов ──────────────────────────────────────────────── */ function exportTokens() { const tokens: Record> = { colors: {} }; @@ -348,7 +412,32 @@ export default function ColorsPage() { - {/* 3. Применение */} + {/* 3. Цвета с сайта */} +
+
+

+ Цвета с сайта +

+

+ Реальные цвета, используемые на сайте oclinica.ru. Извлечены из CSS темы сайта. + Число применений показано в правом углу карточки. +

+
+ CSS + perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css +
+
+
+ {WEB_COLORS.map(c => ( + + ))} +
+
+ + {/* 4. Применение */}

diff --git a/docs/TZ.md b/docs/TZ.md index 88229d1..cd1f26b 100644 --- a/docs/TZ.md +++ b/docs/TZ.md @@ -530,7 +530,8 @@ vercel --prod --yes | ОВ-03 | Нужна ли страница «Заболевание» как отдельный тип, или это подвид страницы «Услуга»? | Клиника | Sprint 9 | | ОВ-04 | Список иконок — какую стороннюю библиотеку утвердить? (Lucide, Heroicons, и др.) | Совместно | Sprint 2 | | ОВ-05 | ~~Нужен ли раздел «Логотип» в v1.0 или ждём вектор?~~ **Закрыт:** страница логотипа реализуется в Sprint 1 с PNG-версией; вектор будет добавлен позже | — | Закрыт | -| ОВ-06 | ~~HEX-эквиваленты цветов Oracal~~ **Закрыт:** приблизительные HEX зафиксированы в Sprint 2 и подтверждены как рабочие (053M=#7ecfca, 073M=#5b7b87, 066M=#5bb5ad, 050M=#1b4c72, 081M=#c4a882, 080M=#5c2e0e). Точная калибровка — при получении физических образцов. | — | Закрыт | +| ОВ-06 | ~~HEX-эквиваленты цветов Oracal~~ **Закрыт:** приблизительные HEX зафиксированы в Sprint 2 (053M=#7ecfca, 073M=#5b7b87, 066M=#5bb5ad, 050M=#1b4c72, 081M=#c4a882, 080M=#5c2e0e). Дополнительно — реальные цвета сайта извлечены из CSS (см. ОВ-07). Точная калибровка Oracal — при получении физических образцов. | — | Закрыт | +| ОВ-07 | **Цвета сайта oclinica.ru** — CSS тема Drupal доступна по адресу: `https://perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css`. Тема: `clinic_bootstrap_mobile`. Ключевые цвета извлечены парсингом (python + regex + Counter), 2026-03-22. Добавлены в раздел «Цвета с сайта» в брендбуке (`/foundation/colors`). Расхождение с Oracal-палитрой ожидаемо — цифровые адаптации под экран. | — | Закрыт | ---