Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Psp 8109 - color palette refactor #3951

Merged
merged 8 commits into from
May 1, 2024
Merged

Psp 8109 - color palette refactor #3951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1a45517
psp-8109 app color updates.
devinleighsmith Apr 3, 2024
2fcba0f
fix
devinleighsmith Apr 3, 2024
903d5b3
test corrections.
devinleighsmith Apr 15, 2024
297b40d
merge correction.
devinleighsmith Apr 15, 2024
5a2c8a9
psp-8109 cleanup, PR feedback.
devinleighsmith Apr 23, 2024
02015f2
corrections.
devinleighsmith Apr 23, 2024
1210ddb
formatting.
devinleighsmith Apr 23, 2024
a9edb92
snapshots.
devinleighsmith Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions source/frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions source/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
33 changes: 19 additions & 14 deletions source/frontend/src/assets/scss/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
@import './styles.scss';

.Toastify__toast.Toastify__toast--dark {
color: #fff;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit and a question: are we attempting to map hardcoded colors like this #fff to our new tokens (ie bc-typography-text-color or something similar) or is that outside the scope of this and would be handled with a new tech-debt task?

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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could this be done using theme instead? Something like:
color: ${props => props.theme.bcTokens.typographyColorDanger};

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. scss files don't have access to the theme. We would need to refactor all files using scss into styled components, which is outside the scope of this palette swap story (in my opinion).

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 {
Expand Down Expand Up @@ -69,7 +74,7 @@
a {
color: $link-color;
&:hover {
color: $secondary-variant-color;
color: $link-hover-color;
text-decoration: underline;
}
}
Expand All @@ -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;
}
}

Expand All @@ -101,7 +106,7 @@ a {
background-color: $link-color;

&:hover {
background-color: $secondary-variant-color;
background-color: $link-hover-color;
}
}

Expand All @@ -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;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

believe you would need var(...) here?

}

ul.pagination li {
Expand All @@ -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;
}
}
}
57 changes: 8 additions & 49 deletions source/frontend/src/assets/scss/_variables.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
78 changes: 23 additions & 55 deletions source/frontend/src/assets/scss/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)'};
2 changes: 1 addition & 1 deletion source/frontend/src/assets/scss/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions source/frontend/src/components/Table/ColumnSort.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
Expand Down
Loading