feat: remove aria in favor of tw-aria

Author: mikededo

apps/finance/tailwind.config.ts

@@ -1,9 +1,9 @@
 import type { Config } from 'tailwindcss';
 
-import { aria, scrollbars } from '@stack/tailwind';
+import { scrollbars } from '@stack/tailwind';
 
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   darkMode: 'class',
-  plugins: [scrollbars(), aria()]
+  plugins: [scrollbars()]
 } satisfies Config;

apps/i18n/tailwind.config.ts

@@ -1,9 +1,9 @@
 import type { Config } from 'tailwindcss';
 
-import { aria, scrollbars } from '@stack/tailwind';
+import { scrollbars } from '@stack/tailwind';
 
 export default {
   darkMode: 'class',
-  plugins: [aria(), scrollbars()]
+  plugins: [scrollbars()]
 } satisfies Config;
 

bun.lockb

@@ -1,7 +1,7 @@
 import type { Config } from 'tailwindcss';
 
-import { aria, scrollbars } from '@stack/tailwind';
+import { scrollbars } from '@stack/tailwind';
 
 export default {
-  plugins: [scrollbars(), aria()]
+  plugins: [scrollbars()]
 } satisfies Config;

packages/layouts/tailwind.config.ts

@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 
+@plugin "tw-aria";
+
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still

packages/tailwind/aria.ts

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@stack/typescript-config": "workspace:*",
-    "tailwind-scrollbar": "4.0.2"
+    "tailwind-scrollbar": "4.0.2",
+    "tw-aria": "1.1.1"
   }
 }

packages/tailwind/base.css

@@ -1,3 +1,2 @@
-export * from './aria';
 // eslint-disable-next-line ts/no-require-imports
 export const scrollbars = () => require('tailwind-scrollbar');

packages/tailwind/package.json

@@ -1,7 +1,7 @@
 import type { Config } from 'tailwindcss';
 
-import { aria, scrollbars } from '@stack/tailwind';
+import { scrollbars } from '@stack/tailwind';
 
 export default {
-  plugins: [aria(), scrollbars()]
+  plugins: [scrollbars()]
 } satisfies Config;

packages/tailwind/tailwind.config.ts

@@ -1,40 +1,12 @@
-@import url('@stack/ui/styles') layer(base);
+@import '@stack/tailwind/base';
+@import '@stack/tailwind/colors';
+@import '@stack/tailwind/typography';
 
-@import 'tailwindcss';
+@import '@stack/ui/styles';
+@import '@stack/layouts/styles';
 
 @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: #dee3e7;
-  }
-}
-
-@layer base {
-  :root {
-    --font-sans: Geist;
-    --font-mono: 'Geist Mono';
-    --background: #ffffff;
-    --foreground: #333333;
-  }
-
-  .dark {
-    --background: #000000;
-    --foreground: #ffffff;
-  }
-}
 html {
   @apply font-sans;