diff --git a/source/frontend/package-lock.json b/source/frontend/package-lock.json index af6a22081f..666c2ff967 100644 --- a/source/frontend/package-lock.json +++ b/source/frontend/package-lock.json @@ -9,6 +9,7 @@ "version": "5.2.0-78.3", "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", @@ -2188,6 +2189,11 @@ "resolved": "https://registry.npmjs.org/@bcgov/bc-sans/-/bc-sans-1.0.1.tgz", "integrity": "sha512-4suRUBFeHcuFkwXXJu9pKJNB5Z2G3bpuLEHIq203KVCKC8KrsnqvsyUOf645TypgLwqOTOYCETiXYzfxF4gLAw==" }, + "node_modules/@bcgov/design-tokens": { + "version": "3.0.0-rc1", + "resolved": "https://registry.npmjs.org/@bcgov/design-tokens/-/design-tokens-3.0.0-rc1.tgz", + "integrity": "sha512-Zviyhutjnr2KJez3xHl7uTFs/OI2bC7sMYcOeVnkzFxI4PUE38GFY0i18/AraPtMoeV+77jvlm8HziOeauSSTA==" + }, "node_modules/@bcoe/v8-coverage": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", diff --git a/source/frontend/package.json b/source/frontend/package.json index 961401ccc8..335cc91f75 100644 --- 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 index ad71ef731a..59f1030d3e 100644 --- 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 index 2f43449d5d..706761d1a1 100644 --- 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 index 581d328f50..008d557a04 100644 --- 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 index b8502ece0f..b534dfc19e 100644 --- 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 index 991ade1ca6..12e9a5b9f0 100644 --- 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)` - color: ${props => (props.$active ? variables.activeColor : undefined)}; + color: ${props => (props.$active ? variables.linkColor : undefined)}; width: 1.6rem; height: 1.6rem; `; const Up = styled(IoMdArrowDropup)` - color: ${props => (props.$active ? variables.activeColor : undefined)}; + color: ${props => (props.$active ? variables.linkColor : undefined)}; width: 1.6rem; height: 1.6rem; `; diff --git a/source/frontend/src/components/Table/Table.scss b/source/frontend/src/components/Table/Table.scss index 379e0691b8..e3617a95ca 100644 --- a/source/frontend/src/components/Table/Table.scss +++ b/source/frontend/src/components/Table/Table.scss @@ -3,13 +3,13 @@ .table { .thead-light { .th { - color: $table-header-text-color; - background-color: $table-header-bg-color; + color: var(--typography-color-secondary); + background-color: var(--surface-color-forms-default); } } .thead { .th { - border-bottom: 0.2rem solid $table-header-border-color; + border-bottom: 0.2rem solid $border-outline-color; cursor: pointer; font-size: 1.6rem; font-weight: bold; @@ -19,20 +19,20 @@ .tbody { .tr-wrapper { &:nth-child(even) { - background-color: $table-even-row-bg-color; + background-color: $highlight-background-color; } &:nth-child(odd) { - background-color: $table-odd-row-bg-color; + background-color: var(--surface-color-forms-default); &:last-child { - border-bottom: 0.1rem solid $table-column-border-color; + border-bottom: 0.1rem solid $highlight-background-color; } } .tr { &:hover { - background-color: $table-hover-color; + background-color: $highlight-background-color; } &.selected { - background-color: $selected-color; + background-color: $highlight-background-color; } } .collapse { @@ -57,30 +57,30 @@ } .svg-btn { - color: $text-color; + color: var(--typography-color-secondary); } .svg-btn:hover { - color: $icon-light-color; + color: $link-hover-color; text-decoration: none; cursor: pointer; } .svg-btn:hover svg { - fill: $icon-light-color; + fill: $link-hover-color; stroke: #fff; } .svg-btn.active { - color: $icon-light-color; + color: $link-hover-color; border-bottom-style: solid; - border-bottom-color: $accent-color; + border-bottom-color: var(--theme-gold-100); border-bottom-width: 0.1rem; background-color: none !important; } .svg-btn.active svg { - fill: $icon-light-color; + fill: $link-hover-color; stroke: #fff; } @@ -89,17 +89,17 @@ min-height: 5rem; padding: 0.5rem 1.1rem; align-items: center; - border-right: 0.1rem solid $table-column-border-color; + border-right: 0.1rem solid $highlight-background-color; &:last-child { border-right: none; } &.svg-btn.expander:hover, &.svg-btn.expander:hover svg { - fill: $accent-color; + fill: var(--theme-gold-100); } &.svg-btn.reset-filter:hover, &.svg-btn.reset-filter:hover svg { - fill: $accent-color; + fill: var(--theme-gold-100); } &.expander, &.reset-filter { @@ -144,7 +144,7 @@ } &.active { - color: $active-color; + color: $link-hover-color; } } } diff --git a/source/frontend/src/components/common/GenericModal.tsx b/source/frontend/src/components/common/GenericModal.tsx index 7554bdb807..086b2ba2a1 100644 --- a/source/frontend/src/components/common/GenericModal.tsx +++ b/source/frontend/src/components/common/GenericModal.tsx @@ -315,8 +315,8 @@ const StyledModal = styled(Modal)<{ $draggable?: boolean }>` display: flex; justify-content: flex-start; - color: ${props => props.theme.css.primaryBackgroundColor}; - background-color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.bcTokens.surfaceColorFormsDefault}; + background-color: ${props => props.theme.bcTokens.surfaceColorBackgroundDarkBlue}; /* show move cursor (crosshair) for draggable modals */ cursor: ${props => (props.$draggable ? 'move' : 'default')}; @@ -394,36 +394,36 @@ const StyledModal = styled(Modal)<{ $draggable?: boolean }>` &.info-variant { .modal-header { - color: ${props => props.theme.css.darkBlue}; + color: ${props => props.theme.bcTokens.surfaceColorBackgroundDarkBlue}; background-color: ${props => props.theme.css.filterBoxColor}; } .modal-close-btn { - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; cursor: pointer; } } &.error-variant { .modal-header { - color: ${props => props.theme.css.fontDangerColor}; + color: ${props => props.theme.bcTokens.typographyColorDanger}; background-color: ${props => props.theme.css.dangerBackgroundColor}; } .modal-close-btn { - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; cursor: pointer; } } &.warning-variant { .modal-header { - color: ${props => props.theme.css.fontWarningColor}; - background-color: ${props => props.theme.css.summaryColor}; + color: ${props => props.theme.css.textWarningColor}; + background-color: ${props => props.theme.css.warningBackgroundColor}; } .modal-close-btn { - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; cursor: pointer; } } @@ -438,7 +438,7 @@ const PopupContainer = styled.div` .modal-header { height: 3.8rem; padding: 0 1rem; - background-color: ${({ theme }) => theme.css.primaryColor}; + background-color: ${({ theme }) => theme.bcTokens.surfaceColorBackgroundDarkBlue}; .h4 { color: white; font-family: BcSans-Bold; diff --git a/source/frontend/src/components/common/Section/Section.tsx b/source/frontend/src/components/common/Section/Section.tsx index 5080283286..0584e605e6 100644 --- a/source/frontend/src/components/common/Section/Section.tsx +++ b/source/frontend/src/components/common/Section/Section.tsx @@ -77,8 +77,8 @@ export const Section: React.FC< export const StyledSectionHeader = styled.h2<{ isStyledHeader?: boolean }>` font-size: ${props => (props.isStyledHeader === true ? '1.0em' : '')}; font-weight: ${props => (props.isStyledHeader === true ? '' : 'bold')}; - color: ${props => props.theme.css.primaryColor}; - border-bottom: 0.2rem ${props => props.theme.css.primaryColor} solid; + color: ${props => props.theme.css.headerTextColor}; + border-bottom: 0.2rem ${props => props.theme.css.headerBorderColor} solid; margin-bottom: 2rem; `; diff --git a/source/frontend/src/components/common/Section/SectionStyles.tsx b/source/frontend/src/components/common/Section/SectionStyles.tsx index 0035f9fa99..e9d1d227cb 100644 --- a/source/frontend/src/components/common/Section/SectionStyles.tsx +++ b/source/frontend/src/components/common/Section/SectionStyles.tsx @@ -67,7 +67,7 @@ export const ArrowDropUpIcon = styled(MdArrowDropUp)` `; export const StyledSummarySection = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; padding-top: 1rem; `; @@ -78,6 +78,6 @@ export const StyledEditWrapper = styled.div` `; export const StyledSubtleText = styled.p` - color: ${props => props.theme.css.subtleColor}; + color: ${props => props.theme.bcTokens.iconsColorDisabled}; text-align: left; `; diff --git a/source/frontend/src/components/common/TabView.tsx b/source/frontend/src/components/common/TabView.tsx index 6883d95ca1..255e26fe4b 100644 --- a/source/frontend/src/components/common/TabView.tsx +++ b/source/frontend/src/components/common/TabView.tsx @@ -21,7 +21,7 @@ const StyledTabWrapper = styled.div` border-radius: 0 0.4rem 0.4rem 0.4rem; height: calc(100% - 2.5rem); // subtract nav height overflow-y: auto; - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; } height: 100%; `; diff --git a/source/frontend/src/components/common/TooltipIcon.scss b/source/frontend/src/components/common/TooltipIcon.scss index ab93071000..a0a28e9668 100644 --- a/source/frontend/src/components/common/TooltipIcon.scss +++ b/source/frontend/src/components/common/TooltipIcon.scss @@ -3,14 +3,14 @@ .tooltip-icon { min-width: 1.4rem; min-height: 1.4rem; - color: $secondary-variant-color; + color: $link-color; margin: 0rem 0.2rem; } .tooltip-icon.warning { min-width: 1.4rem; min-height: 1.4rem; - color: $font-warning-color; + color: $text-warning-color; margin: 0rem 0.2rem; } @@ -19,20 +19,20 @@ .tooltip-inner { text-align: left; max-width: 40rem; - background-color: $secondary-variant-color; + background-color: var(--theme-blue-80); color: #ffffff; } &.bs-tooltip-top .arrow::before { - border-top-color: $secondary-variant-color; + border-top-color: var(--theme-blue-80); } &.bs-tooltip-right .arrow::before { - border-right-color: $secondary-variant-color; + border-right-color: var(--theme-blue-80); } &.bs-tooltip-left .arrow::before { - border-left-color: $secondary-variant-color; + border-left-color: var(--theme-blue-80); } &.bs-tooltip-bottom .arrow::before { - border-bottom-color: $secondary-variant-color; + border-bottom-color: var(--theme-blue-80); } } @@ -41,21 +41,21 @@ .tooltip-inner { text-align: left; max-width: 40rem; - background-color: $summary-color; - color: $font-warning-color; + background-color: $warning-background-color; + color: $text-warning-color; font-weight: 700; } &.bs-tooltip-top .arrow::before { - border-top-color: $secondary-variant-color; + border-top-color: var(--support-surface-color-warning); } &.bs-tooltip-right .arrow::before { - border-right-color: $secondary-variant-color; + border-right-color: var(--support-surface-color-warning); } &.bs-tooltip-left .arrow::before { - border-left-color: $secondary-variant-color; + border-left-color: var(--support-surface-color-warning); } &.bs-tooltip-bottom .arrow::before { - border-bottom-color: $secondary-variant-color; + border-bottom-color: var(--support-surface-color-warning); } } diff --git a/source/frontend/src/components/common/buttons/Button.tsx b/source/frontend/src/components/common/buttons/Button.tsx index 096a515816..e698a6a1e2 100644 --- a/source/frontend/src/components/common/buttons/Button.tsx +++ b/source/frontend/src/components/common/buttons/Button.tsx @@ -86,39 +86,39 @@ const StyledButton = styled(BootstrapButton)` &:focus { outline-width: 0.4rem; outline-style: solid; - outline-color: ${({ theme }) => theme.css.buttonOutlineColor}; + outline-color: ${({ theme }) => theme.css.linkHoverColor}; outline-offset: 1px; box-shadow: none; } // PRIMARY buttons &.btn-primary { - color: ${({ theme }) => theme.css.primaryBackgroundColor}; - background-color: ${({ theme }) => theme.css.primaryColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorFormsDefault}; + background-color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryButtonDefault}; border: none; &:hover, &:active, &:focus { - background-color: ${({ theme }) => theme.css.primaryHoverColor}; + background-color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryButtonHover}; } } // SECONDARY buttons &.btn-secondary { - color: ${({ theme }) => theme.css.primaryColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryButtonDefault}; background: none; - border-color: ${({ theme }) => theme.css.primaryColor}; + border-color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryButtonDefault}; &:hover, &:active, &:focus { - color: ${({ theme }) => theme.css.primaryBackgroundColor}; - background-color: ${({ theme }) => theme.css.primaryColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorFormsDefault}; + background-color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryButtonDefault}; } } // INFO buttons &.btn-info { - color: ${({ theme }) => theme.css.buttonInfoColor}; + color: ${({ theme }) => theme.bcTokens.themeGray70}; border: none; background: none; padding-left: 0.6rem; @@ -126,60 +126,60 @@ const StyledButton = styled(BootstrapButton)` &:hover, &:active, &:focus { - color: ${({ theme }) => theme.css.sresIconColor}; + color: ${({ theme }) => theme.css.linkHoverColor}; background: none; } } // LIGHT buttons &.btn-light { - color: ${({ theme }) => theme.css.primaryBackgroundColor}; - background-color: ${({ theme }) => theme.css.lightVariantColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorFormsDefault}; + background-color: ${({ theme }) => theme.css.borderOutlineColor}; border: none; &:hover, &:active, &:focus { - color: ${({ theme }) => theme.css.primaryBackgroundColor}; - background-color: ${({ theme }) => theme.css.lightVariantColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorFormsDefault}; + background-color: ${({ theme }) => theme.css.borderOutlineColor}; } } // DARK buttons &.btn-dark { - color: ${({ theme }) => theme.css.primaryBackgroundColor}; - background-color: ${({ theme }) => theme.css.darkVariantColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorFormsDefault}; + background-color: ${({ theme }) => theme.bcTokens.typographyColorSecondary}; border: none; &:hover, &:active, &:focus { - color: ${({ theme }) => theme.css.primaryBackgroundColor}; - background-color: ${({ theme }) => theme.css.darkVariantColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorFormsDefault}; + background-color: ${({ theme }) => theme.bcTokens.typographyColorSecondary}; } } // DANGER buttons &.btn-danger { - color: ${({ theme }) => theme.css.primaryBackgroundColor}; - background-color: ${({ theme }) => theme.css.dangerColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorFormsDefault}; + background-color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; &:hover, &:active, &:focus { - color: ${({ theme }) => theme.css.primaryBackgroundColor}; - background-color: ${({ theme }) => theme.css.dangerColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorFormsDefault}; + background-color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; } } // WARNING buttons &.btn-warning { - color: ${({ theme }) => theme.css.primaryBackgroundColor}; - background-color: ${({ theme }) => theme.css.accentColor}; - border-color: ${({ theme }) => theme.css.accentColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorFormsDefault}; + background-color: ${({ theme }) => theme.bcTokens.themeGold100}; + border-color: ${({ theme }) => theme.bcTokens.themeGold100}; &:hover, &:active, &:focus { - color: ${({ theme }) => theme.css.primaryBackgroundColor}; - border-color: ${({ theme }) => theme.css.accentColor}; - background-color: ${({ theme }) => theme.css.accentColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorFormsDefault}; + border-color: ${({ theme }) => theme.bcTokens.themeGold100}; + background-color: ${({ theme }) => theme.bcTokens.themeGold100}; } } @@ -210,7 +210,7 @@ const StyledButton = styled(BootstrapButton)` &:disabled, &.disabled { - color: ${({ theme }) => theme.css.disabledColor}; + color: ${({ theme }) => theme.bcTokens.iconsColorDisabled}; background: none; pointer-events: none; } diff --git a/source/frontend/src/components/common/buttons/IconButton.tsx b/source/frontend/src/components/common/buttons/IconButton.tsx index 8fcfc9fb78..ed57cca6d2 100644 --- a/source/frontend/src/components/common/buttons/IconButton.tsx +++ b/source/frontend/src/components/common/buttons/IconButton.tsx @@ -23,27 +23,31 @@ export const StyledIconButton = styled(Button)` &.btn-primary { svg { color: ${({ theme, disabled }) => - disabled ? theme.css.disabledColor : theme.css.primaryColor}; + disabled + ? theme.bcTokens.iconsColorDisabled + : theme.bcTokens.surfaceColorPrimaryButtonDefault}; } svg:hover { color: ${({ theme, disabled }) => - disabled ? theme.css.disabledColor : theme.css.primaryColor}; + disabled + ? theme.bcTokens.iconsColorDisabled + : theme.bcTokens.surfaceColorPrimaryButtonDefault}; } } &.btn-light { svg { - color: ${({ theme }) => theme.css.slideOutBlue}; + color: ${({ theme }) => theme.css.linkColor}; } svg:hover { - color: ${({ theme }) => theme.css.dangerColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; } } &.btn-info { svg { - color: ${({ theme }) => theme.css.slideOutBlue}; + color: ${({ theme }) => theme.css.linkColor}; } svg:hover { - color: ${({ theme }) => theme.css.activeColor}; + color: ${({ theme }) => theme.css.linkHoverColor}; } } } diff --git a/source/frontend/src/components/common/buttons/RemoveButton.tsx b/source/frontend/src/components/common/buttons/RemoveButton.tsx index 4450e59cb1..22df0ce57e 100644 --- a/source/frontend/src/components/common/buttons/RemoveButton.tsx +++ b/source/frontend/src/components/common/buttons/RemoveButton.tsx @@ -60,7 +60,7 @@ export const StyledRemoveIconButton = styled(StyledIconButton)` &&.btn { &.btn-primary { svg { - color: ${({ theme }) => theme.css.subtleColor}; + color: ${({ theme }) => theme.bcTokens.iconsColorDisabled}; } text-decoration: none; line-height: unset; diff --git a/source/frontend/src/components/common/form/Check.scss b/source/frontend/src/components/common/form/Check.scss index d31f8d047e..01a4516666 100644 --- a/source/frontend/src/components/common/form/Check.scss +++ b/source/frontend/src/components/common/form/Check.scss @@ -11,7 +11,7 @@ .required.form-group { .check-field { label { - border-bottom: 0.1rem solid $secondary-variant-color; + border-bottom: 0.1rem solid $border-outline-color; } } } diff --git a/source/frontend/src/components/common/form/ContactInput.tsx b/source/frontend/src/components/common/form/ContactInput.tsx index 2d130c7bc1..3fb83df285 100644 --- a/source/frontend/src/components/common/form/ContactInput.tsx +++ b/source/frontend/src/components/common/form/ContactInput.tsx @@ -107,10 +107,10 @@ const StyledDiv = styled.div` padding-right: 2.1rem; min-height: 2.5em; background-image: none; - color: ${props => props.theme.css.formControlTextColor}; - border: ${props => props.theme.css.lightVariantColor} solid 0.1rem; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; + border: ${props => props.theme.css.borderOutlineColor} solid 0.1rem; &.is-invalid { - border: ${props => props.theme.css.dangerColor} solid 0.1rem; + border: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault} solid 0.1rem; } `; @@ -119,7 +119,7 @@ export const StyledRemoveLinkButton = styled(LinkButton)` position: absolute; top: calc(50% - 1.4rem); right: 0.4rem; - color: ${props => props.theme.css.primaryBorderColor}; + color: ${props => props.theme.bcTokens.iconsColorDisabled}; text-decoration: none; line-height: unset; .text { @@ -128,7 +128,7 @@ export const StyledRemoveLinkButton = styled(LinkButton)` &:hover, &:active, &:focus { - color: ${props => props.theme.css.dangerColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; text-decoration: none; opacity: unset; } diff --git a/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx b/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx index 935c39eadd..b8338b70f0 100644 --- a/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx +++ b/source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx @@ -115,10 +115,10 @@ const StyledDiv = styled.div` border-radius: 0.3rem; padding: 0.6rem; padding-right: 2.1rem; - color: ${props => props.theme.css.formControlTextColor}; - border: ${props => props.theme.css.lightVariantColor} solid 0.1rem; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; + border: ${props => props.theme.css.borderOutlineColor} solid 0.1rem; &.is-invalid { - border: ${props => props.theme.css.dangerColor} solid 0.1rem; + border: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault} solid 0.1rem; } `; @@ -127,7 +127,7 @@ const StyledRemoveLinkButton = styled(LinkButton)` position: absolute; top: calc(50% - 1.4rem); right: 0.4rem; - color: ${props => props.theme.css.primaryBorderColor}; + color: ${props => props.theme.bcTokens.iconsColorDisabled}; text-decoration: none; line-height: unset; .text { @@ -136,7 +136,7 @@ const StyledRemoveLinkButton = styled(LinkButton)` &:hover, &:active, &:focus { - color: ${props => props.theme.css.dangerColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; text-decoration: none; opacity: unset; } diff --git a/source/frontend/src/components/common/form/FileDragAndDrop.tsx b/source/frontend/src/components/common/form/FileDragAndDrop.tsx index 3cf1ba6bb6..efbed9baa9 100644 --- a/source/frontend/src/components/common/form/FileDragAndDrop.tsx +++ b/source/frontend/src/components/common/form/FileDragAndDrop.tsx @@ -110,11 +110,11 @@ const FileDragAndDrop: FunctionComponent` - border: 1px solid ${({ theme }) => theme.css.lightVariantColor}; + border: 1px solid ${({ theme }) => theme.css.borderOutlineColor}; border-style: ${({ isDragging }) => (isDragging ? 'solid' : 'dashed')}; - border: ${props => (props.isDragging ? `1px solid ${props.theme.css.draftColor}` : '')}; + border: ${props => (props.isDragging ? `1px solid ${props.theme.css.activeActionColor}` : '')}; background-color: ${props => (props.isDragging ? props.theme.css.filterBoxColor : '')}; diff --git a/source/frontend/src/components/common/form/FormItem.tsx b/source/frontend/src/components/common/form/FormItem.tsx index 10710a5ab8..af3dca6ea9 100644 --- a/source/frontend/src/components/common/form/FormItem.tsx +++ b/source/frontend/src/components/common/form/FormItem.tsx @@ -41,6 +41,6 @@ export default FormItem; const StyledDiv = styled.div` background: none; &.is-invalid { - border: ${props => props.theme.css.dangerColor} solid 0.1rem; + border: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault} solid 0.1rem; } `; diff --git a/source/frontend/src/components/common/form/FormTitleBar.tsx b/source/frontend/src/components/common/form/FormTitleBar.tsx index 26cc84ea07..8cd83b8d00 100644 --- a/source/frontend/src/components/common/form/FormTitleBar.tsx +++ b/source/frontend/src/components/common/form/FormTitleBar.tsx @@ -46,11 +46,11 @@ export const FormTitleBar: React.FC = ({ const Underline = styled.div` width: 100%; - border-bottom: solid 0.5rem ${props => props.theme.css.primaryLightColor}; + border-bottom: solid 0.5rem ${props => props.theme.bcTokens.surfaceColorBackgroundDarkBlue}; `; const CloseIcon = styled(FaWindowClose)` - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; font-size: 30px; cursor: pointer; `; diff --git a/source/frontend/src/components/common/form/Multiselect.tsx b/source/frontend/src/components/common/form/Multiselect.tsx index 16214a3cb5..e0409331fe 100644 --- a/source/frontend/src/components/common/form/Multiselect.tsx +++ b/source/frontend/src/components/common/form/Multiselect.tsx @@ -154,8 +154,8 @@ const defaultStyle = { const CloseIcon = styled(FaWindowClose)` margin-left: 0.5rem; cursor: pointer; - fill: ${props => props.theme.css.textColor}; + fill: ${props => props.theme.bcTokens.typographyColorSecondary}; &:hover { - fill: ${props => props.theme.css.dangerColor}; + fill: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; } `; diff --git a/source/frontend/src/components/common/form/Text.tsx b/source/frontend/src/components/common/form/Text.tsx index 23021ca21d..ae3676f5d9 100644 --- a/source/frontend/src/components/common/form/Text.tsx +++ b/source/frontend/src/components/common/form/Text.tsx @@ -23,5 +23,5 @@ export const Text: React.FC> = ({ }; const StyledSpan = styled.span` - color: ${props => props.theme.css.formControlTextColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; `; diff --git a/source/frontend/src/components/common/form/styles.ts b/source/frontend/src/components/common/form/styles.ts index 69426e74d3..1b38f1eecc 100644 --- a/source/frontend/src/components/common/form/styles.ts +++ b/source/frontend/src/components/common/form/styles.ts @@ -88,7 +88,7 @@ export const FormSection = styled.div` border-radius: 1rem; width: 100%; padding: 2.5rem; - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; export const FormSectionClear = styled.div` diff --git a/source/frontend/src/components/common/styles.ts b/source/frontend/src/components/common/styles.ts index 01b22d2be1..a0abd5be5a 100644 --- a/source/frontend/src/components/common/styles.ts +++ b/source/frontend/src/components/common/styles.ts @@ -36,7 +36,7 @@ export const Breadcrumb = styled(BsBreadcrumb)` export const SelectedText = styled.p` font-size: 1.4rem; - color: ${props => props.theme.css.completedColor}; + color: ${props => props.theme.bcTokens.iconColorSuccess}; `; /** @@ -69,55 +69,56 @@ export const FlexBox = styled.div` export const Tabs = styled(BsTabs)` background-color: white; - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.linkColor}; font-size: 1.4rem; border-color: transparent; .nav-tabs { height: auto; } .nav-item { + color: ${props => props.theme.css.linkColor}; min-width: 5rem; padding: 0.1rem 0.6rem; &:hover { - color: ${props => props.theme.css.secondaryVariantColor}; + color: ${props => props.theme.css.linkHoverColor}; border-color: transparent; text-decoration: underline; } &.active { - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; font-family: 'BCSans-Bold'; - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.linkHoverColor}; border-color: transparent; } } `; export const H1 = styled.h1` - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; font-family: 'BCSans-Bold'; font-size: 3.2rem; - border-bottom: solid 0.5rem ${props => props.theme.css.primaryLightColor}; + border-bottom: solid 0.5rem ${props => props.theme.css.headerBorderColor}; width: 100%; text-align: left; margin-bottom: 2rem; `; export const H2 = styled.h2` - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; font-family: 'BCSans-Bold'; font-size: 2.6rem; - border-bottom: solid 0.2rem ${props => props.theme.css.primaryLightColor}; + border-bottom: solid 0.2rem ${props => props.theme.css.headerBorderColor}; width: 100%; text-align: left; margin-bottom: 2rem; `; export const H3 = styled.h3` - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; font-family: 'BCSans-Bold'; font-size: 2rem; - border-bottom: solid 0.2rem ${props => props.theme.css.discardedColor}; + border-bottom: solid 0.2rem ${props => props.theme.css.actionColor}; width: 100%; text-align: left; margin-bottom: 2rem; @@ -131,7 +132,7 @@ export const FilterBoxForm = styled(Form)` export const StyledAddButton = styled(Button)` &.btn.btn-primary, &.btn.btn-primary:active { - background-color: ${props => props.theme.css.completedColor}; + background-color: ${props => props.theme.bcTokens.iconColorSuccess}; } `; @@ -152,7 +153,7 @@ export const StyledDivider = styled.div` `; export const StyledSectionParagraph = styled.p` - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; font-size: 1.6rem; text-decoration: none; `; @@ -161,7 +162,7 @@ export const TrayHeader = styled.div` font-size: 2rem; font-weight: bold; padding: 1rem; - background-color: ${props => props.theme.css.primaryColor}; + background-color: ${props => props.theme.bcTokens.surfaceColorPrimaryButtonDefault}; color: white; `; @@ -172,9 +173,9 @@ export const CloseButton = styled(Button)` float: right; padding: 0rem; cursor: pointer; - fill: ${props => props.theme.css.textColor}; + fill: ${props => props.theme.bcTokens.typographyColorSecondary}; &:hover { - fill: ${props => props.theme.css.secondaryVariantColor}; + fill: ${props => props.theme.css.typographyColorSecondaryInvert}; } } `; diff --git a/source/frontend/src/components/layout/Header/UserProfile.tsx b/source/frontend/src/components/layout/Header/UserProfile.tsx index 2ad00d530d..69dc487018 100644 --- a/source/frontend/src/components/layout/Header/UserProfile.tsx +++ b/source/frontend/src/components/layout/Header/UserProfile.tsx @@ -19,14 +19,14 @@ const StyleDropDown = styled(NavDropdown)` padding: 0.1rem; } .dropdown-item { - background-color: ${variables.primaryLightColor}; + background-color: ${props => props.theme.bcTokens.surfaceColorBackgroundDarkBlue}; border-top: 0.2rem solid ${variables.accentColor}; } `; /** shaded box the users system roles will be displayed in */ const RolesBox = styled.div` - background-color: ${variables.filterBackgroundColor}; + background-color: ${variables.highlightBackgroundColor}; margin: 0.5rem; `; diff --git a/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap b/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap index a21df9d87b..3525bb8103 100644 --- a/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap +++ b/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap @@ -17,6 +17,7 @@ exports[`SideNavbar display and logic > renders 1`] = ` -ms-flex-align: center; align-items: center; grid-area: iconbar; + background-color: #003366; -webkit-transition: 0.5s width; transition: 0.5s width; width: 6rem; diff --git a/source/frontend/src/components/layout/SideNavBar/styles.ts b/source/frontend/src/components/layout/SideNavBar/styles.ts index 8386f23836..3ac5edf5a1 100644 --- a/source/frontend/src/components/layout/SideNavBar/styles.ts +++ b/source/frontend/src/components/layout/SideNavBar/styles.ts @@ -4,7 +4,7 @@ import styled from 'styled-components'; export const TrayHeader = styled.h3` font-size: 3rem; padding-bottom: 0.8rem; - border-bottom: 0.4rem solid ${props => props.theme.css.primaryColor}; + border-bottom: 0.4rem solid ${props => props.theme.css.headerBorderColor}; margin-bottom: 3.2rem; max-width: 28rem; `; @@ -19,7 +19,7 @@ export const SideNavBar = styled.div` position: relative; align-items: center; grid-area: iconbar; - background-color: ${props => props.theme.css.primaryColor}; + background-color: ${props => props.theme.tenant.colour}; transition: 0.5s width; width: 6rem; label { @@ -61,9 +61,9 @@ export const CloseButton = styled(FaWindowClose)` &#close-tray { float: right; cursor: pointer; - fill: ${props => props.theme.css.textColor}; + fill: ${props => props.theme.bcTokens.typographyColorSecondary}; &:hover { - fill: ${props => props.theme.css.secondaryVariantColor}; + fill: ${props => props.theme.css.activeActionColor}; } } `; @@ -104,8 +104,8 @@ export const ExportH3 = styled.h3` margin-bottom: 1rem; text-align: left; padding: 1rem 0 0.5rem 0; - color: ${props => props.theme.css.textColor}; - border-bottom: solid 0.3rem ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; + border-bottom: solid 0.3rem ${props => props.theme.css.headerBorderColor}; display: flex; align-items: flex-end; `; @@ -115,5 +115,5 @@ export const ClickableDownload = styled(FaDownload)` cursor: pointer; } align-self: center; - color: ${({ theme }) => theme.css.slideOutBlue}; + color: ${({ theme }) => theme.css.activeActionColor}; `; diff --git a/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/AdvancedFilterButton.tsx b/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/AdvancedFilterButton.tsx index 92fb922379..df0370823a 100644 --- a/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/AdvancedFilterButton.tsx +++ b/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/AdvancedFilterButton.tsx @@ -40,8 +40,8 @@ const ControlButton = styled(Button)` width: 5.2rem; height: 5.2rem; background-color: #fff; - color: ${({ theme }) => theme.css.slideOutBlue}; - border-color: ${({ theme }) => theme.css.slideOutBlue}; + color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryButtonDefault}; + border-color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryButtonDefault}; box-shadow: -0.2rem 0.1rem 0.4rem rgba(0, 0, 0, 0.2); transition: 1s; &.open { diff --git a/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/FilterContentForm.tsx b/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/FilterContentForm.tsx index 05b7d8cb64..4b80ef5ab4 100644 --- a/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/FilterContentForm.tsx +++ b/source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/FilterContentForm.tsx @@ -250,5 +250,5 @@ export const FilterContentForm: React.FC props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; `; diff --git a/source/frontend/src/components/maps/leaflet/Control/BaseMapToggle/BasemapToggle.scss b/source/frontend/src/components/maps/leaflet/Control/BaseMapToggle/BasemapToggle.scss index aa53299211..429a1b1da7 100644 --- a/source/frontend/src/components/maps/leaflet/Control/BaseMapToggle/BasemapToggle.scss +++ b/source/frontend/src/components/maps/leaflet/Control/BaseMapToggle/BasemapToggle.scss @@ -8,7 +8,7 @@ border: 0.2rem solid white; box-shadow: 0rem 0.1rem 0.4rem rgba(0, 0, 0, 0.3); background-color: #ccc; - color: $light-variant-color; + color: $active-action-color; width: 7.5rem; height: 7.5rem; margin: 1em; diff --git a/source/frontend/src/components/maps/leaflet/Control/LayersControl/LayersControl.tsx b/source/frontend/src/components/maps/leaflet/Control/LayersControl/LayersControl.tsx index 66bdac0e21..5dd39d6bac 100644 --- a/source/frontend/src/components/maps/leaflet/Control/LayersControl/LayersControl.tsx +++ b/source/frontend/src/components/maps/leaflet/Control/LayersControl/LayersControl.tsx @@ -18,8 +18,8 @@ const ControlButton = styled(Button)` height: 5.2rem; margin-left: -5.1rem; background-color: #fff; - color: ${({ theme }) => theme.css.slideOutBlue}; - border-color: ${({ theme }) => theme.css.slideOutBlue}; + color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryButtonDefault}; + border-color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryButtonDefault}; box-shadow: -0.2rem 0.1rem 0.4rem rgba(0, 0, 0, 0.2); } `; diff --git a/source/frontend/src/components/maps/leaflet/Control/Legend/Legend.scss b/source/frontend/src/components/maps/leaflet/Control/Legend/Legend.scss index c92b073d06..38c2989418 100644 --- a/source/frontend/src/components/maps/leaflet/Control/Legend/Legend.scss +++ b/source/frontend/src/components/maps/leaflet/Control/Legend/Legend.scss @@ -13,7 +13,7 @@ margin-bottom: 0; border-bottom: none; background-color: #fff; - color: $text-color; + color: var(--typography-color-secondary); } .card-body { padding-bottom: 1.75rem; @@ -24,7 +24,7 @@ .col { display: flex; align-items: center; - color: $text-color; + color: var(--typography-color-secondary); } } } diff --git a/source/frontend/src/components/maps/leaflet/Control/Legend/LegendControl.scss b/source/frontend/src/components/maps/leaflet/Control/Legend/LegendControl.scss index a0becba1df..3047f98ae4 100644 --- a/source/frontend/src/components/maps/leaflet/Control/Legend/LegendControl.scss +++ b/source/frontend/src/components/maps/leaflet/Control/Legend/LegendControl.scss @@ -8,7 +8,7 @@ .tooltip-inner { background-color: white; - color: $text-color; + color: var(--typography-color-secondary); box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2); padding: 0rem; text-align: left; diff --git a/source/frontend/src/components/maps/leaflet/Control/Legend/LegendControl.tsx b/source/frontend/src/components/maps/leaflet/Control/Legend/LegendControl.tsx index 9047308bcc..2a35b458eb 100644 --- a/source/frontend/src/components/maps/leaflet/Control/Legend/LegendControl.tsx +++ b/source/frontend/src/components/maps/leaflet/Control/Legend/LegendControl.tsx @@ -16,7 +16,7 @@ import { Legend } from './Legend'; const LegendButton = styled(Button as any)` &&.btn { background-color: #ffffff; - color: ${({ theme }) => theme.css.darkVariantColor}; + color: ${({ theme }) => theme.bcTokens.typographyColorSecondary}; width: 4rem; height: 4rem; display: flex; diff --git a/source/frontend/src/components/maps/leaflet/Control/ZoomOut/ZoomOutButton.tsx b/source/frontend/src/components/maps/leaflet/Control/ZoomOut/ZoomOutButton.tsx index 1f73f87a82..4530e146fd 100644 --- a/source/frontend/src/components/maps/leaflet/Control/ZoomOut/ZoomOutButton.tsx +++ b/source/frontend/src/components/maps/leaflet/Control/ZoomOut/ZoomOutButton.tsx @@ -12,7 +12,7 @@ import Control from '../Control'; const ZoomButton = styled(Button)` &&.btn { background-color: #ffffff; - color: ${({ theme }) => theme.css.darkVariantColor}; + color: ${({ theme }) => theme.bcTokens.typographyColorSecondary}; width: 4rem; height: 4rem; } diff --git a/source/frontend/src/components/maps/leaflet/LayerPopup/LayerPopupView.tsx b/source/frontend/src/components/maps/leaflet/LayerPopup/LayerPopupView.tsx index b2f5485583..f034666dde 100644 --- a/source/frontend/src/components/maps/leaflet/LayerPopup/LayerPopupView.tsx +++ b/source/frontend/src/components/maps/leaflet/LayerPopup/LayerPopupView.tsx @@ -146,7 +146,7 @@ export const LayerPopupView: React.FC props.theme.css.mapPopupBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; .btn-link { font-size: 1.4rem; @@ -155,7 +155,7 @@ const StyledContainer = styled.div` } .list-group { .list-group-item { - background-color: ${props => props.theme.css.mapPopupBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; font-size: 1.4rem; border: none; padding: 0; @@ -166,7 +166,7 @@ const StyledContainer = styled.div` const StyledRow = styled(Row)` margin: 0rem; - border-bottom: 0.2rem ${props => props.theme.css.headingBorderColor} solid; + border-bottom: 0.2rem ${props => props.theme.css.borderOutlineColor} solid; `; const StyledFlyoutContainer = styled.div` diff --git a/source/frontend/src/components/maps/leaflet/LayerPopup/styles.ts b/source/frontend/src/components/maps/leaflet/LayerPopup/styles.ts index ad265bd931..fcdf9c9d7e 100644 --- a/source/frontend/src/components/maps/leaflet/LayerPopup/styles.ts +++ b/source/frontend/src/components/maps/leaflet/LayerPopup/styles.ts @@ -5,7 +5,7 @@ import styled from 'styled-components'; export const LayerPopupTitle = styled.h5` font-weight: bold; font-size: 1.6rem; - color: ${props => props.theme.css.headingTextColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; line-height: 2.4rem; `; diff --git a/source/frontend/src/components/measurements/styles.tsx b/source/frontend/src/components/measurements/styles.tsx index 3581b892be..b78e9b4ac3 100644 --- a/source/frontend/src/components/measurements/styles.tsx +++ b/source/frontend/src/components/measurements/styles.tsx @@ -3,16 +3,16 @@ import styled from 'styled-components'; export const StyledGreenCol = styled.div` max-width: 25rem; padding: 1rem; - background-color: ${props => props.theme.css.selectedColor}; - border: 1px solid ${props => props.theme.css.completedColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; + border: 1px solid ${props => props.theme.bcTokens.iconColorSuccess}; border-radius: 0.5rem; `; export const StyledGreenGrey = styled.div` max-width: 25rem; padding: 1rem; - background-color: ${props => props.theme.css.filterBackgroundColor}; - border: 1px solid ${props => props.theme.css.darkBlue}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; + border: 1px solid ${props => props.theme.bcTokens.surfaceColorBackgroundDarkBlue}; border-radius: 0.5rem; `; @@ -20,7 +20,7 @@ export const StyledGreenBlue = styled.div` max-width: 25rem; padding: 1rem; background-color: ${props => props.theme.css.filterBoxColor}; - border: 1px solid ${props => props.theme.css.darkBlue}; + border: 1px solid ${props => props.theme.bcTokens.surfaceColorBackgroundDarkBlue}; border-radius: 0.5rem; `; diff --git a/source/frontend/src/components/propertySelector/map/PropertyMapSelectorSubForm.tsx b/source/frontend/src/components/propertySelector/map/PropertyMapSelectorSubForm.tsx index 67bdd80332..b22955418f 100644 --- a/source/frontend/src/components/propertySelector/map/PropertyMapSelectorSubForm.tsx +++ b/source/frontend/src/components/propertySelector/map/PropertyMapSelectorSubForm.tsx @@ -57,13 +57,13 @@ export const StyledFormRow = styled(Row)` } .form-label { font-weight: bold; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; } } `; const GroupHeader = styled(Col)` - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; font-family: 'BcSans-Bold'; margin-bottom: 1rem; `; diff --git a/source/frontend/src/components/propertySelector/search/LayerFilter.scss b/source/frontend/src/components/propertySelector/search/LayerFilter.scss index 2a824491a6..a579313588 100644 --- a/source/frontend/src/components/propertySelector/search/LayerFilter.scss +++ b/source/frontend/src/components/propertySelector/search/LayerFilter.scss @@ -24,10 +24,10 @@ width: 25rem; overflow: hidden; cursor: pointer; - color: $text-color; + color: var(--typography-color-secondary); &:hover { - background-color: $active-color; + background-color: var(--typography-color-secondary-hover); color: #fff; } } diff --git a/source/frontend/src/components/propertySelector/selectedPropertyList/SelectedPropertyHeaderRow.tsx b/source/frontend/src/components/propertySelector/selectedPropertyList/SelectedPropertyHeaderRow.tsx index 0d9c87fb93..f43162fb50 100644 --- a/source/frontend/src/components/propertySelector/selectedPropertyList/SelectedPropertyHeaderRow.tsx +++ b/source/frontend/src/components/propertySelector/selectedPropertyList/SelectedPropertyHeaderRow.tsx @@ -22,8 +22,8 @@ export const SelectedPropertyHeaderRow: React.FunctionComponent< export const HeaderRow = styled(Row)` font-size: 1.6rem; - color: ${props => props.theme.css.lightVariantColor}; - border-bottom: 0.2rem solid ${props => props.theme.css.lightVariantColor}; + color: ${props => props.theme.bcTokens.themeGray70}; + border-bottom: 0.2rem solid ${props => props.theme.css.borderOutlineColor}; margin-bottom: 0.9rem; padding-bottom: 0.25rem; font-family: 'BcSans-Bold'; diff --git a/source/frontend/src/features/account/Login.test.tsx b/source/frontend/src/features/account/Login.test.tsx index 48b7f38dd1..f2dbbdb434 100644 --- a/source/frontend/src/features/account/Login.test.tsx +++ b/source/frontend/src/features/account/Login.test.tsx @@ -45,7 +45,7 @@ const TestLogin = ({ {({ tenant }) => ( - + diff --git a/source/frontend/src/features/account/LoginLoading.test.tsx b/source/frontend/src/features/account/LoginLoading.test.tsx index 1770a4a314..4081569489 100644 --- a/source/frontend/src/features/account/LoginLoading.test.tsx +++ b/source/frontend/src/features/account/LoginLoading.test.tsx @@ -10,7 +10,7 @@ const TestLoginLoading = () => { {({ tenant }) => ( - + )} diff --git a/source/frontend/src/features/account/LoginStyled.tsx b/source/frontend/src/features/account/LoginStyled.tsx index 993aa46242..284b503eb3 100644 --- a/source/frontend/src/features/account/LoginStyled.tsx +++ b/source/frontend/src/features/account/LoginStyled.tsx @@ -40,7 +40,7 @@ export const LoginStyled = styled(Container)` justify-content: center; } .block { - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; padding: 2rem 0; max-width: 65rem; max-height: 47.5rem; @@ -54,14 +54,14 @@ export const LoginStyled = styled(Container)` font-weight: 700; font-size: 2.4rem; font-style: italic; - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; } h6 { margin-bottom: 2rem; } p { font-size: 1.2rem; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; font-family: 'BCSans', Fallback, sans-serif; line-height: 130%; margin-left: 3rem; @@ -106,8 +106,8 @@ export const LoginStyled = styled(Container)` margin: 2rem auto; } .border-dark { - border-color: ${props => props.theme.css.primaryColor} !important; - color: ${props => props.theme.css.textColor} !important; + border-color: ${props => props.theme.css.headerBorderColor} !important; + color: ${props => props.theme.bcTokens.typographyColorSecondary} !important; } .pims-logo { margin-bottom: 1rem; diff --git a/source/frontend/src/features/acquisition/list/AcquisitionListView.tsx b/source/frontend/src/features/acquisition/list/AcquisitionListView.tsx index bfa53bd6f8..b5f49238a1 100644 --- a/source/frontend/src/features/acquisition/list/AcquisitionListView.tsx +++ b/source/frontend/src/features/acquisition/list/AcquisitionListView.tsx @@ -140,7 +140,7 @@ export const AcquisitionListView: React.FunctionComponent< const StyledAddButton = styled(Button)` &.btn.btn-primary { - background-color: ${props => props.theme.css.completedColor}; + background-color: ${props => props.theme.bcTokens.iconColorSuccess}; } `; diff --git a/source/frontend/src/features/acquisition/list/styles.ts b/source/frontend/src/features/acquisition/list/styles.ts index c51e061d8d..fc91bcdfb6 100644 --- a/source/frontend/src/features/acquisition/list/styles.ts +++ b/source/frontend/src/features/acquisition/list/styles.ts @@ -37,7 +37,9 @@ export const FileIcon = styled(Button)` &&.btn { background-color: #fff; color: ${({ theme, disabled }) => - disabled ? theme.css.disabledColor : theme.css.primaryColor}; + disabled + ? theme.bcTokens.iconsColorDisabled + : theme.bcTokens.surfaceColorPrimaryButtonDefault}; padding: 6px 0.5rem; } `; diff --git a/source/frontend/src/features/admin/access-request/RolesToolTip.tsx b/source/frontend/src/features/admin/access-request/RolesToolTip.tsx index 29690be575..e6a0fe450a 100644 --- a/source/frontend/src/features/admin/access-request/RolesToolTip.tsx +++ b/source/frontend/src/features/admin/access-request/RolesToolTip.tsx @@ -34,7 +34,7 @@ const StyledTooltip = styled.div` `; const StyledTooltipHeader = styled.b` - color: ${({ theme }) => theme.css.primaryColor}; + color: ${({ theme }) => theme.css.headerTextColor}; font-size: 2.6rem; `; diff --git a/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx b/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx index 4af983b5c8..587be505df 100644 --- a/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx +++ b/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx @@ -125,7 +125,7 @@ export const FinancialCodeListView: React.FC = () => { const StyledAddButton = styled(Button)` &.btn.btn-primary { - background-color: ${props => props.theme.css.completedColor}; + background-color: ${props => props.theme.bcTokens.iconColorSuccess}; } `; diff --git a/source/frontend/src/features/admin/financial-codes/list/styles.ts b/source/frontend/src/features/admin/financial-codes/list/styles.ts index c51e061d8d..fc91bcdfb6 100644 --- a/source/frontend/src/features/admin/financial-codes/list/styles.ts +++ b/source/frontend/src/features/admin/financial-codes/list/styles.ts @@ -37,7 +37,9 @@ export const FileIcon = styled(Button)` &&.btn { background-color: #fff; color: ${({ theme, disabled }) => - disabled ? theme.css.disabledColor : theme.css.primaryColor}; + disabled + ? theme.bcTokens.iconsColorDisabled + : theme.bcTokens.surfaceColorPrimaryButtonDefault}; padding: 6px 0.5rem; } `; diff --git a/source/frontend/src/features/contacts/contact/create/CreateContactContainer.tsx b/source/frontend/src/features/contacts/contact/create/CreateContactContainer.tsx index 3621598e82..bd49131997 100644 --- a/source/frontend/src/features/contacts/contact/create/CreateContactContainer.tsx +++ b/source/frontend/src/features/contacts/contact/create/CreateContactContainer.tsx @@ -49,7 +49,7 @@ export const CreateContactContainer: React.FunctionComponent< }; const StyledFormWrapper = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; padding-top: 0.5rem; padding-bottom: 0.5rem; overflow: inherit; diff --git a/source/frontend/src/features/contacts/contact/create/styles.ts b/source/frontend/src/features/contacts/contact/create/styles.ts index 1b049f2558..50cd0da635 100644 --- a/source/frontend/src/features/contacts/contact/create/styles.ts +++ b/source/frontend/src/features/contacts/contact/create/styles.ts @@ -7,7 +7,7 @@ import { FlexBox } from '@/components/common/styles'; export const H2 = styled.h2` font-size: 2rem; font-weight: 700; - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; text-decoration: none solid rgb(0, 51, 102); line-height: 2.9rem; `; @@ -15,7 +15,7 @@ export const H2 = styled.h2` export const H3 = styled.h3` font-size: 1.6rem; font-weight: 700; - color: ${props => props.theme.css.formTextColor}; + color: ${props => props.theme.bcTokens.typographyColorPrimary}; text-decoration: none solid rgb(33, 37, 41); line-height: 2rem; `; @@ -39,7 +39,7 @@ export const Form = styled(FormikForm)` export const FormLabel = styled(FormBase.Label)` font-size: 1.6rem; font-weight: 700; - color: ${props => props.theme.css.formTextColor}; + color: ${props => props.theme.bcTokens.typographyColorPrimary}; text-decoration: none solid rgb(33, 37, 41); line-height: 2rem; `; @@ -60,7 +60,7 @@ export const SectionMessage = styled(FlexBox)<{ appearance: 'information' | 'err export const SubtleText = styled.span` font-size: 1.6rem; font-weight: 400; - color: ${props => props.theme.css.subtleColor}; + color: ${props => props.theme.bcTokens.iconsColorDisabled}; text-decoration: none solid rgb(170, 170, 170); line-height: 2rem; `; diff --git a/source/frontend/src/features/contacts/contact/edit/UpdateContactContainer.tsx b/source/frontend/src/features/contacts/contact/edit/UpdateContactContainer.tsx index 3948a420cf..c2cd8a0da0 100644 --- a/source/frontend/src/features/contacts/contact/edit/UpdateContactContainer.tsx +++ b/source/frontend/src/features/contacts/contact/edit/UpdateContactContainer.tsx @@ -43,7 +43,7 @@ export const UpdateContactContainer: React.FC> }; const StyledFormWrapper = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; padding-top: 0.5rem; padding-bottom: 0.5rem; overflow: inherit; diff --git a/source/frontend/src/features/contacts/contact/edit/styles.ts b/source/frontend/src/features/contacts/contact/edit/styles.ts index 927b666386..4c4ec8fd44 100644 --- a/source/frontend/src/features/contacts/contact/edit/styles.ts +++ b/source/frontend/src/features/contacts/contact/edit/styles.ts @@ -11,7 +11,7 @@ export * from '@/features/contacts/styles'; export const H2 = styled.h2` font-size: 2rem; font-weight: 700; - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; text-decoration: none solid rgb(0, 51, 102); line-height: 2.9rem; `; @@ -19,7 +19,7 @@ export const H2 = styled.h2` export const H3 = styled.h3` font-size: 1.6rem; font-weight: 700; - color: ${props => props.theme.css.formTextColor}; + color: ${props => props.theme.bcTokens.typographyColorPrimary}; text-decoration: none solid rgb(33, 37, 41); line-height: 2rem; `; @@ -38,7 +38,7 @@ export const Form = styled(FormikForm)` export const FormLabel = styled(FormBase.Label)` font-size: 1.6rem; font-weight: 700; - color: ${props => props.theme.css.formTextColor}; + color: ${props => props.theme.bcTokens.typographyColorPrimary}; text-decoration: none solid rgb(33, 37, 41); line-height: 2rem; `; @@ -77,7 +77,7 @@ export const RemoveButton = styled(Button).attrs({ variant: 'link' })` export const SubtleText = styled.span` font-size: 1.6rem; font-weight: 400; - color: ${props => props.theme.css.subtleColor}; + color: ${props => props.theme.bcTokens.iconsColorDisabled}; text-decoration: none solid rgb(170, 170, 170); line-height: 2rem; `; diff --git a/source/frontend/src/features/contacts/styles.ts b/source/frontend/src/features/contacts/styles.ts index bc04bb7d57..5392aa7607 100644 --- a/source/frontend/src/features/contacts/styles.ts +++ b/source/frontend/src/features/contacts/styles.ts @@ -11,7 +11,7 @@ export const H2 = styled.h2` export const H2Primary = styled.h2` text-align: left; - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; `; export const RowAligned = styled(Row)` @@ -21,12 +21,12 @@ export const RowAligned = styled(Row)` export const StatusIndicators = styled.div` border-radius: 1rem; background-color: white; - border: 1px solid ${props => props.theme.css.lightVariantColor}; + border: 1px solid ${props => props.theme.css.borderOutlineColor}; padding: 0.2rem 1rem; - color: ${props => props.theme.css.lightVariantColor}; + color: ${props => props.theme.css.borderOutlineColor}; &.active { - color: ${props => props.theme.css.completedColor}; - border: 1px solid ${props => props.theme.css.completedColor}; + color: ${props => props.theme.bcTokens.iconColorSuccess}; + border: 1px solid ${props => props.theme.bcTokens.iconColorSuccess}; } `; diff --git a/source/frontend/src/features/documents/commonStyles.tsx b/source/frontend/src/features/documents/commonStyles.tsx index 437dab873f..8a12994dfe 100644 --- a/source/frontend/src/features/documents/commonStyles.tsx +++ b/source/frontend/src/features/documents/commonStyles.tsx @@ -4,12 +4,12 @@ import { Scrollable } from '@/components/common/Scrollable/Scrollable'; export const StyledGreySection = styled.div` padding: 1rem; - background-color: ${({ theme }) => theme.css.filterBackgroundColor}; + background-color: ${({ theme }) => theme.css.highlightBackgroundColor}; `; export const StyledH2 = styled.h2` font-weight: 700; - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; `; export const StyledH3 = styled.h3` @@ -18,8 +18,8 @@ export const StyledH3 = styled.h3` margin-bottom: 1rem; text-align: left; padding-top: 1rem; - color: ${props => props.theme.css.primaryColor}; - border-bottom: solid 0.1rem ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; + border-bottom: solid 0.1rem ${props => props.theme.css.headerBorderColor}; `; export const StyledHeader = styled.div` diff --git a/source/frontend/src/features/documents/list/DocumentResults/DocumentResultsColumns.tsx b/source/frontend/src/features/documents/list/DocumentResults/DocumentResultsColumns.tsx index 78ff0b0530..81ea54a565 100644 --- a/source/frontend/src/features/documents/list/DocumentResults/DocumentResultsColumns.tsx +++ b/source/frontend/src/features/documents/list/DocumentResults/DocumentResultsColumns.tsx @@ -137,12 +137,12 @@ const renderActions = ( const StyledIconsRow = styled(Row)` [id^='document-view'] { - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.activeActionColor}; } [id^='document-delete'] { - color: ${props => props.theme.css.discardedColor}; + color: ${props => props.theme.css.activeActionColor}; :hover { - color: ${({ theme }) => theme.css.dangerColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; } } .btn.btn-primary { @@ -154,6 +154,6 @@ const StyledIconsRow = styled(Row)` const StyledIcon = styled.span` .tooltip-icon { - color: ${({ theme }) => theme.css.subtleColor}; + color: ${({ theme }) => theme.bcTokens.iconsColorDisabled}; } `; diff --git a/source/frontend/src/features/leases/add/AddLeaseForm.tsx b/source/frontend/src/features/leases/add/AddLeaseForm.tsx index a03f34530b..68b49137f8 100644 --- a/source/frontend/src/features/leases/add/AddLeaseForm.tsx +++ b/source/frontend/src/features/leases/add/AddLeaseForm.tsx @@ -67,7 +67,7 @@ const AddLeaseForm: React.FunctionComponent props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; padding-top: 0.5rem; padding-bottom: 0.5rem; `; diff --git a/source/frontend/src/features/leases/detail/LeasePages/LeasePageForm.tsx b/source/frontend/src/features/leases/detail/LeasePages/LeasePageForm.tsx index 29c0c56239..f5698ef173 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/LeasePageForm.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/LeasePageForm.tsx @@ -36,7 +36,7 @@ const StyledLeasePage = styled.div` flex-direction: column; display: flex; text-align: left; - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; export default LeaseViewPageForm; diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/columns.tsx b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/columns.tsx index e6f9dd81f0..6dde1f7c51 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/columns.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/columns.tsx @@ -155,15 +155,15 @@ export const getColumns = ({ const StyledIcons = styled(InlineFlexDiv)` align-items: center; [id^='edit-deposit'] { - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.activeActionColor}; } [id^='return-deposit'] { - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.activeActionColor}; } [id^='delete-deposit'] { - color: ${props => props.theme.css.discardedColor}; + color: ${props => props.theme.css.activeActionColor}; :hover { - color: ${({ theme }) => theme.css.dangerColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; } } .btn.btn-primary { diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/columns.tsx b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/columns.tsx index 40f6b96977..c93d3a3c43 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/columns.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/columns.tsx @@ -175,12 +175,12 @@ export const getColumns = ({ const StyledIcons = styled(InlineFlexDiv)` [id^='edit-depositreturn'] { - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.activeActionColor}; } [id^='delete-depositreturn'] { - color: ${props => props.theme.css.discardedColor}; + color: ${props => props.theme.css.activeActionColor}; :hover { - color: ${({ theme }) => theme.css.dangerColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; } } .btn.btn-primary { diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/ReturnDepositForm.tsx b/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/ReturnDepositForm.tsx index 75989a6632..da303c29f1 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/ReturnDepositForm.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/ReturnDepositForm.tsx @@ -167,7 +167,7 @@ const StyledFormBody = styled.form` `; export const SubHeaderSection = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledReturningDepositLink = styled.a` diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/DetailTermInformationBox.tsx b/source/frontend/src/features/leases/detail/LeasePages/details/DetailTermInformationBox.tsx index 155cf4f4dd..e6f8eae530 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/details/DetailTermInformationBox.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/details/DetailTermInformationBox.tsx @@ -50,11 +50,11 @@ const StyledTermInformationBox = styled.div` border-radius: 0.4rem; &.inverted { background: white; - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; border: 0.1rem solid; h4 { font-weight: 700; - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; } } `; diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/UpdateLeaseForm.tsx b/source/frontend/src/features/leases/detail/LeasePages/details/UpdateLeaseForm.tsx index ac642d408d..f75253b34b 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/details/UpdateLeaseForm.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/details/UpdateLeaseForm.tsx @@ -50,7 +50,7 @@ export const UpdateLeaseForm: React.FunctionComponent< export default UpdateLeaseForm; const StyledFormWrapper = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; padding-top: 0.5rem; padding-bottom: 0.5rem; `; diff --git a/source/frontend/src/features/leases/detail/LeasePages/improvements/styles.ts b/source/frontend/src/features/leases/detail/LeasePages/improvements/styles.ts index b42708da40..d7d09582b3 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/improvements/styles.ts +++ b/source/frontend/src/features/leases/detail/LeasePages/improvements/styles.ts @@ -17,7 +17,7 @@ export const ImprovementsContainer = styled.div` `; export const ImprovementsListHeader = styled(FormDescriptionLabel)` - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; font-size: 1.8rem; margin-bottom: 2rem; `; diff --git a/source/frontend/src/features/leases/detail/LeasePages/insurance/details/styles.ts b/source/frontend/src/features/leases/detail/LeasePages/insurance/details/styles.ts index adc2df8de0..ac96e6a6c8 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/insurance/details/styles.ts +++ b/source/frontend/src/features/leases/detail/LeasePages/insurance/details/styles.ts @@ -2,13 +2,13 @@ import { Col } from 'react-bootstrap'; import styled from 'styled-components'; export const LabelCol = styled(Col)` - border-right: solid 1px ${props => props.theme.css.primaryColor}; + border-right: solid 1px ${props => props.theme.css.headerBorderColor}; padding-bottom: 1rem; `; export const SectionHeader = styled.h2` font-size: 2rem; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; text-align: left; font-family: BcSans-Bold; `; @@ -19,13 +19,13 @@ export const SubTitle = styled.h3` margin-bottom: 1rem; text-align: left; padding: 1rem 0 0.5rem 0; - color: ${props => props.theme.css.textColor}; - border-bottom: solid 0.3rem ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; + border-bottom: solid 0.3rem ${props => props.theme.css.headerBorderColor}; `; export const BoldHeader = styled.h3` font-size: 1.6rem; - color: ${props => props.theme.css.formTextColor}; + color: ${props => props.theme.bcTokens.typographyColorPrimary}; text-align: left; padding-top: 1.5rem; font-family: BcSans-Bold; diff --git a/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/styles.ts b/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/styles.ts index 87e07a40ed..20ec3df683 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/styles.ts +++ b/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/styles.ts @@ -2,10 +2,10 @@ import { Col } from 'react-bootstrap'; import styled from 'styled-components'; export const LabelCol = styled(Col)` - border-right: solid 1px ${props => props.theme.css.primaryColor}; + border-right: solid 1px ${props => props.theme.css.headerBorderColor}; padding-bottom: 1rem; `; export const SubTitle = styled.h2` - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; `; diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/styles.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/styles.tsx index dea312b5b1..c5028e4aae 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/payment/styles.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/payment/styles.tsx @@ -14,7 +14,7 @@ export const StyledFormBody = styled.div` .check-field { label { width: 100%; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; } display: flex; flex-wrap: wrap; @@ -48,7 +48,7 @@ export const StyledTable = styled(Table)` padding: 0.5rem 0.5rem; font-size: 1.4rem; position: relative; - background-color: ${props => props.theme.css.primaryLightColor}; + background-color: ${props => props.theme.bcTokens.surfaceColorBackgroundDarkBlue}; color: white; .tooltip-icon { color: white; @@ -72,10 +72,10 @@ export const StyledTable = styled(Table)` word-break: normal; } .collapse { - background-color: ${props => props.theme.css.selectedColor}; - color: ${props => props.theme.css.textColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; .receipt { - color: ${props => props.theme.css.lightVariantColor}; + color: ${props => props.theme.css.borderOutlineColor}; } } } @@ -91,9 +91,9 @@ export const StyledPaymentTable = styled(Table)` font-size: 1.4rem; position: relative; background-color: transparent; - color: ${props => props.theme.css.formTextColor}; + color: ${props => props.theme.bcTokens.typographyColorPrimary}; .tooltip-icon { - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.activeActionColor}; float: right; align-self: baseline; margin-left: 0.5rem; @@ -110,11 +110,11 @@ export const StyledPaymentTable = styled(Table)` } } .tfoot { - background-color: ${props => props.theme.css.summaryColor}; - border-top: 0.1rem solid ${props => props.theme.css.summaryBorderColor}; - border-bottom: 0.1rem solid ${props => props.theme.css.summaryBorderColor}; + background-color: ${props => props.theme.css.warningBackgroundColor}; + border-top: 0.1rem solid ${props => props.theme.bcTokens.themeGold100}; + border-bottom: 0.1rem solid ${props => props.theme.bcTokens.themeGold100}; font-family: 'BCSans-Bold'; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; } } `; @@ -141,7 +141,7 @@ export const ActualPaymentBox = styled(InlineFlexDiv)` input { width: 100%; } - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; export const FlexRight = styled.div` @@ -171,7 +171,7 @@ export const WarningTextBox = styled(InlineFlexDiv)` export const AddActualButton = styled(Button)` &&& { - background-color: ${props => props.theme.css.completedColor}; + background-color: ${props => props.theme.bcTokens.iconColorSuccess}; color: white; &:hover { background-color: #3aba53; diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/paymentsColumns.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/paymentsColumns.tsx index a4810cde8f..d10f17b49f 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/paymentsColumns.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/paymentsColumns.tsx @@ -197,12 +197,12 @@ export const getActualsColumns = ({ const StyledIcons = styled(InlineFlexDiv)` [id^='edit-actual'] { - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.activeActionColor}; } [id^='delete-actual'] { - color: ${props => props.theme.css.discardedColor}; + color: ${props => props.theme.css.activeActionColor}; :hover { - color: ${({ theme }) => theme.css.dangerColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; } } .btn.btn-primary { diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/table/terms/columns.tsx b/source/frontend/src/features/leases/detail/LeasePages/payment/table/terms/columns.tsx index 7d4eaab5bf..2f087cc56a 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/payment/table/terms/columns.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/payment/table/terms/columns.tsx @@ -298,12 +298,12 @@ export const getLeaseTermColumns = ({ const StyledIcons = styled(InlineFlexDiv)` align-items: center; [id^='edit-term'] { - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.activeActionColor}; } [id^='delete-term'] { - color: ${props => props.theme.css.discardedColor}; + color: ${props => props.theme.css.activeActionColor}; :hover { - color: ${({ theme }) => theme.css.dangerColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; } } .btn.btn-primary { @@ -313,5 +313,5 @@ const StyledIcons = styled(InlineFlexDiv)` `; const GenerateIcon = styled(FaFileContract)` - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.activeActionColor}; `; diff --git a/source/frontend/src/features/leases/detail/LeasePages/tenant/ViewTenantForm.tsx b/source/frontend/src/features/leases/detail/LeasePages/tenant/ViewTenantForm.tsx index 23b5c7620c..f31f01d3de 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/tenant/ViewTenantForm.tsx +++ b/source/frontend/src/features/leases/detail/LeasePages/tenant/ViewTenantForm.tsx @@ -179,7 +179,7 @@ export const FormSectionOne = styled(FormSection)` } min-width: 75rem; .form-control { - color: ${props => props.theme.css.formTextColor}; + color: ${props => props.theme.bcTokens.typographyColorPrimary}; } `; diff --git a/source/frontend/src/features/leases/detail/LeasePages/tenant/styles.ts b/source/frontend/src/features/leases/detail/LeasePages/tenant/styles.ts index 5f2ad3e434..e3c84610f9 100644 --- a/source/frontend/src/features/leases/detail/LeasePages/tenant/styles.ts +++ b/source/frontend/src/features/leases/detail/LeasePages/tenant/styles.ts @@ -7,7 +7,7 @@ export const TenantH2 = styled.h2` font-family: BcSans-Bold; line-height: 2.8rem; text-align: left; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; `; export const ContactListViewWrapper = styled(ContactManagerView)` diff --git a/source/frontend/src/features/leases/detail/LeaseStatusSummary.tsx b/source/frontend/src/features/leases/detail/LeaseStatusSummary.tsx index b50c28fb63..947e39d262 100644 --- a/source/frontend/src/features/leases/detail/LeaseStatusSummary.tsx +++ b/source/frontend/src/features/leases/detail/LeaseStatusSummary.tsx @@ -35,38 +35,38 @@ const StyledLeaseStatusSummary = styled.div` background-color: white; display: flex; flex-direction: column; - border: 1px solid ${props => props.theme.css.accentColor}; + border: 1px solid ${props => props.theme.bcTokens.themeGold100}; padding: 0.2rem 1rem; height: 90%; b { padding: 0.25rem 0; color: black; &:first-child { - color: ${props => props.theme.css.accentColor}; + color: ${props => props.theme.bcTokens.themeGold100}; } } &.active { - border: 1px solid ${props => props.theme.css.completedColor}; + border: 1px solid ${props => props.theme.bcTokens.iconColorSuccess}; b:first-child { - color: ${props => props.theme.css.completedColor}; + color: ${props => props.theme.bcTokens.iconColorSuccess}; } } &.terminated { - border: 1px solid ${props => props.theme.css.dangerColor}; + border: 1px solid ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; b:first-child { - color: ${props => props.theme.css.dangerColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; } } &.discard { - border: 1px solid ${props => props.theme.css.discardedColor}; + border: 1px solid ${props => props.theme.css.activeActionColor}; b:first-child { - color: ${props => props.theme.css.discardedColor}; + color: ${props => props.theme.css.activeActionColor}; } } &.draft { - border: 1px solid ${props => props.theme.css.draftColor}; + border: 1px solid ${props => props.theme.css.activeActionColor}; b:first-child { - color: ${props => props.theme.css.draftColor}; + color: ${props => props.theme.css.activeActionColor}; } } `; diff --git a/source/frontend/src/features/leases/detail/styles.ts b/source/frontend/src/features/leases/detail/styles.ts index 2da0d533d3..bf78f8efb1 100644 --- a/source/frontend/src/features/leases/detail/styles.ts +++ b/source/frontend/src/features/leases/detail/styles.ts @@ -17,8 +17,8 @@ export const LeaseH2 = styled.h2` font-size: 3.2rem; line-height: 4.2rem; text-align: left; - color: ${props => props.theme.css.textColor}; - border-bottom: solid 0.4rem ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; + border-bottom: solid 0.4rem ${props => props.theme.css.headerBorderColor}; `; export const LeaseH3 = styled.h3` @@ -27,8 +27,8 @@ export const LeaseH3 = styled.h3` margin-bottom: 1rem; text-align: left; padding: 1rem 0 0.5rem 0; - color: ${props => props.theme.css.textColor}; - border-bottom: solid 0.3rem ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; + border-bottom: solid 0.3rem ${props => props.theme.css.headerBorderColor}; `; export const LeaseH4 = styled.h4` @@ -48,7 +48,7 @@ export const LeaseH5 = styled.h5` export const LeaseH6 = styled.h6` font-size: 2rem; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; text-align: left; font-family: BcSans-Bold; `; @@ -74,7 +74,7 @@ export const LeaseHeaderText = styled(InlineFlexDiv)` `; export const ExpiredWarning = styled(InlineFlexDiv)` - color: ${props => props.theme.css.dangerColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; background-color: ${props => props.theme.css.dangerBackgroundColor}; border-radius: 0.4rem; letter-spacing: 0.1rem; @@ -88,7 +88,7 @@ export const ExpiredWarning = styled(InlineFlexDiv)` export const LeaseHeader = styled(InlineFlexDiv)` border-radius: 1rem 1rem 0 0; grid-area: leaseheader; - background-color: ${props => props.theme.css.slideOutBlue}; + background-color: ${props => props.theme.css.activeActionColor}; color: white; align-items: center; justify-content: center; @@ -207,13 +207,13 @@ export const TermsTable = styled(Table)` background-color: #f2f2f2; } &.table .tbody .tr-wrapper .tr.selected { - background-color: ${props => props.theme.css.accentColor}; + background-color: ${props => props.theme.bcTokens.themeGold100}; font-family: 'BCSans-Bold'; margin-left: -8rem; &:before { content: 'current'; padding-right: 1.5rem; - background-color: ${props => props.theme.css.accentColor}; + background-color: ${props => props.theme.bcTokens.themeGold100}; background-image: url(${caretRightSvgUrl}); background-repeat: no-repeat; background-position: right; @@ -240,7 +240,7 @@ export const NestedInlineField = styled(InlineInput)` `; export const SectionHeader = styled(FormDescriptionLabel)` - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; font-size: 1.8rem; margin-bottom: 2rem; `; diff --git a/source/frontend/src/features/leases/list/LeaseListView.tsx b/source/frontend/src/features/leases/list/LeaseListView.tsx index 6d775bc01c..f04538482b 100644 --- a/source/frontend/src/features/leases/list/LeaseListView.tsx +++ b/source/frontend/src/features/leases/list/LeaseListView.tsx @@ -128,7 +128,7 @@ export const LeaseListView: React.FunctionComponent props.theme.css.completedColor}; + background-color: ${props => props.theme.bcTokens.iconColorSuccess}; } `; diff --git a/source/frontend/src/features/leases/list/LeaseSearchResults/LeaseSearchResults.tsx b/source/frontend/src/features/leases/list/LeaseSearchResults/LeaseSearchResults.tsx index 2855a517c6..acf2f04ed0 100644 --- a/source/frontend/src/features/leases/list/LeaseSearchResults/LeaseSearchResults.tsx +++ b/source/frontend/src/features/leases/list/LeaseSearchResults/LeaseSearchResults.tsx @@ -158,17 +158,17 @@ export function LeaseSearchResults(props: ILeaseSearchResultsProps) { } const ExpiredIcon = styled('span')` - color: ${props => props.theme.css.dangerColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; `; const ExpiredOverlay = styled(Tooltip)` .tooltip-inner { - color: ${props => props.theme.css.dangerColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; background-color: ${props => props.theme.css.dangerBackgroundColor}; } .arrow::before { - color: ${props => props.theme.css.dangerColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; background-color: ${props => props.theme.css.dangerBackgroundColor}; } `; diff --git a/source/frontend/src/features/leases/reports/aggregated/ExportAggregatedLeasesContainer.tsx b/source/frontend/src/features/leases/reports/aggregated/ExportAggregatedLeasesContainer.tsx index b3549d73fb..dc7c077557 100644 --- a/source/frontend/src/features/leases/reports/aggregated/ExportAggregatedLeasesContainer.tsx +++ b/source/frontend/src/features/leases/reports/aggregated/ExportAggregatedLeasesContainer.tsx @@ -63,7 +63,7 @@ const ClickableDownload = styled(FaDownload)` cursor: pointer; } align-self: center; - color: ${({ theme }) => theme.css.slideOutBlue}; + color: ${({ theme }) => theme.css.activeActionColor}; `; export default ExportAggregatedLeasesContainer; diff --git a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyHeaderRow.tsx b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyHeaderRow.tsx index 8e5fd0b639..cc809f66f7 100644 --- a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyHeaderRow.tsx +++ b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyHeaderRow.tsx @@ -23,8 +23,8 @@ export const SelectedPropertyHeaderRow: React.FunctionComponent< const HeaderRow = styled(Row)` font-size: 1.6rem; - color: ${props => props.theme.css.lightVariantColor}; - border-bottom: 0.2rem solid ${props => props.theme.css.lightVariantColor}; + color: ${props => props.theme.css.themeGray70}; + border-bottom: 0.2rem solid ${props => props.theme.css.borderOutlineColor}; margin-bottom: 0.9rem; padding-bottom: 0.25rem; font-family: 'BcSans-Bold'; diff --git a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap index 89714a9a2c..3d3c4b7a9b 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap @@ -425,6 +425,7 @@ exports[`AcquisitionView component > renders as expected 1`] = ` .c8 { font-size: 1.5rem; border-radius: 50%; + opacity: 0.8; width: 2.5rem; height: 2.5rem; padding: 1rem; diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionMenu.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionMenu.tsx index f35b085d0f..49c1c18485 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionMenu.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionMenu.tsx @@ -123,12 +123,13 @@ const StyledRow = styled(Row)` const StyledIconWrapper = styled.div` &.selected { - background-color: ${props => props.theme.css.accentColor}; + background-color: ${props => props.theme.bcTokens.themeGold100}; } - background-color: ${props => props.theme.css.lightAccentColor}; + background-color: ${props => props.theme.css.numberBackgroundColor}; font-size: 1.5rem; border-radius: 50%; + opacity: 0.8; width: 2.5rem; height: 2.5rem; padding: 1rem; @@ -142,11 +143,11 @@ const StyledMenuHeaderWrapper = styled.div` justify-content: space-between; align-items: flex-end; width: 100%; - border-bottom: 1px solid ${props => props.theme.css.lightVariantColor}; + border-bottom: 1px solid ${props => props.theme.css.borderOutlineColor}; `; const StyledMenuHeader = styled.span` font-size: 1.4rem; - color: ${props => props.theme.css.lightVariantColor}; + color: ${props => props.theme.css.themeGray70}; line-height: 2.2rem; `; diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/GenerateFormView.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/GenerateFormView.tsx index c07a1565f9..9ab4183c37 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/GenerateFormView.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/GenerateFormView.tsx @@ -88,11 +88,11 @@ const StyledMenuHeaderWrapper = styled.div` justify-content: space-between; align-items: flex-end; width: 100%; - border-bottom: 1px solid ${props => props.theme.css.lightVariantColor}; + border-bottom: 1px solid ${props => props.theme.css.borderOutlineColor}; `; const StyledMenuHeader = styled.span` font-size: 1.4rem; - color: ${props => props.theme.css.lightVariantColor}; + color: ${props => props.theme.css.themeGray70}; line-height: 2.2rem; `; diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/modals/GenerateLetterRecipientsModal.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/modals/GenerateLetterRecipientsModal.tsx index cb73c081b9..56c8f4aa84 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/modals/GenerateLetterRecipientsModal.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/modals/GenerateLetterRecipientsModal.tsx @@ -157,7 +157,7 @@ const StyledModal = styled(GenericModal)` `; const StyledDiv = styled.div` - border: 0.1rem solid ${props => props.theme.css.lightVariantColor}; + border: 0.1rem solid ${props => props.theme.css.borderOutlineColor}; border-radius: 0.5rem; max-height: 180px; overflow-y: auto; @@ -174,7 +174,7 @@ const StyledDiv = styled.div` label { font-family: BcSans-Bold; line-height: 1.5rem; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; span.type { font-size: 1.5rem; diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap index 1aa4c5ae4f..b70cfe88dd 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap @@ -27,6 +27,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = ` .c4 { font-size: 1.5rem; border-radius: 50%; + opacity: 0.8; width: 2.5rem; height: 2.5rem; padding: 1rem; diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/UpdateAcquisitionAgreementForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/UpdateAcquisitionAgreementForm.tsx index 9a0007f5a8..c6cf0e039a 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/UpdateAcquisitionAgreementForm.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/UpdateAcquisitionAgreementForm.tsx @@ -92,7 +92,7 @@ const StyledFormWrapper = styled.div` `; const StyledContent = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledFooter = styled.div` diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx index 98c6bcf4f0..821d2e1665 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx @@ -217,14 +217,14 @@ const StyledHeaderContainer = styled.div` `; const StyledAgreementBorder = styled.div` - border: solid 0.2rem ${props => props.theme.css.discardedColor}; + border: solid 0.2rem ${props => props.theme.css.headerBorderColor}; margin-bottom: 1.5rem; border-radius: 0.5rem; `; export const StyledAgreementSubheader = styled.div` font-weight: bold; - border-bottom: 0.2rem ${props => props.theme.css.discardedColor} solid; + border-bottom: 0.2rem ${props => props.theme.css.headerBorderColor} solid; margin-top: 2rem; margin-bottom: 2rem; `; diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/styles.ts b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/styles.ts index 2c21f026fc..b2e5bd9c69 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/styles.ts +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/styles.ts @@ -2,7 +2,7 @@ import styled from 'styled-components'; export const StyledSectionSubheader = styled.div` font-weight: bold; - color: ${props => props.theme.css.primaryColor}; - border-bottom: 0.2rem ${props => props.theme.css.primaryColor} solid; + color: ${props => props.theme.css.headerTextColor}; + border-bottom: 0.2rem ${props => props.theme.css.headerBorderColor} solid; margin-bottom: 2rem; `; diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx index b7c434ba83..4dc33f76a9 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx @@ -434,11 +434,11 @@ const StyledSubHeader = styled.div` flex-direction: row; justify-content: space-between; align-items: center; - border-bottom: solid 0.1rem ${props => props.theme.css.primaryColor}; + border-bottom: solid 0.1rem ${props => props.theme.css.headerBorderColor}; margin-bottom: 2rem; label { - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; font-family: 'BCSans-Bold'; font-size: 1.75rem; width: 100%; diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/CompensationListView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/CompensationListView.tsx index c6c6e0b4f6..4a4489f226 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/CompensationListView.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/CompensationListView.tsx @@ -145,7 +145,7 @@ export const CompensationListView: React.FunctionComponent { - font: ${props => props.theme.css.textColor}; + font: ${props => props.theme.bcTokens.typographyColorSecondary}; } .summary-row { align-items: center; diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/columns.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/columns.tsx index 072152d976..aa438236b0 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/columns.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/list/columns.tsx @@ -148,12 +148,12 @@ const StyledDiv = styled(InlineFlexDiv)` width: 100%; [id^='compensation-view'] { - color: ${props => props.theme.css.slideOutBlue}; + color: ${props => props.theme.css.activeActionColor}; } [id^='compensation-delete'] { - color: ${props => props.theme.css.discardedColor}; + color: ${props => props.theme.css.activeActionColor}; :hover { - color: ${({ theme }) => theme.css.dangerColor}; + color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; } } diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx index 35fd946180..8ad5be0aec 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx @@ -403,7 +403,7 @@ const StyledFormWrapper = styled.div` `; const StyledContent = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledFooter = styled.div` diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/financials/FinancialActivitiesSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/financials/FinancialActivitiesSubForm.tsx index e8cb8d9e0d..fc4b764eb7 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/financials/FinancialActivitiesSubForm.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/financials/FinancialActivitiesSubForm.tsx @@ -208,11 +208,11 @@ const StyledSubHeader = styled.div` flex-direction: row; justify-content: space-between; align-items: center; - border-bottom: solid 0.2rem ${props => props.theme.css.primaryColor}; + border-bottom: solid 0.2rem ${props => props.theme.css.headerBorderColor}; margin-bottom: 2rem; label { - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; font-family: 'BCSans-Bold'; font-size: 1.75rem; width: 100%; diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx index 2e5286401e..95fff8d092 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/Form8PaymentItemsSubForm.tsx @@ -177,11 +177,11 @@ const StyledSubHeader = styled.div` flex-direction: row; justify-content: space-between; align-items: center; - border-bottom: solid 0.2rem ${props => props.theme.css.primaryColor}; + border-bottom: solid 0.2rem ${props => props.theme.bcTokens.surfaceColorPrimaryButtonDefault}; margin-bottom: 2rem; label { - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryButtonDefault}; font-family: 'BCSans-Bold'; font-size: 1.75rem; width: 100%; diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/UpdateForm8Form.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/UpdateForm8Form.tsx index 96da966cd2..5d45342c46 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/UpdateForm8Form.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/UpdateForm8Form.tsx @@ -144,7 +144,7 @@ const StyledFormWrapper = styled.div` `; const StyledContent = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledFooter = styled.div` diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx index bd547a4572..940e2fc569 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/ExpropriationForm8Details.tsx @@ -161,7 +161,7 @@ export const ExpropriationForm8Details: React.FunctionComponent< export default ExpropriationForm8Details; const StyledForm8Border = styled.div` - border: solid 0.2rem ${props => props.theme.css.discardedColor}; + border: solid 0.2rem ${props => props.theme.css.headerBorderColor}; margin-bottom: 0.5rem; `; @@ -180,11 +180,11 @@ const StyledSubHeader = styled.div` flex-direction: row; justify-content: flex-end; align-items: center; - border-bottom: solid 0.2rem ${props => props.theme.css.primaryColor}; + border-bottom: solid 0.2rem ${props => props.theme.bcTokens.surfaceColorPrimaryButtonDefault}; margin-bottom: 2rem; label { - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryButtonDefault}; font-family: 'BCSans-Bold'; font-size: 1.75rem; width: 100%; diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/UpdateAcquisitionForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/UpdateAcquisitionForm.tsx index 54775a433f..3fa03a0cab 100644 --- a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/UpdateAcquisitionForm.tsx +++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/UpdateAcquisitionForm.tsx @@ -306,7 +306,7 @@ const AcquisitionDetailSubForm: React.FC<{ }; const Container = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; [name='region'] { max-width: 25rem; diff --git a/source/frontend/src/features/mapSideBar/consolidation/AddConsolidationView.tsx b/source/frontend/src/features/mapSideBar/consolidation/AddConsolidationView.tsx index f3f742ba57..1cfd7fdb53 100644 --- a/source/frontend/src/features/mapSideBar/consolidation/AddConsolidationView.tsx +++ b/source/frontend/src/features/mapSideBar/consolidation/AddConsolidationView.tsx @@ -221,12 +221,12 @@ const StyledFormWrapper = styled.div` overflow-y: auto; padding-right: 1rem; padding-bottom: 1rem; - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledSubdivideConsolidateIcon = styled(ConsolidateSubdivideIcon)` width: 3rem; height: 3rem; margin-right: 1rem; - fill: ${props => props.theme.css.textColor}; + fill: ${props => props.theme.bcTokens.typographyColorSecondary}; `; diff --git a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap index 2cb1d5ab0a..0bb67f66ec 100644 --- a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap @@ -344,6 +344,7 @@ exports[`DispositionView component > renders as expected 1`] = ` .c8 { font-size: 1.5rem; border-radius: 50%; + opacity: 0.8; width: 2.5rem; height: 2.5rem; padding: 1rem; diff --git a/source/frontend/src/features/mapSideBar/disposition/common/DispositionMenu.tsx b/source/frontend/src/features/mapSideBar/disposition/common/DispositionMenu.tsx index 0d60efdde9..1e1ace0b68 100644 --- a/source/frontend/src/features/mapSideBar/disposition/common/DispositionMenu.tsx +++ b/source/frontend/src/features/mapSideBar/disposition/common/DispositionMenu.tsx @@ -116,12 +116,13 @@ const StyledRow = styled(Row)` const StyledIconWrapper = styled.div` &.selected { - background-color: ${props => props.theme.css.accentColor}; + background-color: ${props => props.theme.bcTokens.themeGold100}; } - background-color: ${props => props.theme.css.lightAccentColor}; + background-color: ${props => props.theme.css.numberBackgroundColor}; font-size: 1.5rem; border-radius: 50%; + opacity: 0.8; width: 2.5rem; height: 2.5rem; padding: 1rem; @@ -135,11 +136,11 @@ const StyledMenuHeaderWrapper = styled.div` justify-content: space-between; align-items: flex-end; width: 100%; - border-bottom: 1px solid ${props => props.theme.css.lightVariantColor}; + border-bottom: 1px solid ${props => props.theme.css.borderOutlineColor}; `; const StyledMenuHeader = styled.span` font-size: 1.4rem; - color: ${props => props.theme.css.lightVariantColor}; + color: ${props => props.theme.css.themeGray70}; line-height: 2.2rem; `; diff --git a/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionMenu.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionMenu.test.tsx.snap index 468d810403..c478b5852f 100644 --- a/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionMenu.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionMenu.test.tsx.snap @@ -27,6 +27,7 @@ exports[`DispositionMenu component > matches snapshot 1`] = ` .c4 { font-size: 1.5rem; border-radius: 50%; + opacity: 0.8; width: 2.5rem; height: 2.5rem; padding: 1rem; diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/UpdateDispositionForm.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/UpdateDispositionForm.tsx index 37ae201d95..7d37882f15 100644 --- a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/UpdateDispositionForm.tsx +++ b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/UpdateDispositionForm.tsx @@ -244,7 +244,7 @@ const UpdateDispositionForm: React.FC = ({ export default UpdateDispositionForm; const Container = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; padding-top: 1rem; .tab-pane { diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx index 37cb73f17d..92edc69253 100644 --- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx +++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/OffersAndSaleView.tsx @@ -332,7 +332,7 @@ const OffersAndSaleView: React.FunctionComponent = ({ export default OffersAndSaleView; const StyledSpacer = styled.div` - border-bottom: 0.1rem solid ${props => props.theme.css.tableHoverColor}; + border-bottom: 0.1rem solid ${props => props.theme.css.borderOutlineColor}; `; const StyledSubHeader = styled.div` @@ -342,7 +342,7 @@ const StyledSubHeader = styled.div` align-items: center; label { - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryButtonDefault}; font-family: 'BCSans-Bold'; font-size: 2rem; width: 100%; diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionAppraisal/form/DispositionAppraisalForm.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionAppraisal/form/DispositionAppraisalForm.tsx index 8b3dadb2b2..f92e0ae4d5 100644 --- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionAppraisal/form/DispositionAppraisalForm.tsx +++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionAppraisal/form/DispositionAppraisalForm.tsx @@ -136,7 +136,7 @@ const StyledFormWrapper = styled.div` `; const StyledContent = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledFooter = styled.div` diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx index baf26db27d..3097d2f5c5 100644 --- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx +++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/DispositionOfferDetails.tsx @@ -137,7 +137,7 @@ const DispositionOfferDetails: React.FunctionComponent props.theme.css.discardedColor}; + border: solid 0.2rem ${props => props.theme.css.headerBorderColor}; padding: 1.5rem; margin-bottom: 1.5rem; border-radius: 0.5rem; @@ -148,11 +148,11 @@ const StyledSubHeader = styled.div` flex-direction: row; justify-content: flex-end; align-items: center; - border-bottom: solid 0.2rem ${props => props.theme.css.primaryColor}; + border-bottom: solid 0.2rem ${props => props.theme.css.headerBorderColor}; margin-bottom: 2rem; label { - color: ${props => props.theme.css.primaryColor}; + color: ${props => props.theme.css.headerTextColor}; font-family: 'BCSans-Bold'; font-size: 1.75rem; width: 100%; diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/form/DispositionOfferForm.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/form/DispositionOfferForm.tsx index ce79a7fe40..9778149090 100644 --- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/form/DispositionOfferForm.tsx +++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/form/DispositionOfferForm.tsx @@ -170,7 +170,7 @@ const StyledFormWrapper = styled.div` `; const StyledContent = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledFooter = styled.div` diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/UpdateDispostionSaleView.tsx b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/UpdateDispostionSaleView.tsx index d7d7871c7a..1d65ad1ac1 100644 --- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/UpdateDispostionSaleView.tsx +++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/UpdateDispostionSaleView.tsx @@ -113,7 +113,7 @@ const StyledFormWrapper = styled.div` `; const StyledContent = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledFooter = styled.div` diff --git a/source/frontend/src/features/mapSideBar/layout/MapSideBarLayout.tsx b/source/frontend/src/features/mapSideBar/layout/MapSideBarLayout.tsx index 62d22ee2ff..0d0b2ad899 100644 --- a/source/frontend/src/features/mapSideBar/layout/MapSideBarLayout.tsx +++ b/source/frontend/src/features/mapSideBar/layout/MapSideBarLayout.tsx @@ -84,11 +84,11 @@ const Footer = styled.div``; const Underline = styled.div` width: 100%; - border-bottom: solid 0.5rem ${props => props.theme.css.primaryLightColor}; + border-bottom: solid 0.5rem ${props => props.theme.bcTokens.themeBlue80}; `; const CloseIcon = styled(FaWindowClose)` - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; font-size: 30px; cursor: pointer; `; diff --git a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx index 0add5c2706..5097a3b691 100644 --- a/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx +++ b/source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx @@ -149,11 +149,11 @@ const StyledInlineDiv = styled(InlineFlexDiv)` `; const StyledGreenText = styled.span` - color: ${props => props.theme.css.completedColor}; + color: ${props => props.theme.bcTokens.iconColorSuccess}; `; export const ExpiredWarning = styled(InlineFlexDiv)` - color: ${props => props.theme.css.dangerColor}; + color: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault}; background-color: ${props => props.theme.css.dangerBackgroundColor}; border-radius: 0.4rem; letter-spacing: 0.1rem; diff --git a/source/frontend/src/features/mapSideBar/project/add/AddProjectForm.tsx b/source/frontend/src/features/mapSideBar/project/add/AddProjectForm.tsx index 2ae5db7c32..c1acc3aec9 100644 --- a/source/frontend/src/features/mapSideBar/project/add/AddProjectForm.tsx +++ b/source/frontend/src/features/mapSideBar/project/add/AddProjectForm.tsx @@ -110,7 +110,7 @@ const AddProjectForm = React.forwardRef, IAddProjectFor export default AddProjectForm; const StyledFormWrapper = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; padding-top: 0.5rem; padding-bottom: 0.5rem; `; diff --git a/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx b/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx index 639c61a32a..961579040f 100644 --- a/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx +++ b/source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx @@ -112,8 +112,8 @@ const StyledDivider = styled.div` export const RetiredWarning = styled(InlineFlexDiv)` text-transform: uppercase; - color: ${props => props.theme.css.expiredColor}; - background-color: ${props => props.theme.css.expiredBackgroundColor}; + color: ${props => props.theme.css.textWarningColor}; + background-color: ${props => props.theme.css.warningBackgroundColor}; border-radius: 0.4rem; letter-spacing: 0.1rem; padding: 0.2rem 0.5rem; diff --git a/source/frontend/src/features/mapSideBar/property/tabs/bcAssessment/BcAssessmentTabView.tsx b/source/frontend/src/features/mapSideBar/property/tabs/bcAssessment/BcAssessmentTabView.tsx index 9493ba4dd4..9d50d3dfd7 100644 --- a/source/frontend/src/features/mapSideBar/property/tabs/bcAssessment/BcAssessmentTabView.tsx +++ b/source/frontend/src/features/mapSideBar/property/tabs/bcAssessment/BcAssessmentTabView.tsx @@ -157,7 +157,7 @@ export const StyledForm = styled.div` `; const StyledSubtleText = styled.p` - color: ${props => props.theme.css.subtleColor}; + color: ${props => props.theme.bcTokens.iconsColorDisabled}; text-align: left; `; diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/AssociationHeader.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/AssociationHeader.tsx index ece05e2465..98f4ddc940 100644 --- a/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/AssociationHeader.tsx +++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/AssociationHeader.tsx @@ -27,7 +27,7 @@ export default AssociationHeader; const StyledIconWrapper = styled.div` color: white; - background-color: ${props => props.theme.css.iconLightColor}; + background-color: ${props => props.theme.css.activeActionColor}; font-size: 1.5rem; diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdatePropertyDetailsForm.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdatePropertyDetailsForm.tsx index 4b5ffdbfd0..d002b7cea7 100644 --- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdatePropertyDetailsForm.tsx +++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/UpdatePropertyDetailsForm.tsx @@ -343,7 +343,7 @@ export const UpdatePropertyDetailsForm: React.FunctionComponent< }; const StyledSummarySection = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledInfoSection = styled.div` @@ -353,6 +353,6 @@ const StyledInfoSection = styled.div` `; const StyledSubtleText = styled.p` - color: ${props => props.theme.css.subtleColor}; + color: ${props => props.theme.bcTokens.iconsColorDisabled}; text-align: left; `; diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/PropertyResearchTabView.tsx b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/PropertyResearchTabView.tsx index a2b5285a75..16a7c1d112 100644 --- a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/PropertyResearchTabView.tsx +++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/PropertyResearchTabView.tsx @@ -82,7 +82,7 @@ export const PropertyResearchTabView: React.FunctionComponent< export default PropertyResearchTabView; const StyledSummarySection = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledEditWrapper = styled.div` diff --git a/source/frontend/src/features/mapSideBar/property/tabs/takes/update/TakesUpdateForm.tsx b/source/frontend/src/features/mapSideBar/property/tabs/takes/update/TakesUpdateForm.tsx index 63dadd2ec4..e8d265575a 100644 --- a/source/frontend/src/features/mapSideBar/property/tabs/takes/update/TakesUpdateForm.tsx +++ b/source/frontend/src/features/mapSideBar/property/tabs/takes/update/TakesUpdateForm.tsx @@ -95,7 +95,7 @@ const StyledStickyWrapper = styled.div` position: sticky; top: 0; padding-bottom: 0.5rem; - background-color: ${({ theme }) => theme.css.filterBackgroundColor}; + background-color: ${({ theme }) => theme.css.highlightBackgroundColor}; `; export const emptyTake: ApiGen_Concepts_Take = { diff --git a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap index 2cdd01d41f..53d74bb212 100644 --- a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap @@ -161,6 +161,7 @@ exports[`ResearchContainer component > renders as expected 1`] = ` .c14 { font-size: 1.5rem; border-radius: 50%; + opacity: 0.8; width: 2.5rem; height: 2.5rem; padding: 1rem; diff --git a/source/frontend/src/features/mapSideBar/research/add/AddResearchForm.tsx b/source/frontend/src/features/mapSideBar/research/add/AddResearchForm.tsx index 8ddb1160d1..5dfcf5dec4 100644 --- a/source/frontend/src/features/mapSideBar/research/add/AddResearchForm.tsx +++ b/source/frontend/src/features/mapSideBar/research/add/AddResearchForm.tsx @@ -47,7 +47,7 @@ const LargeInput = styled(Input)` `; const StyledFormWrapper = styled.div` - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; padding-top: 0.5rem; padding-bottom: 0.5rem; `; diff --git a/source/frontend/src/features/mapSideBar/research/common/ResearchFileNameGuide.tsx b/source/frontend/src/features/mapSideBar/research/common/ResearchFileNameGuide.tsx index 8f70db2e0f..037a92fa7a 100644 --- a/source/frontend/src/features/mapSideBar/research/common/ResearchFileNameGuide.tsx +++ b/source/frontend/src/features/mapSideBar/research/common/ResearchFileNameGuide.tsx @@ -70,7 +70,7 @@ const StyledSection = styled.div` background-color: #f0f7fc; margin-bottom: 2rem; font-size: 16px; - color: ${props => props.theme.css.darkBlue}; + color: ${props => props.theme.bcTokens.surfaceColorBackgroundDarkBlue}; text-decoration: none solid rgb(49, 49, 50); line-height: 24px; `; diff --git a/source/frontend/src/features/mapSideBar/research/common/ResearchMenu.tsx b/source/frontend/src/features/mapSideBar/research/common/ResearchMenu.tsx index c1871b2118..fde54fd0fa 100644 --- a/source/frontend/src/features/mapSideBar/research/common/ResearchMenu.tsx +++ b/source/frontend/src/features/mapSideBar/research/common/ResearchMenu.tsx @@ -82,13 +82,14 @@ const StyledRow = styled(Row)` const StyledIconWrapper = styled.div` &.selected { - background-color: ${props => props.theme.css.accentColor}; + background-color: ${props => props.theme.bcTokens.themeGold100}; } - background-color: ${props => props.theme.css.lightAccentColor}; + background-color: ${props => props.theme.css.numberBackgroundColor}; font-size: 1.5rem; border-radius: 50%; + opacity: 0.8; width: 2.5rem; height: 2.5rem; @@ -104,11 +105,11 @@ const StyledMenuHeaderWrapper = styled.div` justify-content: space-between; align-items: flex-end; width: 100%; - border-bottom: 1px solid ${props => props.theme.css.lightVariantColor}; + border-bottom: 1px solid ${props => props.theme.css.borderOutlineColor}; `; const StyledMenuHeader = styled.span` font-size: 1.4rem; - color: ${props => props.theme.css.lightVariantColor}; + color: ${props => props.theme.css.themeGray70}; line-height: 2.2rem; `; diff --git a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap index 90941731b9..3d4645e794 100644 --- a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap +++ b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap @@ -27,6 +27,7 @@ exports[`ResearchMenu component > renders as expected when provided no research .c4 { font-size: 1.5rem; border-radius: 50%; + opacity: 0.8; width: 2.5rem; height: 2.5rem; padding: 1rem; diff --git a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/ChecklistView.tsx b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/ChecklistView.tsx index e953b1d3a3..bd8b1e4b0a 100644 --- a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/ChecklistView.tsx +++ b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/ChecklistView.tsx @@ -146,10 +146,10 @@ const StyledChecklistItemAudit = styled.span` font-size: 1.1rem; font-style: italic; text-align: right; - color: ${props => props.theme.css.discardedColor}; + color: ${props => props.theme.css.activeActionColor}; .tooltip-icon { - color: ${props => props.theme.css.discardedColor}; + color: ${props => props.theme.css.activeActionColor}; } `; diff --git a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/styles.tsx b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/styles.tsx index 6e6e3bbd57..c05b0f6b2d 100644 --- a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/styles.tsx +++ b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/styles.tsx @@ -8,6 +8,6 @@ export const StyledSectionCentered = styled(Section)` `; export const StyledChecklistItemStatus = styled.span<{ color?: string }>` - color: ${props => props.color ?? props.theme.css.textColor}; + color: ${props => props.color ?? props.theme.bcTokens.typographyColorSecondary}; min-width: 11rem; `; diff --git a/source/frontend/src/features/mapSideBar/subdivision/AddSubdivisionView.tsx b/source/frontend/src/features/mapSideBar/subdivision/AddSubdivisionView.tsx index 51f374618a..4512a3c2b3 100644 --- a/source/frontend/src/features/mapSideBar/subdivision/AddSubdivisionView.tsx +++ b/source/frontend/src/features/mapSideBar/subdivision/AddSubdivisionView.tsx @@ -226,12 +226,12 @@ const StyledFormWrapper = styled.div` overflow-y: auto; padding-right: 1rem; padding-bottom: 1rem; - background-color: ${props => props.theme.css.filterBackgroundColor}; + background-color: ${props => props.theme.css.highlightBackgroundColor}; `; const StyledSubdivideConsolidateIcon = styled(ConsolidateSubdivideIcon)` width: 3rem; height: 3rem; margin-right: 1rem; - fill: ${props => props.theme.css.textColor}; + fill: ${props => props.theme.bcTokens.typographyColorSecondary}; `; diff --git a/source/frontend/src/features/notes/add/AddNotesFormModal.tsx b/source/frontend/src/features/notes/add/AddNotesFormModal.tsx index 67006ef330..dfa80dcc56 100644 --- a/source/frontend/src/features/notes/add/AddNotesFormModal.tsx +++ b/source/frontend/src/features/notes/add/AddNotesFormModal.tsx @@ -83,7 +83,7 @@ const StyledModal = styled(GenericModal)` label { font-family: BcSans-Bold; line-height: 2rem; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; } } `; diff --git a/source/frontend/src/features/notes/detail/NoteDetailsFormModal.tsx b/source/frontend/src/features/notes/detail/NoteDetailsFormModal.tsx index c4dc0aa33a..82b3f07a75 100644 --- a/source/frontend/src/features/notes/detail/NoteDetailsFormModal.tsx +++ b/source/frontend/src/features/notes/detail/NoteDetailsFormModal.tsx @@ -120,7 +120,7 @@ const StyledModal = styled(GenericModal)` label { font-family: BcSans-Bold; line-height: 2rem; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; } } `; diff --git a/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap b/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap index f971abf095..fc8da04fa3 100644 --- a/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap +++ b/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap @@ -45,7 +45,7 @@ exports[`Note List View > renders as expected 1`] = ` } .c8 { - color: _activeColor_6badca; + color: linkColor; width: 1.6rem; height: 1.6rem; } diff --git a/source/frontend/src/features/notes/list/styles.ts b/source/frontend/src/features/notes/list/styles.ts index fdf3c22f90..43c1a3227b 100644 --- a/source/frontend/src/features/notes/list/styles.ts +++ b/source/frontend/src/features/notes/list/styles.ts @@ -19,8 +19,8 @@ export const PageHeader = styled.h3` text-align: left; font-family: BcSans-Bold; font-size: 2.6rem; - color: ${props => props.theme.css.primaryColor}; - border-bottom: 0.2rem solid ${props => props.theme.css.primaryLightColor}; + color: ${props => props.theme.css.headerTextColor}; + border-bottom: 0.2rem solid ${props => props.theme.css.headerBorderColor}; `; export const PageToolbar = styled.div` diff --git a/source/frontend/src/features/notes/update/UpdateNoteFormModal.tsx b/source/frontend/src/features/notes/update/UpdateNoteFormModal.tsx index 55ba6b1c89..819a16d9f2 100644 --- a/source/frontend/src/features/notes/update/UpdateNoteFormModal.tsx +++ b/source/frontend/src/features/notes/update/UpdateNoteFormModal.tsx @@ -129,7 +129,7 @@ const StyledModal = styled(GenericModal)` label { font-family: BcSans-Bold; line-height: 2rem; - color: ${props => props.theme.css.textColor}; + color: ${props => props.theme.bcTokens.typographyColorSecondary}; } } `; diff --git a/source/frontend/src/features/projects/styles.ts b/source/frontend/src/features/projects/styles.ts index c51e061d8d..fc91bcdfb6 100644 --- a/source/frontend/src/features/projects/styles.ts +++ b/source/frontend/src/features/projects/styles.ts @@ -37,7 +37,9 @@ export const FileIcon = styled(Button)` &&.btn { background-color: #fff; color: ${({ theme, disabled }) => - disabled ? theme.css.disabledColor : theme.css.primaryColor}; + disabled + ? theme.bcTokens.iconsColorDisabled + : theme.bcTokens.surfaceColorPrimaryButtonDefault}; padding: 6px 0.5rem; } `; diff --git a/source/frontend/src/features/properties/components/GeocoderAutoComplete.scss b/source/frontend/src/features/properties/components/GeocoderAutoComplete.scss index 02d5be8baf..68e7287929 100644 --- a/source/frontend/src/features/properties/components/GeocoderAutoComplete.scss +++ b/source/frontend/src/features/properties/components/GeocoderAutoComplete.scss @@ -38,10 +38,10 @@ width: 40rem; overflow: hidden; cursor: pointer; - color: $text-color; + color: var(--typography-color-secondary); &:hover { - background-color: $active-color; + background-color: $link-hover-color; color: #fff; } } diff --git a/source/frontend/src/features/properties/list/PropertyListView.scss b/source/frontend/src/features/properties/list/PropertyListView.scss index 37bff96e30..56b982c7d3 100644 --- a/source/frontend/src/features/properties/list/PropertyListView.scss +++ b/source/frontend/src/features/properties/list/PropertyListView.scss @@ -9,7 +9,7 @@ $contentheading-height: 6rem; padding: 0; .filter-container { padding: 0; - background-color: $filter-background-color; + background-color: $highlight-background-color; .container { max-width: 136rem; } diff --git a/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap b/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap index 535375e59f..4cccab4bcb 100644 --- a/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap +++ b/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap @@ -390,6 +390,7 @@ exports[`MapContainer > Renders the map 1`] = ` position: relative; width: 100%; height: 5.2rem; + background-color: #003366; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; diff --git a/source/frontend/src/features/research/list/ResearchListView.tsx b/source/frontend/src/features/research/list/ResearchListView.tsx index 0b1f2d6ae5..59cc7fba8c 100644 --- a/source/frontend/src/features/research/list/ResearchListView.tsx +++ b/source/frontend/src/features/research/list/ResearchListView.tsx @@ -98,7 +98,7 @@ export const ResearchListView: React.FunctionComponent props.theme.css.completedColor}; + background-color: ${props => props.theme.bcTokens.iconColorSuccess}; } `; diff --git a/source/frontend/src/features/research/list/styles.ts b/source/frontend/src/features/research/list/styles.ts index c51e061d8d..fc91bcdfb6 100644 --- a/source/frontend/src/features/research/list/styles.ts +++ b/source/frontend/src/features/research/list/styles.ts @@ -37,7 +37,9 @@ export const FileIcon = styled(Button)` &&.btn { background-color: #fff; color: ${({ theme, disabled }) => - disabled ? theme.css.disabledColor : theme.css.primaryColor}; + disabled + ? theme.bcTokens.iconsColorDisabled + : theme.bcTokens.surfaceColorPrimaryButtonDefault}; padding: 6px 0.5rem; } `; diff --git a/source/frontend/src/features/rightSideLayout/RightSideLayout.tsx b/source/frontend/src/features/rightSideLayout/RightSideLayout.tsx index a738c1fd11..69e6779e70 100644 --- a/source/frontend/src/features/rightSideLayout/RightSideLayout.tsx +++ b/source/frontend/src/features/rightSideLayout/RightSideLayout.tsx @@ -50,7 +50,7 @@ export const StyledMapSideBar = styled.div<{ show: boolean }>` max-width: ${props => (props.show ? `34.1rem` : `0`)}; width: ${props => (props.show ? `100%` : `0`)}; margin-left: ${props => (props.show ? `-1rem` : `0`)}; - background-color: ${props => props.theme.css.primaryBackgroundColor}; + background-color: ${props => props.theme.bcTokens.surfaceColorFormsDefault}; visibility: ${props => (props.show ? `visible` : `hidden`)}; opacity: ${props => (props.show ? 1 : 0)}; border-radius: 0.4rem; @@ -67,8 +67,8 @@ const StyledHeader = styled.div` position: relative; width: 100%; height: 5.2rem; - background-color: ${({ theme }) => theme.css.primaryColor}; - color: ${props => props.theme.css.primaryBackgroundColor}; + background-color: ${({ theme }) => theme.tenant.colour}; + color: ${props => props.theme.bcTokens.surfaceColorFormsDefault}; align-items: center; padding: 1rem 1.8rem; gap: 1.5rem; @@ -76,7 +76,7 @@ const StyledHeader = styled.div` const StyledTitle = styled.p` font-size: 1.8rem; - color: ${props => props.theme.css.primaryBackgroundColor}; + color: ${props => props.theme.bcTokens.surfaceColorFormsDefault}; text-decoration: none solid rgb(255, 255, 255); line-height: 1.8rem; font-weight: bold; @@ -87,7 +87,7 @@ const CloseIcon = styled(FaWindowClose)` position: absolute; top: 0.6rem; right: 0.8rem; - color: ${props => props.theme.css.primaryBackgroundColor}; + color: ${props => props.theme.bcTokens.surfaceColorFormsDefault}; font-size: 22px; cursor: pointer; `; diff --git a/source/frontend/src/features/rightSideLayout/__snapshots__/AdvancedFilterBar.test.tsx.snap b/source/frontend/src/features/rightSideLayout/__snapshots__/AdvancedFilterBar.test.tsx.snap index 460fae5882..23eaa5c3fd 100644 --- a/source/frontend/src/features/rightSideLayout/__snapshots__/AdvancedFilterBar.test.tsx.snap +++ b/source/frontend/src/features/rightSideLayout/__snapshots__/AdvancedFilterBar.test.tsx.snap @@ -45,6 +45,7 @@ exports[`AdvancedFilterBar > renders as expected 1`] = ` position: relative; width: 100%; height: 5.2rem; + background-color: #003366; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; diff --git a/source/frontend/src/index.tsx b/source/frontend/src/index.tsx index 4bc540c270..c04c69c450 100644 --- a/source/frontend/src/index.tsx +++ b/source/frontend/src/index.tsx @@ -1,9 +1,11 @@ import 'bootstrap/dist/css/bootstrap.min.css'; +import '@bcgov/design-tokens/css/variables.css'; import 'leaflet/dist/leaflet.css'; import 'react-datepicker/dist/react-datepicker.css'; import 'react-toastify/dist/ReactToastify.css'; import './assets/scss/index.scss'; // should be loaded last to allow for overrides without having to resort to "!important" +import * as bcTokens from '@bcgov/design-tokens/js/variables.js'; import { ReactKeycloakProvider } from '@react-keycloak/web'; import Keycloak, { KeycloakInstance } from 'keycloak-js'; import { createRoot } from 'react-dom/client'; @@ -25,7 +27,7 @@ import { ITenantConfig2 } from './hooks/pims-api/interfaces/ITenantConfig'; import { useRefreshSiteminder } from './hooks/useRefreshSiteminder'; async function prepare() { - if (import.meta.env.DEV) { + if (process.env.NODE_ENV === 'development') { // eslint-disable-next-line @typescript-eslint/no-var-requires const { worker } = await import('./mocks/msw/browser'); return worker.start({ onUnhandledRequest: 'bypass' }); @@ -47,7 +49,7 @@ const Index = () => { const InnerComponent = ({ tenant }: { tenant: ITenantConfig2 }) => { const refresh = useRefreshSiteminder(); return ( - + { {({ tenant }) => ( - + )} diff --git a/source/frontend/src/layouts/Footer.tsx b/source/frontend/src/layouts/Footer.tsx index 7e97e0763a..0540bd38b6 100644 --- a/source/frontend/src/layouts/Footer.tsx +++ b/source/frontend/src/layouts/Footer.tsx @@ -22,9 +22,9 @@ interface IFooterProps { const FooterStyled = styled.footer` // colors - background-color: ${props => props.backgroundColor ?? props.theme.css.primaryColor}; + background-color: ${props => props.backgroundColor ?? props.theme.css.headerBorderColor}; border: none; - border-top: 0.2rem solid ${props => props.theme.css.accentColor}; + border-top: 0.2rem solid ${props => props.theme.bcTokens.themeGold100}; grid-area: footer; a, diff --git a/source/frontend/src/layouts/Header.tsx b/source/frontend/src/layouts/Header.tsx index 6a96b2bcbd..8f6bac509e 100644 --- a/source/frontend/src/layouts/Header.tsx +++ b/source/frontend/src/layouts/Header.tsx @@ -23,7 +23,7 @@ interface IHeaderProps { const HeaderStyled = styled.header` background-color: ${props => props.backgroundColor}; border: none; - border-bottom: 0.2rem solid ${props => props.theme.css.accentColor}; + border-bottom: 0.2rem solid ${props => props.theme.bcTokens.themeGold100}; grid-area: header; `; diff --git a/source/frontend/src/typings/colors.d.ts b/source/frontend/src/typings/colors.d.ts new file mode 100644 index 0000000000..7db4968432 --- /dev/null +++ b/source/frontend/src/typings/colors.d.ts @@ -0,0 +1,5 @@ +import '@bcgov/design-tokens/css/variables.css'; + +export const colors = { + color: 'var(--)', +}; diff --git a/source/frontend/src/typings/design.tokens.d.ts b/source/frontend/src/typings/design.tokens.d.ts new file mode 100644 index 0000000000..6a0872ac95 --- /dev/null +++ b/source/frontend/src/typings/design.tokens.d.ts @@ -0,0 +1,177 @@ +declare module '@bcgov/design-tokens/js/variables.js' { + export const surfaceShadowNone: string; + export const surfaceShadowSmall: string; + export const surfaceShadowMedium: string; + export const surfaceShadowLarge: string; + export const surfaceColorPrimaryButtonDefault: string; + export const surfaceColorPrimaryButtonHover: string; + export const surfaceColorPrimaryButtonDisabled: string; + export const surfaceColorPrimaryDangerButtonDefault: string; + export const surfaceColorPrimaryDangerButtonHover: string; + export const surfaceColorPrimaryDangerButtonDisabled: string; + export const surfaceColorSecondaryButtonDefault: string; + export const surfaceColorSecondaryButtonHover: string; + export const surfaceColorSecondaryButtonDisabled: string; + export const surfaceColorTertiaryButtonDefault: string; + export const surfaceColorTertiaryButtonHover: string; + export const surfaceColorTertiaryButtonDisabled: string; + export const surfaceColorMenusDefault: string; + export const surfaceColorMenusHover: string; + export const surfaceColorFormsDefault: string; + export const surfaceColorFormsDisabled: string; + export const surfaceColorBackgroundWhite: string; + export const surfaceColorBackgroundLightGray: string; + export const surfaceColorBackgroundLightBlue: string; + export const surfaceColorBackgroundDarkBlue: string; + export const surfaceColorBorderDefault: string; + export const surfaceColorBorderMedium: string; + export const surfaceColorBorderDark: string; + export const surfaceColorBorderActive: string; + export const surfaceColorOverlayDefault: string; + export const supportSurfaceColorInfo: string; + export const supportSurfaceColorDanger: string; + export const supportSurfaceColorSuccess: string; + export const supportSurfaceColorWarning: string; + export const supportBorderColorInfo: string; + export const supportBorderColorDanger: string; + export const supportBorderColorSuccess: string; + export const supportBorderColorWarning: string; + export const iconsSizeXsmall: string; + export const iconsSizeSmall: string; + export const iconsSizeMedium: string; + export const iconsSizeLarge: string; + export const iconsSizeXlarge: string; + export const iconsColorPrimary: string; + export const iconsColorSecondary: string; + export const iconsColorDisabled: string; + export const iconsColorLink: string; + export const iconsColorInfo: string; + export const iconsColorDanger: string; + export const iconsColorSuccess: string; + export const iconsColorWarning: string; + export const iconsColorPrimaryInvert: string; + export const layoutBorderWidthNone: string; + export const layoutBorderWidthSmall: string; + export const layoutBorderWidthMedium: string; + export const layoutBorderWidthLarge: string; + export const layoutPaddingNone: string; + export const layoutPaddingXsmall: string; + export const layoutPaddingSmall: string; + export const layoutPaddingMedium: string; + export const layoutPaddingLarge: string; + export const layoutPaddingXlarge: string; + export const layoutMarginNone: string; + export const layoutMarginHair: string; + export const layoutMarginXsmall: string; + export const layoutMarginSmall: string; + export const layoutMarginMedium: string; + export const layoutMarginLarge: string; + export const layoutMarginXlarge: string; + export const layoutMarginXxlarge: string; + export const layoutMarginXxxlarge: string; + export const layoutMarginHuge: string; + export const layoutBorderRadiusNone: string; + export const layoutBorderRadiusSmall: string; + export const layoutBorderRadiusMedium: string; + export const layoutBorderRadiusLarge: string; + export const typographyFontFamiliesBcSans: string; + export const typographyLineHeightsXxxdense: string; + export const typographyLineHeightsXxdense: string; + export const typographyLineHeightsXdense: string; + export const typographyLineHeightsDense: string; + export const typographyLineHeightsRegular: string; + export const typographyLineHeightsSparse: string; + export const typographyLineHeightsXsparse: string; + export const typographyLineHeightsXxsparse: string; + export const typographyLineHeightsAuto: string; + export const typographyFontWeightsRegular: string; + export const typographyFontWeightsBold: string; + export const typographyFontWeightsItalic: string; + export const typographyFontSizeLabel: string; + export const typographyFontSizeSmallBody: string; + export const typographyFontSizeBody: string; + export const typographyFontSizeLargeBody: string; + export const typographyFontSizeH5: string; + export const typographyFontSizeH4: string; + export const typographyFontSizeH3: string; + export const typographyFontSizeH2: string; + export const typographyFontSizeH1: string; + export const typographyFontSizeDisplay: string; + export const typographyLetterSpacing0: string; + export const typographyParagraphSpacing0: string; + export const typographyRegularLabel: string; + export const typographyRegularSmallBody: string; + export const typographyRegularBody: string; + export const typographyRegularLargeBody: string; + export const typographyRegularH5: string; + export const typographyRegularH4: string; + export const typographyRegularH3: string; + export const typographyRegularH2: string; + export const typographyRegularH1: string; + export const typographyRegularDisplay: string; + export const typographyBoldLabel: string; + export const typographyBoldSmallBody: string; + export const typographyBoldBody: string; + export const typographyBoldLargeBody: string; + export const typographyBoldH5: string; + export const typographyBoldH4: string; + export const typographyBoldH3: string; + export const typographyBoldH2: string; + export const typographyBoldH1: string; + export const typographyBoldDisplay: string; + export const typographyItalicLabel: string; + export const typographyItalicSmallBody: string; + export const typographyItalicBody: string; + export const typographyItalicLargeBody: string; + export const typographyItalicH5: string; + export const typographyItalicH4: string; + export const typographyItalicH3: string; + export const typographyItalicH2: string; + export const typographyItalicH1: string; + export const typographyItalicDisplay: string; + export const typographyTextCaseNone: string; + export const typographyTextDecorationNone: string; + export const typographyParagraphIndent0: string; + export const typographyColorPrimary: string; + export const typographyColorSecondary: string; + export const typographyColorPlaceholder: string; + export const typographyColorDisabled: string; + export const typographyColorLink: string; + export const typographyColorDanger: string; + export const typographyColorPrimaryInvert: string; + export const typographyColorSecondaryInvert: string; + export const themeGold10: string; + export const themeGold20: string; + export const themeGold30: string; + export const themeGold40: string; + export const themeGold50: string; + export const themeGold60: string; + export const themeGold70: string; + export const themeGold80: string; + export const themeGold90: string; + export const themeGold100: string; + export const themeBlue10: string; + export const themeBlue20: string; + export const themeBlue30: string; + export const themeBlue40: string; + export const themeBlue50: string; + export const themeBlue60: string; + export const themeBlue70: string; + export const themeBlue80: string; + export const themeBlue90: string; + export const themeBlue100: string; + export const themeGray10: string; + export const themeGray20: string; + export const themeGray30: string; + export const themeGray40: string; + export const themeGray50: string; + export const themeGray60: string; + export const themeGray70: string; + export const themeGray80: string; + export const themeGray90: string; + export const themeGray100: string; + export const themeGray110: string; + export const themeGrayWhite: string; + export const themePrimaryBlue: string; + export const themePrimaryGold: string; +} diff --git a/source/frontend/src/utils/TestCommonWrapper.tsx b/source/frontend/src/utils/TestCommonWrapper.tsx index aff0457ea3..418bc3b977 100644 --- a/source/frontend/src/utils/TestCommonWrapper.tsx +++ b/source/frontend/src/utils/TestCommonWrapper.tsx @@ -51,7 +51,7 @@ const TestCommonWrapper: React.FunctionComponent< {({ tenant }) => ( - +