From ac789934b66168619a542e0804590afdc7590a64 Mon Sep 17 00:00:00 2001 From: YinYin Chiu Date: Fri, 23 Aug 2024 15:49:25 +0800 Subject: [PATCH 1/6] Change to use `rem` for non-spacing styles --- authui/src/authflowv2/base.css | 28 +++++++++---------- authui/src/authflowv2/components/checkbox.css | 2 +- .../src/authflowv2/components/otp-input.css | 4 +-- .../authflowv2/components/password-policy.css | 2 +- .../src/authflowv2/components/phone-input.css | 4 +-- authui/src/authflowv2/components/select.css | 4 +-- 6 files changed, 22 insertions(+), 22 deletions(-) diff --git a/authui/src/authflowv2/base.css b/authui/src/authflowv2/base.css index 2e76334467..40bf225825 100644 --- a/authui/src/authflowv2/base.css +++ b/authui/src/authflowv2/base.css @@ -126,50 +126,50 @@ :root { --typography-headline-medium__font-family: inherit; --typography-headline-medium__font-size: 1.75rem; - --typography-headline-medium__line-height: 1.21428571429em; /* 34 / 28 = 1.21428571429 */ + --typography-headline-medium__line-height: 2.125rem; --typography-headline-medium__letter-spacing: 0; --typography-headline-medium__font-weight: 700; --typography-title-medium__font-family: inherit; --typography-title-medium__font-size: 1rem; - --typography-title-medium__line-height: 1.5em; - --typography-title-medium__letter-spacing: 0.009375em; + --typography-title-medium__line-height: 1.5rem; + --typography-title-medium__letter-spacing: 0.009375rem; --typography-title-medium__font-weight: 500; --typography-title-large__font-family: inherit; --typography-title-large__font-size: 1.5rem; - --typography-title-large__line-height: 1.1428571429em; /* 32 / 28 = 1.1428571429 */ + --typography-title-large__line-height: 2rem; --typography-title-large__letter-spacing: 0; --typography-title-large__font-weight: 700; --typography-label-large__font-family: inherit; --typography-label-large__font-size: 1rem; - --typography-label-large__line-height: 1.5em; - --typography-label-large__letter-spacing: 0.00625em; + --typography-label-large__line-height: 1.5rem; + --typography-label-large__letter-spacing: 0.00625rem; --typography-label-large__font-weight: 600; --typography-label-medium__font-family: inherit; --typography-label-medium__font-size: 0.875rem; - --typography-label-medium__line-height: 1.42857142857em; /* 20 / 14 = 1.42857142857 */ - --typography-label-medium__letter-spacing: 0.03571428571em; /* 0.5 / 14 = 0.03571428571 */ + --typography-label-medium__line-height: 1.25rem; + --typography-label-medium__letter-spacing: 0.03125rem; --typography-label-medium__font-weight: 600; --typography-body-small__font-family: inherit; --typography-body-small__font-size: 0.75rem; - --typography-body-small__line-height: 1.33333333333em; /* 16 / 12 = 1.33333333333 */ - --typography-body-small__letter-spacing: 0.03333333333em; /* 0.4 / 12 = 0.03333333333 */ + --typography-body-small__line-height: 1rem; + --typography-body-small__letter-spacing: 0.025rem; --typography-body-small__font-weight: 500; --typography-body-medium__font-family: inherit; --typography-body-medium__font-size: 0.875rem; - --typography-body-medium__line-height: 1.42857142857em; /* 20 / 14 = 1.42857142857 */ - --typography-body-medium__letter-spacing: 0.01785714285em; /* 0.25 / 14 = 0.01785714285 */ + --typography-body-medium__line-height: 1.25rem; + --typography-body-medium__letter-spacing: 0.015625rem; --typography-body-medium__font-weight: 500; --typography-body-large__font-family: inherit; --typography-body-large__font-size: 1rem; - --typography-body-large__line-height: 1.5em; - --typography-body-large__letter-spacing: 0.03125em; + --typography-body-large__line-height: 1.5rem; + --typography-body-large__letter-spacing: 0.03125rem; --typography-body-large__font-weight: 500; } diff --git a/authui/src/authflowv2/components/checkbox.css b/authui/src/authflowv2/components/checkbox.css index d96acb1066..994681e302 100644 --- a/authui/src/authflowv2/components/checkbox.css +++ b/authui/src/authflowv2/components/checkbox.css @@ -1,6 +1,6 @@ @layer components { :root { - --checkbox__size: 1.125em; + --checkbox__size: 1.125rem; --checkbox__border-radius: 0.25em; --checkbox__ring-width: 1.5px; --checkbox__ring-color: var(--color-neutral-200); diff --git a/authui/src/authflowv2/components/otp-input.css b/authui/src/authflowv2/components/otp-input.css index c59e743e61..e8f73fd172 100644 --- a/authui/src/authflowv2/components/otp-input.css +++ b/authui/src/authflowv2/components/otp-input.css @@ -11,8 +11,8 @@ --otp-input__digit-ring-width--focus: 1.5px; --otp-input__digit-ring-width--error: 1.5px; --otp-input__digit-border-radius: var(--border-radius-rounded-large); - --otp-input__digit-width: 2.5em; - --otp-input__digit-height: 2.75em; + --otp-input__digit-width: 2.5rem; + --otp-input__digit-height: 2.75rem; /* Not actually using css-masks features, ignoring stylelint false positive */ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ diff --git a/authui/src/authflowv2/components/password-policy.css b/authui/src/authflowv2/components/password-policy.css index ab3f73a00e..cdaf1c27ef 100644 --- a/authui/src/authflowv2/components/password-policy.css +++ b/authui/src/authflowv2/components/password-policy.css @@ -44,6 +44,6 @@ } .password-policy__icon { - font-size: 1.14285714286em; + font-size: 1rem; } } diff --git a/authui/src/authflowv2/components/phone-input.css b/authui/src/authflowv2/components/phone-input.css index 2b43ee7622..6d25b17aac 100644 --- a/authui/src/authflowv2/components/phone-input.css +++ b/authui/src/authflowv2/components/phone-input.css @@ -63,7 +63,7 @@ .phone-input__country-flag { @apply inline-block align-middle ltr:mr-1 rtl:ml-1; - height: 1em; - width: 1em; + height: 1rem; + width: 1rem; } } diff --git a/authui/src/authflowv2/components/select.css b/authui/src/authflowv2/components/select.css index 119965e365..ddbce37403 100644 --- a/authui/src/authflowv2/components/select.css +++ b/authui/src/authflowv2/components/select.css @@ -75,8 +75,8 @@ --select__empty-font-weight: var(--typography-body-large-font-weight); @media (min-width: theme("screens.tablet")) { - --select__options-height: 18em; - --select__dropdown-width: 21.5625em; + --select__options-height: 18rem; + --select__dropdown-width: 21.5625rem; } } From cca65ebd362f4bdbcc934200eb84c143c102baba Mon Sep 17 00:00:00 2001 From: YinYin Chiu Date: Fri, 23 Aug 2024 15:52:49 +0800 Subject: [PATCH 2/6] Replace `--typography-title-large` with `--typography-headline-small` Previously used wrong token --- authui/src/authflowv2/base.css | 6 ++++++ authui/src/authflowv2/components/dialog.css | 14 +++++++------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/authui/src/authflowv2/base.css b/authui/src/authflowv2/base.css index 40bf225825..fc3c066fbc 100644 --- a/authui/src/authflowv2/base.css +++ b/authui/src/authflowv2/base.css @@ -124,6 +124,12 @@ /* Typography */ :root { + --typography-headline-small__font-family: inherit; + --typography-headline-small__font-size: 1.5rem; + --typography-headline-small__line-height: 2rem; + --typography-headline-small__letter-spacing: 0; + --typography-headline-small__font-weight: 700; + --typography-headline-medium__font-family: inherit; --typography-headline-medium__font-size: 1.75rem; --typography-headline-medium__line-height: 2.125rem; diff --git a/authui/src/authflowv2/components/dialog.css b/authui/src/authflowv2/components/dialog.css index 98c053b256..6ca0348612 100644 --- a/authui/src/authflowv2/components/dialog.css +++ b/authui/src/authflowv2/components/dialog.css @@ -6,13 +6,13 @@ --dialog-fade-animation-duration: 0.3s; --dialog-slide-animation-duration: 0.3s; - --dialog-title__font-family: var(--typography-title-large__font-family); - --dialog-title__font-size: var(--typography-title-large__font-size); - --dialog-title__line-height: var(--typography-title-large__line-height); + --dialog-title__font-family: var(--typography-headline-small__font-family); + --dialog-title__font-size: var(--typography-headline-small__font-size); + --dialog-title__line-height: var(--typography-headline-small__line-height); --dialog-title__letter-spacing: var( - --typography-title-large__letter-spacing + --typography-headline-small__letter-spacing ); - --dialog-title__font-weight: var(--typography-title-large__font-weight); + --dialog-title__font-weight: var(--typography-headline-small__font-weight); --dialog-title__text-color: var(--color-neutral-700); --dialog-description__font-family: var( @@ -124,7 +124,7 @@ } .close-btn { - /* close button icon distance to top/right edge = 21px + /* close button icon distance to top/right edge = 21px * close button icon size = 14px * close button button size = 44px * Actual distance = [(14 / 2) + 21] - (44 / 2) = 6px @@ -153,7 +153,7 @@ } .close-btn { - /* close button icon distance to top/right edge = 25px + /* close button icon distance to top/right edge = 25px * close button icon size = 14px * close button button size = 44px * Actual distance = [(14 / 2) + 25] - (44 / 2) = 10px From 17648d404f42308caeccec380759605a0dc6533b Mon Sep 17 00:00:00 2001 From: YinYin Chiu Date: Fri, 23 Aug 2024 15:53:34 +0800 Subject: [PATCH 3/6] Align `--typography-title-large` configurations with design --- authui/src/authflowv2/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/authui/src/authflowv2/base.css b/authui/src/authflowv2/base.css index fc3c066fbc..aadf5d9e05 100644 --- a/authui/src/authflowv2/base.css +++ b/authui/src/authflowv2/base.css @@ -144,7 +144,7 @@ --typography-title-large__font-family: inherit; --typography-title-large__font-size: 1.5rem; - --typography-title-large__line-height: 2rem; + --typography-title-large__line-height: 1.75rem; --typography-title-large__letter-spacing: 0; --typography-title-large__font-weight: 700; From eaab3678379e74a5c5b9ada5c766efa4da2b1d5b Mon Sep 17 00:00:00 2001 From: Louis Chan Date: Fri, 23 Aug 2024 18:29:34 +0800 Subject: [PATCH 4/6] Set country flag to be 24px x 24px --- authui/src/authflowv2/components/phone-input.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/authui/src/authflowv2/components/phone-input.css b/authui/src/authflowv2/components/phone-input.css index 6d25b17aac..c6d218f3f1 100644 --- a/authui/src/authflowv2/components/phone-input.css +++ b/authui/src/authflowv2/components/phone-input.css @@ -62,8 +62,6 @@ } .phone-input__country-flag { - @apply inline-block align-middle ltr:mr-1 rtl:ml-1; - height: 1rem; - width: 1rem; + @apply inline-block align-middle ltr:mr-1 rtl:ml-1 w-6 h-6; } } From 46ccc6b7a7d6e6f30d3cec21f9211cad1c06349b Mon Sep 17 00:00:00 2001 From: Louis Chan Date: Fri, 23 Aug 2024 18:29:59 +0800 Subject: [PATCH 5/6] Make dropdown visually align with the input control group --- authui/src/authflowv2/components/select.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/authui/src/authflowv2/components/select.css b/authui/src/authflowv2/components/select.css index ddbce37403..b57972798f 100644 --- a/authui/src/authflowv2/components/select.css +++ b/authui/src/authflowv2/components/select.css @@ -76,7 +76,7 @@ @media (min-width: theme("screens.tablet")) { --select__options-height: 18rem; - --select__dropdown-width: 21.5625rem; + --select__dropdown-width: 22rem; } } From f44940edd0da7319fa6610a4ca844afcc5f63167 Mon Sep 17 00:00:00 2001 From: Louis Chan Date: Fri, 23 Aug 2024 18:31:51 +0800 Subject: [PATCH 6/6] Rename --select__options-height to --select__options-max-height --- authui/src/authflowv2/components/select.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/authui/src/authflowv2/components/select.css b/authui/src/authflowv2/components/select.css index b57972798f..99c3b6404b 100644 --- a/authui/src/authflowv2/components/select.css +++ b/authui/src/authflowv2/components/select.css @@ -55,7 +55,7 @@ var(--select__search-input-font-size) * 1.5 ); - --select__options-height: 100%; + --select__options-max-height: 100%; --select__options-py: 1em; --select__options-px: calc(var(--select__font-size) * 1); --select__options-space-y: 0.5em; @@ -75,7 +75,7 @@ --select__empty-font-weight: var(--typography-body-large-font-weight); @media (min-width: theme("screens.tablet")) { - --select__options-height: 18rem; + --select__options-max-height: 18rem; --select__dropdown-width: 22rem; } } @@ -223,7 +223,7 @@ @apply flex-col; padding: var(--select__options-py) var(--select__options-px); - max-height: var(--select__options-height); + max-height: var(--select__options-max-height); overflow-y: auto; @apply space-y-[var(--select\_\_options\_\_space-y)];