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>
2025-01-16 20:21:31 +01:00 · 2022-01-26 04:54:15 +00:00 · 2022-01-26 04:54:15 +00:00 · 2ffe3bd6ad
commit 2ffe3bd6ad
parent f387a4d469
9 changed files with 65 additions and 66 deletions
--- 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;
  }
 }

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

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

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

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