Esther-Lita for Hanko.io

Posted on Oct 16, 2023

✨ Make Hanko Components Shine 💫

#programming #design #ui #tutorial

TL;DR

In this tutorial, we will customize the Hanko Web Components, drawing inspiration from the following themes:

Google
Barbie
GitHub
Cal.com
Instagram
Spooky Season

Hanko Components

Hanko is an easiest-to-use authentication solution that provides two web components: the Hanko-Auth, dedicated to streamlining the user authentication process, and the Hanko-Profile, where users can manage their account information. We know how important first impressions are, so we want to show you how to customize the components from Hanko to flash your users with a shiny user interface.

⭐️⭐️⭐️ https://github.com/teamhanko/hanko ⭐️⭐️⭐️

ℹ️ Before we start with the styling process we suggest you to take a look at the guide on how to implement the components in your project, click here.

Custom CSS Variables 🎨

Using CSS variables is one of our recommended approaches to style the hanko-auth and hanko-profile components. You can take a look at the list of CSS variables and the default values.

CSS Variables
When the Hanko Web Components were created, a selection of properties (CSS Custom Variables) was chosen to rule the design and harmony of the elements inside them. By changing the default value of the specific custom variable all the elements that are styled with the same variable will be updated.

Google Style

Hanko-Auth component:

Hanko-Profile component, renaming passkey:

You can get the Google inspired UI by changing the value of the following CSS variables in your styles:

:root {
  --color: #424c55;
  --color-shade-1: #d6d6d6;
  --brand-color: #568aed;
  --background-color: #ffffff;
  --border-radius: 4px;
  --font-size: 14px;
  --item-height: 44px;
  --headline1-font-size: 28px;
  --headline1-font-weight: 450;
  --container-padding: 40px;
  --container-max-width: 410px;
}

hanko-profile {
  --container-padding: 20px;
  --container-max-width: 600px;
}

CSS Shadow Parts

The use of Shadow Parts is also recommended to style the hanko-auth and hanko-profile components. You can add customization to a specific element inside the components utilizing the ::part selector. The default behavior of the Hanko Web Components is to be attached to the Shadow DOM, which is useful for preventing styles from leaking out of components and applying to other elements. Here is the list of the shadow parts that you can use to style the Hanko Web Components.

CSS Shadow Parts
When the Hanko Web Components were created, a part was added inside some elements by assigning a part attribute to the element. Similar to a class selector in CSS (class="hanko_container"), a part is specified in the HTML element (part="container"). Then the element can be styled using the root name and the ::part selector (hanko-auth::part(container){ background: black; }).

Barbie Style 👱🏻‍♀️

Hanko-Auth component:

Hanko-Profile component:

You can get the Barbie inspired UI by targeting and styling the following ::part selectors in your styles:

hanko-auth::part(container),
hanko-profile::part(container) {
  max-width: 550px;
  padding: 50px 30px;
  border: solid 1px #dd9dbf;
  border-radius: 60px;
}

hanko-profile::part(form-item) {
  background-color: #fceff6;
}

hanko-auth::part(divider-line) {
  border-color: #dc9ebe;
}

hanko-auth::part(headline1),
hanko-profile::part(headline1),
hanko-auth::part(headline2),
hanko-profile::part(headline2),
hanko-auth::part(divider-text),
hanko-auth::part(secondary-button) {
  color: #e0218a;
}

hanko-auth::part(headline1),
hanko-profile::part(headline1),
hanko-auth::part(headline2),
hanko-profile::part(headline2) {
  font-family: "Galada", cursive;
}

hanko-auth::part(input),
hanko-profile::part(input) {
  border-radius: 20px;
  border-color: #dc9ebe;
}

hanko-auth::part(input)::placeholder,
hanko-profile::part(input)::placeholder {
  color: #f2a2ae;
}

hanko-auth::part(button),
hanko-profile::part(button) {
  border-color: #e0218a;
  border-radius: 20px;
}

hanko-auth::part(primary-button),
hanko-profile::part(primary-button) {
  background-color: #e0218a;
}

