From aba8c0c4c9b638b941f5141bac03db281cee6f0c Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Mon, 13 Jul 2026 13:24:41 +0300 Subject: [PATCH] Use palette variables in auth and onboarding component styles Replace hard-coded color literals with the shared palette tokens across the auth and onboarding/glam component styles: white -> $PR-brand-white, grays -> $gray-light/$gray-dark, $PR-blue -> $PR-blue-900, plus $PR-blue-50/200/400 and $PR-brand-purple/$PR-brand-yellow. Add @import 'colors' to the files that didn't already have the palette in scope. Values are unchanged, so there is no visual difference. Issue: PER-10633 --- src/app/auth/components/auth/auth.component.scss | 10 +++++----- src/app/auth/components/login/login.component.scss | 4 ++-- src/app/auth/components/signup/signup.component.scss | 10 +++++----- .../archive-creation-with-share.component.scss | 5 +++-- .../create-new-archive.component.scss | 4 ++-- .../glam-pending-archives.component.scss | 2 +- .../archive-creation-start-screen.component.scss | 3 ++- .../archive-type-select-dialog.component.scss | 6 +++--- .../archive-type-select.component.scss | 5 +++-- .../create-archive-for-me-screen.component.scss | 4 ++-- .../finalize-archive-creation-screen.component.scss | 10 +++++----- .../glam-goals-screen/glam-goals-screen.component.scss | 2 +- .../glam/glam-header/glam-header.component.scss | 6 ++++-- .../glam-reasons-screen.component.scss | 2 +- .../glam-user-survey-square.component.scss | 9 +++++---- .../name-archive-screen.component.scss | 10 +++++----- .../pending-archive/pending-archive.component.scss | 5 +++-- .../select-archive-type-screen.component.scss | 8 ++++---- 18 files changed, 56 insertions(+), 49 deletions(-) diff --git a/src/app/auth/components/auth/auth.component.scss b/src/app/auth/components/auth/auth.component.scss index 7c7e9fd2f..d145689e3 100644 --- a/src/app/auth/components/auth/auth.component.scss +++ b/src/app/auth/components/auth/auth.component.scss @@ -106,7 +106,7 @@ .testimony { position: absolute; - background: rgba($PR-blue, 0.92); + background: rgba($PR-blue-900, 0.92); padding: 20px 24px; left: 64px; bottom: 135px; @@ -122,7 +122,7 @@ font-weight: 700; line-height: 24px; font-size: 18px; - color: $white; + color: $PR-brand-white; margin: 0; } @@ -131,7 +131,7 @@ font-weight: 400; line-height: 24px; font-size: 18px; - color: rgba($white, 0.85); + color: rgba($PR-brand-white, 0.85); margin: 0; } @@ -150,11 +150,11 @@ } .legacy-lab-text { - color: white; + color: $PR-brand-white; .start-date, a { - color: #ff9933; + color: $PR-brand-yellow; } .header { diff --git a/src/app/auth/components/login/login.component.scss b/src/app/auth/components/login/login.component.scss index 011baaba4..377963f69 100644 --- a/src/app/auth/components/login/login.component.scss +++ b/src/app/auth/components/login/login.component.scss @@ -30,7 +30,7 @@ justify-content: space-between; & > a { - color: white; + color: $PR-brand-white; font-size: 14px; font-family: 'UsualRegular', sans-serif; } @@ -41,7 +41,7 @@ display: flex; justify-content: center; & > a { - color: white; + color: $PR-brand-white; font-size: 14px; font-family: 'UsualRegular', sans-serif; } diff --git a/src/app/auth/components/signup/signup.component.scss b/src/app/auth/components/signup/signup.component.scss index d9250828b..94906c3db 100644 --- a/src/app/auth/components/signup/signup.component.scss +++ b/src/app/auth/components/signup/signup.component.scss @@ -29,7 +29,7 @@ display: flex; > label, label > a { - color: white; + color: $PR-brand-white; font-family: 'UsualRegular', sans-serif; font-size: 14px; } @@ -51,7 +51,7 @@ form { .terms-title { margin-bottom: 18px; font-family: 'UsualBold', sans-serif; - color: white; + color: $PR-brand-white; font-size: 16px; line-height: 24px; letter-spacing: -0.16px; @@ -61,7 +61,7 @@ form { font-family: 'UsualRegular', sans-serif; font-size: 14px; line-height: 22px; - color: white; + color: $PR-brand-white; margin-bottom: 36px; width: 334px; } @@ -90,7 +90,7 @@ form { .terms-title { margin-bottom: 18px; font-family: 'UsualBold', sans-serif; - color: white; + color: $PR-brand-white; font-size: 16px; line-height: 24px; letter-spacing: -0.16px; @@ -100,7 +100,7 @@ form { font-family: 'UsualRegular', sans-serif; font-size: 14px; line-height: 22px; - color: white; + color: $PR-brand-white; margin-bottom: 36px; width: 334px; } diff --git a/src/app/onboarding/components/archive-creation-with-share/archive-creation-with-share.component.scss b/src/app/onboarding/components/archive-creation-with-share/archive-creation-with-share.component.scss index 6e5076d48..3a686f6ac 100644 --- a/src/app/onboarding/components/archive-creation-with-share/archive-creation-with-share.component.scss +++ b/src/app/onboarding/components/archive-creation-with-share/archive-creation-with-share.component.scss @@ -1,7 +1,8 @@ @import 'fonts'; +@import 'colors'; p { - color: white; + color: $PR-brand-white; } .text > p { @@ -34,6 +35,6 @@ p { } .sharer-name { - color: rgba(184, 187, 201, 1); + color: rgba($PR-blue-200, 1); margin-bottom: 0px; } diff --git a/src/app/onboarding/components/create-new-archive/create-new-archive.component.scss b/src/app/onboarding/components/create-new-archive/create-new-archive.component.scss index b78e62611..ec1b7fd31 100644 --- a/src/app/onboarding/components/create-new-archive/create-new-archive.component.scss +++ b/src/app/onboarding/components/create-new-archive/create-new-archive.component.scss @@ -33,13 +33,13 @@ h3 { .heading-container { width: 50%; & > .heading { - color: white; + color: $PR-brand-white; font-family: 'UsualLight', sans-serif; } & > .heading-new-archive { width: 60%; - color: white; + color: $PR-brand-white; font-family: 'UsualLight', sans-serif; } } diff --git a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss index 81d329893..5e8fd3bdf 100644 --- a/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss +++ b/src/app/onboarding/components/glam-pending-archives/glam-pending-archives.component.scss @@ -2,7 +2,7 @@ @import 'fonts'; p { - color: white; + color: $PR-brand-white; } .greeting { diff --git a/src/app/onboarding/components/glam/archive-creation-start-screen/archive-creation-start-screen.component.scss b/src/app/onboarding/components/glam/archive-creation-start-screen/archive-creation-start-screen.component.scss index ec272075d..a8d39959b 100644 --- a/src/app/onboarding/components/glam/archive-creation-start-screen/archive-creation-start-screen.component.scss +++ b/src/app/onboarding/components/glam/archive-creation-start-screen/archive-creation-start-screen.component.scss @@ -1,4 +1,5 @@ @import 'fonts'; +@import 'colors'; :host { display: flex; @@ -20,7 +21,7 @@ } p { - color: white; + color: $PR-brand-white; } .greetings-container { diff --git a/src/app/onboarding/components/glam/archive-type-select-dialog/archive-type-select-dialog.component.scss b/src/app/onboarding/components/glam/archive-type-select-dialog/archive-type-select-dialog.component.scss index d0955864a..64c994933 100644 --- a/src/app/onboarding/components/glam/archive-type-select-dialog/archive-type-select-dialog.component.scss +++ b/src/app/onboarding/components/glam/archive-type-select-dialog/archive-type-select-dialog.component.scss @@ -3,7 +3,7 @@ .archive-type-select-dialog { font-family: 'UsualRegular', sans-serif; - background: #fff; + background: $PR-brand-white; border-radius: 12px; display: flex; width: auto; @@ -33,7 +33,7 @@ align-items: center; flex-shrink: 0; align-self: stretch; - border-bottom: 1px solid #e7e8ed; + border-bottom: 1px solid $PR-blue-50; .dialog-label { color: $darkBlue; @@ -81,7 +81,7 @@ } .type-description { - color: #646464; + color: $gray-dark; font-weight: 400; line-height: 32px; } diff --git a/src/app/onboarding/components/glam/archive-type-select/archive-type-select.component.scss b/src/app/onboarding/components/glam/archive-type-select/archive-type-select.component.scss index a23a48f21..66caebf41 100644 --- a/src/app/onboarding/components/glam/archive-type-select/archive-type-select.component.scss +++ b/src/app/onboarding/components/glam/archive-type-select/archive-type-select.component.scss @@ -1,4 +1,5 @@ @import 'fonts'; +@import 'colors'; .archive-type-select { cursor: pointer; @@ -15,7 +16,7 @@ font-family: 'UsualRegular', sans-serif; font-style: normal; - color: #fff; + color: $PR-brand-white; } .archive-type { @@ -34,7 +35,7 @@ } .type-description { - color: rgba(255, 255, 255, 0.75); + color: rgba($PR-brand-white, 0.75); font-size: 18px; font-style: normal; font-weight: 400; diff --git a/src/app/onboarding/components/glam/create-archive-for-me-screen/create-archive-for-me-screen.component.scss b/src/app/onboarding/components/glam/create-archive-for-me-screen/create-archive-for-me-screen.component.scss index c938c4cd1..afa9ea29d 100644 --- a/src/app/onboarding/components/glam/create-archive-for-me-screen/create-archive-for-me-screen.component.scss +++ b/src/app/onboarding/components/glam/create-archive-for-me-screen/create-archive-for-me-screen.component.scss @@ -2,7 +2,7 @@ @import 'fonts'; p { - color: white; + color: $PR-brand-white; } .create-archive-for-me { @@ -29,7 +29,7 @@ p { font-family: 'UsualRegular', sans-serif; } & .archive-type { - color: rgba(255, 255, 255, 0.64); + color: rgba($PR-brand-white, 0.64); font-family: 'UsualRegular', sans-serif; font-size: 10px; } diff --git a/src/app/onboarding/components/glam/finalize-archive-creation-screen/finalize-archive-creation-screen.component.scss b/src/app/onboarding/components/glam/finalize-archive-creation-screen/finalize-archive-creation-screen.component.scss index d425a1fbf..6f12313f8 100644 --- a/src/app/onboarding/components/glam/finalize-archive-creation-screen/finalize-archive-creation-screen.component.scss +++ b/src/app/onboarding/components/glam/finalize-archive-creation-screen/finalize-archive-creation-screen.component.scss @@ -2,7 +2,7 @@ @import 'fonts'; p { - color: white; + color: $PR-brand-white; font-family: 'UsualRegular', sans-serif; font-size: 16px; } @@ -27,11 +27,11 @@ p { .square { border-radius: 6px; - background: rgba(255, 255, 255, 0.08); + background: rgba($PR-brand-white, 0.08); padding: 6px; & > span { - color: white; + color: $PR-brand-white; text-transform: uppercase; } } @@ -61,7 +61,7 @@ p { hr { margin: 32px 0px; - border-top: 1px solid rgba(255, 255, 255, 0.3); + border-top: 1px solid rgba($PR-brand-white, 0.3); } .content-container { @@ -97,7 +97,7 @@ hr { .get-started-text { & > a { - color: white; + color: $PR-brand-white; } margin-bottom: 2rem; } diff --git a/src/app/onboarding/components/glam/glam-goals-screen/glam-goals-screen.component.scss b/src/app/onboarding/components/glam/glam-goals-screen/glam-goals-screen.component.scss index 55b845b67..e11f4c2d2 100644 --- a/src/app/onboarding/components/glam/glam-goals-screen/glam-goals-screen.component.scss +++ b/src/app/onboarding/components/glam/glam-goals-screen/glam-goals-screen.component.scss @@ -57,7 +57,7 @@ } p { - color: white; + color: $PR-brand-white; } .text-container { diff --git a/src/app/onboarding/components/glam/glam-header/glam-header.component.scss b/src/app/onboarding/components/glam/glam-header/glam-header.component.scss index d66ea7146..0f02ea9b5 100644 --- a/src/app/onboarding/components/glam/glam-header/glam-header.component.scss +++ b/src/app/onboarding/components/glam/glam-header/glam-header.component.scss @@ -1,3 +1,5 @@ +@import 'colors'; + header { padding-top: 2em; padding-bottom: 1em; @@ -19,7 +21,7 @@ header { user-select: none; } - background: #ffffff14; + background: rgba($PR-brand-white, 0.08); border-radius: 0.75rem; } @@ -27,7 +29,7 @@ header { button { background: transparent; cursor: pointer; - color: #fff; + color: $PR-brand-white; text-transform: uppercase; font-family: 'UsualRegular', sans-serif; font-weight: 400; diff --git a/src/app/onboarding/components/glam/glam-reasons-screen/glam-reasons-screen.component.scss b/src/app/onboarding/components/glam/glam-reasons-screen/glam-reasons-screen.component.scss index 708616aab..0b6ccd68a 100644 --- a/src/app/onboarding/components/glam/glam-reasons-screen/glam-reasons-screen.component.scss +++ b/src/app/onboarding/components/glam/glam-reasons-screen/glam-reasons-screen.component.scss @@ -54,7 +54,7 @@ } p { - color: white; + color: $PR-brand-white; } .text-container { diff --git a/src/app/onboarding/components/glam/glam-user-survey-square/glam-user-survey-square.component.scss b/src/app/onboarding/components/glam/glam-user-survey-square/glam-user-survey-square.component.scss index adb2bec9c..b6f3f5fdc 100644 --- a/src/app/onboarding/components/glam/glam-user-survey-square/glam-user-survey-square.component.scss +++ b/src/app/onboarding/components/glam/glam-user-survey-square/glam-user-survey-square.component.scss @@ -1,12 +1,13 @@ @import 'fonts'; +@import 'colors'; .square { width: 280px; height: 130px; padding: 24px; - background-color: rgba(19, 27, 74, 1); + background-color: rgba($PR-blue-900, 1); border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.16); + border: 1px solid rgba($PR-brand-white, 0.16); cursor: pointer; display: flex; @@ -19,7 +20,7 @@ font-family: 'UsualRegular', sans-serif; font-size: 18px; font-weight: 400; - color: white; + color: $PR-brand-white; margin-left: 24px; margin-left: 10px; display: flex; @@ -31,7 +32,7 @@ background: linear-gradient( to right, rgba(184, 67, 166, 1), - rgba(128, 0, 128, 1) + rgba($PR-brand-purple, 1) ); } diff --git a/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.scss b/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.scss index d214f98c8..1c8be2d88 100644 --- a/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.scss +++ b/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.scss @@ -32,9 +32,9 @@ } & > .btn-disabled { - background-color: #c8c8c8; - color: #646464; - border-color: #c8c8c8; + background-color: $gray-light; + color: $gray-dark; + border-color: $gray-light; } } @@ -46,7 +46,7 @@ position: relative; & > p { position: absolute; - color: #898da4; + color: $PR-blue-400; z-index: 1000; font-size: 24px; font-family: 'UsualRegular', sans-serif; @@ -80,7 +80,7 @@ } & > div > p { - color: white; + color: $PR-brand-white; } } diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss index ce12f78cf..d71e39c00 100644 --- a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss +++ b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.scss @@ -1,4 +1,5 @@ @import 'fonts'; +@import 'colors'; .pending-archive-container { display: flex; @@ -7,14 +8,14 @@ } .name { - color: white; + color: $PR-brand-white; font-size: 14px; font-family: 'UsualRegular', sans-serif; margin-bottom: 0; } .role { - color: rgba(255, 255, 255, 0.5); + color: rgba($PR-brand-white, 0.5); font-family: 'UsualRegular', sans-serif; font-size: 14px; margin-bottom: 0; diff --git a/src/app/onboarding/components/glam/select-archive-type-screen/select-archive-type-screen.component.scss b/src/app/onboarding/components/glam/select-archive-type-screen/select-archive-type-screen.component.scss index 96e566950..93678d76c 100644 --- a/src/app/onboarding/components/glam/select-archive-type-screen/select-archive-type-screen.component.scss +++ b/src/app/onboarding/components/glam/select-archive-type-screen/select-archive-type-screen.component.scss @@ -23,9 +23,9 @@ } & > .btn-disabled { - background-color: #c8c8c8; - color: #646464; - border-color: #c8c8c8; + background-color: $gray-light; + color: $gray-dark; + border-color: $gray-light; } } @@ -45,7 +45,7 @@ & > .archive-type-selection { & > p { - color: white; + color: $PR-brand-white; font-size: 16px; line-height: 24px; margin-bottom: 32px;