@tailwind base; @tailwind components; @tailwind utilities; :root { --brand-color: #292929; --brand-text-color: #ffffff; --brand-color-dark-mode: #fafafa; --brand-text-color-dark-mode: #292929; } /* * Override the default tailwindcss-forms styling (default is: 'colors.blue.600') * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006 */ [type="text"]:focus, [type="email"]:focus, [type="url"]:focus, [type="password"]:focus, [type="number"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="checkbox"]:focus, [type="radio"]:focus, [type="time"]:focus, [type="week"]:focus, [multiple]:focus, textarea:focus, select:focus { --tw-ring-color: var(--brand-color); border-color: var(--brand-color); } button[role="switch"][data-state="checked"] { @apply bg-gray-900; } button[role="switch"][data-state="checked"] span { transform: translateX(16px); } /* PhoneInput dark-mode overrides (it would add a lot of boilerplate to do this in JavaScript) */ .PhoneInputInput { @apply border-0 text-sm focus:ring-0; } .dark .PhoneInputInput { @apply bg-black; } .PhoneInputCountrySelect { @apply text-black; } /* DateRangePicker */ .react-daterange-picker > .react-daterange-picker__wrapper { /* border consistent with other inputs */ @apply rounded-sm border-gray-300 px-2 py-1.5 sm:text-sm lg:py-1; } .react-daterange-picker > .react-daterange-picker__wrapper input { /* Makes sure the on-focus behaviour is like Cal.com's */ @apply my-0.5 h-auto rounded-sm py-0.5; } /* note(PeerRich): TODO move @layer components into proper React Components: