@authon/js 0.1.3 → 0.1.5

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 (3) hide show
  1. package/dist/index.js +87 -25
  2. package/dist/index.mjs +83 -21
  3. package/package.json +7 -7
package/dist/index.js CHANGED
@@ -25,11 +25,45 @@ __export(index_exports, {
25
25
  });
26
26
  module.exports = __toCommonJS(index_exports);
27
27
 
28
- // src/modal.ts
29
- var import_shared2 = require("@authon/shared");
28
+ // ../shared/dist/index.mjs
29
+ var PROVIDER_DISPLAY_NAMES = {
30
+ google: "Google",
31
+ apple: "Apple",
32
+ kakao: "Kakao",
33
+ naver: "Naver",
34
+ facebook: "Facebook",
35
+ github: "GitHub",
36
+ discord: "Discord",
37
+ x: "X",
38
+ line: "LINE",
39
+ microsoft: "Microsoft"
40
+ };
41
+ var PROVIDER_COLORS = {
42
+ google: { bg: "#ffffff", text: "#1f1f1f" },
43
+ apple: { bg: "#000000", text: "#ffffff" },
44
+ kakao: { bg: "#FEE500", text: "#191919" },
45
+ naver: { bg: "#03C75A", text: "#ffffff" },
46
+ facebook: { bg: "#1877F2", text: "#ffffff" },
47
+ github: { bg: "#24292e", text: "#ffffff" },
48
+ discord: { bg: "#5865F2", text: "#ffffff" },
49
+ x: { bg: "#000000", text: "#ffffff" },
50
+ line: { bg: "#06C755", text: "#ffffff" },
51
+ microsoft: { bg: "#ffffff", text: "#1f1f1f" }
52
+ };
53
+ var DEFAULT_BRANDING = {
54
+ primaryColorStart: "#7c3aed",
55
+ primaryColorEnd: "#4f46e5",
56
+ lightBg: "#ffffff",
57
+ lightText: "#111827",
58
+ darkBg: "#0f172a",
59
+ darkText: "#f1f5f9",
60
+ borderRadius: 12,
61
+ showEmailPassword: true,
62
+ showDivider: true,
63
+ locale: "en"
64
+ };
30
65
 
31
66
  // src/providers.ts
