From fbd15cc3212eea6b046e7c35b08dd34cb2585ba9 Mon Sep 17 00:00:00 2001
From: Sanjay Babu <sanjaytkbabu@gmail.com>
Date: Tue, 20 Jan 2026 15:34:53 -0800
Subject: [PATCH 1/3] FE - components updated with colors from theme

Signed-off-by: Sanjay Babu <sanjaytkbabu@gmail.com>
---
 .../authorization/AuthorizationCardLite.vue   |  2 +-
 .../AuthorizationCardProponent.vue            |  2 +-
 .../AuthorizationInfoProponent.vue            |  2 +-
 .../authorization/AuthorizationStatusPill.vue | 30 +++++++++----------
 frontend/src/components/common/StatusPill.vue |  2 +-
 .../src/components/form/StepperHeader.vue     |  2 +-
 .../submission/SubmissionAssistance.vue       |  2 +-
 .../submission/SubmissionsNavigator.vue       |  2 +-
 frontend/src/components/layout/Header.vue     |  2 +-
 .../src/components/layout/LoginButton.vue     |  2 +-
 frontend/src/components/user/UserTable.vue    |  4 +--
 frontend/src/views/oidc/OidcLoginView.vue     |  2 +-
 12 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/authorization/AuthorizationCardLite.vue b/frontend/src/components/authorization/AuthorizationCardLite.vue
index 3e8faf917..b40217c2c 100644
--- a/frontend/src/components/authorization/AuthorizationCardLite.vue
+++ b/frontend/src/components/authorization/AuthorizationCardLite.vue
@@ -49,7 +49,7 @@ const { t } = useI18n();
   border-color: var(--p-greyscale-100);
   border-style: solid;
   border-width: 0.063rem;
-  box-shadow: 0.25rem 0.25rem 0.25rem 0rem $app-proj-black;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem var(--p-greyscale-50);
   &--hover:hover {
     background-color: var(--p-bcblue-50);
   }
diff --git a/frontend/src/components/authorization/AuthorizationCardProponent.vue b/frontend/src/components/authorization/AuthorizationCardProponent.vue
index 51c54e405..5929d619d 100644
--- a/frontend/src/components/authorization/AuthorizationCardProponent.vue
+++ b/frontend/src/components/authorization/AuthorizationCardProponent.vue
@@ -81,7 +81,7 @@ const { t } = useI18n();
   border-color: var(--p-greyscale-100);
   border-style: solid;
   border-width: 0.063rem;
-  box-shadow: 0.25rem 0.25rem 0.25rem 0rem $app-proj-black;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem var(--p-greyscale-50);
   &--hover:hover {
     background-color: var(--p-bcblue-50);
   }
diff --git a/frontend/src/components/authorization/AuthorizationInfoProponent.vue b/frontend/src/components/authorization/AuthorizationInfoProponent.vue
index 715fa8a14..92195c82e 100644
--- a/frontend/src/components/authorization/AuthorizationInfoProponent.vue
+++ b/frontend/src/components/authorization/AuthorizationInfoProponent.vue
@@ -69,6 +69,6 @@ const { t } = useI18n();
 </template>
 <style scoped lang="scss">
 .border-color {
-  border-color: $app-proj-white-one;
+  border-color: var(--p-greyscale-100);
 }
 </style>
diff --git a/frontend/src/components/authorization/AuthorizationStatusPill.vue b/frontend/src/components/authorization/AuthorizationStatusPill.vue
index 803e846ae..49496e30c 100644
--- a/frontend/src/components/authorization/AuthorizationStatusPill.vue
+++ b/frontend/src/components/authorization/AuthorizationStatusPill.vue
@@ -163,38 +163,38 @@ const statePillDisplayText = {
 }
 
 .green {
-  background-color: $app-pill-lightgreen;
-  border-color: $app-pill-green;
-  color: $app-pill-green;
+  background-color: var(--p-green-75);
+  border-color: var(--p-green-500);
+  color: var(--p-green-500);
 }
 
 .grey {
-  background-color: $app-pill-grey;
-  border-color: $app-pill-lightgrey;
+  background-color: var(--p-greyscale-100);
+  border-color: var(--p-greyscale-900);
 }
 
 .outlined-green {
-  background-color: $app-pill-green;
-  border-color: $app-pill-green;
+  background-color: var(--p-green-500);
+  border-color: var(--p-green-500);
   border-style: solid;
   border-radius: 50%;
-  color: $app-pill-lightgreen;
+  color: var(--p-green-75);
 }
 
 .red {
-  background-color: $app-pill-lightred;
-  border-color: $app-pill-red;
-  color: $app-pill-red;
+  background-color: var(--p-red-50);
+  border-color: var(--p-red-400);
+  color: var(--p-red-400);
 }
 
 .yellow {
-  background-color: $app-pill-lightyellow;
-  border-color: $app-pill-yellow;
-  color: $app-pill-yellow;
+  background-color: var(--p-gold-200);
+  border-color: var(--p-gold-900);
+  color: var(--p-gold-900);
 }
 
 .text-color {
   font-weight: normal;
-  color: $app-pill-text;
+  color: var(--p-greyscale-900);
 }
 </style>
