From 548ad2c2b4312243d193491ee21eddceba511abd Mon Sep 17 00:00:00 2001 From: Ashley Clifton Date: Tue, 19 Apr 2022 13:57:07 -0400 Subject: [PATCH] Correctly order and rename gray variables --- .../ActionItemArchives.scss | 4 +- .../ArchivedBoardColumn.scss | 2 +- .../ArchivedBoardTile/ArchivedBoardTile.scss | 10 ++-- .../ArchivedBoardsList.scss | 10 ++-- ui/src/App/Team/Header/Header.scss | 12 ++--- ui/src/App/Team/Header/Settings/Settings.scss | 8 ++-- ui/src/App/Team/Radiator/RadiatorPage.scss | 4 +- .../MobileColumnNav/MobileColumnNav.scss | 2 +- .../FeedbackForm/FeedbackForm.scss | 10 ++-- .../ThoughtItemWithAddAction.scss | 2 +- .../ActionItemDisplayOnly.scss | 4 +- .../Common/AssigneeInput/AssigneeInput.scss | 4 +- ui/src/Common/AuthTemplate/AuthTemplate.scss | 2 +- .../Contributors/Contributors.scss | 2 +- ui/src/Common/AuthTemplate/Form/Form.scss | 2 +- ui/src/Common/Buttons/Button.scss | 8 ++-- ui/src/Common/ColumnHeader/ColumnHeader.scss | 2 +- ui/src/Common/ColumnItem/ColumnItem.scss | 2 +- .../DeleteColumnItem/DeleteColumnItem.scss | 2 +- .../EditColumnItem/EditColumnItem.scss | 2 +- .../ColumnItemButtonGroup.scss | 4 +- .../Common/CountSeparator/CountSeparator.scss | 4 +- .../CreateColumnItemInput.scss | 4 +- .../FloatingCharacterCountdown.scss | 2 +- ui/src/Common/FormTemplate/FormTemplate.scss | 8 ++-- ui/src/Common/Input/Input.scss | 4 +- .../NotFoundSection/NotFoundSection.scss | 4 +- ui/src/Common/Toast/Toast.scss | 47 +++++++++---------- ui/src/Common/Tooltip/Tooltip.scss | 4 +- ui/src/Styles/_colors.scss | 8 ++-- ui/src/Styles/_mixins.scss | 2 +- ui/src/Styles/main.scss | 2 +- 32 files changed, 93 insertions(+), 94 deletions(-) diff --git a/ui/src/App/Team/Archives/ActionItemArchives/ActionItemArchives.scss b/ui/src/App/Team/Archives/ActionItemArchives/ActionItemArchives.scss index e7fc95031..c18fdfd5d 100644 --- a/ui/src/App/Team/Archives/ActionItemArchives/ActionItemArchives.scss +++ b/ui/src/App/Team/Archives/ActionItemArchives/ActionItemArchives.scss @@ -38,7 +38,7 @@ margin-top: 0.5rem; margin-bottom: 2rem; - color: main.$dark-gray; + color: main.$gray-3; font-size: 1.1rem; } @@ -62,6 +62,6 @@ @include main.dark-theme { .action-item-archives-title { - color: main.$gray; + color: main.$gray-1; } } diff --git a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoard/ArchivedBoardColumn/ArchivedBoardColumn.scss b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoard/ArchivedBoardColumn/ArchivedBoardColumn.scss index 24ccf16f2..fa8e3ab00 100644 --- a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoard/ArchivedBoardColumn/ArchivedBoardColumn.scss +++ b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoard/ArchivedBoardColumn/ArchivedBoardColumn.scss @@ -61,7 +61,7 @@ @include main.dark-theme { .archived-column { .archived-thought { - color: main.$gray; + color: main.$gray-1; background-color: main.$light-asphalt; .archived-thought-footer { diff --git a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.scss b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.scss index 6ad636f63..ed26bd641 100644 --- a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.scss +++ b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.scss @@ -36,7 +36,7 @@ height: 2rem; margin: 1rem; - background: main.$gray; + background: main.$gray-1; border-radius: 20px; } @@ -46,7 +46,7 @@ .view-button { padding: 1rem 1.5rem; - border-left: 1px solid main.$gray; + border-left: 1px solid main.$gray-1; &:hover { color: main.$turquoise; @@ -56,15 +56,15 @@ @include main.dark-theme { .archived-board-tile { - color: main.$gray; + color: main.$gray-1; background: main.$light-asphalt; .thought-count { - background: main.$light-gray; + background: main.$gray-4; } .view-button { - color: main.$lighter-gray; + color: main.$gray-2; border-left: 1px solid main.$asphalt; &:hover { diff --git a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsList.scss b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsList.scss index 2ebdbd3e6..01b96ccee 100644 --- a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsList.scss +++ b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsList.scss @@ -80,22 +80,22 @@ @include main.dark-theme { .archived-boards-list { .thoughts-archive-title { - color: main.$gray; + color: main.$gray-1; } .list-header { - background: main.$light-gray; + background: main.$gray-4; .sort-button { - color: main.$lighter-gray; + color: main.$gray-2; font-weight: bold; &.selected-asc { - color: main.$gray; + color: main.$gray-1; } &.selected-desc { - color: main.$gray; + color: main.$gray-1; } } } diff --git a/ui/src/App/Team/Header/Header.scss b/ui/src/App/Team/Header/Header.scss index 58f65e31c..7cd66870a 100644 --- a/ui/src/App/Team/Header/Header.scss +++ b/ui/src/App/Team/Header/Header.scss @@ -165,24 +165,24 @@ @include main.dark-theme { .header { .right-content { - color: main.$gray; + color: main.$gray-1; } .horizontal-separator { - background-color: rgba($black, 0.22); + background-color: rgba(main.$black, 0.22); opacity: 1; } .team-name { - color: rgba(main.$gray, 0.75); + color: rgba(main.$gray-1, 0.75); } .nav-link { - color: rgba(main.$gray, 0.4); + color: rgba(main.$gray-1, 0.4); &.selected { - color: main.$gray; - background-color: rgba(main.$gray, 0.2); + color: main.$gray-1; + background-color: rgba(main.$gray-1, 0.2); } } } diff --git a/ui/src/App/Team/Header/Settings/Settings.scss b/ui/src/App/Team/Header/Settings/Settings.scss index f21e80d0f..72129ee5d 100644 --- a/ui/src/App/Team/Header/Settings/Settings.scss +++ b/ui/src/App/Team/Header/Settings/Settings.scss @@ -99,7 +99,7 @@ white-space: nowrap; text-transform: capitalize; - background-color: main.$gray; + background-color: main.$gray-1; cursor: pointer; &.selected { @@ -125,11 +125,11 @@ background-color: main.$light-asphalt; .settings-title { - color: main.$gray; + color: main.$gray-1; } .settings-subtitle { - color: rgba(main.$gray, 0.5); + color: rgba(main.$gray-1, 0.5); } } @@ -138,6 +138,6 @@ } .tab { - background-color: rgba($black, 0.22); + background-color: rgba(main.$black, 0.22); } } diff --git a/ui/src/App/Team/Radiator/RadiatorPage.scss b/ui/src/App/Team/Radiator/RadiatorPage.scss index 5563774e0..6ca534742 100644 --- a/ui/src/App/Team/Radiator/RadiatorPage.scss +++ b/ui/src/App/Team/Radiator/RadiatorPage.scss @@ -42,7 +42,7 @@ margin-top: 0.5rem; margin-bottom: 2rem; - color: main.$dark-gray; + color: main.$gray-3; font-size: 1.1rem; } } @@ -84,6 +84,6 @@ @include main.dark-theme { .radiator-page-title { - color: main.$gray; + color: main.$gray-1; } } diff --git a/ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.scss b/ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.scss index 878769558..8133563f4 100644 --- a/ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.scss +++ b/ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.scss @@ -17,7 +17,7 @@ @use '../../../../Styles/main'; -$dark-theme-accent-color: main.$gray; +$dark-theme-accent-color: main.$gray-1; .mobile-column-nav { display: flex; diff --git a/ui/src/App/Team/Retro/RetroSubheader/FeedbackForm/FeedbackForm.scss b/ui/src/App/Team/Retro/RetroSubheader/FeedbackForm/FeedbackForm.scss index f6cf06fa6..5f2d43ad0 100644 --- a/ui/src/App/Team/Retro/RetroSubheader/FeedbackForm/FeedbackForm.scss +++ b/ui/src/App/Team/Retro/RetroSubheader/FeedbackForm/FeedbackForm.scss @@ -106,22 +106,22 @@ .feedback-form { .comments-section { .label { - color: main.$gray; + color: main.$gray-1; } .comments-textarea { - color: main.$gray; + color: main.$gray-1; } } .feedback-email-section { .label { - color: rgba(main.$gray, 0.4); + color: rgba(main.$gray-1, 0.4); } .email-input { - color: main.$gray; - border-bottom-color: rgba(main.$gray, 0.15); + color: main.$gray-1; + border-bottom-color: rgba(main.$gray-1, 0.15); } } diff --git a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.scss b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.scss index 0391c2489..12d3dd7e7 100644 --- a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.scss +++ b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.scss @@ -68,7 +68,7 @@ @include main.dark-theme { .thought-item-with-add-action { .add-action-item-button { - color: main.$gray; + color: main.$gray-1; background-color: main.$light-asphalt; } } diff --git a/ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.scss b/ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.scss index 772cf35ae..eda58845f 100644 --- a/ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.scss +++ b/ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.scss @@ -49,7 +49,7 @@ text-align: left; - border-right: 2px solid main.$gray; + border-right: 2px solid main.$gray-1; .date-created-value { margin: 0.5rem 0 0; @@ -60,7 +60,7 @@ @include main.dark-theme { .action-item-display-only { - color: main.$gray; + color: main.$gray-1; background-color: main.$light-asphalt; box-shadow: 0 1px 2px rgba(main.$black, 0.35); diff --git a/ui/src/Common/AssigneeInput/AssigneeInput.scss b/ui/src/Common/AssigneeInput/AssigneeInput.scss index 65642d014..af5578035 100644 --- a/ui/src/Common/AssigneeInput/AssigneeInput.scss +++ b/ui/src/Common/AssigneeInput/AssigneeInput.scss @@ -83,11 +83,11 @@ @include main.dark-theme { .assignee-container { .label { - color: main.$lighter-gray; + color: main.$gray-2; } .assignee { - color: main.$gray; + color: main.$gray-1; border-bottom-color: main.$dark-yellow; &:focus:not(:read-only) { diff --git a/ui/src/Common/AuthTemplate/AuthTemplate.scss b/ui/src/Common/AuthTemplate/AuthTemplate.scss index ae4326bc9..6a5e6c1f4 100644 --- a/ui/src/Common/AuthTemplate/AuthTemplate.scss +++ b/ui/src/Common/AuthTemplate/AuthTemplate.scss @@ -101,7 +101,7 @@ @include main.dark-theme { .auth-template { - color: main.$gray; + color: main.$gray-1; background-color: main.$dark-asphalt; } } diff --git a/ui/src/Common/AuthTemplate/Contributors/Contributors.scss b/ui/src/Common/AuthTemplate/Contributors/Contributors.scss index df453ff41..9d6d20b37 100644 --- a/ui/src/Common/AuthTemplate/Contributors/Contributors.scss +++ b/ui/src/Common/AuthTemplate/Contributors/Contributors.scss @@ -56,6 +56,6 @@ @include main.dark-theme { .contributors { - background-color: rgba($black, 0.22); + background-color: rgba(main.$black, 0.22); } } diff --git a/ui/src/Common/AuthTemplate/Form/Form.scss b/ui/src/Common/AuthTemplate/Form/Form.scss index c69168ae4..5dc9bf955 100644 --- a/ui/src/Common/AuthTemplate/Form/Form.scss +++ b/ui/src/Common/AuthTemplate/Form/Form.scss @@ -26,7 +26,7 @@ .submit-button { width: 100%; - color: main.$gray; + color: main.$gray-1; background-color: main.$dark-turquoise; diff --git a/ui/src/Common/Buttons/Button.scss b/ui/src/Common/Buttons/Button.scss index 9665cdc21..025be3e33 100644 --- a/ui/src/Common/Buttons/Button.scss +++ b/ui/src/Common/Buttons/Button.scss @@ -38,7 +38,7 @@ } .button-primary { - color: main.$gray; + color: main.$gray-1; background-color: main.$asphalt; outline: none; @@ -65,15 +65,15 @@ @include main.dark-theme { .button-primary { color: main.$asphalt; - background-color: main.$gray; + background-color: main.$gray-1; &:hover, &:focus { - color: main.$gray; + color: main.$gray-1; } } .button-secondary { - color: rgba(main.$gray, 0.8); + color: rgba(main.$gray-1, 0.8); } } diff --git a/ui/src/Common/ColumnHeader/ColumnHeader.scss b/ui/src/Common/ColumnHeader/ColumnHeader.scss index 053d92202..61d5bc2e5 100644 --- a/ui/src/Common/ColumnHeader/ColumnHeader.scss +++ b/ui/src/Common/ColumnHeader/ColumnHeader.scss @@ -157,7 +157,7 @@ @include main.dark-theme { .column-header { - color: main.$gray; + color: main.$gray-1; &.happy { background-color: main.$dark-green; diff --git a/ui/src/Common/ColumnItem/ColumnItem.scss b/ui/src/Common/ColumnItem/ColumnItem.scss index 1883c6508..8e013b2f0 100644 --- a/ui/src/Common/ColumnItem/ColumnItem.scss +++ b/ui/src/Common/ColumnItem/ColumnItem.scss @@ -68,7 +68,7 @@ @include main.dark-theme { .column-item { - color: main.$gray; + color: main.$gray-1; background-color: main.$light-asphalt; box-shadow: 0 1px 2px rgba(main.$black, 0.35); diff --git a/ui/src/Common/ColumnItem/DeleteColumnItem/DeleteColumnItem.scss b/ui/src/Common/ColumnItem/DeleteColumnItem/DeleteColumnItem.scss index b60c54a4d..e3a9d4214 100644 --- a/ui/src/Common/ColumnItem/DeleteColumnItem/DeleteColumnItem.scss +++ b/ui/src/Common/ColumnItem/DeleteColumnItem/DeleteColumnItem.scss @@ -56,7 +56,7 @@ @include main.dark-theme { .delete-column-item { - color: main.$gray; + color: main.$gray-1; background-color: main.$light-asphalt; box-shadow: 0 0 0 4px main.$red; diff --git a/ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.scss b/ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.scss index ed7345baf..3e0bacdf3 100644 --- a/ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.scss +++ b/ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.scss @@ -51,7 +51,7 @@ @include main.dark-theme { .edit-column-item { - color: main.$gray; + color: main.$gray-1; background-color: main.$light-asphalt; box-shadow: 0 0 0 4px main.$dark-purple; diff --git a/ui/src/Common/ColumnItemButtons/ColumnItemButtonGroup/ColumnItemButtonGroup.scss b/ui/src/Common/ColumnItemButtons/ColumnItemButtonGroup/ColumnItemButtonGroup.scss index cb1637f50..51e90209b 100644 --- a/ui/src/Common/ColumnItemButtons/ColumnItemButtonGroup/ColumnItemButtonGroup.scss +++ b/ui/src/Common/ColumnItemButtons/ColumnItemButtonGroup/ColumnItemButtonGroup.scss @@ -100,7 +100,7 @@ $opacity: 0.25; border-top-color: $dark-border; .column-item-button { - color: main.$gray; + color: main.$gray-1; background-color: inherit; border-color: $dark-border; @@ -108,7 +108,7 @@ $opacity: 0.25; &.button-secondary { &:hover, &:focus { - color: main.$dark-gray; + color: main.$gray-3; } } diff --git a/ui/src/Common/CountSeparator/CountSeparator.scss b/ui/src/Common/CountSeparator/CountSeparator.scss index 8301bfdb5..fd6650ae3 100644 --- a/ui/src/Common/CountSeparator/CountSeparator.scss +++ b/ui/src/Common/CountSeparator/CountSeparator.scss @@ -61,10 +61,10 @@ @include main.dark-theme { .count-separator { - color: main.$gray; + color: main.$gray-1; .separator { - background: rgba($black, 0.22) none; + background: rgba(main.$black, 0.22) none; } } } diff --git a/ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.scss b/ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.scss index e6bacfbd7..a47b0d4cf 100644 --- a/ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.scss +++ b/ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.scss @@ -77,11 +77,11 @@ @include main.dark-theme { .create-column-item-input { .input-field { - color: main.$gray; + color: main.$gray-1; background-color: main.$asphalt; &::placeholder { - color: rgba(main.$gray, 0.4); + color: rgba(main.$gray-1, 0.4); } &.happy { diff --git a/ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.scss b/ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.scss index f897d9404..c83422f3c 100644 --- a/ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.scss +++ b/ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.scss @@ -48,6 +48,6 @@ @include main.dark-theme { .floating-character-countdown { - color: main.$gray; + color: main.$gray-1; } } diff --git a/ui/src/Common/FormTemplate/FormTemplate.scss b/ui/src/Common/FormTemplate/FormTemplate.scss index ab6eabfa3..504122f1e 100644 --- a/ui/src/Common/FormTemplate/FormTemplate.scss +++ b/ui/src/Common/FormTemplate/FormTemplate.scss @@ -102,7 +102,7 @@ &:first-of-type { color: rgba(main.$asphalt, 0.5); - border-top: 1px solid main.$gray; + border-top: 1px solid main.$gray-1; } &:last-of-type { @@ -125,16 +125,16 @@ background-color: main.$light-asphalt; .form-template-title { - color: main.$gray; + color: main.$gray-1; } .form-template-subtitle { - color: rgba(main.$gray, 0.5); + color: rgba(main.$gray-1, 0.5); } .form-template-button { &:first-of-type { - color: rgba(main.$gray, 0.5); + color: rgba(main.$gray-1, 0.5); border-top: 1px solid main.$asphalt; &:hover, diff --git a/ui/src/Common/Input/Input.scss b/ui/src/Common/Input/Input.scss index c83f4cad5..696f48fb1 100644 --- a/ui/src/Common/Input/Input.scss +++ b/ui/src/Common/Input/Input.scss @@ -73,10 +73,10 @@ @include main.dark-theme { .input-group { .input-text { - color: main.$gray; + color: main.$gray-1; background-color: main.$asphalt; - box-shadow: 0 0 0 1px main.$dark-gray; + box-shadow: 0 0 0 1px main.$gray-3; &:focus { box-shadow: 0 0 0 2px main.$turquoise; diff --git a/ui/src/Common/NotFoundSection/NotFoundSection.scss b/ui/src/Common/NotFoundSection/NotFoundSection.scss index 4e2185008..7eacecefd 100644 --- a/ui/src/Common/NotFoundSection/NotFoundSection.scss +++ b/ui/src/Common/NotFoundSection/NotFoundSection.scss @@ -37,7 +37,7 @@ } .not-found-section-description { - color: main.$dark-gray; + color: main.$gray-3; font-size: 1.25rem; } } @@ -46,7 +46,7 @@ .not-found-section { .not-found-section-subtitle, .not-found-section-title { - color: main.$gray; + color: main.$gray-1; } } } diff --git a/ui/src/Common/Toast/Toast.scss b/ui/src/Common/Toast/Toast.scss index 34255f4df..8a3668df5 100644 --- a/ui/src/Common/Toast/Toast.scss +++ b/ui/src/Common/Toast/Toast.scss @@ -15,8 +15,7 @@ * limitations under the License. */ -@import '../../Styles/colors'; -@import '../../Styles/mixins'; +@use '../../Styles/main'; .toast { display: flex; @@ -26,12 +25,12 @@ padding: 0.625rem 0 0.625rem 1rem; - color: $black; + color: main.$black; font-family: 'Quicksand', sans-serif; - background-color: $white; - border-left: 1.125rem solid $dark-gray; + background-color: main.$white; + border-left: 1.125rem solid main.$gray-3; border-radius: 6px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25); @@ -53,71 +52,71 @@ margin: 0; padding: 0 1.25rem; - color: $dark-gray; + color: main.$gray-3; font-weight: bold; font-size: 0.75rem; text-transform: uppercase; - border-left: 1px solid $gray; + border-left: 1px solid main.$gray-1; } &.error { - border-left: 1.125rem solid $red; + border-left: 1.125rem solid main.$red; .title { - color: $red; + color: main.$red; } } &.warning { - border-left: 1.125rem solid $yellow; + border-left: 1.125rem solid main.$yellow; .title { - color: $yellow; + color: main.$yellow; } } &.info { - border-left: 1.125rem solid $blue; + border-left: 1.125rem solid main.$blue; .title { - color: $blue; + color: main.$blue; } } } -@include dark-theme { +@include main.dark-theme { .toast { - color: $gray; + color: main.$gray-1; - background-color: $asphalt; - border-left: 1.125rem solid $dark-gray; + background-color: main.$asphalt; + border-left: 1.125rem solid main.$gray-3; .close-button { - border-left: 1px solid $dark-gray; + border-left: 1px solid main.$gray-3; } &.error { - border-left: 1.125rem solid $red; + border-left: 1.125rem solid main.$red; .title { - color: $red; + color: main.$red; } } &.warning { - border-left: 1.125rem solid $dark-yellow; + border-left: 1.125rem solid main.$dark-yellow; .title { - color: $dark-yellow; + color: main.$dark-yellow; } } &.info { - border-left: 1.125rem solid $dark-blue; + border-left: 1.125rem solid main.$dark-blue; .title { - color: $dark-blue; + color: main.$dark-blue; } } } diff --git a/ui/src/Common/Tooltip/Tooltip.scss b/ui/src/Common/Tooltip/Tooltip.scss index 5d1fecfb1..0c4e49f5c 100644 --- a/ui/src/Common/Tooltip/Tooltip.scss +++ b/ui/src/Common/Tooltip/Tooltip.scss @@ -76,10 +76,10 @@ @include main.dark-theme { .tooltip { color: main.$dark-asphalt; - background-color: main.$gray; + background-color: main.$gray-1; &::before { - border-bottom-color: main.$gray; + border-bottom-color: main.$gray-1; } } } diff --git a/ui/src/Styles/_colors.scss b/ui/src/Styles/_colors.scss index 26ca00afe..cc9240630 100644 --- a/ui/src/Styles/_colors.scss +++ b/ui/src/Styles/_colors.scss @@ -18,10 +18,10 @@ $white: #fff; $black: #000; -$lighter-gray: #ecf0f1ad; -$light-gray: #ecf0f120; -$gray: #ecf0f1; -$dark-gray: #95a5a6; +$gray-1: #ecf0f1; +$gray-2: #ecf0f1ad; +$gray-3: #95a5a6; +$gray-4: #ecf0f120; $green: #2ecc71; $dark-green: #27ae60; diff --git a/ui/src/Styles/_mixins.scss b/ui/src/Styles/_mixins.scss index 3d5a2b758..d63a995f9 100644 --- a/ui/src/Styles/_mixins.scss +++ b/ui/src/Styles/_mixins.scss @@ -35,7 +35,7 @@ } .dark-theme & { - background-color: colors.$black-opaque; + background-color: rgba(colors.$black, 0.22); } } diff --git a/ui/src/Styles/main.scss b/ui/src/Styles/main.scss index d43955b60..cd782f94e 100644 --- a/ui/src/Styles/main.scss +++ b/ui/src/Styles/main.scss @@ -39,7 +39,7 @@ body { height: 100%; overflow: auto; - background-color: colors.$gray; + background-color: colors.$gray-1; /* stylelint-disable selector-no-qualifying-type */ &.dark-theme {