From a8213ce5d5fccd24ee192196a52accbf65954984 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 2 Jun 2026 16:32:24 +0300
Subject: [PATCH] =?UTF-8?q?fix(datepicker):=20=D1=87=D0=B8=D1=82=D0=B0?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=BE=D1=81=D1=82=D1=8C=20=D0=BA=D0=B0=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B4=D0=B0=D1=80=D1=8F=20=D0=B2=20=D0=BB=D1=8E=D0=B1?=
 =?UTF-8?q?=D0=BE=D0=B9=20=D1=82=D0=B5=D0=BC=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Переменные --rdp-* библиотека объявляет на самом .rdp-root, поэтому
оверрайды на родителе (.rdp-dark) шадовились — отсюда синий акцент,
синяя рамка вместо заливки и тусклые дни. Теперь целимся в
`.rdp-dark .rdp-root` (специфичность выше базовой). Выбранный день —
залит акцентом, числа — яркие, сегодня — акцентная подсветка, все
цвета через токены темы (dark/accent), так что инвертируются для
светлых тем (champagne) и остаются читаемыми везде.
---
 src/styles/globals.css | 47 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2561198..4e783fe 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1392,18 +1392,26 @@ input[type='checkbox']:hover:not(:checked) {
   outline: none;
 }
 
-/* react-day-picker (DateField) — dark theme via the library's CSS variables. */
+/* react-day-picker (DateField) — themed via the library's CSS variables.
+   The library declares its rdp variables ON .rdp-root, so overriding them on a
+   parent (.rdp-dark) gets shadowed. We must target `.rdp-dark .rdp-root` to win.
+   All colors go through the app's theme tokens (the dark and accent scales),
+   which flip for light themes (e.g. champagne) — so the picker stays legible in
+   every theme without bespoke per-theme rules. */
 .rdp-dark {
+  color: rgb(var(--color-dark-100));
+  font-size: 0.85rem;
+}
+.rdp-dark .rdp-root {
   --rdp-accent-color: rgb(var(--color-accent-500));
   --rdp-accent-background-color: rgb(var(--color-accent-500) / 0.18);
   --rdp-today-color: rgb(var(--color-accent-400));
   --rdp-day-height: 2.25rem;
   --rdp-day-width: 2.25rem;
-  --rdp-outside-opacity: 0.35;
-  --rdp-disabled-opacity: 0.3;
+  --rdp-outside-opacity: 0.4;
+  --rdp-disabled-opacity: 0.4;
   --rdp-selected-border: none;
-  color: rgb(var(--color-dark-200));
-  font-size: 0.85rem;
+  --rdp-weekday-opacity: 1;
 }
 .rdp-dark .rdp-month_caption,
 .rdp-dark .rdp-caption_label {
@@ -1412,23 +1420,48 @@ input[type='checkbox']:hover:not(:checked) {
   text-transform: capitalize;
 }
 .rdp-dark .rdp-weekday {
-  color: rgb(var(--color-dark-500));
+  color: rgb(var(--color-dark-400));
   font-weight: 500;
   text-transform: capitalize;
 }
 .rdp-dark .rdp-day_button {
+  color: rgb(var(--color-dark-100));
+  border: none;
   border-radius: 0.5rem;
 }
 .rdp-dark .rdp-day_button:hover:not([disabled]) {
   background-color: rgb(var(--color-dark-700));
 }
+.rdp-dark .rdp-day_button:focus-visible {
+  outline: 2px solid rgb(var(--color-accent-500));
+  outline-offset: 1px;
+}
+/* Today: accent-tinted text + subtle ring (loses to the filled "selected" look). */
+.rdp-dark .rdp-today:not(.rdp-outside) .rdp-day_button {
+  color: rgb(var(--color-accent-400));
+  font-weight: 700;
+  box-shadow: inset 0 0 0 1px rgb(var(--color-accent-500) / 0.45);
+}
 .rdp-dark .rdp-selected .rdp-day_button {
+  background-color: rgb(var(--color-accent-500));
   color: #fff;
-  font-weight: 600;
+  font-weight: 700;
+  border: none;
+  box-shadow: none;
 }
 .rdp-dark .rdp-chevron {
   fill: currentColor;
 }
+.rdp-dark .rdp-button_previous,
+.rdp-dark .rdp-button_next {
+  color: rgb(var(--color-dark-300));
+  border-radius: 0.5rem;
+}
+.rdp-dark .rdp-button_previous:hover:not([disabled]),
+.rdp-dark .rdp-button_next:hover:not([disabled]) {
+  color: rgb(var(--color-dark-100));
+  background-color: rgb(var(--color-dark-700));
+}
 
 .light input[type='checkbox'] {
   border-color: rgb(var(--color-champagne-400));