diff --git a/frontend/src/components/common/StatusPill.vue b/frontend/src/components/common/StatusPill.vue
index 7f29d276a..6a245a458 100644
--- a/frontend/src/components/common/StatusPill.vue
+++ b/frontend/src/components/common/StatusPill.vue
@@ -8,7 +8,7 @@ const {
   bgColor,
   borderColor,
   icon,
-  contentColor = '$app-pill-text'
+  contentColor = 'var(--p-greyscale-900)'
 } = defineProps<{
   enlarge?: boolean;
   stage?: string;
diff --git a/frontend/src/components/form/StepperHeader.vue b/frontend/src/components/form/StepperHeader.vue
index c988a8960..757964541 100644
--- a/frontend/src/components/form/StepperHeader.vue
+++ b/frontend/src/components/form/StepperHeader.vue
@@ -80,6 +80,6 @@ const {
 
 .outer-border-error {
   border-radius: 50% !important;
-  box-shadow: 0 0 0 3px $app-error !important;
+  box-shadow: 0 0 0 3px var(--p-red-400) !important;
 }
 </style>
diff --git a/frontend/src/components/housing/submission/SubmissionAssistance.vue b/frontend/src/components/housing/submission/SubmissionAssistance.vue
index c54381414..3d1bf964d 100644
--- a/frontend/src/components/housing/submission/SubmissionAssistance.vue
+++ b/frontend/src/components/housing/submission/SubmissionAssistance.vue
@@ -116,7 +116,7 @@ const confirmSubmit = () => {
 }
 
 :deep(.assistance-tab:focus-visible) {
-  outline: 0.25rem solid $app-hover;
+  outline: 0.25rem solid var(--p-bcblue-700);
   outline-offset: 0.125rem;
 }
 
diff --git a/frontend/src/components/housing/submission/SubmissionsNavigator.vue b/frontend/src/components/housing/submission/SubmissionsNavigator.vue
index 027a5c742..dfa4e9052 100644
--- a/frontend/src/components/housing/submission/SubmissionsNavigator.vue
+++ b/frontend/src/components/housing/submission/SubmissionsNavigator.vue
@@ -356,7 +356,7 @@ watchEffect(() => {
 }
 
 .withinWeek {
-  background-color: $app-pill-lightyellow;
+  background-color: var(--p-gold-200);
 }
 
 .withinMonth {
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
index 3006cbbf1..a39d6834d 100644
--- a/frontend/src/components/layout/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -38,7 +38,7 @@ const { t } = useI18n();
 <style lang="scss" scoped>
 #header-branding {
   background-color: white;
-  color: $app-primary;
+  color: var(--p-bcblue-950);
   white-space: nowrap;
   // TODO: Reference a surface colour once PrimeVue 4 changes come in
   border-bottom: 1px solid #d8d8d8;
diff --git a/frontend/src/components/layout/LoginButton.vue b/frontend/src/components/layout/LoginButton.vue
index 0e0a30da4..861ca3fc1 100644
--- a/frontend/src/components/layout/LoginButton.vue
+++ b/frontend/src/components/layout/LoginButton.vue
@@ -55,6 +55,6 @@ function logout() {
 
 <style lang="scss" scoped>
 button {
-  color: $app-primary !important;
+  color: var(--p-bcblue-950) !important;
 }
 </style>
diff --git a/frontend/src/components/user/UserTable.vue b/frontend/src/components/user/UserTable.vue
index dd3c10dab..1a92bea50 100644
--- a/frontend/src/components/user/UserTable.vue
+++ b/frontend/src/components/user/UserTable.vue
@@ -188,10 +188,10 @@ function getStatusClass(data: UserAccessRequest) {
 }
 
 .pending-approval-status {
-  color: $app-primary;
+  color: var(--p-bcblue-950);
 }
 
 .pending-revoke-status {
-  color: $app-error;
+  color: var(--p-red-400);
 }
 </style>
diff --git a/frontend/src/views/oidc/OidcLoginView.vue b/frontend/src/views/oidc/OidcLoginView.vue
index d0d609c32..7ad8f591f 100644
--- a/frontend/src/views/oidc/OidcLoginView.vue
+++ b/frontend/src/views/oidc/OidcLoginView.vue
@@ -106,7 +106,7 @@ function login(kind: IdentityProviderKind) {
 
 <style lang="scss" scoped>
 .account-setup {
-  outline: solid 0.063rem $app-grey;
+  outline: solid 0.063rem var(--p-greyscale-200);
   border-radius: 0.5rem;
 }
 

From 85546bda380b444f7505c4395e22a0e4f4d3f451 Mon Sep 17 00:00:00 2001
From: Sanjay Babu <sanjaytkbabu@gmail.com>
Date: Tue, 20 Jan 2026 15:35:32 -0800
Subject: [PATCH 2/3] FE - scss main updated & variables removed

Signed-off-by: Sanjay Babu <sanjaytkbabu@gmail.com>
---
 frontend/src/assets/main.scss      |  6 ++--
 frontend/src/assets/variables.scss | 51 ------------------------------
 2 files changed, 3 insertions(+), 54 deletions(-)
 delete mode 100644 frontend/src/assets/variables.scss

diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
index 10512c8f8..42bb49cbd 100644
--- a/frontend/src/assets/main.scss
+++ b/frontend/src/assets/main.scss
@@ -112,11 +112,11 @@ label {
 }
 
 .app-error-background {
-  background-color: $app-error !important;
+  background-color: var(--p-red-1000) !important;
 }
 
 .app-error-border {
-  border-color: $app-error !important;
+  border-color: var(--p-red-1000)!important;
 }
 
 .app-error-color {
@@ -265,6 +265,6 @@ label {
 
 /* common */
 .disclaimer-block {
-  outline: solid 0.063rem $app-grey;
+  outline: solid 0.063rem var(--p-greyscale-200);
   border-radius: 0.5rem;
 }
diff --git a/frontend/src/assets/variables.scss b/frontend/src/assets/variables.scss
deleted file mode 100644
index d3b744bc5..000000000
--- a/frontend/src/assets/variables.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-/* --------- variable overrides for primevue--------- */
-// ref: https://primevue.org/colors/
-:root {
-  // --text-color: #495057;
-  // --primary-color: #036;
-}
-
-/* -------- custom css variables --------- */
-// buttons, links
-$app-primary: #036;
-$app-error: #D8292F;
-
-$app-link-text: #1a5a96;
-$app-link-text-hover: #00f;
-$app-hover: #4696EC;
-$app-outline-on-primary: #fff;
-$app-out-of-focus: #ccc;
-$app-green: #2e8540;
-$app-grey: #e9ecef;
-
-// highlighted sections, table rows
-$app-highlight-background: #d9e1e8;
-$app-table-stripe-background: #f2f2f2;
-
-// project view various colors
-$app-proj-white-one: #efefef;
-$app-proj-white-two: #fbfbfb;
-$app-proj-grey-one: #868585;
-$app-proj-grey-two: #999999;
-$app-proj-black: rgba(0, 0, 0, 0.03);
-
-// AuthorizationStatusPill hex colors
-$app-pill-green: #42814a;
-$app-pill-lightgreen: #f6fff8;
-
-$app-pill-grey: #f3f2f1;
-$app-pill-lightgrey: #353433;
-
-$app-pill-red: #ce3e39;
-$app-pill-lightred: #f4e1e2;
-
-$app-pill-yellow: #f8bb47;
-$app-pill-lightyellow: #fef1d8;
-
-$app-pill-text: #2d2d2d;
-
-$app-red-border: #A12622; // TODO: Check color with PrimeVue 4 style
-$app-red-background: #F2DEDE; // TODO: Check color with PrimeVue 4 style
-$app-red-text: #A12622; // TODO: Check color with PrimeVue 4 style
-
-

From a1b3df3c6c5f44bb8c3f024f0c68659fa38683f5 Mon Sep 17 00:00:00 2001
From: Sanjay Babu <sanjaytkbabu@gmail.com>
Date: Tue, 20 Jan 2026 15:45:34 -0800
Subject: [PATCH 3/3] FE - scss variables reference removed from vite config

Signed-off-by: Sanjay Babu <sanjaytkbabu@gmail.com>
---
 frontend/vite.config.mts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/vite.config.mts b/frontend/vite.config.mts
index 5fce8dacd..85940fe76 100644
--- a/frontend/vite.config.mts
+++ b/frontend/vite.config.mts
@@ -18,7 +18,6 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: '@use "@/assets/variables.scss" as *;',
         api: 'modern'
       }
     }