diff --git a/assets/_colors.css b/assets/_colors.css new file mode 100644 index 0000000..63afdf5 --- /dev/null +++ b/assets/_colors.css @@ -0,0 +1,301 @@ +:root { + --event-red-foreground: var(--color-slate-900); + --event-red-background: var(--color-red-500); + + --event-orange-foreground: var(--color-slate-900); + --event-orange-background: var(--color-orange-500); + + --event-amber-foreground: var(--color-slate-900); + --event-amber-background: var(--color-amber-500); + + --event-yellow-foreground: var(--color-slate-900); + --event-yellow-background: var(--color-yellow-500); + + --event-lime-foreground: var(--color-slate-900); + --event-lime-background: var(--color-lime-500); + + --event-green-foreground: var(--color-white); + --event-green-background: var(--color-green-600); + + --event-emerald-foreground: var(--color-white); + --event-emerald-background: var(--color-emerald-600); + + --event-teal-foreground: var(--color-white); + --event-teal-background: var(--color-teal-600); + + --event-cyan-foreground: var(--color-white); + --event-cyan-background: var(--color-cyan-600); + + --event-sky-foreground: var(--color-white); + --event-sky-background: var(--color-sky-600); + + --event-blue-foreground: var(--color-white); + --event-blue-background: var(--color-blue-600); + + --event-indigo-foreground: var(--color-white); + --event-indigo-background: var(--color-indigo-600); + + --event-violet-foreground: var(--color-white); + --event-violet-background: var(--color-violet-600); + + --event-purple-foreground: var(--color-white); + --event-purple-background: var(--color-purple-600); + + --event-fuchsia-foreground: var(--color-white); + --event-fuchsia-background: var(--color-fuchsia-700); + + --event-pink-foreground: var(--color-white); + --event-pink-background: var(--color-pink-700); + + --event-rose-foreground: var(--color-white); + --event-rose-background: var(--color-pink-700); + + --event-black-foreground: var(--color-white); + --event-black-background: var(--color-stone-500); + + --event-white-foreground: var(--color-slate-900); + --event-white-background: var(--color-lime-100); +} + +@theme inline { + --color-event-red-foreground: var(--event-red-foreground); + --color-event-red-background: var(--event-red-background); + + --color-event-orange-foreground: var(--event-orange-foreground); + --color-event-orange-background: var(--event-orange-background); + + --color-event-amber-foreground: var(--event-amber-foreground); + --color-event-amber-background: var(--event-amber-background); + + --color-event-yellow-foreground: var(--event-yellow-foreground); + --color-event-yellow-background: var(--event-yellow-background); + + --color-event-lime-foreground: var(--event-lime-foreground); + --color-event-lime-background: var(--event-lime-background); + + --color-event-green-foreground: var(--event-green-foreground); + --color-event-green-background: var(--event-green-background); + + --color-event-emerald-foreground: var(--event-emerald-foreground); + --color-event-emerald-background: var(--event-emerald-background); + + --color-event-teal-foreground: var(--event-teal-foreground); + --color-event-teal-background: var(--event-teal-background); + + --color-event-cyan-foreground: var(--event-cyan-foreground); + --color-event-cyan-background: var(--event-cyan-background); + + --color-event-sky-foreground: var(--event-sky-foreground); + --color-event-sky-background: var(--event-sky-background); + + --color-event-blue-foreground: var(--event-blue-foreground); + --color-event-blue-background: var(--event-blue-background); + + --color-event-indigo-foreground: var(--event-indigo-foreground); + --color-event-indigo-background: var(--event-indigo-background); + + --color-event-violet-foreground: var(--event-violet-foreground); + --color-event-violet-background: var(--event-violet-background); + + --color-event-purple-foreground: var(--event-purple-foreground); + --color-event-purple-background: var(--event-purple-background); + + --color-event-fuchsia-foreground: var(--event-fuchsia-foreground); + --color-event-fuchsia-background: var(--event-fuchsia-background); + + --color-event-pink-foreground: var(--event-pink-foreground); + --color-event-pink-background: var(--event-pink-background); + + --color-event-rose-foreground: var(--event-rose-foreground); + --color-event-rose-background: var(--event-rose-background); + + --color-event-black-foreground: var(--event-black-foreground); + --color-event-black-background: var(--event-black-background); + + --color-event-white-foreground: var(--event-white-foreground); + --color-event-white-background: var(--event-white-background); +} + +.event-button, +.event-popover, +.event-callout { + --fg-color: var(--color-foreground); + --bg-color: var(--color-background); + + transition-duration: var(--default-transition-duration); + transition-timing-function: var(--default-transition-timing-function); +} + +.event-button { + color: var(--fg-color); + background-color: var(--bg-color); + text-underline-offset: .15rem; + transition-property: background-color, color; +} +.event-button:hover { + text-decoration: underline; + background-color: color-mix(in srgb, var(--bg-color) 70%, var(--color-background)); +} +.event-button.is-hidden { + background-color: transparent; + color: var(--bg-color); + border: 1px dashed var(--bg-color); + transition-property: background-color, color, border-color; +} +.event-button.is-hidden:is(:hover, :focus-visible) { + background-color: color-mix(in srgb, var(--bg-color) 70%, var(--color-background)); + color: var(--fg-color); +} + +.event-popover { + background-color: color-mix(in srgb, var(--bg-color) 10%, var(--color-background)); + border-color: color-mix(in srgb, var(--bg-color) 50%, var(--color-background)); + transition-property: background-color, color; + + hr { + border-color: var(--bg-color); + } +} + +.event-callout { + position: relative; + background-color: color-mix(in srgb, var(--bg-color) 10%, var(--color-background)); + border-top-right-radius: .2rem; + border-bottom-right-radius: .2rem; + transition-property: background-color, color; + + hr { + border-color: var(--bg-color); + } +} +.event-callout::before { + display: block; + content: ''; + position: absolute; + height: 100%; + inset-block: 0; + left: -0.5rem; + width: .5rem; + background-color: color-mix(in srgb, var(--bg-color) 70%, var(--color-background)); + border-top-left-radius: .2rem; + border-bottom-left-radius: .2rem; + transition-property: background-color; + transition-duration: var(--default-transition-duration); + transition-timing-function: var(--default-transition-timing-function); +} +.event-callout:is(:hover, :focus-visible) { + background-color: color-mix(in srgb, var(--bg-color) 30%, var(--color-background)); +} +.event-callout:is(:hover, :focus-visible)::before { + background-color: color-mix(in srgb, var(--bg-color) 90%, var(--color-background)); +} + +.event-callout.is-hidden { + border: 1px dashed var(--bg-color); + background-color: transparent; +} +.event-callout.is-hidden::before { + inset-block: -2px; + height: calc(100% + 3px); + background-color: color-mix(in srgb, var(--bg-color) 40%, var(--color-background)); +} +.event-callout.is-hidden:is(:hover, :focus-visible) { + background-color: color-mix(in srgb, var(--bg-color) 5%, var(--color-background)); +} +.event-callout.is-hidden:is(:hover, :focus-visible)::before { + background-color: color-mix(in srgb, var(--bg-color) 50%, var(--color-background)); +} + +.bgc { + display: flex; + align-items: center; + flex-wrap: nowrap; +} + +.bgc::before { + content: ""; + display: inline-block; + width: .75rem; + aspect-ratio: 1; + margin-right: 0.5em; + border-radius: .25rem; + background-color: var(--bg-color); + border: 1px solid transparent; +} + +.element-red { + --fg-color: var(--color-event-red-foreground); + --bg-color: var(--color-event-red-background); +} +.element-orange { + --fg-color: var(--color-event-orange-foreground); + --bg-color: var(--color-event-orange-background); +} +.element-amber { + --fg-color: var(--color-event-amber-foreground); + --bg-color: var(--color-event-amber-background); +} +.element-yellow { + --fg-color: var(--color-event-yellow-foreground); + --bg-color: var(--color-event-yellow-background); +} +.element-lime { + --fg-color: var(--color-event-lime-foreground); + --bg-color: var(--color-event-lime-background); +} +.element-green { + --fg-color: var(--color-event-green-foreground); + --bg-color: var(--color-event-green-background); +} +.element-emerald { + --fg-color: var(--color-event-emerald-foreground); + --bg-color: var(--color-event-emerald-background); +} +.element-teal { + --fg-color: var(--color-event-teal-foreground); + --bg-color: var(--color-event-teal-background); +} +.element-cyan { + --fg-color: var(--color-event-cyan-foreground); + --bg-color: var(--color-event-cyan-background); +} +.element-sky { + --fg-color: var(--color-event-sky-foreground); + --bg-color: var(--color-event-sky-background); +} +.element-blue { + --fg-color: var(--color-event-blue-foreground); + --bg-color: var(--color-event-blue-background); +} +.element-indigo { + --fg-color: var(--color-event-indigo-foreground); + --bg-color: var(--color-event-indigo-background); +} +.element-violet { + --fg-color: var(--color-event-violet-foreground); + --bg-color: var(--color-event-violet-background); +} +.element-purple { + --fg-color: var(--color-event-purple-foreground); + --bg-color: var(--color-event-purple-background); +} +.element-fuchsia { + --fg-color: var(--color-event-fuchsia-foreground); + --bg-color: var(--color-event-fuchsia-background); +} +.element-pink { + --fg-color: var(--color-event-pink-foreground); + --bg-color: var(--color-event-pink-background); +} +.element-rose { + --fg-color: var(--color-event-rose-foreground); + --bg-color: var(--color-event-rose-background); +} +.element-black { + --fg-color: var(--color-event-black-foreground); + --bg-color: var(--color-event-black-background); +} +.element-white { + --fg-color: var(--color-event-white-foreground); + --bg-color: var(--color-event-white-background); +} diff --git a/assets/main.css b/assets/main.css index 98cf58b..85bc613 100644 --- a/assets/main.css +++ b/assets/main.css @@ -1,416 +1,32 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; +@config '../tailwind.config.js'; + +@import "./theme.css" layer(theme); +@import "./_colors.css" layer(theme); +@import "./_colors.css" layer(utilities); + +/* + The default border color has changed to `currentcolor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ @layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; - - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - - --primary: 245 58% 51%; - --primary-foreground: 0 0% 100%; - - --secondary: 210 50% 95%; - --secondary-foreground: 222.2 47.4% 11.2%; - - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - - --success: 156 72% 67%; - --success-muted: 156 72% 90%; - --success-foreground: 222.2 84% 4.9%; - - --ring: 222.2 84% 4.9%; - - --radius: 0.5rem; - } - - .dark { - --background: 180 0 4.9%; - --foreground: 210 40% 98%; - - --muted: 244 47% 20%; - --muted-foreground: 215 20.2% 65.1%; - - --popover: 180 0 4.9%; - --popover-foreground: 210 40% 98%; - - --card: 180 0 4.9%; - --card-foreground: 210 40% 98%; - - --border: 217 0 10%; - --input: 244 47% 20%; - - --primary: 245 58% 51%; - --primary-foreground: 0 0% 100%; - - --secondary: 244 47% 20%; - --secondary-foreground: 210 40% 98%; - - --accent: 244 47% 20%; - --accent-foreground: 210 40% 98%; - - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - - --success: 142 72% 29%; - --success-muted: 142 72% 10%; - --success-foreground: 210 40% 98%; - - --ring: 212.7 26.8% 83.9%; + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-border, currentcolor); } } -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} - -/* Colors */ -.event-red:not(.is-hidden) { - @apply text-slate-900 bg-red-500 hover:bg-red-600 focus-visible:bg-red-600 -} -.event-orange:not(.is-hidden) { - @apply text-slate-900 bg-orange-500 hover:bg-orange-600 focus-visible:bg-orange-600 -} -.event-amber:not(.is-hidden) { - @apply text-slate-900 bg-amber-500 hover:bg-amber-600 focus-visible:bg-amber-600 -} -.event-yellow:not(.is-hidden) { - @apply text-slate-900 bg-yellow-600 hover:bg-yellow-700 focus-visible:bg-yellow-700 -} -.event-lime:not(.is-hidden) { - @apply text-slate-900 bg-lime-500 hover:bg-lime-600 focus-visible:bg-lime-600 -} -.event-green:not(.is-hidden) { - @apply text-white bg-green-600 hover:bg-green-700 focus-visible:bg-green-700 -} -.event-emerald:not(.is-hidden) { - @apply text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:bg-emerald-700 -} -.event-teal:not(.is-hidden) { - @apply text-white bg-teal-600 hover:bg-teal-700 focus-visible:bg-teal-700 -} -.event-cyan:not(.is-hidden) { - @apply text-white bg-cyan-600 hover:bg-cyan-700 focus-visible:bg-cyan-700 -} -.event-sky:not(.is-hidden) { - @apply text-white bg-sky-600 hover:bg-sky-700 focus-visible:bg-sky-700 -} -.event-blue:not(.is-hidden) { - @apply text-white bg-blue-600 hover:bg-blue-700 focus-visible:bg-blue-700 -} -.event-indigo:not(.is-hidden) { - @apply text-white bg-indigo-600 hover:bg-indigo-700 focus-visible:bg-indigo-700 -} -.event-violet:not(.is-hidden) { - @apply text-white bg-violet-600 hover:bg-violet-700 focus-visible:bg-violet-700 -} -.event-purple:not(.is-hidden) { - @apply text-white bg-purple-600 hover:bg-purple-700 focus-visible:bg-purple-700 -} -.event-fuchsia:not(.is-hidden) { - @apply text-white bg-fuchsia-600 hover:bg-fuchsia-700 focus-visible:bg-fuchsia-700 -} -.event-pink:not(.is-hidden) { - @apply text-white bg-pink-700 hover:bg-pink-800 focus-visible:bg-pink-800 -} -.event-rose:not(.is-hidden) { - @apply text-white bg-rose-700 hover:bg-rose-800 focus-visible:bg-rose-800 -} -.event-black:not(.is-hidden) { - @apply text-white bg-stone-500 hover:bg-stone-700 focus-visible:bg-stone-700 -} -.event-white:not(.is-hidden) { - @apply text-slate-900 bg-white hover:bg-yellow-200 focus-visible:bg-yellow-200 border-[1px] border-slate-300 -} - -.event.is-hidden { - border: 1px dashed transparent; -} - -.event-red.is-hidden { - @apply text-red-600 border-red-600 hover:bg-red-100 focus-visible:bg-red-100 dark:text-white dark:hover:bg-red-950 dark:focus-visible:bg-red-950 -} -.event-orange.is-hidden { - @apply text-orange-600 border-orange-600 hover:bg-orange-100 focus-visible:bg-orange-100 dark:text-white dark:hover:bg-orange-950 dark:focus-visible:bg-orange-950 -} -.event-amber.is-hidden { - @apply text-red-600 border-red-600 hover:bg-red-100 focus-visible:bg-red-100 dark:text-white dark:hover:bg-red-950 dark:focus-visible:bg-red-950 -} -.event-yellow.is-hidden { - @apply text-yellow-600 border-yellow-600 hover:bg-yellow-100 focus-visible:bg-yellow-100 dark:text-white dark:hover:bg-yellow-950 dark:focus-visible:bg-yellow-950 -} -.event-lime.is-hidden { - @apply text-lime-600 border-lime-600 hover:bg-lime-100 focus-visible:bg-lime-100 dark:text-white dark:hover:bg-lime-950 dark:focus-visible:bg-lime-950 -} -.event-green.is-hidden { - @apply text-green-600 border-green-600 hover:bg-green-700 focus-visible:bg-green-700 dark:text-white dark:hover:bg-green-950 dark:focus-visible:bg-green-950 -} -.event-emerald.is-hidden { - @apply text-emerald-600 border-emerald-600 hover:bg-emerald-700 focus-visible:bg-emerald-700 dark:text-white dark:hover:bg-emerald-950 dark:focus-visible:bg-emerald-950 -} -.event-teal.is-hidden { - @apply text-teal-700 border-teal-600 hover:bg-teal-700 focus-visible:bg-teal-700 dark:text-white dark:hover:bg-teal-950 dark:focus-visible:bg-teal-950 -} -.event-cyan.is-hidden { - @apply text-cyan-600 border-cyan-600 hover:bg-cyan-100 focus-visible:bg-cyan-100 dark:text-white dark:hover:bg-cyan-950 dark:focus-visible:bg-cyan-950 -} -.event-sky.is-hidden { - @apply text-sky-600 border-sky-600 hover:bg-sky-100 focus-visible:bg-sky-100 dark:text-white dark:hover:bg-sky-950 dark:focus-visible:bg-sky-950 -} -.event-blue.is-hidden { - @apply text-blue-600 border-blue-600 hover:bg-blue-100 focus-visible:bg-blue-100 dark:text-white dark:hover:bg-blue-950 dark:focus-visible:bg-blue-950 -} -.event-indigo.is-hidden { - @apply text-indigo-600 border-indigo-600 hover:bg-indigo-100 focus-visible:bg-indigo-100 dark:text-white dark:hover:bg-indigo-950 dark:focus-visible:bg-indigo-950 -} -.event-violet.is-hidden { - @apply text-violet-600 border-violet-600 hover:bg-violet-100 focus-visible:bg-violet-100 dark:text-white dark:hover:bg-violet-950 dark:focus-visible:bg-violet-950 -} -.event-purple.is-hidden { - @apply text-purple-600 border-purple-600 hover:bg-purple-100 focus-visible:bg-purple-100 dark:text-white dark:hover:bg-purple-950 dark:focus-visible:bg-purple-950 -} -.event-fuchsia.is-hidden { - @apply text-fuchsia-600 border-fuchsia-600 hover:bg-fuchsia-100 focus-visible:bg-fuchsia-100 dark:text-white dark:hover:bg-fuchsia-950 dark:focus-visible:bg-fuchsia-950 -} -.event-pink.is-hidden { - @apply text-pink-700 border-pink-700 hover:bg-pink-100 focus-visible:bg-pink-100 dark:text-white dark:hover:bg-pink-950 dark:focus-visible:bg-pink-950 -} -.event-rose.is-hidden { - @apply text-rose-700 border-rose-700 hover:bg-rose-100 focus-visible:bg-rose-100 dark:text-white dark:hover:bg-rose-950 dark:focus-visible:bg-rose-950 -} -.event-black.is-hidden { - @apply text-stone-700 border-stone-500 hover:bg-stone-100 focus-visible:bg-stone-100 dark:text-white dark:hover:bg-stone-950 dark:focus-visible:bg-stone-950 -} -.event-white.is-hidden { - @apply text-slate-900 border-neutral-400 hover:bg-yellow-200 focus-visible:bg-yellow-200 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-700 dark:focus-visible:bg-neutral-300 -} - -.dark .event-details-red { - --base-color: var(--color-red-800); -} -.dark .event-details-orange { - --base-color: var(--color-orange-800); -} -.dark .event-details-amber { - --base-color: var(--color-amber-800); -} -.dark .event-details-yellow { - --base-color: var(--color-yellow-800); -} -.dark .event-details-lime { - --base-color: var(--color-lime-800); -} -.dark .event-details-green { - --base-color: var(--color-green-800); -} -.dark .event-details-emerald { - --base-color: var(--color-emerald-800); -} -.dark .event-details-teal { - --base-color: var(--color-teal-800); -} -.dark .event-details-cyan { - --base-color: var(--color-cyan-800); -} -.dark .event-details-sky { - --base-color: var(--color-sky-800); -} -.dark .event-details-blue { - --base-color: var(--color-blue-800); -} -.dark .event-details-indigo { - --base-color: var(--color-indigo-800); -} -.dark .event-details-violet { - --base-color: var(--color-violet-800); -} -.dark .event-details-purple { - --base-color: var(--color-purple-800); -} -.dark .event-details-fuchsia { - --base-color: var(--color-fuchsia-800); -} -.dark .event-details-pink { - --base-color: var(--color-pink-800); -} -.dark .event-details-rose { - --base-color: var(--color-rose-800); -} -.dark .event-details-black { - --base-color: var(--color-stone-800); -} -.dark .event-details-white { - --base-color: var(--color-white); -} - -.event-details-red { - --base-color: var(--color-red-300); -} -.event-details-orange { - --base-color: var(--color-orange-300); -} -.event-details-amber { - --base-color: var(--color-amber-300); -} -.event-details-yellow { - --base-color: var(--color-yellow-300); -} -.event-details-lime { - --base-color: var(--color-lime-300); -} -.event-details-green { - --base-color: var(--color-green-300); -} -.event-details-emerald { - --base-color: var(--color-emerald-300); -} -.event-details-teal { - --base-color: var(--color-teal-300); -} -.event-details-cyan { - --base-color: var(--color-cyan-300); -} -.event-details-sky { - --base-color: var(--color-sky-300); -} -.event-details-blue { - --base-color: var(--color-blue-300); -} -.event-details-indigo { - --base-color: var(--color-indigo-300); -} -.event-details-violet { - --base-color: var(--color-violet-300); -} -.event-details-purple { - --base-color: var(--color-purple-300); -} -.event-details-fuchsia { - --base-color: var(--color-fuchsia-300); -} -.event-details-pink { - --base-color: var(--color-pink-300); -} -.event-details-rose { - --base-color: var(--color-rose-300); -} -.event-details-black { - --base-color: var(--color-stone-300); -} -.event-details-white { - --base-color: var(--color-white); -} - -.event-details { - --bg-color: color-mix(in srgb, var(--base-color), var(--color-white) 80%); - --border-color: color-mix(in srgb, var(--base-color), var(--color-white) 50%); - background-color: var(--bg-color); - border-color: var(--border-color); - - hr { - border-color: var(--border-color); - } -} - -.dark .event-details { - --bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 80%); - --border-color: color-mix(in srgb, var(--base-color), var(--color-slate-800) 50%); -} - -.bgc { - display: flex; - align-items: center; - flex-wrap: nowrap; -} - -.bgc::before { - content: ""; - display: inline-block; - width: .75rem; - aspect-ratio: 1; - margin-right: 0.5em; - border-radius: .25rem; - background-color: red; - border: 1px solid transparent; -} - -.bgc-red::before { - @apply bg-red-500; -} -.bgc-orange::before { - @apply bg-orange-500; -} -.bgc-amber::before { - @apply bg-amber-500; -} -.bgc-yellow::before { - @apply bg-yellow-500; -} -.bgc-lime::before { - @apply bg-lime-500; -} -.bgc-green::before { - @apply bg-green-500; -} -.bgc-emerald::before { - @apply bg-emerald-600; -} -.bgc-teal::before { - @apply bg-teal-600; -} -.bgc-cyan::before { - @apply bg-cyan-600; -} -.bgc-sky::before { - @apply bg-sky-600; -} -.bgc-blue::before { - @apply bg-blue-600; -} -.bgc-indigo::before { - @apply bg-indigo-600; -} -.bgc-violet::before { - @apply bg-violet-600; -} -.bgc-purple::before { - @apply bg-purple-600; -} -.bgc-fuchsia::before { - @apply bg-fuchsia-600; -} -.bgc-pink::before { - @apply bg-pink-600; -} -.bgc-rose::before { - @apply bg-rose-600; -} -.bgc-black::before { - @apply bg-black dark:border-[1px] dark:border-slate-300; -} -.bgc-white::before { - @apply bg-white border-[1px] border-slate-700; +body { + color: var(--color-foreground); + background-color: var(--color-background); } .fade-enter-active, diff --git a/assets/theme.css b/assets/theme.css new file mode 100644 index 0000000..a17cc0d --- /dev/null +++ b/assets/theme.css @@ -0,0 +1,108 @@ +:root { + --background: hsl(0 0% 100%); + --foreground: hsl(222.2 84% 4.9%); + + --muted: hsl(210 40% 96.1%); + --muted-foreground: hsl(215.4 16.3% 46.9%); + + --popover: hsl(0 0% 100%); + --popover-foreground: hsl(222.2 84% 4.9%); + + --card: hsl(0 0% 100%); + --card-foreground: hsl(222.2 84% 4.9%); + + --border: hsl(214.3 31.8% 91.4%); + --input: hsl(214.3 31.8% 91.4%); + + --primary: hsl(245 58% 51%); + --primary-foreground: hsl(0 0% 100%); + + --secondary: hsl(210 50% 95%); + --secondary-foreground: hsl(222.2 47.4% 11.2%); + + --accent: hsl(210 40% 96.1%); + --accent-foreground: hsl(222.2 47.4% 11.2%); + + --destructive: hsl(0 84.2% 60.2%); + --destructive-foreground: hsl(210 40% 98%); + + --success: hsl(156 72% 67%); + --success-muted: hsl(156 72% 90%); + --success-foreground: hsl(222.2 84% 4.9%); + + --ring: hsl(222.2 84% 4.9%); + + --radius: 0.5rem; +} + +.dark { + --background: hsl(180 0 4.9%); + --foreground: hsl(210 40% 98%); + + --muted: hsl(244 47% 20%); + --muted-foreground: hsl(215 20.2% 65.1%); + + --popover: hsl(180 0 4.9%); + --popover-foreground: hsl(210 40% 98%); + + --card: hsl(180 0 4.9%); + --card-foreground: hsl(210 40% 98%); + + --border: hsl(0, 0%, 16%); + --input: hsl(244 47% 20%); + + --primary: hsl(245 58% 51%); + --primary-foreground: hsl(0 0% 100%); + + --secondary: hsl(244 47% 20%); + --secondary-foreground: hsl(210 40% 98%); + + --accent: hsl(244 47% 20%); + --accent-foreground: hsl(210 40% 98%); + + --destructive: hsl(0 62.8% 30.6%); + --destructive-foreground: hsl(210 40% 98%); + + --success: hsl(142 72% 29%); + --success-muted: hsl(142 72% 10%); + --success-foreground: hsl(210 40% 98%); + + --ring: hsl(212.7 26.8% 83.9%); + + --radius: 0.5rem; +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + + --color-border: var(--border); + --color-input: var(--input); + + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + + --color-success: var(--success); + --color-success-muted: var(--success-muted); + --color-success-foreground: var(--success-foreground); + + --color-ring: var(--ring); +} diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue index d39f995..6cb9a1c 100644 --- a/components/calendar/Calendar.vue +++ b/components/calendar/Calendar.vue @@ -35,7 +35,7 @@ onMounted(() => { diff --git a/components/calendar/category/TableHeader.vue b/components/calendar/category/TableHeader.vue index 7f454b7..b26c2e3 100644 --- a/components/calendar/category/TableHeader.vue +++ b/components/calendar/category/TableHeader.vue @@ -3,7 +3,7 @@ import { PhListBullets } from "@phosphor-icons/vue"; @@ -139,7 +139,7 @@ function handleQueryDelete() { > {{ $t(`ui.colors.${category.color}`) }} diff --git a/components/calendar/dialog/UpdateEvent.vue b/components/calendar/dialog/UpdateEvent.vue index 9daefc3..70d643e 100644 --- a/components/calendar/dialog/UpdateEvent.vue +++ b/components/calendar/dialog/UpdateEvent.vue @@ -25,7 +25,7 @@ function handleClosing() { @@ -143,7 +140,7 @@ function deployDeleteModal() {