From 75fb1a1c0849fc06fa00974e5ad155b14be1db9b Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Fri, 21 Oct 2022 11:26:48 +0800
Subject: [PATCH 1/5] refactor(ui): move preview related style to AppContent

move preview related style to AppContent
---
 packages/ui/src/App.module.scss                      |  9 ---------
 .../ui/src/containers/AppContent/index.module.scss   | 12 ++++++++++++
 packages/ui/src/hooks/use-preview.ts                 |  4 ++--
 3 files changed, 14 insertions(+), 11 deletions(-)
 delete mode 100644 packages/ui/src/App.module.scss

diff --git a/packages/ui/src/App.module.scss b/packages/ui/src/App.module.scss
deleted file mode 100644
index d6bb7c22a..000000000
--- a/packages/ui/src/App.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.preview {
-  pointer-events: none;
-  user-select: none;
-
-  main {
-    pointer-events: none;
-    user-select: none;
-  }
-}
diff --git a/packages/ui/src/containers/AppContent/index.module.scss b/packages/ui/src/containers/AppContent/index.module.scss
index b7be87a8d..7e09adf75 100644
--- a/packages/ui/src/containers/AppContent/index.module.scss
+++ b/packages/ui/src/containers/AppContent/index.module.scss
@@ -18,6 +18,18 @@
   --color-dark-brand-pressed: #5d36ff;
 }
 
+// Disable User Interaction Under Preview
+.preview {
+  pointer-events: none;
+  user-select: none;
+
+  main {
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+
 body {
   background-color: var(--color-base);
   -webkit-font-smoothing: antialiased;
diff --git a/packages/ui/src/hooks/use-preview.ts b/packages/ui/src/hooks/use-preview.ts
index 6cb656f67..cd5c9fc53 100644
--- a/packages/ui/src/hooks/use-preview.ts
+++ b/packages/ui/src/hooks/use-preview.ts
@@ -2,8 +2,8 @@ import { ConnectorPlatform } from '@logto/schemas';
 import { conditionalString } from '@silverhand/essentials';
 import { useEffect, useState } from 'react';
 
-import * as styles from '@/App.module.scss';
-import type { Context } from '@/hooks/use-page-context';
+import * as styles from '@/containers/AppContent/index.module.scss';
+import { Context } from '@/hooks/use-page-context';
 import initI18n from '@/i18n/init';
 import { changeLanguage } from '@/i18n/utils';
 import type { SignInExperienceSettings, PreviewConfig } from '@/types';

From 1287a806b0d5f66b45cf5701baa5e1b8ac970827 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Sun, 23 Oct 2022 14:39:42 +0800
Subject: [PATCH 2/5] refactor(ui): refactor ui style

refactor ui style
---
 .../BrandingHeader/index.module.scss          | 14 +--
 .../components/Button/IconButton.module.scss  | 12 +--
 .../Button/SocialIconButton.module.scss       | 26 +----
 .../src/components/Button/index.module.scss   | 94 +++++++++----------
 .../src/components/Checkbox/index.module.scss |  4 +-
 .../ConfirmModal/Acmodal.module.scss          | 11 +--
 .../ConfirmModal/MobileModal.module.scss      |  8 +-
 .../src/components/Divider/index.module.scss  |  6 +-
 .../src/components/Drawer/index.module.scss   |  4 +-
 .../Dropdown/DropdownItem.module.scss         |  6 +-
 .../src/components/Dropdown/index.module.scss |  6 +-
 .../components/ErrorMessage/index.module.scss |  4 +-
 .../ui/src/components/Input/index.module.scss | 37 +++-----
 .../components/Input/phoneInput.module.scss   | 23 +++--
 .../components/LoadingLayer/index.module.scss | 14 +--
 .../src/components/NavBar/index.module.scss   |  8 +-
 .../components/Notification/index.module.scss | 17 ++--
 .../src/components/Passcode/index.module.scss | 28 ++----
 .../components/TermsOfUse/index.module.scss   |  2 +-
 .../src/components/TextLink/index.module.scss | 22 ++---
 .../ui/src/components/Toast/index.module.scss |  9 +-
 .../containers/AppContent/index.module.scss   | 84 +++++++----------
 .../ui/src/containers/AppContent/index.tsx    |  2 +-
 .../PasscodeValidation/index.module.scss      | 12 +--
 .../SignInMethodsLink/index.module.scss       |  2 +-
 .../SocialLanding/index.module.scss           |  3 +-
 .../SocialSignInIconList/index.module.scss    |  2 +-
 .../ui/src/pages/ErrorPage/index.module.scss  |  3 +-
 .../pages/ForgotPassword/index.module.scss    | 13 +--
 .../ui/src/pages/Passcode/index.module.scss   | 13 +--
 .../ui/src/pages/Register/index.module.scss   |  8 +-
 .../src/pages/ResetPassword/index.module.scss | 10 +-
 .../pages/SecondarySignIn/index.module.scss   |  7 +-
 .../pages/SocialRegister/index.module.scss    |  3 +-
 packages/ui/src/scss/_colors.scss             | 88 +++++++++--------
 packages/ui/src/scss/_underscore.scss         | 13 ++-
 packages/ui/src/scss/modal.module.scss        |  2 +-
 packages/ui/src/scss/normalized.scss          |  2 +-
 38 files changed, 274 insertions(+), 348 deletions(-)

diff --git a/packages/ui/src/components/BrandingHeader/index.module.scss b/packages/ui/src/components/BrandingHeader/index.module.scss
index 4115ea0a1..8ff312b73 100644
--- a/packages/ui/src/components/BrandingHeader/index.module.scss
+++ b/packages/ui/src/components/BrandingHeader/index.module.scss
@@ -13,6 +13,12 @@ $logo-height: 60px;
   @include _.image-align-center;
 }
 
+.headline {
+  text-align: center;
+  color: var(--color-type-primary);
+  @include _.multi-line-ellipsis(2);
+}
+
 :global(body.mobile) {
   .container {
     height: 15vh;
@@ -25,8 +31,7 @@ $logo-height: 60px;
   }
 
   .headline {
-    font: var(--font-body);
-    color: var(--color-text);
+    font: var(--font-title-1);
   }
 }
 
@@ -40,9 +45,6 @@ $logo-height: 60px;
   }
 
   .headline {
-    font: var(--font-title-small);
-    color: var(--color-text);
-    text-align: center;
-    @include _.multi-line-ellipsis(2);
+    font: var(--font-title-2);
   }
 }
diff --git a/packages/ui/src/components/Button/IconButton.module.scss b/packages/ui/src/components/Button/IconButton.module.scss
index 68fae45f7..8f55f971b 100644
--- a/packages/ui/src/components/Button/IconButton.module.scss
+++ b/packages/ui/src/components/Button/IconButton.module.scss
@@ -11,19 +11,19 @@
   cursor: pointer;
 
   > svg {
-    color: var(--color-icon);
+    color: var(--color-type-secondary);
+  }
+
+  &:active {
+    background: var(--color-overlay-neutral-pressed);
   }
 }
 
 
 :global(body.desktop) {
   .iconButton {
-    &:active {
-      background: var(--color-pressed);
-    }
-
     &:hover:not(:active) {
-      background: var(--color-hover);
+      background: var(--color-overlay-neutral-hover);
     }
   }
 }
diff --git a/packages/ui/src/components/Button/SocialIconButton.module.scss b/packages/ui/src/components/Button/SocialIconButton.module.scss
index ab0ccb15d..29601309a 100644
--- a/packages/ui/src/components/Button/SocialIconButton.module.scss
+++ b/packages/ui/src/components/Button/SocialIconButton.module.scss
@@ -3,7 +3,7 @@
 .socialButton {
   border-radius: 50%;
   @include _.flex-column;
-  background: var(--color-layer);
+  background: var(--color-bg-layer-2);
   border: none;
   width: 40px;
   height: 40px;
@@ -11,7 +11,7 @@
 }
 
 .inverse {
-  background: var(--color-inverse-social-bg);
+  background: var(--color-type-primary);
 }
 
 .icon {
@@ -20,25 +20,3 @@
   height: 24px;
   overflow: hidden;
 }
-
-:global(body.desktop) {
-  .socialButton {
-    &:not(.inverse):active {
-      background: var(--color-pressed);
-    }
-
-    &:not(.inverse):hover:not(:active) {
-      background: var(--color-hover);
-    }
-  }
-
-  .inverse {
-    &:active {
-      background: var(--color-inverse-social-pressed);
-    }
-
-    &:hover:not(:active) {
-      background: var(--color-inverse-social-hover);
-    }
-  }
-}
diff --git a/packages/ui/src/components/Button/index.module.scss b/packages/ui/src/components/Button/index.module.scss
index 99b649d18..18791f966 100644
--- a/packages/ui/src/components/Button/index.module.scss
+++ b/packages/ui/src/components/Button/index.module.scss
@@ -6,8 +6,8 @@
   height: 44px;
   padding: 0 _.unit(4);
   border-radius: var(--radius);
