Combine dark color variables

FordLabs · Apr 20, 2022 · 981fed5 · 981fed5
1 parent 04fce22
commit 981fed5
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 12 deletions.
diff --git a/ui/src/App/Team/Header/Header.scss b/ui/src/App/Team/Header/Header.scss
@@ -169,7 +169,7 @@
 		}
 
 		.horizontal-separator {
-			background-color: main.$count-separator-background-dark;
+			background-color: rgba($black, 0.22);
 			opacity: 1;
 		}
 

diff --git a/ui/src/App/Team/Header/Settings/Settings.scss b/ui/src/App/Team/Header/Settings/Settings.scss
@@ -138,6 +138,6 @@
 	}
 
 	.tab {
-		background-color: main.$header-background-color-dark;
+		background-color: rgba($black, 0.22);
 	}
 }
diff --git 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: main.$header-background-color-dark;
+		background-color: rgba($black, 0.22);
 	}
 }
diff --git a/ui/src/Common/ColumnItemButtons/ColumnItemButtonGroup/ColumnItemButtonGroup.scss b/ui/src/Common/ColumnItemButtons/ColumnItemButtonGroup/ColumnItemButtonGroup.scss
@@ -94,14 +94,16 @@ $opacity: 0.25;
 }
 
 @include main.dark-theme {
+	$dark-border: rgba(main.$black, 0.08);
+
 	.column-item-button-group {
-		border-top-color: main.$task-footer-separator-dark;
+		border-top-color: $dark-border;
 
 		.column-item-button {
 			color: main.$gray;
 
 			background-color: inherit;
-			border-color: main.$task-footer-separator-dark;
+			border-color: $dark-border;
 
 			&.button-secondary {
 				&:hover,

diff --git a/ui/src/Common/CountSeparator/CountSeparator.scss b/ui/src/Common/CountSeparator/CountSeparator.scss
@@ -64,7 +64,7 @@
 		color: main.$gray;
 
 		.separator {
-			background: main.$count-separator-background-dark none;
+			background: rgba($black, 0.22) none;
 		}
 	}
 }
diff --git a/ui/src/Styles/_colors.scss b/ui/src/Styles/_colors.scss
@@ -44,8 +44,3 @@ $dark-turquoise: #16a085;
 
 $purple: #a56de2;
 $dark-purple: #8e44ad;
-
-$temp-count-separator-color: #111;
-$count-separator-background-dark: rgba($temp-count-separator-color, 0.25);
-$task-footer-separator-dark: rgba($black, 0.08);
-$header-background-color-dark: rgba($black, 0.22);
diff --git a/ui/src/Styles/_mixins.scss b/ui/src/Styles/_mixins.scss
@@ -35,7 +35,7 @@
 	}
 
 	.dark-theme & {
-		background-color: colors.$header-background-color-dark;
+		background-color: colors.$black-opaque;
 	}
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -138,6 +138,6 @@ @@
     	}
     	.tab {
-    		background-color: main.$header-background-color-dark;
+    		background-color: rgba($black, 0.22);
     	}
     }