0.5.0 (#47)

.husky/pre-commit

@@ -1 +1 @@
-npm test
+npm test -- run

docs/src/content/docs/integration/frameworks.mdx

@@ -2,18 +2,22 @@
 title: Frameworks
 ---
 
-## React frameworks
+## React
 
-By default, `mistcss` will generate React components:
+By default, `mistcss` will generate React components that you can use in Next.js or Remix
 
 ```sh
 mistcss ./components
 ```
 
 ## Hono
 
-To use it with Hono, pass `--hono` option:
+```sh
+mistcss ./components --target=hono
+```
+
+## Astro
 
 ```sh
-mistcss ./components --hono
+mistcss ./components --target=astro
 ```

docs/src/content/docs/integration/tailwind.mdx

@@ -33,4 +33,30 @@ In v4, Tailwind provides CSS variables that can be used in your CSS.
     }
   }
 }
-```
+```
+
+## Theming using CSS variables
+
+```css title="Button.mist.css"
+@scope (button.button) {
+  :scope {
+    --padding: 0;
+    --color: black;
+
+    padding: var(--padding);
+    color: var(--color);
+  }
+}
+```
+
+````jsx title="App.tsx"
+import theme from 'tailwindcss/defaultTheme'
+
+export const App = () => (
+  <CustomButton
+    padding={theme.spacing.8}
+    color={theme.colors.blue.900}
+  >
+    Save
+  </CustomButton>
+)

docs/src/content/docs/intro.mdx

@@ -19,5 +19,6 @@ It supports:
 - [Remix](https://remix.run/)
 - [React](https://react.dev/)
 - [Hono](https://hono.dev/)
+- [Astro](https://astro.build/)
 - [Tailwind CSS](https://tailwindcss.com/)
 - More to come...