-  font: var(--font-body-bold);
   cursor: pointer;
+  font: var(--font-label-1);
   -webkit-appearance: none;
   -webkit-tap-highlight-color: transparent;
   transition: background 0.2s ease-in-out;
@@ -20,89 +20,85 @@
 }
 
 .small {
-  min-width: 50px;
+  min-width: 85px;
 }
 
 .primary {
   border: none;
-  background: var(--color-primary);
-  color: var(--color-primary-button-text);
+  background: var(--color-brand-default);
+  color: var(--color-static-white);
+
+  &.disabled,
+  &:disabled {
+    background: var(--color-bg-state-disabled);
+    color: var(--color-type-disable);
+  }
+
+  &:active {
+    background: var(--color-brand-pressed);
+  }
 }
 
 .secondary {
-  border: _.border(var(--color-border));
+  border: _.border(var(--color-line-border));
   background: transparent;
-  color: var(--color-text);
+  color: var(--color-type-primary);
 
-  &.disabled {
-    border-color: var(--color-border);
-    color: var(--color-text-disabled);
+  &.disabled,
+  &:disabled {
+    border-color: var(--color-type-disable);
+    color: var(--color-type-disable);
+  }
+
+  &:active {
+    background: var(--color-overlay-neutral-pressed);
   }
 }
 
 .outline {
-  border: _.border(var(--color-primary));
+  border: _.border(var(--color-brand-default));
   background: transparent;
-  color: var(--color-primary);
+  color: var(--color-type-link);
 
-  &.disabled {
-    border-color: var(--color-border);
-    color: var(--color-text-disabled);
-  }
-
-  &:focus-visible {
-    outline: 3px solid var(--color-focused-variant);
+  &.disabled,
+  &:disabled {
+    border-color: var(--color-type-disable);
+    color: var(--color-type-disable);
   }
 
   &:active {
-    background: var(--color-pressed-variant);
-  }
-
-  &:not(:disabled):not(:active):hover {
-    background: var(--color-hover-variant);
-  }
-}
-
-:global(body.mobile) {
-  .primary {
-    &.disabled {
-      background: var(--color-layer);
-      color: var(--color-text-disabled);
-    }
+    background: var(--color-overlay-brand-pressed);
   }
 }
 
 :global(body.desktop) {
   .primary {
-    &.disabled {
-      background: var(--color-inverse-on-surface);
-      color: var(--color-text-disabled);
-    }
-
     &:focus-visible {
-      outline: 3px solid var(--color-focused-variant);
-    }
-
-    &:active {
-      background: var(--color-primary-pressed);
+      outline: 3px solid var(--color-overlay-brand-focused);
     }
 
     &:not(:disabled):not(:active):hover {
-      background: var(--color-primary-hover);
+      background: var(--color-brand-hover);
     }
   }
 
   .secondary {
     &:focus-visible {
-      outline: 3px solid var(--color-focused);
-    }
-
-    &:active {
-      background: var(--color-pressed);
+      outline: 3px solid var(--color-overlay-neutral-focused);
     }
 
     &:not(:disabled):not(:active):hover {
-      background: var(--color-hover);
+      background: var(--color-overlay-neutral-hover);
+    }
+  }
+
+  .outline {
+    &:focus-visible {
+      outline: 3px solid var(--color-overlay-brand-focused);
+    }
+
+    &:not(:disabled):not(:active):hover {
+      background: var(--color-overlay-brand-hover);
     }
   }
 }
diff --git a/packages/ui/src/components/Checkbox/index.module.scss b/packages/ui/src/components/Checkbox/index.module.scss
index d27a78654..944a8e94c 100644
--- a/packages/ui/src/components/Checkbox/index.module.scss
+++ b/packages/ui/src/components/Checkbox/index.module.scss
@@ -12,11 +12,11 @@
       display: none;
 
       &:nth-child(1) {
-        color: var(--color-icon);
+        color: var(--color-type-secondary);
       }
 
       &:nth-child(2) {
-        color: var(--color-primary);
+        color: var(--color-brand-default);
       }
     }
   }
diff --git a/packages/ui/src/components/ConfirmModal/Acmodal.module.scss b/packages/ui/src/components/ConfirmModal/Acmodal.module.scss
index 2512a8e9b..f4afe8f07 100644
--- a/packages/ui/src/components/ConfirmModal/Acmodal.module.scss
+++ b/packages/ui/src/components/ConfirmModal/Acmodal.module.scss
@@ -14,15 +14,14 @@
 }
 
 .container {
-  background: var(--color-dialogue);
-  border: _.border(var(--color-divider));
+  background: var(--color-bg-float-overlay);
   border-radius: 16px;
   padding: _.unit(6);
 }
 
 .header {
-  font: var(--font-header);
-  color: var(--color-text);
+  font: var(--font-title-1);
+  color: var(--color-type-primary);
   @include _.flex-row;
   justify-content: space-between;
   margin-bottom: _.unit(4);
@@ -34,8 +33,8 @@
 }
 
 .content {
-  font: var(--font-body);
-  color: var(--color-text);
+  font: var(--font-body-2);
+  color: var(--color-type-primary);
   margin-bottom: _.unit(6);
 }
 
diff --git a/packages/ui/src/components/ConfirmModal/MobileModal.module.scss b/packages/ui/src/components/ConfirmModal/MobileModal.module.scss
index 328f660fa..db354e149 100644
--- a/packages/ui/src/components/ConfirmModal/MobileModal.module.scss
+++ b/packages/ui/src/components/ConfirmModal/MobileModal.module.scss
@@ -15,14 +15,14 @@
 
 .container {
   padding: _.unit(5);
-  background: var(--color-dialogue);
+  background: var(--color-bg-body-overlay);
   border-radius: var(--radius);
 }
 
 .content {
   text-align: center;
-  font: var(--font-body);
-  color: var(--color-text);
+  font: var(--font-body-1);
+  color: var(--color-type-primary);
 }
 
 .footer {
@@ -59,7 +59,7 @@
 
   .footer {
     margin-top: 0;
-    border-top: 1px solid var(--color-divider);
+    border-top: 1px solid var(--color-line-divider);
     padding: _.unit(5);
   }
 }
