fix(colors): update Oracal brand colors to exact catalog RGB values

053M: #7ecfca → #0089C3 (rgb 0,137,195) 073M: #5b7b87 → #53514E (rgb 83,81,78) 066M: #5bb5ad → #00818C (rgb 0,129,140) 050M: #1b4c72 → #1B2E5D (rgb 27,46,93) 081M: #c4a882 → #A8885C (rgb 168,136,92) 080M: #5c2e0e → #432F1E (rgb 67,47,30) - Update globals.css CSS vars + sidebar active bg (→ #dff0fa) - Update focus box-shadow rgba for new 053M blue - colors/page.tsx: BRAND_COLORS, COLOR_MAPPING notes, CONTRAST_PAIRS - LLM text v2.2: new hex/rgb, recalculated WCAG contrast ratios, updated rules (white text on 073M/066M/050M/080M, dark on 053M/081M) - Info banner changed from ⚠️ "приблизительны" to ℹ "точные RGB" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 week ago · 3811c579fd
2 changed files with 63 additions and 63 deletions
--- a/apps/web/app/foundation/colors/page.tsx
+++ b/apps/web/app/foundation/colors/page.tsx
@ -55,42 +55,42 @@ const BRAND_COLORS = [
  {
    oracal: "053M",
    name: "Основной бирюзовый",
-    hex: "#7ecfca",
+    hex: "#0089c3",
    usage: "Акцентный цвет, CTA-кнопки, иконки, активные состояния",
    cssVar: "--brand-053m",
  },
  {
    oracal: "073M",
    name: "Тёмный серо-голубой",
-    hex: "#5b7b87",
+    hex: "#53514e",
    usage: "Тёмный фон, хедер, акценты на тёмных поверхностях",
    cssVar: "--brand-073m",
  },
  {
    oracal: "066M",
    name: "Средний бирюзовый",
-    hex: "#5bb5ad",
+    hex: "#00818c",
    usage: "Вторичные акценты, фоны секций, иллюстрации",
    cssVar: "--brand-066m",
  },
  {
    oracal: "050M",
    name: "Тёмно-синий",
-    hex: "#1b4c72",
+    hex: "#1b2e5d",
    usage: "Наружная реклама, полиграфия, заголовки на светлом фоне",
    cssVar: "--brand-050m",
  },
  {
    oracal: "081M",
    name: "Бежевый",
-    hex: "#c4a882",
+    hex: "#a8885c",
    usage: "Форма сотрудников, оффлайн носители, тёплые акценты",
    cssVar: "--brand-081m",
  },
  {
    oracal: "080M",
    name: "Тёмно-коричневый",
-    hex: "#5c2e0e",
+    hex: "#432f1e",
    usage: "Текст на бежевых поверхностях, логотип на форме",
    cssVar: "--brand-080m",
  },
@ -106,32 +106,32 @@ const BRAND_COLORS = [
 /* ─── Соответствие цветов ──────────────────────────────────────────── */
 const COLOR_MAPPING = [
  {
-    brand: { oracal: "053M", name: "Основной бирюзовый", hex: "#7ecfca" },
+    brand: { oracal: "053M", name: "Основной бирюзовый", hex: "#0089c3" },
    web:   { name: "Бирюзовый", hex: "#63bac3", count: 4 },
-    note:  "Чуть темнее и насыщеннее на сайте",
+    note:  "Oracal — насыщенный синий; сайт — светлее и голубее",
  },
  {
-    brand: { oracal: "073M", name: "Тёмный серо-голубой", hex: "#5b7b87" },
+    brand: { oracal: "073M", name: "Тёмный серо-голубой", hex: "#53514e" },
    web:   { name: "Серо-бирюзовый", hex: "#60959c", count: 7 },
-    note:  "Светлее на сайте",
+    note:  "Oracal — тёмно-серый; сайт — серо-бирюзовый (значительное расхождение)",
  },
  {
-    brand: { oracal: "066M", name: "Средний бирюзовый", hex: "#5bb5ad" },
+    brand: { oracal: "066M", name: "Средний бирюзовый", hex: "#00818c" },
    web:   { name: "Бирюзовый средний", hex: "#52b4bd", count: 4 },
-    note:  "Смещён в синеву",
+    note:  "Oracal — тёмный бирюзовый; сайт — светлее",
  },
  {
-    brand: { oracal: "081M", name: "Бежевый", hex: "#c4a882" },
+    brand: { oracal: "081M", name: "Бежевый", hex: "#a8885c" },
    web:   { name: "Бежевый", hex: "#bf9975", count: 12 },
-    note:  "Темнее и насыщеннее на сайте",
+    note:  "Oracal — тёплый охристый; сайт — прохладнее и светлее",
  },
  {
-    brand: { oracal: "050M", name: "Тёмно-синий", hex: "#1b4c72" },
+    brand: { oracal: "050M", name: "Тёмно-синий", hex: "#1b2e5d" },
    web:   null,
    note:  "Не найден в CSS сайта",
  },
  {
-    brand: { oracal: "080M", name: "Тёмно-коричневый", hex: "#5c2e0e" },
+    brand: { oracal: "080M", name: "Тёмно-коричневый", hex: "#432f1e" },
    web:   null,
    note:  "Не найден в CSS сайта",
  },
@ -185,13 +185,13 @@ const WEB_COLORS = [
 ];

 const CONTRAST_PAIRS = [
-  { fg: "#ffffff", bg: "#5b7b87", label: "Белый на тёмном серо-голубом" },
-  { fg: "#ffffff", bg: "#1b4c72", label: "Белый на тёмно-синем" },
-  { fg: "#ffffff", bg: "#5c2e0e", label: "Белый на тёмно-коричневом" },
-  { fg: "#ffffff", bg: "#5bb5ad", label: "Белый на среднем бирюзовом" },
-  { fg: "#111827", bg: "#7ecfca", label: "Тёмный текст на основном бирюзовом" },
-  { fg: "#111827", bg: "#c4a882", label: "Тёмный текст на бежевом" },
-  { fg: "#5c2e0e", bg: "#c4a882", label: "Тёмно-коричневый на бежевом (форма)" },
+  { fg: "#ffffff", bg: "#53514e", label: "Белый на тёмном серо-голубом (073M)" },
+  { fg: "#ffffff", bg: "#1b2e5d", label: "Белый на тёмно-синем (050M)" },
+  { fg: "#ffffff", bg: "#432f1e", label: "Белый на тёмно-коричневом (080M)" },
+  { fg: "#ffffff", bg: "#00818c", label: "Белый на среднем бирюзовом (066M)" },
+  { fg: "#111827", bg: "#0089c3", label: "Тёмный текст на основном бирюзовом (053M)" },
+  { fg: "#111827", bg: "#a8885c", label: "Тёмный текст на бежевом (081M)" },
+  { fg: "#432f1e", bg: "#a8885c", label: "Тёмно-коричневый на бежевом (форма, 080M/081M)" },
 ];

 /* ─── Компоненты ───────────────────────────────────────────────────── */
@ -403,16 +403,16 @@ function exportTokens() {
 /* ─── LLM spec text ────────────────────────────────────────────────── */
 const LLM_COLORS_TEXT = `# ЦВЕТА — LLM-СПЕЦИФИКАЦИЯ
 # Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
-# docs/LLM_CONTEXT.md · /foundation/colors · v2.1 · 2026-03-22
+# docs/LLM_CONTEXT.md · /foundation/colors · v2.2 · 2026-03-22

-ФИРМЕННЫЕ ЦВЕТА (Oracal)
+ФИРМЕННЫЕ ЦВЕТА (Oracal) — точные значения из каталога
 Oracal | Название             | HEX     | RGB              | CSS-переменная | Применение
-053M   | Основной бирюзовый   | #7ECFCA | rgb(126,207,202) | --brand-053m   | Акцент, CTA-кнопки, иконки, активные состояния
-073M   | Тёмный серо-голубой  | #5B7B87 | rgb(91,123,135)  | --brand-073m   | Тёмный фон, хедер, заголовки навигации
-066M   | Средний бирюзовый    | #5BB5AD | rgb(91,181,173)  | --brand-066m   | Вторичные акценты, фоны секций
-050M   | Тёмно-синий          | #1B4C72 | rgb(27,76,114)   | --brand-050m   | Наружная реклама, полиграфия, заголовки
-081M   | Бежевый              | #C4A882 | rgb(196,168,130) | --brand-081m   | Форма сотрудников, тёплые акценты
-080M   | Тёмно-коричневый     | #5C2E0E | rgb(92,46,14)    | --brand-080m   | Текст на бежевом, логотип на форме
+053M   | Основной бирюзовый   | #0089C3 | rgb(0,137,195)   | --brand-053m   | Акцент, CTA-кнопки, иконки, активные состояния
+073M   | Тёмный серо-голубой  | #53514E | rgb(83,81,78)    | --brand-073m   | Тёмный фон, хедер, заголовки навигации
+066M   | Средний бирюзовый    | #00818C | rgb(0,129,140)   | --brand-066m   | Вторичные акценты, фоны секций
+050M   | Тёмно-синий          | #1B2E5D | rgb(27,46,93)    | --brand-050m   | Наружная реклама, полиграфия, заголовки
+081M   | Бежевый              | #A8885C | rgb(168,136,92)  | --brand-081m   | Форма сотрудников, тёплые акценты
+080M   | Тёмно-коричневый     | #432F1E | rgb(67,47,30)    | --brand-080m   | Текст на бежевом, логотип на форме
 —      | Белый                | #FFFFFF | rgb(255,255,255) | --brand-white  | Фон, инвертированный текст, логотип на тёмных

 ЦВЕТА САЙТА oclinica.ru (CSS: clinic_bootstrap_mobile/css/style.css)
@ -429,29 +429,29 @@ Oracal | Название             | HEX     | RGB              | CSS-пер
 Светло-жёлтый фон    | #EEF4D1 | Фоны    | 1 | Фон карточек отзывов
 Светло-зелёный фон   | #F2FEE6 | Фоны    | 1 | Фон секции новостей

-СООТВЕТСТВИЕ ORACAL → САЙТ
-053M #7ECFCA → #63BAC3 (темнее, насыщеннее)
-073M #5B7B87 → #60959C (светлее)
-066M #5BB5AD → #52B4BD (смещён в синеву)
-081M #C4A882 → #BF9975 (темнее, насыщеннее)
-050M #1B4C72 → не найден в CSS сайта
-080M #5C2E0E → не найден в CSS сайта
+СООТВЕТСТВИЕ ORACAL → САЙТ (цифровая адаптация плёночных цветов)
+053M #0089C3 → #63BAC3 (Oracal ярко-синий; сайт светлее и голубее)
+073M #53514E → #60959C (Oracal тёмно-серый; сайт серо-бирюзовый — значительное расхождение)
+066M #00818C → #52B4BD (Oracal тёмный бирюзовый; сайт светлее)
+081M #A8885C → #BF9975 (Oracal тёплый охристый; сайт прохладнее и светлее)
+050M #1B2E5D → не найден в CSS сайта
+080M #432F1E → не найден в CSS сайта

 КОНТРАСТНОСТЬ WCAG 2.1
-#FFFFFF / #5B7B87  | 4.6:1  | AA PASS | AAA FAIL
-#FFFFFF / #1B4C72  | 9.3:1  | AA PASS | AAA PASS
-#FFFFFF / #5C2E0E  | 11.2:1 | AA PASS | AAA PASS
-#FFFFFF / #5BB5AD  | 3.0:1  | AA FAIL | AAA FAIL | только крупный текст ≥18pt
-#111827 / #7ECFCA  | 5.8:1  | AA PASS | AAA FAIL
-#111827 / #C4A882  | 4.8:1  | AA PASS | AAA FAIL
-#5C2E0E / #C4A882  | 6.7:1  | AA PASS | AAA FAIL
+#FFFFFF / #53514E  | 7.9:1  | AA PASS | AAA PASS
+#FFFFFF / #1B2E5D  | 13.2:1 | AA PASS | AAA PASS
+#FFFFFF / #432F1E  | 12.6:1 | AA PASS | AAA PASS
+#FFFFFF / #00818C  | 4.7:1  | AA PASS | AAA FAIL
+#111827 / #0089C3  | 4.7:1  | AA PASS | AAA FAIL
+#111827 / #A8885C  | 5.5:1  | AA PASS | AAA FAIL
+#432F1E / #A8885C  | 3.8:1  | AA FAIL | AAA FAIL | только крупный текст ≥18pt

 ПРАВИЛА
 ✓ Только цвета из фирменной палитры
 ✓ Digital → цвета сайта; оффлайн → коды Oracal
 ✓ Текст на цветном фоне: минимум WCAG AA (4.5:1)
-✓ Белый текст на: 073M (#5B7B87), 050M (#1B4C72), 080M (#5C2E0E)
-✓ Тёмный текст на: 053M (#7ECFCA), 081M (#C4A882)
+✓ Белый текст на: 073M (#53514E), 066M (#00818C), 050M (#1B2E5D), 080M (#432F1E)
+✓ Тёмный текст (#111827) на: 053M (#0089C3), 081M (#A8885C)
 ✕ Произвольные цвета вне фирменной палитры
 ✕ Изменение насыщенности / оттенка фирменных цветов
 ✕ Тёплые и холодные акценты рядом без нейтрального разделителя`.trim();
@ -480,12 +480,12 @@ export default function ColorsPage() {
        <div className="mt-4 flex items-center justify-between">
          <div
            className="px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
-            style={{ borderColor: "#fde68a", background: "#fffbeb", color: "#92400e" }}
+            style={{ borderColor: "#bae6fd", background: "#f0f9ff", color: "#075985" }}
          >
-            <span>⚠️</span>
+            <span>ℹ</span>
            <span>
-              HEX-значения приблизительны. Для оффлайн-носителей используйте
-              официальные коды Oracal.
+              HEX-значения рассчитаны по точным RGB из каталога Oracal.
+              Для оффлайн-носителей используйте официальные коды Oracal.
            </span>
          </div>
          <button
@ -723,7 +723,7 @@ export default function ColorsPage() {
        </div>
        <LlmBlock
          path="/foundation/colors"
-          version="v2.1"
+          version="v2.2"
          specText={LLM_COLORS_TEXT}
        >
          {/* Фирменные цвета */}
@ -799,8 +799,8 @@ export default function ColorsPage() {
              { ok: true,  text: "Только цвета из фирменной палитры" },
              { ok: true,  text: "Digital → цвета сайта; оффлайн → коды Oracal" },
              { ok: true,  text: "Текст на цветном фоне: минимум WCAG AA (4.5:1)" },
-              { ok: true,  text: "Белый текст на: 073M, 050M, 080M" },
-              { ok: true,  text: "Тёмный текст на: 053M, 081M" },
+              { ok: true,  text: "Белый текст на: 073M (#53514E), 066M (#00818C), 050M (#1B2E5D), 080M (#432F1E)" },
+              { ok: true,  text: "Тёмный текст (#111827) на: 053M (#0089C3), 081M (#A8885C)" },
              { ok: false, text: "Произвольные цвета вне фирменной палитры" },
              { ok: false, text: "Изменение насыщенности / оттенка фирменных цветов" },
              { ok: false, text: "Тёплые + холодные акценты рядом без разделителя" },
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@ -3,13 +3,13 @@
 /* ─── Бренд-токены О!Клиника ─────────────────────────────────────────── */
 /* Цвета уточняются в Sprint 2 по таблице Oracal                          */
 :root {
-  /* Фирменные цвета (приблизительно — уточнить в Sprint 2) */
-  --brand-053m: #7ecfca;   /* Основной бирюзовый (Oracal 053M) */
-  --brand-073m: #5b7b87;   /* Тёмный серо-голубой (Oracal 073M) */
-  --brand-066m: #5bb5ad;   /* Средний бирюзовый (Oracal 066M) */
-  --brand-050m: #1b4c72;   /* Тёмно-синий, наружная реклама (Oracal 050M) */
-  --brand-081m: #c4a882;   /* Бежевый (Oracal 081M) */
-  --brand-080m: #5c2e0e;   /* Тёмно-коричневый (Oracal 080M) */
+  /* Фирменные цвета — точные RGB из каталога Oracal */
+  --brand-053m: #0089c3;   /* Основной бирюзовый (Oracal 053M) · rgb(0,137,195) */
+  --brand-073m: #53514e;   /* Тёмный серо-голубой (Oracal 073M) · rgb(83,81,78) */
+  --brand-066m: #00818c;   /* Средний бирюзовый (Oracal 066M) · rgb(0,129,140) */
+  --brand-050m: #1b2e5d;   /* Тёмно-синий, наружная реклама (Oracal 050M) · rgb(27,46,93) */
+  --brand-081m: #a8885c;   /* Бежевый (Oracal 081M) · rgb(168,136,92) */
+  --brand-080m: #432f1e;   /* Тёмно-коричневый (Oracal 080M) · rgb(67,47,30) */
  --brand-white: #ffffff;

  /* UI-цвета брендбука */
@ -17,7 +17,7 @@
  --bb-sidebar-border: #e5e7eb;
  --bb-sidebar-text: #374151;
  --bb-sidebar-text-muted: #6b7280;
-  --bb-sidebar-active-bg: #e0f5f4;
+  --bb-sidebar-active-bg: #dff0fa;
  --bb-sidebar-active-text: var(--brand-053m);
  --bb-sidebar-section: #9ca3af;
  --bb-content-bg: #ffffff;
@ -130,7 +130,7 @@ body {
 .bb-textarea:focus,
 .bb-select:focus {
  border-color: var(--brand-053m);
-  box-shadow: 0 0 0 3px rgba(126, 207, 202, 0.2);
+  box-shadow: 0 0 0 3px rgba(0, 137, 195, 0.2);
 }
 .bb-input.bb-error,
 .bb-textarea.bb-error,