@hotosm/hanko-auth 0.4.6 → 0.4.8
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.
- package/README.md +25 -9
- package/dist/hanko-auth.esm.js +632 -589
- package/dist/hanko-auth.iife.js +95 -57
- package/dist/hanko-auth.umd.js +98 -60
- package/package.json +1 -1
- package/src/hanko-auth.styles.ts +39 -22
- package/src/hanko-auth.ts +146 -116
package/README.md
CHANGED
|
@@ -204,21 +204,36 @@ The component uses Shadow DOM and can be customized using CSS custom properties.
|
|
|
204
204
|
|
|
205
205
|
### CSS Custom Properties
|
|
206
206
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
|
207
|
+
#### Whole component
|
|
208
|
+
|
|
209
|
+
| Property | Description | Default |
|
|
210
|
+
| ----------------- | --------------------------------------------- | --------------------------------------- |
|
|
211
|
+
| `--font-family` | Font family for all text in the component | `system-ui, -apple-system, sans-serif` |
|
|
212
|
+
| `--font-weight` | Font weight for all text in the component | `500` |
|
|
213
|
+
|
|
214
|
+
#### Login button
|
|
215
|
+
|
|
216
|
+
| Property | Description | Default |
|
|
217
|
+
| ----------------------------- | ---------------------------------- | ------------------------------------------------------ |
|
|
218
|
+
| `--login-btn-margin` | Margin around the login button | `0` |
|
|
210
219
|
| `--login-btn-padding` | Padding inside the login button | `var(--hot-spacing-x-small) var(--hot-spacing-medium)` |
|
|
211
|
-
| `--login-btn-bg-color` | Background color of login button | `var(--hot-color-primary-1000)`
|
|
212
|
-
| `--login-btn-hover-bg-color` | Background color on hover | `var(--hot-color-primary-900)`
|
|
213
|
-
| `--login-btn-border-radius` | Border radius of login button | `var(--hot-border-radius-medium)`
|
|
214
|
-
| `--login-btn-text-color` | Text color of login button | `white`
|
|
215
|
-
| `--login-btn-text-size` | Font size of login button text | `var(--hot-font-size-medium)`
|
|
216
|
-
| `--login-btn-font-family` | Font family of login button | `
|
|
220
|
+
| `--login-btn-bg-color` | Background color of login button | `var(--hot-color-primary-1000)` |
|
|
221
|
+
| `--login-btn-hover-bg-color` | Background color on hover | `var(--hot-color-primary-900)` |
|
|
222
|
+
| `--login-btn-border-radius` | Border radius of login button | `var(--hot-border-radius-medium)` |
|
|
223
|
+
| `--login-btn-text-color` | Text color of login button | `white` |
|
|
224
|
+
| `--login-btn-text-size` | Font size of login button text | `var(--hot-font-size-medium)` |
|
|
225
|
+
| `--login-btn-font-family` | Font family of login button | falls back to `--font-family` |
|
|
226
|
+
| `--login-btn-font-weight` | Font weight of login button | falls back to `--font-weight` |
|
|
217
227
|
|
|
218
228
|
**Example:**
|
|
219
229
|
|
|
220
230
|
```css
|
|
221
231
|
hotosm-auth {
|
|
232
|
+
/* Whole component */
|
|
233
|
+
--font-family: 'Inter', sans-serif;
|
|
234
|
+
--font-weight: 400;
|
|
235
|
+
|
|
236
|
+
/* Login button overrides */
|
|
222
237
|
--login-btn-margin: 8px;
|
|
223
238
|
--login-btn-padding: 12px 24px;
|
|
224
239
|
--login-btn-bg-color: #d73f3f;
|
|
@@ -227,6 +242,7 @@ hotosm-auth {
|
|
|
227
242
|
--login-btn-text-color: #ffffff;
|
|
228
243
|
--login-btn-text-size: 16px;
|
|
229
244
|
--login-btn-font-family: 'Arial', sans-serif;
|
|
245
|
+
--login-btn-font-weight: 700;
|
|
230
246
|
}
|
|
231
247
|
```
|
|
232
248
|
|