diff --git a/packages/ui/src/components/Divider/index.module.scss b/packages/ui/src/components/Divider/index.module.scss
index c4ecb4d99..3a31bc8d2 100644
--- a/packages/ui/src/components/Divider/index.module.scss
+++ b/packages/ui/src/components/Divider/index.module.scss
@@ -3,13 +3,13 @@
 
 .divider {
   @include _.flex-row;
-  font: var(--font-body);
-  color: var(--color-caption);
+  font: var(--font-body-2);
+  color: var(--color-type-secondary);
 
   .line {
     flex: 1;
     height: 1px;
-    background: var(--color-divider);
+    background: var(--color-line-divider);
 
     &:first-child {
       margin-right: _.unit(4);
diff --git a/packages/ui/src/components/Drawer/index.module.scss b/packages/ui/src/components/Drawer/index.module.scss
index ee30c6384..714950338 100644
--- a/packages/ui/src/components/Drawer/index.module.scss
+++ b/packages/ui/src/components/Drawer/index.module.scss
@@ -13,7 +13,7 @@
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
   padding: _.unit(5) _.unit(5) 0;
-  background: var(--color-dialogue);
+  background: var(--color-bg-body-overlay);
   max-height: 411px;
   @include _.flex-column(stretch, normal);
 }
@@ -25,7 +25,7 @@
   margin-bottom: _.unit(4);
 
   svg {
-    color: var(--color-icon);
+    color: var(--color-type-secondary);
     width: 20px;
     height: 20px;
   }
diff --git a/packages/ui/src/components/Dropdown/DropdownItem.module.scss b/packages/ui/src/components/Dropdown/DropdownItem.module.scss
index 1f8daf934..5ad719910 100644
--- a/packages/ui/src/components/Dropdown/DropdownItem.module.scss
+++ b/packages/ui/src/components/Dropdown/DropdownItem.module.scss
@@ -4,13 +4,13 @@
   padding: _.unit(1.5) _.unit(2);
   border-radius: var(--radius);
   list-style: none;
-  font: var(--font-body);
-  color: var(--color-text);
+  font: var(--font-body-2);
+  color: var(--color-type-primary);
   cursor: pointer;
   @include _.flex-row;
   overflow: hidden;
 
   &:hover {
-    background: var(--color-hover);
+    background: var(--color-overlay-neutral-hover);
   }
 }
diff --git a/packages/ui/src/components/Dropdown/index.module.scss b/packages/ui/src/components/Dropdown/index.module.scss
index 9b5d6c654..e25c972b1 100644
--- a/packages/ui/src/components/Dropdown/index.module.scss
+++ b/packages/ui/src/components/Dropdown/index.module.scss
@@ -1,10 +1,10 @@
 @use '@/scss/underscore' as _;
 
 .content {
-  background: var(--color-dialogue);
-  box-shadow: var(--shadow-2);
+  background: var(--color-bg-float-overlay);
+  box-shadow: var(--color-shadow);
   border-radius: var(--radius);
-  border: _.border(var(--color-divider));
+  border: _.border(var(--color-line-divider));
 
   &:focus {
     outline: none;
diff --git a/packages/ui/src/components/ErrorMessage/index.module.scss b/packages/ui/src/components/ErrorMessage/index.module.scss
index d9af798d7..fa6829667 100644
--- a/packages/ui/src/components/ErrorMessage/index.module.scss
+++ b/packages/ui/src/components/ErrorMessage/index.module.scss
@@ -1,6 +1,6 @@
 @use '@/scss/underscore' as _;
 
 .error {
-  font: var(--font-caption);
-  color: var(--color-error);
+  font: var(--font-body-2);
+  color: var(--color-danger-default);
 }
diff --git a/packages/ui/src/components/Input/index.module.scss b/packages/ui/src/components/Input/index.module.scss
index 0bbe572e7..44fa9c63e 100644
--- a/packages/ui/src/components/Input/index.module.scss
+++ b/packages/ui/src/components/Input/index.module.scss
@@ -3,9 +3,8 @@
 .wrapper {
   position: relative;
   @include _.flex-row;
-  border: _.border();
+  border: _.border(var(--color-line-border));
   border-radius: var(--radius);
-  background: var(--color-layer);
   // fix in safari input field line-height issue
   height: 44px;
   overflow: hidden;
@@ -19,7 +18,7 @@
     top: 50%;
     transform: translateY(-50%);
     display: none;
-    color: var(--color-icon);
+    color: var(--color-type-secondary);
     width: 24px;
     height: 24px;
   }
@@ -28,25 +27,25 @@
     padding: 0 _.unit(4);
     flex: 1;
     background: none;
-    caret-color: var(--color-primary);
-    font: var(--font-body-bold);
-    color: var(--color-text);
+    caret-color: var(--color-brand-default);
+    font: var(--font-body-1);
+    color: var(--color-type-primary);
     align-self: stretch;
 
     &::placeholder {
-      color: var(--color-caption);
+      color: var(--color-type-secondary);
     }
 
     // Overwrite webkit auto-fill style
     &:-webkit-autofill {
-      box-shadow: 0 0 0 30px var(--color-layer) inset;
-      -webkit-text-fill-color: var(--color-text);
+      box-shadow: 0 0 0 30px var(--color-bg-body) inset;
+      -webkit-text-fill-color: var(--color-type-primary);
       transition: none;
     }
   }
 
   &:focus-within {
-    border: _.border(var(--color-primary));
+    border: _.border(var(--color-brand-default));
 
     .actionButton {
       display: block;
@@ -59,7 +58,7 @@
   }
 
   &.error {
-    border: _.border(var(--color-error));
+    border: _.border(var(--color-danger-default));
   }
 }
 
@@ -69,19 +68,11 @@
 
 :global(body.desktop) {
   .wrapper {
-    border: _.border(var(--color-border));
     border-radius: 6px;
     outline: 3px solid transparent;
-    background: var(--color-surface);
 
     input {
-      font: var(--font-body);
-
-      // Overwrite webkit auto-fill style
-      &:-webkit-autofill {
-        box-shadow: 0 0 0 30px var(--color-surface) inset;
-        -webkit-text-fill-color: var(--color-text);
-      }
+      font: var(--font-body-2);
     }
 
     .actionButton {
@@ -90,12 +81,12 @@
     }
 
     &.error {
-      border: _.border(var(--color-error));
+      border: _.border(var(--color-danger-default));
     }
 
     &:focus-within {
-      border-color: var(--color-primary);
-      outline-color: var(--color-focused-variant);
+      border: _.border(var(--color-brand-default));
+      outline-color: var(--color-overlay-brand-focused);
     }
   }
 }
diff --git a/packages/ui/src/components/Input/phoneInput.module.scss b/packages/ui/src/components/Input/phoneInput.module.scss
index e7b142afc..c522e0a21 100644
--- a/packages/ui/src/components/Input/phoneInput.module.scss
+++ b/packages/ui/src/components/Input/phoneInput.module.scss
@@ -1,8 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .countryCodeSelector {
-  color: var(--color-text);
-  font: var(--font-body);
+  color: var(--color-type-primary);
   border: none;
   background: none;
   width: auto;
@@ -20,10 +19,6 @@
     width: 100%;
     height: 100%;
     font-size: 0;
-
-    option {
-      font: var(--font-body);
-    }
   }
 
   + input {
@@ -33,8 +28,14 @@
 
 :global(body.mobile) {
   .countryCodeSelector {
+    font: var(--font-label-1);
+
+    > select option {
+      font: var(--font-label-1);
+    }
+
     > svg {
-      color: var(--color-primary);
+      color: var(--color-brand-default);
       margin-left: _.unit(1);
       width: 16px;
       height: 16px;
@@ -44,8 +45,14 @@
 
 :global(body.desktop) {
   .countryCodeSelector {
+    font: var(--font-body-2);
+
+    > select option {
+      font: var(--font-body-2);
+    }
+
     > svg {
-      color: var(--color-icon);
+      color: var(--color-type-secondary);
       margin-left: _.unit(2);
       width: 20px;
       height: 20px;
diff --git a/packages/ui/src/components/LoadingLayer/index.module.scss b/packages/ui/src/components/LoadingLayer/index.module.scss
index d0dad612a..1e554f5f4 100644
--- a/packages/ui/src/components/LoadingLayer/index.module.scss
+++ b/packages/ui/src/components/LoadingLayer/index.module.scss
@@ -6,13 +6,13 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--color-overlay);
+  background-color: var(--color-bg-mask);
   @include _.flex-column;
   z-index: 300;
 }
 
 .loadingIcon {
-  color: var(--color-loading-icon);
+  color: var(--color-type-primary);
   animation: rotating 1s steps(12, end) infinite;
 }
 
@@ -20,11 +20,11 @@
   width: 60px;
   height: 60px;
   border-radius: var(--radius);
-  background-color: var(--color-toast);
+  background-color: var(--color-bg-toast);
   @include _.flex-column;
 
   .loadingIcon {
-    color: var(--color-loading-icon-light);
+    color: var(--color-static-dark-type-primary);
   }
 }
 
@@ -37,9 +37,3 @@
     transform: rotate(360deg);
   }
 }
-
-:global(body.desktop) {
-  .container {
-    border: _.border(var(--color-toast-border));
-  }
-}
diff --git a/packages/ui/src/components/NavBar/index.module.scss b/packages/ui/src/components/NavBar/index.module.scss
index 7c5d1c215..16a6d5273 100644
--- a/packages/ui/src/components/NavBar/index.module.scss
+++ b/packages/ui/src/components/NavBar/index.module.scss
@@ -7,13 +7,14 @@
   justify-content: center;
   padding: _.unit(3) _.unit(10);
   position: relative;
+  color: var(--color-type-primary);
 
   > svg {
     fill: current-color;
   }
 
   .title {
-    font: var(--font-body-bold);
+    font: var(--font-title-3);
   }
 }
 
@@ -22,8 +23,7 @@
   left: _.unit(-2);
   top: 50%;
   transform: translateY(-50%);
-  color: --color-text;
-  font: var(--font-body-bold);
+  font: var(--font-label-2);
   @include _.flex-row;
   cursor: pointer;
 }
@@ -36,8 +36,6 @@
 
 :global(body.desktop) {
   .backButton {
-    color: var(--color-primary);
-
     &:hover {
       text-decoration: underline;
     }
diff --git a/packages/ui/src/components/Notification/index.module.scss b/packages/ui/src/components/Notification/index.module.scss
index 63dcaeb93..b5322444c 100644
--- a/packages/ui/src/components/Notification/index.module.scss
+++ b/packages/ui/src/components/Notification/index.module.scss
@@ -2,13 +2,10 @@
 
 .notification {
   padding: _.unit(3) _.unit(4);
-  font: var(--font-body);
-  color: var(--color-text);
-  background: var(--color-surface-variant);
-  border: _.border(var(--color-border-variant));
-  border-radius: var(--radius);
+  font: var(--font-body-2);
+  color: var(--color-type-primary);
+  background: var(--color-alert-99);
   margin: 0 auto _.unit(2);
-  box-shadow: var(--shadow-1);
   @include _.flex_row;
 
   &:focus-visible {
@@ -17,7 +14,7 @@
 }
 
 .icon {
-  color: var(--color-outline);
+  color: var(--color-alert-70);
   width: 20px;
   height: 20px;
   margin-right: _.unit(3);
@@ -35,9 +32,13 @@
 }
 
 :global(body.desktop) {
+  .notification {
+    border-radius: var(--radius);
+  }
+
   .link {
     &:hover {
-      color: var(--color-primary);
+      color: var(--color-brand-default);
     }
   }
 }
diff --git a/packages/ui/src/components/Passcode/index.module.scss b/packages/ui/src/components/Passcode/index.module.scss
index ae3a79b51..67a286d43 100644
--- a/packages/ui/src/components/Passcode/index.module.scss
+++ b/packages/ui/src/components/Passcode/index.module.scss
@@ -8,19 +8,20 @@
     width: 44px;
     height: 44px;
     border-radius: _.unit(2);
-    border: _.border();
+    border: _.border(var(--color-line-border));
+    background: transparent;
     text-align: center;
-    font: var(--font-body);
-    color: var(--color-text);
-    caret-color: var(--color-primary);
+    font: var(--font-label-1);
+    color: var(--color-type-primary);
+    caret-color: var(--color-brand-default);
 
     &:focus {
-      border: _.border(var(--color-primary));
+      border: _.border(var(--color-brand-default));
       outline: none;
     }
 
     &::placeholder {
-      color: var(--color-caption);
+      color: var(--color-type-secondary);
     }
   }
 }
@@ -29,24 +30,15 @@
   margin-top: _.unit(2);
 }
 
-:global(body.mobile) {
-  .passcode {
-    input {
-      background: var(--color-layer);
-    }
-  }
-}
-
 :global(body.desktop) {
   .passcode {
     input {
-      border: _.border(var(--color-border));
+      font: var(--font-body-2);
       outline: 3px solid transparent;
-      background: transparent;
 
       &:focus {
-        border: _.border(var(--color-primary));
-        outline-color: var(--color-focused-variant);
+        border: _.border(var(--color-brand-default));
+        outline-color: var(--color-overlay-brand-focused);
       }
     }
   }
diff --git a/packages/ui/src/components/TermsOfUse/index.module.scss b/packages/ui/src/components/TermsOfUse/index.module.scss
index 79dd0f41b..40448db62 100644
--- a/packages/ui/src/components/TermsOfUse/index.module.scss
+++ b/packages/ui/src/components/TermsOfUse/index.module.scss
@@ -8,7 +8,7 @@
 
 .checkBox {
   margin-right: _.unit(2);
-  fill: var(--color-icon);
+  fill: var(--color-type-secondary);
 }
 
 .content {
diff --git a/packages/ui/src/components/TextLink/index.module.scss b/packages/ui/src/components/TextLink/index.module.scss
index 1f7cf3416..d8e3746c2 100644
--- a/packages/ui/src/components/TextLink/index.module.scss
+++ b/packages/ui/src/components/TextLink/index.module.scss
@@ -6,32 +6,26 @@
 
 
   &.primary {
-    color: var(--color-primary);
-    font: var(--font-body-bold);
+    color: var(--color-brand-default);
     text-decoration: none;
+    font: var(--font-label-2);
   }
 
   &.secondary {
-    color: var(--color-caption);
-    font: var(--font-body);
+    color: var(--color-type-secondary);
     text-decoration: underline;
   }
 }
 
+
 :global(body.desktop) {
   .link {
-    &.primary {
-      font: var(--font-body);
-
-      &:hover {
-        text-decoration: underline;
-      }
+    &.primary:hover {
+      text-decoration: underline;
     }
 
-    &.secondary {
-      &:hover {
-        color: var(--color-primary);
-      }
+    &.secondary:hover {
+      color: var(--color-brand-default);
     }
   }
 }
diff --git a/packages/ui/src/components/Toast/index.module.scss b/packages/ui/src/components/Toast/index.module.scss
index 7f8975b2c..39e7c4bec 100644
--- a/packages/ui/src/components/Toast/index.module.scss
+++ b/packages/ui/src/components/Toast/index.module.scss
@@ -15,11 +15,10 @@
   margin: 0 auto;
   padding: _.unit(2) _.unit(4);
   max-width: 295px;
-  font: var(--font-body);
-  color: var(--color-primary-button-text);
+  font: var(--font-body-1);
+  color: var(--color-static-white);
   border-radius: var(--radius);
-  background: var(--color-toast);
-  box-shadow: var(--shadow-2);
+  background: var(--color-bg-toast);
   text-align: center;
   word-break: break-word;
   pointer-events: auto;
@@ -44,7 +43,7 @@
 
 :global(body.desktop) {
   .toast {
-    border: _.border(var(--color-toast-border));
     padding: _.unit(3) _.unit(4);
+    box-shadow: var(--color-shadow);
   }
 }
diff --git a/packages/ui/src/containers/AppContent/index.module.scss b/packages/ui/src/containers/AppContent/index.module.scss
index 7e09adf75..06180eeae 100644
--- a/packages/ui/src/containers/AppContent/index.module.scss
+++ b/packages/ui/src/containers/AppContent/index.module.scss
@@ -1,24 +1,10 @@
 @use '@/scss/underscore' as _;
 @use '@/scss/mobile' as mobile;
 @use '@/scss/desktop' as desktop;
+@use '@/scss/colors' as colors;
+@use '@/scss/fonts' as fonts;
 
-:root {
-  --color-light-brand: #5d34f2;
-  --color-light-overlay-brand-focused: rgba(93, 52, 242, 16%);
-  --color-light-overlay-brand-hover: rgba(93, 52, 242, 8%);
-  --color-light-overlay-brand-pressed: rgba(93, 52, 242, 12%);
-  --color-light-brand-hover: #7350f4;
-  --color-light-brand-pressed: #4718f0;
-
-  --color-dark-brand: #7958ff;
-  --color-dark-overlay-brand-focused: rgba(121, 88, 255, 16%);
-  --color-dark-overlay-brand-hover: rgba(121, 88, 255, 8%);
-  --color-dark-overlay-brand-pressed: rgba(121, 88, 255, 12%);
-  --color-dark-brand-hover: #957aff;
-  --color-dark-brand-pressed: #5d36ff;
-}
-
-// Disable User Interaction Under Preview
+/* Preview Settings */
 .preview {
   pointer-events: none;
   user-select: none;
@@ -29,74 +15,76 @@
   }
 }
 
-
+/* Foundation */
 body {
-  background-color: var(--color-base);
+  --radius: 8px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
   word-break: break-word;
+  @include colors.static;
+
+  &.light {
+    @include colors.light;
+  }
+
+  &.dark {
+    @include colors.dark;
+  }
+
+  @include fonts.fonts;
 }
 
+/* Main Layout */
 .container {
   position: absolute;
   inset: 0;
-  background: var(--color-base);
-  color: var(--color-text);
-  font: var(--font-body);
+  color: var(--color-type-primary);
   overflow: auto;
   @include _.flex_column(center, normal);
 }
 
-.content {
+.main {
   @include _.flex_column;
-  background-color: var(--color-surface);
 }
 
 .placeHolder {
   flex: 1;
 }
 
-/* Foundation */
 :global(body.mobile) {
-  &.light {
-    @include mobile.colors-light-theme;
+  --max-width: 360px;
+  background: var(--color-bg-body);
+
+  .container {
+    background: var(--color-bg-body);
+    font: var(--font-body-1);
   }
 
-  &.dark {
-    @include mobile.colors-dark-theme;
-  }
-
-  @include mobile.colors-universal;
-  @include mobile.fonts;
-  @include mobile.layout;
-
-  .content {
+  .main {
     flex: 1;
     align-self: stretch;
     padding: _.unit(4) _.unit(5);
     position: relative;
+    background: var(--color-bg-body);
   }
 }
 
 :global(body.desktop) {
-  &.light {
-    @include desktop.colors-light-theme;
+  --max-width: 400px;
+  background: var(--color-bg-float-base);
+
+  .container {
+    background: var(--color-bg-float-base);
+    font: var(--font-body-2);
   }
 
-  &.dark {
-    @include desktop.colors-dark-theme;
-  }
-
-  @include desktop.colors-universal;
-  @include desktop.fonts;
-  @include desktop.layout;
-
-  .content {
+  .main {
     width: 640px;
     min-height: 640px;
     position: relative;
     padding: _.unit(6);
     border-radius: 16px;
-    box-shadow: var(--shadow-1);
+    background: var(--color-bg-float);
+    box-shadow: var(--color-shadow);
   }
 }
diff --git a/packages/ui/src/containers/AppContent/index.tsx b/packages/ui/src/containers/AppContent/index.tsx
index 55e35f46a..30e117ff4 100644
--- a/packages/ui/src/containers/AppContent/index.tsx
+++ b/packages/ui/src/containers/AppContent/index.tsx
@@ -42,7 +42,7 @@ const AppContent = ({ children }: Props) => {
     <ConfirmModalProvider>
       <div className={styles.container}>
         {platform === 'web' && <div className={styles.placeHolder} />}
-        <main className={styles.content}>{children}</main>
+        <main className={styles.main}>{children}</main>
         {platform === 'web' && <div className={styles.placeHolder} />}
         <Toast message={toast} callback={hideToast} />
       </div>
diff --git a/packages/ui/src/containers/PasscodeValidation/index.module.scss b/packages/ui/src/containers/PasscodeValidation/index.module.scss
index e80ec836f..b77c96ed0 100644
--- a/packages/ui/src/containers/PasscodeValidation/index.module.scss
+++ b/packages/ui/src/containers/PasscodeValidation/index.module.scss
@@ -15,27 +15,23 @@
     }
   }
 
-  .link {
-    font: var(--font-caption);
-  }
-
   .message {
-    font: var(--font-caption);
+    font: var(--font-body-2);
 
     > span {
-      color: var(--color-primary);
+      color: var(--color-brand-default);
     }
   }
 }
 
 :global(body.mobile) {
   .message {
-    color: var(--color-text);
+    color: var(--color-type-primary);
   }
 }
 
 :global(body.desktop) {
   .message {
-    color: var(--color-caption);
+    color: var(--color-type-secondary);
   }
 }
diff --git a/packages/ui/src/containers/SignInMethodsLink/index.module.scss b/packages/ui/src/containers/SignInMethodsLink/index.module.scss
index 2edcfe685..10bb3d6b0 100644
--- a/packages/ui/src/containers/SignInMethodsLink/index.module.scss
+++ b/packages/ui/src/containers/SignInMethodsLink/index.module.scss
@@ -10,7 +10,7 @@
     top: 50%;
     right: 0;
     transform: translateY(-50%);
-    background-color: var(--color-primary);
+    background-color: var(--color-brand-default);
     opacity: 60%;
   }
 }
diff --git a/packages/ui/src/containers/SocialLanding/index.module.scss b/packages/ui/src/containers/SocialLanding/index.module.scss
index 06b272e42..4d73fcc79 100644
--- a/packages/ui/src/containers/SocialLanding/index.module.scss
+++ b/packages/ui/src/containers/SocialLanding/index.module.scss
@@ -18,6 +18,5 @@
 
 .message {
   text-align: center;
-  font: var(--font-caption);
-  color: var(--color-caption);
+  @include _.text-hint;
 }
diff --git a/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.module.scss b/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.module.scss
index d2c69c767..d91428ee0 100644
--- a/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.module.scss
+++ b/packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.module.scss
@@ -17,7 +17,7 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: var(--color-layer);
+  background: var(--color-bg-layer-2);
 
   > svg {
     width: 24px;
diff --git a/packages/ui/src/pages/ErrorPage/index.module.scss b/packages/ui/src/pages/ErrorPage/index.module.scss
index c375f4aa5..5275b9dc0 100644
--- a/packages/ui/src/pages/ErrorPage/index.module.scss
+++ b/packages/ui/src/pages/ErrorPage/index.module.scss
@@ -35,8 +35,7 @@
 
 :global(body.desktop) {
   .title {
-    @include _.title;
-    font: var(--font-title-medium);
+    @include _.title-desktop;
     margin-bottom: _.unit(2);
   }
 
diff --git a/packages/ui/src/pages/ForgotPassword/index.module.scss b/packages/ui/src/pages/ForgotPassword/index.module.scss
index 96761fd5d..fcf505167 100644
--- a/packages/ui/src/pages/ForgotPassword/index.module.scss
+++ b/packages/ui/src/pages/ForgotPassword/index.module.scss
@@ -9,13 +9,9 @@
   margin-top: _.unit(2);
 }
 
-.title {
-  @include _.title;
-}
-
 .description {
   margin-bottom: _.unit(6);
-  color: var(--color-caption);
+  @include _.text-hint;
 }
 
 :global(body.mobile) {
@@ -24,6 +20,7 @@
   }
 
   .title {
+    @include _.title;
     margin-bottom: _.unit(6);
   }
 }
@@ -34,11 +31,7 @@
   }
 
   .title {
-    font: var(--font-title-medium);
+    @include _.title_desktop;
     margin-bottom: _.unit(4);
   }
-
-  .description {
-    font: var(--font-caption);
-  }
 }
diff --git a/packages/ui/src/pages/Passcode/index.module.scss b/packages/ui/src/pages/Passcode/index.module.scss
index 63dcfb37b..efc86343c 100644
--- a/packages/ui/src/pages/Passcode/index.module.scss
+++ b/packages/ui/src/pages/Passcode/index.module.scss
@@ -10,13 +10,12 @@
 }
 
 .title {
-  @include _.title;
   margin-bottom: _.unit(1);
 }
 
 .detail {
   margin-bottom: _.unit(6);
-  color: var(--color-caption);
+  @include _.text-hint;
 }
 
 :global(body.mobile) {
@@ -24,8 +23,8 @@
     margin-top: _.unit(2);
   }
 
-  .detail {
-    font: var(--font-body);
+  .title {
+    @include _.title;
   }
 }
 
@@ -35,10 +34,6 @@
   }
 
   .title {
-    font: var(--font-title-medium);
-  }
-
-  .detail {
-    font: var(--font-caption);
+    @include _.title-desktop;
   }
 }
