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 <noreply@anthropic.com>

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:

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',
-        },
-      })
-    },
-  ],
 })

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;

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',
-      },
-    },
-  },
 })