From 6091dc6dde2568bea533a7ca22b3c3110ca3d68c Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Wed, 1 Jul 2020 15:41:06 +1200 Subject: [PATCH 01/36] Update base-styles. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 85a8f3d1d87..66bb1598a0c 100644 --- a/package.json +++ b/package.json @@ -162,7 +162,7 @@ "@wordpress/babel-plugin-import-jsx-pragma": "1.1.3", "@wordpress/babel-plugin-makepot": "2.1.3", "@wordpress/babel-preset-default": "3.0.2", - "@wordpress/base-styles": "1.8.0", + "@wordpress/base-styles": "1.11.0", "@wordpress/browserslist-config": "2.6.0", "@wordpress/custom-templated-path-webpack-plugin": "1.6.0", "@wordpress/eslint-plugin": "3.4.1", From fd69b17b3d531885ecc0e017f85b56e7f63708f5 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Thu, 2 Jul 2020 15:51:37 +1200 Subject: [PATCH 02/36] Remove -color which is no longer supported by base-styles. --- client/stylesheets/abstracts/_mixins.scss | 6 ++-- client/stylesheets/abstracts/_variables.scss | 14 ++++++---- packages/components/src/list/style.scss | 7 +++-- .../src/segmented-selection/style.scss | 4 +-- packages/components/src/summary/style.scss | 28 ++++++++++--------- .../components/src/text-control/style.scss | 19 +++++++++++-- 6 files changed, 48 insertions(+), 30 deletions(-) diff --git a/client/stylesheets/abstracts/_mixins.scss b/client/stylesheets/abstracts/_mixins.scss index 8a991d6f75b..f20123f8fa8 100644 --- a/client/stylesheets/abstracts/_mixins.scss +++ b/client/stylesheets/abstracts/_mixins.scss @@ -134,11 +134,13 @@ @media (prefers-reduced-motion: reduce) { transition-duration: 0s; } - } @else if $property == 'animation' { + } + @else if $property == 'animation' { @media (prefers-reduced-motion: reduce) { animation-duration: 1ms; } - } @else { + } + @else { @media (prefers-reduced-motion: reduce) { transition-duration: 0s; animation-duration: 1ms; diff --git a/client/stylesheets/abstracts/_variables.scss b/client/stylesheets/abstracts/_variables.scss index 077ad300569..e93e9d618d7 100644 --- a/client/stylesheets/abstracts/_variables.scss +++ b/client/stylesheets/abstracts/_variables.scss @@ -6,6 +6,8 @@ @import 'node_modules/@wordpress/base-styles/animations'; @import 'node_modules/@wordpress/base-styles/z-index'; +@include wordpress-admin-schemes; + $fallback-gutter: 24px; $fallback-gutter-large: 40px; $gutter: var(--main-gap); @@ -62,9 +64,9 @@ $wp-admin-background: #f1f1f1; $wp-admin-sidebar: #24292d; // Muriel -$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), - 0 1px 3px 0 rgba(0, 0, 0, 0.12); -$muriel-box-shadow-6dp: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12), - 0 6px 10px rgba(0, 0, 0, 0.14); -$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12); +$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2), + 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); +$muriel-box-shadow-6dp: 0 3px 5px rgba(0, 0, 0, 0.2), + 0 1px 18px rgba(0, 0, 0, 0.12), 0 6px 10px rgba(0, 0, 0, 0.14); +$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); diff --git a/packages/components/src/list/style.scss b/packages/components/src/list/style.scss index 47625df0b3d..4e18b857841 100644 --- a/packages/components/src/list/style.scss +++ b/packages/components/src/list/style.scss @@ -20,7 +20,8 @@ padding: $gap $gap-large; &:focus { - box-shadow: inset 0 0 0 1px $studio-wordpress-blue, inset 0 0 0 2px $studio-white; + box-shadow: inset 0 0 0 1px $studio-wordpress-blue, + inset 0 0 0 2px $studio-white; } } @@ -53,7 +54,7 @@ $background-color: $white; $background-color-hover: $light-gray-100; $border-color: $light-gray-tertiary; - $foreground-color: $theme-color; + $foreground-color: var(--wp-admin-theme-color); $foreground-color-hover: color($foreground-color shade(20%)); background-color: $background-color; @@ -88,7 +89,7 @@ &.is-complete { .woocommerce-task__icon { - background-color: $theme-color; + background-color: var(--wp-admin-theme-color); } .woocommerce-list__item-title { diff --git a/packages/components/src/segmented-selection/style.scss b/packages/components/src/segmented-selection/style.scss index e7f11630319..c9fd20e1b5d 100644 --- a/packages/components/src/segmented-selection/style.scss +++ b/packages/components/src/segmented-selection/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-segmented-selection { width: 100%; color: $core-grey-dark-500; @@ -62,7 +60,7 @@ content: ''; width: 8px; height: 8px; - background-color: $theme-color; + background-color: var(--wp-admin-theme-color); position: absolute; top: 50%; transform: translate(-20px, -50%); diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss index 432e1b62c89..e0f5d8f8989 100644 --- a/packages/components/src/summary/style.scss +++ b/packages/components/src/summary/style.scss @@ -1,5 +1,3 @@ - - // Set up some local color variables to make the CSS more clear $border: $light-gray-tertiary; @@ -7,11 +5,13 @@ $border: $light-gray-tertiary; @mixin make-cols( $i ) { grid-template-columns: repeat($i, 1fr); - .woocommerce-summary__item-container:nth-of-type(#{$i}n) .woocommerce-summary__item { + .woocommerce-summary__item-container:nth-of-type(#{$i}n) + .woocommerce-summary__item { border-right-color: $border; } - .woocommerce-summary__item-container:nth-of-type(#{$i}n+1):nth-last-of-type(-n+#{$i}) { + .woocommerce-summary__item-container:nth-of-type(#{$i}n ++ 1):nth-last-of-type(-n + #{$i}) { .woocommerce-summary__item, & ~ .woocommerce-summary__item-container .woocommerce-summary__item { border-bottom-color: $border; @@ -159,7 +159,8 @@ $border: $light-gray-tertiary; &.has-9-items, &.has-10-items { - .woocommerce-summary__item-container:nth-of-type(5n) .woocommerce-summary__item { + .woocommerce-summary__item-container:nth-of-type(5n) + .woocommerce-summary__item { border-right-color: $border; } } @@ -263,7 +264,7 @@ $border: $light-gray-tertiary; border-right: 1px solid $border; line-height: 1.4em; text-decoration: none; - color: $theme-color; + color: var(--wp-admin-theme-color); &.components-button { height: auto; @@ -271,10 +272,9 @@ $border: $light-gray-tertiary; align-items: normal; } - &:hover { background-color: $light-gray-100; - color: color($theme-color shade(20%)); + color: color(var(--wp-admin-theme-color-darker-20)); } &:active { @@ -283,14 +283,16 @@ $border: $light-gray-tertiary; &:focus { // !important to override button styles - box-shadow: inset -1px -1px 0 $core-grey-dark-300, inset 1px 1px 0 $core-grey-dark-300 !important; + box-shadow: inset -1px -1px 0 $core-grey-dark-300, + inset 1px 1px 0 $core-grey-dark-300 !important; } &.is-selected { - &:focus { // !important to override button styles - box-shadow: inset -1px 1px 0 $core-grey-dark-300, inset 1px 0 0 $core-grey-dark-300, inset 0 -4px 0 $theme-color !important; + box-shadow: inset -1px 1px 0 $core-grey-dark-300, + inset 1px 0 0 $core-grey-dark-300, + inset 0 -4px 0 var(--wp-admin-theme-color) !important; } } @@ -312,7 +314,7 @@ $border: $light-gray-tertiary; .woocommerce-summary__item-label { display: block; margin-bottom: $gap; - color: $theme-color; + color: var(--wp-admin-theme-color); } .woocommerce-summary__item-value { @@ -331,7 +333,7 @@ $border: $light-gray-tertiary; &.is-selected { background: $studio-white; - box-shadow: inset 0 -4px 0 $theme-color; + box-shadow: inset 0 -4px 0 var(--wp-admin-theme-color); .woocommerce-summary__item-value { font-weight: 600; diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss index d18a9ad0610..ea548b62990 100644 --- a/packages/components/src/text-control/style.scss +++ b/packages/components/src/text-control/style.scss @@ -1,5 +1,3 @@ - - .muriel-input-text { background: $studio-white; border: 1px solid $studio-gray-20; @@ -24,7 +22,22 @@ } } - .components-text-control__input { + // @wordpress/components styles for text control target all types, so we must also do that + // to increase specificity and override the styles. + .components-text-control__input, + .components-text-control__input[type='text'], + .components-text-control__input[type='tel'], + .components-text-control__input[type='time'], + .components-text-control__input[type='url'], + .components-text-control__input[type='week'], + .components-text-control__input[type='password'], + .components-text-control__input[type='color'], + .components-text-control__input[type='date'], + .components-text-control__input[type='datetime'], + .components-text-control__input[type='datetime-local'], + .components-text-control__input[type='email'], + .components-text-control__input[type='month'], + .components-text-control__input[type='number'] { border: 0; box-shadow: none; font-size: 16px; From db0910de32240e7d3318f54416e2429d6012d15a Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 3 Jul 2020 13:21:52 +1200 Subject: [PATCH 03/36] Replace -medium-focus with the base-styles CSS var. --- client/profile-wizard/style.scss | 4 ++-- client/stylesheets/abstracts/_breakpoints.scss | 9 ++++++--- packages/components/src/search/style.scss | 11 ++++++----- packages/components/src/stepper/style.scss | 10 ++++------ packages/components/src/text-control/style.scss | 2 +- 5 files changed, 19 insertions(+), 17 deletions(-) diff --git a/client/profile-wizard/style.scss b/client/profile-wizard/style.scss index 941fa1818b9..f8f9769cd62 100644 --- a/client/profile-wizard/style.scss +++ b/client/profile-wizard/style.scss @@ -310,7 +310,7 @@ box-shadow: $shadow-popover; &.is-active { - border-color: $blue-medium-focus; + border-color: var(--wp-admin-theme-color); } .components-base-control__label { @@ -491,7 +491,7 @@ display: inline-flex; i { - color: $blue-medium-focus; + color: var(--wp-admin-theme-color); margin-right: $gap; } } diff --git a/client/stylesheets/abstracts/_breakpoints.scss b/client/stylesheets/abstracts/_breakpoints.scss index 5c5a1984a7b..fbef3a18ddd 100644 --- a/client/stylesheets/abstracts/_breakpoints.scss +++ b/client/stylesheets/abstracts/_breakpoints.scss @@ -22,13 +22,15 @@ $breakpoints: 320px, 400px, 600px, 782px, 960px, 1280px, 1440px; @media (max-width: $breakpoint) { @content; } - } @else { + } + @else { @if $size == $and-larger { $approved-value: 2; @media (min-width: $breakpoint + 1) { @content; } - } @else { + } + @else { @each $breakpoint-end in $breakpoints { $range: $breakpoint + '-' + $breakpoint-end; @if $size == $range { @@ -48,7 +50,8 @@ $breakpoints: 320px, 400px, 600px, 782px, 960px, 1280px, 1440px; } @warn 'ERROR in breakpoint( #{ $size } ) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]'; } - } @else { + } + @else { $sizes: ''; @each $breakpoint in $breakpoints { $sizes: $sizes + ' ' + $breakpoint; diff --git a/packages/components/src/search/style.scss b/packages/components/src/search/style.scss index 5f8373458c3..1fd632e4fe2 100644 --- a/packages/components/src/search/style.scss +++ b/packages/components/src/search/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-search.woocommerce-select-control { position: relative; @@ -28,7 +26,7 @@ box-shadow: $shadow-popover; &.is-active { - border-color: $blue-medium-focus; + border-color: var(--wp-admin-theme-color); } } @@ -55,7 +53,9 @@ .is-active.components-base-control .components-base-control__label, .with-value.components-base-control .components-base-control__label, - &.has-inline-tags .has-tags.components-base-control .components-base-control__label { + &.has-inline-tags + .has-tags.components-base-control + .components-base-control__label { display: none; } @@ -107,7 +107,8 @@ &:active { color: $studio-woocommerce-purple; background: $studio-white; - box-shadow: inset 0 0 0 1px $core-grey-light-200, inset 0 0 0 2px $wp-admin-sidebar; + box-shadow: inset 0 0 0 1px $core-grey-light-200, + inset 0 0 0 2px $wp-admin-sidebar; } .woocommerce-search__result-thumbnail { diff --git a/packages/components/src/stepper/style.scss b/packages/components/src/stepper/style.scss index 159ab61af78..35273260735 100644 --- a/packages/components/src/stepper/style.scss +++ b/packages/components/src/stepper/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-stepper { $step-icon-size: 24px; @@ -60,7 +58,7 @@ min-width: 24px; width: 24px; border-radius: 50%; - background: $blue-medium-focus; + background: var(--wp-admin-theme-color); } .woocommerce-spinner__circle { @@ -70,7 +68,7 @@ &.is-active, &.is-complete { .woocommerce-stepper__step-icon { - background: $blue-medium-focus; + background: var(--wp-admin-theme-color); color: $studio-white; } @@ -149,8 +147,8 @@ content: ''; position: absolute; left: $step-icon-size / 2 + $gap-smaller; - top: $step-icon-size + ($gap-smaller * 2); - height: calc(100% - #{$step-icon-size} - #{ $gap-smaller * 2 }); + top: $step-icon-size + ( $gap-smaller * 2 ); + height: calc(100% - #{$step-icon-size} - #{$gap-smaller * 2}); border-left: 1px solid $studio-gray-5; } diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss index ea548b62990..e942478026e 100644 --- a/packages/components/src/text-control/style.scss +++ b/packages/components/src/text-control/style.scss @@ -52,7 +52,7 @@ } &.active { - box-shadow: 0 0 0 2px $blue-medium-focus; + box-shadow: 0 0 0 2px var(--wp-admin-theme-color); border-color: transparent; input { From c420a70303cd3d0703fa3cc9229f1f040cdcf569 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Tue, 7 Jul 2020 10:22:40 +1200 Subject: [PATCH 04/36] Update @wordpress/components to 9.9.0 --- package-lock.json | 255 +++++++++++++++++++++++++++++++++++++++++----- package.json | 2 +- 2 files changed, 233 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 67928ddf56d..cdb257f9868 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6250,9 +6250,9 @@ } }, "@wordpress/base-styles": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-1.8.0.tgz", - "integrity": "sha512-NXcR72DgB61dgcjEmRbbssRlvm5eTuCSOtMvvK7nzkN4J72sLfxXHEONeqzePt92D/60sX+AifmO8DmKN0zzPQ==", + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-1.11.0.tgz", + "integrity": "sha512-CV7NsA0SzLGKFmhhTIhi6pWeijeSaBl16hwp+x7OcyQKy/MMbVx2gXsHf3KjGNY18FT1Uf2MlhcdIeBM22RpWQ==", "dev": true }, "@wordpress/browserslist-config": { @@ -6262,45 +6262,96 @@ "dev": true }, "@wordpress/components": { - "version": "9.6.0", - "resolved": "https://registry.npmjs.org/@wordpress/components/-/components-9.6.0.tgz", - "integrity": "sha512-moGKwpkwpXvKPfYPQ+q9leDv9eQKaMeeTfy83FmFtLCMWRXANJuNUPYJVS1rtAXuAx+dkxx9a6AYdRpoF7iTNQ==", + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/@wordpress/components/-/components-9.9.0.tgz", + "integrity": "sha512-EtDQ7sf7GuEMo+oWW7CDob0YrVynxR+t0FXGDZw3IP8msKAvVmsCD0DoSEOfX/DTWNaaHstaw6xE4+Tgk1XUWQ==", "requires": { "@babel/runtime": "^7.9.2", "@emotion/core": "^10.0.22", "@emotion/css": "^10.0.22", "@emotion/native": "^10.0.22", "@emotion/styled": "^10.0.23", - "@wordpress/a11y": "^2.9.0", - "@wordpress/compose": "^3.15.0", - "@wordpress/deprecated": "^2.8.0", - "@wordpress/dom": "^2.9.0", - "@wordpress/element": "^2.14.0", - "@wordpress/hooks": "^2.8.0", - "@wordpress/i18n": "^3.12.0", - "@wordpress/icons": "^2.0.0", - "@wordpress/is-shallow-equal": "^2.0.0", - "@wordpress/keycodes": "^2.12.0", - "@wordpress/primitives": "^1.5.0", - "@wordpress/rich-text": "^3.16.0", - "@wordpress/warning": "^1.1.0", + "@wordpress/a11y": "^2.11.0", + "@wordpress/compose": "^3.18.0", + "@wordpress/deprecated": "^2.9.0", + "@wordpress/dom": "^2.12.0", + "@wordpress/element": "^2.15.0", + "@wordpress/hooks": "^2.9.0", + "@wordpress/i18n": "^3.14.0", + "@wordpress/icons": "^2.3.0", + "@wordpress/is-shallow-equal": "^2.1.0", + "@wordpress/keycodes": "^2.14.0", + "@wordpress/primitives": "^1.6.0", + "@wordpress/rich-text": "^3.19.0", + "@wordpress/warning": "^1.2.0", "classnames": "^2.2.5", - "clipboard": "^2.0.1", "dom-scroll-into-view": "^1.2.1", "downshift": "^4.0.5", "gradient-parser": "^0.1.5", "lodash": "^4.17.15", "memize": "^1.1.0", "moment": "^2.22.1", - "re-resizable": "^6.0.0", + "re-resizable": "^6.4.0", "react-dates": "^17.1.1", "react-spring": "^8.0.20", - "reakit": "^1.0.0-rc.2", + "react-use-gesture": "^7.0.15", + "reakit": "^1.1.0", "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "uuid": "^7.0.2" }, "dependencies": { + "@wordpress/a11y": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/@wordpress/a11y/-/a11y-2.11.0.tgz", + "integrity": "sha512-Phu3l9bFue3NnmB9SLmlSZtcaenfOiprCClC1Gk6Dxyf7dFincW65XcEZ5k8OZZQcT9mizMSQI4jTV64QiWanQ==", + "requires": { + "@babel/runtime": "^7.9.2", + "@wordpress/dom-ready": "^2.10.0", + "@wordpress/i18n": "^3.14.0" + } + }, + "@wordpress/compose": { + "version": "3.18.0", + "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.18.0.tgz", + "integrity": "sha512-EHVn7h1iYX9pMfcet6vF+/22nvaBf6beaPLh+QXMEma0H9d/ag5sqLazyVdBqLIJsGZWeR6s2cBnYmbdPApgFw==", + "requires": { + "@babel/runtime": "^7.9.2", + "@wordpress/element": "^2.15.0", + "@wordpress/is-shallow-equal": "^2.1.0", + "@wordpress/priority-queue": "^1.7.0", + "clipboard": "^2.0.1", + "lodash": "^4.17.15", + "mousetrap": "^1.6.5", + "react-resize-aware": "^3.0.1" + } + }, + "@wordpress/deprecated": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.9.0.tgz", + "integrity": "sha512-rknpxSuzS/cWzYuOlvAAMVjkSTNHq4ljrXAzX0Y81xzu2KgicwdDvbLQbC7diD8TOO4hWbz87FDI1gDN5/m4IQ==", + "requires": { + "@babel/runtime": "^7.9.2", + "@wordpress/hooks": "^2.9.0" + } + }, + "@wordpress/dom": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/@wordpress/dom/-/dom-2.12.0.tgz", + "integrity": "sha512-GYVawQlPcH5awLw1N/w8lQKVphguT7YR5yqDTmQ6O02bqtd+4/h5K2xXE8IINC4jBx6VyLV/dEYmrZvsiutNvg==", + "requires": { + "@babel/runtime": "^7.9.2", + "lodash": "^4.17.15" + } + }, + "@wordpress/dom-ready": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@wordpress/dom-ready/-/dom-ready-2.10.0.tgz", + "integrity": "sha512-ibeuUU0bz66ZtFxu4jyo9YLxTkmLZCSiSo/NApwtzbyE3+cGS05XrAAhM/M79OjysOFaKNyh6sp0YA7ZZU47eg==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, "@wordpress/element": { "version": "2.16.0", "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.16.0.tgz", @@ -6313,6 +6364,22 @@ "react-dom": "^16.9.0" } }, + "@wordpress/escape-html": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-1.9.0.tgz", + "integrity": "sha512-XW0GGqxpFauOgTjfQ9603hCDnUE+HhD0HVFMIEphIrTpTreLW3lJbfTibPTn0dWWPATqanH2TlPurOagUubh4g==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "@wordpress/hooks": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-2.9.0.tgz", + "integrity": "sha512-RL7bIIwy1BJWPOicwtDdC1cO+0HqHhnRtry8qeatv+/qN7O5YrJaslCMot7R4Y9cIgzX8C8Vj2BN2QsXLqUAGg==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, "@wordpress/i18n": { "version": "3.14.0", "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-3.14.0.tgz", @@ -6326,6 +6393,24 @@ "tannin": "^1.2.0" } }, + "@wordpress/icons": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-2.3.0.tgz", + "integrity": "sha512-8+6I5nE+J2GY8sN1WIAaA7FbhI2EoCmWgS+2pCSttYltcIGCGyL/fNBOKVY+ZtFMsOan08NMOQaxMywLjFeP7A==", + "requires": { + "@babel/runtime": "^7.9.2", + "@wordpress/element": "^2.15.0", + "@wordpress/primitives": "^1.6.0" + } + }, + "@wordpress/is-shallow-equal": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-2.1.0.tgz", + "integrity": "sha512-xCphAZG60mnLhn+LitwfoercNxsPMvc0Yo96kBY7HAZgrPt+jNQ5Rv4M+FTlVnyLrkyxVxNdtGyuyR+Hpgi8Pg==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, "@wordpress/keycodes": { "version": "2.14.0", "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-2.14.0.tgz", @@ -6335,6 +6420,29 @@ "@wordpress/i18n": "^3.14.0", "lodash": "^4.17.15" } + }, + "@wordpress/primitives": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-1.6.0.tgz", + "integrity": "sha512-QsvdzJX6/DikIRmWuU6g9O0Wse96/ZdIOealygO8FUj8HxB6kqFXBqk7L7pJKPYUuUyltu1oHblwT+IsxA1Agg==", + "requires": { + "@babel/runtime": "^7.9.2", + "@wordpress/element": "^2.15.0", + "classnames": "^2.2.5" + } + }, + "@wordpress/priority-queue": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-1.7.0.tgz", + "integrity": "sha512-fwHOW48lYRV2CpP43LwET+ZQrNDK325V9fFMMpc0tgJfdSfgT9gwztOEx5vbbfkwzJXIdxTW+ILhoH20CuiSug==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "@wordpress/warning": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@wordpress/warning/-/warning-1.2.0.tgz", + "integrity": "sha512-Q3WqbXHaoEuGddpFvVEmG9Xwpr5QMhi/NT+Q1td6J414fyNhafkmwGVd3roJB7/2y+ek2UDDegc32B8lkyW19A==" } } }, @@ -6812,6 +6920,7 @@ } }, "@wordpress/rich-text": { +<<<<<<< HEAD "version": "3.20.0", "resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-3.20.0.tgz", "integrity": "sha512-pPz7xvttFAfEkWpRnDh3WH7Ueh2lbatOGyFEgkvTX1SWH4cd9xWpJj4J/wrQ705VwQveTtoyb0HA0B0GU/5UYA==", @@ -6821,6 +6930,17 @@ "@wordpress/data": "^4.22.0", "@wordpress/deprecated": "^2.9.0", "@wordpress/element": "^2.16.0", +======= + "version": "3.19.0", + "resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-3.19.0.tgz", + "integrity": "sha512-QhzIketHwieMJXN2zk0TF07Xp13N+31JvR3gGZOXNasm6G+AXDrBaUMOOLftcOuPREX7weGKDeUqYMySmSAJUA==", + "requires": { + "@babel/runtime": "^7.9.2", + "@wordpress/compose": "^3.18.0", + "@wordpress/data": "^4.21.0", + "@wordpress/deprecated": "^2.9.0", + "@wordpress/element": "^2.15.0", +>>>>>>> Update @wordpress/components to 9.9.0 "@wordpress/escape-html": "^1.9.0", "@wordpress/is-shallow-equal": "^2.1.0", "@wordpress/keycodes": "^2.14.0", @@ -6830,7 +6950,23 @@ "rememo": "^3.0.0" }, "dependencies": { + "@wordpress/compose": { + "version": "3.18.0", + "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.18.0.tgz", + "integrity": "sha512-EHVn7h1iYX9pMfcet6vF+/22nvaBf6beaPLh+QXMEma0H9d/ag5sqLazyVdBqLIJsGZWeR6s2cBnYmbdPApgFw==", + "requires": { + "@babel/runtime": "^7.9.2", + "@wordpress/element": "^2.15.0", + "@wordpress/is-shallow-equal": "^2.1.0", + "@wordpress/priority-queue": "^1.7.0", + "clipboard": "^2.0.1", + "lodash": "^4.17.15", + "mousetrap": "^1.6.5", + "react-resize-aware": "^3.0.1" + } + }, "@wordpress/data": { +<<<<<<< HEAD "version": "4.22.0", "resolved": "https://registry.npmjs.org/@wordpress/data/-/data-4.22.0.tgz", "integrity": "sha512-dflzpbNnor/C2EUoidk8+qePTd6SyoiMFjcOijVD9el6248hlYOKxCNHBadcgJ+XO3BYTzImQgkPE87iCCIuNQ==", @@ -6839,6 +6975,16 @@ "@wordpress/compose": "^3.19.0", "@wordpress/deprecated": "^2.9.0", "@wordpress/element": "^2.16.0", +======= + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@wordpress/data/-/data-4.21.0.tgz", + "integrity": "sha512-+KU4+XKtVUqnPRBUlqD5yJXQNVoAPBZsp6KWNojd9Zhm4Sg/+8DGNo+fSpt5RQ+VJmUoRAqAk8UifQ6LZSuzQg==", + "requires": { + "@babel/runtime": "^7.9.2", + "@wordpress/compose": "^3.18.0", + "@wordpress/deprecated": "^2.9.0", + "@wordpress/element": "^2.15.0", +>>>>>>> Update @wordpress/components to 9.9.0 "@wordpress/is-shallow-equal": "^2.1.0", "@wordpress/priority-queue": "^1.7.0", "@wordpress/redux-routine": "^3.10.0", @@ -6851,10 +6997,25 @@ "use-memo-one": "^1.1.1" } }, + "@wordpress/deprecated": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.9.0.tgz", + "integrity": "sha512-rknpxSuzS/cWzYuOlvAAMVjkSTNHq4ljrXAzX0Y81xzu2KgicwdDvbLQbC7diD8TOO4hWbz87FDI1gDN5/m4IQ==", + "requires": { + "@babel/runtime": "^7.9.2", + "@wordpress/hooks": "^2.9.0" + } + }, "@wordpress/element": { +<<<<<<< HEAD "version": "2.16.0", "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.16.0.tgz", "integrity": "sha512-1ijo/GR/uBfL4teCQ3oFdUTqkeV2EZ32SCvXl30iPbqYmaNSzT1ZI1dlW8GO5o5UBja9BG11hnaOwm93pE2y2A==", +======= + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.15.0.tgz", + "integrity": "sha512-XXJxvjlQo0+1L+QFUXSWc8HCPR3I9aG0yxs+kJ8k8SHQxkUOZkqLQLYtwoNJpAlvgyKeFQNigpoddjoVbDDm7Q==", +>>>>>>> Update @wordpress/components to 9.9.0 "requires": { "@babel/runtime": "^7.9.2", "@wordpress/escape-html": "^1.9.0", @@ -6863,6 +7024,22 @@ "react-dom": "^16.9.0" } }, + "@wordpress/escape-html": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-1.9.0.tgz", + "integrity": "sha512-XW0GGqxpFauOgTjfQ9603hCDnUE+HhD0HVFMIEphIrTpTreLW3lJbfTibPTn0dWWPATqanH2TlPurOagUubh4g==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "@wordpress/hooks": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-2.9.0.tgz", + "integrity": "sha512-RL7bIIwy1BJWPOicwtDdC1cO+0HqHhnRtry8qeatv+/qN7O5YrJaslCMot7R4Y9cIgzX8C8Vj2BN2QsXLqUAGg==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, "@wordpress/i18n": { "version": "3.14.0", "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-3.14.0.tgz", @@ -6876,6 +7053,14 @@ "tannin": "^1.2.0" } }, + "@wordpress/is-shallow-equal": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-2.1.0.tgz", + "integrity": "sha512-xCphAZG60mnLhn+LitwfoercNxsPMvc0Yo96kBY7HAZgrPt+jNQ5Rv4M+FTlVnyLrkyxVxNdtGyuyR+Hpgi8Pg==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, "@wordpress/keycodes": { "version": "2.14.0", "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-2.14.0.tgz", @@ -6885,6 +7070,25 @@ "@wordpress/i18n": "^3.14.0", "lodash": "^4.17.15" } + }, + "@wordpress/priority-queue": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-1.7.0.tgz", + "integrity": "sha512-fwHOW48lYRV2CpP43LwET+ZQrNDK325V9fFMMpc0tgJfdSfgT9gwztOEx5vbbfkwzJXIdxTW+ILhoH20CuiSug==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "@wordpress/redux-routine": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/@wordpress/redux-routine/-/redux-routine-3.10.0.tgz", + "integrity": "sha512-i4YQq9veu3i0Q89b5mpVW6GL0Hn+2/rZp/iTfjdUsalfIvSQFg1BpTU1ixbeXymWH7RryjN/qLm28bUCITJKYg==", + "requires": { + "@babel/runtime": "^7.9.2", + "is-promise": "^4.0.0", + "lodash": "^4.17.15", + "rungen": "^0.3.2" + } } } }, @@ -23876,7 +24080,7 @@ "dev": true }, "prettier": { - "version": "1.19.1", + "version": "npm:prettier@1.19.1", "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-1.19.1.tgz", "integrity": "sha512-mqAC2r1NDmRjG+z3KCJ/i61tycKlmADIjxnDhQab+KBxSAGbF/W7/zwB2guy/ypIeKrrftNsIYkNZZQKf3vJcg==", "dev": true @@ -25250,6 +25454,11 @@ "prop-types": "^15.6.2" } }, + "react-use-gesture": { + "version": "7.0.15", + "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-7.0.15.tgz", + "integrity": "sha512-vHQkaa7oUbSDTAcFk9huQXa7E8KPrZH91erPuOMoqZT513qvtbb/SzTQ33lHc71/kOoJkMbzOkc4uoA4sT7Ogg==" + }, "react-visibility-sensor": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz", diff --git a/package.json b/package.json index 66bb1598a0c..20514ee16a3 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "dependencies": { "@fresh-data/framework": "0.6.1", "@wordpress/api-fetch": "2.2.8", - "@wordpress/components": "9.6.0", + "@wordpress/components": "9.9.0", "@wordpress/data": "4.16.1", "@wordpress/data-controls": "1.10.1", "@wordpress/date": "3.9.0", From f463275a4a18dac9905cd7a7dc6054d9fe3a3cfa Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Tue, 7 Jul 2020 13:53:30 +1200 Subject: [PATCH 05/36] Replace postcss theme calls with css vars generated by base styles. --- client/header/activity-panel/style.scss | 11 +++++------ packages/components/src/calendar/style.scss | 21 +++++++++++---------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/client/header/activity-panel/style.scss b/client/header/activity-panel/style.scss index ca5772f8e3c..2160da52098 100644 --- a/client/header/activity-panel/style.scss +++ b/client/header/activity-panel/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-layout__activity-panel { display: flex; flex-direction: row; @@ -81,7 +79,7 @@ color: $core-grey-dark-500; &::before { - background-color: theme(outlines); + background-color: var(--wp-admin-theme-color); bottom: 0; content: ''; height: 0; @@ -144,7 +142,8 @@ &:focus, &.components-button:not(:disabled):not([aria-disabled='true']):focus { - box-shadow: inset -1px -1px 0 $core-grey-dark-300, inset 1px 1px 0 $core-grey-dark-300; + box-shadow: inset -1px -1px 0 $core-grey-dark-300, + inset 1px 1px 0 $core-grey-dark-300; } } } @@ -193,7 +192,7 @@ transition-property: transform box-shadow; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); - @media screen and (prefers-reduced-motion: reduce) { + @media screen and ( prefers-reduced-motion: reduce ) { transition-duration: 1ms; } } @@ -228,7 +227,7 @@ animation: tabSwitch; animation-duration: 300ms; - @media screen and (prefers-reduced-motion: reduce) { + @media screen and ( prefers-reduced-motion: reduce ) { animation: none; } } diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index 2799b163df9..31140cd53fd 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-calendar { width: 100%; background-color: $core-grey-light-100; @@ -24,33 +22,33 @@ } .CalendarDay__selected_span { - background: theme(primary); + background: var(--wp-admin-theme-color); border: 1px solid $core-grey-light-700; &:hover { - background: theme(secondary); + background: var(--wp-admin-theme-color-darker-10); border: 1px solid $core-grey-light-500; } } .CalendarDay__selected { - background: color(theme(primary) shade(20%)); + background: var(--wp-admin-theme-color-darker-20); border: 1px solid $core-grey-light-700; &:hover { - background: theme(secondary); + background: var(--wp-admin-theme-color-darker-10); border: 1px solid $core-grey-light-500; } } .CalendarDay__hovered_span { - background: color(theme(primary) shade(15%)); + background: var(--wp-admin-theme-color-darker-10); border: 1px solid $core-grey-light-500; color: $studio-white; &:hover { color: $studio-white; - background: theme(primary); + background: var(--wp-admin-theme-color); } } @@ -150,7 +148,8 @@ box-shadow: inset 0 0 8px $error-red; &:focus { - box-shadow: inset 0 0 8px $error-red, 0 0 6px rgba(30, 140, 190, 0.8); + box-shadow: inset 0 0 8px $error-red, + 0 0 6px rgba(30, 140, 190, 0.8); } } } @@ -169,7 +168,9 @@ } .woocommerce-filters-date__content { - &.is-mobile .woocommerce-calendar__input-error .components-popover__content { + &.is-mobile + .woocommerce-calendar__input-error + .components-popover__content { height: initial; } } From b4cb6b2a6ecc110ed97ddb83ca8034c99d68c12b Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Tue, 7 Jul 2020 14:05:02 +1200 Subject: [PATCH 06/36] Map the deprecated gray color vars across to the new ones in base-styles --- client/homescreen/stats-overview/style.scss | 14 ++++--- .../overview/welcome-card/style.scss | 2 +- client/stylesheets/abstracts/_mixins.scss | 42 +++++++++---------- client/stylesheets/abstracts/_variables.scss | 14 +++---- client/task-list/style.scss | 14 +++---- packages/components/src/list/style.scss | 4 +- packages/components/src/summary/style.scss | 6 +-- 7 files changed, 49 insertions(+), 47 deletions(-) diff --git a/client/homescreen/stats-overview/style.scss b/client/homescreen/stats-overview/style.scss index b45c586bdc0..4760de1a3ee 100644 --- a/client/homescreen/stats-overview/style.scss +++ b/client/homescreen/stats-overview/style.scss @@ -39,15 +39,19 @@ $promo-actions-border-bottom: $light-gray-tertiary; display: inline-block; } - .woocommerce-summary__item-container:nth-last-of-type(1) .woocommerce-summary__item { + .woocommerce-summary__item-container:nth-last-of-type(1) + .woocommerce-summary__item { border-bottom: none; } - &.is-even .woocommerce-summary__item-container:nth-last-of-type(2) .woocommerce-summary__item { + &.is-even + .woocommerce-summary__item-container:nth-last-of-type(2) + .woocommerce-summary__item { border-bottom: none; } - .woocommerce-summary__item-container:nth-of-type(even) .woocommerce-summary__item { + .woocommerce-summary__item-container:nth-of-type(even) + .woocommerce-summary__item { border-right: none; } @@ -55,11 +59,11 @@ $promo-actions-border-bottom: $light-gray-tertiary; background-color: $studio-white; &:hover { - background-color: $light-gray-100; + background-color: $gray-100; } &:active { - background-color: $light-gray-200; + background-color: $gray-100; } } } diff --git a/client/marketing/overview/welcome-card/style.scss b/client/marketing/overview/welcome-card/style.scss index 29821ac6302..043f944c451 100644 --- a/client/marketing/overview/welcome-card/style.scss +++ b/client/marketing/overview/welcome-card/style.scss @@ -24,7 +24,7 @@ margin: 0; border: none; background: none; - color: $dark-gray-500; + color: $gray-700; overflow: hidden; border-radius: $radius-round-rectangle; position: absolute; diff --git a/client/stylesheets/abstracts/_mixins.scss b/client/stylesheets/abstracts/_mixins.scss index f20123f8fa8..6aed7e5903a 100644 --- a/client/stylesheets/abstracts/_mixins.scss +++ b/client/stylesheets/abstracts/_mixins.scss @@ -1,10 +1,8 @@ - - // Rem output with px fallback -@mixin font-size($sizeValue: 16, $lineHeight: false ) { +@mixin font-size( $sizeValue: 16, $lineHeight: false ) { font-size: $sizeValue + px; - font-size: ($sizeValue / 16) + rem; - @if ($lineHeight) { + font-size: ( $sizeValue / 16 ) + rem; + @if ( $lineHeight ) { line-height: $lineHeight; } } @@ -31,7 +29,7 @@ content: '\00a0'; } - @media screen and (prefers-reduced-motion: reduce) { + @media screen and ( prefers-reduced-motion: reduce ) { animation: none; } } @@ -40,7 +38,7 @@ @mixin animate-transform( $duration: 0.2s ) { transition: transform ease $duration; - @media screen and (prefers-reduced-motion: reduce) { + @media screen and ( prefers-reduced-motion: reduce ) { transition: none; } } @@ -106,22 +104,22 @@ @mixin button-style__hover { background-color: $studio-white; - color: $dark-gray-900; - box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $studio-white, - 0 1px 1px rgba($dark-gray-900, 0.2); + color: $gray-900; + box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px $studio-white, + 0 1px 1px rgba($gray-900, 0.2); } @mixin button-style__active() { outline: none; background-color: $studio-white; - color: $dark-gray-900; - box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $studio-white; + color: $gray-900; + box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px $studio-white; } @mixin button-style__focus-active() { background-color: $studio-white; - color: $dark-gray-900; - box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $studio-white; + color: $gray-900; + box-shadow: inset 0 0 0 1px $gray-700, inset 0 0 0 2px $studio-white; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; @@ -129,19 +127,19 @@ } /* stylelint-disable block-closing-brace-newline-after */ -@mixin reduce-motion($property: '') { +@mixin reduce-motion( $property: '' ) { @if $property == 'transition' { - @media (prefers-reduced-motion: reduce) { + @media ( prefers-reduced-motion: reduce ) { transition-duration: 0s; } } @else if $property == 'animation' { - @media (prefers-reduced-motion: reduce) { + @media ( prefers-reduced-motion: reduce ) { animation-duration: 1ms; } } @else { - @media (prefers-reduced-motion: reduce) { + @media ( prefers-reduced-motion: reduce ) { transition-duration: 0s; animation-duration: 1ms; } @@ -157,7 +155,7 @@ // Gutenberg Switch. @mixin switch-style__focus-active() { - box-shadow: 0 0 0 2px $studio-white, 0 0 0 3px $dark-gray-300; + box-shadow: 0 0 0 2px $studio-white, 0 0 0 3px $gray-700; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; @@ -170,8 +168,8 @@ &:nth-child(#{$i}) { grid-column-start: #{($i - 1) % $wrap-after + 1}; grid-column-end: #{($i - 1) % $wrap-after + 2}; - grid-row-start: #{floor(($i - 1) / $wrap-after) + 1}; - grid-row-end: #{floor(($i - 1) / $wrap-after) + 2}; + grid-row-start: #{floor(( $i - 1 ) / $wrap-after) + 1}; + grid-row-end: #{floor(( $i - 1 ) / $wrap-after) + 2}; } } } @@ -200,7 +198,7 @@ } // Create a string-repeat function -@function str-repeat($character, $n) { +@function str-repeat( $character, $n ) { @if $n == 0 { @return ''; } diff --git a/client/stylesheets/abstracts/_variables.scss b/client/stylesheets/abstracts/_variables.scss index e93e9d618d7..6a1e19f58cb 100644 --- a/client/stylesheets/abstracts/_variables.scss +++ b/client/stylesheets/abstracts/_variables.scss @@ -33,24 +33,24 @@ $spacing: 16px; // Gutenberg variable overrides. $white: $studio-white; $black: $studio-black; -$light-gray-100: $core-grey-light-100; -$light-gray-200: $core-grey-light-200; +$gray-100: $core-grey-light-100; +$gray-100: $core-grey-light-200; $light-gray-300: $core-grey-light-300; $light-gray-400: $core-grey-light-400; -$light-gray-500: $core-grey-light-500; +$gray-400: $core-grey-light-500; $light-gray-600: $core-grey-light-600; -$light-gray-700: $core-grey-light-700; +$gray-400: $core-grey-light-700; $light-gray-800: $core-grey-light-800; $light-gray-900: $core-grey-light-900; $dark-gray-100: $core-grey-dark-100; $dark-gray-200: $core-grey-dark-200; -$dark-gray-300: $core-grey-dark-300; // This & below have 4.5+ contrast against white +$gray-700: $core-grey-dark-300; // This & below have 4.5+ contrast against white $dark-gray-400: $core-grey-dark-400; -$dark-gray-500: $core-grey-dark-500; +$gray-700: $core-grey-dark-500; $dark-gray-600: $core-grey-dark-600; $dark-gray-700: $core-grey-dark-700; $dark-gray-800: $core-grey-dark-800; -$dark-gray-900: $core-grey-dark-900; +$gray-900: $core-grey-dark-900; $alert-red: $error-red; $alert-yellow: $notice-yellow; $alert-green: $valid-green; diff --git a/client/task-list/style.scss b/client/task-list/style.scss index f7c7603ae44..f5d986ade34 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -336,7 +336,7 @@ } } - @include breakpoint('<600px') { + @include breakpoint( '<600px' ) { .woocommerce-card__body { flex-direction: column; } @@ -403,8 +403,7 @@ } .woocommerce-task-dashboard__container { - .woocommerce-task-payments - .woocommerce-task-payments__actions { + .woocommerce-task-payments .woocommerce-task-payments__actions { text-align: center; } @@ -569,7 +568,7 @@ } &::-moz-progress-bar { - background-color: $dark-gray-500; + background-color: $gray-700; border-top-left-radius: 2px; border-top-right-radius: 2px; } @@ -582,18 +581,19 @@ } &::-webkit-progress-value { - background-color: $dark-gray-500; + background-color: $gray-700; border-top-left-radius: 2px; } } -.woocommerce-task-dashboard__container .woocommerce-task-card__progress-bar.completed { +.woocommerce-task-dashboard__container +.woocommerce-task-card__progress-bar.completed { &::-webkit-progress-value { border-top-right-radius: 2px; } } .woocommerce-task__caption { - color: $dark-gray-300; + color: $gray-700; margin-top: $gap; } diff --git a/packages/components/src/list/style.scss b/packages/components/src/list/style.scss index 4e18b857841..56f083023b1 100644 --- a/packages/components/src/list/style.scss +++ b/packages/components/src/list/style.scss @@ -52,7 +52,7 @@ $chevron-color: $dark-gray-primary; $background-color: $white; - $background-color-hover: $light-gray-100; + $background-color-hover: $gray-100; $border-color: $light-gray-tertiary; $foreground-color: var(--wp-admin-theme-color); $foreground-color-hover: color($foreground-color shade(20%)); @@ -93,7 +93,7 @@ } .woocommerce-list__item-title { - color: $dark-gray-500; + color: $gray-700; } .woocommerce-list__item-content { diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss index e0f5d8f8989..cd899ff87ff 100644 --- a/packages/components/src/summary/style.scss +++ b/packages/components/src/summary/style.scss @@ -273,12 +273,12 @@ $border: $light-gray-tertiary; } &:hover { - background-color: $light-gray-100; + background-color: $gray-100; color: color(var(--wp-admin-theme-color-darker-20)); } &:active { - background-color: $light-gray-200; + background-color: $gray-100; } &:focus { @@ -327,7 +327,7 @@ $border: $light-gray-tertiary; padding: 5px; border-radius: 3px; height: min-content; - background-color: $light-gray-500; + background-color: $gray-400; color: $dark-gray-primary; } From 312d9ad248d3d1337e2b0f942fa5ea2d52e0b9a1 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 10:55:34 +1200 Subject: [PATCH 07/36] Remove overrides of vars. --- client/stylesheets/abstracts/_variables.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/client/stylesheets/abstracts/_variables.scss b/client/stylesheets/abstracts/_variables.scss index 6a1e19f58cb..b3192608f76 100644 --- a/client/stylesheets/abstracts/_variables.scss +++ b/client/stylesheets/abstracts/_variables.scss @@ -33,24 +33,17 @@ $spacing: 16px; // Gutenberg variable overrides. $white: $studio-white; $black: $studio-black; -$gray-100: $core-grey-light-100; -$gray-100: $core-grey-light-200; $light-gray-300: $core-grey-light-300; $light-gray-400: $core-grey-light-400; -$gray-400: $core-grey-light-500; $light-gray-600: $core-grey-light-600; -$gray-400: $core-grey-light-700; $light-gray-800: $core-grey-light-800; $light-gray-900: $core-grey-light-900; $dark-gray-100: $core-grey-dark-100; $dark-gray-200: $core-grey-dark-200; -$gray-700: $core-grey-dark-300; // This & below have 4.5+ contrast against white $dark-gray-400: $core-grey-dark-400; -$gray-700: $core-grey-dark-500; $dark-gray-600: $core-grey-dark-600; $dark-gray-700: $core-grey-dark-700; $dark-gray-800: $core-grey-dark-800; -$gray-900: $core-grey-dark-900; $alert-red: $error-red; $alert-yellow: $notice-yellow; $alert-green: $valid-green; From 87eac66a9341aa9fade3e0000c93bbb66d1ee43e Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 11:01:55 +1200 Subject: [PATCH 08/36] Replace $core-grey-light-700 with $gray-400 --- client/analytics/report/style.scss | 7 +++---- client/dashboard/leaderboards/style.scss | 4 +--- client/dashboard/store-performance/style.scss | 4 +--- client/devdocs/style.scss | 4 +--- .../header/activity-panel/activity-header/style.scss | 4 +--- client/homescreen/stats-overview/style.scss | 2 +- client/stylesheets/abstracts/_colors.scss | 3 --- packages/components/src/advanced-filters/style.scss | 11 ++++------- packages/components/src/calendar/style.scss | 6 +++--- packages/components/src/chart/d3chart/legend.scss | 8 +++----- packages/components/src/chart/d3chart/style.scss | 6 +++--- packages/components/src/chart/style.scss | 12 +++++------- .../src/date-range-filter-picker/style.scss | 6 ++---- packages/components/src/filter-picker/style.scss | 6 ++---- packages/components/src/filters/style.scss | 4 +--- packages/components/src/order-status/style.scss | 4 +--- packages/components/src/search/style.scss | 4 ++-- .../components/src/segmented-selection/style.scss | 12 ++++++------ packages/components/src/table/style.scss | 10 ++++------ 19 files changed, 44 insertions(+), 73 deletions(-) diff --git a/client/analytics/report/style.scss b/client/analytics/report/style.scss index 16e864b3462..e57b66d3107 100644 --- a/client/analytics/report/style.scss +++ b/client/analytics/report/style.scss @@ -1,4 +1,3 @@ - .woocommerce-analytics__table-placeholder { .woocommerce-card__body { padding: 0; @@ -18,7 +17,7 @@ // exportable card based on the Gutenberg component that houses wc-admin styles. .woocommerce-analytics__card { border-radius: 0; - border: 1px solid $core-grey-light-700; + border: 1px solid $gray-400; box-shadow: none; margin-bottom: $gap-large; @@ -34,8 +33,8 @@ } > .woocommerce-card__header { - padding: ($gap - 3) $gap; - border-bottom: 1px solid $core-grey-light-700; + padding: ( $gap - 3 ) $gap; + border-bottom: 1px solid $gray-400; border-radius: 0; > .woocommerce-card__title-wrapper > .woocommerce-card__title { diff --git a/client/dashboard/leaderboards/style.scss b/client/dashboard/leaderboards/style.scss index 17efa0b749a..b61cff2579b 100644 --- a/client/dashboard/leaderboards/style.scss +++ b/client/dashboard/leaderboards/style.scss @@ -1,11 +1,9 @@ - - .woocommerce-dashboard__dashboard-leaderboards { .components-base-control__field { width: 100%; } .components-select-control__input { - border: 1px solid $core-grey-light-700; + border: 1px solid $gray-400; height: 34px; } .woocommerce-dashboard__dashboard-leaderboards__select { diff --git a/client/dashboard/store-performance/style.scss b/client/dashboard/store-performance/style.scss index 5e42c230f39..677519df0c6 100644 --- a/client/dashboard/store-performance/style.scss +++ b/client/dashboard/store-performance/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-dashboard__store-performance { margin-bottom: $gap-large; @@ -19,7 +17,7 @@ &:not(.is-placeholder) { .woocommerce-summary__item-container:first-child { .woocommerce-summary__item { - border-top: 1px solid $core-grey-light-700; + border-top: 1px solid $gray-400; } } } diff --git a/client/devdocs/style.scss b/client/devdocs/style.scss index 72ff05496e4..460c43af1d5 100644 --- a/client/devdocs/style.scss +++ b/client/devdocs/style.scss @@ -1,5 +1,3 @@ - - .woocommerce_devdocs { @include breakpoint( '>1280px' ) { &.is-list { @@ -65,7 +63,7 @@ th, td { - border-bottom: 1px solid $core-grey-light-700; + border-bottom: 1px solid $gray-400; text-align: left; } diff --git a/client/header/activity-panel/activity-header/style.scss b/client/header/activity-panel/activity-header/style.scss index 7d1d8a913f5..87435d87069 100644 --- a/client/header/activity-panel/activity-header/style.scss +++ b/client/header/activity-panel/activity-header/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-layout__activity-panel-header { height: 50px; background: $core-grey-light-500; @@ -24,7 +22,7 @@ .woocommerce-ellipsis-menu__toggle.components-button:not(:disabled):not([aria-disabled='true']):hover { box-shadow: none; border-radius: 10px; - background: $core-grey-light-700; + background: $gray-400; } } diff --git a/client/homescreen/stats-overview/style.scss b/client/homescreen/stats-overview/style.scss index 4760de1a3ee..b7909a577cf 100644 --- a/client/homescreen/stats-overview/style.scss +++ b/client/homescreen/stats-overview/style.scss @@ -1,5 +1,5 @@ // Set up some local color variables to make the CSS more clear -$outer-border: $core-grey-light-700; +$outer-border: $gray-400; $promo-actions-border-top: $core-grey-light-500; $promo-actions-border-bottom: $light-gray-tertiary; diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index c5e8ebde2fd..ac94f63a9d1 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -1,5 +1,3 @@ - - @import 'node_modules/@automattic/color-studio/dist/color-variables.scss'; $transparent: rgba(255, 255, 255, 0); @@ -11,7 +9,6 @@ $core-grey-light-300: #edeff0; $core-grey-light-400: #e8eaeb; $core-grey-light-500: #e2e4e7; $core-grey-light-600: #d7dade; -$core-grey-light-700: #ccd0d4; $core-grey-light-800: #b5bcc2; $core-grey-light-900: #a2aab2; $core-grey-dark-100: #86909b; diff --git a/packages/components/src/advanced-filters/style.scss b/packages/components/src/advanced-filters/style.scss index 8176b26f6fa..96d6df936b6 100644 --- a/packages/components/src/advanced-filters/style.scss +++ b/packages/components/src/advanced-filters/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-filters-advanced { margin: $gap-large 0; @@ -23,10 +21,9 @@ @include breakpoint( '<782px' ) { margin: $gap 0; - border: 1px solid $core-grey-light-700; + border: 1px solid $gray-400; } - - @include breakpoint( '<400px' ) { + gray-400 @include breakpoint( '<400px' ) { margin: $gap-small 0; } } @@ -47,7 +44,7 @@ display: grid; grid-template-columns: 1fr 40px; background-color: $core-grey-light-100; - border-bottom: 1px solid $core-grey-light-700; + border-bottom: 1px solid $gray-400; &:hover { background-color: $core-grey-light-200; @@ -92,7 +89,7 @@ color: $studio-woocommerce-purple; display: block; background-color: $core-grey-light-100; - border-bottom: 1px solid $core-grey-light-700; + border-bottom: 1px solid $gray-400; &:hover { background-color: $core-grey-light-200; diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index 31140cd53fd..8624933dd6a 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -1,7 +1,7 @@ .woocommerce-calendar { width: 100%; background-color: $core-grey-light-100; - border-top: 1px solid $core-grey-light-700; + border-top: 1px solid $gray-400; height: 396px; &.is-mobile { @@ -23,7 +23,7 @@ .CalendarDay__selected_span { background: var(--wp-admin-theme-color); - border: 1px solid $core-grey-light-700; + border: 1px solid $gray-400; &:hover { background: var(--wp-admin-theme-color-darker-10); @@ -33,7 +33,7 @@ .CalendarDay__selected { background: var(--wp-admin-theme-color-darker-20); - border: 1px solid $core-grey-light-700; + border: 1px solid $gray-400; &:hover { background: var(--wp-admin-theme-color-darker-10); diff --git a/packages/components/src/chart/d3chart/legend.scss b/packages/components/src/chart/d3chart/legend.scss index 5e22d41af8e..5bf7bd234ca 100644 --- a/packages/components/src/chart/d3chart/legend.scss +++ b/packages/components/src/chart/d3chart/legend.scss @@ -1,5 +1,3 @@ - - .woocommerce-legend { &.has-total { padding-bottom: 50px; @@ -7,7 +5,7 @@ } &.woocommerce-legend__direction-column { - border-right: 1px solid $core-grey-light-700; + border-right: 1px solid $gray-400; min-width: 320px; .woocommerce-chart__footer & { @@ -28,7 +26,7 @@ overflow: auto; .woocommerce-chart__footer & { - border-top: 1px solid $core-grey-light-700; + border-top: 1px solid $gray-400; height: 100%; max-height: none; min-height: none; @@ -190,7 +188,7 @@ .woocommerce-legend__total { align-items: center; background: $studio-white; - border-top: 1px solid $core-grey-light-700; + border-top: 1px solid $gray-400; bottom: 0; color: $core-grey-dark-500; display: flex; diff --git a/packages/components/src/chart/d3chart/style.scss b/packages/components/src/chart/d3chart/style.scss index 5f004771883..ab479e20343 100644 --- a/packages/components/src/chart/d3chart/style.scss +++ b/packages/components/src/chart/d3chart/style.scss @@ -1,4 +1,3 @@ - /** * Internal Dependencies */ @@ -41,7 +40,7 @@ } .d3-chart__tooltip { - border: 1px solid $core-grey-light-700; + border: 1px solid $gray-400; position: absolute; display: flex; min-width: 324px; @@ -49,7 +48,8 @@ background-color: $studio-white; text-align: left; padding: 17px; - box-shadow: 0 3px 20px 0 rgba(18, 24, 30, 0.1), 0 1px 3px 0 rgba(18, 24, 30, 0.1); + box-shadow: 0 3px 20px 0 rgba(18, 24, 30, 0.1), + 0 1px 3px 0 rgba(18, 24, 30, 0.1); flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; diff --git a/packages/components/src/chart/style.scss b/packages/components/src/chart/style.scss index 9411ae4a6fe..88a8de58cfe 100644 --- a/packages/components/src/chart/style.scss +++ b/packages/components/src/chart/style.scss @@ -1,12 +1,10 @@ - .woocommerce-chart { margin-top: -$gap; margin-bottom: $gap-large; background: $studio-white; - border: 1px solid $core-grey-light-700; + border: 1px solid $gray-400; border-top: 0; - - @include breakpoint( '<782px' ) { + gray-400 @include breakpoint( '<782px' ) { margin-left: -16px; margin-right: -16px; margin-bottom: $gap-small; @@ -17,7 +15,7 @@ .woocommerce-chart__header { min-height: 50px; - border-bottom: 1px solid $core-grey-light-700; + border-bottom: 1px solid $gray-400; display: flex; flex-flow: row wrap; justify-content: space-between; @@ -66,7 +64,7 @@ .woocommerce-chart__interval-select { align-items: start; - border-right: 1px solid $core-grey-light-700; + border-right: 1px solid $gray-400; display: flex; flex-direction: column; justify-content: center; @@ -104,7 +102,7 @@ background: transparent !important; &.components-button { - color: $core-grey-light-700; + color: $gray-400; display: inline-flex; padding: 8px; diff --git a/packages/components/src/date-range-filter-picker/style.scss b/packages/components/src/date-range-filter-picker/style.scss index 90d113bc257..53ff85864e9 100644 --- a/packages/components/src/date-range-filter-picker/style.scss +++ b/packages/components/src/date-range-filter-picker/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-filters-date__content { &.is-mobile { .components-popover__header { @@ -20,7 +18,7 @@ .woocommerce-filters-date__tabs { height: calc(100% - 42px); - border-top: 1px solid $core-grey-light-700; + border-top: 1px solid $gray-400; .components-tab-panel__tabs { display: flex; @@ -63,7 +61,7 @@ background-color: $studio-white; &.is-custom { - border-top: 1px solid $core-grey-light-700; + border-top: 1px solid $gray-400; } } diff --git a/packages/components/src/filter-picker/style.scss b/packages/components/src/filter-picker/style.scss index 418921f780e..1d2f96f0891 100644 --- a/packages/components/src/filter-picker/style.scss +++ b/packages/components/src/filter-picker/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-filters-filter__content { &.is-mobile { .components-popover__header-title { @@ -11,7 +9,7 @@ } .woocommerce-filters-filter__content-list-item:last-child { - border-bottom: 1px solid $core-grey-light-700; + border-bottom: 1px solid $gray-400; } } } @@ -24,7 +22,7 @@ .woocommerce-filters-filter__content-list-item { border: 1px solid transparent; - border-bottom: 1px solid $core-grey-light-700; + border-bottom: 1px solid $gray-400; margin: 0; &:last-child { diff --git a/packages/components/src/filters/style.scss b/packages/components/src/filters/style.scss index 9d6c539d19c..fbbb413d7b0 100644 --- a/packages/components/src/filters/style.scss +++ b/packages/components/src/filters/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-filters { .components-base-control__field { margin-bottom: 0; @@ -68,7 +66,7 @@ .woocommerce-filters-filter__content { .components-popover__content { width: 320px; - border: 1px solid $core-grey-light-700; + border: 1px solid $gray-400; background-color: $studio-white; } diff --git a/packages/components/src/order-status/style.scss b/packages/components/src/order-status/style.scss index 258db16e017..722acebf366 100644 --- a/packages/components/src/order-status/style.scss +++ b/packages/components/src/order-status/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-order-status { display: flex; align-items: center; @@ -10,7 +8,7 @@ width: 16px; height: 16px; display: block; - background: $core-grey-light-700; + background: $gray-400; margin-right: $gap-smallest * 2; border-radius: 50%; border: 3px solid $core-grey-light-500; diff --git a/packages/components/src/search/style.scss b/packages/components/src/search/style.scss index 1fd632e4fe2..b42e1c89356 100644 --- a/packages/components/src/search/style.scss +++ b/packages/components/src/search/style.scss @@ -17,7 +17,7 @@ .woocommerce-select-control__control { height: auto; - border: 1px solid $core-grey-light-700; + border: 1px solid $gray-400; font-size: 13px; width: 100%; padding: 3px 2px 3px 36px; @@ -68,7 +68,7 @@ } .woocommerce-select-control__listbox { - border: 1px solid $core-grey-light-700; + border: 1px solid $gray-400; top: 38px; } diff --git a/packages/components/src/segmented-selection/style.scss b/packages/components/src/segmented-selection/style.scss index c9fd20e1b5d..11dbcbc4cb4 100644 --- a/packages/components/src/segmented-selection/style.scss +++ b/packages/components/src/segmented-selection/style.scss @@ -7,19 +7,19 @@ width: 100%; grid-template-columns: 1fr 1fr; display: grid; - border-top: 1px solid $core-grey-light-700; - border-bottom: 1px solid $core-grey-light-700; - background-color: $core-grey-light-700; + border-top: 1px solid $gray-400; + border-bottom: 1px solid $gray-400; + background-color: $gray-400; } .woocommerce-segmented-selection__item { &:nth-child(2n) { - border-left: 1px solid $core-grey-light-700; - border-top: 1px solid $core-grey-light-700; + border-left: 1px solid $gray-400; + border-top: 1px solid $gray-400; } &:nth-child(2n + 1) { - border-top: 1px solid $core-grey-light-700; + border-top: 1px solid $gray-400; } &:nth-child(-n + 2) { diff --git a/packages/components/src/table/style.scss b/packages/components/src/table/style.scss index c9cd88fdfcb..277fcd43273 100644 --- a/packages/components/src/table/style.scss +++ b/packages/components/src/table/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-table { .woocommerce-card__body { padding: 0; @@ -24,8 +22,8 @@ color: $core-grey-dark-500; display: flex; // Default to 5 rows for browsers not supporting custom properties (IE11) - height: calc(#{$header-row-height} + (#{$row-height}) * 5); - height: calc(#{$header-row-height} + (#{$row-height}) * var(--number-of-rows)); + height: calc(#{$header-row-height} + ( #{$row-height} ) * 5); + height: calc(#{$header-row-height} + ( #{$row-height} ) * var(--number-of-rows)); justify-content: center; padding: $gap; text-align: center; @@ -195,12 +193,12 @@ th.woocommerce-table__item { .woocommerce-table__header { padding: $gap-smaller $gap-large; background-color: #f8f9fa; - border-bottom: 1px solid $core-grey-light-700; + border-bottom: 1px solid $gray-400; font-weight: bold; white-space: nowrap; & + .woocommerce-table__header { - border-left: 1px solid $core-grey-light-700; + border-left: 1px solid $gray-400; } &.is-left-aligned.is-sortable { From 21bf1827a28864eb82ae08787a44bfbbaef98c3c Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 12:30:22 +1200 Subject: [PATCH 09/36] Replace light-gray-secondary with gray-400 --- client/header/activity-panel/panels/inbox/style.scss | 6 ++---- client/stylesheets/abstracts/_colors.scss | 1 - 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/client/header/activity-panel/panels/inbox/style.scss b/client/header/activity-panel/panels/inbox/style.scss index e6a27ed522e..c9343db2294 100644 --- a/client/header/activity-panel/panels/inbox/style.scss +++ b/client/header/activity-panel/panels/inbox/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-inbox-message { position: relative; color: $gray-text; @@ -31,7 +29,7 @@ } &:not(.is-placeholder) { - border: 1px solid $light-gray-secondary; + border: 1px solid $gray-400; } &.message-is-unread { @@ -208,7 +206,7 @@ } // Tweak to fix dropdown and placeholder in IE 11 -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { +@media all and ( -ms-high-contrast: none ), ( -ms-high-contrast: active ) { .woocommerce-admin-dismiss-dropdown { margin-top: 0; } diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index ac94f63a9d1..cbe5a8ad3e0 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -51,7 +51,6 @@ $button-border: darken($button, 20%); $core-blue-dark-900: #0071a1; // Inbox Messages -$light-gray-secondary: #ccc; $light-gray-tertiary: #e7e8e9; $dark-gray-primary: #1e1e1e; $medium-gray-text: #757575; From 5505d3e6ca0817339c44d94996381797f1086b3c Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 12:37:02 +1200 Subject: [PATCH 10/36] Replace dark-gray-primary with gray-900 --- .../activity-panel/activity-card/style.scss | 21 +++++++++---------- .../activity-panel/activity-header/style.scss | 2 +- .../activity-panel/panels/inbox/style.scss | 2 +- client/homescreen/stats-overview/style.scss | 2 +- client/profile-wizard/style.scss | 2 +- client/stylesheets/abstracts/_colors.scss | 1 - client/stylesheets/abstracts/_variables.scss | 11 ---------- packages/components/src/list/style.scss | 2 +- packages/components/src/summary/style.scss | 4 ++-- 9 files changed, 17 insertions(+), 30 deletions(-) diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index b2145f48aa0..f6bcfdf1d1d 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-activity-card { position: relative; padding: $fallback-gutter; @@ -25,10 +23,10 @@ .woocommerce-activity-card__unread { position: absolute; - top: calc(#{ $fallback-gutter } - 6px); - top: calc(#{ $gutter } - 6px); - right: calc(#{ $fallback-gutter } - 6px); - right: calc(#{ $gutter } - 6px); + top: calc(#{$fallback-gutter} - 6px); + top: calc(#{$gutter} - 6px); + right: calc(#{$fallback-gutter} - 6px); + right: calc(#{$gutter} - 6px); width: 6px; height: 6px; border-radius: 50%; @@ -51,7 +49,7 @@ order: 2; .woocommerce-empty-activity-card & { - color: $dark-gray-primary; + color: $gray-900; @include font-size( 16 ); font-style: normal; line-height: 24px; @@ -224,7 +222,7 @@ padding: $fallback-gutter; padding: $gutter; - @media screen and (prefers-reduced-motion: no-preference) { + @media screen and ( prefers-reduced-motion: no-preference ) { transition: opacity 0.3s, height 0s, padding 0s; } @@ -240,7 +238,7 @@ height: 0; opacity: 0; padding: 0; - @media screen and (prefers-reduced-motion: no-preference) { + @media screen and ( prefers-reduced-motion: no-preference ) { transition: opacity 0.3s, height 0s 0.3s, padding 0s 0.3s; } } @@ -288,7 +286,8 @@ margin-top: $gap-smallest; } - .woocommerce-review-activity-card__image-overlay__product .woocommerce-gravatar { + .woocommerce-review-activity-card__image-overlay__product + .woocommerce-gravatar { margin-left: 0; width: 18px; height: 18px; @@ -319,7 +318,7 @@ } .woocommerce-stock-activity-card { - @media screen and (prefers-reduced-motion: no-preference) { + @media screen and ( prefers-reduced-motion: no-preference ) { transition: opacity 0.3s; } diff --git a/client/header/activity-panel/activity-header/style.scss b/client/header/activity-panel/activity-header/style.scss index 87435d87069..8a8a76889f4 100644 --- a/client/header/activity-panel/activity-header/style.scss +++ b/client/header/activity-panel/activity-header/style.scss @@ -27,7 +27,7 @@ } .woocommerce-layout__inbox-title { - color: $dark-gray-primary; + color: $gray-900; display: flex; align-items: center; } diff --git a/client/header/activity-panel/panels/inbox/style.scss b/client/header/activity-panel/panels/inbox/style.scss index c9343db2294..3b3e9456486 100644 --- a/client/header/activity-panel/panels/inbox/style.scss +++ b/client/header/activity-panel/panels/inbox/style.scss @@ -55,7 +55,7 @@ .woocommerce-inbox-message__content { .woocommerce-inbox-message__title { - color: $dark-gray-primary; + color: $gray-900; @include font-size( 16 ); font-style: normal; line-height: 1.5; diff --git a/client/homescreen/stats-overview/style.scss b/client/homescreen/stats-overview/style.scss index b7909a577cf..cd938423ac4 100644 --- a/client/homescreen/stats-overview/style.scss +++ b/client/homescreen/stats-overview/style.scss @@ -74,7 +74,7 @@ article.woocommerce-stats-overview__install-jetpack-promo { } h2 { - color: $dark-gray-primary; + color: $gray-900; @include font-size( 16 ); font-style: normal; line-height: 1.5; diff --git a/client/profile-wizard/style.scss b/client/profile-wizard/style.scss index f8f9769cd62..4bce1d86c3a 100644 --- a/client/profile-wizard/style.scss +++ b/client/profile-wizard/style.scss @@ -459,7 +459,7 @@ label { display: flex; - color: $dark-gray-primary; + color: $gray-900; align-items: center; } diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index cbe5a8ad3e0..2eea324d9c1 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -52,5 +52,4 @@ $core-blue-dark-900: #0071a1; // Inbox Messages $light-gray-tertiary: #e7e8e9; -$dark-gray-primary: #1e1e1e; $medium-gray-text: #757575; diff --git a/client/stylesheets/abstracts/_variables.scss b/client/stylesheets/abstracts/_variables.scss index b3192608f76..ddeafb566dd 100644 --- a/client/stylesheets/abstracts/_variables.scss +++ b/client/stylesheets/abstracts/_variables.scss @@ -33,17 +33,6 @@ $spacing: 16px; // Gutenberg variable overrides. $white: $studio-white; $black: $studio-black; -$light-gray-300: $core-grey-light-300; -$light-gray-400: $core-grey-light-400; -$light-gray-600: $core-grey-light-600; -$light-gray-800: $core-grey-light-800; -$light-gray-900: $core-grey-light-900; -$dark-gray-100: $core-grey-dark-100; -$dark-gray-200: $core-grey-dark-200; -$dark-gray-400: $core-grey-dark-400; -$dark-gray-600: $core-grey-dark-600; -$dark-gray-700: $core-grey-dark-700; -$dark-gray-800: $core-grey-dark-800; $alert-red: $error-red; $alert-yellow: $notice-yellow; $alert-green: $valid-green; diff --git a/packages/components/src/list/style.scss b/packages/components/src/list/style.scss index 56f083023b1..342f4a516e6 100644 --- a/packages/components/src/list/style.scss +++ b/packages/components/src/list/style.scss @@ -50,7 +50,7 @@ margin-left: auto; } - $chevron-color: $dark-gray-primary; + $chevron-color: $gray-900; $background-color: $white; $background-color-hover: $gray-100; $border-color: $light-gray-tertiary; diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss index cd899ff87ff..c9b6efc9097 100644 --- a/packages/components/src/summary/style.scss +++ b/packages/components/src/summary/style.scss @@ -320,7 +320,7 @@ $border: $light-gray-tertiary; .woocommerce-summary__item-value { margin-bottom: $gap-smallest; font-weight: 500; - color: $dark-gray-primary; + color: $gray-900; } .woocommerce-summary__item-delta { @@ -328,7 +328,7 @@ $border: $light-gray-tertiary; border-radius: 3px; height: min-content; background-color: $gray-400; - color: $dark-gray-primary; + color: $gray-900; } &.is-selected { From 306d9fc24d3e788f5e8644eba43d6e152139a795 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 12:41:01 +1200 Subject: [PATCH 11/36] Replace medium-gray-text with gray-700 --- .../header/activity-panel/activity-card/style.scss | 2 +- .../header/activity-panel/activity-header/style.scss | 4 ++-- client/header/activity-panel/panels/inbox/style.scss | 8 ++++---- client/homescreen/stats-overview/style.scss | 4 ++-- client/profile-wizard/style.scss | 4 ++-- client/stylesheets/abstracts/_colors.scss | 4 ---- client/task-list/style.scss | 12 ++++++------ packages/components/src/list/style.scss | 2 +- packages/components/src/summary/style.scss | 2 +- 9 files changed, 19 insertions(+), 23 deletions(-) diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index f6bcfdf1d1d..fec5b8d5765 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -105,7 +105,7 @@ margin-bottom: 0; } .woocommerce-empty-activity-card & { - color: $medium-gray-text; + color: $gray-700; font-style: normal; font-weight: normal; @include font-size( 14 ); diff --git a/client/header/activity-panel/activity-header/style.scss b/client/header/activity-panel/activity-header/style.scss index 8a8a76889f4..64c2b9354f3 100644 --- a/client/header/activity-panel/activity-header/style.scss +++ b/client/header/activity-panel/activity-header/style.scss @@ -33,12 +33,12 @@ } .woocommerce-layout__inbox-subtitle { - color: $medium-gray-text; + color: $gray-700; } .woocommerce-layout__inbox-badge { margin-left: $gap-small / 2; - background-color: $medium-gray-text; + background-color: $gray-700; border-radius: 13px; padding: 0 $gap-small / 2; color: $white; diff --git a/client/header/activity-panel/panels/inbox/style.scss b/client/header/activity-panel/panels/inbox/style.scss index 3b3e9456486..4f3a7752795 100644 --- a/client/header/activity-panel/panels/inbox/style.scss +++ b/client/header/activity-panel/panels/inbox/style.scss @@ -76,7 +76,7 @@ } .woocommerce-inbox-message__date { - color: $medium-gray-text; + color: $gray-700; @include font-size( 12 ); margin-bottom: $gap; font-style: normal; @@ -92,7 +92,7 @@ } .woocommerce-inbox-message__text { - color: $medium-gray-text; + color: $gray-700; font-style: normal; font-weight: normal; @include font-size( 14 ); @@ -115,7 +115,7 @@ .woocommerce-inbox-message__actions { padding-top: $gap; - border-top: 1px solid $light-gray-tertiary; + border-top: 1px solid $gray-100; // Ensures any immediate child with a sibling has space between the items & > * + * { @@ -156,7 +156,7 @@ .woocommerce-inbox-dismiss-confirmation_wrapper { p { font-size: 16px; - color: $medium-gray-text; + color: $gray-700; } .woocommerce-inbox-dismiss-confirmation_buttons { text-align: right; diff --git a/client/homescreen/stats-overview/style.scss b/client/homescreen/stats-overview/style.scss index cd938423ac4..eb63d8ddac7 100644 --- a/client/homescreen/stats-overview/style.scss +++ b/client/homescreen/stats-overview/style.scss @@ -1,7 +1,7 @@ // Set up some local color variables to make the CSS more clear $outer-border: $gray-400; $promo-actions-border-top: $core-grey-light-500; -$promo-actions-border-bottom: $light-gray-tertiary; +$promo-actions-border-bottom: $gray-100; .woocommerce-stats-overview { .woocommerce-card__body { @@ -82,7 +82,7 @@ article.woocommerce-stats-overview__install-jetpack-promo { margin: $gap-smaller 0; } p { - color: $medium-gray-text; + color: $gray-700; font-style: normal; font-weight: normal; @include font-size( 14 ); diff --git a/client/profile-wizard/style.scss b/client/profile-wizard/style.scss index 4bce1d86c3a..4e478b5f251 100644 --- a/client/profile-wizard/style.scss +++ b/client/profile-wizard/style.scss @@ -452,8 +452,8 @@ margin-left: -$gap; margin-right: -$gap; padding: $gap-large $gap; - border-top: 1px solid $light-gray-tertiary; - border-bottom: 1px solid $light-gray-tertiary; + border-top: 1px solid $gray-100; + border-bottom: 1px solid $gray-100; display: flex; align-items: center; diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 2eea324d9c1..56f0e087266 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -49,7 +49,3 @@ $button-border: darken($button, 20%); // Blues $core-blue-dark-900: #0071a1; - -// Inbox Messages -$light-gray-tertiary: #e7e8e9; -$medium-gray-text: #757575; diff --git a/client/task-list/style.scss b/client/task-list/style.scss index f5d986ade34..f902cfda6e9 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -8,7 +8,7 @@ .components-card__header.is-size-medium { padding-top: 0; } - .woocommerce-list__item:not(.is-complete) { + .woocommerce-list__item:not( .is-complete ) { .woocommerce-task__icon { border: 1px solid $core-grey-light-500; background: $white; @@ -17,7 +17,7 @@ .woocommerce-list__item.is-complete { .woocommerce-list__item-title { - color: $medium-gray-text; + color: $gray-700; } } @@ -41,7 +41,7 @@ } .woocommerce-task__estimated-time { - color: $core-grey-dark-300; + color: $gray-700; font-weight: 400; font-size: 12px; display: block; @@ -58,7 +58,7 @@ } .components-modal__screen-overlay { - background: rgba(43, 45, 47, 0.4); + background: rgba( 43, 45, 47, 0.4 ); } .components-modal__frame { @@ -265,7 +265,7 @@ .woocommerce-task-payment__recommended-ribbon { position: absolute; - transform: rotate(-45deg) translate(-50%, -50%); + transform: rotate( -45deg ) translate( -50%, -50% ); background: $studio-gray-80; color: $studio-white; font-size: 11px; @@ -587,7 +587,7 @@ } .woocommerce-task-dashboard__container -.woocommerce-task-card__progress-bar.completed { + .woocommerce-task-card__progress-bar.completed { &::-webkit-progress-value { border-top-right-radius: 2px; } diff --git a/packages/components/src/list/style.scss b/packages/components/src/list/style.scss index 342f4a516e6..7c633f21369 100644 --- a/packages/components/src/list/style.scss +++ b/packages/components/src/list/style.scss @@ -53,7 +53,7 @@ $chevron-color: $gray-900; $background-color: $white; $background-color-hover: $gray-100; - $border-color: $light-gray-tertiary; + $border-color: $gray-100; $foreground-color: var(--wp-admin-theme-color); $foreground-color-hover: color($foreground-color shade(20%)); diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss index c9b6efc9097..a236da34999 100644 --- a/packages/components/src/summary/style.scss +++ b/packages/components/src/summary/style.scss @@ -1,5 +1,5 @@ // Set up some local color variables to make the CSS more clear -$border: $light-gray-tertiary; +$border: $gray-100; // A local mixin to generate the grid template and border logic @mixin make-cols( $i ) { From 64b3bf6d028a9ceb2bbcaaa8cf9130150dfb9dc2 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 12:48:29 +1200 Subject: [PATCH 12/36] Replace core-grey-dark-900 with gray-900 --- client/marketing/components/recommended-extensions/style.scss | 4 +--- client/stylesheets/abstracts/_colors.scss | 1 - client/task-list/style.scss | 2 +- packages/components/src/search-list-control/style.scss | 2 +- 4 files changed, 3 insertions(+), 6 deletions(-) diff --git a/client/marketing/components/recommended-extensions/style.scss b/client/marketing/components/recommended-extensions/style.scss index 01eb5c6647e..355a6486c10 100644 --- a/client/marketing/components/recommended-extensions/style.scss +++ b/client/marketing/components/recommended-extensions/style.scss @@ -37,7 +37,6 @@ } } } - } .woocommerce-marketing-recommended-extensions-item { @@ -64,7 +63,7 @@ color: $theme-color; } p { - color: $core-grey-dark-900; + color: $gray-900; } } @@ -77,5 +76,4 @@ top: 12px; left: 12px; } - } diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 56f0e087266..4a4d4313592 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -20,7 +20,6 @@ $core-grey-dark-500: #555d66; $core-grey-dark-600: #40464d; $core-grey-dark-700: #32373c; $core-grey-dark-800: #23282d; -$core-grey-dark-900: #191e23; $core-form-grey: #7e8993; // WP 5.3 form input border $gray-text: $core-grey-dark-500; diff --git a/client/task-list/style.scss b/client/task-list/style.scss index f902cfda6e9..778f6422d52 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -495,7 +495,7 @@ &:hover { .woocommerce-task-card__prompt-pointer { - border-bottom-color: $core-grey-dark-900; /* Snackbar hover */ + border-bottom-color: $gray-900; /* Snackbar hover */ } } } diff --git a/packages/components/src/search-list-control/style.scss b/packages/components/src/search-list-control/style.scss index 9d1141a24fc..0f89ef7f93e 100644 --- a/packages/components/src/search-list-control/style.scss +++ b/packages/components/src/search-list-control/style.scss @@ -170,7 +170,7 @@ &.is-searching { .woocommerce-search-list__item-name { - color: $core-grey-dark-900; + color: $gray-900; } } From a9ff5edee81ac5def97740dc48e490f49982b461 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 12:52:27 +1200 Subject: [PATCH 13/36] Replace core-grey-light-100 with gray-100 --- client/dashboard/dashboard-charts/block.scss | 10 ++++------ client/dashboard/store-performance/style.scss | 2 +- .../activity-panel/activity-outbound-link/style.scss | 7 +++---- client/stylesheets/abstracts/_colors.scss | 1 - packages/components/src/advanced-filters/style.scss | 4 ++-- packages/components/src/calendar/style.scss | 4 ++-- packages/components/src/chart/d3chart/legend.scss | 2 +- packages/components/src/dropdown-button/style.scss | 8 ++++---- packages/components/src/filter-picker/style.scss | 4 ++-- packages/components/src/filters/style.scss | 2 +- packages/components/src/search-list-control/style.scss | 2 +- packages/components/src/search/style.scss | 2 +- packages/components/src/segmented-selection/style.scss | 2 +- packages/components/src/summary/style.scss | 2 +- packages/components/src/table/style.scss | 4 ++-- 15 files changed, 26 insertions(+), 30 deletions(-) diff --git a/client/dashboard/dashboard-charts/block.scss b/client/dashboard/dashboard-charts/block.scss index e6dfb51de75..cef54d1e74f 100644 --- a/client/dashboard/dashboard-charts/block.scss +++ b/client/dashboard/dashboard-charts/block.scss @@ -1,5 +1,3 @@ - - .woocommerce-dashboard__chart-block-wrapper { cursor: pointer; &:hover { @@ -38,7 +36,7 @@ .woocommerce-legend__item > button { cursor: default; &:hover { - background: $core-grey-light-100; + background: $gray-100; } .woocommerce-legend__item-container { cursor: default; @@ -49,16 +47,16 @@ } &:hover { - background: $core-grey-light-100; + background: $gray-100; .woocommerce-legend__item > button { - background: $core-grey-light-100; + background: $gray-100; } } } } &:hover { - background: $core-grey-light-100; + background: $gray-100; } .screen-reader-text:focus { diff --git a/client/dashboard/store-performance/style.scss b/client/dashboard/store-performance/style.scss index 677519df0c6..f84bd8505d8 100644 --- a/client/dashboard/store-performance/style.scss +++ b/client/dashboard/store-performance/style.scss @@ -6,7 +6,7 @@ } .woocommerce-summary { - background-color: $core-grey-light-100; + background-color: $gray-100; margin: 0; @include breakpoint( '<782px' ) { diff --git a/client/header/activity-panel/activity-outbound-link/style.scss b/client/header/activity-panel/activity-outbound-link/style.scss index 7068607eb3c..d0a7c6f7123 100644 --- a/client/header/activity-panel/activity-outbound-link/style.scss +++ b/client/header/activity-panel/activity-outbound-link/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-layout__activity-panel-outbound-link { display: flex; justify-content: space-between; @@ -24,12 +22,13 @@ } &:active { - background: $core-grey-light-100; + background: $gray-100; } &:focus { background: $core-grey-light-200; - box-shadow: inset 0 0 0 1px $box-shadow-blue, inset 0 0 0 2px $studio-white; + box-shadow: inset 0 0 0 1px $box-shadow-blue, + inset 0 0 0 2px $studio-white; } &:hover, diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 4a4d4313592..cef515158ad 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -3,7 +3,6 @@ $transparent: rgba(255, 255, 255, 0); // Greys -$core-grey-light-100: #f8f9f9; $core-grey-light-200: #f3f4f5; $core-grey-light-300: #edeff0; $core-grey-light-400: #e8eaeb; diff --git a/packages/components/src/advanced-filters/style.scss b/packages/components/src/advanced-filters/style.scss index 96d6df936b6..7f8c446cce8 100644 --- a/packages/components/src/advanced-filters/style.scss +++ b/packages/components/src/advanced-filters/style.scss @@ -43,7 +43,7 @@ margin: 0; display: grid; grid-template-columns: 1fr 40px; - background-color: $core-grey-light-100; + background-color: $gray-100; border-bottom: 1px solid $gray-400; &:hover { @@ -88,7 +88,7 @@ margin: 0; color: $studio-woocommerce-purple; display: block; - background-color: $core-grey-light-100; + background-color: $gray-100; border-bottom: 1px solid $gray-400; &:hover { diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index 8624933dd6a..9f8db8f2746 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -1,6 +1,6 @@ .woocommerce-calendar { width: 100%; - background-color: $core-grey-light-100; + background-color: $gray-100; border-top: 1px solid $gray-400; height: 396px; @@ -60,7 +60,7 @@ .CalendarMonthGrid, .CalendarMonth, .DayPicker { - background-color: $core-grey-light-100; + background-color: $gray-100; } .DayPicker_weekHeader_li { diff --git a/packages/components/src/chart/d3chart/legend.scss b/packages/components/src/chart/d3chart/legend.scss index 5bf7bd234ca..d199c5698f0 100644 --- a/packages/components/src/chart/d3chart/legend.scss +++ b/packages/components/src/chart/d3chart/legend.scss @@ -136,7 +136,7 @@ } &:hover { - background-color: $core-grey-light-100; + background-color: $gray-100; } } diff --git a/packages/components/src/dropdown-button/style.scss b/packages/components/src/dropdown-button/style.scss index 71627764070..4c08fdcd5af 100644 --- a/packages/components/src/dropdown-button/style.scss +++ b/packages/components/src/dropdown-button/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-page .woocommerce-dropdown-button { background-color: $studio-white; position: relative; @@ -12,7 +10,9 @@ &::after { content: ''; - background: transparent url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 0 top 55%; + background: transparent + url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) + no-repeat right 0 top 55%; position: absolute; right: 14px; width: 32px; @@ -29,7 +29,7 @@ &:hover, &:active, &.is-open { - background-color: $core-grey-light-100; + background-color: $gray-100; } &.is-multi-line .woocommerce-dropdown-button__labels { diff --git a/packages/components/src/filter-picker/style.scss b/packages/components/src/filter-picker/style.scss index 1d2f96f0891..fdefc309d07 100644 --- a/packages/components/src/filter-picker/style.scss +++ b/packages/components/src/filter-picker/style.scss @@ -56,7 +56,7 @@ display: flex; width: 100%; padding: 1em 1em 1em 3em; - background-color: $core-grey-light-100; + background-color: $gray-100; text-align: left; &.components-button { @@ -69,7 +69,7 @@ } &.components-button:not(:disabled):not([aria-disabled='true']):focus { - background-color: $core-grey-light-100; + background-color: $gray-100; } svg { diff --git a/packages/components/src/filters/style.scss b/packages/components/src/filters/style.scss index fbbb413d7b0..18cebda777d 100644 --- a/packages/components/src/filters/style.scss +++ b/packages/components/src/filters/style.scss @@ -89,7 +89,7 @@ .woocommerce-filters__compare-body { padding: $gap; - background-color: $core-grey-light-100; + background-color: $gray-100; border-bottom: 1px solid $core-grey-light-500; } diff --git a/packages/components/src/search-list-control/style.scss b/packages/components/src/search-list-control/style.scss index 0f89ef7f93e..855bf07dc16 100644 --- a/packages/components/src/search-list-control/style.scss +++ b/packages/components/src/search-list-control/style.scss @@ -93,7 +93,7 @@ color: $core-grey-dark-500; @include hover-state { - background: $core-grey-light-100; + background: $gray-100; } &:last-child { diff --git a/packages/components/src/search/style.scss b/packages/components/src/search/style.scss index b42e1c89356..d5ab82ea39e 100644 --- a/packages/components/src/search/style.scss +++ b/packages/components/src/search/style.scss @@ -87,7 +87,7 @@ padding: $gap-small; color: $studio-woocommerce-purple; text-align: left; - background: $core-grey-light-100; + background: $gray-100; border-bottom: 1px solid $core-grey-light-500; font-size: 13px; min-height: 43px; diff --git a/packages/components/src/segmented-selection/style.scss b/packages/components/src/segmented-selection/style.scss index 11dbcbc4cb4..f38946833a4 100644 --- a/packages/components/src/segmented-selection/style.scss +++ b/packages/components/src/segmented-selection/style.scss @@ -28,7 +28,7 @@ } .woocommerce-segmented-selection__label { - background-color: $core-grey-light-100; + background-color: $gray-100; padding: $gap-small $gap-small $gap-small $gap-larger; position: relative; display: block; diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss index a236da34999..15015e0ff9d 100644 --- a/packages/components/src/summary/style.scss +++ b/packages/components/src/summary/style.scss @@ -259,7 +259,7 @@ $border: $gray-100; flex-direction: column; height: 100%; padding: $gap-large; - background-color: $core-grey-light-100; + background-color: $gray-100; border-bottom: 1px solid $border; border-right: 1px solid $border; line-height: 1.4em; diff --git a/packages/components/src/table/style.scss b/packages/components/src/table/style.scss index 277fcd43273..75bf5392de1 100644 --- a/packages/components/src/table/style.scss +++ b/packages/components/src/table/style.scss @@ -18,7 +18,7 @@ $header-row-height: #{$gap-smaller * 2} + #{$row-text-height} + 1px; &.is-empty { align-items: center; - background: $core-grey-light-100; + background: $gray-100; color: $core-grey-dark-500; display: flex; // Default to 5 rows for browsers not supporting custom properties (IE11) @@ -161,7 +161,7 @@ } &.is-sorted { - background-color: $core-grey-light-100; + background-color: $gray-100; } &.is-checkbox-column { From 035bcf5786f53d1ec809e1c72670ded696c1668a Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 12:57:18 +1200 Subject: [PATCH 14/36] Replace core-grey-light-200 with gray-200 --- client/dashboard/store-performance/style.scss | 2 +- client/header/activity-panel/activity-card/style.scss | 2 +- .../header/activity-panel/activity-outbound-link/style.scss | 4 ++-- client/header/activity-panel/panels/inbox/style.scss | 2 +- client/header/activity-panel/style.scss | 6 +++--- client/stylesheets/abstracts/_colors.scss | 2 +- packages/components/src/advanced-filters/style.scss | 6 +++--- packages/components/src/chart/d3chart/legend.scss | 2 +- packages/components/src/filter-picker/style.scss | 2 +- packages/components/src/search/style.scss | 4 ++-- packages/components/src/segmented-selection/style.scss | 6 +++--- packages/components/src/table/style.scss | 2 +- 12 files changed, 20 insertions(+), 20 deletions(-) diff --git a/client/dashboard/store-performance/style.scss b/client/dashboard/store-performance/style.scss index f84bd8505d8..6ae5e3e0c09 100644 --- a/client/dashboard/store-performance/style.scss +++ b/client/dashboard/store-performance/style.scss @@ -28,7 +28,7 @@ background-color: $studio-white; &:hover { - background-color: $core-grey-light-200; + background-color: $gray-200; } &:active { diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index fec5b8d5765..9d1aab9d9b6 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -371,7 +371,7 @@ } .woocommerce-empty-activity-card { - background: $core-grey-light-200; + background: $gray-200; margin: 20px; border-bottom: unset; } diff --git a/client/header/activity-panel/activity-outbound-link/style.scss b/client/header/activity-panel/activity-outbound-link/style.scss index d0a7c6f7123..d51562de5f5 100644 --- a/client/header/activity-panel/activity-outbound-link/style.scss +++ b/client/header/activity-panel/activity-outbound-link/style.scss @@ -3,7 +3,7 @@ justify-content: space-between; align-items: center; height: 50px; - background: $core-grey-light-200; + background: $gray-200; border-bottom: 1px solid $core-grey-light-400; padding: $gap $fallback-gutter; padding: $gap $gutter; @@ -26,7 +26,7 @@ } &:focus { - background: $core-grey-light-200; + background: $gray-200; box-shadow: inset 0 0 0 1px $box-shadow-blue, inset 0 0 0 2px $studio-white; } diff --git a/client/header/activity-panel/panels/inbox/style.scss b/client/header/activity-panel/panels/inbox/style.scss index 4f3a7752795..711b0c639c5 100644 --- a/client/header/activity-panel/panels/inbox/style.scss +++ b/client/header/activity-panel/panels/inbox/style.scss @@ -1,7 +1,7 @@ .woocommerce-inbox-message { position: relative; color: $gray-text; - background: $core-grey-light-200; + background: $gray-200; border-radius: 2px; @include font-size( 13 ); margin: 0 0 $gap-large; diff --git a/client/header/activity-panel/style.scss b/client/header/activity-panel/style.scss index 2160da52098..aedcdc50052 100644 --- a/client/header/activity-panel/style.scss +++ b/client/header/activity-panel/style.scss @@ -131,12 +131,12 @@ &:hover, &.components-button:not(:disabled):not([aria-disabled='true']):hover { - background-color: $core-grey-light-200; + background-color: $gray-200; box-shadow: none; &.has-unread::after, &.woocommerce-layout__activity-panel-tab-wordpress-notices::after { - border-color: $core-grey-light-200; + border-color: $gray-200; } } @@ -199,7 +199,7 @@ .woocommerce-layout__activity-panel-wrapper { height: calc(100vh - #{$header-height + $header-height + $adminbar-height-mobile}); - background: $core-grey-light-200; + background: $gray-200; width: 510px; @include breakpoint( '<782px' ) { width: 100%; diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index cef515158ad..8803886ac1c 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -3,7 +3,7 @@ $transparent: rgba(255, 255, 255, 0); // Greys -$core-grey-light-200: #f3f4f5; +$gray-200: #f3f4f5; $core-grey-light-300: #edeff0; $core-grey-light-400: #e8eaeb; $core-grey-light-500: #e2e4e7; diff --git a/packages/components/src/advanced-filters/style.scss b/packages/components/src/advanced-filters/style.scss index 7f8c446cce8..a92cfda0c9b 100644 --- a/packages/components/src/advanced-filters/style.scss +++ b/packages/components/src/advanced-filters/style.scss @@ -47,7 +47,7 @@ border-bottom: 1px solid $gray-400; &:hover { - background-color: $core-grey-light-200; + background-color: $gray-200; } .woocommerce-filters-advanced__line-item { @@ -92,7 +92,7 @@ border-bottom: 1px solid $gray-400; &:hover { - background-color: $core-grey-light-200; + background-color: $gray-200; } div div { @@ -209,7 +209,7 @@ padding: $gap-smaller; &:hover { - background-color: $core-grey-light-200; + background-color: $gray-200; } &:not(:disabled):not([aria-disabled='true']):focus { diff --git a/packages/components/src/chart/d3chart/legend.scss b/packages/components/src/chart/d3chart/legend.scss index d199c5698f0..9c9099827d1 100644 --- a/packages/components/src/chart/d3chart/legend.scss +++ b/packages/components/src/chart/d3chart/legend.scss @@ -77,7 +77,7 @@ &:hover { input { ~ .woocommerce-legend__item-checkmark { - background-color: $core-grey-light-200; + background-color: $gray-200; } } } diff --git a/packages/components/src/filter-picker/style.scss b/packages/components/src/filter-picker/style.scss index fdefc309d07..73c71d850cd 100644 --- a/packages/components/src/filter-picker/style.scss +++ b/packages/components/src/filter-picker/style.scss @@ -64,7 +64,7 @@ } &:hover { - background-color: $core-grey-light-200; + background-color: $gray-200; color: $core-grey-dark-500; } diff --git a/packages/components/src/search/style.scss b/packages/components/src/search/style.scss index d5ab82ea39e..7bc9f73f3d0 100644 --- a/packages/components/src/search/style.scss +++ b/packages/components/src/search/style.scss @@ -99,7 +99,7 @@ &:hover { box-shadow: none; color: $studio-woocommerce-purple; - background: $core-grey-light-200; + background: $gray-200; } &.is-selected, @@ -107,7 +107,7 @@ &:active { color: $studio-woocommerce-purple; background: $studio-white; - box-shadow: inset 0 0 0 1px $core-grey-light-200, + box-shadow: inset 0 0 0 1px $gray-200, inset 0 0 0 2px $wp-admin-sidebar; } diff --git a/packages/components/src/segmented-selection/style.scss b/packages/components/src/segmented-selection/style.scss index f38946833a4..ab5e6dbfbaa 100644 --- a/packages/components/src/segmented-selection/style.scss +++ b/packages/components/src/segmented-selection/style.scss @@ -35,11 +35,11 @@ height: 100%; &:active { - background-color: $core-grey-light-200; + background-color: $gray-200; } &:hover { - background-color: $core-grey-light-200; + background-color: $gray-200; } } @@ -49,7 +49,7 @@ left: -9999px; &:active + label .woocommerce-segmented-selection__label { - background-color: $core-grey-light-200; + background-color: $gray-200; } &:checked + label .woocommerce-segmented-selection__label { diff --git a/packages/components/src/table/style.scss b/packages/components/src/table/style.scss index 75bf5392de1..8e95f204dc9 100644 --- a/packages/components/src/table/style.scss +++ b/packages/components/src/table/style.scss @@ -104,7 +104,7 @@ tr:hover, tr:focus-within { - background-color: $core-grey-light-200; + background-color: $gray-200; td, th { background: transparent; From 111a20bef33304d698dc7506b34969f3ab9b0816 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 13:13:37 +1200 Subject: [PATCH 15/36] Fix some mistakes, replace core-grey-light with gray-100 --- client/dashboard/store-performance/style.scss | 2 +- client/header/activity-panel/activity-card/style.scss | 2 +- client/marketing/components/product-icon/style.scss | 4 ++-- client/stylesheets/abstracts/_colors.scss | 2 -- client/task-list/style.scss | 4 ++-- package-lock.json | 6 +++--- package.json | 2 +- packages/components/src/advanced-filters/style.scss | 4 ++-- packages/components/src/chart/style.scss | 2 +- packages/components/src/summary/style.scss | 2 +- 10 files changed, 14 insertions(+), 16 deletions(-) diff --git a/client/dashboard/store-performance/style.scss b/client/dashboard/store-performance/style.scss index 6ae5e3e0c09..f61cd86f6bc 100644 --- a/client/dashboard/store-performance/style.scss +++ b/client/dashboard/store-performance/style.scss @@ -32,7 +32,7 @@ } &:active { - background-color: $core-grey-light-300; + background-color: $gray-100; } } } diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index 9d1aab9d9b6..d490047b601 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -327,7 +327,7 @@ } .woocommerce-stock-activity-card__stock-quantity { - background: $core-grey-light-300; + background: $gray-100; color: $core-grey-dark-500; padding: 3px $gap-smaller; border-radius: 3px; diff --git a/client/marketing/components/product-icon/style.scss b/client/marketing/components/product-icon/style.scss index 837d219a98b..d94585579eb 100644 --- a/client/marketing/components/product-icon/style.scss +++ b/client/marketing/components/product-icon/style.scss @@ -5,8 +5,8 @@ height: 36px; border-radius: 8px; // for loading state - background: $core-grey-light-300; - color: $core-grey-light-300; + background: $gray-100; + color: $gray-100; svg { width: 36px; diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 8803886ac1c..902be5afc15 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -3,8 +3,6 @@ $transparent: rgba(255, 255, 255, 0); // Greys -$gray-200: #f3f4f5; -$core-grey-light-300: #edeff0; $core-grey-light-400: #e8eaeb; $core-grey-light-500: #e2e4e7; $core-grey-light-600: #d7dade; diff --git a/client/task-list/style.scss b/client/task-list/style.scss index 778f6422d52..103488e5572 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -564,7 +564,7 @@ // Firefox & { - background-color: $light-gray-300; + background-color: $gray-100; } &::-moz-progress-bar { @@ -575,7 +575,7 @@ // Chrome &::-webkit-progress-bar { - background-color: $light-gray-300; + background-color: $gray-100; border-top-left-radius: 2px; border-top-right-radius: 2px; } diff --git a/package-lock.json b/package-lock.json index cdb257f9868..b84e588f997 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6250,9 +6250,9 @@ } }, "@wordpress/base-styles": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-1.11.0.tgz", - "integrity": "sha512-CV7NsA0SzLGKFmhhTIhi6pWeijeSaBl16hwp+x7OcyQKy/MMbVx2gXsHf3KjGNY18FT1Uf2MlhcdIeBM22RpWQ==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-2.0.0.tgz", + "integrity": "sha512-l0/j0+nVBvCtd/PFj/g6J2R8XuVLLRCNV2jSlnf0SPuswBZ2NYPvCLmf/OZ1Nw/c2O+Erdvq8IdYvXOObewqxQ==", "dev": true }, "@wordpress/browserslist-config": { diff --git a/package.json b/package.json index 20514ee16a3..721f91f9edb 100644 --- a/package.json +++ b/package.json @@ -162,7 +162,7 @@ "@wordpress/babel-plugin-import-jsx-pragma": "1.1.3", "@wordpress/babel-plugin-makepot": "2.1.3", "@wordpress/babel-preset-default": "3.0.2", - "@wordpress/base-styles": "1.11.0", + "@wordpress/base-styles": "2.0.0", "@wordpress/browserslist-config": "2.6.0", "@wordpress/custom-templated-path-webpack-plugin": "1.6.0", "@wordpress/eslint-plugin": "3.4.1", diff --git a/packages/components/src/advanced-filters/style.scss b/packages/components/src/advanced-filters/style.scss index a92cfda0c9b..065a945f494 100644 --- a/packages/components/src/advanced-filters/style.scss +++ b/packages/components/src/advanced-filters/style.scss @@ -23,7 +23,7 @@ margin: $gap 0; border: 1px solid $gray-400; } - gray-400 @include breakpoint( '<400px' ) { + @include breakpoint( '<400px' ) { margin: $gap-small 0; } } @@ -213,7 +213,7 @@ } &:not(:disabled):not([aria-disabled='true']):focus { - background-color: $core-grey-light-300; + background-color: $gray-100; box-shadow: none; } } diff --git a/packages/components/src/chart/style.scss b/packages/components/src/chart/style.scss index 88a8de58cfe..4d38ae25669 100644 --- a/packages/components/src/chart/style.scss +++ b/packages/components/src/chart/style.scss @@ -4,7 +4,7 @@ background: $studio-white; border: 1px solid $gray-400; border-top: 0; - gray-400 @include breakpoint( '<782px' ) { + @include breakpoint( '<782px' ) { margin-left: -16px; margin-right: -16px; margin-bottom: $gap-small; diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss index 15015e0ff9d..343f60b3278 100644 --- a/packages/components/src/summary/style.scss +++ b/packages/components/src/summary/style.scss @@ -34,7 +34,7 @@ $border: $gray-100; border-width: 1px 0 0 1px; border-style: solid; border-color: $border; - background-color: $core-grey-light-300; + background-color: $gray-100; box-shadow: inset -1px -1px 0 $border; @include breakpoint( '<782px' ) { From f6efcce7a121621c52d111a194b9f9bf1012b50d Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 13:19:23 +1200 Subject: [PATCH 16/36] Update @wordpress/components to 10.0.0 to work with base-styles 2.0.0. --- package-lock.json | 322 +++++++--------------------------------------- package.json | 2 +- 2 files changed, 51 insertions(+), 273 deletions(-) diff --git a/package-lock.json b/package-lock.json index b84e588f997..79db6880af6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6262,9 +6262,9 @@ "dev": true }, "@wordpress/components": { - "version": "9.9.0", - "resolved": "https://registry.npmjs.org/@wordpress/components/-/components-9.9.0.tgz", - "integrity": "sha512-EtDQ7sf7GuEMo+oWW7CDob0YrVynxR+t0FXGDZw3IP8msKAvVmsCD0DoSEOfX/DTWNaaHstaw6xE4+Tgk1XUWQ==", + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@wordpress/components/-/components-10.0.0.tgz", + "integrity": "sha512-2iJw70xAhIQSjR7DLRbYTZx84OFqjGUZNE4U2fy7vg30z5TItP3KQ133VOW9uqQwl4U9gzovIAluq1nq8TuX1A==", "requires": { "@babel/runtime": "^7.9.2", "@emotion/core": "^10.0.22", @@ -6272,27 +6272,28 @@ "@emotion/native": "^10.0.22", "@emotion/styled": "^10.0.23", "@wordpress/a11y": "^2.11.0", - "@wordpress/compose": "^3.18.0", + "@wordpress/compose": "^3.19.0", "@wordpress/deprecated": "^2.9.0", - "@wordpress/dom": "^2.12.0", - "@wordpress/element": "^2.15.0", + "@wordpress/dom": "^2.13.0", + "@wordpress/element": "^2.16.0", "@wordpress/hooks": "^2.9.0", "@wordpress/i18n": "^3.14.0", - "@wordpress/icons": "^2.3.0", + "@wordpress/icons": "^2.4.0", "@wordpress/is-shallow-equal": "^2.1.0", "@wordpress/keycodes": "^2.14.0", - "@wordpress/primitives": "^1.6.0", - "@wordpress/rich-text": "^3.19.0", + "@wordpress/primitives": "^1.7.0", + "@wordpress/rich-text": "^3.20.0", "@wordpress/warning": "^1.2.0", "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", - "downshift": "^4.0.5", + "downshift": "^5.4.0", "gradient-parser": "^0.1.5", "lodash": "^4.17.15", "memize": "^1.1.0", "moment": "^2.22.1", "re-resizable": "^6.4.0", "react-dates": "^17.1.1", + "react-resize-aware": "^3.0.1", "react-spring": "^8.0.20", "react-use-gesture": "^7.0.15", "reakit": "^1.1.0", @@ -6301,57 +6302,15 @@ "uuid": "^7.0.2" }, "dependencies": { - "@wordpress/a11y": { - "version": "2.11.0", - "resolved": "https://registry.npmjs.org/@wordpress/a11y/-/a11y-2.11.0.tgz", - "integrity": "sha512-Phu3l9bFue3NnmB9SLmlSZtcaenfOiprCClC1Gk6Dxyf7dFincW65XcEZ5k8OZZQcT9mizMSQI4jTV64QiWanQ==", - "requires": { - "@babel/runtime": "^7.9.2", - "@wordpress/dom-ready": "^2.10.0", - "@wordpress/i18n": "^3.14.0" - } - }, - "@wordpress/compose": { - "version": "3.18.0", - "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.18.0.tgz", - "integrity": "sha512-EHVn7h1iYX9pMfcet6vF+/22nvaBf6beaPLh+QXMEma0H9d/ag5sqLazyVdBqLIJsGZWeR6s2cBnYmbdPApgFw==", - "requires": { - "@babel/runtime": "^7.9.2", - "@wordpress/element": "^2.15.0", - "@wordpress/is-shallow-equal": "^2.1.0", - "@wordpress/priority-queue": "^1.7.0", - "clipboard": "^2.0.1", - "lodash": "^4.17.15", - "mousetrap": "^1.6.5", - "react-resize-aware": "^3.0.1" - } - }, - "@wordpress/deprecated": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.9.0.tgz", - "integrity": "sha512-rknpxSuzS/cWzYuOlvAAMVjkSTNHq4ljrXAzX0Y81xzu2KgicwdDvbLQbC7diD8TOO4hWbz87FDI1gDN5/m4IQ==", - "requires": { - "@babel/runtime": "^7.9.2", - "@wordpress/hooks": "^2.9.0" - } - }, "@wordpress/dom": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@wordpress/dom/-/dom-2.12.0.tgz", - "integrity": "sha512-GYVawQlPcH5awLw1N/w8lQKVphguT7YR5yqDTmQ6O02bqtd+4/h5K2xXE8IINC4jBx6VyLV/dEYmrZvsiutNvg==", + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/@wordpress/dom/-/dom-2.13.1.tgz", + "integrity": "sha512-1Qs5sc4v4nFO9XhBCh1DnfNq/OWqD/kPYG6YUIbO4NH1h13lJDBx7FVZBsjsIMM7koTO9tD8ML01hxyofuo9Ow==", "requires": { "@babel/runtime": "^7.9.2", "lodash": "^4.17.15" } }, - "@wordpress/dom-ready": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@wordpress/dom-ready/-/dom-ready-2.10.0.tgz", - "integrity": "sha512-ibeuUU0bz66ZtFxu4jyo9YLxTkmLZCSiSo/NApwtzbyE3+cGS05XrAAhM/M79OjysOFaKNyh6sp0YA7ZZU47eg==", - "requires": { - "@babel/runtime": "^7.9.2" - } - }, "@wordpress/element": { "version": "2.16.0", "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.16.0.tgz", @@ -6364,14 +6323,6 @@ "react-dom": "^16.9.0" } }, - "@wordpress/escape-html": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-1.9.0.tgz", - "integrity": "sha512-XW0GGqxpFauOgTjfQ9603hCDnUE+HhD0HVFMIEphIrTpTreLW3lJbfTibPTn0dWWPATqanH2TlPurOagUubh4g==", - "requires": { - "@babel/runtime": "^7.9.2" - } - }, "@wordpress/hooks": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-2.9.0.tgz", @@ -6394,21 +6345,13 @@ } }, "@wordpress/icons": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-2.3.0.tgz", - "integrity": "sha512-8+6I5nE+J2GY8sN1WIAaA7FbhI2EoCmWgS+2pCSttYltcIGCGyL/fNBOKVY+ZtFMsOan08NMOQaxMywLjFeP7A==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-2.4.0.tgz", + "integrity": "sha512-G7ClNkJX8Hr/eSudoGM/cONrnwGspYLcL5Jf38lrk7Irrfl3rJXULnqe1FFcs4QHMgQuZUTphtrcMbiG6alKpw==", "requires": { "@babel/runtime": "^7.9.2", - "@wordpress/element": "^2.15.0", - "@wordpress/primitives": "^1.6.0" - } - }, - "@wordpress/is-shallow-equal": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-2.1.0.tgz", - "integrity": "sha512-xCphAZG60mnLhn+LitwfoercNxsPMvc0Yo96kBY7HAZgrPt+jNQ5Rv4M+FTlVnyLrkyxVxNdtGyuyR+Hpgi8Pg==", - "requires": { - "@babel/runtime": "^7.9.2" + "@wordpress/element": "^2.16.0", + "@wordpress/primitives": "^1.7.0" } }, "@wordpress/keycodes": { @@ -6420,29 +6363,6 @@ "@wordpress/i18n": "^3.14.0", "lodash": "^4.17.15" } - }, - "@wordpress/primitives": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-1.6.0.tgz", - "integrity": "sha512-QsvdzJX6/DikIRmWuU6g9O0Wse96/ZdIOealygO8FUj8HxB6kqFXBqk7L7pJKPYUuUyltu1oHblwT+IsxA1Agg==", - "requires": { - "@babel/runtime": "^7.9.2", - "@wordpress/element": "^2.15.0", - "classnames": "^2.2.5" - } - }, - "@wordpress/priority-queue": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-1.7.0.tgz", - "integrity": "sha512-fwHOW48lYRV2CpP43LwET+ZQrNDK325V9fFMMpc0tgJfdSfgT9gwztOEx5vbbfkwzJXIdxTW+ILhoH20CuiSug==", - "requires": { - "@babel/runtime": "^7.9.2" - } - }, - "@wordpress/warning": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@wordpress/warning/-/warning-1.2.0.tgz", - "integrity": "sha512-Q3WqbXHaoEuGddpFvVEmG9Xwpr5QMhi/NT+Q1td6J414fyNhafkmwGVd3roJB7/2y+ek2UDDegc32B8lkyW19A==" } } }, @@ -6782,21 +6702,21 @@ "integrity": "sha512-8Td9vWekCwZCPfWkVWKQllim/F/m0uN1cma3KkBsKxi0liftj/iXpDBDH6wDxsv8z1Gbwq+H9a4D6w7Ob8SqtQ==" }, "@wordpress/postcss-plugins-preset": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@wordpress/postcss-plugins-preset/-/postcss-plugins-preset-1.3.0.tgz", - "integrity": "sha512-i4SEAsPN8NMxCUpECj41Yb0pmW5PjypwfNdtzzqke6YQisGlCcKO2AF6F+1HTDNXc7SbBJFP6UbvrY4db5hK4g==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@wordpress/postcss-plugins-preset/-/postcss-plugins-preset-1.1.0.tgz", + "integrity": "sha512-NSduxM8oMI1oKfJ+mnnb5hwL126j+1FKhztcI856hJRf3cyLLDh1RG8WOWyMgFNxkHHB46SUnDh0jLDaCF5jhw==", "dev": true, "requires": { - "@wordpress/base-styles": "^2.0.0", - "@wordpress/postcss-themes": "^2.6.0", + "@wordpress/base-styles": "^1.10.0", + "@wordpress/postcss-themes": "^2.5.0", "autoprefixer": "^9.4.5", - "postcss-custom-properties": "^9.1.1" + "postcss-color-function": "^4.0.1" }, "dependencies": { "@wordpress/base-styles": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-2.0.0.tgz", - "integrity": "sha512-l0/j0+nVBvCtd/PFj/g6J2R8XuVLLRCNV2jSlnf0SPuswBZ2NYPvCLmf/OZ1Nw/c2O+Erdvq8IdYvXOObewqxQ==", + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-1.11.0.tgz", + "integrity": "sha512-CV7NsA0SzLGKFmhhTIhi6pWeijeSaBl16hwp+x7OcyQKy/MMbVx2gXsHf3KjGNY18FT1Uf2MlhcdIeBM22RpWQ==", "dev": true }, "@wordpress/postcss-themes": { @@ -6920,27 +6840,15 @@ } }, "@wordpress/rich-text": { -<<<<<<< HEAD - "version": "3.20.0", - "resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-3.20.0.tgz", - "integrity": "sha512-pPz7xvttFAfEkWpRnDh3WH7Ueh2lbatOGyFEgkvTX1SWH4cd9xWpJj4J/wrQ705VwQveTtoyb0HA0B0GU/5UYA==", + "version": "3.20.1", + "resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-3.20.1.tgz", + "integrity": "sha512-VhvwSKaXN6sFoiuBsJmDVJRO1izBsO1CcVATs7PnhPXE4l3AUnvluSbd/d0JP3Gqq/hxprdutPffRMLcODKnfw==", "requires": { "@babel/runtime": "^7.9.2", - "@wordpress/compose": "^3.19.0", - "@wordpress/data": "^4.22.0", + "@wordpress/compose": "^3.19.1", + "@wordpress/data": "^4.22.1", "@wordpress/deprecated": "^2.9.0", "@wordpress/element": "^2.16.0", -======= - "version": "3.19.0", - "resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-3.19.0.tgz", - "integrity": "sha512-QhzIketHwieMJXN2zk0TF07Xp13N+31JvR3gGZOXNasm6G+AXDrBaUMOOLftcOuPREX7weGKDeUqYMySmSAJUA==", - "requires": { - "@babel/runtime": "^7.9.2", - "@wordpress/compose": "^3.18.0", - "@wordpress/data": "^4.21.0", - "@wordpress/deprecated": "^2.9.0", - "@wordpress/element": "^2.15.0", ->>>>>>> Update @wordpress/components to 9.9.0 "@wordpress/escape-html": "^1.9.0", "@wordpress/is-shallow-equal": "^2.1.0", "@wordpress/keycodes": "^2.14.0", @@ -6951,12 +6859,12 @@ }, "dependencies": { "@wordpress/compose": { - "version": "3.18.0", - "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.18.0.tgz", - "integrity": "sha512-EHVn7h1iYX9pMfcet6vF+/22nvaBf6beaPLh+QXMEma0H9d/ag5sqLazyVdBqLIJsGZWeR6s2cBnYmbdPApgFw==", + "version": "3.19.1", + "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.19.1.tgz", + "integrity": "sha512-D9IoSQJKgQ2Yqz/SDRjoeT26USR7PoTxzyO7Hk2EyolfPoB0sko0LjwbbndfLYYLksAcZ4x1js4cK9+tHkFJNA==", "requires": { "@babel/runtime": "^7.9.2", - "@wordpress/element": "^2.15.0", + "@wordpress/element": "^2.16.0", "@wordpress/is-shallow-equal": "^2.1.0", "@wordpress/priority-queue": "^1.7.0", "clipboard": "^2.0.1", @@ -6966,25 +6874,14 @@ } }, "@wordpress/data": { -<<<<<<< HEAD - "version": "4.22.0", - "resolved": "https://registry.npmjs.org/@wordpress/data/-/data-4.22.0.tgz", - "integrity": "sha512-dflzpbNnor/C2EUoidk8+qePTd6SyoiMFjcOijVD9el6248hlYOKxCNHBadcgJ+XO3BYTzImQgkPE87iCCIuNQ==", + "version": "4.22.1", + "resolved": "https://registry.npmjs.org/@wordpress/data/-/data-4.22.1.tgz", + "integrity": "sha512-Fbr3Og6myQvjhluG1SoJe9LOrFaDBCF0NsP8UcAE2EJuKI11C9eGJ/iLcy9nhRy/oRzOG3ju8+5qF1Sx2vsQ4A==", "requires": { "@babel/runtime": "^7.9.2", - "@wordpress/compose": "^3.19.0", + "@wordpress/compose": "^3.19.1", "@wordpress/deprecated": "^2.9.0", "@wordpress/element": "^2.16.0", -======= - "version": "4.21.0", - "resolved": "https://registry.npmjs.org/@wordpress/data/-/data-4.21.0.tgz", - "integrity": "sha512-+KU4+XKtVUqnPRBUlqD5yJXQNVoAPBZsp6KWNojd9Zhm4Sg/+8DGNo+fSpt5RQ+VJmUoRAqAk8UifQ6LZSuzQg==", - "requires": { - "@babel/runtime": "^7.9.2", - "@wordpress/compose": "^3.18.0", - "@wordpress/deprecated": "^2.9.0", - "@wordpress/element": "^2.15.0", ->>>>>>> Update @wordpress/components to 9.9.0 "@wordpress/is-shallow-equal": "^2.1.0", "@wordpress/priority-queue": "^1.7.0", "@wordpress/redux-routine": "^3.10.0", @@ -6997,25 +6894,10 @@ "use-memo-one": "^1.1.1" } }, - "@wordpress/deprecated": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.9.0.tgz", - "integrity": "sha512-rknpxSuzS/cWzYuOlvAAMVjkSTNHq4ljrXAzX0Y81xzu2KgicwdDvbLQbC7diD8TOO4hWbz87FDI1gDN5/m4IQ==", - "requires": { - "@babel/runtime": "^7.9.2", - "@wordpress/hooks": "^2.9.0" - } - }, "@wordpress/element": { -<<<<<<< HEAD "version": "2.16.0", "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.16.0.tgz", "integrity": "sha512-1ijo/GR/uBfL4teCQ3oFdUTqkeV2EZ32SCvXl30iPbqYmaNSzT1ZI1dlW8GO5o5UBja9BG11hnaOwm93pE2y2A==", -======= - "version": "2.15.0", - "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.15.0.tgz", - "integrity": "sha512-XXJxvjlQo0+1L+QFUXSWc8HCPR3I9aG0yxs+kJ8k8SHQxkUOZkqLQLYtwoNJpAlvgyKeFQNigpoddjoVbDDm7Q==", ->>>>>>> Update @wordpress/components to 9.9.0 "requires": { "@babel/runtime": "^7.9.2", "@wordpress/escape-html": "^1.9.0", @@ -7024,22 +6906,6 @@ "react-dom": "^16.9.0" } }, - "@wordpress/escape-html": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-1.9.0.tgz", - "integrity": "sha512-XW0GGqxpFauOgTjfQ9603hCDnUE+HhD0HVFMIEphIrTpTreLW3lJbfTibPTn0dWWPATqanH2TlPurOagUubh4g==", - "requires": { - "@babel/runtime": "^7.9.2" - } - }, - "@wordpress/hooks": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-2.9.0.tgz", - "integrity": "sha512-RL7bIIwy1BJWPOicwtDdC1cO+0HqHhnRtry8qeatv+/qN7O5YrJaslCMot7R4Y9cIgzX8C8Vj2BN2QsXLqUAGg==", - "requires": { - "@babel/runtime": "^7.9.2" - } - }, "@wordpress/i18n": { "version": "3.14.0", "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-3.14.0.tgz", @@ -7053,14 +6919,6 @@ "tannin": "^1.2.0" } }, - "@wordpress/is-shallow-equal": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-2.1.0.tgz", - "integrity": "sha512-xCphAZG60mnLhn+LitwfoercNxsPMvc0Yo96kBY7HAZgrPt+jNQ5Rv4M+FTlVnyLrkyxVxNdtGyuyR+Hpgi8Pg==", - "requires": { - "@babel/runtime": "^7.9.2" - } - }, "@wordpress/keycodes": { "version": "2.14.0", "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-2.14.0.tgz", @@ -7070,25 +6928,6 @@ "@wordpress/i18n": "^3.14.0", "lodash": "^4.17.15" } - }, - "@wordpress/priority-queue": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-1.7.0.tgz", - "integrity": "sha512-fwHOW48lYRV2CpP43LwET+ZQrNDK325V9fFMMpc0tgJfdSfgT9gwztOEx5vbbfkwzJXIdxTW+ILhoH20CuiSug==", - "requires": { - "@babel/runtime": "^7.9.2" - } - }, - "@wordpress/redux-routine": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/@wordpress/redux-routine/-/redux-routine-3.10.0.tgz", - "integrity": "sha512-i4YQq9veu3i0Q89b5mpVW6GL0Hn+2/rZp/iTfjdUsalfIvSQFg1BpTU1ixbeXymWH7RryjN/qLm28bUCITJKYg==", - "requires": { - "@babel/runtime": "^7.9.2", - "is-promise": "^4.0.0", - "lodash": "^4.17.15", - "rungen": "^0.3.2" - } } } }, @@ -12979,14 +12818,14 @@ } }, "downshift": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/downshift/-/downshift-4.1.0.tgz", - "integrity": "sha512-GODZOZC65a8n8YD/S/87hR2t5PJfqZ7+lwEBJsNi/AJnhImfle+CFD/ZPde4l+nB8QNHfn0GbE1W9djEFOj1yQ==", + "version": "5.4.6", + "resolved": "https://registry.npmjs.org/downshift/-/downshift-5.4.6.tgz", + "integrity": "sha512-GtSCmZUQMulQQ0gX3N3jvUAABJNU8IfAMLzFLu0E2fcOTt98xropy0iriYW2PSClRUqJ4QwKAov7FDy9Gk9aOA==", "requires": { - "@babel/runtime": "^7.4.5", - "compute-scroll-into-view": "^1.0.9", + "@babel/runtime": "^7.10.2", + "compute-scroll-into-view": "^1.0.14", "prop-types": "^15.7.2", - "react-is": "^16.9.0" + "react-is": "^16.13.1" } }, "duplexer": { @@ -17072,12 +16911,6 @@ "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=", "dev": true }, - "ip-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.1.0.tgz", - "integrity": "sha512-pKnZpbgCTfH/1NLIlOduP/V+WRXzC2MOz3Qo8xmxk8C5GudJLgK5QyLVXOSWy3ParAH7Eemurl3xjv/WXYFvMA==", - "dev": true - }, "ipaddr.js": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", @@ -17573,15 +17406,6 @@ "upper-case": "^1.1.0" } }, - "is-url-superb": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-3.0.0.tgz", - "integrity": "sha512-3faQP+wHCGDQT1qReM5zCPx2mxoal6DzbzquFlCYJLWyy4WPTved33ea2xFbX37z4NoriEwZGIYhFtx8RUB5wQ==", - "dev": true, - "requires": { - "url-regex": "^5.0.0" - } - }, "is-utf8": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", @@ -23496,16 +23320,6 @@ "postcss-value-parser": "^3.0.0" } }, - "postcss-custom-properties": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-9.1.1.tgz", - "integrity": "sha512-GVu+j7vwMTKUGhGXckYAFAAG5tTJUkSt8LuSyimtZdVVmdAEZYYqserkAgX8vwMhgGDPA4vJtWt7VgFxgiooDA==", - "dev": true, - "requires": { - "postcss": "^7.0.17", - "postcss-values-parser": "^3.0.5" - } - }, "postcss-discard-comments": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz", @@ -24048,26 +23862,6 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" }, - "postcss-values-parser": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-3.2.1.tgz", - "integrity": "sha512-SQ7/88VE9LhJh9gc27/hqnSU/aZaREVJcRVccXBmajgP2RkjdJzNyH/a9GCVMI5nsRhT0jC5HpUMwfkz81DVVg==", - "dev": true, - "requires": { - "color-name": "^1.1.4", - "is-url-superb": "^3.0.0", - "postcss": "^7.0.5", - "url-regex": "^5.0.0" - }, - "dependencies": { - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - } - } - }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -24742,9 +24536,9 @@ } }, "re-resizable": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.5.2.tgz", - "integrity": "sha512-Pjo3ydkr/meTr6j3YZqyv+9fRS5UNOj5SaAI06gHFQ35BnpsZKmwNvupCnbo11gjQ1I62Uy+UzlHLO9xPQEuWQ==", + "version": "6.5.4", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.5.4.tgz", + "integrity": "sha512-7T3L1lexB2zkZIDmzRJbwdq+xGFuRkrEVQIf5hBPnh7JuS9kG9Yc8XgIaxTWic1kU7jVlDgqzfId/gvmpBCjpA==", "requires": { "fast-memoize": "^2.5.1" } @@ -28983,12 +28777,6 @@ "upper-case": "^1.0.3" } }, - "tlds": { - "version": "1.207.0", - "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz", - "integrity": "sha512-k7d7Q1LqjtAvhtEOs3yN14EabsNO8ZCoY6RESSJDB9lst3bTx3as/m1UuAeCKzYxiyhR1qq72ZPhpSf+qlqiwg==", - "dev": true - }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -29973,16 +29761,6 @@ } } }, - "url-regex": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/url-regex/-/url-regex-5.0.0.tgz", - "integrity": "sha512-O08GjTiAFNsSlrUWfqF1jH0H1W3m35ZyadHrGv5krdnmPPoxP27oDTqux/579PtaroiSGm5yma6KT1mHFH6Y/g==", - "dev": true, - "requires": { - "ip-regex": "^4.1.0", - "tlds": "^1.203.0" - } - }, "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", diff --git a/package.json b/package.json index 721f91f9edb..43efd0bf569 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "dependencies": { "@fresh-data/framework": "0.6.1", "@wordpress/api-fetch": "2.2.8", - "@wordpress/components": "9.9.0", + "@wordpress/components": "10.0.0", "@wordpress/data": "4.16.1", "@wordpress/data-controls": "1.10.1", "@wordpress/date": "3.9.0", From 82d393114fc18e6104948bcfc6c6878db56aa43c Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 13:37:08 +1200 Subject: [PATCH 17/36] Replace core-grey-light 400 & 500 with grey-100 --- client/dashboard/style.scss | 3 +-- .../activity-panel/activity-card/style.scss | 2 +- .../activity-panel/activity-header/style.scss | 2 +- .../activity-outbound-link/style.scss | 2 +- client/homescreen/stats-overview/style.scss | 2 +- client/marketing/coupons/style.scss | 2 +- .../overview/installed-extensions/style.scss | 2 +- client/marketing/overview/style.scss | 2 +- client/stylesheets/abstracts/_colors.scss | 2 -- client/stylesheets/abstracts/_mixins.scss | 2 +- client/task-list/style.scss | 2 +- packages/components/src/calendar/style.scss | 6 +++--- packages/components/src/chart/d3chart/style.scss | 2 +- .../components/src/dropdown-button/style.scss | 2 +- packages/components/src/filters/style.scss | 2 +- packages/components/src/flag/style.scss | 3 +-- packages/components/src/order-status/style.scss | 2 +- .../src/search-list-control/style.scss | 16 ++++++++-------- packages/components/src/search/style.scss | 2 +- packages/components/src/table/style.scss | 2 +- packages/components/src/tag/style.scss | 4 +--- .../src/text-control-with-affixes/style.scss | 4 ++-- 22 files changed, 31 insertions(+), 37 deletions(-) diff --git a/client/dashboard/style.scss b/client/dashboard/style.scss index c1ee102b20c..001d5434a23 100644 --- a/client/dashboard/style.scss +++ b/client/dashboard/style.scss @@ -73,7 +73,7 @@ } .woocommerce-dashboard-section-controls { - border-top: $border-width solid $core-grey-light-500; + border-top: $border-width solid $gray-100; padding-top: $gap-smaller; .dashicon { @@ -100,7 +100,6 @@ } } - .woocommerce-dashboard-card { .components-card__header.is-size-large, .components-card__header.is-size-medium { diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index d490047b601..b8cf5a3c55e 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -3,7 +3,7 @@ padding: $fallback-gutter; padding: $gutter; background: $studio-white; - border-bottom: 1px solid $core-grey-light-400; + border-bottom: 1px solid $gray-100; color: $gray-text; @include font-size( 13 ); diff --git a/client/header/activity-panel/activity-header/style.scss b/client/header/activity-panel/activity-header/style.scss index 64c2b9354f3..846eeed1956 100644 --- a/client/header/activity-panel/activity-header/style.scss +++ b/client/header/activity-panel/activity-header/style.scss @@ -1,6 +1,6 @@ .woocommerce-layout__activity-panel-header { height: 50px; - background: $core-grey-light-500; + background: $gray-100; padding: 16px; display: flex; justify-content: space-between; diff --git a/client/header/activity-panel/activity-outbound-link/style.scss b/client/header/activity-panel/activity-outbound-link/style.scss index d51562de5f5..d6331da7902 100644 --- a/client/header/activity-panel/activity-outbound-link/style.scss +++ b/client/header/activity-panel/activity-outbound-link/style.scss @@ -4,7 +4,7 @@ align-items: center; height: 50px; background: $gray-200; - border-bottom: 1px solid $core-grey-light-400; + border-bottom: 1px solid $gray-100; padding: $gap $fallback-gutter; padding: $gap $gutter; font-size: 13px; diff --git a/client/homescreen/stats-overview/style.scss b/client/homescreen/stats-overview/style.scss index eb63d8ddac7..21dc95df0fc 100644 --- a/client/homescreen/stats-overview/style.scss +++ b/client/homescreen/stats-overview/style.scss @@ -1,6 +1,6 @@ // Set up some local color variables to make the CSS more clear $outer-border: $gray-400; -$promo-actions-border-top: $core-grey-light-500; +$promo-actions-border-top: $gray-100; $promo-actions-border-bottom: $gray-100; .woocommerce-stats-overview { diff --git a/client/marketing/coupons/style.scss b/client/marketing/coupons/style.scss index 565d9ca85b5..3811b8ee197 100644 --- a/client/marketing/coupons/style.scss +++ b/client/marketing/coupons/style.scss @@ -11,7 +11,7 @@ .woocommerce-card__header { padding: $gap $gap-large; - border-bottom: 1px solid $core-grey-light-500; + border-bottom: 1px solid $gray-100; border-radius: 0; } diff --git a/client/marketing/overview/installed-extensions/style.scss b/client/marketing/overview/installed-extensions/style.scss index 875dccfe704..d133b76ad11 100644 --- a/client/marketing/overview/installed-extensions/style.scss +++ b/client/marketing/overview/installed-extensions/style.scss @@ -22,7 +22,7 @@ } &__item:not(:last-child) { - border-bottom: 1px solid $core-grey-light-500; + border-bottom: 1px solid $gray-100; } &__item-text-and-actions { diff --git a/client/marketing/overview/style.scss b/client/marketing/overview/style.scss index a38b659da9b..c17038012a4 100644 --- a/client/marketing/overview/style.scss +++ b/client/marketing/overview/style.scss @@ -4,7 +4,7 @@ .woocommerce-card__header { padding: 16px 24px; - border-bottom: 1px solid $core-grey-light-500; + border-bottom: 1px solid $gray-100; } .woocommerce-card__title { diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 902be5afc15..1eaa794c0f3 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -3,8 +3,6 @@ $transparent: rgba(255, 255, 255, 0); // Greys -$core-grey-light-400: #e8eaeb; -$core-grey-light-500: #e2e4e7; $core-grey-light-600: #d7dade; $core-grey-light-800: #b5bcc2; $core-grey-light-900: #a2aab2; diff --git a/client/stylesheets/abstracts/_mixins.scss b/client/stylesheets/abstracts/_mixins.scss index 6aed7e5903a..80f93c65271 100644 --- a/client/stylesheets/abstracts/_mixins.scss +++ b/client/stylesheets/abstracts/_mixins.scss @@ -22,7 +22,7 @@ // Adds animation to placeholder section @mixin placeholder( $lighten-percentage: 30% ) { animation: loading-fade 1.6s ease-in-out infinite; - background-color: $core-grey-light-500; + background-color: $gray-100; color: transparent; &::after { diff --git a/client/task-list/style.scss b/client/task-list/style.scss index 103488e5572..ef7e5c9c549 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -10,7 +10,7 @@ } .woocommerce-list__item:not( .is-complete ) { .woocommerce-task__icon { - border: 1px solid $core-grey-light-500; + border: 1px solid $gray-100; background: $white; } } diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index 9f8db8f2746..5d6026337eb 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -27,7 +27,7 @@ &:hover { background: var(--wp-admin-theme-color-darker-10); - border: 1px solid $core-grey-light-500; + border: 1px solid $gray-100; } } @@ -37,13 +37,13 @@ &:hover { background: var(--wp-admin-theme-color-darker-10); - border: 1px solid $core-grey-light-500; + border: 1px solid $gray-100; } } .CalendarDay__hovered_span { background: var(--wp-admin-theme-color-darker-10); - border: 1px solid $core-grey-light-500; + border: 1px solid $gray-100; color: $studio-white; &:hover { diff --git a/packages/components/src/chart/d3chart/style.scss b/packages/components/src/chart/d3chart/style.scss index ab479e20343..fe1ba9f9e9b 100644 --- a/packages/components/src/chart/d3chart/style.scss +++ b/packages/components/src/chart/d3chart/style.scss @@ -120,7 +120,7 @@ .grid { .tick { line { - stroke: $core-grey-light-500; + stroke: $gray-100; stroke-width: 1; shape-rendering: crispEdges; } diff --git a/packages/components/src/dropdown-button/style.scss b/packages/components/src/dropdown-button/style.scss index 4c08fdcd5af..8f45315243f 100644 --- a/packages/components/src/dropdown-button/style.scss +++ b/packages/components/src/dropdown-button/style.scss @@ -1,7 +1,7 @@ .woocommerce-page .woocommerce-dropdown-button { background-color: $studio-white; position: relative; - border: 1px solid $core-grey-light-500; + border: 1px solid $gray-100; color: $core-grey-dark-500; border-radius: 4px; padding: 0 40px 0 0; diff --git a/packages/components/src/filters/style.scss b/packages/components/src/filters/style.scss index 18cebda777d..3a493cd7cdd 100644 --- a/packages/components/src/filters/style.scss +++ b/packages/components/src/filters/style.scss @@ -90,7 +90,7 @@ .woocommerce-filters__compare-body { padding: $gap; background-color: $gray-100; - border-bottom: 1px solid $core-grey-light-500; + border-bottom: 1px solid $gray-100; } .woocommerce-filters__compare-footer { diff --git a/packages/components/src/flag/style.scss b/packages/components/src/flag/style.scss index b3830e46599..18b422b596b 100644 --- a/packages/components/src/flag/style.scss +++ b/packages/components/src/flag/style.scss @@ -1,11 +1,10 @@ - .woocommerce-flag { span { vertical-align: middle; } .woocommerce-flag__fallback { - background: $core-grey-light-500; + background: $gray-100; color: transparent; width: 24px; height: 18px; diff --git a/packages/components/src/order-status/style.scss b/packages/components/src/order-status/style.scss index 722acebf366..99d13219017 100644 --- a/packages/components/src/order-status/style.scss +++ b/packages/components/src/order-status/style.scss @@ -11,7 +11,7 @@ background: $gray-400; margin-right: $gap-smallest * 2; border-radius: 50%; - border: 3px solid $core-grey-light-500; + border: 3px solid $gray-100; &.is-processing { background: $valid-green; diff --git a/packages/components/src/search-list-control/style.scss b/packages/components/src/search-list-control/style.scss index 855bf07dc16..391fbadcb14 100644 --- a/packages/components/src/search-list-control/style.scss +++ b/packages/components/src/search-list-control/style.scss @@ -9,7 +9,7 @@ padding: $gap 0 0; // 76px is the height of 1 row of tags. min-height: 76px; - border-top: 1px solid $core-grey-light-500; + border-top: 1px solid $gray-100; .woocommerce-search-list__selected-header { margin-bottom: $gap-smaller; @@ -27,7 +27,7 @@ .woocommerce-search-list__search { margin: $gap 0; padding: $gap 0 0; - border-top: 1px solid $core-grey-light-500; + border-top: 1px solid $gray-100; .components-base-control__field { margin-bottom: $gap; @@ -39,8 +39,8 @@ max-height: 17em; overflow-x: hidden; overflow-y: auto; - border-top: 1px solid $core-grey-light-500; - border-bottom: 1px solid $core-grey-light-500; + border-top: 1px solid $gray-100; + border-bottom: 1px solid $gray-100; &.is-loading { padding: $gap-small 0; @@ -78,7 +78,7 @@ } & > [role='menu'] { - border: 1px solid $core-grey-light-500; + border: 1px solid $gray-100; border-bottom: none; } @@ -89,7 +89,7 @@ padding: $gap-small $gap; background: $studio-white; // !important to keep the border around on hover - border-bottom: 1px solid $core-grey-light-500 !important; + border-bottom: 1px solid $gray-100 !important; color: $core-grey-dark-500; @include hover-state { @@ -122,7 +122,7 @@ } &:not(.depth-0) + .depth-0 { - border-top: 1px solid $core-grey-light-500; + border-top: 1px solid $gray-100; } // Anything deeper than 5 levels will use this fallback depth @@ -177,7 +177,7 @@ .woocommerce-search-list__item-count { flex: 0 1 auto; padding: $gap-smallest/2 $gap-smaller; - border: 1px solid $core-grey-light-500; + border: 1px solid $gray-100; border-radius: 12px; font-size: 0.8em; line-height: 1.4; diff --git a/packages/components/src/search/style.scss b/packages/components/src/search/style.scss index 7bc9f73f3d0..d7632a204de 100644 --- a/packages/components/src/search/style.scss +++ b/packages/components/src/search/style.scss @@ -88,7 +88,7 @@ color: $studio-woocommerce-purple; text-align: left; background: $gray-100; - border-bottom: 1px solid $core-grey-light-500; + border-bottom: 1px solid $gray-100; font-size: 13px; min-height: 43px; diff --git a/packages/components/src/table/style.scss b/packages/components/src/table/style.scss index 8e95f204dc9..3e0f64702c3 100644 --- a/packages/components/src/table/style.scss +++ b/packages/components/src/table/style.scss @@ -116,7 +116,7 @@ .woocommerce-table__item, .woocommerce-table__empty-item { padding: $gap $gap-large; - border-bottom: 1px solid $core-grey-light-500; + border-bottom: 1px solid $gray-100; } .woocommerce-table__header, diff --git a/packages/components/src/tag/style.scss b/packages/components/src/tag/style.scss index d64feca7e87..acae205d4d2 100644 --- a/packages/components/src/tag/style.scss +++ b/packages/components/src/tag/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-tag { display: inline-flex; margin: 1px 4px 1px 0; @@ -10,7 +8,7 @@ .woocommerce-tag__remove { display: inline-block; line-height: 24px; - background: $core-grey-light-500; + background: $gray-100; transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); } diff --git a/packages/components/src/text-control-with-affixes/style.scss b/packages/components/src/text-control-with-affixes/style.scss index 89e8c24fcc2..69e864a7c5c 100644 --- a/packages/components/src/text-control-with-affixes/style.scss +++ b/packages/components/src/text-control-with-affixes/style.scss @@ -15,7 +15,7 @@ border-right-width: 0; & + .text-control-with-affixes__suffix { - border-left: 1px solid $core-grey-light-500; + border-left: 1px solid $gray-100; } } } @@ -63,7 +63,7 @@ & + input[type='text'], & + input[type='number'] { &:disabled { - border-left-color: $core-grey-light-500; + border-left-color: $gray-100; } } } From ee3f7bfb803194d9da72ac03de9559303441c0ae Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 13:40:19 +1200 Subject: [PATCH 18/36] Replace core-grey-light-600 with gray-200 --- client/header/activity-panel/activity-card/style.scss | 2 +- client/stylesheets/abstracts/_colors.scss | 1 - packages/components/src/list/stories/style.scss | 2 +- packages/components/src/rating/style.scss | 4 +--- 4 files changed, 3 insertions(+), 6 deletions(-) diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index b8cf5a3c55e..9e708071ffa 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -35,7 +35,7 @@ .woocommerce-activity-card__icon { grid-area: icon; - fill: $core-grey-light-600; + fill: $gray-200; } .woocommerce-activity-card__header { diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 1eaa794c0f3..551193b15d6 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -3,7 +3,6 @@ $transparent: rgba(255, 255, 255, 0); // Greys -$core-grey-light-600: #d7dade; $core-grey-light-800: #b5bcc2; $core-grey-light-900: #a2aab2; $core-grey-dark-100: #86909b; diff --git a/packages/components/src/list/stories/style.scss b/packages/components/src/list/stories/style.scss index 8ad7bf0a75a..47cf7ecd78e 100644 --- a/packages/components/src/list/stories/style.scss +++ b/packages/components/src/list/stories/style.scss @@ -5,7 +5,7 @@ .woocommerce-list__item { &:not(:first-child) { - border-top: 1px solid $core-grey-light-600; + border-top: 1px solid $gray-200; } .woocommerce-list__item-before { diff --git a/packages/components/src/rating/style.scss b/packages/components/src/rating/style.scss index a8cc14d8484..fb70439dd87 100644 --- a/packages/components/src/rating/style.scss +++ b/packages/components/src/rating/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-rating { position: relative; vertical-align: middle; @@ -8,7 +6,7 @@ white-space: nowrap; .gridicon { - fill: $core-grey-light-600; + fill: $gray-200; } .woocommerce-rating__star-outline { From dc958605053c5ec274bae0fb8f2ceb400587120a Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 13:43:38 +1200 Subject: [PATCH 19/36] Replace core-grey-light-900 with gray-400 --- client/stylesheets/abstracts/_colors.scss | 2 -- packages/components/src/calendar/style.scss | 2 +- packages/components/src/chart/d3chart/legend.scss | 4 ++-- packages/components/src/list/stories/style.scss | 2 +- packages/components/src/search/style.scss | 2 +- 5 files changed, 5 insertions(+), 7 deletions(-) diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 551193b15d6..4d88762e0e3 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -3,8 +3,6 @@ $transparent: rgba(255, 255, 255, 0); // Greys -$core-grey-light-800: #b5bcc2; -$core-grey-light-900: #a2aab2; $core-grey-dark-100: #86909b; $core-grey-dark-150: #8d96a0; $core-grey-dark-200: #78848f; diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index 5d6026337eb..9c4b3553f9b 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -53,7 +53,7 @@ } .CalendarDay__blocked_out_of_range { - color: $core-grey-light-900; + color: $gray-400; } .DayPicker_transitionContainer, diff --git a/packages/components/src/chart/d3chart/legend.scss b/packages/components/src/chart/d3chart/legend.scss index 9c9099827d1..20e509c79ae 100644 --- a/packages/components/src/chart/d3chart/legend.scss +++ b/packages/components/src/chart/d3chart/legend.scss @@ -83,7 +83,7 @@ } .woocommerce-legend__item-checkmark { - border: 1px solid $core-grey-light-900; + border: 1px solid $gray-400; position: absolute; top: 4px; left: 0; @@ -130,7 +130,7 @@ .woocommerce-legend__item-container { .woocommerce-legend__item-checkmark { - outline: 2px solid $core-grey-light-900; + outline: 2px solid $gray-400; } } } diff --git a/packages/components/src/list/stories/style.scss b/packages/components/src/list/stories/style.scss index 47cf7ecd78e..8f677d33917 100644 --- a/packages/components/src/list/stories/style.scss +++ b/packages/components/src/list/stories/style.scss @@ -1,5 +1,5 @@ .storybook-custom-list { - border: 1px solid $core-grey-light-900; + border: 1px solid $gray-400; border-radius: 2px; padding: 0; diff --git a/packages/components/src/search/style.scss b/packages/components/src/search/style.scss index d7632a204de..ff85a88cbd0 100644 --- a/packages/components/src/search/style.scss +++ b/packages/components/src/search/style.scss @@ -5,7 +5,7 @@ position: absolute; top: 9px; left: 10px; - color: $core-grey-light-900; + color: $gray-400; font-size: 20px; } From 112ff90312a83376f74e68817e3e799dce009b29 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 13:46:53 +1200 Subject: [PATCH 20/36] Replace core-grey-dark 150 with gray-600, remove core-grey-dark 100,200 --- client/profile-wizard/style.scss | 4 ++-- client/stylesheets/abstracts/_colors.scss | 3 --- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/client/profile-wizard/style.scss b/client/profile-wizard/style.scss index 4e478b5f251..b7fee2aa340 100644 --- a/client/profile-wizard/style.scss +++ b/client/profile-wizard/style.scss @@ -93,7 +93,7 @@ .woocommerce-card ~ p { font-size: 12px; - color: $core-grey-dark-150; + color: $gray-600; } } @@ -469,7 +469,7 @@ .woocommerce-business-extensions__label-subtext { display: block; - color: $core-grey-dark-150; + color: $gray-600; font-size: 14px; } diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 4d88762e0e3..6347b6a1c9f 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -3,9 +3,6 @@ $transparent: rgba(255, 255, 255, 0); // Greys -$core-grey-dark-100: #86909b; -$core-grey-dark-150: #8d96a0; -$core-grey-dark-200: #78848f; $core-grey-dark-300: #6c7781; // This & below have 4.5+ contrast against white $core-grey-dark-400: #606a73; $core-grey-dark-500: #555d66; From e876b01b817def43d8924353d79c6640b396b8b3 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 13:51:24 +1200 Subject: [PATCH 21/36] Replace core-grey-dark-300 with gray-700 --- client/analytics/settings/setting.scss | 6 ++---- client/dashboard/style.scss | 2 +- client/header/activity-panel/activity-card/style.scss | 2 +- client/header/activity-panel/style.scss | 3 +-- client/stylesheets/abstracts/_colors.scss | 1 - packages/components/src/calendar/style.scss | 8 ++++---- packages/components/src/chart/d3chart/style.scss | 4 ++-- .../components/src/date-range-filter-picker/style.scss | 2 +- packages/components/src/ellipsis-menu/style.scss | 3 +-- packages/components/src/pagination/style.scss | 4 +--- packages/components/src/search-list-control/style.scss | 4 ++-- packages/components/src/summary/style.scss | 6 ++---- packages/components/src/table/style.scss | 2 +- 13 files changed, 19 insertions(+), 28 deletions(-) diff --git a/client/analytics/settings/setting.scss b/client/analytics/settings/setting.scss index ca40cf9d6af..b3a89f93ca6 100644 --- a/client/analytics/settings/setting.scss +++ b/client/analytics/settings/setting.scss @@ -1,5 +1,3 @@ - - .woocommerce-setting { display: flex; margin-bottom: $gap-large; @@ -9,7 +7,7 @@ } .woocommerce-setting__label { - @include font-size(16); + @include font-size( 16 ); margin-bottom: $gap; padding-right: $gap; font-weight: bold; @@ -62,5 +60,5 @@ .woocommerce-setting__help { font-style: italic; - color: $core-grey-dark-300; + color: $gray-700; } diff --git a/client/dashboard/style.scss b/client/dashboard/style.scss index 001d5434a23..c6c0285b6ca 100644 --- a/client/dashboard/style.scss +++ b/client/dashboard/style.scss @@ -68,7 +68,7 @@ } .woocommerce-dashboard-section__add-more-btn-title { - color: $core-grey-dark-300; + color: $gray-700; padding-top: 8px; } diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index 9e708071ffa..03f33138296 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -58,7 +58,7 @@ } .woocommerce-activity-card__date { - color: $core-grey-dark-300; + color: $gray-700; text-transform: uppercase; @include font-size( 11 ); margin-bottom: $gap-small; diff --git a/client/header/activity-panel/style.scss b/client/header/activity-panel/style.scss index aedcdc50052..4a91db77966 100644 --- a/client/header/activity-panel/style.scss +++ b/client/header/activity-panel/style.scss @@ -142,8 +142,7 @@ &:focus, &.components-button:not(:disabled):not([aria-disabled='true']):focus { - box-shadow: inset -1px -1px 0 $core-grey-dark-300, - inset 1px 1px 0 $core-grey-dark-300; + box-shadow: inset -1px -1px 0 $gray-700, inset 1px 1px 0 $gray-700; } } } diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 6347b6a1c9f..bf45850d866 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -3,7 +3,6 @@ $transparent: rgba(255, 255, 255, 0); // Greys -$core-grey-dark-300: #6c7781; // This & below have 4.5+ contrast against white $core-grey-dark-400: #606a73; $core-grey-dark-500: #555d66; $core-grey-dark-600: #40464d; diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index 9c4b3553f9b..9650844a5e8 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -120,7 +120,7 @@ left: 10px; path { - fill: $core-grey-dark-300; + fill: $gray-700; } } @@ -134,7 +134,7 @@ &.is-empty { .dashicons-calendar path { - fill: $core-grey-dark-300; + fill: $gray-700; } } @@ -162,7 +162,7 @@ @include font-size( 13 ); &::placeholder { - color: $core-grey-dark-300; + color: $gray-700; } } } @@ -220,7 +220,7 @@ font-weight: 100; text-transform: uppercase; text-align: center; - color: $core-grey-dark-300; + color: $gray-700; width: 100%; margin: 0; padding: 1em; diff --git a/packages/components/src/chart/d3chart/style.scss b/packages/components/src/chart/d3chart/style.scss index fe1ba9f9e9b..c53e1888468 100644 --- a/packages/components/src/chart/d3chart/style.scss +++ b/packages/components/src/chart/d3chart/style.scss @@ -18,7 +18,7 @@ .d3-chart__empty-message { align-items: center; bottom: 0; - color: $core-grey-dark-300; + color: $gray-700; display: flex; @include font-size( 18 ); font-weight: bold; @@ -68,7 +68,7 @@ width: 100%; text-transform: uppercase; font-size: 11px; - color: $core-grey-dark-300; + color: $gray-700; margin-top: 0; } diff --git a/packages/components/src/date-range-filter-picker/style.scss b/packages/components/src/date-range-filter-picker/style.scss index 53ff85864e9..e82d9a4c524 100644 --- a/packages/components/src/date-range-filter-picker/style.scss +++ b/packages/components/src/date-range-filter-picker/style.scss @@ -45,7 +45,7 @@ font-weight: 100; text-transform: uppercase; text-align: center; - color: $core-grey-dark-300; + color: $gray-700; width: 100%; margin: 0; padding: 1em; diff --git a/packages/components/src/ellipsis-menu/style.scss b/packages/components/src/ellipsis-menu/style.scss index 57029872948..5e8d817218b 100644 --- a/packages/components/src/ellipsis-menu/style.scss +++ b/packages/components/src/ellipsis-menu/style.scss @@ -1,4 +1,3 @@ - .woocommerce-ellipsis-menu { text-align: center; } @@ -37,7 +36,7 @@ .woocommerce-ellipsis-menu__item { cursor: pointer; - color: $core-grey-dark-300; + color: $gray-700; &:focus { box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px $studio-white; diff --git a/packages/components/src/pagination/style.scss b/packages/components/src/pagination/style.scss index 15c236447e5..339541a5047 100644 --- a/packages/components/src/pagination/style.scss +++ b/packages/components/src/pagination/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-pagination { display: flex; flex-direction: row; @@ -36,7 +34,7 @@ } .components-button:not(:disabled):not([aria-disabled='true']):hover { - color: $core-grey-dark-300; + color: $gray-700; } button:first-child { diff --git a/packages/components/src/search-list-control/style.scss b/packages/components/src/search-list-control/style.scss index 391fbadcb14..bd40a3c6f5f 100644 --- a/packages/components/src/search-list-control/style.scss +++ b/packages/components/src/search-list-control/style.scss @@ -148,7 +148,7 @@ .woocommerce-search-list__item-prefix { display: none; - color: $core-grey-dark-300; + color: $gray-700; } &.is-searching, @@ -181,7 +181,7 @@ border-radius: 12px; font-size: 0.8em; line-height: 1.4; - color: $core-grey-dark-300; + color: $gray-700; background: $studio-white; white-space: nowrap; } diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss index 343f60b3278..e1efb72d45d 100644 --- a/packages/components/src/summary/style.scss +++ b/packages/components/src/summary/style.scss @@ -283,15 +283,13 @@ $border: $gray-100; &:focus { // !important to override button styles - box-shadow: inset -1px -1px 0 $core-grey-dark-300, - inset 1px 1px 0 $core-grey-dark-300 !important; + box-shadow: inset -1px -1px 0 $gray-700, inset 1px 1px 0 $gray-700 !important; } &.is-selected { &:focus { // !important to override button styles - box-shadow: inset -1px 1px 0 $core-grey-dark-300, - inset 1px 0 0 $core-grey-dark-300, + box-shadow: inset -1px 1px 0 $gray-700, inset 1px 0 0 $gray-700, inset 0 -4px 0 var(--wp-admin-theme-color) !important; } } diff --git a/packages/components/src/table/style.scss b/packages/components/src/table/style.scss index 3e0f64702c3..55ec17c304b 100644 --- a/packages/components/src/table/style.scss +++ b/packages/components/src/table/style.scss @@ -178,7 +178,7 @@ .woocommerce-table__empty-item { text-align: center; @include font-size( 18 ); - color: $core-grey-dark-300; + color: $gray-700; font-weight: bold; @include breakpoint( '<782px' ) { From daaa7128d92357da46058189eede4b52854deffb Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 13:53:19 +1200 Subject: [PATCH 22/36] Remove core-grey-dark-600 --- client/stylesheets/abstracts/_colors.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index bf45850d866..1c9eec6a284 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -5,7 +5,6 @@ $transparent: rgba(255, 255, 255, 0); // Greys $core-grey-dark-400: #606a73; $core-grey-dark-500: #555d66; -$core-grey-dark-600: #40464d; $core-grey-dark-700: #32373c; $core-grey-dark-800: #23282d; $core-form-grey: #7e8993; // WP 5.3 form input border From f1ed3f72ed4408786891173ded8ddf24793856d8 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 13:55:18 +1200 Subject: [PATCH 23/36] Replace core-grey-dark-400 with gray-700 --- client/stylesheets/abstracts/_colors.scss | 10 +++++++++- packages/components/src/calendar/style.scss | 8 ++++---- packages/components/src/filters/style.scss | 2 +- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 1c9eec6a284..1cfa342701d 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -2,8 +2,16 @@ $transparent: rgba(255, 255, 255, 0); +$transparent: rgba(255, 255, 255, 0); +$black: #000; // Use only when you truly need pure black. For UI, use $gray-900. +$gray-900: #1e1e1e; +$gray-700: #757575; // Meets 4.6:1 text contrast against white. +$gray-600: #949494; // Meets 3:1 UI or large text contrast against white. +$gray-400: #ccc; +$gray-200: #ddd; // Used for most borders. +$gray-100: #f0f0f0; + // Greys -$core-grey-dark-400: #606a73; $core-grey-dark-500: #555d66; $core-grey-dark-700: #32373c; $core-grey-dark-800: #23282d; diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index 9650844a5e8..632db79d8dd 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -64,7 +64,7 @@ } .DayPicker_weekHeader_li { - color: $core-grey-dark-400; + color: $gray-700; } .DayPickerNavigation_button { @@ -188,7 +188,7 @@ } .components-popover__content { - background-color: $core-grey-dark-400; + background-color: $gray-700; color: $studio-white; padding: 0.5em; border: none; @@ -202,13 +202,13 @@ } &:not(.no-arrow):not(.is-mobile).is-bottom::before { - border-bottom-color: $core-grey-dark-400; + border-bottom-color: $gray-700; z-index: 1; top: -6px; } &:not(.no-arrow):not(.is-mobile).is-top::after { - border-top-color: $core-grey-dark-400; + border-top-color: $gray-700; z-index: 1; top: 0; } diff --git a/packages/components/src/filters/style.scss b/packages/components/src/filters/style.scss index 3a493cd7cdd..b1afc4fb117 100644 --- a/packages/components/src/filters/style.scss +++ b/packages/components/src/filters/style.scss @@ -71,7 +71,7 @@ } .woocommerce-calendar__input-error .components-popover__content { - background-color: $core-grey-dark-400; + background-color: $gray-700; } &.is-mobile { From 377798c18d74ecb381c1be366bf9a8b59591bb9c Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 13:58:53 +1200 Subject: [PATCH 24/36] Replace core-grey-dark-500 with gray-700. --- client/analytics/settings/setting.scss | 2 +- client/dashboard/style.scss | 2 +- .../header/activity-panel/activity-card/style.scss | 6 +++--- client/header/activity-panel/style.scss | 2 +- client/layout/store-alerts/style.scss | 3 +-- .../marketing/components/knowledge-base/style.scss | 5 ++--- .../components/recommended-extensions/style.scss | 2 +- .../overview/installed-extensions/style.scss | 2 +- client/stylesheets/abstracts/_colors.scss | 12 +----------- packages/components/src/advanced-filters/style.scss | 4 ++-- packages/components/src/calendar/style.scss | 2 +- packages/components/src/chart/d3chart/legend.scss | 4 ++-- packages/components/src/chart/d3chart/style.scss | 4 ++-- packages/components/src/chart/style.scss | 2 +- packages/components/src/dropdown-button/style.scss | 2 +- packages/components/src/filter-picker/style.scss | 6 +++--- packages/components/src/rating/style.scss | 2 +- .../components/src/search-list-control/style.scss | 2 +- .../components/src/segmented-selection/style.scss | 2 +- packages/components/src/table/style.scss | 2 +- packages/components/src/tag/style.scss | 4 ++-- 21 files changed, 30 insertions(+), 42 deletions(-) diff --git a/client/analytics/settings/setting.scss b/client/analytics/settings/setting.scss index b3a89f93ca6..a779428f138 100644 --- a/client/analytics/settings/setting.scss +++ b/client/analytics/settings/setting.scss @@ -31,7 +31,7 @@ width: 100%; display: block; margin-bottom: $gap-small; - color: $core-grey-dark-500; + color: $gray-700; } .woocommerce-filters-filter label { diff --git a/client/dashboard/style.scss b/client/dashboard/style.scss index c6c0285b6ca..5ed76413d9d 100644 --- a/client/dashboard/style.scss +++ b/client/dashboard/style.scss @@ -42,7 +42,7 @@ } > button svg { - fill: $core-grey-dark-500; + fill: $gray-700; } } diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index 03f33138296..7e6fd15fa70 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -305,7 +305,7 @@ width: 60px; &.is-placeholder::before { - background-color: $core-grey-dark-500; + background-color: $gray-700; border-radius: 50%; content: ''; position: absolute; @@ -328,7 +328,7 @@ .woocommerce-stock-activity-card__stock-quantity { background: $gray-100; - color: $core-grey-dark-500; + color: $gray-700; padding: 3px $gap-smaller; border-radius: 3px; } @@ -365,7 +365,7 @@ } .woocommerce-activity-card__subtitle { - color: $core-grey-dark-500; + color: $gray-700; @include font-size( 12 ); } } diff --git a/client/header/activity-panel/style.scss b/client/header/activity-panel/style.scss index 4a91db77966..2ccbcdd72c1 100644 --- a/client/header/activity-panel/style.scss +++ b/client/header/activity-panel/style.scss @@ -76,7 +76,7 @@ min-width: 80px; width: 100%; height: $header-height; - color: $core-grey-dark-500; + color: $gray-700; &::before { background-color: var(--wp-admin-theme-color); diff --git a/client/layout/store-alerts/style.scss b/client/layout/store-alerts/style.scss index c0fc64d40bb..32f7b8639e6 100644 --- a/client/layout/store-alerts/style.scss +++ b/client/layout/store-alerts/style.scss @@ -1,4 +1,3 @@ - .woocommerce-store-alerts { position: relative; margin: 0 0 $gap-largest 0; @@ -51,7 +50,7 @@ } &.is-button { - color: $core-grey-dark-500; + color: $gray-700; } } diff --git a/client/marketing/components/knowledge-base/style.scss b/client/marketing/components/knowledge-base/style.scss index 62881a206df..aa3085b5d6f 100644 --- a/client/marketing/components/knowledge-base/style.scss +++ b/client/marketing/components/knowledge-base/style.scss @@ -1,5 +1,4 @@ .woocommerce-marketing-knowledgebase-card { - .woocommerce-marketing-slider { margin: 0 0 14px; } @@ -80,7 +79,7 @@ &-text { margin: 10px 0 0; - @include breakpoint('>960px') { + @include breakpoint( '>960px' ) { margin: 0; } } @@ -108,7 +107,7 @@ align-items: center; font-size: 12px; line-height: 17px; - color: $core-grey-dark-500; + color: $gray-700; margin: 0; padding: 0; height: 17px; diff --git a/client/marketing/components/recommended-extensions/style.scss b/client/marketing/components/recommended-extensions/style.scss index 355a6486c10..2bf658f0d27 100644 --- a/client/marketing/components/recommended-extensions/style.scss +++ b/client/marketing/components/recommended-extensions/style.scss @@ -54,7 +54,7 @@ } p { - color: $core-grey-dark-500; + color: $gray-700; margin: 0; } diff --git a/client/marketing/overview/installed-extensions/style.scss b/client/marketing/overview/installed-extensions/style.scss index d133b76ad11..8b112d87374 100644 --- a/client/marketing/overview/installed-extensions/style.scss +++ b/client/marketing/overview/installed-extensions/style.scss @@ -16,7 +16,7 @@ } p { - color: $core-grey-dark-500; + color: $gray-700; margin: 0; } } diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 1cfa342701d..fe2c9437025 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -2,22 +2,12 @@ $transparent: rgba(255, 255, 255, 0); -$transparent: rgba(255, 255, 255, 0); -$black: #000; // Use only when you truly need pure black. For UI, use $gray-900. -$gray-900: #1e1e1e; -$gray-700: #757575; // Meets 4.6:1 text contrast against white. -$gray-600: #949494; // Meets 3:1 UI or large text contrast against white. -$gray-400: #ccc; -$gray-200: #ddd; // Used for most borders. -$gray-100: #f0f0f0; - // Greys -$core-grey-dark-500: #555d66; $core-grey-dark-700: #32373c; $core-grey-dark-800: #23282d; $core-form-grey: #7e8993; // WP 5.3 form input border -$gray-text: $core-grey-dark-500; +$gray-text: $gray-700; $gray-text-hover: $core-grey-dark-800; // Gutenberg diff --git a/packages/components/src/advanced-filters/style.scss b/packages/components/src/advanced-filters/style.scss index 065a945f494..0e8a1115651 100644 --- a/packages/components/src/advanced-filters/style.scss +++ b/packages/components/src/advanced-filters/style.scss @@ -62,7 +62,7 @@ width: 40px; height: 38px; align-self: center; - color: $core-grey-dark-500; + color: $gray-700; padding: $gap-smaller; @include breakpoint( '<400px' ) { @@ -169,7 +169,7 @@ .woocommerce-filters-advanced__add-button { align-items: center; - color: $core-grey-dark-500; + color: $gray-700; padding: $gap-smaller; svg { diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index 632db79d8dd..b105fed897c 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -155,7 +155,7 @@ } .woocommerce-calendar__input-text { - color: $core-grey-dark-500; + color: $gray-700; border-radius: 3px; padding: 10px 10px 10px 30px; width: 100%; diff --git a/packages/components/src/chart/d3chart/legend.scss b/packages/components/src/chart/d3chart/legend.scss index 20e509c79ae..d76dcef27e2 100644 --- a/packages/components/src/chart/d3chart/legend.scss +++ b/packages/components/src/chart/d3chart/legend.scss @@ -54,7 +54,7 @@ justify-content: center; align-items: center; background-color: $studio-white; - color: $core-grey-dark-500; + color: $gray-700; cursor: pointer; display: inline-flex; flex-direction: row; @@ -190,7 +190,7 @@ background: $studio-white; border-top: 1px solid $gray-400; bottom: 0; - color: $core-grey-dark-500; + color: $gray-700; display: flex; height: 50px; justify-content: center; diff --git a/packages/components/src/chart/d3chart/style.scss b/packages/components/src/chart/d3chart/style.scss index c53e1888468..4eb8d42451f 100644 --- a/packages/components/src/chart/d3chart/style.scss +++ b/packages/components/src/chart/d3chart/style.scss @@ -127,7 +127,7 @@ &:first-child { line { - stroke: $core-grey-dark-500; + stroke: $gray-700; } } } @@ -143,7 +143,7 @@ text-anchor: start; &.tick { &text { - fill: $core-grey-dark-500; + fill: $gray-700; } } } diff --git a/packages/components/src/chart/style.scss b/packages/components/src/chart/style.scss index 4d38ae25669..b4ed6f4ce8d 100644 --- a/packages/components/src/chart/style.scss +++ b/packages/components/src/chart/style.scss @@ -107,7 +107,7 @@ padding: 8px; &.woocommerce-chart__type-button-selected { - color: $core-grey-dark-500; + color: $gray-700; } } } diff --git a/packages/components/src/dropdown-button/style.scss b/packages/components/src/dropdown-button/style.scss index 8f45315243f..a2aa8a7158c 100644 --- a/packages/components/src/dropdown-button/style.scss +++ b/packages/components/src/dropdown-button/style.scss @@ -2,7 +2,7 @@ background-color: $studio-white; position: relative; border: 1px solid $gray-100; - color: $core-grey-dark-500; + color: $gray-700; border-radius: 4px; padding: 0 40px 0 0; width: 100%; diff --git a/packages/components/src/filter-picker/style.scss b/packages/components/src/filter-picker/style.scss index 73c71d850cd..1b34bd36205 100644 --- a/packages/components/src/filter-picker/style.scss +++ b/packages/components/src/filter-picker/style.scss @@ -5,7 +5,7 @@ font-weight: 100; text-transform: uppercase; text-align: center; - color: $core-grey-dark-500; + color: $gray-700; } .woocommerce-filters-filter__content-list-item:last-child { @@ -60,12 +60,12 @@ text-align: left; &.components-button { - color: $core-grey-dark-500; + color: $gray-700; } &:hover { background-color: $gray-200; - color: $core-grey-dark-500; + color: $gray-700; } &.components-button:not(:disabled):not([aria-disabled='true']):focus { diff --git a/packages/components/src/rating/style.scss b/packages/components/src/rating/style.scss index fb70439dd87..3fc2ac4715d 100644 --- a/packages/components/src/rating/style.scss +++ b/packages/components/src/rating/style.scss @@ -17,7 +17,7 @@ overflow: hidden; .gridicon { - fill: $core-grey-dark-500; + fill: $gray-700; } } } diff --git a/packages/components/src/search-list-control/style.scss b/packages/components/src/search-list-control/style.scss index bd40a3c6f5f..3863f1848b6 100644 --- a/packages/components/src/search-list-control/style.scss +++ b/packages/components/src/search-list-control/style.scss @@ -90,7 +90,7 @@ background: $studio-white; // !important to keep the border around on hover border-bottom: 1px solid $gray-100 !important; - color: $core-grey-dark-500; + color: $gray-700; @include hover-state { background: $gray-100; diff --git a/packages/components/src/segmented-selection/style.scss b/packages/components/src/segmented-selection/style.scss index ab5e6dbfbaa..f6f62c0125c 100644 --- a/packages/components/src/segmented-selection/style.scss +++ b/packages/components/src/segmented-selection/style.scss @@ -1,6 +1,6 @@ .woocommerce-segmented-selection { width: 100%; - color: $core-grey-dark-500; + color: $gray-700; } .woocommerce-segmented-selection__container { diff --git a/packages/components/src/table/style.scss b/packages/components/src/table/style.scss index 55ec17c304b..364738bf80e 100644 --- a/packages/components/src/table/style.scss +++ b/packages/components/src/table/style.scss @@ -19,7 +19,7 @@ &.is-empty { align-items: center; background: $gray-100; - color: $core-grey-dark-500; + color: $gray-700; display: flex; // Default to 5 rows for browsers not supporting custom properties (IE11) height: calc(#{$header-row-height} + ( #{$row-height} ) * 5); diff --git a/packages/components/src/tag/style.scss b/packages/components/src/tag/style.scss index acae205d4d2..4a0e2f5ba50 100644 --- a/packages/components/src/tag/style.scss +++ b/packages/components/src/tag/style.scss @@ -16,7 +16,7 @@ align-self: center; padding: 0 $gap-smaller; border-radius: 12px; - color: $core-grey-dark-500; + color: $gray-700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -31,7 +31,7 @@ cursor: pointer; padding: 0 2px; border-radius: 0 12px 12px 0; - color: $core-grey-dark-500; + color: $gray-700; line-height: 10px; text-indent: 0; height: 24px; From 9eb67fe99f75e39c43063ec2f3138082c16e8ce6 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 14:00:51 +1200 Subject: [PATCH 25/36] Replace core-grey-dark-700 with gray-900. --- client/header/activity-panel/style.scss | 2 +- client/stylesheets/abstracts/_colors.scss | 1 - client/stylesheets/shared/_global.scss | 8 +++----- client/task-list/style.scss | 2 +- packages/components/src/tag/style.scss | 2 +- 5 files changed, 6 insertions(+), 9 deletions(-) diff --git a/client/header/activity-panel/style.scss b/client/header/activity-panel/style.scss index 2ccbcdd72c1..45a60d7ee70 100644 --- a/client/header/activity-panel/style.scss +++ b/client/header/activity-panel/style.scss @@ -93,7 +93,7 @@ } &.is-active { - color: $core-grey-dark-700; + color: $gray-900; box-shadow: none; &::before { diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index fe2c9437025..0ded8228630 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -3,7 +3,6 @@ $transparent: rgba(255, 255, 255, 0); // Greys -$core-grey-dark-700: #32373c; $core-grey-dark-800: #23282d; $core-form-grey: #7e8993; // WP 5.3 form input border diff --git a/client/stylesheets/shared/_global.scss b/client/stylesheets/shared/_global.scss index d51cbf903bf..c48b731c953 100644 --- a/client/stylesheets/shared/_global.scss +++ b/client/stylesheets/shared/_global.scss @@ -1,16 +1,14 @@ - - // By using CSS variables, we can switch the spacing rhythm using a single media query. :root { --large-gap: 40px; --main-gap: 24px; } -@media (max-width: 960px) { +@media ( max-width: 960px ) { :root { --large-gap: 24px; } } -@media (max-width: 782px) { +@media ( max-width: 782px ) { :root { --large-gap: 16px; --main-gap: 16px; @@ -32,7 +30,7 @@ .woocommerce-layout { select:hover { - color: $core-grey-dark-700; + color: $gray-900; } select.components-select-control__input { diff --git a/client/task-list/style.scss b/client/task-list/style.scss index ef7e5c9c549..a2c2bb37338 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -469,7 +469,7 @@ } .woocommerce-task-card__prompt-pointer { - border-bottom: 10px solid $core-grey-dark-700; /* Snackbar color */ + border-bottom: 10px solid $gray-900; /* Snackbar color */ border-left: 10px solid transparent; border-right: 10px solid transparent; position: relative; diff --git a/packages/components/src/tag/style.scss b/packages/components/src/tag/style.scss index 4a0e2f5ba50..5258a069099 100644 --- a/packages/components/src/tag/style.scss +++ b/packages/components/src/tag/style.scss @@ -37,7 +37,7 @@ height: 24px; &:hover { - color: $core-grey-dark-700; + color: $gray-900; } } } From dd0cde1a31008c0eeb3ce3238ca1cbe68580e14a Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 14:02:48 +1200 Subject: [PATCH 26/36] Replace core-grey-dark-800 with gray-900. --- client/devdocs/style.scss | 10 +++++----- .../components/knowledge-base/style.scss | 2 +- .../recommended-extensions/style.scss | 4 ++-- .../overview/installed-extensions/style.scss | 2 +- client/navigation/style.scss | 19 +++++++++++++++++++ client/stylesheets/abstracts/_colors.scss | 3 +-- client/task-list/style.scss | 8 ++++---- .../components/src/ellipsis-menu/style.scss | 2 +- 8 files changed, 34 insertions(+), 16 deletions(-) create mode 100644 client/navigation/style.scss diff --git a/client/devdocs/style.scss b/client/devdocs/style.scss index 460c43af1d5..4a0cba7cf75 100644 --- a/client/devdocs/style.scss +++ b/client/devdocs/style.scss @@ -25,13 +25,13 @@ .woocommerce-devdocs__example { padding: $gap; - box-shadow: inset 0 2px 1px rgba($core-grey-dark-800, 0.075); + box-shadow: inset 0 2px 1px rgba($gray-900, 0.075); // Grid background - background-image: linear-gradient(rgba($core-grey-dark-800, 0.05) 1px, transparent 1px), - linear-gradient(90deg, rgba($core-grey-dark-800, 0.05) 1px, transparent 1px), - linear-gradient(rgba($core-grey-dark-800, 0.025) 1px, transparent 1px), - linear-gradient(90deg, rgba($core-grey-dark-800, 0.025) 1px, transparent 1px); + background-image: linear-gradient(rgba($gray-900, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba($gray-900, 0.05) 1px, transparent 1px), + linear-gradient(rgba($gray-900, 0.025) 1px, transparent 1px), + linear-gradient(90deg, rgba($gray-900, 0.025) 1px, transparent 1px); background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px; background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px; diff --git a/client/marketing/components/knowledge-base/style.scss b/client/marketing/components/knowledge-base/style.scss index aa3085b5d6f..f2716c4b479 100644 --- a/client/marketing/components/knowledge-base/style.scss +++ b/client/marketing/components/knowledge-base/style.scss @@ -91,7 +91,7 @@ line-height: 24px; font-weight: 600; white-space: normal; - color: $core-grey-dark-800; + color: $gray-900; transition: color 0.2s ease; } diff --git a/client/marketing/components/recommended-extensions/style.scss b/client/marketing/components/recommended-extensions/style.scss index 2bf658f0d27..2b7cd26fd9c 100644 --- a/client/marketing/components/recommended-extensions/style.scss +++ b/client/marketing/components/recommended-extensions/style.scss @@ -46,8 +46,8 @@ position: relative; h4 { - color: $core-grey-dark-800; - margin: -2px 0 ($gap-smallest - 1); + color: $gray-900; + margin: -2px 0 ( $gap-smallest - 1 ); font-size: 16px; line-height: 1.3; transition: color 0.2s ease; diff --git a/client/marketing/overview/installed-extensions/style.scss b/client/marketing/overview/installed-extensions/style.scss index 8b112d87374..0095b64d7db 100644 --- a/client/marketing/overview/installed-extensions/style.scss +++ b/client/marketing/overview/installed-extensions/style.scss @@ -12,7 +12,7 @@ font-weight: 400; font-size: 16px; margin: 0 0 5px; - color: $core-grey-dark-800; + color: $gray-900; } p { diff --git a/client/navigation/style.scss b/client/navigation/style.scss new file mode 100644 index 00000000000..2b2de3b5b01 --- /dev/null +++ b/client/navigation/style.scss @@ -0,0 +1,19 @@ +.woocommerce-navigation { + position: fixed; + top: $admin-bar-height; + left: 0; + width: 160px; + height: 100%; + background: $gray-900; +} + +.woocommerce-navigation__menu-item { + padding: $gap-smaller 0; +} + +.has-woocommerce-navigation { + #adminmenuwrap, + #adminmenuback { + display: none !important; + } +} diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 0ded8228630..bf9fbe0b840 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -3,11 +3,10 @@ $transparent: rgba(255, 255, 255, 0); // Greys -$core-grey-dark-800: #23282d; $core-form-grey: #7e8993; // WP 5.3 form input border $gray-text: $gray-700; -$gray-text-hover: $core-grey-dark-800; +$gray-text-hover: $gray-900; // Gutenberg $button-hover: #fafafa; diff --git a/client/task-list/style.scss b/client/task-list/style.scss index a2c2bb37338..234bd6253dd 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -8,7 +8,7 @@ .components-card__header.is-size-medium { padding-top: 0; } - .woocommerce-list__item:not( .is-complete ) { + .woocommerce-list__item:not(.is-complete) { .woocommerce-task__icon { border: 1px solid $gray-100; background: $white; @@ -58,7 +58,7 @@ } .components-modal__screen-overlay { - background: rgba( 43, 45, 47, 0.4 ); + background: rgba(43, 45, 47, 0.4); } .components-modal__frame { @@ -265,7 +265,7 @@ .woocommerce-task-payment__recommended-ribbon { position: absolute; - transform: rotate( -45deg ) translate( -50%, -50% ); + transform: rotate(-45deg) translate(-50%, -50%); background: $studio-gray-80; color: $studio-white; font-size: 11px; @@ -587,7 +587,7 @@ } .woocommerce-task-dashboard__container - .woocommerce-task-card__progress-bar.completed { +.woocommerce-task-card__progress-bar.completed { &::-webkit-progress-value { border-top-right-radius: 2px; } diff --git a/packages/components/src/ellipsis-menu/style.scss b/packages/components/src/ellipsis-menu/style.scss index 5e8d817218b..849f7060a02 100644 --- a/packages/components/src/ellipsis-menu/style.scss +++ b/packages/components/src/ellipsis-menu/style.scss @@ -51,7 +51,7 @@ .components-base-control__label, .woocommerce-ellipsis-menu__title { - color: $core-grey-dark-800; + color: $gray-900; padding-top: $gap-smaller; padding-bottom: $gap-smaller; @include font-size( 15 ); From e8ffc35b6460b284afef18a847417a11d1d9073c Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 14:05:15 +1200 Subject: [PATCH 27/36] Replace core-form-grey with gray-700 --- client/stylesheets/abstracts/_colors.scss | 3 --- packages/components/src/dropdown-button/style.scss | 2 +- packages/components/src/search/style.scss | 2 +- packages/components/src/text-control-with-affixes/style.scss | 2 +- 4 files changed, 3 insertions(+), 6 deletions(-) diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index bf9fbe0b840..aec5f98f5aa 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -2,9 +2,6 @@ $transparent: rgba(255, 255, 255, 0); -// Greys -$core-form-grey: #7e8993; // WP 5.3 form input border - $gray-text: $gray-700; $gray-text-hover: $gray-900; diff --git a/packages/components/src/dropdown-button/style.scss b/packages/components/src/dropdown-button/style.scss index a2aa8a7158c..88f8a89329d 100644 --- a/packages/components/src/dropdown-button/style.scss +++ b/packages/components/src/dropdown-button/style.scss @@ -37,7 +37,7 @@ } &:not(:focus):not(.is-open) { - border-color: $core-form-grey; + border-color: $gray-700; } } diff --git a/packages/components/src/search/style.scss b/packages/components/src/search/style.scss index ff85a88cbd0..324f128622c 100644 --- a/packages/components/src/search/style.scss +++ b/packages/components/src/search/style.scss @@ -22,7 +22,7 @@ width: 100%; padding: 3px 2px 3px 36px; border-radius: 4px; - border-color: $core-form-grey; + border-color: $gray-700; box-shadow: $shadow-popover; &.is-active { diff --git a/packages/components/src/text-control-with-affixes/style.scss b/packages/components/src/text-control-with-affixes/style.scss index 69e864a7c5c..86428fc36e5 100644 --- a/packages/components/src/text-control-with-affixes/style.scss +++ b/packages/components/src/text-control-with-affixes/style.scss @@ -37,7 +37,7 @@ background: $studio-white; border-width: 1px; border-style: solid; - border-color: $core-form-grey; + border-color: $gray-700; color: $gray-text; padding: 7px 14px; white-space: nowrap; From ad216ddde79aaf814c1c9259bfd86136a15cda7f Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 14:57:00 +1200 Subject: [PATCH 28/36] Fix packages build, adjust greys to match look better. --- client/header/activity-panel/activity-card/style.scss | 2 +- client/marketing/overview/welcome-card/style.scss | 2 +- client/stylesheets/abstracts/_colors.scss | 1 + client/stylesheets/abstracts/_variables.scss | 2 ++ 4 files changed, 5 insertions(+), 2 deletions(-) diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index 7e6fd15fa70..08ae095389c 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -35,7 +35,7 @@ .woocommerce-activity-card__icon { grid-area: icon; - fill: $gray-200; + fill: $gray-400; } .woocommerce-activity-card__header { diff --git a/client/marketing/overview/welcome-card/style.scss b/client/marketing/overview/welcome-card/style.scss index 043f944c451..277743b630d 100644 --- a/client/marketing/overview/welcome-card/style.scss +++ b/client/marketing/overview/welcome-card/style.scss @@ -26,7 +26,7 @@ background: none; color: $gray-700; overflow: hidden; - border-radius: $radius-round-rectangle; + border-radius: 4px; position: absolute; top: 10px; right: 10px; diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index aec5f98f5aa..6918d612cdd 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -1,4 +1,5 @@ @import 'node_modules/@automattic/color-studio/dist/color-variables.scss'; +@import 'node_modules/@wordpress/base-styles/colors'; $transparent: rgba(255, 255, 255, 0); diff --git a/client/stylesheets/abstracts/_variables.scss b/client/stylesheets/abstracts/_variables.scss index ddeafb566dd..2d2724a471d 100644 --- a/client/stylesheets/abstracts/_variables.scss +++ b/client/stylesheets/abstracts/_variables.scss @@ -1,3 +1,5 @@ +@import 'node_modules/@automattic/color-studio/dist/color-variables.scss'; + // Import Gutenberg variables @import 'node_modules/@wordpress/base-styles/colors'; @import 'node_modules/@wordpress/base-styles/variables'; From 1b34ac17a6a23ca7cc91c9fa05b4d35f14cd4600 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 15:35:05 +1200 Subject: [PATCH 29/36] Revert a change that is conflicting with main. --- client/navigation/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/navigation/style.scss b/client/navigation/style.scss index 2b2de3b5b01..e628f3f2bf6 100644 --- a/client/navigation/style.scss +++ b/client/navigation/style.scss @@ -4,7 +4,7 @@ left: 0; width: 160px; height: 100%; - background: $gray-900; + background: $core-grey-dark-800; } .woocommerce-navigation__menu-item { From 6b801df3d30f2758e0d65be5cba7e363a9b9a11f Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 15:38:16 +1200 Subject: [PATCH 30/36] Bring back core-grey-dark-800 temp to avoid a conflict. --- client/stylesheets/abstracts/_variables.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/stylesheets/abstracts/_variables.scss b/client/stylesheets/abstracts/_variables.scss index 2d2724a471d..b99633b2e1d 100644 --- a/client/stylesheets/abstracts/_variables.scss +++ b/client/stylesheets/abstracts/_variables.scss @@ -10,6 +10,9 @@ @include wordpress-admin-schemes; +// TODO - remove this after the conflict with main is dealt with +$core-grey-dark-800: $gray-900; + $fallback-gutter: 24px; $fallback-gutter-large: 40px; $gutter: var(--main-gap); From bb1aaa37233a632a2348a8e3415fff342d0eb188 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 17:28:09 +1200 Subject: [PATCH 31/36] Move base-styles to deps from devDeps. --- package-lock.json | 3 +-- package.json | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 79db6880af6..68ad7d6f8fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6252,8 +6252,7 @@ "@wordpress/base-styles": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-2.0.0.tgz", - "integrity": "sha512-l0/j0+nVBvCtd/PFj/g6J2R8XuVLLRCNV2jSlnf0SPuswBZ2NYPvCLmf/OZ1Nw/c2O+Erdvq8IdYvXOObewqxQ==", - "dev": true + "integrity": "sha512-l0/j0+nVBvCtd/PFj/g6J2R8XuVLLRCNV2jSlnf0SPuswBZ2NYPvCLmf/OZ1Nw/c2O+Erdvq8IdYvXOObewqxQ==" }, "@wordpress/browserslist-config": { "version": "2.6.0", diff --git a/package.json b/package.json index 43efd0bf569..1809783efcf 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,7 @@ "dependencies": { "@fresh-data/framework": "0.6.1", "@wordpress/api-fetch": "2.2.8", + "@wordpress/base-styles": "2.0.0", "@wordpress/components": "10.0.0", "@wordpress/data": "4.16.1", "@wordpress/data-controls": "1.10.1", @@ -162,7 +163,6 @@ "@wordpress/babel-plugin-import-jsx-pragma": "1.1.3", "@wordpress/babel-plugin-makepot": "2.1.3", "@wordpress/babel-preset-default": "3.0.2", - "@wordpress/base-styles": "2.0.0", "@wordpress/browserslist-config": "2.6.0", "@wordpress/custom-templated-path-webpack-plugin": "1.6.0", "@wordpress/eslint-plugin": "3.4.1", From 868f5a8dc6c374afc5aaa54a433e2e1279860aec Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 10 Jul 2020 17:40:37 +1200 Subject: [PATCH 32/36] Try updating postcss-plugins-preset --- package-lock.json | 79 ++++++++++++++++++++++++++++++++++++++++------- package.json | 2 +- 2 files changed, 68 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 68ad7d6f8fe..139e2ce1827 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6701,23 +6701,17 @@ "integrity": "sha512-8Td9vWekCwZCPfWkVWKQllim/F/m0uN1cma3KkBsKxi0liftj/iXpDBDH6wDxsv8z1Gbwq+H9a4D6w7Ob8SqtQ==" }, "@wordpress/postcss-plugins-preset": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@wordpress/postcss-plugins-preset/-/postcss-plugins-preset-1.1.0.tgz", - "integrity": "sha512-NSduxM8oMI1oKfJ+mnnb5hwL126j+1FKhztcI856hJRf3cyLLDh1RG8WOWyMgFNxkHHB46SUnDh0jLDaCF5jhw==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@wordpress/postcss-plugins-preset/-/postcss-plugins-preset-1.3.0.tgz", + "integrity": "sha512-i4SEAsPN8NMxCUpECj41Yb0pmW5PjypwfNdtzzqke6YQisGlCcKO2AF6F+1HTDNXc7SbBJFP6UbvrY4db5hK4g==", "dev": true, "requires": { - "@wordpress/base-styles": "^1.10.0", - "@wordpress/postcss-themes": "^2.5.0", + "@wordpress/base-styles": "^2.0.0", + "@wordpress/postcss-themes": "^2.6.0", "autoprefixer": "^9.4.5", - "postcss-color-function": "^4.0.1" + "postcss-custom-properties": "^9.1.1" }, "dependencies": { - "@wordpress/base-styles": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-1.11.0.tgz", - "integrity": "sha512-CV7NsA0SzLGKFmhhTIhi6pWeijeSaBl16hwp+x7OcyQKy/MMbVx2gXsHf3KjGNY18FT1Uf2MlhcdIeBM22RpWQ==", - "dev": true - }, "@wordpress/postcss-themes": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@wordpress/postcss-themes/-/postcss-themes-2.6.0.tgz", @@ -16910,6 +16904,12 @@ "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=", "dev": true }, + "ip-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.1.0.tgz", + "integrity": "sha512-pKnZpbgCTfH/1NLIlOduP/V+WRXzC2MOz3Qo8xmxk8C5GudJLgK5QyLVXOSWy3ParAH7Eemurl3xjv/WXYFvMA==", + "dev": true + }, "ipaddr.js": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", @@ -17405,6 +17405,15 @@ "upper-case": "^1.1.0" } }, + "is-url-superb": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-3.0.0.tgz", + "integrity": "sha512-3faQP+wHCGDQT1qReM5zCPx2mxoal6DzbzquFlCYJLWyy4WPTved33ea2xFbX37z4NoriEwZGIYhFtx8RUB5wQ==", + "dev": true, + "requires": { + "url-regex": "^5.0.0" + } + }, "is-utf8": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", @@ -23319,6 +23328,16 @@ "postcss-value-parser": "^3.0.0" } }, + "postcss-custom-properties": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-9.1.1.tgz", + "integrity": "sha512-GVu+j7vwMTKUGhGXckYAFAAG5tTJUkSt8LuSyimtZdVVmdAEZYYqserkAgX8vwMhgGDPA4vJtWt7VgFxgiooDA==", + "dev": true, + "requires": { + "postcss": "^7.0.17", + "postcss-values-parser": "^3.0.5" + } + }, "postcss-discard-comments": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz", @@ -23861,6 +23880,26 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" }, + "postcss-values-parser": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-3.2.1.tgz", + "integrity": "sha512-SQ7/88VE9LhJh9gc27/hqnSU/aZaREVJcRVccXBmajgP2RkjdJzNyH/a9GCVMI5nsRhT0jC5HpUMwfkz81DVVg==", + "dev": true, + "requires": { + "color-name": "^1.1.4", + "is-url-superb": "^3.0.0", + "postcss": "^7.0.5", + "url-regex": "^5.0.0" + }, + "dependencies": { + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + } + } + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -28776,6 +28815,12 @@ "upper-case": "^1.0.3" } }, + "tlds": { + "version": "1.207.0", + "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz", + "integrity": "sha512-k7d7Q1LqjtAvhtEOs3yN14EabsNO8ZCoY6RESSJDB9lst3bTx3as/m1UuAeCKzYxiyhR1qq72ZPhpSf+qlqiwg==", + "dev": true + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -29760,6 +29805,16 @@ } } }, + "url-regex": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/url-regex/-/url-regex-5.0.0.tgz", + "integrity": "sha512-O08GjTiAFNsSlrUWfqF1jH0H1W3m35ZyadHrGv5krdnmPPoxP27oDTqux/579PtaroiSGm5yma6KT1mHFH6Y/g==", + "dev": true, + "requires": { + "ip-regex": "^4.1.0", + "tlds": "^1.203.0" + } + }, "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", diff --git a/package.json b/package.json index 1809783efcf..25a714be8fe 100644 --- a/package.json +++ b/package.json @@ -167,7 +167,7 @@ "@wordpress/custom-templated-path-webpack-plugin": "1.6.0", "@wordpress/eslint-plugin": "3.4.1", "@wordpress/jest-preset-default": "5.5.0", - "@wordpress/postcss-plugins-preset": "1.1.0", + "@wordpress/postcss-plugins-preset": "1.3.0", "@wordpress/postcss-themes": "1.0.5", "ast-types": "0.13.3", "autoprefixer": "9.8.4", From 35007f88b387f6e82d4ca1f63717e6cca24e00b5 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Tue, 14 Jul 2020 14:24:13 +1200 Subject: [PATCH 33/36] Adjustments to usage of gray where a direct replacement wasn't enough. These were made specifically to correct the look and feel of the inbox and activity card UI. --- client/header/activity-panel/activity-card/style.scss | 4 ++-- client/header/activity-panel/activity-header/style.scss | 2 +- client/header/activity-panel/panels/inbox/style.scss | 5 +++-- client/header/activity-panel/style.scss | 4 ++-- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index 08ae095389c..f4eef1e215e 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -35,7 +35,7 @@ .woocommerce-activity-card__icon { grid-area: icon; - fill: $gray-400; + fill: $gray-200; } .woocommerce-activity-card__header { @@ -371,7 +371,7 @@ } .woocommerce-empty-activity-card { - background: $gray-200; + background: $gray-100; margin: 20px; border-bottom: unset; } diff --git a/client/header/activity-panel/activity-header/style.scss b/client/header/activity-panel/activity-header/style.scss index 846eeed1956..c109187edbd 100644 --- a/client/header/activity-panel/activity-header/style.scss +++ b/client/header/activity-panel/activity-header/style.scss @@ -1,6 +1,6 @@ .woocommerce-layout__activity-panel-header { height: 50px; - background: $gray-100; + background: $gray-200; padding: 16px; display: flex; justify-content: space-between; diff --git a/client/header/activity-panel/panels/inbox/style.scss b/client/header/activity-panel/panels/inbox/style.scss index 711b0c639c5..057b3be5082 100644 --- a/client/header/activity-panel/panels/inbox/style.scss +++ b/client/header/activity-panel/panels/inbox/style.scss @@ -1,7 +1,8 @@ .woocommerce-inbox-message { position: relative; color: $gray-text; - background: $gray-200; + // background: $gray-100; + background: $light-gray-placeholder; border-radius: 2px; @include font-size( 13 ); margin: 0 0 $gap-large; @@ -115,7 +116,7 @@ .woocommerce-inbox-message__actions { padding-top: $gap; - border-top: 1px solid $gray-100; + border-top: 1px solid $gray-200; // Ensures any immediate child with a sibling has space between the items & > * + * { diff --git a/client/header/activity-panel/style.scss b/client/header/activity-panel/style.scss index 45a60d7ee70..38c72e02069 100644 --- a/client/header/activity-panel/style.scss +++ b/client/header/activity-panel/style.scss @@ -131,7 +131,7 @@ &:hover, &.components-button:not(:disabled):not([aria-disabled='true']):hover { - background-color: $gray-200; + background-color: $gray-100; box-shadow: none; &.has-unread::after, @@ -198,7 +198,7 @@ .woocommerce-layout__activity-panel-wrapper { height: calc(100vh - #{$header-height + $header-height + $adminbar-height-mobile}); - background: $gray-200; + background: $gray-100; width: 510px; @include breakpoint( '<782px' ) { width: 100%; From db83b7f93d3a459f3f15732442da9be6a04f465e Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Tue, 14 Jul 2020 16:27:36 +1200 Subject: [PATCH 34/36] Introduce an interim gray variable till the design can be refactored. --- client/dashboard/dashboard-charts/block.scss | 8 ++++---- client/dashboard/store-performance/style.scss | 2 +- client/header/activity-panel/panels/inbox/style.scss | 2 +- client/stylesheets/abstracts/_colors.scss | 3 +++ packages/components/src/calendar/style.scss | 4 ++-- packages/components/src/dropdown-button/style.scss | 4 ++-- packages/components/src/filter-picker/style.scss | 4 ++-- packages/components/src/filters/style.scss | 2 +- packages/components/src/segmented-selection/style.scss | 8 ++++---- packages/components/src/summary/style.scss | 6 +++--- packages/components/src/table/style.scss | 4 ++-- 11 files changed, 25 insertions(+), 22 deletions(-) diff --git a/client/dashboard/dashboard-charts/block.scss b/client/dashboard/dashboard-charts/block.scss index cef54d1e74f..d32be90af14 100644 --- a/client/dashboard/dashboard-charts/block.scss +++ b/client/dashboard/dashboard-charts/block.scss @@ -36,7 +36,7 @@ .woocommerce-legend__item > button { cursor: default; &:hover { - background: $gray-100; + background: $gray-50; } .woocommerce-legend__item-container { cursor: default; @@ -47,16 +47,16 @@ } &:hover { - background: $gray-100; + background: $gray-50; .woocommerce-legend__item > button { - background: $gray-100; + background: $gray-50; } } } } &:hover { - background: $gray-100; + background: $gray-50; } .screen-reader-text:focus { diff --git a/client/dashboard/store-performance/style.scss b/client/dashboard/store-performance/style.scss index f61cd86f6bc..ad0926856ce 100644 --- a/client/dashboard/store-performance/style.scss +++ b/client/dashboard/store-performance/style.scss @@ -28,7 +28,7 @@ background-color: $studio-white; &:hover { - background-color: $gray-200; + background-color: $gray-50; } &:active { diff --git a/client/header/activity-panel/panels/inbox/style.scss b/client/header/activity-panel/panels/inbox/style.scss index 057b3be5082..cccf4e600b9 100644 --- a/client/header/activity-panel/panels/inbox/style.scss +++ b/client/header/activity-panel/panels/inbox/style.scss @@ -2,7 +2,7 @@ position: relative; color: $gray-text; // background: $gray-100; - background: $light-gray-placeholder; + background: $gray-50; border-radius: 2px; @include font-size( 13 ); margin: 0 0 $gap-large; diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 6918d612cdd..4b3fe06d790 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -5,6 +5,9 @@ $transparent: rgba(255, 255, 255, 0); $gray-text: $gray-700; $gray-text-hover: $gray-900; +// Woocommerce needs one lighter shade of gray to work alongside the new set of grays exposed by @wordpress/base-styles. +// Removing this would require significant refactoring. +$gray-50: #f8f9f9; // Gutenberg $button-hover: #fafafa; diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index b105fed897c..6d9402243e2 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -1,6 +1,6 @@ .woocommerce-calendar { width: 100%; - background-color: $gray-100; + background-color: $gray-50; border-top: 1px solid $gray-400; height: 396px; @@ -60,7 +60,7 @@ .CalendarMonthGrid, .CalendarMonth, .DayPicker { - background-color: $gray-100; + background-color: $gray-50; } .DayPicker_weekHeader_li { diff --git a/packages/components/src/dropdown-button/style.scss b/packages/components/src/dropdown-button/style.scss index 88f8a89329d..cfe241a9cc0 100644 --- a/packages/components/src/dropdown-button/style.scss +++ b/packages/components/src/dropdown-button/style.scss @@ -1,7 +1,7 @@ .woocommerce-page .woocommerce-dropdown-button { background-color: $studio-white; position: relative; - border: 1px solid $gray-100; + border: 1px solid $gray-200; color: $gray-700; border-radius: 4px; padding: 0 40px 0 0; @@ -29,7 +29,7 @@ &:hover, &:active, &.is-open { - background-color: $gray-100; + background-color: $gray-50; } &.is-multi-line .woocommerce-dropdown-button__labels { diff --git a/packages/components/src/filter-picker/style.scss b/packages/components/src/filter-picker/style.scss index 1b34bd36205..0c43ca9254b 100644 --- a/packages/components/src/filter-picker/style.scss +++ b/packages/components/src/filter-picker/style.scss @@ -56,7 +56,7 @@ display: flex; width: 100%; padding: 1em 1em 1em 3em; - background-color: $gray-100; + background-color: $gray-50; text-align: left; &.components-button { @@ -64,7 +64,7 @@ } &:hover { - background-color: $gray-200; + background-color: $gray-100; color: $gray-700; } diff --git a/packages/components/src/filters/style.scss b/packages/components/src/filters/style.scss index b1afc4fb117..f0786993dd4 100644 --- a/packages/components/src/filters/style.scss +++ b/packages/components/src/filters/style.scss @@ -89,7 +89,7 @@ .woocommerce-filters__compare-body { padding: $gap; - background-color: $gray-100; + background-color: $gray-50; border-bottom: 1px solid $gray-100; } diff --git a/packages/components/src/segmented-selection/style.scss b/packages/components/src/segmented-selection/style.scss index f6f62c0125c..04485b30f63 100644 --- a/packages/components/src/segmented-selection/style.scss +++ b/packages/components/src/segmented-selection/style.scss @@ -28,18 +28,18 @@ } .woocommerce-segmented-selection__label { - background-color: $gray-100; + background-color: $gray-50; padding: $gap-small $gap-small $gap-small $gap-larger; position: relative; display: block; height: 100%; &:active { - background-color: $gray-200; + background-color: $gray-100; } &:hover { - background-color: $gray-200; + background-color: $gray-100; } } @@ -49,7 +49,7 @@ left: -9999px; &:active + label .woocommerce-segmented-selection__label { - background-color: $gray-200; + background-color: $gray-100; } &:checked + label .woocommerce-segmented-selection__label { diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss index e1efb72d45d..cc5c457e30e 100644 --- a/packages/components/src/summary/style.scss +++ b/packages/components/src/summary/style.scss @@ -259,7 +259,7 @@ $border: $gray-100; flex-direction: column; height: 100%; padding: $gap-large; - background-color: $gray-100; + background-color: $gray-50; border-bottom: 1px solid $border; border-right: 1px solid $border; line-height: 1.4em; @@ -273,7 +273,7 @@ $border: $gray-100; } &:hover { - background-color: $gray-100; + background-color: $gray-50; color: color(var(--wp-admin-theme-color-darker-20)); } @@ -325,7 +325,7 @@ $border: $gray-100; padding: 5px; border-radius: 3px; height: min-content; - background-color: $gray-400; + background-color: $gray-200; color: $gray-900; } diff --git a/packages/components/src/table/style.scss b/packages/components/src/table/style.scss index 364738bf80e..b39cd506bce 100644 --- a/packages/components/src/table/style.scss +++ b/packages/components/src/table/style.scss @@ -104,7 +104,7 @@ tr:hover, tr:focus-within { - background-color: $gray-200; + background-color: $gray-100; td, th { background: transparent; @@ -161,7 +161,7 @@ } &.is-sorted { - background-color: $gray-100; + background-color: $gray-50; } &.is-checkbox-column { From 61ff3154cc8cf0fdf43e435f60a99dea9d4073f5 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 15 Jul 2020 10:06:20 +0100 Subject: [PATCH 35/36] =?UTF-8?q?Color=20harmony=20=F0=9F=8C=88=20(#4803)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Revert "Introduce an interim gray variable till the design can be refactored." This reverts commit cdff94eb33a4edb60cc986667b1c03afcaee63ae. * Home screen color updates * Analytics colors --- client/dashboard/dashboard-charts/block.scss | 8 ++++---- client/dashboard/store-performance/style.scss | 2 +- .../activity-panel/activity-card/style.scss | 2 +- .../activity-panel/panels/inbox/style.scss | 5 ++--- client/homescreen/stats-overview/style.scss | 2 +- client/stylesheets/abstracts/_colors.scss | 3 --- packages/components/src/calendar/style.scss | 4 ++-- .../components/src/dropdown-button/style.scss | 4 ++-- .../components/src/filter-picker/style.scss | 4 ++-- packages/components/src/filters/style.scss | 2 +- .../src/segmented-selection/style.scss | 8 ++++---- packages/components/src/summary/style.scss | 18 +++++++++++------- packages/components/src/table/style.scss | 4 ++-- 13 files changed, 33 insertions(+), 33 deletions(-) diff --git a/client/dashboard/dashboard-charts/block.scss b/client/dashboard/dashboard-charts/block.scss index d32be90af14..cef54d1e74f 100644 --- a/client/dashboard/dashboard-charts/block.scss +++ b/client/dashboard/dashboard-charts/block.scss @@ -36,7 +36,7 @@ .woocommerce-legend__item > button { cursor: default; &:hover { - background: $gray-50; + background: $gray-100; } .woocommerce-legend__item-container { cursor: default; @@ -47,16 +47,16 @@ } &:hover { - background: $gray-50; + background: $gray-100; .woocommerce-legend__item > button { - background: $gray-50; + background: $gray-100; } } } } &:hover { - background: $gray-50; + background: $gray-100; } .screen-reader-text:focus { diff --git a/client/dashboard/store-performance/style.scss b/client/dashboard/store-performance/style.scss index ad0926856ce..fe287d0cac9 100644 --- a/client/dashboard/store-performance/style.scss +++ b/client/dashboard/store-performance/style.scss @@ -28,7 +28,7 @@ background-color: $studio-white; &:hover { - background-color: $gray-50; + background-color: $gray-100; } &:active { diff --git a/client/header/activity-panel/activity-card/style.scss b/client/header/activity-panel/activity-card/style.scss index f4eef1e215e..6640911e6fd 100644 --- a/client/header/activity-panel/activity-card/style.scss +++ b/client/header/activity-panel/activity-card/style.scss @@ -3,7 +3,7 @@ padding: $fallback-gutter; padding: $gutter; background: $studio-white; - border-bottom: 1px solid $gray-100; + border-bottom: 1px solid $gray-200; color: $gray-text; @include font-size( 13 ); diff --git a/client/header/activity-panel/panels/inbox/style.scss b/client/header/activity-panel/panels/inbox/style.scss index cccf4e600b9..12693654d9e 100644 --- a/client/header/activity-panel/panels/inbox/style.scss +++ b/client/header/activity-panel/panels/inbox/style.scss @@ -1,8 +1,7 @@ .woocommerce-inbox-message { position: relative; color: $gray-text; - // background: $gray-100; - background: $gray-50; + background: $gray-100; border-radius: 2px; @include font-size( 13 ); margin: 0 0 $gap-large; @@ -30,7 +29,7 @@ } &:not(.is-placeholder) { - border: 1px solid $gray-400; + border: 1px solid $gray-200; } &.message-is-unread { diff --git a/client/homescreen/stats-overview/style.scss b/client/homescreen/stats-overview/style.scss index 21dc95df0fc..865256761e7 100644 --- a/client/homescreen/stats-overview/style.scss +++ b/client/homescreen/stats-overview/style.scss @@ -1,5 +1,5 @@ // Set up some local color variables to make the CSS more clear -$outer-border: $gray-400; +$outer-border: $gray-200; $promo-actions-border-top: $gray-100; $promo-actions-border-bottom: $gray-100; diff --git a/client/stylesheets/abstracts/_colors.scss b/client/stylesheets/abstracts/_colors.scss index 4b3fe06d790..6918d612cdd 100644 --- a/client/stylesheets/abstracts/_colors.scss +++ b/client/stylesheets/abstracts/_colors.scss @@ -5,9 +5,6 @@ $transparent: rgba(255, 255, 255, 0); $gray-text: $gray-700; $gray-text-hover: $gray-900; -// Woocommerce needs one lighter shade of gray to work alongside the new set of grays exposed by @wordpress/base-styles. -// Removing this would require significant refactoring. -$gray-50: #f8f9f9; // Gutenberg $button-hover: #fafafa; diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss index 6d9402243e2..b105fed897c 100644 --- a/packages/components/src/calendar/style.scss +++ b/packages/components/src/calendar/style.scss @@ -1,6 +1,6 @@ .woocommerce-calendar { width: 100%; - background-color: $gray-50; + background-color: $gray-100; border-top: 1px solid $gray-400; height: 396px; @@ -60,7 +60,7 @@ .CalendarMonthGrid, .CalendarMonth, .DayPicker { - background-color: $gray-50; + background-color: $gray-100; } .DayPicker_weekHeader_li { diff --git a/packages/components/src/dropdown-button/style.scss b/packages/components/src/dropdown-button/style.scss index cfe241a9cc0..88f8a89329d 100644 --- a/packages/components/src/dropdown-button/style.scss +++ b/packages/components/src/dropdown-button/style.scss @@ -1,7 +1,7 @@ .woocommerce-page .woocommerce-dropdown-button { background-color: $studio-white; position: relative; - border: 1px solid $gray-200; + border: 1px solid $gray-100; color: $gray-700; border-radius: 4px; padding: 0 40px 0 0; @@ -29,7 +29,7 @@ &:hover, &:active, &.is-open { - background-color: $gray-50; + background-color: $gray-100; } &.is-multi-line .woocommerce-dropdown-button__labels { diff --git a/packages/components/src/filter-picker/style.scss b/packages/components/src/filter-picker/style.scss index 0c43ca9254b..1b34bd36205 100644 --- a/packages/components/src/filter-picker/style.scss +++ b/packages/components/src/filter-picker/style.scss @@ -56,7 +56,7 @@ display: flex; width: 100%; padding: 1em 1em 1em 3em; - background-color: $gray-50; + background-color: $gray-100; text-align: left; &.components-button { @@ -64,7 +64,7 @@ } &:hover { - background-color: $gray-100; + background-color: $gray-200; color: $gray-700; } diff --git a/packages/components/src/filters/style.scss b/packages/components/src/filters/style.scss index f0786993dd4..b1afc4fb117 100644 --- a/packages/components/src/filters/style.scss +++ b/packages/components/src/filters/style.scss @@ -89,7 +89,7 @@ .woocommerce-filters__compare-body { padding: $gap; - background-color: $gray-50; + background-color: $gray-100; border-bottom: 1px solid $gray-100; } diff --git a/packages/components/src/segmented-selection/style.scss b/packages/components/src/segmented-selection/style.scss index 04485b30f63..f6f62c0125c 100644 --- a/packages/components/src/segmented-selection/style.scss +++ b/packages/components/src/segmented-selection/style.scss @@ -28,18 +28,18 @@ } .woocommerce-segmented-selection__label { - background-color: $gray-50; + background-color: $gray-100; padding: $gap-small $gap-small $gap-small $gap-larger; position: relative; display: block; height: 100%; &:active { - background-color: $gray-100; + background-color: $gray-200; } &:hover { - background-color: $gray-100; + background-color: $gray-200; } } @@ -49,7 +49,7 @@ left: -9999px; &:active + label .woocommerce-segmented-selection__label { - background-color: $gray-100; + background-color: $gray-200; } &:checked + label .woocommerce-segmented-selection__label { diff --git a/packages/components/src/summary/style.scss b/packages/components/src/summary/style.scss index cc5c457e30e..fe690ef22c1 100644 --- a/packages/components/src/summary/style.scss +++ b/packages/components/src/summary/style.scss @@ -1,5 +1,5 @@ // Set up some local color variables to make the CSS more clear -$border: $gray-100; +$border: $gray-200; // A local mixin to generate the grid template and border logic @mixin make-cols( $i ) { @@ -259,12 +259,12 @@ $border: $gray-100; flex-direction: column; height: 100%; padding: $gap-large; - background-color: $gray-50; + background-color: $gray-100; border-bottom: 1px solid $border; border-right: 1px solid $border; line-height: 1.4em; text-decoration: none; - color: var(--wp-admin-theme-color); + color: $gray-900; &.components-button { height: auto; @@ -273,8 +273,12 @@ $border: $gray-100; } &:hover { - background-color: $gray-50; - color: color(var(--wp-admin-theme-color-darker-20)); + background-color: $gray-100; + color: var(--wp-admin-theme-color); + + .woocommerce-summary__item-label { + color: var(--wp-admin-theme-color); + } } &:active { @@ -312,7 +316,7 @@ $border: $gray-100; .woocommerce-summary__item-label { display: block; margin-bottom: $gap; - color: var(--wp-admin-theme-color); + color: $gray-700; } .woocommerce-summary__item-value { @@ -325,7 +329,7 @@ $border: $gray-100; padding: 5px; border-radius: 3px; height: min-content; - background-color: $gray-200; + background-color: $gray-100; color: $gray-900; } diff --git a/packages/components/src/table/style.scss b/packages/components/src/table/style.scss index b39cd506bce..364738bf80e 100644 --- a/packages/components/src/table/style.scss +++ b/packages/components/src/table/style.scss @@ -104,7 +104,7 @@ tr:hover, tr:focus-within { - background-color: $gray-100; + background-color: $gray-200; td, th { background: transparent; @@ -161,7 +161,7 @@ } &.is-sorted { - background-color: $gray-50; + background-color: $gray-100; } &.is-checkbox-column { From c2c72e43ff84f2b2379ef3bdd84dee25b1b5dfcb Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 17 Jul 2020 12:00:11 +1200 Subject: [PATCH 36/36] Remove new refs to -color. --- client/marketing/components/button/style.scss | 4 ++-- client/marketing/components/knowledge-base/style.scss | 2 +- .../marketing/components/recommended-extensions/style.scss | 2 +- client/marketing/coupons/style.scss | 7 +++---- client/marketing/overview/installed-extensions/style.scss | 2 +- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/client/marketing/components/button/style.scss b/client/marketing/components/button/style.scss index 63dfa2c3c03..976d75bd2c2 100644 --- a/client/marketing/components/button/style.scss +++ b/client/marketing/components/button/style.scss @@ -1,6 +1,6 @@ .components-button.woocommerce-admin-marketing-button { &:not([disabled]) { - border-color: $theme-color !important; - color: $theme-color !important; + border-color: var(--wp-admin-theme-color) !important; + color: var(--wp-admin-theme-color) !important; } } diff --git a/client/marketing/components/knowledge-base/style.scss b/client/marketing/components/knowledge-base/style.scss index f2716c4b479..361cc628763 100644 --- a/client/marketing/components/knowledge-base/style.scss +++ b/client/marketing/components/knowledge-base/style.scss @@ -97,7 +97,7 @@ &:hover { h3 { - color: $theme-color; + color: var(--wp-admin-theme-color); } } diff --git a/client/marketing/components/recommended-extensions/style.scss b/client/marketing/components/recommended-extensions/style.scss index 2b7cd26fd9c..81c7e5beca8 100644 --- a/client/marketing/components/recommended-extensions/style.scss +++ b/client/marketing/components/recommended-extensions/style.scss @@ -60,7 +60,7 @@ &:hover { h4 { - color: $theme-color; + color: var(--wp-admin-theme-color); } p { color: $gray-900; diff --git a/client/marketing/coupons/style.scss b/client/marketing/coupons/style.scss index 3811b8ee197..99c967a3929 100644 --- a/client/marketing/coupons/style.scss +++ b/client/marketing/coupons/style.scss @@ -29,11 +29,10 @@ } .woocommerce-marketing-recommended-extensions-item { - .woocommerce-admin-marketing-product-icon { background: $studio-white; color: $studio-white; - border: 1px solid $theme-color; + border: 1px solid var(--wp-admin-theme-color); overflow: hidden; display: flex; align-items: center; @@ -44,13 +43,13 @@ width: 24px; height: 24px; transition: fill 0.2s ease; - fill: $theme-color; + fill: var(--wp-admin-theme-color); } } &:hover { .woocommerce-admin-marketing-product-icon { - background: $theme-color !important; + background: var(--wp-admin-theme-color) !important; svg { fill: #fff !important; diff --git a/client/marketing/overview/installed-extensions/style.scss b/client/marketing/overview/installed-extensions/style.scss index 0095b64d7db..2b1518b6868 100644 --- a/client/marketing/overview/installed-extensions/style.scss +++ b/client/marketing/overview/installed-extensions/style.scss @@ -69,7 +69,7 @@ a { font-weight: 600; - color: $theme-color !important; + color: var(--wp-admin-theme-color) !important; text-decoration: none; font-size: 14px; }