Correctly order and rename gray variables

FordLabs · Apr 20, 2022 · 548ad2c · 548ad2c
1 parent 981fed5
commit 548ad2c
Show file tree

Hide file tree

Showing 32 changed files with 93 additions and 94 deletions.
diff --git a/ui/src/App/Team/Archives/ActionItemArchives/ActionItemArchives.scss b/ui/src/App/Team/Archives/ActionItemArchives/ActionItemArchives.scss
@@ -38,7 +38,7 @@
 		margin-top: 0.5rem;
 		margin-bottom: 2rem;
 
-		color: main.$dark-gray;
+		color: main.$gray-3;
 		font-size: 1.1rem;
 	}
 
@@ -62,6 +62,6 @@
 
 @include main.dark-theme {
 	.action-item-archives-title {
-		color: main.$gray;
+		color: main.$gray-1;
 	}
 }
diff --git a/.../Team/Archives/ThoughtArchives/ArchivedBoard/ArchivedBoardColumn/ArchivedBoardColumn.scss b/.../Team/Archives/ThoughtArchives/ArchivedBoard/ArchivedBoardColumn/ArchivedBoardColumn.scss
@@ -61,7 +61,7 @@
 @include main.dark-theme {
 	.archived-column {
 		.archived-thought {
-			color: main.$gray;
+			color: main.$gray-1;
 			background-color: main.$light-asphalt;
 
 			.archived-thought-footer {

diff --git a/...Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.scss b/...Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.scss
@@ -36,7 +36,7 @@
 		height: 2rem;
 		margin: 1rem;
 
-		background: main.$gray;
+		background: main.$gray-1;
 		border-radius: 20px;
 	}
 
@@ -46,7 +46,7 @@
 
 	.view-button {
 		padding: 1rem 1.5rem;
-		border-left: 1px solid main.$gray;
+		border-left: 1px solid main.$gray-1;
 
 		&:hover {
 			color: main.$turquoise;
@@ -56,15 +56,15 @@
 
 @include main.dark-theme {
 	.archived-board-tile {
-		color: main.$gray;
+		color: main.$gray-1;
 		background: main.$light-asphalt;
 
 		.thought-count {
-			background: main.$light-gray;
+			background: main.$gray-4;
 		}
 
 		.view-button {
-			color: main.$lighter-gray;
+			color: main.$gray-2;
 			border-left: 1px solid main.$asphalt;
 
 			&:hover {

diff --git a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsList.scss b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsList.scss
@@ -80,22 +80,22 @@
 @include main.dark-theme {
 	.archived-boards-list {
 		.thoughts-archive-title {
-			color: main.$gray;
+			color: main.$gray-1;
 		}
 
 		.list-header {
-			background: main.$light-gray;
+			background: main.$gray-4;
 
 			.sort-button {
-				color: main.$lighter-gray;
+				color: main.$gray-2;
 				font-weight: bold;
 
 				&.selected-asc {
-					color: main.$gray;
+					color: main.$gray-1;
 				}
 
 				&.selected-desc {
-					color: main.$gray;
+					color: main.$gray-1;
 				}
 			}
 		}

diff --git a/ui/src/App/Team/Header/Header.scss b/ui/src/App/Team/Header/Header.scss
@@ -165,24 +165,24 @@
 @include main.dark-theme {
 	.header {
 		.right-content {
-			color: main.$gray;
+			color: main.$gray-1;
 		}
 
 		.horizontal-separator {
-			background-color: rgba($black, 0.22);
+			background-color: rgba(main.$black, 0.22);
 			opacity: 1;
 		}
 
 		.team-name {
-			color: rgba(main.$gray, 0.75);
+			color: rgba(main.$gray-1, 0.75);
 		}
 
 		.nav-link {
-			color: rgba(main.$gray, 0.4);
+			color: rgba(main.$gray-1, 0.4);
 
 			&.selected {
-				color: main.$gray;
-				background-color: rgba(main.$gray, 0.2);
+				color: main.$gray-1;
+				background-color: rgba(main.$gray-1, 0.2);
 			}
 		}
 	}

diff --git a/ui/src/App/Team/Header/Settings/Settings.scss b/ui/src/App/Team/Header/Settings/Settings.scss
@@ -99,7 +99,7 @@
 		white-space: nowrap;
 		text-transform: capitalize;
 
-		background-color: main.$gray;
+		background-color: main.$gray-1;
 		cursor: pointer;
 
 		&.selected {
@@ -125,11 +125,11 @@
 		background-color: main.$light-asphalt;
 
 		.settings-title {
-			color: main.$gray;
+			color: main.$gray-1;
 		}
 
 		.settings-subtitle {
-			color: rgba(main.$gray, 0.5);
+			color: rgba(main.$gray-1, 0.5);
 		}
 	}
 
@@ -138,6 +138,6 @@
 	}
 
 	.tab {
-		background-color: rgba($black, 0.22);
+		background-color: rgba(main.$black, 0.22);
 	}
 }
diff --git a/ui/src/App/Team/Radiator/RadiatorPage.scss b/ui/src/App/Team/Radiator/RadiatorPage.scss
@@ -42,7 +42,7 @@
 			margin-top: 0.5rem;
 			margin-bottom: 2rem;
 
-			color: main.$dark-gray;
+			color: main.$gray-3;
 			font-size: 1.1rem;
 		}
 	}
@@ -84,6 +84,6 @@
 
 @include main.dark-theme {
 	.radiator-page-title {
-		color: main.$gray;
+		color: main.$gray-1;
 	}
 }
diff --git a/ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.scss b/ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.scss
@@ -17,7 +17,7 @@
 
 @use '../../../../Styles/main';
 
-$dark-theme-accent-color: main.$gray;
+$dark-theme-accent-color: main.$gray-1;
 
 .mobile-column-nav {
 	display: flex;

diff --git a/ui/src/App/Team/Retro/RetroSubheader/FeedbackForm/FeedbackForm.scss b/ui/src/App/Team/Retro/RetroSubheader/FeedbackForm/FeedbackForm.scss
@@ -106,22 +106,22 @@
 	.feedback-form {
 		.comments-section {
 			.label {
-				color: main.$gray;
+				color: main.$gray-1;
 			}
 
 			.comments-textarea {
-				color: main.$gray;
+				color: main.$gray-1;
 			}
 		}
 
 		.feedback-email-section {
 			.label {
-				color: rgba(main.$gray, 0.4);
+				color: rgba(main.$gray-1, 0.4);
 			}
 
 			.email-input {
-				color: main.$gray;
-				border-bottom-color: rgba(main.$gray, 0.15);
+				color: main.$gray-1;
+				border-bottom-color: rgba(main.$gray-1, 0.15);
 			}
 		}
 

diff --git a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.scss b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.scss
@@ -68,7 +68,7 @@
 @include main.dark-theme {
 	.thought-item-with-add-action {
 		.add-action-item-button {
-			color: main.$gray;
+			color: main.$gray-1;
 			background-color: main.$light-asphalt;
 		}
 	}

diff --git a/ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.scss b/ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.scss
@@ -49,7 +49,7 @@
 
 		text-align: left;
 
-		border-right: 2px solid main.$gray;
+		border-right: 2px solid main.$gray-1;
 
 		.date-created-value {
 			margin: 0.5rem 0 0;
@@ -60,7 +60,7 @@
 
 @include main.dark-theme {
 	.action-item-display-only {
-		color: main.$gray;
+		color: main.$gray-1;
 
 		background-color: main.$light-asphalt;
 		box-shadow: 0 1px 2px rgba(main.$black, 0.35);

diff --git a/ui/src/Common/AssigneeInput/AssigneeInput.scss b/ui/src/Common/AssigneeInput/AssigneeInput.scss
@@ -83,11 +83,11 @@
 @include main.dark-theme {
 	.assignee-container {
 		.label {
-			color: main.$lighter-gray;
+			color: main.$gray-2;
 		}
 
 		.assignee {
-			color: main.$gray;
+			color: main.$gray-1;
 			border-bottom-color: main.$dark-yellow;
 
 			&:focus:not(:read-only) {

diff --git a/ui/src/Common/AuthTemplate/AuthTemplate.scss b/ui/src/Common/AuthTemplate/AuthTemplate.scss
@@ -101,7 +101,7 @@
 
 @include main.dark-theme {
 	.auth-template {
-		color: main.$gray;
+		color: main.$gray-1;
 		background-color: main.$dark-asphalt;
 	}
 }
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: rgba($black, 0.22);
+		background-color: rgba(main.$black, 0.22);
 	}
 }
diff --git a/ui/src/Common/AuthTemplate/Form/Form.scss b/ui/src/Common/AuthTemplate/Form/Form.scss
@@ -26,7 +26,7 @@
 	.submit-button {
 		width: 100%;
 
-		color: main.$gray;
+		color: main.$gray-1;
 
 		background-color: main.$dark-turquoise;
 

diff --git a/ui/src/Common/Buttons/Button.scss b/ui/src/Common/Buttons/Button.scss
@@ -38,7 +38,7 @@
 }
 
 .button-primary {
-	color: main.$gray;
+	color: main.$gray-1;
 
 	background-color: main.$asphalt;
 	outline: none;
@@ -65,15 +65,15 @@
 @include main.dark-theme {
 	.button-primary {
 		color: main.$asphalt;
-		background-color: main.$gray;
+		background-color: main.$gray-1;
 
 		&:hover,
 		&:focus {
-			color: main.$gray;
+			color: main.$gray-1;
 		}
 	}
 
 	.button-secondary {
-		color: rgba(main.$gray, 0.8);
+		color: rgba(main.$gray-1, 0.8);
 	}
 }
diff --git a/ui/src/Common/ColumnHeader/ColumnHeader.scss b/ui/src/Common/ColumnHeader/ColumnHeader.scss
@@ -157,7 +157,7 @@
 
 @include main.dark-theme {
 	.column-header {
-		color: main.$gray;
+		color: main.$gray-1;
 
 		&.happy {
 			background-color: main.$dark-green;

diff --git a/ui/src/Common/ColumnItem/ColumnItem.scss b/ui/src/Common/ColumnItem/ColumnItem.scss
@@ -68,7 +68,7 @@
 
 @include main.dark-theme {
 	.column-item {
-		color: main.$gray;
+		color: main.$gray-1;
 
 		background-color: main.$light-asphalt;
 		box-shadow: 0 1px 2px rgba(main.$black, 0.35);

diff --git a/ui/src/Common/ColumnItem/DeleteColumnItem/DeleteColumnItem.scss b/ui/src/Common/ColumnItem/DeleteColumnItem/DeleteColumnItem.scss
@@ -56,7 +56,7 @@
 
 @include main.dark-theme {
 	.delete-column-item {
-		color: main.$gray;
+		color: main.$gray-1;
 
 		background-color: main.$light-asphalt;
 		box-shadow: 0 0 0 4px main.$red;

diff --git a/ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.scss b/ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.scss
@@ -51,7 +51,7 @@
 
 @include main.dark-theme {
 	.edit-column-item {
-		color: main.$gray;
+		color: main.$gray-1;
 
 		background-color: main.$light-asphalt;
 		box-shadow: 0 0 0 4px main.$dark-purple;

diff --git a/ui/src/Common/ColumnItemButtons/ColumnItemButtonGroup/ColumnItemButtonGroup.scss b/ui/src/Common/ColumnItemButtons/ColumnItemButtonGroup/ColumnItemButtonGroup.scss
@@ -100,15 +100,15 @@ $opacity: 0.25;
 		border-top-color: $dark-border;
 
 		.column-item-button {
-			color: main.$gray;
+			color: main.$gray-1;
 
 			background-color: inherit;
 			border-color: $dark-border;
 
 			&.button-secondary {
 				&:hover,
 				&:focus {
-					color: main.$dark-gray;
+					color: main.$gray-3;
 				}
 			}
 

diff --git a/ui/src/Common/CountSeparator/CountSeparator.scss b/ui/src/Common/CountSeparator/CountSeparator.scss
@@ -61,10 +61,10 @@
 
 @include main.dark-theme {
 	.count-separator {
-		color: main.$gray;
+		color: main.$gray-1;
 
 		.separator {
-			background: rgba($black, 0.22) none;
+			background: rgba(main.$black, 0.22) none;
 		}
 	}
 }
diff --git a/ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.scss b/ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.scss
@@ -77,11 +77,11 @@
 @include main.dark-theme {
 	.create-column-item-input {
 		.input-field {
-			color: main.$gray;
+			color: main.$gray-1;
 			background-color: main.$asphalt;
 
 			&::placeholder {
-				color: rgba(main.$gray, 0.4);
+				color: rgba(main.$gray-1, 0.4);
 			}
 
 			&.happy {

diff --git a/ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.scss b/ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.scss
@@ -48,6 +48,6 @@
 
 @include main.dark-theme {
 	.floating-character-countdown {
-		color: main.$gray;
+		color: main.$gray-1;
 	}
 }