diff --git a/packages/ui/src/pages/Register/index.module.scss b/packages/ui/src/pages/Register/index.module.scss
index 1730b3dd9..e38bc5c9f 100644
--- a/packages/ui/src/pages/Register/index.module.scss
+++ b/packages/ui/src/pages/Register/index.module.scss
@@ -9,17 +9,13 @@
   margin-top: _.unit(2);
 }
 
-
-.title {
-  @include _.title;
-}
-
 :global(body.mobile) {
   .container {
     margin-top: _.unit(2);
   }
 
   .title {
+    @include _.title;
     margin-bottom: _.unit(6);
   }
 }
@@ -30,7 +26,7 @@
   }
 
   .title {
-    font: var(--font-title-medium);
+    @include _.title-desktop;
     margin-bottom: _.unit(4);
   }
 }
diff --git a/packages/ui/src/pages/ResetPassword/index.module.scss b/packages/ui/src/pages/ResetPassword/index.module.scss
index 45441cfb0..481fa6708 100644
--- a/packages/ui/src/pages/ResetPassword/index.module.scss
+++ b/packages/ui/src/pages/ResetPassword/index.module.scss
@@ -9,9 +9,6 @@
   margin-top: _.unit(2);
 }
 
-.title {
-  @include _.title;
-}
 
 :global(body.mobile) {
   .container {
@@ -19,6 +16,7 @@
   }
 
   .title {
+    @include _.title;
     margin-bottom: _.unit(6);
   }
 }
