@rnwonder/react-date-picker/themes/shad-cn-ui.css

A simple and reusable Datepicker component for ReactJS ([Demo](https://stackblitz.com/edit/solidjs-templates-dof6jl?file=src%2FApp.tsx))

:root{--shad-white:#fff;--shad-size-1:0.875rem;--shad-size-2:2rem;--shad-size-3:2.5rem;--shad-spacing-1:1.5rem;--shad-background:0 0% 100%;--shad-foreground:240 10% 3.9%;--shad-card:0 0% 100%;--shad-card-foreground:240 10% 3.9%;--shad-popover:0 0% 100%;--shad-popover-foreground:240 10% 3.9%;--shad-primary:240 5.9% 10%;--shad-primary-foreground:0 0% 98%;--shad-secondary:240 4.8% 95.9%;--shad-secondary-foreground:240 5.9% 10%;--shad-muted:240 4.8% 95.9%;--shad-muted-foreground:240 3.8% 46.1%;--shad-accent:240 4.8% 95.9%;--shad-accent-foreground:240 5.9% 10%;--shad-destructive:0 72.22% 50.59%;--shad-destructive-foreground:0 0% 98%;--shad-border:240 5.9% 90%;--shad-input:240 5.9% 90%;--shad-ring:240 5% 64.9%;--shad-radius:0.5rem;--shad-weekend-color:red}.date-picker-main-btn:not(.time-picker-meridiem-btn){height:var(--shad-size-2);min-width:var(--shad-size-2);text-transform:capitalize;color:hsl(var(--shad-popover-foreground))}.dark .date-picker-main-btn:not(.time-picker-meridiem-btn):disabled,.date-picker-main-btn:not(.time-picker-meridiem-btn):disabled,[data-theme=dark] .date-picker-main-btn:not(.time-picker-meridiem-btn):disabled{background-color:transparent;color:hsl(var(--shad-muted-foreground))}.dark .date-picker-main-btn:not(.time-picker-meridiem-btn):disabled:hover,.date-picker-main-btn:not(.time-picker-meridiem-btn):disabled:hover,[data-theme=dark] .date-picker-main-btn:disabled:hover{background-color:transparent;color:hsl(var(--shad-muted-foreground))}.dark .date-picker-main-btn:not(.time-picker-meridiem-btn):hover,.date-picker-main-btn:not(.time-picker-meridiem-btn):hover,[data-theme=dark] .date-picker-main-btn:hover{background-color:hsl(var(--shad-accent))}.date-prev-next-btn,.selector-prev-next-btn{min-width:1.75rem;height:1.75rem;background-color:transparent;border-radius:calc(var(--shad-radius) - 2px);border:1px solid hsl(var(--shad-input))}.dark .date-prev-next-btn:hover,.dark .selector-prev-next-btn:hover,.date-prev-next-btn:hover,.selector-prev-next-btn:hover,[data-theme=dark] .date-prev-next-btn:hover,[data-theme=dark] .selector-prev-next-btn:hover{border:1px solid hsl(var(--shad-input));background-color:hsl(var(--shad-accent))}.date-prev-next-btn>svg,.selector-prev-next-btn>svg{width:1em;height:1em;fill:hsl(var(--shad-popover-foreground));opacity:.7}.date-prev-next-btn:hover>svg{opacity:1}.date-selector-trigger{font-size:var(--shad-size-1);text-transform:capitalize;font-weight:500;color:hsl(var(--shad-popover-foreground))}.dark .date-selector-option,.date-selector-option,[data-theme=dark] .date-selector-option{min-height:var(--shad-size-3);font-weight:400;color:hsl(var(--shad-popover-foreground))}.dark [date-selector-option-selected=true],.dark [date-selector-option-selected=true]:hover,[data-theme=dark] [date-selector-option-selected=true],[data-theme=dark] [date-selector-option-selected=true]:hover,[date-selector-option-selected=true],[date-selector-option-selected=true]:hover{background-color:hsl(var(--shad-primary));color:var(--shad-white)}.date-picker-calendar-days-area{row-gap:.2rem;display:flex;flex-direction:column}.dark .date-picker-weekday-name,.date-picker-weekday-name,[data-theme=dark] .date-picker-weekday-name{height:var(--shad-size-2);width:var(--shad-size-2);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:400;color:hsl(var(--shad-muted-foreground));text-transform:capitalize}.date-picker-calendar-row{grid-template-columns:repeat(7,minmax(0,2rem))}.dark .date-picker-day-number-area::before,.date-picker-day-number-area::before,[data-theme=dark] .date-picker-day-number-area::before{background-color:hsl(var(--shad-accent))}.date-picker-day-number-area{height:var(--shad-size-2);width:var(--shad-size-2)}.date-picker-day-number-area:empty{width:0;height:0}.dark .date-picker-day-number,.date-picker-day-number,[data-theme=dark] .date-picker-day-number{min-height:var(--shad-size-2);min-width:var(--shad-size-2);border-radius:calc(var(--shad-radius) - 2px);font-size:var(--shad-size-1);font-weight:400;color:hsl(var(--shad-popover-foreground))}[data-day-number-current-day=true],[data-day-number-current-day=true]:hover{border:none;background-color:hsl(var(--shad-accent))}.day-number-not-current-month{color:hsl(var(--shad-muted-foreground));opacity:.5}.day-number-not-current-month:hover{opacity:.7}.dark [data-day-number-area-range-between=true],[data-day-number-area-range-between=true],[data-theme=dark] [data-day-number-area-range-between=true]{background-color:hsl(var(--shad-accent));color:hsl(var(--shad-muted-foreground))}.dark [data-highlight-weekend=true][data-day-number-is-weekend=true],[data-highlight-weekend=true][data-day-number-is-weekend=true],[data-theme=dark] [data-highlight-weekend=true][data-day-number-is-weekend=true]{color:var(--shad-weekend-color)}.dark [data-day-number-selected=true],.dark [data-day-number-selected=true]:hover,.dark [data-day-number-selected=true][data-highlight-weekend=true],[data-day-number-selected=true],[data-day-number-selected=true]:hover,[data-day-number-selected=true][data-highlight-weekend=true],[data-theme=dark] [data-day-number-selected=true],[data-theme=dark] [data-day-number-selected=true]:hover,[data-theme=dark] [data-day-number-selected=true][data-highlight-weekend=true]{background-color:hsl(var(--shad-primary));color:var(--shad-white)}.dark [data-day-number-range-end-selected=false][data-day-number-selected=true],[data-day-number-range-end-selected=false][data-day-number-selected=true],[data-theme=dark] [data-day-number-range-end-selected=false][data-day-number-selected=true]{background-color:hsl(var(--shad-accent));font-weight:500;color:hsl(var(--shad-popover-foreground))}.dark [data-day-number-range-end-selected=true][data-day-number-selected=true][data-day-number-current-day=true]::before,[data-day-number-range-end-selected=true][data-day-number-selected=true][data-day-number-current-day=true]::before,[data-theme=dark] [data-day-number-range-end-selected=true][data-day-number-selected=true][data-day-number-current-day=true]::before{color:var(--shad-white)}@media (max-width:620px){.date-picker-calendar-wrapper{flex-direction:column}}.dark,[data-theme=dark]{--shad-white:#000000;--shad-background:240 10% 3.9%;--shad-foreground:0 0% 98%;--shad-card:240 10% 3.9%;--shad-card-foreground:0 0% 98%;--shad-popover:240 10% 3.9%;--shad-popover-foreground:0 0% 98%;--shad-primary:0 0% 98%;--shad-primary-foreground:240 5.9% 10%;--shad-secondary:240 3.7% 15.9%;--shad-secondary-foreground:0 0% 98%;--shad-muted:240 3.7% 15.9%;--shad-muted-foreground:240 5% 64.9%;--shad-accent:240 3.7% 15.9%;--shad-accent-foreground:0 0% 98%;--shad-destructive:0 62.8% 30.6%;--shad-destructive-foreground:0 85.7% 97.3%;--shad-border:240 3.7% 15.9%;--shad-input:240 3.7% 15.9%;--shad-ring:240 4.9% 83.9%}