Skip to content

Commit 015f4a3

Browse files
warmijustiwarmijusti
committed
add css properties
1 parent e09da79 commit 015f4a3

File tree

5 files changed

+109
-121
lines changed

5 files changed

+109
-121
lines changed

‎auth-libs/web-component/README.md‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -204,21 +204,36 @@ The component uses Shadow DOM and can be customized using CSS custom properties.
204204

205205
### CSS Custom Properties
206206

207-
| Property | Description | Default |
208-
| ----------------------------- | ---------------------------------- | ------------------------------------ |
209-
| `--login-btn-margin` | Margin around the login button | `0` |
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` |
210219
| `--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 | `inherit` |
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` |
217227

218228
**Example:**
219229

220230
```css
221231
hotosm-auth {
232+
/* Whole component */
233+
--font-family: 'Inter', sans-serif;
234+
--font-weight: 400;
235+
236+
/* Login button overrides */
222237
--login-btn-margin: 8px;
223238
--login-btn-padding: 12px 24px;
224239
--login-btn-bg-color: #d73f3f;
@@ -227,6 +242,7 @@ hotosm-auth {
227242
--login-btn-text-color: #ffffff;
228243
--login-btn-text-size: 16px;
229244
--login-btn-font-family: 'Arial', sans-serif;
245+
--login-btn-font-weight: 700;
230246
}
231247
```
232248

‎auth-libs/web-component/dist/hanko-auth.esm.js‎

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3950,7 +3950,7 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
39503950
}, Symbol.toStringTag, { value: "Module" })), ms = Vi`
39513951
:host {
39523952
display: block;
3953-
font-family: var(--hot-font-sans);
3953+
font-family: var(--font-family, var(--hot-font-sans));
39543954
}
39553955
39563956
.container {
@@ -3985,34 +3985,26 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
39853985
animation: spin 1s linear infinite;
39863986
margin: 0 auto;
39873987
}
3988-
/* Container that mimics the login button dimensions */
3988+
/* Container that mimics the avatar/dropdown-trigger dimensions */
39893989
.loading-placeholder {
39903990
display: inline-grid;
39913991
place-items: center;
3992-
/* Use same styling as login-link button */
3993-
padding: var(
3994-
--login-btn-padding,
3995-
var(--hot-spacing-x-small) var(--hot-spacing-medium)
3996-
);
3997-
margin: var(--login-btn-margin, 0);
3998-
font-size: var(--login-btn-text-size, var(--hot-font-size-medium));
3999-
font-family: var(--login-btn-font-family, inherit);
4000-
border-radius: var(
4001-
--login-btn-border-radius,
4002-
var(--hot-border-radius-medium)
4003-
);
3992+
/* Match dropdown-trigger padding so size is stable pre/post load */
3993+
padding: var(--hot-spacing-x-small);
3994+
width: var(--hot-spacing-2x-large);
3995+
height: var(--hot-spacing-2x-large);
3996+
box-sizing: content-box;
40043997
}
40053998
40063999
/* Invisible text to reserve button width */
40074000
.loading-placeholder-text {
4008-
visibility: hidden;
4009-
grid-area: 1 / 1;
4001+
display: none;
40104002
}
40114003
40124004
.spinner-small {
40134005
grid-area: 1 / 1;
4014-
width: 1em;
4015-
height: 1em;
4006+
width: var(--hot-spacing-2x-large);
4007+
height: var(--hot-spacing-2x-large);
40164008
border: 2px solid var(--hot-color-gray-200);
40174009
border-top: 2px solid var(--hot-color-gray-600);
40184010
border-radius: 50%;
@@ -4040,7 +4032,8 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
40404032
border: none;
40414033
border-radius: 6px;
40424034
font-size: 14px;
4043-
font-weight: 500;
4035+
font-family: var(--font-family, var(--hot-font-sans));
4036+
font-weight: var(--font-weight, 500);
40444037
cursor: pointer;
40454038
transition: all 0.2s;
40464039
}
@@ -4221,8 +4214,8 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
42214214
display: inline-block;
42224215
cursor: pointer;
42234216
transition: all 0.2s;
4224-
font-weight: var(--hot-font-weight-medium);
4225-
font-family: var(--login-btn-font-family, inherit);
4217+
font-weight: var(--login-btn-font-weight, var(--font-weight, var(--hot-font-weight-medium)));
4218+
font-family: var(--login-btn-font-family, var(--font-family, var(--hot-font-sans)));
42264219
}
42274220
42284221
/* Button variants - filled */
@@ -4358,7 +4351,7 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
43584351
text-align: left;
43594352
transition: background-color 0.2s ease;
43604353
gap: var(--hot-spacing-small);
4361-
font-family: var(--hot-font-sans, inherit);
4354+
font-family: var(--font-family, var(--hot-font-sans, inherit));
43624355
font-size: var(--hot-font-size-small);
43634356
color: var(--hot-color-gray-900);
43644357
}
@@ -4407,7 +4400,7 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
44074400
border: none;
44084401
cursor: pointer;
44094402
gap: var(--hot-spacing-small);
4410-
font-family: var(--hot-font-sans, inherit);
4403+
font-family: var(--font-family, var(--hot-font-sans, inherit));
44114404
}
44124405
44134406
.bar-trigger:hover,
@@ -5281,7 +5274,7 @@ let re = class extends Mt {
52815274
this.log("🕒 Hanko session expired event received"), this.handleSessionExpired();
52825275
}), this._hanko.onUserLoggedOut(() => {
52835276
this.log("🚪 Hanko user logged out event received"), this.handleUserLoggedOut();
5284-
}), await this.checkSession(), this.user && (this.osmRequired && await this.checkOSMConnection(), await this.fetchProfileDisplayName()), this.loading = !1, this._broadcastState(), this.setupEventListeners();
5277+
}), await this.checkSession(), this.user && (this.osmRequired && await this.checkOSMConnection(), await this.fetchProfileDisplayName()), await new Promise((s) => setTimeout(s, 3e3)), this.loading = !1, this._broadcastState(), this.setupEventListeners();
52855278
} catch (n) {
52865279
this.logError("Failed to initialize hanko-auth:", n), this.error = n.message, this.loading = !1, this._broadcastState();
52875280
}

0 commit comments

Comments
 (0)