@@ -29,11 +27,7 @@
   }
 
   .title {
-    font: var(--font-title-medium);
+    @include _.title-desktop;
     margin-bottom: _.unit(4);
   }
-
-  .description {
-    font: var(--font-caption);
-  }
 }
diff --git a/packages/ui/src/pages/SecondarySignIn/index.module.scss b/packages/ui/src/pages/SecondarySignIn/index.module.scss
index 6ab992417..e38bc5c9f 100644
--- a/packages/ui/src/pages/SecondarySignIn/index.module.scss
+++ b/packages/ui/src/pages/SecondarySignIn/index.module.scss
@@ -9,16 +9,13 @@
   margin-top: _.unit(2);
 }
 
-.title {
-  @include _.title;
-}
-
 :global(body.mobile) {
   .container {
     margin-top: _.unit(2);
   }
 
   .title {
+    @include _.title;
     margin-bottom: _.unit(6);
   }
 }
@@ -29,7 +26,7 @@
   }
 
   .title {
-    font: var(--font-title-medium);
+    @include _.title-desktop;
     margin-bottom: _.unit(4);
   }
 }
diff --git a/packages/ui/src/pages/SocialRegister/index.module.scss b/packages/ui/src/pages/SocialRegister/index.module.scss
index 89f5e87bc..f7ddc5851 100644
--- a/packages/ui/src/pages/SocialRegister/index.module.scss
+++ b/packages/ui/src/pages/SocialRegister/index.module.scss
@@ -20,8 +20,7 @@
   }
 
   .title {
-    @include _.title;
-    font: var(--font-title-medium);
+    @include _.title-desktop;
     margin-bottom: _.unit(8);
   }
 }
