change login button size and color

warmijusti · warmijusti · commit 81e77089f04f · 2026-04-16T12:26:24.000-05:00
diff --git a/auth-libs/web-component/CHANGELOG.md b/auth-libs/web-component/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.5.3] - 2026-04-16
+
+### Changed
+
+- Login button color and font size.
+
 ## [0.5.2] - 2026-03-9
 
 ### Added
diff --git a/auth-libs/web-component/dist/hanko-auth.esm.js b/auth-libs/web-component/dist/hanko-auth.esm.js
@@ -4018,7 +4018,7 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =
 
   .login-link {
     color: var(--login-btn-text-color, white);
-    font-size: var(--login-btn-text-size, var(--hot-font-size-medium));
+    font-size: var(--hot-font-size-small);
     border-radius: var(
       --login-btn-border-radius,
       var(--hot-border-radius-medium)
@@ -4047,11 +4047,11 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =
     border: none;
   }
   .login-link.filled.primary {
-    background: var(--login-btn-bg-color, var(--hot-color-primary-1000));
+    background: var(--hot-color-gray-950);
     color: var(--login-btn-text-color, white);
   }
   .login-link.filled.primary:hover {
-    background: var(--login-btn-hover-bg-color, var(--hot-color-primary-900));
+    background: var(--hot-color-primary-800);
   }
   .login-link.filled.neutral {
     background: var(--login-btn-bg-color, var(--hot-color-neutral-600));
@@ -4074,8 +4074,8 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =
     border: 1px solid;
   }
   .login-link.outline.primary {
-    border-color: var(--login-btn-bg-color, var(--hot-color-primary-1000));
-    color: var(--login-btn-text-color, var(--hot-color-primary-1000));
+    border-color: var(--login-btn-bg-color, var(--hot-color-primary-950));
+    color: var(--login-btn-text-color, var(--hot-color-primary-950));
   }
   .login-link.outline.primary:hover {
     background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));
@@ -4101,7 +4101,7 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =
     border: none;
   }
   .login-link.plain.primary {
-    color: var(--login-btn-text-color, var(--hot-color-primary-1000));
+    color: var(--login-btn-text-color, var(--hot-color-primary-950));
   }
   .login-link.plain.primary:hover {
     background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));
diff --git a/auth-libs/web-component/dist/hanko-auth.iife.js b/auth-libs/web-component/dist/hanko-auth.iife.js
diff --git a/auth-libs/web-component/dist/hanko-auth.umd.js b/auth-libs/web-component/dist/hanko-auth.umd.js
diff --git a/auth-libs/web-component/package.json b/auth-libs/web-component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/hanko-auth",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Web component for HOTOSM SSO authentication with Hanko and OSM integration",
   "type": "module",
   "main": "dist/hanko-auth.umd.js",
diff --git a/auth-libs/web-component/src/hanko-auth.styles.ts b/auth-libs/web-component/src/hanko-auth.styles.ts
@@ -274,7 +274,7 @@ export const styles = css`
 
   .login-link {
     color: var(--login-btn-text-color, white);
-    font-size: var(--login-btn-text-size, var(--hot-font-size-medium));
+    font-size: var(--hot-font-size-small);
     border-radius: var(
       --login-btn-border-radius,
       var(--hot-border-radius-medium)
@@ -303,11 +303,11 @@ export const styles = css`
     border: none;
   }
   .login-link.filled.primary {
-    background: var(--login-btn-bg-color, var(--hot-color-primary-1000));
+    background: var(--hot-color-gray-950);
     color: var(--login-btn-text-color, white);
   }
   .login-link.filled.primary:hover {
-    background: var(--login-btn-hover-bg-color, var(--hot-color-primary-900));
+    background: var(--hot-color-primary-800);
   }
   .login-link.filled.neutral {
     background: var(--login-btn-bg-color, var(--hot-color-neutral-600));
@@ -330,8 +330,8 @@ export const styles = css`
     border: 1px solid;
   }
   .login-link.outline.primary {
-    border-color: var(--login-btn-bg-color, var(--hot-color-primary-1000));
-    color: var(--login-btn-text-color, var(--hot-color-primary-1000));
+    border-color: var(--login-btn-bg-color, var(--hot-color-primary-950));
+    color: var(--login-btn-text-color, var(--hot-color-primary-950));
   }
   .login-link.outline.primary:hover {
     background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));
@@ -357,7 +357,7 @@ export const styles = css`
     border: none;
   }
   .login-link.plain.primary {
-    color: var(--login-btn-text-color, var(--hot-color-primary-1000));
+    color: var(--login-btn-text-color, var(--hot-color-primary-950));
   }
   .login-link.plain.primary:hover {
     background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));

Original file line number	Diff line number	Diff line change
`@@ -4018,7 +4018,7 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =`
`4018`	`4018`
`4019`	`4019`	`.login-link {`
`4020`	`4020`	`color: var(--login-btn-text-color, white);`
`4021`		`- font-size: var(--login-btn-text-size, var(--hot-font-size-medium));`
	`4021`	`+ font-size: var(--hot-font-size-small);`
