@drmhse/authos-vue 0.1.5 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +34 -1
  2. package/dist/index.d.mts +64 -3
  3. package/dist/index.d.ts +64 -3
  4. package/dist/index.js +614 -46
  5. package/dist/index.mjs +615 -46
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -398,7 +398,40 @@ export default defineEventHandler(async (event) => {
398
398
 
399
399
  ## Styling
400
400
 
401
- All components use data attributes for styling hooks:
401
+ 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.
402
+
403
+ ### Customization
404
+
405
+ You can customize the theme colors, fonts, and more by passing an `appearance` object to `createAuthOS`.
406
+
407
+ ```ts
408
+ app.use(createAuthOS({
409
+ // ... other options
410
+ appearance: {
411
+ variables: {
412
+ colorPrimary: '#0066cc',
413
+ colorBackground: '#f5f5f5',
414
+ borderRadius: '0.25rem',
415
+ fontFamily: 'Inter, sans-serif',
416
+ },
417
+ },
418
+ }));
419
+ ```
420
+
421
+ ### CSS Variables
422
+
423
+ You can also override these CSS variables in your own stylesheet:
424
+
425
+ ```css
426
+ :root {
427
+ --authos-color-primary: #0066cc;
428
+ --authos-border-radius: 4px;
429
+ }
430
+ ```
431
+
432
+ ### Headless Styling
433
+
434
+ 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.
402
435
 
403
436
  ```css
404
437
  [data-authos-signin] { /* Container */ }
package/dist/index.d.mts CHANGED
@@ -40,6 +40,53 @@ interface AuthOSContext {
40
40
  * }));
41
41
  * ```
42
42
  */
43
+ /**
44
+ * Appearance variables for customizing the visual theme.
45
+ * All properties are optional and use CSS color/size values.
46
+ */
47
+ interface AppearanceVariables {
48
+ /** Primary brand color (e.g., '#6366f1') */
49
+ colorPrimary?: string;
50
+ /** Primary color on hover */
51
+ colorPrimaryHover?: string;
52
+ /** Text color on primary background */
53
+ colorPrimaryForeground?: string;
54
+ /** Error/danger color */
55
+ colorDanger?: string;
56
+ /** Success color */
57
+ colorSuccess?: string;
58
+ /** Warning color */
59
+ colorWarning?: string;
60
+ /** Main background color */
61
+ colorBackground?: string;
62
+ /** Surface/card background color */
63
+ colorSurface?: string;
64
+ /** Main text color */
65
+ colorForeground?: string;
66
+ /** Muted/secondary text color */
67
+ colorMuted?: string;
68
+ /** Border color */
69
+ colorBorder?: string;
70
+ /** Input background color */
71
+ colorInput?: string;
72
+ /** Input border color */
73
+ colorInputBorder?: string;
74
+ /** Focus ring color */
75
+ colorRing?: string;
76
+ /** Font family */
77
+ fontFamily?: string;
78
+ /** Base font size */
79
+ fontSize?: string;
80
+ /** Border radius */
81
+ borderRadius?: string;
82
+ }
83
+ /**
84
+ * Appearance configuration for customizing component styling.
85
+ */
86
+ interface AppearanceOptions {
87
+ /** CSS variable overrides */
88
+ variables?: AppearanceVariables;
89
+ }
43
90
  interface AuthOSPluginOptions {
44
91
  /**
45
92
  * Base URL of the AuthOS API service.
@@ -92,6 +139,20 @@ interface AuthOSPluginOptions {
92
139
  * @example '/onboarding'
93
140
  */
94
141
  afterSignUpUrl?: string;
142
+ /**
143
+ * Appearance customization options.
144
+ * Use to override default theme colors, fonts, and styling.
145
+ * @example
146
+ * ```ts
147
+ * appearance: {
148
+ * variables: {
149
+ * colorPrimary: '#0066cc',
150
+ * borderRadius: '0.25rem',
151
+ * }
152
+ * }
153
+ * ```
154
+ */
155
+ appearance?: AppearanceOptions;
95
156
  }
96
157
  declare const AUTH_OS_INJECTION_KEY: unique symbol;
97
158
  /**
@@ -514,9 +575,9 @@ declare const OAuthButton: vue.DefineComponent<vue.ExtractPropTypes<{
514
575
  type: BooleanConstructor;
515
576
  default: boolean;
516
577
  };
517
- }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
578
+ }>, () => VNode<vue.RendererNode, vue.RendererElement, {
518
579
  [key: string]: any;
519
- }> | vue.VNode<vue.RendererNode, vue.RendererElement, {
580
+ }> | VNode<vue.RendererNode, vue.RendererElement, {
520
581
  [key: string]: any;
521
582
  }>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "redirect"[], "redirect", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
522
583
  provider: {
@@ -660,4 +721,4 @@ declare const PasskeySignIn: vue.DefineComponent<vue.ExtractPropTypes<{
660
721
  showPasswordSignIn: boolean;
661
722
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
662
723
 
663
- export { AUTH_OS_INJECTION_KEY, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };
724
+ export { AUTH_OS_INJECTION_KEY, type AppearanceOptions, type AppearanceVariables, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };
package/dist/index.d.ts CHANGED
@@ -40,6 +40,53 @@ interface AuthOSContext {
40
40
  * }));
41
41
  * ```
42
42
  */
43
+ /**
44
+ * Appearance variables for customizing the visual theme.
45
+ * All properties are optional and use CSS color/size values.
46
+ */
47
+ interface AppearanceVariables {
48
+ /** Primary brand color (e.g., '#6366f1') */
49
+ colorPrimary?: string;
50
+ /** Primary color on hover */
51
+ colorPrimaryHover?: string;
52
+ /** Text color on primary background */
53
+ colorPrimaryForeground?: string;
54
+ /** Error/danger color */
55
+ colorDanger?: string;
56
+ /** Success color */
57
+ colorSuccess?: string;
58
+ /** Warning color */
59
+ colorWarning?: string;
60
+ /** Main background color */
61
+ colorBackground?: string;
62
+ /** Surface/card background color */
63
+ colorSurface?: string;
64
+ /** Main text color */
65
+ colorForeground?: string;
66
+ /** Muted/secondary text color */
67
+ colorMuted?: string;
68
+ /** Border color */
69
+ colorBorder?: string;
70
+ /** Input background color */
71
+ colorInput?: string;
72
+ /** Input border color */
73
+ colorInputBorder?: string;
74
+ /** Focus ring color */
75
+ colorRing?: string;
76
+ /** Font family */
77
+ fontFamily?: string;
78
+ /** Base font size */
79
+ fontSize?: string;
80
+ /** Border radius */
81
+ borderRadius?: string;
82
+ }
83
+ /**
84
+ * Appearance configuration for customizing component styling.
85
+ */
86
+ interface AppearanceOptions {
87
+ /** CSS variable overrides */
88
+ variables?: AppearanceVariables;
89
+ }
43
90
  interface AuthOSPluginOptions {
44
91
  /**
45
92
  * Base URL of the AuthOS API service.
@@ -92,6 +139,20 @@ interface AuthOSPluginOptions {
92
139
  * @example '/onboarding'
93
140
  */
94
141
  afterSignUpUrl?: string;
142
+ /**
143
+ * Appearance customization options.
144
+ * Use to override default theme colors, fonts, and styling.
145
+ * @example
146
+ * ```ts
147
+ * appearance: {
148
+ * variables: {
149
+ * colorPrimary: '#0066cc',
150
+ * borderRadius: '0.25rem',
151
+ * }
152
+ * }
153
+ * ```
154
+ */
155
+ appearance?: AppearanceOptions;
95
156
  }
96
157
  declare const AUTH_OS_INJECTION_KEY: unique symbol;
97
158
  /**
@@ -514,9 +575,9 @@ declare const OAuthButton: vue.DefineComponent<vue.ExtractPropTypes<{
514
575
  type: BooleanConstructor;
515
576
  default: boolean;
516
577
  };
517
- }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
578
+ }>, () => VNode<vue.RendererNode, vue.RendererElement, {
518
579
  [key: string]: any;
519
- }> | vue.VNode<vue.RendererNode, vue.RendererElement, {
580
+ }> | VNode<vue.RendererNode, vue.RendererElement, {
520
581
  [key: string]: any;
521
582
  }>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "redirect"[], "redirect", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
522
583
  provider: {
@@ -660,4 +721,4 @@ declare const PasskeySignIn: vue.DefineComponent<vue.ExtractPropTypes<{
660
721
  showPasswordSignIn: boolean;
661
722
  }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
662
723
 
663
- export { AUTH_OS_INJECTION_KEY, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };
724
+ export { AUTH_OS_INJECTION_KEY, type AppearanceOptions, type AppearanceVariables, type AuthOSContext, type AuthOSPluginOptions, AuthOSProvider, type AuthOSState, MagicLinkSignIn, OAuthButton, type OAuthButtonSlotProps, OrganizationSwitcher, type OrganizationSwitcherSlotProps, PasskeySignIn, Protect, SignIn, type SignInSlotProps, SignUp, type SignUpSlotProps, SignedIn, SignedOut, type SupportedOAuthProvider, UserButton, type UserButtonSlotProps, createAuthOS, useAllPermissions, useAnyPermission, useAuthOS, useOrganization, usePermission, useUser };