Replace all plain occurrences of $gray-dark with CSS variables (#30191)

* Replace all plain occurences of $gray-dark with the respective CSS variable * Disable stylelint selector-max-id rule on main.scss * Replace all instances of $gray-dark in rgba with CSS variables (#30192) * Replace all instances of $gray-dark in rgba with CSS variables * Disable stylelint rules where appropriate * Update stylelint disable rule in main.scss * Update list-item.scss * Update list-item.scss * Update style.scss * replace --color-neutral-700 with --color-text * Update style.scss * remove stylelint ignores * Update list-item.scss
Automattic · Jan 24, 2019 · ecf929d · ecf929d
1 parent acbb7a9
commit ecf929d
Show file tree

Hide file tree

Showing 20 changed files with 47 additions and 56 deletions.
diff --git a/assets/stylesheets/_main.scss b/assets/stylesheets/_main.scss
@@ -23,7 +23,7 @@
 	right: 0;
 	padding: 6px;
 	color: $white;
-	background: rgba( $gray-dark, 0.8 );
+	background: rgba( var( --color-neutral-700-rgb ), 0.8 );
 	text-align: center;
 	z-index: z-index( 'root', '.wpcom-site__global-noscript' );
 }
@@ -75,7 +75,7 @@ body {
 
 ::selection {
 	background: rgba( $blue-light, 0.7 );
-	color: $gray-dark;
+	color: var( --color-text );
 }
 
 body,

diff --git a/assets/stylesheets/directly.scss b/assets/stylesheets/directly.scss
@@ -1,4 +1,3 @@
-
 // Directly's Real Time Messaging (RTM) widget is an on-demand customer support tool.
 // Read more about the RTM widget and how it's used in Calypso in the `lib/directly` README.
 //
@@ -44,7 +43,7 @@
 }
 
 body {
-	color: $gray-dark;
+	color: var( --color-text );
 	-webkit-font-smoothing: subpixel-antialiased;
 }
 
@@ -184,7 +183,7 @@ textarea {
 .chat-list-view-item-container {
 	background: $gray-lighten-30;
 	border-bottom: 1px solid lighten( $gray, 25% );
-	color: $gray-dark;
+	color: var( --color-text );
 	padding: 18px 10px 18px 24px;
 	.chat-list-item-title {
 		margin-bottom: 2px;

diff --git a/assets/stylesheets/emergent-paywall.scss b/assets/stylesheets/emergent-paywall.scss
@@ -39,7 +39,7 @@
 }
 
 body {
-	color: $gray-dark;
+	color: var( --color-text );
 	-webkit-font-smoothing: subpixel-antialiased;
 }
 
@@ -263,7 +263,7 @@ textarea {
 				.form-control {
 					margin: 0;
 					padding: 7px 14px;
-					color: $gray-dark;
+					color: var( --color-text );
 					font-size: 16px;
 					line-height: 1.5;
 					border: 1px solid $gray-lighten-20;
@@ -345,7 +345,7 @@ textarea {
 			border-color: $gray-lighten-20;
 			border-style: solid;
 			border-width: 1px 1px 2px;
-			color: $gray-dark;
+			color: var( --color-text );
 			cursor: pointer;
 			display: inline-block;
 			margin: 0;

diff --git a/assets/stylesheets/shared/_colors.scss b/assets/stylesheets/shared/_colors.scss
@@ -1,4 +1,3 @@
-
 // The Muriel Color Palette
 @import '../../../node_modules/color-studio/dist/color-variables';
 
@@ -15,7 +14,7 @@ $blue-dark: $muriel-blue-700;
 // Grays
 $gray: $muriel-gray-300;
 $gray-light: $muriel-gray-0;
-$gray-dark: $muriel-gray-700; 
+$gray-dark: $muriel-gray-700;
 
 // $gray-text: ideal for standard, non placeholder text
 // $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
@@ -55,5 +54,5 @@ $podcasting-purple: #9b4dd5;
 // Layout
 $masterbar-color: $blue-wordpress;
 $sidebar-bg-color: $gray-lighten-30;
-$sidebar-text-color: $gray-dark;
+$sidebar-text-color: var( --color-neutral-700 );
 $sidebar-selected-color: $gray-text-min;
diff --git a/assets/stylesheets/shared/mixins/_dropdown-menu.scss b/assets/stylesheets/shared/mixins/_dropdown-menu.scss
@@ -1,4 +1,3 @@
-
 // ==========================================================================
 // Dropdown menu mixin
 // Turn a list into a dropdown menu
@@ -53,7 +52,7 @@
 		}
 
 		a.selected {
-			color: $gray-dark;
+			color: var( --color-text );
 		}
 
 		&:last-child a {

diff --git a/client/blocks/edit-gravatar/style.scss b/client/blocks/edit-gravatar/style.scss
@@ -10,7 +10,7 @@
 		position: absolute;
 		top: 0;
 		left: 0;
-		background-color: rgba( $gray-dark, 0.5 );
+		background-color: rgba( var( --color-neutral-700-rgb ), 0.5 );
 		border-radius: 50%;
 		height: 150px;
 		width: 150px;
@@ -65,7 +65,7 @@
 	width: 150px;
 	height: 150px;
 	border-radius: 50%;
-	background: rgba( $gray-dark, 0.5 );
+	background: rgba( var( --color-neutral-700-rgb ), 0.5 );
 	color: #fff;
 	text-align: center;
 
@@ -82,7 +82,7 @@
 }
 
 .edit-gravatar .spinner__border {
-	fill: rgba( $gray-dark, 0.5 );
+	fill: rgba( var( --color-neutral-700-rgb ), 0.5 );
 }
 
 .edit-gravatar__explanation {

diff --git a/client/devdocs/design/typography.jsx b/client/devdocs/design/typography.jsx
@@ -62,7 +62,7 @@ export default class Typography extends React.PureComponent {
 							{ '\n\t' }
 							font-weight: 400;
 							{ '\n\t' }
-							color: $gray-dark;
+							color: var( --color-neutral-700 );
 							{ '\n' }
 							&#125;
 						</code>

diff --git a/client/devdocs/style.scss b/client/devdocs/style.scss
@@ -93,7 +93,7 @@ $devdocs-max-width: 720px;
 	padding: 3px 6px;
 	margin: 0 6px 4px 0;
 	font-family: $code;
-	box-shadow: 0 1px 2px rgba( $gray-dark, 0.05 );
+	box-shadow: 0 1px 2px rgba( var( --color-neutral-700-rgb ), 0.05 );
 }
 
 // The wrapper containing the actual examples

diff --git a/client/extensions/woocommerce/app/products/product-form.scss b/client/extensions/woocommerce/app/products/product-form.scss
@@ -459,7 +459,7 @@
 		top: 0;
 		background: radial-gradient(
 			ellipse at center,
-			rgba( $gray-dark, 0.125 ) 0%,
+			rgba( var( --color-neutral-700-rgb ), 0.125 ) 0%,
 			rgba( $white, 0 ) 75%,
 			rgba( $white, 0 ) 90%
 		);

diff --git a/client/extensions/woocommerce/components/table/style.scss b/client/extensions/woocommerce/components/table/style.scss
@@ -114,7 +114,7 @@
 				top: 0;
 				background: radial-gradient(
 					ellipse at center,
-					rgba( $gray-dark, 0.125 ) 0%,
+					rgba( var( --color-neutral-700-rgb ), 0.125 ) 0%,
 					rgba( $white, 0 ) 75%,
 					rgba( $white, 0 ) 90%
 				);

diff --git a/client/layout/sidebar/style.scss b/client/layout/sidebar/style.scss
@@ -110,7 +110,7 @@
 			}
 		}
 
-		-webkit-tap-highlight-color: rgba( $gray-dark, 0.2 );
+		-webkit-tap-highlight-color: rgba( var( --color-neutral-700-rgb ), 0.2 );
 
 		.sidebar__menu-link-secondary-text {
 			padding: 3px 8px 4px;

diff --git a/client/my-sites/checkout/checkout-thank-you/style.scss b/client/my-sites/checkout/checkout-thank-you/style.scss
@@ -281,15 +281,15 @@
 		&.is-premium-plan,
 		&.is-business-plan {
 			.thank-you-card {
-				color: $gray-dark;
+				color: var( --color-text );
 				background-color: $white;
 				box-shadow: 0 0 0 1px transparentize( $gray-lighten-20, 0.5 ), 0 1px 2px $gray-lighten-30;
 			}
 		}
 	}
 
 	.thank-you-card__header {
-		color: $gray-dark;
+		color: var( --color-text );
 		background-color: $white;
 		box-shadow: 0 0 0 1px transparentize( $gray-lighten-20, 0.5 );
 	}

diff --git a/client/my-sites/domains/domain-management/gsuite/gsuite-purchase-cta/style.scss b/client/my-sites/domains/domain-management/gsuite/gsuite-purchase-cta/style.scss
@@ -47,7 +47,7 @@
 }
 
 .gsuite-purchase-cta__add-google-apps-card-title {
-	color: $gray-dark;
+	color: var( --color-text );
 	font-size: 24px;
 	line-height: 120%;
 	margin: 0 0 10px;

diff --git a/client/my-sites/media-library/list-item.scss b/client/my-sites/media-library/list-item.scss
@@ -15,7 +15,7 @@
 		height: 28px;
 		padding: 0;
 		transition: color 90ms ease;
-		box-shadow: 0 0 8px rgba( $gray-dark, 0.4 );
+		box-shadow: 0 0 8px rgba( var( --color-neutral-700-rgb ), 0.4 );
 		background: var( --color-accent );
 		border-radius: 50%;
 		font-size: 14px;
@@ -33,15 +33,20 @@
 	position: absolute;
 		bottom: 22px;
 		right: 12px;
-	z-index: z-index( '.media-library__list-item', '.media-library__list-item-selected-icon .gridicon' );
+	z-index: z-index(
+		'.media-library__list-item',
+		'.media-library__list-item-selected-icon .gridicon'
+	);
 	fill: $white;
 }
 
 .media-library.is-single .media-library__list-item.is-selected::after {
 	content: '';
 }
 
-.media-library.is-single .media-library__list-item.is-selected .media-library__list-item-selected-icon {
+.media-library.is-single
+	.media-library__list-item.is-selected
+	.media-library__list-item-selected-icon {
 	display: block;
 }
 
@@ -54,13 +59,11 @@
 }
 
 .media-library__list-item:hover .media-library__list-item-figure {
-	box-shadow: 0 0 0 1px $gray,
-				0 2px 4px var( --color-neutral-100 );
+	box-shadow: 0 0 0 1px $gray, 0 2px 4px var( --color-neutral-100 );
 }
 
 .media-library__list-item.is-selected .media-library__list-item-figure {
-	box-shadow: 0 0 0 2px var( --color-accent ),
-				0 4px 6px var( --color-neutral-100 );
+	box-shadow: 0 0 0 2px var( --color-accent ), 0 4px 6px var( --color-neutral-100 );
 }
 
 .media-library__list-item.is-placeholder .media-library__list-item-figure {
@@ -77,7 +80,10 @@
 		left: 0;
 	background-color: rgba( $white, 0.75 );
 	border-radius: 0;
-	z-index: z-index( '.media-library__list-item', '.media-library__list-item.is-transient .media-library__list-item-figure::after' );
+	z-index: z-index(
+		'.media-library__list-item',
+		'.media-library__list-item.is-transient .media-library__list-item-figure::after'
+	);
 }
 
 .media-library__list-item-spinner {

diff --git a/client/my-sites/plan-features/style.scss b/client/my-sites/plan-features/style.scss
@@ -142,7 +142,6 @@ $plan-features-sidebar-width: 272px;
 }
 
 .plan-features__table-item.has-partial-border {
-
 	&::after {
 		content: '';
 		display: block;
@@ -220,7 +219,6 @@ $plan-features-sidebar-width: 272px;
 	}
 
 	.plans-features-main__group.is-jetpack & {
-
 		&.is-personal-plan {
 			border-bottom: solid 2px var( --color-warning );
 		}
@@ -244,7 +242,6 @@ $plan-features-sidebar-width: 272px;
 }
 
 .is-section-plans .plan-features__header-figure {
-
 	@include breakpoint( '<1280px' ) {
 		width: 24px;
 		height: 24px;
@@ -255,7 +252,6 @@ $plan-features-sidebar-width: 272px;
 .plan-features__header-figure,
 .plan-features__table.has-1-cols .plan-features__header-figure,
 .plan-features__table.has-2-cols .plan-features__header-figure {
-
 	@include breakpoint( '<1040px' ) {
 		display: none;
 	}
@@ -334,7 +330,6 @@ $plan-features-sidebar-width: 272px;
 	line-height: normal;
 
 	&.is-placeholder {
-
 		@include placeholder( 23% );
 		width: 140px;
 		height: 12px;
@@ -376,30 +371,30 @@ $plan-features-sidebar-width: 272px;
 			border-left-color: $gray-lighten-10;
 
 			&:hover {
-				border-left-color: $gray-dark;
+				border-left-color: var( --color-neutral-700 );
 			}
 		}
 	}
 
 	.segmented-control__link {
 		border-radius: 6px;
 		border: 2px solid $gray-lighten-10;
-		color: $gray-dark;
+		color: var( --color-neutral-700 );
 		font-size: 15px;
 		font-weight: 500;
 		padding: 15px;
 
 		&:hover {
 			background-color: transparent;
-			border: 2px solid $gray-dark;
+			border: 2px solid var( --color-neutral-700 );
 		}
 	}
 
 	@include breakpoint( '<660px' ) {
 		flex-wrap: wrap;
 	}
 
-    @include breakpoint( '<480px' ) {
+	@include breakpoint( '<480px' ) {
 		flex-wrap: wrap;
 		margin-bottom: 9px;
 
@@ -423,9 +418,7 @@ $plan-features-sidebar-width: 272px;
 }
 
 .plan-features__price {
-
 	&.is-placeholder {
-
 		@include placeholder( 23% );
 			width: 45px;
 			height: 25px;
@@ -434,14 +427,12 @@ $plan-features-sidebar-width: 272px;
 	}
 }
 .plan-features__price-jetpack {
-
 	&.is-placeholder {
-
 		@include placeholder( 23% );
+			width: 140px;
 			height: 32px;
 			margin-top: 5px;
 			margin-bottom: 5px;
-			width: 140px;
 
 		@include breakpoint( '<960px' ) {
 			height: 26px;

diff --git a/client/my-sites/sharing/style.scss b/client/my-sites/sharing/style.scss
@@ -1,5 +1,3 @@
-/** @format */
-
 .foldable-card.sharing-service {
 	.sharing-service__logo {
 		float: left;
@@ -647,7 +645,7 @@
 	cursor: pointer;
 	border: 1px solid var( --color-neutral-100 );
 	border-radius: 4px;
-	box-shadow: 0 0 8px rgba( $gray-dark, 0.04 );
+	box-shadow: 0 0 8px rgba( var( --color-neutral-700-rgb ), 0.04 );
 	background-color: $white;
 	color: var( --color-primary );
 
@@ -923,7 +921,7 @@
 	background: $white;
 	border: 1px solid var( --color-neutral-100 );
 	border-radius: 4px;
-	box-shadow: 0 0 8px rgba( $gray-dark, 0.04 );
+	box-shadow: 0 0 8px rgba( var( --color-neutral-700-rgb ), 0.04 );
 
 	&::before {
 		content: '';

diff --git a/client/my-sites/themes/themes-banner/style.scss b/client/my-sites/themes/themes-banner/style.scss
@@ -102,7 +102,7 @@
 .themes-banner__upwork {
 	h1,
 	p {
-		color: $gray-dark;
+		color: var( --color-neutral-700 );
 		text-shadow: none;
 	}