diff --git a/packages/ui/src/scss/_colors.scss b/packages/ui/src/scss/_colors.scss
index 450ed979b..ed21cbe9c 100644
--- a/packages/ui/src/scss/_colors.scss
+++ b/packages/ui/src/scss/_colors.scss
@@ -5,6 +5,8 @@
 @mixin static {
   --color-static-white: #fff;
   --color-static-black: #000;
+  --color-static-dark-type-primary: #f7f8f8; // For loading icon use
+  --color-shadow: 0 4px 8px rgba(0, 0, 0, 2%);
 }
 
 @mixin light {
@@ -33,27 +35,32 @@
   --color-brand-40: #5d34f2;
   --color-brand-50: #7958ff;
 
+  --color-alert-70: #eb9918;
+  --color-alert-99: #fff5eb;
+
   /* Text & Icon */
   --color-type-primary: var(--color-neutral-10);
   --color-type-secondary: var(--color-neutral-50);
-  --color-type-disable: scale-color(var(--color-neutral-10), $alpha: -65%);
+  --color-type-disable: rgba(25, 28, 29, 35%); // 35% --color-neutral-10
   --color-type-link: var(--color-brand-default);
 
   /* Line */
-  --color-line-divider: scale-color(var(--color-neutral-10), $alpha: -88%);
+  --color-line-divider: rgba(25, 28, 29, 12%); // 12% --color-neutral-10
   --color-line-border: var(--color-neutral-80);
-  --color-line-border-transparent: scale-color(var(--color-neutral-10), $alpha: -75%);
+  --color-line-border-transparent: rgba(25, 28, 29, 25%); // 25% --color-neutral-10
 
   /* Background */
-  --color-bg-base: var(--color-neutral-95);
-  --color-bg-layer-1: var(--color-neutral-100);
+  --color-bg-body-base: var(--color-neutral-95);
+  --color-bg-body: var(--color-neutral-100);
   --color-bg-layer-2: var(--color-neutral-95);
+  --color-bg-body-overlay: var(--color-neutral-100);
+  --color-bg-float-base: var(--color-neutral-variant-80);
   --color-bg-float: var(--color-neutral-100);
-  --color-bg-mask: scale-color(var(--color-neutral-0), $alpha: -60%);
+  --color-bg-float-overlay: var(--color-neutral-100);
+  --color-bg-mask: rgba(0, 0, 0, 40%); // 4% --color-neutral-0
   --color-bg-toast: var(--color-neutral-20);
   --color-bg-state-unselected: var(--color-neutral-90);
-  --color-bg-state-disabled: scale-color(var(--color-neutral-10), -92%);
-  --color-bg-desktop: var(--color-neutral-variant-80);
+  --color-bg-state-disabled: rgba(25, 28, 29, 8%); // 8% --color-neutral-10
 
   /* Brand */
   // Note: System brand color. May be overwritten dynamically by js
@@ -73,25 +80,25 @@
   --color-success-disable: var(--color-success-90);
 
   /* Overlay */
-  --color-overlay-neutral-hover: scale-color(var(--color-neutral-10), -92%);
-  --color-overlay-neutral-pressed: scale-color(var(--color-neutral-10), -88%);
-  --color-overlay-neutral-focused: scale-color(var(--color-neutral-10), -84%);
-  --color-overlay-danger-hover: scale-color(var(--color-danger-40), -92%);
-  --color-overlay-danger-pressed: scale-color(var(--color-danger-40), -88%);
-  --color-overlay-danger-focused: scale-color(var(--color-danger-40), -84%);
+  --color-overlay-neutral-hover: rgba(25, 28, 29, 8%); // 8% --color-neutral-10
+  --color-overlay-neutral-pressed: rgba(25, 28, 29, 12%); // 12% --color-neutral-10
+  --color-overlay-neutral-focused: rgba(25, 28, 29, 16%); // 16% --color-neutral-10
+  --color-overlay-danger-hover: rgba(186, 27, 27, 8%); // 8% --color-danger-40
+  --color-overlay-danger-pressed: rgba(186, 27, 27, 12%); // 12% --color-danger-40
+  --color-overlay-danger-focused: rgba(186, 27, 27, 16%); // 16% --color-danger-40
   // Note: System brand color. May be overwritten dynamically by js
-  --color-overlay-brand-hover: scale-color(var(--color-brand-40), -92%);
-  --color-overlay-brand-pressed: scale-color(var(--color-brand-40), -88%);
-  --color-overlay-brand-focused: scale-color(var(--color-brand-40), -84%);
+  --color-overlay-brand-hover: rgba(93, 52, 242, 8%); // 8% --color-brand-default
+  --color-overlay-brand-pressed: rgba(93, 52, 242, 12%); // 12% --color-brand-default
+  --color-overlay-brand-focused: rgba(93, 52, 242, 16%); // 16% --color-brand-default
 }
 
 @mixin dark {
   /* Color Platte */
   --color-neutral-0: #fff;
   --color-neutral-10: #f7f8f8;
-  --color-neutral-20: #f7f8f8;
+  --color-neutral-20: #eff1f1;
   --color-neutral-50: #a9acac;
-  --color-neutral-80: #a9acac;
+  --color-neutral-80: #5c5f60;
   --color-neutral-90: #444748;
   --color-neutral-95: #2d3132;
   --color-neutral-99: #191c1d;
@@ -117,6 +124,7 @@
   --color-brand-50: #af9eff;
   --color-brand-70: #7958ff;
 
+  --color-surface: var(--color-neutral-99);
   --color-surface-2:
     linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
     linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
@@ -126,27 +134,33 @@
     linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
     #191c1d;
 
+  --color-alert-70: #a76900;
+  --color-alert-99: #2b1700;
+
   /* Text & Icon */
   --color-type-primary: var(--color-neutral-10);
   --color-type-secondary: var(--color-neutral-50);
-  --color-type-disable: scale-color(var(--color-neutral-10), $alpha: -65%);
+  --color-type-disable: rgba(247, 248, 248, 35%); // 35% --color-neutral-10;
   --color-type-link: var(--color-brand-default);
 
   /* Line */
-  --color-line-divider: scale-color(var(--color-neutral-10), $alpha: -86%);
+  --color-line-divider: rgba(247, 248, 248, 14%); // 14% --color-neutral-10
   --color-line-border: var(--color-neutral-80);
-  --color-line-border-transparent: scale-color(var(--color-neutral-10), $alpha: -80%);
+  --color-line-border-transparent: rgba(247, 248, 248, 20%); // 20% --color-neutral-10
 
   /* Background */
-  --color-bg-base: var(--color-neutral-99);
-  --color-bg-layer-1: var(--color-surface-2);
+  --color-bg-body-base: var(--color-neutral-100);
+  --color-bg-body: var(--color-surface);
+  --color-bg-body-overlay: var(--color-surface-2);
   --color-bg-layer-2: var(--color-surface-4);
-  --color-bg-float: var(--color-surface-4);
-  --color-bg-mask: scale-color(var(--color-neutral-0), $alpha: -40%);
+  --color-bg-float-base: var(--color-neutral-100);
+  --color-bg-float: var(--color-surface-2);
+  --color-bg-float-overlay: var(--color-surface-4);
+  --color-bg-mask: rgba(0, 0, 0, 60%); // 60% --color-neutral-100;
   --color-bg-toast: var(--color-neutral-80);
   --color-bg-state-unselected: var(--color-neutral-90);
-  --color-bg-state-disabled: scale-color(var(--color-neutral-10), -92%);
-  --color-bg-desktop: var(--color-neutral-variant-90);
+  --color-bg-state-disabled: rgba(247, 248, 248, 8%); // 8% --color-neutral-10
+
 
   /* Brand */
   // Note: System brand color. May be overwritten dynamically by js
@@ -166,14 +180,14 @@
   --color-success-disable: var(--color-success-90);
 
   /* Overlay */
-  --color-overlay-neutral-hover: scale-color(var(--color-neutral-10), -92%);
-  --color-overlay-neutral-pressed: scale-color(var(--color-neutral-10), -88%);
-  --color-overlay-neutral-focused: scale-color(var(--color-neutral-10), -84%);
-  --color-overlay-danger-hover: scale-color(var(--color-danger-40), -92%);
-  --color-overlay-danger-pressed: scale-color(var(--color-danger-40), -88%);
-  --color-overlay-danger-focused: scale-color(var(--color-danger-40), -84%);
+  --color-overlay-neutral-hover: rgba(247, 248, 248, 8%); // 8% --color-neutral-10
+  --color-overlay-neutral-pressed: rgba(247, 248, 248, 12%); // 12% --color-neutral-10
+  --color-overlay-neutral-focused: rgba(247, 248, 248, 16%); // 16% --color-neutral-10
+  --color-overlay-danger-hover: rgba(221, 55, 48, 8%); // 8% --color-danger-40
+  --color-overlay-danger-pressed: rgba(221, 55, 48, 12%); // 12% --color-danger-40
+  --color-overlay-danger-focused: rgba(221, 55, 48, 16%); // 16% --color-danger-40
   // Note: System brand color. May be overwritten dynamically by js
-  --color-overlay-brand-hover: scale-color(var(--color-brand-40), -92%);
-  --color-overlay-brand-pressed: scale-color(var(--color-brand-40), -88%);
-  --color-overlay-brand-focused: scale-color(var(--color-brand-40), -84%);
+  --color-overlay-brand-hover: rgba(202, 190, 255, 8%); // 8% --color-brand-40
+  --color-overlay-brand-pressed: rgba(202, 190, 255, 12%); // 12% --color-brand-40
+  --color-overlay-brand-focused: rgba(202, 190, 255, 16%); // 16% --color-brand-40
 }