`4022`	`4022`	`border-radius: var(`
`4023`	`4023`	`--login-btn-border-radius,`
`4024`	`4024`	`var(--hot-border-radius-medium)`
`@@ -4047,11 +4047,11 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =`
`4047`	`4047`	`border: none;`
`4048`	`4048`	`}`
`4049`	`4049`	`.login-link.filled.primary {`
`4050`		`- background: var(--login-btn-bg-color, var(--hot-color-primary-1000));`
	`4050`	`+ background: var(--hot-color-gray-950);`
`4051`	`4051`	`color: var(--login-btn-text-color, white);`
`4052`	`4052`	`}`
`4053`	`4053`	`.login-link.filled.primary:hover {`
`4054`		`- background: var(--login-btn-hover-bg-color, var(--hot-color-primary-900));`
	`4054`	`+ background: var(--hot-color-primary-800);`
`4055`	`4055`	`}`
`4056`	`4056`	`.login-link.filled.neutral {`
`4057`	`4057`	`background: var(--login-btn-bg-color, var(--hot-color-neutral-600));`
`@@ -4074,8 +4074,8 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =`
`4074`	`4074`	`border: 1px solid;`
`4075`	`4075`	`}`
`4076`	`4076`	`.login-link.outline.primary {`
`4077`		`- border-color: var(--login-btn-bg-color, var(--hot-color-primary-1000));`
`4078`		`- color: var(--login-btn-text-color, var(--hot-color-primary-1000));`
	`4077`	`+ border-color: var(--login-btn-bg-color, var(--hot-color-primary-950));`
	`4078`	`+ color: var(--login-btn-text-color, var(--hot-color-primary-950));`
`4079`	`4079`	`}`
`4080`	`4080`	`.login-link.outline.primary:hover {`
`4081`	`4081`	`background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));`
`@@ -4101,7 +4101,7 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =`
`4101`	`4101`	`border: none;`
`4102`	`4102`	`}`
`4103`	`4103`	`.login-link.plain.primary {`
`4104`		`- color: var(--login-btn-text-color, var(--hot-color-primary-1000));`
	`4104`	`+ color: var(--login-btn-text-color, var(--hot-color-primary-950));`
`4105`	`4105`	`}`
`4106`	`4106`	`.login-link.plain.primary:hover {`
`4107`	`4107`	`background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@hotosm/hanko-auth",`
`3`		`- "version": "0.5.2",`
	`3`	`+ "version": "0.5.3",`
`4`	`4`	`"description": "Web component for HOTOSM SSO authentication with Hanko and OSM integration",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/hanko-auth.umd.js",`
Original file line number	Diff line number	Diff line change
@@ -274,7 +274,7 @@ export const styles = css`
`274`	`274`
`275`	`275`	`.login-link {`
`276`	`276`	`color: var(--login-btn-text-color, white);`
`277`		`- font-size: var(--login-btn-text-size, var(--hot-font-size-medium));`
	`277`	`+ font-size: var(--hot-font-size-small);`
`278`	`278`	`border-radius: var(`
`279`	`279`	`--login-btn-border-radius,`
`280`	`280`	`var(--hot-border-radius-medium)`
@@ -303,11 +303,11 @@ export const styles = css`
`303`	`303`	`border: none;`
`304`	`304`	`}`
`305`	`305`	`.login-link.filled.primary {`
`306`		`- background: var(--login-btn-bg-color, var(--hot-color-primary-1000));`
	`306`	`+ background: var(--hot-color-gray-950);`
`307`	`307`	`color: var(--login-btn-text-color, white);`
`308`	`308`	`}`
`309`	`309`	`.login-link.filled.primary:hover {`
`310`		`- background: var(--login-btn-hover-bg-color, var(--hot-color-primary-900));`
	`310`	`+ background: var(--hot-color-primary-800);`
`311`	`311`	`}`
`312`	`312`	`.login-link.filled.neutral {`
`313`	`313`	`background: var(--login-btn-bg-color, var(--hot-color-neutral-600));`
@@ -330,8 +330,8 @@ export const styles = css`
`330`	`330`	`border: 1px solid;`
`331`	`331`	`}`
`332`	`332`	`.login-link.outline.primary {`
`333`		`- border-color: var(--login-btn-bg-color, var(--hot-color-primary-1000));`
`334`		`- color: var(--login-btn-text-color, var(--hot-color-primary-1000));`
	`333`	`+ border-color: var(--login-btn-bg-color, var(--hot-color-primary-950));`
	`334`	`+ color: var(--login-btn-text-color, var(--hot-color-primary-950));`
`335`	`335`	`}`
`336`	`336`	`.login-link.outline.primary:hover {`
`337`	`337`	`background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));`
@@ -357,7 +357,7 @@ export const styles = css`
`357`	`357`	`border: none;`
`358`	`358`	`}`
`359`	`359`	`.login-link.plain.primary {`
`360`		`- color: var(--login-btn-text-color, var(--hot-color-primary-1000));`
	`360`	`+ color: var(--login-btn-text-color, var(--hot-color-primary-950));`
`361`	`361`	`}`
`362`	`362`	`.login-link.plain.primary:hover {`
`363`	`363`	`background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));`