Psp 8109 - color palette refactor (#3951)

* psp-8109 app color updates. * fix * test corrections. * merge correction. * psp-8109 cleanup, PR feedback. * corrections. * formatting. * snapshots.
bcgov · May 1, 2024 · 7c06093 · 7c06093
1 parent 5eeda47
commit 7c06093
Show file tree

Hide file tree

Showing 143 changed files with 619 additions and 471 deletions.
diff --git a/source/frontend/package-lock.json b/source/frontend/package-lock.json
diff --git a/source/frontend/package.json b/source/frontend/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@bcgov/bc-sans": "1.0.1",
+    "@bcgov/design-tokens": "^3.0.0-rc1",
     "@react-keycloak/web": "3.4.0",
     "@reduxjs/toolkit": "1.8.6",
     "@types/polylabel": "1.0.5",

diff --git a/source/frontend/src/assets/scss/App.scss b/source/frontend/src/assets/scss/App.scss
@@ -1,22 +1,27 @@
 @import './styles.scss';
 
+.Toastify__toast.Toastify__toast--dark {
+  color: #fff;
+  background-color: var(--surface-color-background-dark-blue);
+}
+
 .Toastify__toast .Toastify__toast-body {
   word-break: break-word;
 }
 
-.Toastify__toast.Toastify__toast--dark {
-  color: #fff;
-  background-color: $secondary-variant-color;
+.Toastify__toast {
+  word-break: break-word;
+  filter: drop-shadow(0.2rem 0.2rem 0.4rem black);
 }
 
 .Toastify__toast.Toastify__toast--warning {
-  color: $text-color;
-  background-color: $light-accent-color;
+  color: var(--typography-color-secondary);
+  background-color: var(--support-surface-color-warning);
 }
 
 .Toastify__toast.Toastify__toast--error {
   color: #fff;
-  background-color: $danger-color;
+  background-color: var(--surface-color-primary-danger-button-default);
 }
 
 .tooltip {
@@ -69,7 +74,7 @@
 a {
   color: $link-color;
   &:hover {
-    color: $secondary-variant-color;
+    color: $link-hover-color;
     text-decoration: underline;
   }
 }
@@ -92,7 +97,7 @@ a {
     border-top-width: 0.2rem;
     border-bottom-width: 0.2rem;
     &:hover {
-      border-color: $secondary-variant-color;
+      border-color: $link-hover-color;
     }
   }
 
@@ -101,7 +106,7 @@ a {
     background-color: $link-color;
 
     &:hover {
-      background-color: $secondary-variant-color;
+      background-color: $link-hover-color;
     }
   }
 
@@ -115,17 +120,17 @@ a {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     &:hover {
-      border-color: $secondary-variant-color;
+      border-color: $link-hover-color;
     }
   }
 
   .error {
-    color: $danger-color;
+    color: var(--surface-color-primary-danger-button-default);
   }
 
   .btn.btn-success,
   .btn.btn-success:active {
-    background-color: $completed-color;
+    background-color: --support-border-color-success;
   }
 
   ul.pagination li {
@@ -149,10 +154,10 @@ a {
   //by default, highlight dropdown options blue
   .dropdown-item,
   .dropdown-header {
-    color: $text-color;
+    color: var(--typography-color-secondary);
     &:hover {
       color: #fff;
-      background-color: $active-color;
+      background-color: $link-hover-color;
     }
   }
 }
diff --git a/source/frontend/src/assets/scss/_variables.module.scss b/source/frontend/src/assets/scss/_variables.module.scss
@@ -6,61 +6,20 @@
   footerHeight: $footer-height;
   headerHeight: $header-height;
 
-  // table ui
-  tableHoverColor: $table-hover-color;
-  tableHeaderBgColor: $table-header-bg-color;
-  tableHeaderBorderColor: $table-header-border-color;
-  tableColumnBorderColor: $table-column-border-color;
-  tableEvenRowBgColor: $table-even-row-bg-color;
-  tableOddRowBgColor: $table-odd-row-bg-color;
-  // text headings - H1, H2 etc
-  headingTextColor: $heading-text-color;
-  headingBorderColor: $heading-border-color;
   // map popup
-  mapPopupBackgroundColor: $map-popup-background-color;
+  highlightBackgroundColor: $highlight-background-color;
   // buttons
-  buttonOutlineColor: $icon-light-color;
-  buttonInfoColor: $button-info-color;
+  borderOutlineColor: $border-outline-color;
 
   // Colors
-  accentColor: $accent-color;
-  activeColor: $active-color;
-  completedColor: $completed-color;
+  warningBackgroundColor: $warning-background-color;
+  numberBackgroundColor: $number-background-color;
   dangerBackgroundColor: $danger-background-color;
-  dangerColor: $danger-color;
-  darkBlue: $dark-blue;
-  darkVariantColor: $dark-variant-color;
-  disabledColor: $disabled-color;
-  disabledFieldBackgroundColor: $disabled-field-background-color;
-  discardedColor: $discarded-color;
-  draftColor: $draft-color;
-  dropdownBackgroundColor: $dropdown-background-color;
-  filterBackgroundColor: $filter-background-color;
   filterBoxColor: $filter-box-color;
-  fontDangerColor: $font-danger-color;
-  fontWarningColor: $font-warning-color;
-  formBackgroundColor: $form-background-color;
-  formControlTextColor: $form-control-text-color;
-  formTextColor: $form-text-color;
-  iconLightColor: $icon-light-color;
-  lightAccentColor: $light-accent-color;
-  lightDangerColor: $light-danger-color;
-  lightVariantColor: $light-variant-color;
+  textWarningColor: $text-warning-color;
   linkColor: $link-color;
   linkHoverColor: $link-hover-color;
-  primaryBackgroundColor: $primary-background-color;
-  primaryBorderColor: $primary-border-color;
-  primaryColor: $primary-color;
-  primaryHoverColor: $primary-hover-color;
-  primaryLightColor: $primary-light-color;
-  secondaryVariantColor: $secondary-variant-color;
-  selectedColor: $selected-color;
-  slideOutBlue: $slide-out-blue;
-  sresIconColor: $sres-icon-color;
-  subtleColor: $subtle-color;
-  summaryBorderColor: $summary-border-color;
-  summaryColor: $summary-color;
-  textColor: $text-color;
-  expiredColor: $expired-color;
-  expiredBackgroundColor: $expired-background-color;
+  activeActionColor: $active-action-color;
+  headerTextColor: $header-text-color;
+  headerBorderColor: $header-border-color;
 }
diff --git a/source/frontend/src/assets/scss/colors.scss b/source/frontend/src/assets/scss/colors.scss
@@ -1,55 +1,23 @@
-$primary-color: #003366;
-$primary-hover-color: #335c85;
-$primary-light-color: #38598a;
-$secondary-variant-color: #428bca;
-$light-variant-color: #606060;
-$dark-variant-color: #121212;
-$text-color: #494949;
-$form-text-color: #212529;
-$form-control-text-color: #495057;
-$form-background-color: #d9d9d9;
-$dropdown-background-color: #32507c;
-$accent-color: #fcba19;
-$light-accent-color: #fcd573;
-$sres-icon-color: #172b4d;
-$danger-color: #d8292f;
-$danger-background-color: #f2dede;
-$light-danger-color: #fae1e7;
-$font-danger-color: #a12622;
-$icon-light-color: #3b99fc;
-$active-color: #007bff;
-$completed-color: #2e8540;
-$filter-background-color: #f2f2f2;
-$slide-out-blue: #1a5a96;
-$selected-color: #dff0d8;
-$dark-blue: #313132;
-$primary-background-color: white;
-$primary-border-color: #aaaaaa;
-$disabled-color: #959da5;
-$disabled-field-background-color: #e9ecef;
-$discarded-color: #bcbec5;
-$filter-box-color: #d9eaf7;
-$draft-color: #1976d2;
-$link-color: #1a5a96;
-$link-hover-color: #0056b3;
-$subtle-color: #aaaaaa;
-$summary-color: #f9f1c6;
-$summary-border-color: #fcba19;
-$font-warning-color: #6c4a00;
-$expired-color: #6c4a00;
-$expired-background-color: #f9f1c6;
-// table ui
-$table-hover-color: #dee2e6;
-$table-header-text-color: #494949;
-$table-header-bg-color: #ffffff;
-$table-header-border-color: #8c8c8c;
-$table-column-border-color: #f2f2f2;
-$table-even-row-bg-color: #f2f2f2;
-$table-odd-row-bg-color: #ffffff;
-// text headings - H1, H2 etc
-$heading-text-color: #494949;
-$heading-border-color: #666666;
-// map popup
-$map-popup-background-color: #fffefa;
-// buttons
-$button-info-color: #909090;
+@import '@/../node_modules/@bcgov/design-tokens/css/variables.css';
+
+$pims-blue-50: #428bca;
+$pims-grey-80: #606060;
+$pims-yellow-10: #fef1d8;
+$pims-yellow-30: #fcba19;
+$pims-red-10: #f2dede;
+$pims-white: #f2f2f2;
+$pims-blue-20: #d9eaf7;
+$pims-yellow-100: #6c4a00;
+
+$active-action-color: $pims-blue-50;
+$border-outline-color: $pims-grey-80;
+$warning-background-color: $pims-yellow-10;
+$number-background-color: $pims-yellow-30;
+$danger-background-color: $pims-red-10;
+$highlight-background-color: $pims-white;
+$filter-box-color: $pims-blue-20;
+$text-warning-color: $pims-yellow-100;
+$header-text-color: #{'var(--theme-blue-100)'};
+$header-border-color: #{'var(--theme-blue-90)'};
+$link-color: #{'var(--surface-color-primary-button-default)'};
+$link-hover-color: #{'var(--surface-color-primary-button-hover)'};
diff --git a/source/frontend/src/assets/scss/index.scss b/source/frontend/src/assets/scss/index.scss
@@ -89,7 +89,7 @@ input::-webkit-inner-spin-button {
 //by default, invalid fields are outlined in red
 .form-row .form-control.is-invalid {
   background-image: none;
-  border-color: $danger-color;
+  border-color: var(--surface-color-primary-danger-button-default);
 }
 
 .react-datepicker-wrapper,

diff --git a/source/frontend/src/components/Table/ColumnSort.tsx b/source/frontend/src/components/Table/ColumnSort.tsx
@@ -26,13 +26,13 @@ interface Props {
 }
 
 const Down = styled(IoMdArrowDropdown)<Props>`
-  color: ${props => (props.$active ? variables.activeColor : undefined)};
+  color: ${props => (props.$active ? variables.linkColor : undefined)};
   width: 1.6rem;
   height: 1.6rem;
 `;
 
 const Up = styled(IoMdArrowDropup)<Props>`
-  color: ${props => (props.$active ? variables.activeColor : undefined)};
+  color: ${props => (props.$active ? variables.linkColor : undefined)};
   width: 1.6rem;
   height: 1.6rem;
 `;