diff --git a/packages/ui/src/scss/_underscore.scss b/packages/ui/src/scss/_underscore.scss
index 321362619..fb6426ced 100644
--- a/packages/ui/src/scss/_underscore.scss
+++ b/packages/ui/src/scss/_underscore.scss
@@ -20,13 +20,18 @@
 }
 
 @mixin text-hint {
-  font: var(--font-caption);
-  color: var(--color-caption);
+  font: var(--font-body-2);
+  color: var(--color-type-secondary);
 }
 
 @mixin title {
-  font: var(--font-title);
-  color: var(--color-text);
+  font: var(--font-headline-1);
+  color: var(--color-type-primary);
+}
+
+@mixin title-desktop {
+  font: var(--font-headline-2);
+  color: var(--color-type-primary);
 }
 
 @mixin full-page {
diff --git a/packages/ui/src/scss/modal.module.scss b/packages/ui/src/scss/modal.module.scss
index 8401783ff..6218e9df4 100644
--- a/packages/ui/src/scss/modal.module.scss
+++ b/packages/ui/src/scss/modal.module.scss
@@ -1,6 +1,6 @@
 .overlay {
   position: fixed;
-  background: var(--color-overlay);
+  background: var(--color-bg-mask);
   inset: 0;
 }
 
diff --git a/packages/ui/src/scss/normalized.scss b/packages/ui/src/scss/normalized.scss
index 13cdd9c19..a71811085 100644
--- a/packages/ui/src/scss/normalized.scss
+++ b/packages/ui/src/scss/normalized.scss
@@ -29,5 +29,5 @@ input[type='number'] {
 }
 
 :focus-visible {
-  outline: solid 1px var(--color-primary);
+  outline: solid 1px var(--color-brand-default);
 }

From 565b944ae0dbd54d9d0f6d5034f8d3932a70e6e8 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Sun, 23 Oct 2022 15:02:09 +0800
Subject: [PATCH 3/5] refactor(ui): refactor branding color calulation logic

refactor branding color calculation logic
---
 .../ui/src/containers/AppContent/index.tsx    |  2 +-
 packages/ui/src/hooks/use-color-theme.ts      | 67 ++++++++++---------
 packages/ui/src/scss/_colors.scss             |  2 +-
 3 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/packages/ui/src/containers/AppContent/index.tsx b/packages/ui/src/containers/AppContent/index.tsx
index 30e117ff4..57da52cfe 100644
--- a/packages/ui/src/containers/AppContent/index.tsx
+++ b/packages/ui/src/containers/AppContent/index.tsx
@@ -24,7 +24,7 @@ const AppContent = ({ children }: Props) => {
   }, [setToast]);
 
   // Set Primary Color
