etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(datepicker): читаемость календаря в любой теме

Browse Source 
Переменные --rdp-* библиотека объявляет на самом .rdp-root, поэтому
оверрайды на родителе (.rdp-dark) шадовились — отсюда синий акцент,
синяя рамка вместо заливки и тусклые дни. Теперь целимся в
`.rdp-dark .rdp-root` (специфичность выше базовой). Выбранный день —
залит акцентом, числа — яркие, сегодня — акцентная подсветка, все
цвета через токены темы (dark/accent), так что инвертируются для
светлых тем (champagne) и остаются читаемыми везде.
This commit is contained in:
c0mrade
2026-06-02 16:32:24 +03:00
parent 016da9f638
commit a8213ce5d5
1 changed files with 40 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/styles/globals.css
View File

@@ -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));