Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-16 20:21:31 +01:00
Code Issues Projects Releases Wiki Activity

Cleanup of the SCSS Variables (#1255)

Browse Source 
* Clean up variable names and comments

* Fix Option Colour - issue #1338

* Update old scss variable name

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
This commit is contained in:
Danny Murphy 2022-01-26 04:54:15 +00:00 committed by GitHub
parent f387a4d469
commit 2ffe3bd6ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 65 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/scss/base.scss
View File

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

4
src/scss/buttons.scss
View File

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

2
src/scss/cards.scss
View File

@ -29,7 +29,7 @@
.card-header {
@include themify($themes) {
background-color: themed("headerColor");
color: themed("headingColor");
color: themed("textHeadingColor");
}
a:hover {

8
src/scss/forms.scss
View File

@ -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,

2
src/scss/navigation.scss
View File

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

2
src/scss/pages.scss
View File

@ -59,7 +59,7 @@ app-org-vault-groupings,
.card-body a {
@include themify($themes) {
color: themed("headingColor");
color: themed("textHeadingColor");
font-weight: themed("linkWeight");
}

2
src/scss/plugins.scss
View File

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

8
src/scss/toasts.scss
View File

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

85
src/scss/variables.scss
View File

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