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 <trittson@bitwarden.com>

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;
   }
 }
 

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");
   }
 }

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 {

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,

src/scss/navigation.scss

@@ -108,7 +108,7 @@
       display: block;
       font-size: $font-size-lg;
       @include themify($themes) {
-        color: themed("headingColor");
+        color: themed("textHeadingColor");
       }
     }
   }

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");
       }
 

src/scss/plugins.scss

@@ -185,7 +185,7 @@
     margin: 0;
     padding: 10px 0 15px;
     @include themify($themes) {
-      color: themed("headingColor");
+      color: themed("textHeadingColor");
     }
   }
 

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;
         }
       }
 

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,
   ),
 );