improved Hanko Elements default styles (#1036)

* hanko-auth component styled slightly different Changing the max-width and adding padding around in the container can bring a nicer UI for the user's first impression of the Hanko components * Removed Prettier formatting --------- Co-authored-by: Felix Magedanz <[email protected]>
teamhanko · Sep 23, 2023 · 728e183 · 728e183
1 parent 84a4d14
commit 728e183
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 55 deletions.
diff --git a/frontend/elements/README.md b/frontend/elements/README.md
@@ -349,7 +349,7 @@ variables including default values can be found below:
 hanko-auth,
 hanko-profile {
   /* Color Scheme */
-  --color: #171717;
+  --color: #333333;
   --color-shade-1: #8f9095;
   --color-shade-2: #e5e6ef;
 
@@ -363,11 +363,11 @@ hanko-profile {
 
   /* Font Styles */
   --font-weight: 400;
-  --font-size: 14px;
+  --font-size: 16px;
   --font-family: sans-serif;
 
   /* Border Styles */
-  --border-radius: 4px;
+  --border-radius: 8px;
   --border-style: solid;
   --border-width: 1px;
 
@@ -376,17 +376,17 @@ hanko-profile {
   --item-margin: 0.5rem 0;
 
   /* Container Styles */
-  --container-padding: 0;
-  --container-max-width: 600px;
+  --container-padding: 30px;
+  --container-max-width: 410px;
 
   /* Headline Styles */
   --headline1-font-size: 24px;
   --headline1-font-weight: 600;
-  --headline1-margin: 0 0 0.5rem;
+  --headline1-margin: 0 0 1rem;
 
-  --headline2-font-size: 14px;
+  --headline2-font-size: 16px;
   --headline2-font-weight: 600;
-  --headline2-margin: 1rem 0 0.25rem;
+  --headline2-margin: 1rem 0 0.5rem;
 
   /* Divider Styles */
   --divider-padding: 0 42px;
@@ -397,7 +397,7 @@ hanko-profile {
   --link-text-decoration-hover: underline;
 
   /* Input Styles */
-  --input-min-width: 12em;
+  --input-min-width: 14em;
 
   /* Button Styles */
   --button-min-width: max-content;
@@ -768,4 +768,4 @@ Found a bug? Please report on our [GitHub](https://github.com/teamhanko/hanko/is
 
 ## License
 
-The `elements` project is licensed under the [MIT License](LICENSE).
+The `elements` project is licensed under the [MIT License](LICENSE).
diff --git a/frontend/elements/example.css b/frontend/elements/example.css
@@ -1,7 +1,7 @@
 .hanko_container {
     background-color: var(--background-color, white);
     padding: var(--container-padding, 0);
-    max-width: var(--container-max-width, 600px);
+    max-width: var(--container-max-width, 410px);
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -56,15 +56,15 @@
 
 .hanko_button {
     font-weight: var(--font-weight, 400);
-    font-size: var(--font-size, 14px);
+    font-size: var(--font-size, 16px);
     font-family: var(--font-family, sans-serif);
-    border-radius: var(--border-radius, 4px);
+    border-radius: var(--border-radius, 8px);
     border-style: var(--border-style, solid);
     border-width: var(--border-width, 1px);
     white-space: nowrap;
     width: 100%;
     min-width: var(--button-min-width, 7em);
-    height: var(--item-height, 34px);
+    height: var(--item-height, 42);
     outline: none;
     cursor: pointer;
     transition: .1s ease-out;
@@ -91,7 +91,7 @@
 .hanko_button.hanko_primary:focus {
     color: var(--brand-contrast-color, white);
     background: var(--brand-color, #506cf0);
-    border-color: var(--color, #171717)
+    border-color: var(--color, #333333)
 }
 
 .hanko_button.hanko_primary:disabled {
@@ -101,19 +101,19 @@
 }
 
 .hanko_button.hanko_secondary {
-    color: var(--color, #171717);
+    color: var(--color, #333333);
     background: var(--background-color, white);
-    border-color: var(--color, #171717)
+    border-color: var(--color, #333333)
 }
 
 .hanko_button.hanko_secondary:hover {
-    color: var(--color, #171717);
+    color: var(--color, #333333);
     background: var(--color-shade-2, #e5e6ef);
-    border-color: var(--color, #171717)
+    border-color: var(--color, #333333)
 }
 
 .hanko_button.hanko_secondary:focus {
-    color: var(--color, #171717);
+    color: var(--color, #333333);
     background: var(--background-color, white);
     border-color: var(--brand-color, #506cf0)
 }
@@ -134,13 +134,13 @@
 
 .hanko_input {
     font-weight: var(--font-weight, 400);
-    font-size: var(--font-size, 14px);
+    font-size: var(--font-size, 16px);
     font-family: var(--font-family, sans-serif);
-    border-radius: var(--border-radius, 4px);
+    border-radius: var(--border-radius, 8px);
     border-style: var(--border-style, solid);
     border-width: var(--border-width, 1px);
-    height: var(--item-height, 34px);
-    color: var(--color, #171717);
+    height: var(--item-height, 42px);
+    color: var(--color, #333333);
     border-color: var(--color-shade-1, #8f9095);
     background: var(--background-color, white);
     padding: 0 .5rem;
@@ -153,7 +153,7 @@
 .hanko_input:-webkit-autofill,
 .hanko_input:-webkit-autofill:hover,
 .hanko_input:-webkit-autofill:focus {
-    -webkit-text-fill-color: var(--color, #171717);
+    -webkit-text-fill-color: var(--color, #333333);
     -webkit-box-shadow: 0 0 0 50px var(--background-color, white) inset
 }
 
@@ -167,8 +167,8 @@
 }
 
 .hanko_input:focus {
-    color: var(--color, #171717);
-    border-color: var(--color, #171717)
+    color: var(--color, #333333);
+    border-color: var(--color, #333333)
 }
 
 .hanko_input:disabled {
@@ -214,7 +214,7 @@
 .hanko_loadingSpinnerWrapperIcon .hanko_secondary.hanko_loadingSpinner,
 .hanko_secondary.hanko_exclamationMark,
 .hanko_secondary.hanko_checkmark {
-    fill: var(--color, #171717)
+    fill: var(--color, #333333)
 }
 
 .hanko_icon.hanko_disabled,
@@ -309,7 +309,7 @@
 }
 
 .hanko_headline {
-    color: var(--color, #171717);
+    color: var(--color, #333333);
     font-family: var(--font-family, sans-serif);
     text-align: left;
     letter-spacing: 0;
@@ -320,27 +320,27 @@
 .hanko_headline.hanko_grade1 {
     font-size: var(--headline1-font-size, 24px);
     font-weight: var(--headline1-font-weight, 600);
-    margin: var(--headline1-margin, 0 0 0.5rem)
+    margin: var(--headline1-margin, 0 0 1rem)
 }
 
 .hanko_headline.hanko_grade2 {
-    font-size: var(--headline2-font-size, 14px);
+    font-size: var(--headline2-font-size, 16px);
     font-weight: var(--headline2-font-weight, 600);
-    margin: var(--headline2-margin, 1rem 0 0.25rem)
+    margin: var(--headline2-margin, 1rem 0 0.5rem)
 }
 
 .hanko_errorMessage {
     font-weight: var(--font-weight, 400);
-    font-size: var(--font-size, 14px);
+    font-size: var(--font-size, 16px);
     font-family: var(--font-family, sans-serif);
-    border-radius: var(--border-radius, 4px);
+    border-radius: var(--border-radius, 8px);
     border-style: var(--border-style, solid);
     border-width: var(--border-width, 1px);
     color: var(--error-color, #e82020);
     background: var(--background-color, white);
     padding: .25rem;
     margin: var(--item-margin, 0.5rem 0);
-    min-height: var(--item-height, 34px);
+    min-height: var(--item-height, 42px);
     display: flex;
     align-items: center;
     box-sizing: border-box
@@ -356,32 +356,32 @@
 
 .hanko_paragraph {
     font-weight: var(--font-weight, 400);
-    font-size: var(--font-size, 14px);
+    font-size: var(--font-size, 16px);
     font-family: var(--font-family, sans-serif);
-    color: var(--color, #171717);
+    color: var(--color, #333333);
     margin: var(--item-margin, 0.5rem 0);
     text-align: left;
     word-break: break-word
 }
 
 .hanko_accordion {
     font-weight: var(--font-weight, 400);
-    font-size: var(--font-size, 14px);
+    font-size: var(--font-size, 16px);
     font-family: var(--font-family, sans-serif);
     width: 100%;
     overflow: hidden
 }
 
 .hanko_accordion .hanko_accordionItem {
-    color: var(--color, #171717);
+    color: var(--color, #333333);
     margin: .25rem 0;
     overflow: hidden
 }
 
 .hanko_accordion .hanko_accordionItem .hanko_label {
-    border-radius: var(--border-radius, 4px);
+    border-radius: var(--border-radius, 8px);
     border-style: none;
-    height: var(--item-height, 34px);
+    height: var(--item-height, 42px);
     background: var(--background-color, white);
     box-sizing: border-box;
     display: flex;
@@ -485,7 +485,7 @@
 
 .hanko_link {
     font-weight: var(--font-weight, 400);
-    font-size: var(--font-size, 14px);
+    font-size: var(--font-size, 16px);
     font-family: var(--font-family, sans-serif);
     color: var(--link-color, #506cf0);
     text-decoration: var(--link-text-decoration, none);
@@ -500,7 +500,7 @@
 }
 
 .hanko_link.hanko_disabled {
-    color: var(--color, #171717);
+    color: var(--color, #333333);
     pointer-events: none;
     cursor: default
 }
@@ -523,7 +523,7 @@
 
 .hanko_divider {
     font-weight: var(--font-weight, 400);
-    font-size: var(--font-size, 14px);
+    font-size: var(--font-size, 16px);
     font-family: var(--font-family, sans-serif);
     display: var(--divider-display, flex);
     visibility: var(--divider-visibility, visible);
@@ -545,4 +545,4 @@
     background: var(--background-color, white);
     padding: var(--divider-padding, 0 42px);
     line-height: .1em
-}
+}
diff --git a/frontend/elements/src/_preset.sass b/frontend/elements/src/_preset.sass
@@ -1,5 +1,5 @@
 // Color Scheme
-$color: #171717
+$color: #333333
 $color-shade-1: #8f9095
 $color-shade-2: #e5e6ef
 
@@ -13,30 +13,30 @@ $link-color: #506cf0
 
 // Font Styles
 $font-weight: 400
-$font-size: 14px
+$font-size: 16px
 $font-family: sans-serif
 
 // Border Styles
-$border-radius: 4px
+$border-radius: 8px
 $border-style: solid
 $border-width: 1px
 
 // Item Styles
-$item-height: 34px
+$item-height: 42px
 $item-margin: .5rem 0
 
 // Container Styles
-$container-padding: 0
-$container-max-width: 600px
+$container-padding: 30px
+$container-max-width: 410px
 
 // Headline Styles
 $headline1-font-size: 24px
 $headline1-font-weight: 600
-$headline1-margin: 0 0 .5rem
+$headline1-margin: 0 0 1rem
 
-$headline2-font-size: 14px
+$headline2-font-size: 16px
 $headline2-font-weight: 600
-$headline2-margin: 1rem 0 .25rem
+$headline2-margin: 1rem 0 .5rem
 
 // Divider Styles
 $divider-padding: 0 42px

diff --git a/frontend/elements/src/components/link/styles.sass b/frontend/elements/src/components/link/styles.sass
@@ -28,7 +28,7 @@
   flex-direction: row
   justify-content: space-between
   align-items: center
-  height: 1.2rem
+  height: 1.8rem
 
   &.reverse
     flex-direction: row-reverse

diff --git a/frontend/elements/src/components/spacer/styles.sass b/frontend/elements/src/components/spacer/styles.sass
@@ -11,6 +11,7 @@
   visibility: variables.$divider-visibility
   color: variables.$color-shade-1
   margin: variables.$item-margin
+  padding: .5em
 
   .line
     border-bottom-style: variables.$border-style