32
- var import_shared = require("@authon/shared");
33
67
  var PROVIDER_ICONS = {
34
68
  google: `<svg viewBox="0 0 24 24" width="20" height="20"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>`,
35
69
  apple: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>`,
@@ -43,10 +77,10 @@ var PROVIDER_ICONS = {
43
77
  microsoft: `<svg viewBox="0 0 24 24" width="20" height="20"><rect fill="#F25022" x="1" y="1" width="10" height="10"/><rect fill="#7FBA00" x="13" y="1" width="10" height="10"/><rect fill="#00A4EF" x="1" y="13" width="10" height="10"/><rect fill="#FFB900" x="13" y="13" width="10" height="10"/></svg>`
44
78
  };
45
79
  function getProviderButtonConfig(provider) {
46
- const colors = import_shared.PROVIDER_COLORS[provider];
80
+ const colors = PROVIDER_COLORS[provider];
47
81
  return {
48
82
  provider,
49
- label: `Continue with ${import_shared.PROVIDER_DISPLAY_NAMES[provider]}`,
83
+ label: `Continue with ${PROVIDER_DISPLAY_NAMES[provider]}`,
50
84
  bgColor: colors.bg,
51
85
  textColor: colors.text,
52
86
  iconSvg: PROVIDER_ICONS[provider]
@@ -59,6 +93,7 @@ var ModalRenderer = class {
59
93
  hostElement = null;
60
94
  containerElement = null;
61
95
  mode;
96
+ theme;
62
97
  branding;
63
98
  enabledProviders = [];
64
99
  onProviderClick;
@@ -66,7 +101,8 @@ var ModalRenderer = class {
66
101
  onClose;
67
102
  constructor(options) {
68
103
  this.mode = options.mode;
69
- this.branding = { ...import_shared2.DEFAULT_BRANDING, ...options.branding };
104
+ this.theme = options.theme || "auto";
105
+ this.branding = { ...DEFAULT_BRANDING, ...options.branding };
70
106
  this.onProviderClick = options.onProviderClick;
71
107
  this.onEmailSubmit = options.onEmailSubmit;
72
108
  this.onClose = options.onClose;
@@ -78,7 +114,7 @@ var ModalRenderer = class {
78
114
  this.enabledProviders = providers;
79
115
  }
80
116
  setBranding(branding) {
81
- this.branding = { ...import_shared2.DEFAULT_BRANDING, ...branding };
117
+ this.branding = { ...DEFAULT_BRANDING, ...branding };
82
118
  }
83
119
  open(view = "signIn") {
84
120
  this.close();
@@ -113,9 +149,13 @@ var ModalRenderer = class {
113
149
  const title = isSignUp ? "Create your account" : "Welcome back";
114
150
  const subtitle = isSignUp ? "Already have an account?" : "Don't have an account?";
115
151
  const subtitleLink = isSignUp ? "Sign in" : "Sign up";
152
+ const dark = this.isDark();
116
153
  const providerButtons = this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).map((p) => {
117
154
  const config = getProviderButtonConfig(p);
118
- return `<button class="provider-btn" data-provider="${p}" style="background:${config.bgColor};color:${config.textColor};border:1px solid ${config.bgColor === "#ffffff" ? "#e5e7eb" : config.bgColor}">
155
+ const isWhiteBg = config.bgColor === "#ffffff";
156
+ const btnBg = dark && isWhiteBg ? "#f8fafc" : config.bgColor;
157
+ const btnBorder = isWhiteBg ? dark ? "#475569" : "#e5e7eb" : config.bgColor;
158
+ return `<button class="provider-btn" data-provider="${p}" style="background:${btnBg};color:${config.textColor};border:1px solid ${btnBorder}">
119
159
  <span class="provider-icon">${config.iconSvg}</span>
120
160
  <span>${config.label}</span>
121
161
  </button>`;
@@ -147,38 +187,56 @@ var ModalRenderer = class {
147
187
  </div>
148
188
  `;
149
189
  }
190
+ isDark() {
191
+ if (this.theme === "dark") return true;
192
+ if (this.theme === "light") return false;
193
+ return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
194
+ }
150
195
  buildCSS() {
151
196
  const b = this.branding;
197
+ const dark = this.isDark();
198
+ const bg = dark ? b.darkBg || "#0f172a" : b.lightBg || "#ffffff";
199
+ const text = dark ? b.darkText || "#f1f5f9" : b.lightText || "#111827";
200
+ const mutedText = dark ? "#94a3b8" : "#6b7280";
201
+ const dimText = dark ? "#64748b" : "#9ca3af";
202
+ const borderColor = dark ? "#334155" : "#d1d5db";
203
+ const dividerColor = dark ? "#334155" : "#e5e7eb";
204
+ const inputBg = dark ? "#1e293b" : "#ffffff";
152
205
  return `
153
206
  :host {
154
207
  --authon-primary-start: ${b.primaryColorStart || "#7c3aed"};
155
208
  --authon-primary-end: ${b.primaryColorEnd || "#4f46e5"};
156
- --authon-light-bg: ${b.lightBg || "#ffffff"};
157
- --authon-light-text: ${b.lightText || "#111827"};
158
- --authon-dark-bg: ${b.darkBg || "#0f172a"};
159
- --authon-dark-text: ${b.darkText || "#f1f5f9"};
209
+ --authon-bg: ${bg};
210
+ --authon-text: ${text};
211
+ --authon-muted: ${mutedText};
212
+ --authon-dim: ${dimText};
213
+ --authon-border: ${borderColor};
214
+ --authon-divider: ${dividerColor};
215
+ --authon-input-bg: ${inputBg};
160
216
  --authon-radius: ${b.borderRadius ?? 12}px;
161
217
  --authon-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
162
218
  font-family: var(--authon-font);
163
- color: var(--authon-light-text);
219
+ color: var(--authon-text);
164
220
  }
165
221
  * { box-sizing: border-box; margin: 0; padding: 0; }
166
222
  .backdrop {
167
223
  position: fixed; inset: 0; z-index: 99998;
168
- background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
224
+ background: rgba(0,0,0,${dark ? "0.7" : "0.5"}); backdrop-filter: blur(4px);
169
225
  animation: fadeIn 0.2s ease;
170
226
  }
171
227
  .modal-container {
172
228
  ${this.mode === "popup" ? "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; max-height: 90vh; overflow-y: auto;" : ""}
173
- background: var(--authon-light-bg);
229
+ background: var(--authon-bg);
230
+ color: var(--authon-text);
231
+ border: 1px solid var(--authon-border);
174
232
  border-radius: var(--authon-radius);
175
233
  padding: 32px;
176
234
  width: 400px; max-width: 100%;
177
- ${this.mode === "popup" ? "box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); animation: slideIn 0.3s ease;" : ""}
235
+ ${this.mode === "popup" ? `box-shadow: 0 25px 50px -12px rgba(0,0,0,${dark ? "0.5" : "0.25"}); animation: slideIn 0.3s ease;` : ""}
178
236
  }
179
237
  .logo { display: block; margin: 0 auto 16px; max-height: 48px; }
180
- .title { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 8px; }
181
- .brand-name { text-align: center; font-size: 14px; color: #6b7280; margin-bottom: 24px; }
238
+ .title { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--authon-text); }
239
+ .brand-name { text-align: center; font-size: 14px; color: var(--authon-muted); margin-bottom: 24px; }
182
240
  .providers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
183
241
  .provider-btn {
184
242
  display: flex; align-items: center; gap: 12px;
@@ -192,19 +250,22 @@ var ModalRenderer = class {
192
250
  .provider-icon { display: flex; align-items: center; flex-shrink: 0; }
193
251
  .divider {
194
252
  display: flex; align-items: center; gap: 12px;
195
- margin: 16px 0; color: #9ca3af; font-size: 13px;
253
+ margin: 16px 0; color: var(--authon-dim); font-size: 13px;
196
254
  }
197
255
  .divider::before, .divider::after {
198
- content: ''; flex: 1; height: 1px; background: #e5e7eb;
256
+ content: ''; flex: 1; height: 1px; background: var(--authon-divider);
199
257
  }
200
258
  .email-form { display: flex; flex-direction: column; gap: 10px; }
201
259
  .input {
202
260
  width: 100%; padding: 10px 14px;
203
- border: 1px solid #d1d5db; border-radius: calc(var(--authon-radius) * 0.5);
261
+ background: var(--authon-input-bg);
262
+ color: var(--authon-text);
263
+ border: 1px solid var(--authon-border); border-radius: calc(var(--authon-radius) * 0.5);
204
264
  font-size: 14px; font-family: var(--authon-font);
205
265
  outline: none; transition: border-color 0.15s;
206
266
  }
207
- .input:focus { border-color: var(--authon-primary-start); box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }
267
+ .input::placeholder { color: var(--authon-dim); }
268
+ .input:focus { border-color: var(--authon-primary-start); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
208
269
  .submit-btn {
209
270
  width: 100%; padding: 10px;
210
271
  background: linear-gradient(135deg, var(--authon-primary-start), var(--authon-primary-end));
@@ -213,11 +274,11 @@ var ModalRenderer = class {
213
274
  font-family: var(--authon-font); transition: opacity 0.15s;
214
275
  }
215
276
  .submit-btn:hover { opacity: 0.9; }
216
- .switch-view { text-align: center; margin-top: 16px; font-size: 13px; color: #6b7280; }
277
+ .switch-view { text-align: center; margin-top: 16px; font-size: 13px; color: var(--authon-muted); }
217
278
  .switch-view a { color: var(--authon-primary-start); text-decoration: none; font-weight: 500; }
218
279
  .switch-view a:hover { text-decoration: underline; }
219
- .footer { text-align: center; margin-top: 16px; font-size: 12px; color: #9ca3af; }
220
- .footer a { color: #9ca3af; text-decoration: none; }
280
+ .footer { text-align: center; margin-top: 16px; font-size: 12px; color: var(--authon-dim); }
281
+ .footer a { color: var(--authon-dim); text-decoration: none; }
221
282
  .footer a:hover { text-decoration: underline; }
222
283
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
223
284
  @keyframes slideIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@@ -439,6 +500,7 @@ var Authon = class {
439
500
  if (!this.modal) {
440
501
  this.modal = new ModalRenderer({
441
502
  mode: this.config.mode,
503
+ theme: this.config.theme,
442
504
  containerId: this.config.containerId,
443
505
  branding: this.branding || void 0,
444
506
  onProviderClick: (provider) => this.startOAuthFlow(provider),
package/dist/index.mjs CHANGED
@@ -1,8 +1,42 @@
1
- // src/modal.ts
2
- import { DEFAULT_BRANDING } from "@authon/shared";
1
+ // ../shared/dist/index.mjs
2
+ var PROVIDER_DISPLAY_NAMES = {
3
+ google: "Google",
4
+ apple: "Apple",
5
+ kakao: "Kakao",
6
+ naver: "Naver",
7
+ facebook: "Facebook",
8
+ github: "GitHub",
9
+ discord: "Discord",
10
+ x: "X",
11
+ line: "LINE",
12
+ microsoft: "Microsoft"
13
+ };
14
+ var PROVIDER_COLORS = {
15
+ google: { bg: "#ffffff", text: "#1f1f1f" },
16
+ apple: { bg: "#000000", text: "#ffffff" },
17
+ kakao: { bg: "#FEE500", text: "#191919" },
18
+ naver: { bg: "#03C75A", text: "#ffffff" },
19
+ facebook: { bg: "#1877F2", text: "#ffffff" },
20
+ github: { bg: "#24292e", text: "#ffffff" },
21
+ discord: { bg: "#5865F2", text: "#ffffff" },
22
+ x: { bg: "#000000", text: "#ffffff" },
23
+ line: { bg: "#06C755", text: "#ffffff" },
24
+ microsoft: { bg: "#ffffff", text: "#1f1f1f" }
25
+ };
26
+ var DEFAULT_BRANDING = {
27
+ primaryColorStart: "#7c3aed",
28
+ primaryColorEnd: "#4f46e5",
29
+ lightBg: "#ffffff",
30
+ lightText: "#111827",
31
+ darkBg: "#0f172a",
32
+ darkText: "#f1f5f9",
33
+ borderRadius: 12,
34
+ showEmailPassword: true,
35
+ showDivider: true,
36
+ locale: "en"
37
+ };
3
38
 
4
39
  // src/providers.ts
5
- import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES } from "@authon/shared";
6
40
  var PROVIDER_ICONS = {
7
41
  google: `<svg viewBox="0 0 24 24" width="20" height="20"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>`,
8
42
  apple: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>`,
@@ -32,6 +66,7 @@ var ModalRenderer = class {
32
66
  hostElement = null;
33
67
  containerElement = null;
34
68
  mode;
69
+ theme;
35
70
  branding;
36
71
  enabledProviders = [];
37
72
  onProviderClick;
@@ -39,6 +74,7 @@ var ModalRenderer = class {
39
74
  onClose;
40
75
  constructor(options) {
41
76
  this.mode = options.mode;
77
+ this.theme = options.theme || "auto";
42
78
  this.branding = { ...DEFAULT_BRANDING, ...options.branding };
43
79
  this.onProviderClick = options.onProviderClick;
44
80
  this.onEmailSubmit = options.onEmailSubmit;
@@ -86,9 +122,13 @@ var ModalRenderer = class {
86
122
  const title = isSignUp ? "Create your account" : "Welcome back";
87
123
  const subtitle = isSignUp ? "Already have an account?" : "Don't have an account?";
88
124
  const subtitleLink = isSignUp ? "Sign in" : "Sign up";
125
+ const dark = this.isDark();
89
126
  const providerButtons = this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).map((p) => {
90
127
  const config = getProviderButtonConfig(p);
91
- return `<button class="provider-btn" data-provider="${p}" style="background:${config.bgColor};color:${config.textColor};border:1px solid ${config.bgColor === "#ffffff" ? "#e5e7eb" : config.bgColor}">
128
+ const isWhiteBg = config.bgColor === "#ffffff";
129
+ const btnBg = dark && isWhiteBg ? "#f8fafc" : config.bgColor;
130
+ const btnBorder = isWhiteBg ? dark ? "#475569" : "#e5e7eb" : config.bgColor;
131
+ return `<button class="provider-btn" data-provider="${p}" style="background:${btnBg};color:${config.textColor};border:1px solid ${btnBorder}">
92
132
  <span class="provider-icon">${config.iconSvg}</span>
93
133
  <span>${config.label}</span>
94
134
  </button>`;
@@ -120,38 +160,56 @@ var ModalRenderer = class {
120
160
  </div>
121
161
  `;
122
162
  }
163
+ isDark() {
164
+ if (this.theme === "dark") return true;
165
+ if (this.theme === "light") return false;
166
+ return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
167
+ }
123
168
  buildCSS() {
124
169
  const b = this.branding;
170
+ const dark = this.isDark();
171
+ const bg = dark ? b.darkBg || "#0f172a" : b.lightBg || "#ffffff";
172
+ const text = dark ? b.darkText || "#f1f5f9" : b.lightText || "#111827";
173
+ const mutedText = dark ? "#94a3b8" : "#6b7280";
174
+ const dimText = dark ? "#64748b" : "#9ca3af";
175
+ const borderColor = dark ? "#334155" : "#d1d5db";
176
+ const dividerColor = dark ? "#334155" : "#e5e7eb";
177
+ const inputBg = dark ? "#1e293b" : "#ffffff";
125
178
  return `
126
179
  :host {
127
180
  --authon-primary-start: ${b.primaryColorStart || "#7c3aed"};
128
181
  --authon-primary-end: ${b.primaryColorEnd || "#4f46e5"};
129
- --authon-light-bg: ${b.lightBg || "#ffffff"};
130
- --authon-light-text: ${b.lightText || "#111827"};
131
- --authon-dark-bg: ${b.darkBg || "#0f172a"};
132
- --authon-dark-text: ${b.darkText || "#f1f5f9"};
182
+ --authon-bg: ${bg};
183
+ --authon-text: ${text};
184
+ --authon-muted: ${mutedText};
185
+ --authon-dim: ${dimText};
186
+ --authon-border: ${borderColor};
187
+ --authon-divider: ${dividerColor};
188
+ --authon-input-bg: ${inputBg};
133
189
  --authon-radius: ${b.borderRadius ?? 12}px;
134
190
  --authon-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
135
191
  font-family: var(--authon-font);
136
- color: var(--authon-light-text);
192
+ color: var(--authon-text);
137
193
  }
138
194
  * { box-sizing: border-box; margin: 0; padding: 0; }
139
195
  .backdrop {
140
196
  position: fixed; inset: 0; z-index: 99998;
141
- background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
197
+ background: rgba(0,0,0,${dark ? "0.7" : "0.5"}); backdrop-filter: blur(4px);
142
198
  animation: fadeIn 0.2s ease;
143
199
  }
144
200
  .modal-container {
145
201
  ${this.mode === "popup" ? "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; max-height: 90vh; overflow-y: auto;" : ""}
146
- background: var(--authon-light-bg);
202
+ background: var(--authon-bg);
203
+ color: var(--authon-text);
204
+ border: 1px solid var(--authon-border);
147
205
  border-radius: var(--authon-radius);
148
206
  padding: 32px;
149
207
  width: 400px; max-width: 100%;
150
- ${this.mode === "popup" ? "box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); animation: slideIn 0.3s ease;" : ""}
208
+ ${this.mode === "popup" ? `box-shadow: 0 25px 50px -12px rgba(0,0,0,${dark ? "0.5" : "0.25"}); animation: slideIn 0.3s ease;` : ""}
151
209
  }
152
210
  .logo { display: block; margin: 0 auto 16px; max-height: 48px; }
153
- .title { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 8px; }
154
- .brand-name { text-align: center; font-size: 14px; color: #6b7280; margin-bottom: 24px; }
211
+ .title { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--authon-text); }
212
+ .brand-name { text-align: center; font-size: 14px; color: var(--authon-muted); margin-bottom: 24px; }
155
213
  .providers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
156
214
  .provider-btn {
157
215
  display: flex; align-items: center; gap: 12px;
@@ -165,19 +223,22 @@ var ModalRenderer = class {
165
223
  .provider-icon { display: flex; align-items: center; flex-shrink: 0; }
166
224
  .divider {
167
225
  display: flex; align-items: center; gap: 12px;
168
- margin: 16px 0; color: #9ca3af; font-size: 13px;
226
+ margin: 16px 0; color: var(--authon-dim); font-size: 13px;
169
227
  }
170
228
  .divider::before, .divider::after {
171
- content: ''; flex: 1; height: 1px; background: #e5e7eb;
229
+ content: ''; flex: 1; height: 1px; background: var(--authon-divider);
172
230
  }
173
231
  .email-form { display: flex; flex-direction: column; gap: 10px; }
174
232
  .input {
175
233
  width: 100%; padding: 10px 14px;
176
- border: 1px solid #d1d5db; border-radius: calc(var(--authon-radius) * 0.5);
234
+ background: var(--authon-input-bg);
235
+ color: var(--authon-text);
236
+ border: 1px solid var(--authon-border); border-radius: calc(var(--authon-radius) * 0.5);
177
237
  font-size: 14px; font-family: var(--authon-font);
178
238
  outline: none; transition: border-color 0.15s;
179
239
  }
180
- .input:focus { border-color: var(--authon-primary-start); box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }
240
+ .input::placeholder { color: var(--authon-dim); }
241
+ .input:focus { border-color: var(--authon-primary-start); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
181
242
  .submit-btn {
182
243
  width: 100%; padding: 10px;
183
244
  background: linear-gradient(135deg, var(--authon-primary-start), var(--authon-primary-end));
@@ -186,11 +247,11 @@ var ModalRenderer = class {
186
247
  font-family: var(--authon-font); transition: opacity 0.15s;
187
248
  }
188
249
  .submit-btn:hover { opacity: 0.9; }
189
- .switch-view { text-align: center; margin-top: 16px; font-size: 13px; color: #6b7280; }
250
+ .switch-view { text-align: center; margin-top: 16px; font-size: 13px; color: var(--authon-muted); }
190
251
  .switch-view a { color: var(--authon-primary-start); text-decoration: none; font-weight: 500; }
191
252
  .switch-view a:hover { text-decoration: underline; }
192
- .footer { text-align: center; margin-top: 16px; font-size: 12px; color: #9ca3af; }
193
- .footer a { color: #9ca3af; text-decoration: none; }
253
+ .footer { text-align: center; margin-top: 16px; font-size: 12px; color: var(--authon-dim); }
254
+ .footer a { color: var(--authon-dim); text-decoration: none; }
194
255
  .footer a:hover { text-decoration: underline; }
195
256
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
196
257
  @keyframes slideIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@@ -412,6 +473,7 @@ var Authon = class {
412
473
  if (!this.modal) {
413
474
  this.modal = new ModalRenderer({
414
475
  mode: this.config.mode,
476
+ theme: this.config.theme,
415
477
  containerId: this.config.containerId,
416
478
  branding: this.branding || void 0,
417
479
  onProviderClick: (provider) => this.startOAuthFlow(provider),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@authon/js",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "description": "Authon core SDK — ShadowDOM login modal for any app",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -13,16 +13,16 @@
13
13
  }
14
14
  },
15
15
  "scripts": {
16
- "build": "tsup src/index.ts --format cjs,esm --dts",
17
- "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
18
- },
19
- "dependencies": {
20
- "@authon/shared": "workspace:*"
16
+ "build": "tsup",
17
+ "dev": "tsup --watch"
21
18
  },
22
19
  "devDependencies": {
20
+ "@authon/shared": "workspace:*",
23
21
  "tsup": "^8.4.0",
24
22
  "typescript": "^5.7.0"
25
23
  },
26
- "files": ["dist"],
24
+ "files": [
25
+ "dist"
26
+ ],
27
27
  "license": "MIT"
28
28
  }