From 009cabf39dbbf466ebc90adb3a05ca40b5350954 Mon Sep 17 00:00:00 2001 From: Lindsey Zylstra Date: Tue, 6 May 2025 15:37:58 -0700 Subject: [PATCH 01/13] Nuxt tailwind upgrade --- cms/nextjs/tailwind.config.ts | 1 - cms/nuxt/app/assets/css/tailwind.css | 87 +- cms/nuxt/app/components/Footer.vue | 4 +- cms/nuxt/app/components/NavigationBar.vue | 6 +- cms/nuxt/app/components/base/SearchModel.vue | 2 +- cms/nuxt/app/components/base/ShareDialog.vue | 2 +- cms/nuxt/app/components/block/PricingCard.vue | 4 +- cms/nuxt/app/components/ui/badge/index.ts | 2 +- cms/nuxt/app/components/ui/button/index.ts | 2 +- .../app/components/ui/checkbox/Checkbox.vue | 2 +- .../components/ui/command/CommandInput.vue | 2 +- .../app/components/ui/command/CommandItem.vue | 2 +- .../components/ui/dialog/DialogContent.vue | 2 +- .../DropdownMenuCheckboxItem.vue | 2 +- .../ui/dropdown-menu/DropdownMenuItem.vue | 2 +- .../dropdown-menu/DropdownMenuRadioItem.vue | 2 +- .../dropdown-menu/DropdownMenuSubTrigger.vue | 2 +- .../ui/dropdown-menu/DropdownMenuTrigger.vue | 2 +- cms/nuxt/app/components/ui/input/Input.vue | 2 +- .../NavigationMenuIndicator.vue | 2 +- .../NavigationMenuViewport.vue | 2 +- .../components/ui/navigation-menu/index.ts | 2 +- .../components/ui/popover/PopoverContent.vue | 2 +- .../ui/radio-group/RadioGroupItem.vue | 2 +- .../components/ui/select/SelectContent.vue | 2 +- .../app/components/ui/select/SelectItem.vue | 2 +- .../components/ui/select/SelectTrigger.vue | 2 +- .../app/components/ui/textarea/Textarea.vue | 2 +- cms/nuxt/app/pages/blog/[slug].vue | 4 +- cms/nuxt/nuxt.config.ts | 7 +- cms/nuxt/package.json | 19 +- cms/nuxt/pnpm-lock.yaml | 10334 ++++++++++------ cms/nuxt/postcss.config.mjs | 5 + 33 files changed, 6795 insertions(+), 3722 deletions(-) create mode 100644 cms/nuxt/postcss.config.mjs diff --git a/cms/nextjs/tailwind.config.ts b/cms/nextjs/tailwind.config.ts index 42563b47..c5ad80de 100644 --- a/cms/nextjs/tailwind.config.ts +++ b/cms/nextjs/tailwind.config.ts @@ -178,7 +178,6 @@ const config: Config = { }, }, plugins: [tailwindcssAnimate, typography], - safelist: ['grid-cols-1', 'sm:grid-cols-2', 'lg:grid-cols-3'], }; export default config; diff --git a/cms/nuxt/app/assets/css/tailwind.css b/cms/nuxt/app/assets/css/tailwind.css index 0a3ed134..609c28ae 100644 --- a/cms/nuxt/app/assets/css/tailwind.css +++ b/cms/nuxt/app/assets/css/tailwind.css @@ -1,29 +1,50 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -:root { - --background-color: #ffffff; - --foreground-color: #42566e; - --background-color-muted: color-mix(in srgb, var(--background-color), var(--foreground-color) 10%); - --accent-color: #6644ff; - --background-variant-color: #172940; - --accent-color-dark: color-mix(in srgb, var(--accent-color), black 40%); - --accent-color-soft: color-mix(in srgb, var(--accent-color), white 20%); - --accent-color-light: color-mix(in srgb, var(--accent-color), white 90%); - --input-color: color-mix(in srgb, var(--background-color), var(--foreground-color) 30%); +@import 'tailwindcss'; + +@config '../../../tailwind.config.ts'; + +/* + 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-gray-200, currentcolor); + } } -.dark { - --background-color: #0e1a2b; - --foreground-color: #ffffff; - --background-color-muted: color-mix(in srgb, var(--background-color), var(--foreground-color) 10%); - --background-variant-color: #172940; +@layer utilities { + :root { + --background-color: #ffffff; + --foreground-color: #42566e; + --background-color-muted: color-mix(in srgb, var(--background-color), var(--foreground-color) 10%); + --accent-color: #6644ff; + --background-variant-color: #172940; + --accent-color-dark: color-mix(in srgb, var(--accent-color), black 40%); + --accent-color-soft: color-mix(in srgb, var(--accent-color), white 20%); + --accent-color-light: color-mix(in srgb, var(--accent-color), white 90%); + --input-color: color-mix(in srgb, var(--background-color), var(--foreground-color) 30%); + } + + .dark { + --background-color: #0e1a2b; + --foreground-color: #ffffff; + --background-color-muted: color-mix(in srgb, var(--background-color), var(--foreground-color) 10%); + --background-variant-color: #172940; + } } @layer base { html { - @apply bg-[var(--background-color)] text-[var(--foreground-color)]; + background-color: var(--background-color); + color: var(--foreground-color); } } @@ -34,22 +55,40 @@ button:focus, a:focus, [role='button']:focus { - @apply outline-none ring-2 ring-[var(--accent-color)] ring-offset-2 ring-offset-background; + outline: none; + ring: 2px; + ring-color: var(--accent-color); + ring-offset: 2px; + ring-offset-color: var(--background-color); } [data-background='dark'] { - @apply bg-gray dark:bg-[var(--background-variant-color)]; + background-color: var(--gray); + } + + .dark [data-background='dark'] { + background-color: var(--background-variant-color); } :root:not(.dark) [data-background='dark'] { .inline-flex[class*='bg-gray'] { - @apply bg-[#172940] text-white hover:bg-accent; + background-color: #172940; + color: white; + } + .inline-flex[class*='bg-gray']:hover { + background-color: var(--accent-color); } } } @layer utilities { a { - @apply hover:text-accent transition-colors no-underline; + text-decoration: none; + transition-property: color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + a:hover { + color: var(--accent-color); } } diff --git a/cms/nuxt/app/components/Footer.vue b/cms/nuxt/app/components/Footer.vue index 31564b8c..81ed9455 100644 --- a/cms/nuxt/app/components/Footer.vue +++ b/cms/nuxt/app/components/Footer.vue @@ -42,7 +42,7 @@ const darkLogoUrl = computed(() =>