From f2a184866df6c87aa4c49034d17eb0804c21cb71 Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Fri, 24 Apr 2026 19:07:56 +0200 Subject: [PATCH] chore(docs, www): migrate app theme extensions to CSS-first docs: convert the anonymous `addUtilities` plugin for `.prose--remove-p-margin` into a CSS `@utility prose--remove-p-margin` block in `apps/docs/styles/main.css`. www: move the `purple-sos` color scale, 7 keyframes/animations, and `transitionDelay` entry into CSS: - `@theme` colors use `--color-purple-sos-100..900`. - `@theme --animate-*` defines animation utilities; matching `@keyframes` blocks sit at the top level of the CSS entry. - The single `delay-1200` usage (`FunctionsHero.tsx:265`) was rewritten inline to `delay-[1200ms]` rather than declaring a one-off theme token. Both apps' `tailwind.config.js` files are now just content paths + a passthrough to the shared config. Co-Authored-By: Claude Opus 4.7 --- apps/docs/styles/main.css | 7 +++ apps/docs/tailwind.config.cjs | 11 ---- apps/www/styles/index.css | 106 ++++++++++++++++++++++++++++++++++ apps/www/tailwind.config.js | 65 --------------------- 4 files changed, 113 insertions(+), 76 deletions(-) diff --git a/apps/docs/styles/main.css b/apps/docs/styles/main.css index e5366ce7235..8782333e590 100644 --- a/apps/docs/styles/main.css +++ b/apps/docs/styles/main.css @@ -16,6 +16,13 @@ } } +@utility prose--remove-p-margin { + /* prose (tailwind typography) helper for removing margins in prose styled sections */ + & p { + margin: 0; + } +} + @font-face { font-family: 'custom-font'; src: diff --git a/apps/docs/tailwind.config.cjs b/apps/docs/tailwind.config.cjs index e442579b818..4beb8feca5f 100644 --- a/apps/docs/tailwind.config.cjs +++ b/apps/docs/tailwind.config.cjs @@ -12,15 +12,4 @@ module.exports = config({ './../../packages/ui/src/**/*.{tsx,ts,js}', './../../packages/ui-patterns/src/**/*.{tsx,ts,js}', ], - plugins: [ - function ({ addUtilities, addVariant }) { - addUtilities({ - // prose (tailwind typography) helpers - // useful for removing margins in prose styled sections - '.prose--remove-p-margin p': { - margin: '0', - }, - }) - }, - ], }) diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css index 91c814f8632..1f3d4093591 100644 --- a/apps/www/styles/index.css +++ b/apps/www/styles/index.css @@ -16,6 +16,94 @@ } } +@theme { + --color-purple-sos-100: hsl(293 80% 97%); + --color-purple-sos-200: hsl(293 85% 91%); + --color-purple-sos-300: hsl(293 90% 80%); + --color-purple-sos-400: hsl(293 95% 67%); + --color-purple-sos-500: hsl(293 100% 54%); + --color-purple-sos-600: hsl(293 100% 44%); + --color-purple-sos-700: hsl(293 100% 34%); + --color-purple-sos-800: hsl(293 95% 22%); + --color-purple-sos-900: hsl(293 90% 12%); + + --animate-flash-code: flash-code 1s forwards; + --animate-flash-code-slow: flash-code 2s forwards; + --animate-spinner: spinner 1s both infinite; + --animate-marquee: marquee 35s linear infinite; + --animate-marquee-vertical: marquee-vertical 180s linear infinite both; + --animate-pulse-radar: pulse-radar 3s linear infinite; + --animate-slide-in: slideIn 250ms ease-in both; +} + +@keyframes flash-code { + 0% { + background-color: rgba(63, 207, 142, 0.1); + } + 100% { + background-color: transparent; + } +} + +@keyframes slideIn { + 0% { + transform: translate3d(0, -100%, 0); + } + 100% { + transform: translate3d(0, 0, 0); + } +} + +@keyframes spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes marquee { + 0% { + transform: translateX(0%); + } + 100% { + transform: translateX(-100%); + } +} + +@keyframes marquee-reverse { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(0%); + } +} + +@keyframes marquee-vertical { + 0% { + transform: translateY(0%); + } + 100% { + transform: translateY(-100%); + } +} + +@keyframes pulse-radar { + 0% { + transform: scale(0); + opacity: 0; + } + 50% { + opacity: 0.8; + } + 100% { + transform: scale(100%); + opacity: 0; + } +} + @layer utilities { .run { animation-play-state: running; @@ -25,6 +113,24 @@ } } +/* + 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: hsl(var(--border-default)); + } +} + @layer components { .disable-blur { image-rendering: -webkit-optimize-contrast; diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js index 8c904d9f313..b09c01ce551 100644 --- a/apps/www/tailwind.config.js +++ b/apps/www/tailwind.config.js @@ -13,69 +13,4 @@ module.exports = config({ './../../packages/ui-patterns/src/**/*.{tsx,ts,js}', './../../packages/marketing/src/**/*.{tsx,ts,js}', ], - theme: { - extend: { - colors: { - 'purple-sos': { - 100: 'hsl(293 80% 97%)', - 200: 'hsl(293 85% 91%)', - 300: 'hsl(293 90% 80%)', - 400: 'hsl(293 95% 67%)', - 500: 'hsl(293 100% 54%)', - 600: 'hsl(293 100% 44%)', - 700: 'hsl(293 100% 34%)', - 800: 'hsl(293 95% 22%)', - 900: 'hsl(293 90% 12%)', - }, - }, - keyframes: { - 'flash-code': { - '0%': { backgroundColor: 'rgba(63, 207, 142, 0.1)' }, - '100%': { backgroundColor: 'transparent' }, - }, - slideIn: { - '0%': { transform: 'translate3d(0,-100%,0)' }, - '100%': { transform: 'translate3d(0,0,0)' }, - }, - spinner: { - '0%': { - transform: 'rotate(0deg)', - }, - '100%': { - transform: 'rotate(360deg)', - }, - }, - marquee: { - '0%': { transform: 'translateX(0%)' }, - '100%': { transform: 'translateX(-100%)' }, - }, - 'marquee-reverse': { - '0%': { transform: 'translateX(-100%)' }, - '100%': { transform: 'translateX(0%)' }, - }, - 'marquee-vertical': { - '0%': { transform: 'translateY(0%)' }, - '100%': { transform: 'translateY(-100%)' }, - }, - 'pulse-radar': { - '0%': { transform: 'scale(0)', opacity: 0 }, - '50%': { opacity: 0.8 }, - '100%': { transform: 'scale(100%)', opacity: 0 }, - }, - }, - animation: { - 'flash-code': 'flash-code 1s forwards', - 'flash-code-slow': 'flash-code 2s forwards', - spinner: 'spinner 1s both infinite', - marquee: 'marquee 35s linear infinite', - 'marquee-vertical': 'marquee-vertical 180s linear infinite both', - 'pulse-radar': 'pulse-radar 3s linear infinite', - 'slide-in': 'slideIn 250ms ease-in both', - }, - transitionDelay: { - 1200: '1200ms', - 1500: '1500ms', - }, - }, - }, })