Migration to nuxt 4
Used codemods CLI and reworked most alias'd path that stopped working
This commit is contained in:
Alexis
326
app/assets/_colors.css
Normal file
326
app/assets/_colors.css
Normal file
@@ -0,0 +1,326 @@
|
||||
: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,
|
||||
.card-color {
|
||||
--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-callout hr,
|
||||
.card-color hr {
|
||||
transition-property: border-color;
|
||||
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(--color-foreground);
|
||||
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));
|
||||
}
|
||||
|
||||
.card-color {
|
||||
border-color: color-mix(in srgb, var(--bg-color) 30%, var(--color-background));
|
||||
background-color: color-mix(in srgb, var(--bg-color) 10%, var(--color-background));
|
||||
|
||||
hr {
|
||||
border-color: color-mix(in srgb, var(--bg-color) 30%, var(--color-background))
|
||||
}
|
||||
}
|
||||
.card-color:is(:hover, :focus-visible) {
|
||||
border-color: color-mix(in srgb, var(--bg-color) 40%, var(--color-background));
|
||||
background-color: color-mix(in srgb, var(--bg-color) 20%, var(--color-background));
|
||||
|
||||
hr {
|
||||
border-color: color-mix(in srgb, var(--bg-color) 40%, 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);
|
||||
}
|
||||
70
app/assets/_content.css
Normal file
70
app/assets/_content.css
Normal file
@@ -0,0 +1,70 @@
|
||||
.content {
|
||||
> * + * {
|
||||
margin-top: .5em;
|
||||
|
||||
@variant md {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
@variant md {
|
||||
font-size: var(--text-4xl);
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
@variant md {
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
@variant md {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--text-md);
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
@variant md {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Normal link */
|
||||
p a:not([class]) {
|
||||
color: var(--color-sky-600);
|
||||
text-underline-offset: .25rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-sky-500);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@variant dark {
|
||||
color: var(--color-teal-500);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-teal-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: square;
|
||||
padding-inline-start: 1.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-block: 2rem;
|
||||
}
|
||||
}
|
||||
4
app/assets/_typography.css
Normal file
4
app/assets/_typography.css
Normal file
@@ -0,0 +1,4 @@
|
||||
@theme inline {
|
||||
--text-2xs: 0.7rem;
|
||||
--text-2xs--line-height: 0.75rem;
|
||||
}
|
||||
50
app/assets/main.css
Normal file
50
app/assets/main.css
Normal file
@@ -0,0 +1,50 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@config '../../tailwind.config.js';
|
||||
|
||||
@import "./theme.css" layer(theme);
|
||||
@import "./_typography.css" layer(theme);
|
||||
@import "./_colors.css" layer(theme);
|
||||
@import "./_colors.css" layer(utilities);
|
||||
|
||||
@import "./_content.css";
|
||||
|
||||
/*
|
||||
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 {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-border, currentcolor);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color-foreground);
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all .5s ease;
|
||||
}
|
||||
.fade-delay-enter-active,
|
||||
.fade-delay-leave-active {
|
||||
transition: all .5s ease 1s;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to,
|
||||
.fade-delay-enter-from,
|
||||
.fade-delay-leave-to {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
108
app/assets/theme.css
Normal file
108
app/assets/theme.css
Normal file
@@ -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(0, 0%, 12%);
|
||||
--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);
|
||||
}
|
||||
Reference in New Issue
Block a user