From 2ffe3bd6adda57c14695dae80bf97699d402fa59 Mon Sep 17 00:00:00 2001 From: Danny Murphy Date: Wed, 26 Jan 2022 04:54:15 +0000 Subject: [PATCH] Cleanup of the SCSS Variables (#1255) * Clean up variable names and comments * Fix Option Colour - issue #1338 * Update old scss variable name Co-authored-by: Thomas Rittson --- src/scss/base.scss | 18 ++++----- src/scss/buttons.scss | 4 +- src/scss/cards.scss | 2 +- src/scss/forms.scss | 8 +++- src/scss/navigation.scss | 2 +- src/scss/pages.scss | 2 +- src/scss/plugins.scss | 2 +- src/scss/toasts.scss | 8 ++-- src/scss/variables.scss | 85 +++++++++++++++++++--------------------- 9 files changed, 65 insertions(+), 66 deletions(-) diff --git a/src/scss/base.scss b/src/scss/base.scss index 95876f3a70..c88aa317a5 100644 --- a/src/scss/base.scss +++ b/src/scss/base.scss @@ -14,7 +14,7 @@ body { } @include themify($themes) { background-color: themed("layoutFrontendColor"); - color: themed("headingColor"); + color: themed("textHeadingColor"); } } @@ -53,7 +53,7 @@ body { h4 { margin: 0; @include themify($themes) { - color: themed("headingColor"); + color: themed("textHeadingColor"); } } } @@ -114,7 +114,7 @@ h3, h4, h5 { @include themify($themes) { - color: themed("headingColor"); + color: themed("textHeadingColor"); } small { @@ -123,7 +123,7 @@ h5 { &.spaced-header { @include themify($themes) { - color: themed("headingColor"); + color: themed("textHeadingColor"); } } } @@ -135,7 +135,7 @@ a { &.text-body { @include themify($themes) { - color: themed("headingColor") !important; + color: themed("textHeadingColor") !important; font-weight: themed("linkWeight"); } } @@ -190,14 +190,14 @@ code { .bg-success { @include themify($themes) { background-color: themed("success") !important; - color: themed("successTextColor") !important; + color: themed("textSuccessColor") !important; } } .bg-warning { @include themify($themes) { background-color: themed("warning") !important; - color: themed("warningTextColor") !important; + color: themed("textWarningColor") !important; } } @@ -205,14 +205,14 @@ code { .bg-danger { @include themify($themes) { background-color: themed("danger") !important; - color: themed("dangerTextColor") !important; + color: themed("textDangerColor") !important; } } .bg-info { @include themify($themes) { background-color: themed("info") !important; - color: themed("infoTextColor") !important; + color: themed("textInfoColor") !important; } } diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss index ae867266b7..96b3bd8484 100644 --- a/src/scss/buttons.scss +++ b/src/scss/buttons.scss @@ -224,13 +224,13 @@ .badge-warning { @include themify($themes) { background-color: themed("warning"); - color: themed("warningTextColor"); + color: themed("textWarningColor"); } } .badge-success { @include themify($themes) { background-color: themed("success"); - color: themed("successTextColor"); + color: themed("textSuccessColor"); } } diff --git a/src/scss/cards.scss b/src/scss/cards.scss index e1bc4ed90c..ef83b07d7d 100644 --- a/src/scss/cards.scss +++ b/src/scss/cards.scss @@ -29,7 +29,7 @@ .card-header { @include themify($themes) { background-color: themed("headerColor"); - color: themed("headingColor"); + color: themed("textHeadingColor"); } a:hover { diff --git a/src/scss/forms.scss b/src/scss/forms.scss index 1a6f4a86aa..5406fb6f67 100644 --- a/src/scss/forms.scss +++ b/src/scss/forms.scss @@ -24,14 +24,14 @@ label:not(.form-check-label):not(.btn), label.bold { font-weight: 600; @include themify($themes) { - color: themed("headingColor"); + color: themed("textHeadingColor"); } } label.form-check-label, .form-control-file { @include themify($themes) { - color: themed("headingColor"); + color: themed("textHeadingColor"); } } @@ -78,6 +78,10 @@ label.form-check-label, background-color: themed("inputBackgroundColor"); border-color: themed("inputBorderColor"); color: themed("inputTextColor"); + + option { + background-color: themed("backgroundColor"); + } } &:disabled, diff --git a/src/scss/navigation.scss b/src/scss/navigation.scss index a5da92ea76..b746646ce0 100644 --- a/src/scss/navigation.scss +++ b/src/scss/navigation.scss @@ -108,7 +108,7 @@ display: block; font-size: $font-size-lg; @include themify($themes) { - color: themed("headingColor"); + color: themed("textHeadingColor"); } } } diff --git a/src/scss/pages.scss b/src/scss/pages.scss index 91f71e7fe0..70aab9852a 100644 --- a/src/scss/pages.scss +++ b/src/scss/pages.scss @@ -59,7 +59,7 @@ app-org-vault-groupings, .card-body a { @include themify($themes) { - color: themed("headingColor"); + color: themed("textHeadingColor"); font-weight: themed("linkWeight"); } diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss index 8c49f4d0ea..0610535eb5 100644 --- a/src/scss/plugins.scss +++ b/src/scss/plugins.scss @@ -185,7 +185,7 @@ margin: 0; padding: 10px 0 15px; @include themify($themes) { - color: themed("headingColor"); + color: themed("textHeadingColor"); } } diff --git a/src/scss/toasts.scss b/src/scss/toasts.scss index 43377bc59c..075d002f32 100644 --- a/src/scss/toasts.scss +++ b/src/scss/toasts.scss @@ -51,7 +51,7 @@ &:before, & .toast-close-button { @include themify($themes) { - color: themed("dangerTextColor") !important; + color: themed("textDangerColor") !important; } } @@ -69,7 +69,7 @@ &:before, & .toast-close-button { @include themify($themes) { - color: themed("warningTextColor") !important; + color: themed("textWarningColor") !important; } } @@ -87,7 +87,7 @@ &:before, & .toast-close-button { @include themify($themes) { - color: themed("infoTextColor") !important; + color: themed("textInfoColor") !important; } } @@ -105,7 +105,7 @@ &:before, & .toast-close-button { @include themify($themes) { - color: themed("successTextColor") !important; + color: themed("textSuccessColor") !important; } } diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 929b900178..c0df4f41be 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -10,6 +10,8 @@ $warning: #bf7e16; $danger: #dd4b39; $white: #ffffff; +// Bootstrap Variable Overrides + $theme-colors: ( "primary-accent": $primary-accent, "secondary-alt": $secondary-alt, @@ -74,9 +76,10 @@ $grid-breakpoints: ( xl: 4px, ); -$text-color: #333333; $border-color: $secondary; +// Font Awesome webfonts path + $fa-font-path: "~font-awesome/fonts"; // MFA Types for logo styling with no dark theme alternative @@ -84,8 +87,13 @@ $fa-font-path: "~font-awesome/fonts"; $mfaTypes: 0, 2, 3, 4, 6; // Theme Variables +// Light $lightDangerHover: #c43421; +$lightInputColor: #465057; +$lightInputPlaceholderColor: #b6b8b8; + +// Dark $darkPrimary: #6a99f0; $darkPrimary-alt: #b4ccf9; @@ -101,30 +109,18 @@ $darkBlue1: #4c525f; $darkBlue2: #3c424e; $darkDarkBlue1: #2f343d; $darkDarkBlue2: #1f242e; - -$lightInputColor: #465057; -$lightInputPlaceholderColor: #b6b8b8; $darkInputColor: $white; $darkInputPlaceholderColor: $darkGrey1; $themes: ( light: ( - logoSuffix: "dark", primary: $primary, primaryAlt: $primary-accent, danger: $danger, + info: #343a40, success: $success, warning: $warning, - info: #343a40, - textColor: $text-color, - headingColor: #333333, - darkTextColor: #495057, - warningTextColor: $white, - successTextColor: $white, - dangerTextColor: $white, - infoTextColor: $white, - textMuted: #6c757d, - backgroundColor: $body-bg, + backgroundColor: $white, badgeDangerBackground: $danger, badgeDangerText: $white, badgeInfoBackground: #555555, @@ -134,15 +130,16 @@ $themes: ( badgePrimaryText: $white, badgeSecondaryBackground: #ced4da, badgeSecondaryText: #212529, - bgPrimaryColor: $primary, bgLightColor: #f8f9fa, + bgPrimaryColor: $primary, borderColor: $border-color, borderPrimaryColor: $primary, + browserInputIconsFilter: invert(0), btnDanger: $danger, btnDangerHover: $lightDangerHover, btnDangerText: $white, - btnLinkTextColor: $primary, - btnLinkTextColorHover: #104097, + btnLinkText: $primary, + btnLinkTextHover: #104097, btnOutlineDangerBackground: $input-bg, btnOutlineDangerBackgroundHover: $danger, btnOutlineDangerBorder: #ced4da, @@ -176,9 +173,8 @@ $themes: ( cdkDraggingBackground: $white, codeColor: #e83e8c, dropdownBackground: $white, - dropdownDangerHover: #c43421, dropdownHover: rgba(0, 0, 0, 0.06), - dropdownTextColor: $text-color, + dropdownTextColor: $body-color, dropdownTextMuted: #6c757d, focus: rgb(23 93 220 / 25%), footerBackgroundColor: #fbfbfb, @@ -187,7 +183,7 @@ $themes: ( iconColor: #777777, iconHover: $body-color, imgFilter: invert(0) grayscale(0), - inputBackgroundColor: #fbfbfb, + inputBackgroundColor: $input-bg, inputBorderColor: $border-color, inputDisabledBackground: #e0e0e0, inputDisabledColor: #6c757d, @@ -198,22 +194,21 @@ $themes: ( linkColor: $primary, linkColorHover: #104097, linkWeight: 400, - listItemActive: $text-color, + listItemActive: $body-color, listItemBorder: rgba(0, 0, 0, 0.125), - listItemColor: $primary, - listItemColorHover: #104097, loadingSvg: url("../images/loading.svg"), + logoSuffix: "dark", + mfaLogoSuffix: ".png", navActiveBackground: $white, navActiveWeight: 600, navBackground: $primary, navBackgroundAlt: $secondary-alt, navOrgBackgroundColor: #fbfbfb, navWeight: 600, - pwLetter: $text-color, + pwLetter: $body-color, pwNumber: #007fde, pwSpecial: #c40800, pwStrengthBackground: #e9ecef, - registerHeadingColor: $white, separator: $secondary, separatorHr: rgb(0, 0, 0, 0.1), tableColorHover: #333333, @@ -221,25 +216,21 @@ $themes: ( tableLinkColorHover: #104097, tableRowHover: rgba(0, 0, 0, 0.03), tableSeparator: #dee2e6, - browserInputIconsFilter: invert(0), - mfaLogoSuffix: ".png", + textColor: $body-color, + textDangerColor: $white, + textInfoColor: $white, + textHeadingColor: #333333, + textMuted: #6c757d, + textSuccessColor: $white, + textWarningColor: $white, ), dark: ( - logoSuffix: "white", primary: $darkPrimary, primaryAlt: $darkPrimary-alt, danger: $darkDanger, + info: $darkInfo, success: $darkSuccess, warning: $darkWarning, - info: $darkInfo, - textColor: $darkGrey1, - headingColor: $white, - darkTextColor: $darkDarkBlue2, - warningTextColor: $darkDarkBlue2, - successTextColor: $darkDarkBlue2, - dangerTextColor: $darkDarkBlue2, - infoTextColor: $darkDarkBlue2, - textMuted: $darkGrey1, backgroundColor: $darkDarkBlue2, badgeDangerBackground: $darkDanger, badgeDangerText: $darkDarkBlue2, @@ -250,10 +241,11 @@ $themes: ( badgePrimaryText: $darkDarkBlue2, badgeSecondaryBackground: $darkGrey2, badgeSecondaryText: $darkDarkBlue2, - bgPrimaryColor: $darkPrimary, bgLightColor: $darkDarkBlue2, + bgPrimaryColor: $darkPrimary, borderColor: $darkBlue1, borderPrimaryColor: $darkPrimary, + browserInputIconsFilter: invert(1), btnDanger: $darkDanger, btnDangerHover: $darkDangerHover, btnDangerText: $darkDarkBlue2, @@ -292,7 +284,6 @@ $themes: ( cdkDraggingBackground: $darkDarkBlue1, codeColor: #e83e8c, dropdownBackground: $darkDarkBlue1, - dropdownDangerHover: $darkDangerHover, dropdownHover: rgba(255, 255, 255, 0.03), dropdownTextColor: $white, dropdownTextMuted: #bec6cf, @@ -316,9 +307,9 @@ $themes: ( linkWeight: 600, listItemActive: $darkPrimary, listItemBorder: $darkBlue1, - listItemColor: $white, - listItemColorHover: $white, loadingSvg: url("../images/loading-white.svg"), + logoSuffix: "white", + mfaLogoSuffix: "-w.png", navActiveBackground: $darkDarkBlue2, navActiveWeight: 600, navBackground: $darkDarkBlue1, @@ -329,7 +320,6 @@ $themes: ( pwNumber: #52bdfb, pwSpecial: #ff7c70, pwStrengthBackground: $darkBlue2, - registerHeadingColor: $white, separator: $darkBlue1, separatorHr: $darkBlue1, tableColorHover: $darkGrey1, @@ -337,8 +327,13 @@ $themes: ( tableLinkColorHover: $white, tableRowHover: rgba(255, 255, 255, 0.03), tableSeparator: $darkBlue1, - browserInputIconsFilter: invert(1), - mfaLogoSuffix: "-w.png", + textColor: $darkGrey1, + textDangerColor: $darkDarkBlue2, + textHeadingColor: $white, + textInfoColor: $darkDarkBlue2, + textMuted: $darkGrey1, + textSuccessColor: $darkDarkBlue2, + textWarningColor: $darkDarkBlue2, ), );