hanko-auth::part(secondary-button) {
  color: #d8038d;
}

hanko-profile::part(paragraph) {
  color: #dc9ebe;
  font-family: "IBM Plex Serif", serif;
}

Combining CSS Variables & Shadow Parts

The best way to achieve amazing results is by combining both suggested approach. Changing the values of the CSS Variables and using the ::part selectors to style the elements is the best way to transform the components at a deeper level.

GitHub Style

Hanko-Auth component:

Hanko-Profile component, adding a secondary email address:

You can apply the following styles to get the GitHub inspired UI:

:root {
  --color-shade-1: #d0d7dd;
  --brand-color: #1b7f36;
  --background-color: #f5f8fa;
  --headline1-font-size: 24px;
  --headline1-font-weight: 300;
  --headline1-margin: 10px 40px;
  --border-radius: 6px;
  --font-size: 14px;
  --item-height: 32px;
  --font-weight: 500;
  --link-color: #0969da;
  --divider-padding: 0 20px;
}

hanko-auth {
  --container-max-width: 320px;
  --container-padding: 16px;
  --color: #0969da;
}

hanko-profile {
  --container-max-width: 550px;
  --container-padding: 30px;
  --color: #1f2328;
}

hanko-auth::part(container),
hanko-profile::part(container) {
  border: solid 1px #d8dee3;
  border-radius: 6px;
}

hanko-auth::part(headline1),
hanko-profile::part(headline1) {
  color: #1f2328;
}

hanko-auth::part(input),
hanko-profile::part(input) {
  background-color: #ffffff;
}

hanko-auth::part(secondary-button) {
  border: none;
  margin: 0 0 0 20px;
}

hanko-auth::part(divider-text) {
  color: #1f2328;
}

Cal.com

Hanko-Auth component:

Hanko-Profile component:

You can apply the following styles to get the Cal.com inspired UI:

:root {
  --color: #111827;
  --color-shade-1: #d1d5db;
  --brand-color: #111827;
  --background-color: #ffffff;
  --headline1-font-size: 29px;
  --headline2-font-size: 16px;
  --headline1-margin: 10px 40px;
  --border-radius: 6px;
  --font-size: 14px;
  --item-height: 36px;
  --link-color: #1c73e8;
  --divider-padding: 0 15px;
}

hanko-auth {
  --container-max-width: 640px;
  --container-padding: 40px;
}

hanko-profile {
  --container-max-width: 550px;
  --container-padding: 30px;
}

hanko-auth::part(container),
hanko-profile::part(container) {
  border: solid 1px #d8dee3;
  border-radius: 6px;
}

hanko-auth::part(headline1),
hanko-profile::part(headline1),
hanko-auth::part(headline2),
hanko-profile::part(headline2) {
  color: #1f2328;
  line-height: 36px;
  font-family: Cal Sans;
}

hanko-auth::part(form-item) {
  min-width: 100%;
}

hanko-auth::part(input),
hanko-profile::part(input) {
  background-color: #ffffff;
  margin-bottom: 12px;
}

hanko-auth::part(secondary-button) {
  border-color: var(--color-shade-1);
}

hanko-auth::part(divider) {
  margin: 24px 0;
}

Customization through CSS Classes

This last approach is not recommended by the Hanko team. In order to use this approach, the web components must not be attached to the shadow DOM. You need to manually detach the web components from the Shadow DOM when you register the component:

register("https://hanko.yourdomain.com", { shadow: false });

You can use this CSS example file as a reference. To change a specific property you need to override the predefined ones, as shown below:

.hanko_container {
  background-color: blue !important;
}

Or you can bring all the styles from scratch by also preventing injecting styles on the component and modifying the value of the CSS classes:

register("https://hanko.yourdomain.com", {
  shadow: false,
  injectStyles: false,
});

This last approach will be tested by styling the following inspired themes, removing all the default styles and bringing our own. We will use the CSS custom classes provided by Hanko to target and style the elements.