updates color variables to use $color-type-element or `$color-eleme…

…nt` format.
WebDevStudios · Oct 26, 2018 · 81c83cf · 81c83cf
1 parent e176548
commit 81c83cf
Show file tree

Hide file tree

Showing 17 changed files with 75 additions and 75 deletions.
diff --git a/assets/sass/base/_scaffolding.scss b/assets/sass/base/_scaffolding.scss
@@ -18,7 +18,7 @@
 
 	// The section <header>
 	&-header {
-		border-bottom: 1px solid $color-scaffolding-border;
+		border-bottom: 1px solid $color-border-scaffolding;
 		display: flex;
 		justify-content: space-between;
 		margin-bottom: $gutter;
@@ -48,16 +48,16 @@
 
 		// The <pre> container.
 		pre {
-			background-color: $color-pre-background;
-			border: 1px solid $color-pre-border;
-			color: $color-pre-text;
+			background-color: $color-background-pre;
+			border: 1px solid $color-border-pre;
+			color: $color-text-pre;
 			margin: 0 0 $gutter;
 			padding: $gutter;
 		} // pre
 
 		// The <code> container.
 		code {
-			background-color: $color-code-background;
+			background-color: $color-background-code;
 			font-size: rem(13);
 			padding: rem(5);
 		} // code
@@ -87,7 +87,7 @@
 
 	// Each swatch.
 	.swatch {
-		border: 1px solid $color-scaffolding-swatch-border;
+		border: 1px solid $color-border-scaffolding-swatch;
 		border-radius: rem(5);
 		flex: 0 1 23.875%;
 		height: rem(125);
@@ -103,7 +103,7 @@
 		// The swatch <header>
 		& header {
 			align-content: center;
-			color: $color-scaffolding-color;
+			color: $color-scaffolding;
 			display: flex;
 			flex-direction: column;
 			height: calc(100% - 39px);
@@ -114,8 +114,8 @@
 		& footer {
 			@include position(absolute, null null 0 null);
 
-			background-color: $color-scaffolding-background;
-			border-top: 1px solid $color-scaffolding-color;
+			background-color: $color-background-scaffolding;
+			border-top: 1px solid $color-scaffolding;
 			border-bottom-left-radius: rem(4);
 			border-bottom-right-radius: rem(4);
 			font-size: rem(12);

diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
@@ -89,8 +89,8 @@ address {
 } // address
 
 pre {
-	background-color: $color-pre-background;
-	color: $color-pre-text;
+	background-color: $color-background-pre;
+	color: $color-text-pre;
 	font-family: $font-pre;
 	font-size: rem(13);
 	line-height: $line-height-pre;

diff --git a/assets/sass/modules/_buttons.scss b/assets/sass/modules/_buttons.scss
@@ -8,11 +8,11 @@ input[type='button'],
 input[type='reset'],
 input[type='submit'] {
 	appearance: none;
-	background-color: $color-button-background;
+	background-color: $color-background-button;
 	border: none;
 	border-radius: 0;
 	border-width: 0;
-	color: $color-button-text;
+	color: $color-text-button;
 	line-height: 1.5;
 	margin: 0;
 	padding: $padding-input;
@@ -26,6 +26,6 @@ input[type='submit'] {
 	&:hover,
 	&:active,
 	&:focus {
-		background-color: $color-button-background-hover;
+		background-color: $color-background-button-hover;
 	} // &:active, &:focus
 } // button, input[type="button"], input[type="reset"], input[type="submit"]
diff --git a/assets/sass/modules/_comments.scss b/assets/sass/modules/_comments.scss
@@ -6,7 +6,7 @@
 // Comment area scaffolding
 //-----------------------------------------
 .comments-area {
-	border-top: 1px solid $color-comment-border;
+	border-top: 1px solid $color-border-comment;
 	margin: rem(100) 0 rem(151);
 
 	@include media($desktop) {
@@ -64,7 +64,7 @@
 		// Focus + active state.
 		&:focus,
 		&:active {
-			border: 1px solid $color-comment-focus-border;
+			border: 1px solid $color-border-comment-focus;
 		} // &:focus, &:active
 
 		@include media($phone) {
@@ -80,7 +80,7 @@
 		// Focus + active state.
 		&:focus,
 		&:active {
-			border: 1px solid $color-comment-focus-border
+			border: 1px solid $color-border-comment-focus
 		} // &:focus, &:active
 	} // textara
 
@@ -105,7 +105,7 @@
 
 	// Even comments get nice gray background.
 	.even:not(.bypostauthor) > .comment-body {
-		background-color: $color-even-background;
+		background-color: $color-background-even;
 	} // .even > .comment-body
 
 	// Each comment body.
@@ -159,7 +159,7 @@
 
 	// By post author.
 	.bypostauthor {
-		background-color: $color-author-background;
+		background-color: $color-background-author;
 		display: block;
 	} // .bypostauthor
 

diff --git a/assets/sass/modules/_forms.scss b/assets/sass/modules/_forms.scss
@@ -58,14 +58,14 @@ input[type='datetime-local'],
 input[type='color'],
 textarea {
 	appearance: none;
-	border: 1px solid $color-input-border;
+	border: 1px solid $color-border-input;
 	border-radius: 0;
-	color: $color-input-text;
+	color: $color-text-input;
 	line-height: 1.5;
 	padding: $padding-input;
 
 	&:focus {
-		color: $color-input-focus-text;
+		color: $color-focus-text-input;
 	} // &:focus
 } // input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea
 

diff --git a/assets/sass/modules/_header.scss b/assets/sass/modules/_header.scss
@@ -90,7 +90,7 @@
 	// Span the button the full width.
 	.button-link,
 	.cta-button {
-		color: $color-cta-link-color;
+		color: $color-cta-link;
 		display: block;
 		text-align: center;
 		text-decoration: none;

diff --git a/assets/sass/modules/_icons.scss b/assets/sass/modules/_icons.scss
@@ -46,7 +46,7 @@
 	&::after {
 		@include size(rem(20) rem(3));
 
-		background: $color-icon-close-background;
+		background: $color-background-icon-close;
 		border-radius: $border-radius-thin;
 		content: '';
 		cursor: pointer;
@@ -78,7 +78,7 @@
 	&::after {
 		@include size(rem(10) rem(2));
 
-		background: $color-down-arrow-background;
+		background: $color-background-down-arrow;
 		border-radius: $border-radius-thin;
 		content: '';
 		cursor: pointer;

diff --git a/assets/sass/modules/_modal.scss b/assets/sass/modules/_modal.scss
@@ -29,7 +29,7 @@
 	// The modal content container.
 	.modal-content {
 		background-clip: padding-box;
-		background-color: $color-modal-background;
+		background-color: $color-background-modal;
 		border-radius: $border-radius-medium;
 		box-shadow: 0 0 rem(10) rem(3) $color-box-shadow;
 		outline: 0;
@@ -46,10 +46,10 @@
 				@include position(absolute, rem(-15) rem(-15) null null);
 				@include size(rem(30) rem(30));
 
-				background: $color-modal-close-background;
-				border: 3px solid $color-modal-close-color;
+				background: $color-background-modal-close;
+				border: 3px solid $color-modal-close;
 				border-radius: 50%;
-				color: $color-modal-close-color;
+				color: $color-modal-close;
 				cursor: pointer;
 				font-size: rem(30);
 				line-height: 0;

diff --git a/assets/sass/modules/_tables.scss b/assets/sass/modules/_tables.scss
@@ -53,7 +53,7 @@ table {
 
 	// td
 	td {
-		border: 1px solid $color-table-border;
+		border: 1px solid $color-border-table;
 		border-bottom: 0;
 		display: block;
 		font-size: rem(13);
@@ -65,7 +65,7 @@ table {
 
 		// last-child
 		&:last-child {
-			border-bottom: 1px solid $color-table-border;
+			border-bottom: 1px solid $color-border-table;
 		} // &:last-child
 
 		// before
@@ -78,6 +78,6 @@ table {
 	} // td
 
 	@include media($phone) {
-		border: 1px solid $color-table-border;
+		border: 1px solid $color-border-table;
 	}
 } // table
diff --git a/assets/sass/modules/navigation/_global-navigation.scss b/assets/sass/modules/navigation/_global-navigation.scss
@@ -13,7 +13,7 @@
 		&.sub-menu {
 			@include padding(rem(10));
 
-			background: $color-submenu-background;
+			background: $color-background-submenu;
 
 			li {
 				@include margin(0);

diff --git a/assets/sass/modules/navigation/_mobile-navigation.scss b/assets/sass/modules/navigation/_mobile-navigation.scss
@@ -142,7 +142,7 @@
 	&::after {
 		@include size(rem(35) rem(5));
 
-		background: $color-hamburger-background;
+		background: $color-background-hamburger;
 		border-radius: $border-radius-thin;
 		content: '';
 		cursor: pointer;
@@ -183,7 +183,7 @@
 		@include size(rem(220) 100%);
 
 		-webkit-overflow-scrolling: touch;
-		background-color: $color-off-canvas-background;
+		background-color: $color-background-off-canvas;
 		overflow-y: auto;
 		transform: translateX(rem(-220));
 		transition: $transition-transform;
@@ -260,7 +260,7 @@
 	&-screen {
 		@include position(fixed, 0);
 
-		background: $color-off-canvas-screen-background;
+		background: $color-background-off-canvas-screen;
 		opacity: 0;
 		transition: $transition-opacity;
 		visibility: hidden;

diff --git a/assets/sass/modules/wp-blocks/default-blocks/_wp-block-button.scss b/assets/sass/modules/wp-blocks/default-blocks/_wp-block-button.scss
@@ -7,7 +7,7 @@
 
 	// The class on the <a>.
 	.wp-block-button__link {
-		background: $color-block-button-background;
+		background: $color-background-block-button;
 		border-radius: 0;
 
 		// The hover and focus states.

diff --git a/assets/sass/modules/wp-blocks/default-blocks/_wp-block-pullquote.scss b/assets/sass/modules/wp-blocks/default-blocks/_wp-block-pullquote.scss
@@ -4,6 +4,6 @@
 
 // Pullquote defaults.
 .wp-block-pullquote {
-	border-bottom: 2px solid $color-block-border;
-	border-top: 2px solid $color-block-border;
+	border-bottom: 2px solid $color-border-block;
+	border-top: 2px solid $color-border-block;
 } // .wp-block-pullquote
diff --git a/assets/sass/modules/wp-blocks/default-blocks/_wp-block-separator.scss b/assets/sass/modules/wp-blocks/default-blocks/_wp-block-separator.scss
@@ -4,6 +4,6 @@
 
 // Match the separator with our current default <hr>
 .wp-block-separator {
-	border-bottom: 1px solid $color-block-border;
+	border-bottom: 1px solid $color-border-block;
 	max-width: 100%;
 } // .wp-block-separator.
diff --git a/assets/sass/plugins/_gravity-forms.scss b/assets/sass/plugins/_gravity-forms.scss
@@ -32,9 +32,9 @@ $gf-label-font-weight: 700;
 
 // Inputs
 $gf-input-color-background: $color-white;
-$gf-input-color-border: $color-input-border;
-$gf-input-color-text: $color-input-text;
-$gf-input-color-focus-text: $color-input-focus-text;
+$gf-input-color-border: $color-border-input;
+$gf-input-color-text: $color-text-input;
+$gf-input-color-focus-text: $color-focus-text-input;
 $gf-input-padding: $padding-input;
 
 //--------------------------------------------------------------