-  useColorTheme(experienceSettings?.color.primaryColor, experienceSettings?.color.darkPrimaryColor);
+  useColorTheme();
 
   // Set Theme Mode
   useEffect(() => {
diff --git a/packages/ui/src/hooks/use-color-theme.ts b/packages/ui/src/hooks/use-color-theme.ts
index 665e4ac95..ad3429ee8 100644
--- a/packages/ui/src/hooks/use-color-theme.ts
+++ b/packages/ui/src/hooks/use-color-theme.ts
@@ -1,54 +1,59 @@
 import { absoluteDarken, absoluteLighten } from '@logto/core-kit';
 import color from 'color';
-import { useEffect } from 'react';
+import { useEffect, useContext } from 'react';
+
+import { PageContext } from '@/hooks/use-page-context';
 
 const generateLightColorLibrary = (primaryColor: color) => ({
-  [`--color-light-brand`]: primaryColor.hex(),
-  [`--color-light-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
-  [`--color-light-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
-  [`--color-light-overlay-brand-focused`]: primaryColor.alpha(0.16).string(),
-  [`--color-light-overlay-brand-hover`]: primaryColor.alpha(0.08).string(),
-  [`--color-light-overlay-brand-pressed`]: primaryColor.alpha(0.12).string(),
+  [`--color-brand-default`]: primaryColor.hex(),
+  [`--color-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
+  [`--color-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
+  [`--color-overlay-brand-focused`]: primaryColor.alpha(0.16).string(),
+  [`--color-overlay-brand-hover`]: primaryColor.alpha(0.08).string(),
+  [`--color-overlay-brand-pressed`]: primaryColor.alpha(0.12).string(),
 });
 
 const generateDarkColorLibrary = (primaryColor: color) => ({
-  [`--color-dark-brand`]: primaryColor.hex(),
-  [`--color-dark-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
-  [`--color-dark-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
-  [`--color-dark-overlay-brand-focused`]: absoluteLighten(primaryColor, 17)
-    .rgb()
-    .alpha(0.16)
-    .string(),
-  [`--color-dark-overlay-brand-hover`]: absoluteLighten(primaryColor, 17)
-    .rgb()
-    .alpha(0.08)
-    .string(),
-  [`--color-dark-overlay-brand-pressed`]: absoluteLighten(primaryColor, 17)
-    .rgb()
-    .alpha(0.12)
-    .string(),
+  [`--color-brand-default`]: primaryColor.hex(),
+  [`--color-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
+  [`--color-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
+  [`--color-overlay-brand-focused`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.16).string(),
+  [`--color-overlay-brand-hover`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.08).string(),
+  [`--color-overlay-brand-pressed`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.12).string(),
 });
 
-const useColorTheme = (primaryColor?: string, darkPrimaryColor?: string) => {
+const useColorTheme = () => {
+  const { theme, experienceSettings } = useContext(PageContext);
+  const primaryColor = experienceSettings?.color.primaryColor;
+  const darkPrimaryColor = experienceSettings?.color.darkPrimaryColor;
+
   useEffect(() => {
     if (!primaryColor) {
       return;
     }
 
     const lightPrimary = color(primaryColor);
-    const darkPrimary = color(darkPrimaryColor);
 
-    const lightColorLibrary = generateLightColorLibrary(lightPrimary);
+    if (theme === 'light') {
+      const lightColorLibrary = generateLightColorLibrary(lightPrimary);
+
+      for (const [key, value] of Object.entries(lightColorLibrary)) {
+        document.body.style.setProperty(key, value);
+      }
+
+      return;
+    }
+
+    const darkPrimary = darkPrimaryColor
+      ? color(darkPrimaryColor)
+      : absoluteLighten(lightPrimary, 10);
+
     const darkColorLibrary = generateDarkColorLibrary(darkPrimary);
 
-    for (const [key, value] of Object.entries(lightColorLibrary)) {
-      document.documentElement.style.setProperty(key, value);
-    }
-
     for (const [key, value] of Object.entries(darkColorLibrary)) {
-      document.documentElement.style.setProperty(key, value);
+      document.body.style.setProperty(key, value);
     }
-  }, [darkPrimaryColor, primaryColor]);
+  }, [darkPrimaryColor, primaryColor, theme]);
 };
 
 export default useColorTheme;
diff --git a/packages/ui/src/scss/_colors.scss b/packages/ui/src/scss/_colors.scss
index ed21cbe9c..3666003dd 100644
--- a/packages/ui/src/scss/_colors.scss
+++ b/packages/ui/src/scss/_colors.scss
@@ -112,7 +112,7 @@
   --color-danger-50: #ff897a;
   --color-danger-60: #ff5449;
   --color-danger-70: #dd3730;
-  --color-danger-50: #ba1b1b;
+  --color-danger-80: #ba1b1b;
 
   --color-success-60: #4ea254;
   --color-success-70: #32873d;

From 07edd4e68583268ad763204be5bac4713ec0e5da Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Sun, 23 Oct 2022 15:05:48 +0800
Subject: [PATCH 4/5] style(ui): remove all lagecy style sheets

remove all lagecy style sheets
---
 .../containers/AppContent/index.module.scss   |   2 -
 packages/ui/src/hooks/use-preview.ts          |   2 +-
 packages/ui/src/scss/_desktop.scss            | 100 ------------------
 packages/ui/src/scss/_mobile.scss             |  68 ------------
 4 files changed, 1 insertion(+), 171 deletions(-)
 delete mode 100644 packages/ui/src/scss/_desktop.scss
 delete mode 100644 packages/ui/src/scss/_mobile.scss

diff --git a/packages/ui/src/containers/AppContent/index.module.scss b/packages/ui/src/containers/AppContent/index.module.scss
index 06180eeae..1c71cdc8e 100644
--- a/packages/ui/src/containers/AppContent/index.module.scss
+++ b/packages/ui/src/containers/AppContent/index.module.scss
@@ -1,6 +1,4 @@
 @use '@/scss/underscore' as _;
-@use '@/scss/mobile' as mobile;
-@use '@/scss/desktop' as desktop;
 @use '@/scss/colors' as colors;
 @use '@/scss/fonts' as fonts;
 
diff --git a/packages/ui/src/hooks/use-preview.ts b/packages/ui/src/hooks/use-preview.ts
index cd5c9fc53..3aea6444e 100644
--- a/packages/ui/src/hooks/use-preview.ts
+++ b/packages/ui/src/hooks/use-preview.ts
@@ -3,7 +3,7 @@ import { conditionalString } from '@silverhand/essentials';
 import { useEffect, useState } from 'react';
 
 import * as styles from '@/containers/AppContent/index.module.scss';
-import { Context } from '@/hooks/use-page-context';
+import type { Context } from '@/hooks/use-page-context';
 import initI18n from '@/i18n/init';
 import { changeLanguage } from '@/i18n/utils';
 import type { SignInExperienceSettings, PreviewConfig } from '@/types';
diff --git a/packages/ui/src/scss/_desktop.scss b/packages/ui/src/scss/_desktop.scss
deleted file mode 100644
index 3cbe6b55d..000000000
--- a/packages/ui/src/scss/_desktop.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-/* Foundation */
-$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
-  'Helvetica', 'Arial', sans-serif;
-
-@mixin colors-light-theme {
-  --color-base: #e5e1ec;
-  --color-surface: #fff;
-  --color-surface-variant: #e5e1ec;
-  --color-text: #191c1d; // Neutral-10
-  --color-text-disabled: #c4c7c7;
-  --color-border: #c4c7c7;
-  --color-border-variant: #c9c5d0;
-  --color-caption: #747778;
-  --color-icon: #747778;
-  --color-focused: rgba(25, 28, 29, 16%); // 16% Neutral-10
-  --color-pressed: rgba(25, 28, 29, 12%); // 12% Neutral-10
-  --color-hover: rgba(25, 28, 29, 8%); // 8% Neutral-10
-
-  --color-primary: var(--color-light-brand);
-  --color-focused-variant: var(--color-light-overlay-brand-focused);
-  --color-hover-variant: var(--color-light-overlay-brand-hover);
-  --color-pressed-variant: var(--color-light-overlay-brand-pressed);
-  --color-primary-pressed: var(--color-light-brand-pressed);
-  --color-primary-hover: var(--color-light-brand-hover);
-
-  --color-inverse-on-surface: #f3effa;
-  --color-outline: #78767f;
-  --color-layer: #eff1f1;
-  --color-dialogue: #fff;
-  --color-divider: #e0e3e3;
-  --color-error: #ba1b1b;
-  --color-loading-icon: #191c1d;
-
-  --color-inverse-social-bg: #000;
-  --color-inverse-social-hover: rgba(0, 0, 0, 92%);
-  --color-inverse-social-pressed: rgba(0, 0, 0, 88%);
-}
-
-@mixin colors-dark-theme {
-  --color-base: #2a2c32;
-  --color-surface: #191c1d;
-  --color-surface-variant: #47464e;
-  --color-text: #f7f8f8; // Neutral-10
-  --color-text-disabled: #5c5f60;
-  --color-border: #5c5f60;
-  --color-border-variant: #5f5d67;
-  --color-caption: #a9acac;
-  --color-icon: #a9acac;
-  --color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10
-  --color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
-  --color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
-
-  --color-primary: var(--color-dark-brand);
-  --color-focused-variant: var(--color-dark-overlay-brand-focused);
-  --color-hover-variant: var(--color-dark-overlay-brand-hover);
-  --color-pressed-variant: var(--color-dark-overlay-brand-pressed);
-  --color-primary-pressed: var(--color-dark-brand-pressed);
-  --color-primary-hover: var(--color-dark-brand-hover);
-
-  --color-inverse-on-surface: #2d3132;
-  --color-outline: #928f9a;
-  --color-layer: #2a2c32;
-  --color-dialogue:
-    linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
-    linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
-    #191c1d;
-  --color-divider: #444748;
-  --color-error: #dd3730;
-  --color-loading-icon: #f7f8f8;
-
-  --color-inverse-social-bg: #fff;
-  --color-inverse-social-hover: rgba(255, 255, 255, 92%);
-  --color-inverse-social-pressed: rgba(255, 255, 255, 88%);
-}
-
-@mixin colors-universal {
-  --color-primary-button-text: #fff;
-  --color-toast: #34353f;
-  --color-toast-border: #444748;
-  --color-overlay: rgba(0, 0, 0, 30%);
-  --color-loading-icon-light: #f7f8f8;
-  // shadows
-  --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
-  --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
-}
-
-@mixin fonts {
-  --font-title: 600 32px/40px #{$font-family};
-  --font-title-medium: 600 28px/36px #{$font-family};
-  --font-title-small: 600 16px/24px #{$font-family};
-  --font-header: 600 20px/28px #{$font-family};
-  --font-body-bold: 500 14px/20px #{$font-family};
-  --font-body: 400 14px/20px #{$font-family};
-  --font-caption: 400 14px/20px #{$font-family};
-}
-
-@mixin layout {
-  --radius: 8px;
-  --max-width: 400px;
-}
diff --git a/packages/ui/src/scss/_mobile.scss b/packages/ui/src/scss/_mobile.scss
deleted file mode 100644
index b35ce86b1..000000000
--- a/packages/ui/src/scss/_mobile.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-/* Foundation */
-$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
-  'Helvetica', 'Arial', sans-serif;
-
-@mixin colors-light-theme {
-  --color-base: #fff;
-  --color-surface: #fff;
-  --color-surface-variant: #e5e1ec;
-  --color-text: #191c1d;
-  --color-icon: #747778;
-  --color-caption: #747778;
-  --color-outline: #78767f;
-  --color-divider: #e0e3e3;
-  --color-text-disabled: #c4c7c7;
-  --color-border: #c4c7c7;
-  --color-primary: var(--color-light-brand);
-  --color-layer: #eff1f1;
-  --color-error: #ba1b1b;
-  --color-dialogue: #fff;
-  --color-loading-icon: #191c1d;
-
-  --color-inverse-social-bg: #000;
-}
-
-@mixin colors-dark-theme {
-  --color-base: #191c1d;
-  --color-surface: #191c1d;
-  --color-surface-variant: #47464e;
-  --color-text: #f7f8f8;
-  --color-icon: #a9acac;
-  --color-caption: #a9acac;
-  --color-outline: #928f9a;
-  --color-divider: #444748;
-  --color-text-disabled: #5c5f60;
-  --color-border: #5c5f60;
-  --color-primary: var(--color-dark-brand);
-  --color-layer: #2a2c32;
-  --color-error: #dd3730;
-  --color-dialogue:
-    linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
-    linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
-    #191c1d;
-  --color-loading-icon: #f7f8f8;
-
-  --color-inverse-social-bg: #fff;
-}
-
-@mixin colors-universal {
-  --color-primary-button-text: #fff;
-  --color-toast: #34353f;
-  --color-toast-border: #444748;
-  --color-overlay: rgba(0, 0, 0, 30%);
-  --color-loading-icon-light: #f7f8f8;
-  // shadows
-  --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
-}
-
-@mixin fonts {
-  --font-title: 600 32px/40px #{$font-family};
-  --font-body-bold: 500 16px/20px #{$font-family};
-  --font-body: 400 16px/20px #{$font-family};
-  --font-caption: 400 14px/18px #{$font-family};
-}
-
-@mixin layout {
-  --radius: 8px;
-  --max-width: 360px;
-}

From f9bcce52dd3e49d331254a14c988974865014872 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Mon, 24 Oct 2022 09:47:36 +0800
Subject: [PATCH 5/5] fix(ui): fix ci

fix ci
---
 packages/ui/src/containers/PasscodeValidation/index.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/ui/src/containers/PasscodeValidation/index.tsx b/packages/ui/src/containers/PasscodeValidation/index.tsx
index 4af51c20c..7ddcee53a 100644
--- a/packages/ui/src/containers/PasscodeValidation/index.tsx
+++ b/packages/ui/src/containers/PasscodeValidation/index.tsx
@@ -117,11 +117,7 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
           </Trans>
         </div>
       ) : (
-        <TextLink
-          className={styles.link}
-          text="description.resend_passcode"
-          onClick={resendPasscodeHandler}
-        />
+        <TextLink text="description.resend_passcode" onClick={resendPasscodeHandler} />
       )}
     </form>
   );