@drmhse/authos-vue 0.2.0 → 0.2.1

package/README.md

@@ -398,7 +398,40 @@ export default defineEventHandler(async (event) => {
 
 ## Styling
 
-All components use data attributes for styling hooks:
+AuthOS components come with **polished default styling** out of the box, similar to best-in-class auth providers. The styling is fully customizable via the `appearance` option or by overriding CSS variables.
+
+### Customization
+
+You can customize the theme colors, fonts, and more by passing an `appearance` object to `createAuthOS`.
+
+```ts
+app.use(createAuthOS({
+  // ... other options
+  appearance: {
+    variables: {
+      colorPrimary: '#0066cc',
+      colorBackground: '#f5f5f5',
+      borderRadius: '0.25rem',
+      fontFamily: 'Inter, sans-serif',
+    },
+  },
+}));
+```
+
+### CSS Variables
+
+You can also override these CSS variables in your own stylesheet:
+
+```css
+:root {
+  --authos-color-primary: #0066cc;
+  --authos-border-radius: 4px;
+}
+```
+
+### Headless Styling
+
+If you prefer to completely style the components yourself, you can target the data attributes. The default styles have low specificity, so your CSS classes will easily override them.
 
 ```css
 [data-authos-signin] { /* Container */ }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drmhse/authos-vue",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Vue and Nuxt adapter for AuthOS authentication",
   "main": "dist/index.js",
   "module": "dist/index.mjs",