Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update @wordpress/base-styles and replace deprecated variables (https://github.com/woocommerce/woocommerce-admin/pull/4759) 

Fixes woocommerce/woocommerce-admin#4732

This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well.

There are 3 major changes required as part of updating:

1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before.

2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color.

3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732)
This commit is contained in:
Sam Seay 2020-07-17 12:11:42 +12:00 committed by GitHub
parent c950b9fafd
commit b448ff60b7
57 changed files with 497 additions and 506 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
plugins/woocommerce-admin/client/analytics/report/style.scss
View File

@ -1,4 +1,3 @@
.woocommerce-analytics__table-placeholder { .woocommerce-analytics__table-placeholder {
.woocommerce-card__body { .woocommerce-card__body {
padding: 0; padding: 0;
@ -18,7 +17,7 @@
// exportable card based on the Gutenberg component that houses wc-admin styles. // exportable card based on the Gutenberg component that houses wc-admin styles.
.woocommerce-analytics__card { .woocommerce-analytics__card {
border-radius: 0; border-radius: 0;
border: 1px solid $core-grey-light-700; border: 1px solid $gray-400;
box-shadow: none; box-shadow: none;
margin-bottom: $gap-large; margin-bottom: $gap-large;
@ -34,8 +33,8 @@
} }
> .woocommerce-card__header { > .woocommerce-card__header {
padding: ($gap - 3) $gap; padding: ( $gap - 3 ) $gap;
border-bottom: 1px solid $core-grey-light-700; border-bottom: 1px solid $gray-400;
border-radius: 0; border-radius: 0;
> .woocommerce-card__title-wrapper > .woocommerce-card__title { > .woocommerce-card__title-wrapper > .woocommerce-card__title {

8
plugins/woocommerce-admin/client/analytics/settings/setting.scss
View File

@ -1,5 +1,3 @@
.woocommerce-setting { .woocommerce-setting {
display: flex; display: flex;
margin-bottom: $gap-large; margin-bottom: $gap-large;
@ -9,7 +7,7 @@
} }
.woocommerce-setting__label { .woocommerce-setting__label {
@include font-size(16); @include font-size( 16 );
margin-bottom: $gap; margin-bottom: $gap;
padding-right: $gap; padding-right: $gap;
font-weight: bold; font-weight: bold;
@ -33,7 +31,7 @@
width: 100%; width: 100%;
display: block; display: block;
margin-bottom: $gap-small; margin-bottom: $gap-small;
color: $core-grey-dark-500; color: $gray-700;
} }
.woocommerce-filters-filter label { .woocommerce-filters-filter label {
@ -62,5 +60,5 @@
.woocommerce-setting__help { .woocommerce-setting__help {
font-style: italic; font-style: italic;
color: $core-grey-dark-300; color: $gray-700;
} }

10
plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.scss
View File

@ -1,5 +1,3 @@
.woocommerce-dashboard__chart-block-wrapper { .woocommerce-dashboard__chart-block-wrapper {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -38,7 +36,7 @@
.woocommerce-legend__item > button { .woocommerce-legend__item > button {
cursor: default; cursor: default;
&:hover { &:hover {
background: $core-grey-light-100; background: $gray-100;
} }
.woocommerce-legend__item-container { .woocommerce-legend__item-container {
cursor: default; cursor: default;
@ -49,16 +47,16 @@
} }
&:hover { &:hover {
background: $core-grey-light-100; background: $gray-100;
.woocommerce-legend__item > button { .woocommerce-legend__item > button {
background: $core-grey-light-100; background: $gray-100;
} }
} }
} }
} }
&:hover { &:hover {
background: $core-grey-light-100; background: $gray-100;
} }
.screen-reader-text:focus { .screen-reader-text:focus {

4
plugins/woocommerce-admin/client/dashboard/leaderboards/style.scss
View File

@ -1,11 +1,9 @@
.woocommerce-dashboard__dashboard-leaderboards { .woocommerce-dashboard__dashboard-leaderboards {
.components-base-control__field { .components-base-control__field {
width: 100%; width: 100%;
} }
.components-select-control__input { .components-select-control__input {
border: 1px solid $core-grey-light-700; border: 1px solid $gray-400;
height: 34px; height: 34px;
} }
.woocommerce-dashboard__dashboard-leaderboards__select { .woocommerce-dashboard__dashboard-leaderboards__select {

10
plugins/woocommerce-admin/client/dashboard/store-performance/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-dashboard__store-performance { .woocommerce-dashboard__store-performance {
margin-bottom: $gap-large; margin-bottom: $gap-large;
@ -8,7 +6,7 @@
} }
.woocommerce-summary { .woocommerce-summary {
background-color: $core-grey-light-100; background-color: $gray-100;
margin: 0; margin: 0;
@include breakpoint( '<782px' ) { @include breakpoint( '<782px' ) {
@ -19,7 +17,7 @@
&:not(.is-placeholder) { &:not(.is-placeholder) {
.woocommerce-summary__item-container:first-child { .woocommerce-summary__item-container:first-child {
.woocommerce-summary__item { .woocommerce-summary__item {
border-top: 1px solid $core-grey-light-700; border-top: 1px solid $gray-400;
} }
} }
} }
@ -30,11 +28,11 @@
background-color: $studio-white; background-color: $studio-white;
&:hover { &:hover {
background-color: $core-grey-light-200; background-color: $gray-100;
} }
&:active { &:active {
background-color: $core-grey-light-300; background-color: $gray-100;
} }
} }
} }

7
plugins/woocommerce-admin/client/dashboard/style.scss
View File

@ -42,7 +42,7 @@
} }
> button svg { > button svg {
fill: $core-grey-dark-500; fill: $gray-700;
} }
} }
@ -68,12 +68,12 @@
} }
.woocommerce-dashboard-section__add-more-btn-title { .woocommerce-dashboard-section__add-more-btn-title {
color: $core-grey-dark-300; color: $gray-700;
padding-top: 8px; padding-top: 8px;
} }
.woocommerce-dashboard-section-controls { .woocommerce-dashboard-section-controls {
border-top: $border-width solid $core-grey-light-500; border-top: $border-width solid $gray-100;
padding-top: $gap-smaller; padding-top: $gap-smaller;
.dashicon { .dashicon {
@ -100,7 +100,6 @@
} }
} }
.woocommerce-dashboard-card { .woocommerce-dashboard-card {
.components-card__header.is-size-large, .components-card__header.is-size-large,
.components-card__header.is-size-medium { .components-card__header.is-size-medium {

14
plugins/woocommerce-admin/client/devdocs/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce_devdocs { .woocommerce_devdocs {
@include breakpoint( '>1280px' ) { @include breakpoint( '>1280px' ) {
&.is-list { &.is-list {
@ -27,13 +25,13 @@
.woocommerce-devdocs__example { .woocommerce-devdocs__example {
padding: $gap; 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 // Grid background
background-image: linear-gradient(rgba($core-grey-dark-800, 0.05) 1px, transparent 1px), background-image: linear-gradient(rgba($gray-900, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba($core-grey-dark-800, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba($gray-900, 0.05) 1px, transparent 1px),
linear-gradient(rgba($core-grey-dark-800, 0.025) 1px, transparent 1px), linear-gradient(rgba($gray-900, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba($core-grey-dark-800, 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-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px;
background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px; background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
@ -65,7 +63,7 @@
th, th,
td { td {
border-bottom: 1px solid $core-grey-light-700; border-bottom: 1px solid $gray-400;
text-align: left; text-align: left;
} }

39
plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss
View File

@ -1,11 +1,9 @@
.woocommerce-activity-card { .woocommerce-activity-card {
position: relative; position: relative;
padding: $fallback-gutter; padding: $fallback-gutter;
padding: $gutter; padding: $gutter;
background: $studio-white; background: $studio-white;
border-bottom: 1px solid $core-grey-light-400; border-bottom: 1px solid $gray-200;
color: $gray-text; color: $gray-text;
@include font-size( 13 ); @include font-size( 13 );
@ -25,10 +23,10 @@
.woocommerce-activity-card__unread { .woocommerce-activity-card__unread {
position: absolute; position: absolute;
top: calc(#{ $fallback-gutter } - 6px); top: calc(#{$fallback-gutter} - 6px);
top: calc(#{ $gutter } - 6px); top: calc(#{$gutter} - 6px);
right: calc(#{ $fallback-gutter } - 6px); right: calc(#{$fallback-gutter} - 6px);
right: calc(#{ $gutter } - 6px); right: calc(#{$gutter} - 6px);
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
@ -37,7 +35,7 @@
.woocommerce-activity-card__icon { .woocommerce-activity-card__icon {
grid-area: icon; grid-area: icon;
fill: $core-grey-light-600; fill: $gray-200;
} }
.woocommerce-activity-card__header { .woocommerce-activity-card__header {
@ -51,7 +49,7 @@
order: 2; order: 2;
.woocommerce-empty-activity-card & { .woocommerce-empty-activity-card & {
color: $dark-gray-primary; color: $gray-900;
@include font-size( 16 ); @include font-size( 16 );
font-style: normal; font-style: normal;
line-height: 24px; line-height: 24px;
@ -60,7 +58,7 @@
} }
.woocommerce-activity-card__date { .woocommerce-activity-card__date {
color: $core-grey-dark-300; color: $gray-700;
text-transform: uppercase; text-transform: uppercase;
@include font-size( 11 ); @include font-size( 11 );
margin-bottom: $gap-small; margin-bottom: $gap-small;
@ -107,7 +105,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
.woocommerce-empty-activity-card & { .woocommerce-empty-activity-card & {
color: $medium-gray-text; color: $gray-700;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@include font-size( 14 ); @include font-size( 14 );
@ -224,7 +222,7 @@
padding: $fallback-gutter; padding: $fallback-gutter;
padding: $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; transition: opacity 0.3s, height 0s, padding 0s;
} }
@ -240,7 +238,7 @@
height: 0; height: 0;
opacity: 0; opacity: 0;
padding: 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; transition: opacity 0.3s, height 0s 0.3s, padding 0s 0.3s;
} }
} }
@ -288,7 +286,8 @@
margin-top: $gap-smallest; 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; margin-left: 0;
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -306,7 +305,7 @@
width: 60px; width: 60px;
&.is-placeholder::before { &.is-placeholder::before {
background-color: $core-grey-dark-500; background-color: $gray-700;
border-radius: 50%; border-radius: 50%;
content: ''; content: '';
position: absolute; position: absolute;
@ -319,7 +318,7 @@
} }
.woocommerce-stock-activity-card { .woocommerce-stock-activity-card {
@media screen and (prefers-reduced-motion: no-preference) { @media screen and ( prefers-reduced-motion: no-preference ) {
transition: opacity 0.3s; transition: opacity 0.3s;
} }
@ -328,8 +327,8 @@
} }
.woocommerce-stock-activity-card__stock-quantity { .woocommerce-stock-activity-card__stock-quantity {
background: $core-grey-light-300; background: $gray-100;
color: $core-grey-dark-500; color: $gray-700;
padding: 3px $gap-smaller; padding: 3px $gap-smaller;
border-radius: 3px; border-radius: 3px;
} }
@ -366,13 +365,13 @@
} }
.woocommerce-activity-card__subtitle { .woocommerce-activity-card__subtitle {
color: $core-grey-dark-500; color: $gray-700;
@include font-size( 12 ); @include font-size( 12 );
} }
} }
.woocommerce-empty-activity-card { .woocommerce-empty-activity-card {
background: $core-grey-light-200; background: $gray-100;
margin: 20px; margin: 20px;
border-bottom: unset; border-bottom: unset;
} }

12
plugins/woocommerce-admin/client/header/activity-panel/activity-header/style.scss
View File

@ -1,8 +1,6 @@
.woocommerce-layout__activity-panel-header { .woocommerce-layout__activity-panel-header {
height: 50px; height: 50px;
background: $core-grey-light-500; background: $gray-200;
padding: 16px; padding: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -24,23 +22,23 @@
.woocommerce-ellipsis-menu__toggle.components-button:not(:disabled):not([aria-disabled='true']):hover { .woocommerce-ellipsis-menu__toggle.components-button:not(:disabled):not([aria-disabled='true']):hover {
box-shadow: none; box-shadow: none;
border-radius: 10px; border-radius: 10px;
background: $core-grey-light-700; background: $gray-400;
} }
} }
.woocommerce-layout__inbox-title { .woocommerce-layout__inbox-title {
color: $dark-gray-primary; color: $gray-900;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.woocommerce-layout__inbox-subtitle { .woocommerce-layout__inbox-subtitle {
color: $medium-gray-text; color: $gray-700;
} }
.woocommerce-layout__inbox-badge { .woocommerce-layout__inbox-badge {
margin-left: $gap-small / 2; margin-left: $gap-small / 2;
background-color: $medium-gray-text; background-color: $gray-700;
border-radius: 13px; border-radius: 13px;
padding: 0 $gap-small / 2; padding: 0 $gap-small / 2;
color: $white; color: $white;

13
plugins/woocommerce-admin/client/header/activity-panel/activity-outbound-link/style.scss
View File

@ -1,12 +1,10 @@
.woocommerce-layout__activity-panel-outbound-link { .woocommerce-layout__activity-panel-outbound-link {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 50px; height: 50px;
background: $core-grey-light-200; background: $gray-200;
border-bottom: 1px solid $core-grey-light-400; border-bottom: 1px solid $gray-100;
padding: $gap $fallback-gutter; padding: $gap $fallback-gutter;
padding: $gap $gutter; padding: $gap $gutter;
font-size: 13px; font-size: 13px;
@ -24,12 +22,13 @@
} }
&:active { &:active {
background: $core-grey-light-100; background: $gray-100;
} }
&:focus { &: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; box-shadow: inset 0 0 0 1px $box-shadow-blue,
inset 0 0 0 2px $studio-white;
} }
&:hover, &:hover,

18
plugins/woocommerce-admin/client/header/activity-panel/panels/inbox/style.scss
View File

@ -1,9 +1,7 @@
.woocommerce-inbox-message { .woocommerce-inbox-message {
position: relative; position: relative;
color: $gray-text; color: $gray-text;
background: $core-grey-light-200; background: $gray-100;
border-radius: 2px; border-radius: 2px;
@include font-size( 13 ); @include font-size( 13 );
margin: 0 0 $gap-large; margin: 0 0 $gap-large;
@ -31,7 +29,7 @@
} }
&:not(.is-placeholder) { &:not(.is-placeholder) {
border: 1px solid $light-gray-secondary; border: 1px solid $gray-200;
} }
&.message-is-unread { &.message-is-unread {
@ -57,7 +55,7 @@
.woocommerce-inbox-message__content { .woocommerce-inbox-message__content {
.woocommerce-inbox-message__title { .woocommerce-inbox-message__title {
color: $dark-gray-primary; color: $gray-900;
@include font-size( 16 ); @include font-size( 16 );
font-style: normal; font-style: normal;
line-height: 1.5; line-height: 1.5;
@ -78,7 +76,7 @@
} }
.woocommerce-inbox-message__date { .woocommerce-inbox-message__date {
color: $medium-gray-text; color: $gray-700;
@include font-size( 12 ); @include font-size( 12 );
margin-bottom: $gap; margin-bottom: $gap;
font-style: normal; font-style: normal;
@ -94,7 +92,7 @@
} }
.woocommerce-inbox-message__text { .woocommerce-inbox-message__text {
color: $medium-gray-text; color: $gray-700;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@include font-size( 14 ); @include font-size( 14 );
@ -117,7 +115,7 @@
.woocommerce-inbox-message__actions { .woocommerce-inbox-message__actions {
padding-top: $gap; padding-top: $gap;
border-top: 1px solid $light-gray-tertiary; border-top: 1px solid $gray-200;
// Ensures any immediate child with a sibling has space between the items // Ensures any immediate child with a sibling has space between the items
& > * + * { & > * + * {
@ -158,7 +156,7 @@
.woocommerce-inbox-dismiss-confirmation_wrapper { .woocommerce-inbox-dismiss-confirmation_wrapper {
p { p {
font-size: 16px; font-size: 16px;
color: $medium-gray-text; color: $gray-700;
} }
.woocommerce-inbox-dismiss-confirmation_buttons { .woocommerce-inbox-dismiss-confirmation_buttons {
text-align: right; text-align: right;
@ -208,7 +206,7 @@
} }
// Tweak to fix dropdown and placeholder in IE 11 // 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 { .woocommerce-admin-dismiss-dropdown {
margin-top: 0; margin-top: 0;
} }

20
plugins/woocommerce-admin/client/header/activity-panel/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-layout__activity-panel { .woocommerce-layout__activity-panel {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -78,10 +76,10 @@
min-width: 80px; min-width: 80px;
width: 100%; width: 100%;
height: $header-height; height: $header-height;
color: $core-grey-dark-500; color: $gray-700;
&::before { &::before {
background-color: theme(outlines); background-color: var(--wp-admin-theme-color);
bottom: 0; bottom: 0;
content: ''; content: '';
height: 0; height: 0;
@ -95,7 +93,7 @@
} }
&.is-active { &.is-active {
color: $core-grey-dark-700; color: $gray-900;
box-shadow: none; box-shadow: none;
&::before { &::before {
@ -133,18 +131,18 @@
&:hover, &:hover,
&.components-button:not(:disabled):not([aria-disabled='true']):hover { &.components-button:not(:disabled):not([aria-disabled='true']):hover {
background-color: $core-grey-light-200; background-color: $gray-100;
box-shadow: none; box-shadow: none;
&.has-unread::after, &.has-unread::after,
&.woocommerce-layout__activity-panel-tab-wordpress-notices::after { &.woocommerce-layout__activity-panel-tab-wordpress-notices::after {
border-color: $core-grey-light-200; border-color: $gray-200;
} }
} }
&:focus, &:focus,
&.components-button:not(:disabled):not([aria-disabled='true']):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;
} }
} }
} }
@ -193,14 +191,14 @@
transition-property: transform box-shadow; transition-property: transform box-shadow;
transition-duration: 300ms; transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); 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; transition-duration: 1ms;
} }
} }
.woocommerce-layout__activity-panel-wrapper { .woocommerce-layout__activity-panel-wrapper {
height: calc(100vh - #{$header-height + $header-height + $adminbar-height-mobile}); height: calc(100vh - #{$header-height + $header-height + $adminbar-height-mobile});
background: $core-grey-light-200; background: $gray-100;
width: 510px; width: 510px;
@include breakpoint( '<782px' ) { @include breakpoint( '<782px' ) {
width: 100%; width: 100%;
@ -228,7 +226,7 @@
animation: tabSwitch; animation: tabSwitch;
animation-duration: 300ms; animation-duration: 300ms;
@media screen and (prefers-reduced-motion: reduce) { @media screen and ( prefers-reduced-motion: reduce ) {
animation: none; animation: none;
} }
} }

24
plugins/woocommerce-admin/client/homescreen/stats-overview/style.scss
View File

@ -1,7 +1,7 @@
// Set up some local color variables to make the CSS more clear // Set up some local color variables to make the CSS more clear
$outer-border: $core-grey-light-700; $outer-border: $gray-200;
$promo-actions-border-top: $core-grey-light-500; $promo-actions-border-top: $gray-100;
$promo-actions-border-bottom: $light-gray-tertiary; $promo-actions-border-bottom: $gray-100;
.woocommerce-stats-overview { .woocommerce-stats-overview {
.woocommerce-card__body { .woocommerce-card__body {
@ -39,15 +39,19 @@ $promo-actions-border-bottom: $light-gray-tertiary;
display: inline-block; 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; 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; 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; border-right: none;
} }
@ -55,11 +59,11 @@ $promo-actions-border-bottom: $light-gray-tertiary;
background-color: $studio-white; background-color: $studio-white;
&:hover { &:hover {
background-color: $light-gray-100; background-color: $gray-100;
} }
&:active { &:active {
background-color: $light-gray-200; background-color: $gray-100;
} }
} }
} }
@ -70,7 +74,7 @@ article.woocommerce-stats-overview__install-jetpack-promo {
} }
h2 { h2 {
color: $dark-gray-primary; color: $gray-900;
@include font-size( 16 ); @include font-size( 16 );
font-style: normal; font-style: normal;
line-height: 1.5; line-height: 1.5;
@ -78,7 +82,7 @@ article.woocommerce-stats-overview__install-jetpack-promo {
margin: $gap-smaller 0; margin: $gap-smaller 0;
} }
p { p {
color: $medium-gray-text; color: $gray-700;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@include font-size( 14 ); @include font-size( 14 );

3
plugins/woocommerce-admin/client/layout/store-alerts/style.scss
View File

@ -1,4 +1,3 @@
.woocommerce-store-alerts { .woocommerce-store-alerts {
position: relative; position: relative;
margin: 0 0 $gap-largest 0; margin: 0 0 $gap-largest 0;
@ -51,7 +50,7 @@
} }
&.is-button { &.is-button {
color: $core-grey-dark-500; color: $gray-700;
} }
} }

4
plugins/woocommerce-admin/client/marketing/components/button/style.scss
View File

@ -1,6 +1,6 @@
.components-button.woocommerce-admin-marketing-button { .components-button.woocommerce-admin-marketing-button {
&:not([disabled]) { &:not([disabled]) {
border-color: $theme-color !important; border-color: var(--wp-admin-theme-color) !important;
color: $theme-color !important; color: var(--wp-admin-theme-color) !important;
} }
} }

9
plugins/woocommerce-admin/client/marketing/components/knowledge-base/style.scss
View File

@ -1,5 +1,4 @@
.woocommerce-marketing-knowledgebase-card { .woocommerce-marketing-knowledgebase-card {
.woocommerce-marketing-slider { .woocommerce-marketing-slider {
margin: 0 0 14px; margin: 0 0 14px;
} }
@ -80,7 +79,7 @@
&-text { &-text {
margin: 10px 0 0; margin: 10px 0 0;
@include breakpoint('>960px') { @include breakpoint( '>960px' ) {
margin: 0; margin: 0;
} }
} }
@ -92,13 +91,13 @@
line-height: 24px; line-height: 24px;
font-weight: 600; font-weight: 600;
white-space: normal; white-space: normal;
color: $core-grey-dark-800; color: $gray-900;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
&:hover { &:hover {
h3 { h3 {
color: $theme-color; color: var(--wp-admin-theme-color);
} }
} }
@ -108,7 +107,7 @@
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
line-height: 17px; line-height: 17px;
color: $core-grey-dark-500; color: $gray-700;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 17px; height: 17px;

4
plugins/woocommerce-admin/client/marketing/components/product-icon/style.scss
View File

@ -5,8 +5,8 @@
height: 36px; height: 36px;
border-radius: 8px; border-radius: 8px;
// for loading state // for loading state
background: $core-grey-light-300; background: $gray-100;
color: $core-grey-light-300; color: $gray-100;
svg { svg {
width: 36px; width: 36px;

12
plugins/woocommerce-admin/client/marketing/components/recommended-extensions/style.scss
View File

@ -37,7 +37,6 @@
} }
} }
} }
} }
.woocommerce-marketing-recommended-extensions-item { .woocommerce-marketing-recommended-extensions-item {
@ -47,24 +46,24 @@
position: relative; position: relative;
h4 { h4 {
color: $core-grey-dark-800; color: $gray-900;
margin: -2px 0 ($gap-smallest - 1); margin: -2px 0 ( $gap-smallest - 1 );
font-size: 16px; font-size: 16px;
line-height: 1.3; line-height: 1.3;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
p { p {
color: $core-grey-dark-500; color: $gray-700;
margin: 0; margin: 0;
} }
&:hover { &:hover {
h4 { h4 {
color: $theme-color; color: var(--wp-admin-theme-color);
} }
p { p {
color: $core-grey-dark-900; color: $gray-900;
} }
} }
@ -77,5 +76,4 @@
top: 12px; top: 12px;
left: 12px; left: 12px;
} }
} }

9
plugins/woocommerce-admin/client/marketing/coupons/style.scss
View File

@ -11,7 +11,7 @@
.woocommerce-card__header { .woocommerce-card__header {
padding: $gap $gap-large; padding: $gap $gap-large;
border-bottom: 1px solid $core-grey-light-500; border-bottom: 1px solid $gray-100;
border-radius: 0; border-radius: 0;
} }
@ -29,11 +29,10 @@
} }
.woocommerce-marketing-recommended-extensions-item { .woocommerce-marketing-recommended-extensions-item {
.woocommerce-admin-marketing-product-icon { .woocommerce-admin-marketing-product-icon {
background: $studio-white; background: $studio-white;
color: $studio-white; color: $studio-white;
border: 1px solid $theme-color; border: 1px solid var(--wp-admin-theme-color);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
@ -44,13 +43,13 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
transition: fill 0.2s ease; transition: fill 0.2s ease;
fill: $theme-color; fill: var(--wp-admin-theme-color);
} }
} }
&:hover { &:hover {
.woocommerce-admin-marketing-product-icon { .woocommerce-admin-marketing-product-icon {
background: $theme-color !important; background: var(--wp-admin-theme-color) !important;
svg { svg {
fill: #fff !important; fill: #fff !important;

8
plugins/woocommerce-admin/client/marketing/overview/installed-extensions/style.scss
View File

@ -12,17 +12,17 @@
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
margin: 0 0 5px; margin: 0 0 5px;
color: $core-grey-dark-800; color: $gray-900;
} }
p { p {
color: $core-grey-dark-500; color: $gray-700;
margin: 0; margin: 0;
} }
} }
&__item:not(:last-child) { &__item:not(:last-child) {
border-bottom: 1px solid $core-grey-light-500; border-bottom: 1px solid $gray-100;
} }
&__item-text-and-actions { &__item-text-and-actions {
@ -69,7 +69,7 @@
a { a {
font-weight: 600; font-weight: 600;
color: $theme-color !important; color: var(--wp-admin-theme-color) !important;
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
} }

2
plugins/woocommerce-admin/client/marketing/overview/style.scss
View File

@ -4,7 +4,7 @@
.woocommerce-card__header { .woocommerce-card__header {
padding: 16px 24px; padding: 16px 24px;
border-bottom: 1px solid $core-grey-light-500; border-bottom: 1px solid $gray-100;
} }
.woocommerce-card__title { .woocommerce-card__title {

4
plugins/woocommerce-admin/client/marketing/overview/welcome-card/style.scss
View File

@ -24,9 +24,9 @@
margin: 0; margin: 0;
border: none; border: none;
background: none; background: none;
color: $dark-gray-500; color: $gray-700;
overflow: hidden; overflow: hidden;
border-radius: $radius-round-rectangle; border-radius: 4px;
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;

19
plugins/woocommerce-admin/client/navigation/style.scss Normal file
View File

@ -0,0 +1,19 @@
.woocommerce-navigation {
position: fixed;
top: $admin-bar-height;
left: 0;
width: 160px;
height: 100%;
background: $core-grey-dark-800;
}
.woocommerce-navigation__menu-item {
padding: $gap-smaller 0;
}
.has-woocommerce-navigation {
#adminmenuwrap,
#adminmenuback {
display: none !important;
}
}

14
plugins/woocommerce-admin/client/profile-wizard/style.scss
View File

@ -93,7 +93,7 @@
.woocommerce-card ~ p { .woocommerce-card ~ p {
font-size: 12px; font-size: 12px;
color: $core-grey-dark-150; color: $gray-600;
} }
} }
@ -310,7 +310,7 @@
box-shadow: $shadow-popover; box-shadow: $shadow-popover;
&.is-active { &.is-active {
border-color: $blue-medium-focus; border-color: var(--wp-admin-theme-color);
} }
.components-base-control__label { .components-base-control__label {
@ -452,14 +452,14 @@
margin-left: -$gap; margin-left: -$gap;
margin-right: -$gap; margin-right: -$gap;
padding: $gap-large $gap; padding: $gap-large $gap;
border-top: 1px solid $light-gray-tertiary; border-top: 1px solid $gray-100;
border-bottom: 1px solid $light-gray-tertiary; border-bottom: 1px solid $gray-100;
display: flex; display: flex;
align-items: center; align-items: center;
label { label {
display: flex; display: flex;
color: $dark-gray-primary; color: $gray-900;
align-items: center; align-items: center;
} }
@ -469,7 +469,7 @@
.woocommerce-business-extensions__label-subtext { .woocommerce-business-extensions__label-subtext {
display: block; display: block;
color: $core-grey-dark-150; color: $gray-600;
font-size: 14px; font-size: 14px;
} }
@ -491,7 +491,7 @@
display: inline-flex; display: inline-flex;
i { i {
color: $blue-medium-focus; color: var(--wp-admin-theme-color);
margin-right: $gap; margin-right: $gap;
} }
} }

9
plugins/woocommerce-admin/client/stylesheets/abstracts/_breakpoints.scss
View File

@ -22,13 +22,15 @@ $breakpoints: 320px, 400px, 600px, 782px, 960px, 1280px, 1440px;
@media (max-width: $breakpoint) { @media (max-width: $breakpoint) {
@content; @content;
} }
} @else { }
@else {
@if $size == $and-larger { @if $size == $and-larger {
$approved-value: 2; $approved-value: 2;
@media (min-width: $breakpoint + 1) { @media (min-width: $breakpoint + 1) {
@content; @content;
} }
} @else { }
@else {
@each $breakpoint-end in $breakpoints { @each $breakpoint-end in $breakpoints {
$range: $breakpoint + '-' + $breakpoint-end; $range: $breakpoint + '-' + $breakpoint-end;
@if $size == $range { @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 ) } ]'; @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: ''; $sizes: '';
@each $breakpoint in $breakpoints { @each $breakpoint in $breakpoints {
$sizes: $sizes + ' ' + $breakpoint; $sizes: $sizes + ' ' + $breakpoint;

35
plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss
View File

@ -1,33 +1,10 @@
@import 'node_modules/@automattic/color-studio/dist/color-variables.scss'; @import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
@import 'node_modules/@wordpress/base-styles/colors';
$transparent: rgba(255, 255, 255, 0); $transparent: rgba(255, 255, 255, 0);
// Greys $gray-text: $gray-700;
$core-grey-light-100: #f8f9f9; $gray-text-hover: $gray-900;
$core-grey-light-200: #f3f4f5;
$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;
$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;
$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;
$gray-text-hover: $core-grey-dark-800;
// Gutenberg // Gutenberg
$button-hover: #fafafa; $button-hover: #fafafa;
@ -52,9 +29,3 @@ $button-border: darken($button, 20%);
// Blues // Blues
$core-blue-dark-900: #0071a1; $core-blue-dark-900: #0071a1;
// Inbox Messages
$light-gray-secondary: #ccc;
$light-gray-tertiary: #e7e8e9;
$dark-gray-primary: #1e1e1e;
$medium-gray-text: #757575;

50
plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss
View File

@ -1,10 +1,8 @@
// Rem output with px fallback // 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 + px;
font-size: ($sizeValue / 16) + rem; font-size: ( $sizeValue / 16 ) + rem;
@if ($lineHeight) { @if ( $lineHeight ) {
line-height: $lineHeight; line-height: $lineHeight;
} }
} }
@ -24,14 +22,14 @@
// Adds animation to placeholder section // Adds animation to placeholder section
@mixin placeholder( $lighten-percentage: 30% ) { @mixin placeholder( $lighten-percentage: 30% ) {
animation: loading-fade 1.6s ease-in-out infinite; animation: loading-fade 1.6s ease-in-out infinite;
background-color: $core-grey-light-500; background-color: $gray-100;
color: transparent; color: transparent;
&::after { &::after {
content: '\00a0'; content: '\00a0';
} }
@media screen and (prefers-reduced-motion: reduce) { @media screen and ( prefers-reduced-motion: reduce ) {
animation: none; animation: none;
} }
} }
@ -40,7 +38,7 @@
@mixin animate-transform( $duration: 0.2s ) { @mixin animate-transform( $duration: 0.2s ) {
transition: transform ease $duration; transition: transform ease $duration;
@media screen and (prefers-reduced-motion: reduce) { @media screen and ( prefers-reduced-motion: reduce ) {
transition: none; transition: none;
} }
} }
@ -106,22 +104,22 @@
@mixin button-style__hover { @mixin button-style__hover {
background-color: $studio-white; background-color: $studio-white;
color: $dark-gray-900; color: $gray-900;
box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $studio-white, box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px $studio-white,
0 1px 1px rgba($dark-gray-900, 0.2); 0 1px 1px rgba($gray-900, 0.2);
} }
@mixin button-style__active() { @mixin button-style__active() {
outline: none; outline: none;
background-color: $studio-white; background-color: $studio-white;
color: $dark-gray-900; color: $gray-900;
box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $studio-white; box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px $studio-white;
} }
@mixin button-style__focus-active() { @mixin button-style__focus-active() {
background-color: $studio-white; background-color: $studio-white;
color: $dark-gray-900; color: $gray-900;
box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $studio-white; 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. // Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent; outline: 2px solid transparent;
@ -129,17 +127,19 @@
} }
/* stylelint-disable block-closing-brace-newline-after */ /* stylelint-disable block-closing-brace-newline-after */
@mixin reduce-motion($property: '') { @mixin reduce-motion( $property: '' ) {
@if $property == 'transition' { @if $property == 'transition' {
@media (prefers-reduced-motion: reduce) { @media ( prefers-reduced-motion: reduce ) {
transition-duration: 0s; transition-duration: 0s;
} }
} @else if $property == 'animation' { }
@media (prefers-reduced-motion: reduce) { @else if $property == 'animation' {
@media ( prefers-reduced-motion: reduce ) {
animation-duration: 1ms; animation-duration: 1ms;
} }
} @else { }
@media (prefers-reduced-motion: reduce) { @else {
@media ( prefers-reduced-motion: reduce ) {
transition-duration: 0s; transition-duration: 0s;
animation-duration: 1ms; animation-duration: 1ms;
} }
@ -155,7 +155,7 @@
// Gutenberg Switch. // Gutenberg Switch.
@mixin switch-style__focus-active() { @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. // Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent; outline: 2px solid transparent;
@ -168,8 +168,8 @@
&:nth-child(#{$i}) { &:nth-child(#{$i}) {
grid-column-start: #{($i - 1) % $wrap-after + 1}; grid-column-start: #{($i - 1) % $wrap-after + 1};
grid-column-end: #{($i - 1) % $wrap-after + 2}; grid-column-end: #{($i - 1) % $wrap-after + 2};
grid-row-start: #{floor(($i - 1) / $wrap-after) + 1}; grid-row-start: #{floor(( $i - 1 ) / $wrap-after) + 1};
grid-row-end: #{floor(($i - 1) / $wrap-after) + 2}; grid-row-end: #{floor(( $i - 1 ) / $wrap-after) + 2};
} }
} }
} }
@ -198,7 +198,7 @@
} }
// Create a string-repeat function // Create a string-repeat function
@function str-repeat($character, $n) { @function str-repeat( $character, $n ) {
@if $n == 0 { @if $n == 0 {
@return ''; @return '';
} }

37
plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss
View File

@ -1,3 +1,5 @@
@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
// Import Gutenberg variables // Import Gutenberg variables
@import 'node_modules/@wordpress/base-styles/colors'; @import 'node_modules/@wordpress/base-styles/colors';
@import 'node_modules/@wordpress/base-styles/variables'; @import 'node_modules/@wordpress/base-styles/variables';
@ -6,6 +8,11 @@
@import 'node_modules/@wordpress/base-styles/animations'; @import 'node_modules/@wordpress/base-styles/animations';
@import 'node_modules/@wordpress/base-styles/z-index'; @import 'node_modules/@wordpress/base-styles/z-index';
@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: 24px;
$fallback-gutter-large: 40px; $fallback-gutter-large: 40px;
$gutter: var(--main-gap); $gutter: var(--main-gap);
@ -31,24 +38,6 @@ $spacing: 16px;
// Gutenberg variable overrides. // Gutenberg variable overrides.
$white: $studio-white; $white: $studio-white;
$black: $studio-black; $black: $studio-black;
$light-gray-100: $core-grey-light-100;
$light-gray-200: $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;
$light-gray-600: $core-grey-light-600;
$light-gray-700: $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
$dark-gray-400: $core-grey-dark-400;
$dark-gray-500: $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;
$alert-red: $error-red; $alert-red: $error-red;
$alert-yellow: $notice-yellow; $alert-yellow: $notice-yellow;
$alert-green: $valid-green; $alert-green: $valid-green;
@ -62,9 +51,9 @@ $wp-admin-background: #f1f1f1;
$wp-admin-sidebar: #24292d; $wp-admin-sidebar: #24292d;
// Muriel // 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), $muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
0 1px 3px 0 rgba(0, 0, 0, 0.12); 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), $muriel-box-shadow-6dp: 0 3px 5px rgba(0, 0, 0, 0.2),
0 6px 10px rgba(0, 0, 0, 0.14); 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), $muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 3px 14px 2px rgba(0, 0, 0, 0.12); 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);

8
plugins/woocommerce-admin/client/stylesheets/shared/_global.scss
View File

@ -1,16 +1,14 @@
// By using CSS variables, we can switch the spacing rhythm using a single media query. // By using CSS variables, we can switch the spacing rhythm using a single media query.
:root { :root {
--large-gap: 40px; --large-gap: 40px;
--main-gap: 24px; --main-gap: 24px;
} }
@media (max-width: 960px) { @media ( max-width: 960px ) {
:root { :root {
--large-gap: 24px; --large-gap: 24px;
} }
} }
@media (max-width: 782px) { @media ( max-width: 782px ) {
:root { :root {
--large-gap: 16px; --large-gap: 16px;
--main-gap: 16px; --main-gap: 16px;
@ -32,7 +30,7 @@
.woocommerce-layout { .woocommerce-layout {
select:hover { select:hover {
color: $core-grey-dark-700; color: $gray-900;
} }
select.components-select-control__input { select.components-select-control__input {

28
plugins/woocommerce-admin/client/task-list/style.scss
View File

@ -10,14 +10,14 @@
} }
.woocommerce-list__item:not(.is-complete) { .woocommerce-list__item:not(.is-complete) {
.woocommerce-task__icon { .woocommerce-task__icon {
border: 1px solid $core-grey-light-500; border: 1px solid $gray-100;
background: $white; background: $white;
} }
} }
.woocommerce-list__item.is-complete { .woocommerce-list__item.is-complete {
.woocommerce-list__item-title { .woocommerce-list__item-title {
color: $medium-gray-text; color: $gray-700;
} }
} }
@ -41,7 +41,7 @@
} }
.woocommerce-task__estimated-time { .woocommerce-task__estimated-time {
color: $core-grey-dark-300; color: $gray-700;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
display: block; display: block;
@ -336,7 +336,7 @@
} }
} }
@include breakpoint('<600px') { @include breakpoint( '<600px' ) {
.woocommerce-card__body { .woocommerce-card__body {
flex-direction: column; flex-direction: column;
} }
@ -403,8 +403,7 @@
} }
.woocommerce-task-dashboard__container { .woocommerce-task-dashboard__container {
.woocommerce-task-payments .woocommerce-task-payments .woocommerce-task-payments__actions {
.woocommerce-task-payments__actions {
text-align: center; text-align: center;
} }
@ -470,7 +469,7 @@
} }
.woocommerce-task-card__prompt-pointer { .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-left: 10px solid transparent;
border-right: 10px solid transparent; border-right: 10px solid transparent;
position: relative; position: relative;
@ -496,7 +495,7 @@
&:hover { &:hover {
.woocommerce-task-card__prompt-pointer { .woocommerce-task-card__prompt-pointer {
border-bottom-color: $core-grey-dark-900; /* Snackbar hover */ border-bottom-color: $gray-900; /* Snackbar hover */
} }
} }
} }
@ -565,35 +564,36 @@
// Firefox // Firefox
& { & {
background-color: $light-gray-300; background-color: $gray-100;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background-color: $dark-gray-500; background-color: $gray-700;
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
} }
// Chrome // Chrome
&::-webkit-progress-bar { &::-webkit-progress-bar {
background-color: $light-gray-300; background-color: $gray-100;
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: $dark-gray-500; background-color: $gray-700;
border-top-left-radius: 2px; 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 { &::-webkit-progress-value {
border-top-right-radius: 2px; border-top-right-radius: 2px;
} }
} }
.woocommerce-task__caption { .woocommerce-task__caption {
color: $dark-gray-300; color: $gray-700;
margin-top: $gap; margin-top: $gap;
} }

141
plugins/woocommerce-admin/package-lock.json generated
View File

@ -6250,10 +6250,9 @@
} }
}, },
"@wordpress/base-styles": { "@wordpress/base-styles": {
"version": "1.8.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-1.8.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-2.0.0.tgz",
"integrity": "sha512-NXcR72DgB61dgcjEmRbbssRlvm5eTuCSOtMvvK7nzkN4J72sLfxXHEONeqzePt92D/60sX+AifmO8DmKN0zzPQ==", "integrity": "sha512-l0/j0+nVBvCtd/PFj/g6J2R8XuVLLRCNV2jSlnf0SPuswBZ2NYPvCLmf/OZ1Nw/c2O+Erdvq8IdYvXOObewqxQ=="
"dev": true
}, },
"@wordpress/browserslist-config": { "@wordpress/browserslist-config": {
"version": "2.6.0", "version": "2.6.0",
@ -6262,45 +6261,55 @@
"dev": true "dev": true
}, },
"@wordpress/components": { "@wordpress/components": {
"version": "9.6.0", "version": "10.0.0",
"resolved": "https://registry.npmjs.org/@wordpress/components/-/components-9.6.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/components/-/components-10.0.0.tgz",
"integrity": "sha512-moGKwpkwpXvKPfYPQ+q9leDv9eQKaMeeTfy83FmFtLCMWRXANJuNUPYJVS1rtAXuAx+dkxx9a6AYdRpoF7iTNQ==", "integrity": "sha512-2iJw70xAhIQSjR7DLRbYTZx84OFqjGUZNE4U2fy7vg30z5TItP3KQ133VOW9uqQwl4U9gzovIAluq1nq8TuX1A==",
"requires": { "requires": {
"@babel/runtime": "^7.9.2", "@babel/runtime": "^7.9.2",
"@emotion/core": "^10.0.22", "@emotion/core": "^10.0.22",
"@emotion/css": "^10.0.22", "@emotion/css": "^10.0.22",
"@emotion/native": "^10.0.22", "@emotion/native": "^10.0.22",
"@emotion/styled": "^10.0.23", "@emotion/styled": "^10.0.23",
"@wordpress/a11y": "^2.9.0", "@wordpress/a11y": "^2.11.0",
"@wordpress/compose": "^3.15.0", "@wordpress/compose": "^3.19.0",
"@wordpress/deprecated": "^2.8.0", "@wordpress/deprecated": "^2.9.0",
"@wordpress/dom": "^2.9.0", "@wordpress/dom": "^2.13.0",
"@wordpress/element": "^2.14.0", "@wordpress/element": "^2.16.0",
"@wordpress/hooks": "^2.8.0", "@wordpress/hooks": "^2.9.0",
"@wordpress/i18n": "^3.12.0", "@wordpress/i18n": "^3.14.0",
"@wordpress/icons": "^2.0.0", "@wordpress/icons": "^2.4.0",
"@wordpress/is-shallow-equal": "^2.0.0", "@wordpress/is-shallow-equal": "^2.1.0",
"@wordpress/keycodes": "^2.12.0", "@wordpress/keycodes": "^2.14.0",
"@wordpress/primitives": "^1.5.0", "@wordpress/primitives": "^1.7.0",
"@wordpress/rich-text": "^3.16.0", "@wordpress/rich-text": "^3.20.0",
"@wordpress/warning": "^1.1.0", "@wordpress/warning": "^1.2.0",
"classnames": "^2.2.5", "classnames": "^2.2.5",
"clipboard": "^2.0.1",
"dom-scroll-into-view": "^1.2.1", "dom-scroll-into-view": "^1.2.1",
"downshift": "^4.0.5", "downshift": "^5.4.0",
"gradient-parser": "^0.1.5", "gradient-parser": "^0.1.5",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"memize": "^1.1.0", "memize": "^1.1.0",
"moment": "^2.22.1", "moment": "^2.22.1",
"re-resizable": "^6.0.0", "re-resizable": "^6.4.0",
"react-dates": "^17.1.1", "react-dates": "^17.1.1",
"react-resize-aware": "^3.0.1",
"react-spring": "^8.0.20", "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", "rememo": "^3.0.0",
"tinycolor2": "^1.4.1", "tinycolor2": "^1.4.1",
"uuid": "^7.0.2" "uuid": "^7.0.2"
}, },
"dependencies": { "dependencies": {
"@wordpress/dom": {
"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/element": { "@wordpress/element": {
"version": "2.16.0", "version": "2.16.0",
"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.16.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.16.0.tgz",
@ -6313,6 +6322,14 @@
"react-dom": "^16.9.0" "react-dom": "^16.9.0"
} }
}, },
"@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": { "@wordpress/i18n": {
"version": "3.14.0", "version": "3.14.0",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-3.14.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-3.14.0.tgz",
@ -6326,6 +6343,16 @@
"tannin": "^1.2.0" "tannin": "^1.2.0"
} }
}, },
"@wordpress/icons": {
"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.16.0",
"@wordpress/primitives": "^1.7.0"
}
},
"@wordpress/keycodes": { "@wordpress/keycodes": {
"version": "2.14.0", "version": "2.14.0",
"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-2.14.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-2.14.0.tgz",
@ -6685,12 +6712,6 @@
"postcss-custom-properties": "^9.1.1" "postcss-custom-properties": "^9.1.1"
}, },
"dependencies": { "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==",
"dev": true
},
"@wordpress/postcss-themes": { "@wordpress/postcss-themes": {
"version": "2.6.0", "version": "2.6.0",
"resolved": "https://registry.npmjs.org/@wordpress/postcss-themes/-/postcss-themes-2.6.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/postcss-themes/-/postcss-themes-2.6.0.tgz",
@ -6812,13 +6833,13 @@
} }
}, },
"@wordpress/rich-text": { "@wordpress/rich-text": {
"version": "3.20.0", "version": "3.20.1",
"resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-3.20.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-3.20.1.tgz",
"integrity": "sha512-pPz7xvttFAfEkWpRnDh3WH7Ueh2lbatOGyFEgkvTX1SWH4cd9xWpJj4J/wrQ705VwQveTtoyb0HA0B0GU/5UYA==", "integrity": "sha512-VhvwSKaXN6sFoiuBsJmDVJRO1izBsO1CcVATs7PnhPXE4l3AUnvluSbd/d0JP3Gqq/hxprdutPffRMLcODKnfw==",
"requires": { "requires": {
"@babel/runtime": "^7.9.2", "@babel/runtime": "^7.9.2",
"@wordpress/compose": "^3.19.0", "@wordpress/compose": "^3.19.1",
"@wordpress/data": "^4.22.0", "@wordpress/data": "^4.22.1",
"@wordpress/deprecated": "^2.9.0", "@wordpress/deprecated": "^2.9.0",
"@wordpress/element": "^2.16.0", "@wordpress/element": "^2.16.0",
"@wordpress/escape-html": "^1.9.0", "@wordpress/escape-html": "^1.9.0",
@ -6830,13 +6851,28 @@
"rememo": "^3.0.0" "rememo": "^3.0.0"
}, },
"dependencies": { "dependencies": {
"@wordpress/data": { "@wordpress/compose": {
"version": "4.22.0", "version": "3.19.1",
"resolved": "https://registry.npmjs.org/@wordpress/data/-/data-4.22.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.19.1.tgz",
"integrity": "sha512-dflzpbNnor/C2EUoidk8+qePTd6SyoiMFjcOijVD9el6248hlYOKxCNHBadcgJ+XO3BYTzImQgkPE87iCCIuNQ==", "integrity": "sha512-D9IoSQJKgQ2Yqz/SDRjoeT26USR7PoTxzyO7Hk2EyolfPoB0sko0LjwbbndfLYYLksAcZ4x1js4cK9+tHkFJNA==",
"requires": { "requires": {
"@babel/runtime": "^7.9.2", "@babel/runtime": "^7.9.2",
"@wordpress/compose": "^3.19.0", "@wordpress/element": "^2.16.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": {
"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.1",
"@wordpress/deprecated": "^2.9.0", "@wordpress/deprecated": "^2.9.0",
"@wordpress/element": "^2.16.0", "@wordpress/element": "^2.16.0",
"@wordpress/is-shallow-equal": "^2.1.0", "@wordpress/is-shallow-equal": "^2.1.0",
@ -12775,14 +12811,14 @@
} }
}, },
"downshift": { "downshift": {
"version": "4.1.0", "version": "5.4.6",
"resolved": "https://registry.npmjs.org/downshift/-/downshift-4.1.0.tgz", "resolved": "https://registry.npmjs.org/downshift/-/downshift-5.4.6.tgz",
"integrity": "sha512-GODZOZC65a8n8YD/S/87hR2t5PJfqZ7+lwEBJsNi/AJnhImfle+CFD/ZPde4l+nB8QNHfn0GbE1W9djEFOj1yQ==", "integrity": "sha512-GtSCmZUQMulQQ0gX3N3jvUAABJNU8IfAMLzFLu0E2fcOTt98xropy0iriYW2PSClRUqJ4QwKAov7FDy9Gk9aOA==",
"requires": { "requires": {
"@babel/runtime": "^7.4.5", "@babel/runtime": "^7.10.2",
"compute-scroll-into-view": "^1.0.9", "compute-scroll-into-view": "^1.0.14",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react-is": "^16.9.0" "react-is": "^16.13.1"
} }
}, },
"duplexer": { "duplexer": {
@ -23876,7 +23912,7 @@
"dev": true "dev": true
}, },
"prettier": { "prettier": {
"version": "1.19.1", "version": "npm:prettier@1.19.1",
"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-1.19.1.tgz", "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-1.19.1.tgz",
"integrity": "sha512-mqAC2r1NDmRjG+z3KCJ/i61tycKlmADIjxnDhQab+KBxSAGbF/W7/zwB2guy/ypIeKrrftNsIYkNZZQKf3vJcg==", "integrity": "sha512-mqAC2r1NDmRjG+z3KCJ/i61tycKlmADIjxnDhQab+KBxSAGbF/W7/zwB2guy/ypIeKrrftNsIYkNZZQKf3vJcg==",
"dev": true "dev": true
@ -24538,9 +24574,9 @@
} }
}, },
"re-resizable": { "re-resizable": {
"version": "6.5.2", "version": "6.5.4",
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.5.2.tgz", "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.5.4.tgz",
"integrity": "sha512-Pjo3ydkr/meTr6j3YZqyv+9fRS5UNOj5SaAI06gHFQ35BnpsZKmwNvupCnbo11gjQ1I62Uy+UzlHLO9xPQEuWQ==", "integrity": "sha512-7T3L1lexB2zkZIDmzRJbwdq+xGFuRkrEVQIf5hBPnh7JuS9kG9Yc8XgIaxTWic1kU7jVlDgqzfId/gvmpBCjpA==",
"requires": { "requires": {
"fast-memoize": "^2.5.1" "fast-memoize": "^2.5.1"
} }
@ -25250,6 +25286,11 @@
"prop-types": "^15.6.2" "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": { "react-visibility-sensor": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz", "resolved": "https://registry.npmjs.org/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz",

6
plugins/woocommerce-admin/package.json
View File

@ -94,7 +94,8 @@
"dependencies": { "dependencies": {
"@fresh-data/framework": "0.6.1", "@fresh-data/framework": "0.6.1",
"@wordpress/api-fetch": "2.2.8", "@wordpress/api-fetch": "2.2.8",
"@wordpress/components": "9.6.0", "@wordpress/base-styles": "2.0.0",
"@wordpress/components": "10.0.0",
"@wordpress/data": "4.16.1", "@wordpress/data": "4.16.1",
"@wordpress/data-controls": "1.10.1", "@wordpress/data-controls": "1.10.1",
"@wordpress/date": "3.9.0", "@wordpress/date": "3.9.0",
@ -162,12 +163,11 @@
"@wordpress/babel-plugin-import-jsx-pragma": "1.1.3", "@wordpress/babel-plugin-import-jsx-pragma": "1.1.3",
"@wordpress/babel-plugin-makepot": "2.1.3", "@wordpress/babel-plugin-makepot": "2.1.3",
"@wordpress/babel-preset-default": "3.0.2", "@wordpress/babel-preset-default": "3.0.2",
"@wordpress/base-styles": "1.8.0",
"@wordpress/browserslist-config": "2.6.0", "@wordpress/browserslist-config": "2.6.0",
"@wordpress/custom-templated-path-webpack-plugin": "1.6.0", "@wordpress/custom-templated-path-webpack-plugin": "1.6.0",
"@wordpress/eslint-plugin": "3.4.1", "@wordpress/eslint-plugin": "3.4.1",
"@wordpress/jest-preset-default": "5.5.0", "@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", "@wordpress/postcss-themes": "1.0.5",
"ast-types": "0.13.3", "ast-types": "0.13.3",
"autoprefixer": "9.8.4", "autoprefixer": "9.8.4",

25
plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-filters-advanced { .woocommerce-filters-advanced {
margin: $gap-large 0; margin: $gap-large 0;
@ -23,9 +21,8 @@
@include breakpoint( '<782px' ) { @include breakpoint( '<782px' ) {
margin: $gap 0; margin: $gap 0;
border: 1px solid $core-grey-light-700; border: 1px solid $gray-400;
} }
@include breakpoint( '<400px' ) { @include breakpoint( '<400px' ) {
margin: $gap-small 0; margin: $gap-small 0;
} }
@ -46,11 +43,11 @@
margin: 0; margin: 0;
display: grid; display: grid;
grid-template-columns: 1fr 40px; grid-template-columns: 1fr 40px;
background-color: $core-grey-light-100; background-color: $gray-100;
border-bottom: 1px solid $core-grey-light-700; border-bottom: 1px solid $gray-400;
&:hover { &:hover {
background-color: $core-grey-light-200; background-color: $gray-200;
} }
.woocommerce-filters-advanced__line-item { .woocommerce-filters-advanced__line-item {
@ -65,7 +62,7 @@
width: 40px; width: 40px;
height: 38px; height: 38px;
align-self: center; align-self: center;
color: $core-grey-dark-500; color: $gray-700;
padding: $gap-smaller; padding: $gap-smaller;
@include breakpoint( '<400px' ) { @include breakpoint( '<400px' ) {
@ -91,11 +88,11 @@
margin: 0; margin: 0;
color: $studio-woocommerce-purple; color: $studio-woocommerce-purple;
display: block; display: block;
background-color: $core-grey-light-100; background-color: $gray-100;
border-bottom: 1px solid $core-grey-light-700; border-bottom: 1px solid $gray-400;
&:hover { &:hover {
background-color: $core-grey-light-200; background-color: $gray-200;
} }
div div { div div {
@ -172,7 +169,7 @@
.woocommerce-filters-advanced__add-button { .woocommerce-filters-advanced__add-button {
align-items: center; align-items: center;
color: $core-grey-dark-500; color: $gray-700;
padding: $gap-smaller; padding: $gap-smaller;
svg { svg {
@ -212,11 +209,11 @@
padding: $gap-smaller; padding: $gap-smaller;
&:hover { &:hover {
background-color: $core-grey-light-200; background-color: $gray-200;
} }
&:not(:disabled):not([aria-disabled='true']):focus { &:not(:disabled):not([aria-disabled='true']):focus {
background-color: $core-grey-light-300; background-color: $gray-100;
box-shadow: none; box-shadow: none;
} }
} }

57
plugins/woocommerce-admin/packages/components/src/calendar/style.scss
View File

@ -1,9 +1,7 @@
.woocommerce-calendar { .woocommerce-calendar {
width: 100%; width: 100%;
background-color: $core-grey-light-100; background-color: $gray-100;
border-top: 1px solid $core-grey-light-700; border-top: 1px solid $gray-400;
height: 396px; height: 396px;
&.is-mobile { &.is-mobile {
@ -24,49 +22,49 @@
} }
.CalendarDay__selected_span { .CalendarDay__selected_span {
background: theme(primary); background: var(--wp-admin-theme-color);
border: 1px solid $core-grey-light-700; border: 1px solid $gray-400;
&:hover { &:hover {
background: theme(secondary); background: var(--wp-admin-theme-color-darker-10);
border: 1px solid $core-grey-light-500; border: 1px solid $gray-100;
} }
} }
.CalendarDay__selected { .CalendarDay__selected {
background: color(theme(primary) shade(20%)); background: var(--wp-admin-theme-color-darker-20);
border: 1px solid $core-grey-light-700; border: 1px solid $gray-400;
&:hover { &:hover {
background: theme(secondary); background: var(--wp-admin-theme-color-darker-10);
border: 1px solid $core-grey-light-500; border: 1px solid $gray-100;
} }
} }
.CalendarDay__hovered_span { .CalendarDay__hovered_span {
background: color(theme(primary) shade(15%)); background: var(--wp-admin-theme-color-darker-10);
border: 1px solid $core-grey-light-500; border: 1px solid $gray-100;
color: $studio-white; color: $studio-white;
&:hover { &:hover {
color: $studio-white; color: $studio-white;
background: theme(primary); background: var(--wp-admin-theme-color);
} }
} }
.CalendarDay__blocked_out_of_range { .CalendarDay__blocked_out_of_range {
color: $core-grey-light-900; color: $gray-400;
} }
.DayPicker_transitionContainer, .DayPicker_transitionContainer,
.CalendarMonthGrid, .CalendarMonthGrid,
.CalendarMonth, .CalendarMonth,
.DayPicker { .DayPicker {
background-color: $core-grey-light-100; background-color: $gray-100;
} }
.DayPicker_weekHeader_li { .DayPicker_weekHeader_li {
color: $core-grey-dark-400; color: $gray-700;
} }
.DayPickerNavigation_button { .DayPickerNavigation_button {
@ -122,7 +120,7 @@
left: 10px; left: 10px;
path { path {
fill: $core-grey-dark-300; fill: $gray-700;
} }
} }
@ -136,7 +134,7 @@
&.is-empty { &.is-empty {
.dashicons-calendar path { .dashicons-calendar path {
fill: $core-grey-dark-300; fill: $gray-700;
} }
} }
@ -150,26 +148,29 @@
box-shadow: inset 0 0 8px $error-red; box-shadow: inset 0 0 8px $error-red;
&:focus { &: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);
} }
} }
} }
.woocommerce-calendar__input-text { .woocommerce-calendar__input-text {
color: $core-grey-dark-500; color: $gray-700;
border-radius: 3px; border-radius: 3px;
padding: 10px 10px 10px 30px; padding: 10px 10px 10px 30px;
width: 100%; width: 100%;
@include font-size( 13 ); @include font-size( 13 );
&::placeholder { &::placeholder {
color: $core-grey-dark-300; color: $gray-700;
} }
} }
} }
.woocommerce-filters-date__content { .woocommerce-filters-date__content {
&.is-mobile .woocommerce-calendar__input-error .components-popover__content { &.is-mobile
.woocommerce-calendar__input-error
.components-popover__content {
height: initial; height: initial;
} }
} }
@ -187,7 +188,7 @@
} }
.components-popover__content { .components-popover__content {
background-color: $core-grey-dark-400; background-color: $gray-700;
color: $studio-white; color: $studio-white;
padding: 0.5em; padding: 0.5em;
border: none; border: none;
@ -201,13 +202,13 @@
} }
&:not(.no-arrow):not(.is-mobile).is-bottom::before { &:not(.no-arrow):not(.is-mobile).is-bottom::before {
border-bottom-color: $core-grey-dark-400; border-bottom-color: $gray-700;
z-index: 1; z-index: 1;
top: -6px; top: -6px;
} }
&:not(.no-arrow):not(.is-mobile).is-top::after { &:not(.no-arrow):not(.is-mobile).is-top::after {
border-top-color: $core-grey-dark-400; border-top-color: $gray-700;
z-index: 1; z-index: 1;
top: 0; top: 0;
} }
@ -219,7 +220,7 @@
font-weight: 100; font-weight: 100;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
color: $core-grey-dark-300; color: $gray-700;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 1em; padding: 1em;

20
plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss
View File

@ -1,5 +1,3 @@
.woocommerce-legend { .woocommerce-legend {
&.has-total { &.has-total {
padding-bottom: 50px; padding-bottom: 50px;
@ -7,7 +5,7 @@
} }
&.woocommerce-legend__direction-column { &.woocommerce-legend__direction-column {
border-right: 1px solid $core-grey-light-700; border-right: 1px solid $gray-400;
min-width: 320px; min-width: 320px;
.woocommerce-chart__footer & { .woocommerce-chart__footer & {
@ -28,7 +26,7 @@
overflow: auto; overflow: auto;
.woocommerce-chart__footer & { .woocommerce-chart__footer & {
border-top: 1px solid $core-grey-light-700; border-top: 1px solid $gray-400;
height: 100%; height: 100%;
max-height: none; max-height: none;
min-height: none; min-height: none;
@ -56,7 +54,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $studio-white; background-color: $studio-white;
color: $core-grey-dark-500; color: $gray-700;
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
@ -79,13 +77,13 @@
&:hover { &:hover {
input { input {
~ .woocommerce-legend__item-checkmark { ~ .woocommerce-legend__item-checkmark {
background-color: $core-grey-light-200; background-color: $gray-200;
} }
} }
} }
.woocommerce-legend__item-checkmark { .woocommerce-legend__item-checkmark {
border: 1px solid $core-grey-light-900; border: 1px solid $gray-400;
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 0; left: 0;
@ -132,13 +130,13 @@
.woocommerce-legend__item-container { .woocommerce-legend__item-container {
.woocommerce-legend__item-checkmark { .woocommerce-legend__item-checkmark {
outline: 2px solid $core-grey-light-900; outline: 2px solid $gray-400;
} }
} }
} }
&:hover { &:hover {
background-color: $core-grey-light-100; background-color: $gray-100;
} }
} }
@ -190,9 +188,9 @@
.woocommerce-legend__total { .woocommerce-legend__total {
align-items: center; align-items: center;
background: $studio-white; background: $studio-white;
border-top: 1px solid $core-grey-light-700; border-top: 1px solid $gray-400;
bottom: 0; bottom: 0;
color: $core-grey-dark-500; color: $gray-700;
display: flex; display: flex;
height: 50px; height: 50px;
justify-content: center; justify-content: center;

16
plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss
View File

@ -1,4 +1,3 @@
/** /**
* Internal Dependencies * Internal Dependencies
*/ */
@ -19,7 +18,7 @@
.d3-chart__empty-message { .d3-chart__empty-message {
align-items: center; align-items: center;
bottom: 0; bottom: 0;
color: $core-grey-dark-300; color: $gray-700;
display: flex; display: flex;
@include font-size( 18 ); @include font-size( 18 );
font-weight: bold; font-weight: bold;
@ -41,7 +40,7 @@
} }
.d3-chart__tooltip { .d3-chart__tooltip {
border: 1px solid $core-grey-light-700; border: 1px solid $gray-400;
position: absolute; position: absolute;
display: flex; display: flex;
min-width: 324px; min-width: 324px;
@ -49,7 +48,8 @@
background-color: $studio-white; background-color: $studio-white;
text-align: left; text-align: left;
padding: 17px; 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-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
@ -68,7 +68,7 @@
width: 100%; width: 100%;
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;
color: $core-grey-dark-300; color: $gray-700;
margin-top: 0; margin-top: 0;
} }
@ -120,14 +120,14 @@
.grid { .grid {
.tick { .tick {
line { line {
stroke: $core-grey-light-500; stroke: $gray-100;
stroke-width: 1; stroke-width: 1;
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
&:first-child { &:first-child {
line { line {
stroke: $core-grey-dark-500; stroke: $gray-700;
} }
} }
} }
@ -143,7 +143,7 @@
text-anchor: start; text-anchor: start;
&.tick { &.tick {
&text { &text {
fill: $core-grey-dark-500; fill: $gray-700;
} }
} }
} }

12
plugins/woocommerce-admin/packages/components/src/chart/style.scss
View File

@ -1,11 +1,9 @@
.woocommerce-chart { .woocommerce-chart {
margin-top: -$gap; margin-top: -$gap;
margin-bottom: $gap-large; margin-bottom: $gap-large;
background: $studio-white; background: $studio-white;
border: 1px solid $core-grey-light-700; border: 1px solid $gray-400;
border-top: 0; border-top: 0;
@include breakpoint( '<782px' ) { @include breakpoint( '<782px' ) {
margin-left: -16px; margin-left: -16px;
margin-right: -16px; margin-right: -16px;
@ -17,7 +15,7 @@
.woocommerce-chart__header { .woocommerce-chart__header {
min-height: 50px; min-height: 50px;
border-bottom: 1px solid $core-grey-light-700; border-bottom: 1px solid $gray-400;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
@ -66,7 +64,7 @@
.woocommerce-chart__interval-select { .woocommerce-chart__interval-select {
align-items: start; align-items: start;
border-right: 1px solid $core-grey-light-700; border-right: 1px solid $gray-400;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -104,12 +102,12 @@
background: transparent !important; background: transparent !important;
&.components-button { &.components-button {
color: $core-grey-light-700; color: $gray-400;
display: inline-flex; display: inline-flex;
padding: 8px; padding: 8px;
&.woocommerce-chart__type-button-selected { &.woocommerce-chart__type-button-selected {
color: $core-grey-dark-500; color: $gray-700;
} }
} }
} }

8
plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-filters-date__content { .woocommerce-filters-date__content {
&.is-mobile { &.is-mobile {
.components-popover__header { .components-popover__header {
@ -20,7 +18,7 @@
.woocommerce-filters-date__tabs { .woocommerce-filters-date__tabs {
height: calc(100% - 42px); height: calc(100% - 42px);
border-top: 1px solid $core-grey-light-700; border-top: 1px solid $gray-400;
.components-tab-panel__tabs { .components-tab-panel__tabs {
display: flex; display: flex;
@ -47,7 +45,7 @@
font-weight: 100; font-weight: 100;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
color: $core-grey-dark-300; color: $gray-700;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 1em; padding: 1em;
@ -63,7 +61,7 @@
background-color: $studio-white; background-color: $studio-white;
&.is-custom { &.is-custom {
border-top: 1px solid $core-grey-light-700; border-top: 1px solid $gray-400;
} }
} }

14
plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss
View File

@ -1,10 +1,8 @@
.woocommerce-page .woocommerce-dropdown-button { .woocommerce-page .woocommerce-dropdown-button {
background-color: $studio-white; background-color: $studio-white;
position: relative; position: relative;
border: 1px solid $core-grey-light-500; border: 1px solid $gray-100;
color: $core-grey-dark-500; color: $gray-700;
border-radius: 4px; border-radius: 4px;
padding: 0 40px 0 0; padding: 0 40px 0 0;
width: 100%; width: 100%;
@ -12,7 +10,9 @@
&::after { &::after {
content: ''; 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; position: absolute;
right: 14px; right: 14px;
width: 32px; width: 32px;
@ -29,7 +29,7 @@
&:hover, &:hover,
&:active, &:active,
&.is-open { &.is-open {
background-color: $core-grey-light-100; background-color: $gray-100;
} }
&.is-multi-line .woocommerce-dropdown-button__labels { &.is-multi-line .woocommerce-dropdown-button__labels {
@ -37,7 +37,7 @@
} }
&:not(:focus):not(.is-open) { &:not(:focus):not(.is-open) {
border-color: $core-form-grey; border-color: $gray-700;
} }
} }

5
plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss
View File

@ -1,4 +1,3 @@
.woocommerce-ellipsis-menu { .woocommerce-ellipsis-menu {
text-align: center; text-align: center;
} }
@ -37,7 +36,7 @@
.woocommerce-ellipsis-menu__item { .woocommerce-ellipsis-menu__item {
cursor: pointer; cursor: pointer;
color: $core-grey-dark-300; color: $gray-700;
&:focus { &:focus {
box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px $studio-white; box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px $studio-white;
@ -52,7 +51,7 @@
.components-base-control__label, .components-base-control__label,
.woocommerce-ellipsis-menu__title { .woocommerce-ellipsis-menu__title {
color: $core-grey-dark-800; color: $gray-900;
padding-top: $gap-smaller; padding-top: $gap-smaller;
padding-bottom: $gap-smaller; padding-bottom: $gap-smaller;
@include font-size( 15 ); @include font-size( 15 );

18
plugins/woocommerce-admin/packages/components/src/filter-picker/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-filters-filter__content { .woocommerce-filters-filter__content {
&.is-mobile { &.is-mobile {
.components-popover__header-title { .components-popover__header-title {
@ -7,11 +5,11 @@
font-weight: 100; font-weight: 100;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
color: $core-grey-dark-500; color: $gray-700;
} }
.woocommerce-filters-filter__content-list-item:last-child { .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 { .woocommerce-filters-filter__content-list-item {
border: 1px solid transparent; border: 1px solid transparent;
border-bottom: 1px solid $core-grey-light-700; border-bottom: 1px solid $gray-400;
margin: 0; margin: 0;
&:last-child { &:last-child {
@ -58,20 +56,20 @@
display: flex; display: flex;
width: 100%; width: 100%;
padding: 1em 1em 1em 3em; padding: 1em 1em 1em 3em;
background-color: $core-grey-light-100; background-color: $gray-100;
text-align: left; text-align: left;
&.components-button { &.components-button {
color: $core-grey-dark-500; color: $gray-700;
} }
&:hover { &:hover {
background-color: $core-grey-light-200; background-color: $gray-200;
color: $core-grey-dark-500; color: $gray-700;
} }
&.components-button:not(:disabled):not([aria-disabled='true']):focus { &.components-button:not(:disabled):not([aria-disabled='true']):focus {
background-color: $core-grey-light-100; background-color: $gray-100;
} }
svg { svg {

10
plugins/woocommerce-admin/packages/components/src/filters/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-filters { .woocommerce-filters {
.components-base-control__field { .components-base-control__field {
margin-bottom: 0; margin-bottom: 0;
@ -68,12 +66,12 @@
.woocommerce-filters-filter__content { .woocommerce-filters-filter__content {
.components-popover__content { .components-popover__content {
width: 320px; width: 320px;
border: 1px solid $core-grey-light-700; border: 1px solid $gray-400;
background-color: $studio-white; background-color: $studio-white;
} }
.woocommerce-calendar__input-error .components-popover__content { .woocommerce-calendar__input-error .components-popover__content {
background-color: $core-grey-dark-400; background-color: $gray-700;
} }
&.is-mobile { &.is-mobile {
@ -91,8 +89,8 @@
.woocommerce-filters__compare-body { .woocommerce-filters__compare-body {
padding: $gap; padding: $gap;
background-color: $core-grey-light-100; background-color: $gray-100;
border-bottom: 1px solid $core-grey-light-500; border-bottom: 1px solid $gray-100;
} }
.woocommerce-filters__compare-footer { .woocommerce-filters__compare-footer {

3
plugins/woocommerce-admin/packages/components/src/flag/style.scss
View File

@ -1,11 +1,10 @@
.woocommerce-flag { .woocommerce-flag {
span { span {
vertical-align: middle; vertical-align: middle;
} }
.woocommerce-flag__fallback { .woocommerce-flag__fallback {
background: $core-grey-light-500; background: $gray-100;
color: transparent; color: transparent;
width: 24px; width: 24px;
height: 18px; height: 18px;

4
plugins/woocommerce-admin/packages/components/src/list/stories/style.scss
View File

@ -1,11 +1,11 @@
.storybook-custom-list { .storybook-custom-list {
border: 1px solid $core-grey-light-900; border: 1px solid $gray-400;
border-radius: 2px; border-radius: 2px;
padding: 0; padding: 0;
.woocommerce-list__item { .woocommerce-list__item {
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid $core-grey-light-600; border-top: 1px solid $gray-200;
} }
.woocommerce-list__item-before { .woocommerce-list__item-before {

15
plugins/woocommerce-admin/packages/components/src/list/style.scss
View File

@ -20,7 +20,8 @@
padding: $gap $gap-large; padding: $gap $gap-large;
&:focus { &: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;
} }
} }
@ -49,11 +50,11 @@
margin-left: auto; margin-left: auto;
} }
$chevron-color: $dark-gray-primary; $chevron-color: $gray-900;
$background-color: $white; $background-color: $white;
$background-color-hover: $light-gray-100; $background-color-hover: $gray-100;
$border-color: $light-gray-tertiary; $border-color: $gray-100;
$foreground-color: $theme-color; $foreground-color: var(--wp-admin-theme-color);
$foreground-color-hover: color($foreground-color shade(20%)); $foreground-color-hover: color($foreground-color shade(20%));
background-color: $background-color; background-color: $background-color;
@ -88,11 +89,11 @@
&.is-complete { &.is-complete {
.woocommerce-task__icon { .woocommerce-task__icon {
background-color: $theme-color; background-color: var(--wp-admin-theme-color);
} }
.woocommerce-list__item-title { .woocommerce-list__item-title {
color: $dark-gray-500; color: $gray-700;
} }
.woocommerce-list__item-content { .woocommerce-list__item-content {

6
plugins/woocommerce-admin/packages/components/src/order-status/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-order-status { .woocommerce-order-status {
display: flex; display: flex;
align-items: center; align-items: center;
@ -10,10 +8,10 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
display: block; display: block;
background: $core-grey-light-700; background: $gray-400;
margin-right: $gap-smallest * 2; margin-right: $gap-smallest * 2;
border-radius: 50%; border-radius: 50%;
border: 3px solid $core-grey-light-500; border: 3px solid $gray-100;
&.is-processing { &.is-processing {
background: $valid-green; background: $valid-green;

4
plugins/woocommerce-admin/packages/components/src/pagination/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-pagination { .woocommerce-pagination {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -36,7 +34,7 @@
} }
.components-button:not(:disabled):not([aria-disabled='true']):hover { .components-button:not(:disabled):not([aria-disabled='true']):hover {
color: $core-grey-dark-300; color: $gray-700;
} }
button:first-child { button:first-child {

6
plugins/woocommerce-admin/packages/components/src/rating/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-rating { .woocommerce-rating {
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
@ -8,7 +6,7 @@
white-space: nowrap; white-space: nowrap;
.gridicon { .gridicon {
fill: $core-grey-light-600; fill: $gray-200;
} }
.woocommerce-rating__star-outline { .woocommerce-rating__star-outline {
@ -19,7 +17,7 @@
overflow: hidden; overflow: hidden;
.gridicon { .gridicon {
fill: $core-grey-dark-500; fill: $gray-700;
} }
} }
} }

26
plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss
View File

@ -9,7 +9,7 @@
padding: $gap 0 0; padding: $gap 0 0;
// 76px is the height of 1 row of tags. // 76px is the height of 1 row of tags.
min-height: 76px; min-height: 76px;
border-top: 1px solid $core-grey-light-500; border-top: 1px solid $gray-100;
.woocommerce-search-list__selected-header { .woocommerce-search-list__selected-header {
margin-bottom: $gap-smaller; margin-bottom: $gap-smaller;
@ -27,7 +27,7 @@
.woocommerce-search-list__search { .woocommerce-search-list__search {
margin: $gap 0; margin: $gap 0;
padding: $gap 0 0; padding: $gap 0 0;
border-top: 1px solid $core-grey-light-500; border-top: 1px solid $gray-100;
.components-base-control__field { .components-base-control__field {
margin-bottom: $gap; margin-bottom: $gap;
@ -39,8 +39,8 @@
max-height: 17em; max-height: 17em;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
border-top: 1px solid $core-grey-light-500; border-top: 1px solid $gray-100;
border-bottom: 1px solid $core-grey-light-500; border-bottom: 1px solid $gray-100;
&.is-loading { &.is-loading {
padding: $gap-small 0; padding: $gap-small 0;
@ -78,7 +78,7 @@
} }
& > [role='menu'] { & > [role='menu'] {
border: 1px solid $core-grey-light-500; border: 1px solid $gray-100;
border-bottom: none; border-bottom: none;
} }
@ -89,11 +89,11 @@
padding: $gap-small $gap; padding: $gap-small $gap;
background: $studio-white; background: $studio-white;
// !important to keep the border around on hover // !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; color: $gray-700;
@include hover-state { @include hover-state {
background: $core-grey-light-100; background: $gray-100;
} }
&:last-child { &:last-child {
@ -122,7 +122,7 @@
} }
&:not(.depth-0) + .depth-0 { &: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 // Anything deeper than 5 levels will use this fallback depth
@ -148,7 +148,7 @@
.woocommerce-search-list__item-prefix { .woocommerce-search-list__item-prefix {
display: none; display: none;
color: $core-grey-dark-300; color: $gray-700;
} }
&.is-searching, &.is-searching,
@ -170,18 +170,18 @@
&.is-searching { &.is-searching {
.woocommerce-search-list__item-name { .woocommerce-search-list__item-name {
color: $core-grey-dark-900; color: $gray-900;
} }
} }
.woocommerce-search-list__item-count { .woocommerce-search-list__item-count {
flex: 0 1 auto; flex: 0 1 auto;
padding: $gap-smallest/2 $gap-smaller; padding: $gap-smallest/2 $gap-smaller;
border: 1px solid $core-grey-light-500; border: 1px solid $gray-100;
border-radius: 12px; border-radius: 12px;
font-size: 0.8em; font-size: 0.8em;
line-height: 1.4; line-height: 1.4;
color: $core-grey-dark-300; color: $gray-700;
background: $studio-white; background: $studio-white;
white-space: nowrap; white-space: nowrap;
} }

25
plugins/woocommerce-admin/packages/components/src/search/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-search.woocommerce-select-control { .woocommerce-search.woocommerce-select-control {
position: relative; position: relative;
@ -7,7 +5,7 @@
position: absolute; position: absolute;
top: 9px; top: 9px;
left: 10px; left: 10px;
color: $core-grey-light-900; color: $gray-400;
font-size: 20px; font-size: 20px;
} }
@ -19,16 +17,16 @@
.woocommerce-select-control__control { .woocommerce-select-control__control {
height: auto; height: auto;
border: 1px solid $core-grey-light-700; border: 1px solid $gray-400;
font-size: 13px; font-size: 13px;
width: 100%; width: 100%;
padding: 3px 2px 3px 36px; padding: 3px 2px 3px 36px;
border-radius: 4px; border-radius: 4px;
border-color: $core-form-grey; border-color: $gray-700;
box-shadow: $shadow-popover; box-shadow: $shadow-popover;
&.is-active { &.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, .is-active.components-base-control .components-base-control__label,
.with-value.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; display: none;
} }
@ -68,7 +68,7 @@
} }
.woocommerce-select-control__listbox { .woocommerce-select-control__listbox {
border: 1px solid $core-grey-light-700; border: 1px solid $gray-400;
top: 38px; top: 38px;
} }
@ -87,8 +87,8 @@
padding: $gap-small; padding: $gap-small;
color: $studio-woocommerce-purple; color: $studio-woocommerce-purple;
text-align: left; text-align: left;
background: $core-grey-light-100; background: $gray-100;
border-bottom: 1px solid $core-grey-light-500; border-bottom: 1px solid $gray-100;
font-size: 13px; font-size: 13px;
min-height: 43px; min-height: 43px;
@ -99,7 +99,7 @@
&:hover { &:hover {
box-shadow: none; box-shadow: none;
color: $studio-woocommerce-purple; color: $studio-woocommerce-purple;
background: $core-grey-light-200; background: $gray-200;
} }
&.is-selected, &.is-selected,
@ -107,7 +107,8 @@
&:active { &:active {
color: $studio-woocommerce-purple; color: $studio-woocommerce-purple;
background: $studio-white; 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 $gray-200,
inset 0 0 0 2px $wp-admin-sidebar;
} }
.woocommerce-search__result-thumbnail { .woocommerce-search__result-thumbnail {

26
plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss
View File

@ -1,27 +1,25 @@
.woocommerce-segmented-selection { .woocommerce-segmented-selection {
width: 100%; width: 100%;
color: $core-grey-dark-500; color: $gray-700;
} }
.woocommerce-segmented-selection__container { .woocommerce-segmented-selection__container {
width: 100%; width: 100%;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
display: grid; display: grid;
border-top: 1px solid $core-grey-light-700; border-top: 1px solid $gray-400;
border-bottom: 1px solid $core-grey-light-700; border-bottom: 1px solid $gray-400;
background-color: $core-grey-light-700; background-color: $gray-400;
} }
.woocommerce-segmented-selection__item { .woocommerce-segmented-selection__item {
&:nth-child(2n) { &:nth-child(2n) {
border-left: 1px solid $core-grey-light-700; border-left: 1px solid $gray-400;
border-top: 1px solid $core-grey-light-700; border-top: 1px solid $gray-400;
} }
&:nth-child(2n + 1) { &:nth-child(2n + 1) {
border-top: 1px solid $core-grey-light-700; border-top: 1px solid $gray-400;
} }
&:nth-child(-n + 2) { &:nth-child(-n + 2) {
@ -30,18 +28,18 @@
} }
.woocommerce-segmented-selection__label { .woocommerce-segmented-selection__label {
background-color: $core-grey-light-100; background-color: $gray-100;
padding: $gap-small $gap-small $gap-small $gap-larger; padding: $gap-small $gap-small $gap-small $gap-larger;
position: relative; position: relative;
display: block; display: block;
height: 100%; height: 100%;
&:active { &:active {
background-color: $core-grey-light-200; background-color: $gray-200;
} }
&:hover { &:hover {
background-color: $core-grey-light-200; background-color: $gray-200;
} }
} }
@ -51,7 +49,7 @@
left: -9999px; left: -9999px;
&:active + label .woocommerce-segmented-selection__label { &:active + label .woocommerce-segmented-selection__label {
background-color: $core-grey-light-200; background-color: $gray-200;
} }
&:checked + label .woocommerce-segmented-selection__label { &:checked + label .woocommerce-segmented-selection__label {
@ -62,7 +60,7 @@
content: ''; content: '';
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: $theme-color; background-color: var(--wp-admin-theme-color);
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translate(-20px, -50%); transform: translate(-20px, -50%);

10
plugins/woocommerce-admin/packages/components/src/stepper/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-stepper { .woocommerce-stepper {
$step-icon-size: 24px; $step-icon-size: 24px;
@ -60,7 +58,7 @@
min-width: 24px; min-width: 24px;
width: 24px; width: 24px;
border-radius: 50%; border-radius: 50%;
background: $blue-medium-focus; background: var(--wp-admin-theme-color);
} }
.woocommerce-spinner__circle { .woocommerce-spinner__circle {
@ -70,7 +68,7 @@
&.is-active, &.is-active,
&.is-complete { &.is-complete {
.woocommerce-stepper__step-icon { .woocommerce-stepper__step-icon {
background: $blue-medium-focus; background: var(--wp-admin-theme-color);
color: $studio-white; color: $studio-white;
} }
@ -149,8 +147,8 @@
content: ''; content: '';
position: absolute; position: absolute;
left: $step-icon-size / 2 + $gap-smaller; left: $step-icon-size / 2 + $gap-smaller;
top: $step-icon-size + ($gap-smaller * 2); top: $step-icon-size + ( $gap-smaller * 2 );
height: calc(100% - #{$step-icon-size} - #{ $gap-smaller * 2 }); height: calc(100% - #{$step-icon-size} - #{$gap-smaller * 2});
border-left: 1px solid $studio-gray-5; border-left: 1px solid $studio-gray-5;
} }

46
plugins/woocommerce-admin/packages/components/src/summary/style.scss
View File

@ -1,17 +1,17 @@
// Set up some local color variables to make the CSS more clear // Set up some local color variables to make the CSS more clear
$border: $light-gray-tertiary; $border: $gray-200;
// A local mixin to generate the grid template and border logic // A local mixin to generate the grid template and border logic
@mixin make-cols( $i ) { @mixin make-cols( $i ) {
grid-template-columns: repeat($i, 1fr); 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; 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,
& ~ .woocommerce-summary__item-container .woocommerce-summary__item { & ~ .woocommerce-summary__item-container .woocommerce-summary__item {
border-bottom-color: $border; border-bottom-color: $border;
@ -34,7 +34,7 @@ $border: $light-gray-tertiary;
border-width: 1px 0 0 1px; border-width: 1px 0 0 1px;
border-style: solid; border-style: solid;
border-color: $border; border-color: $border;
background-color: $core-grey-light-300; background-color: $gray-100;
box-shadow: inset -1px -1px 0 $border; box-shadow: inset -1px -1px 0 $border;
@include breakpoint( '<782px' ) { @include breakpoint( '<782px' ) {
@ -159,7 +159,8 @@ $border: $light-gray-tertiary;
&.has-9-items, &.has-9-items,
&.has-10-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; border-right-color: $border;
} }
} }
@ -258,12 +259,12 @@ $border: $light-gray-tertiary;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
padding: $gap-large; padding: $gap-large;
background-color: $core-grey-light-100; background-color: $gray-100;
border-bottom: 1px solid $border; border-bottom: 1px solid $border;
border-right: 1px solid $border; border-right: 1px solid $border;
line-height: 1.4em; line-height: 1.4em;
text-decoration: none; text-decoration: none;
color: $theme-color; color: $gray-900;
&.components-button { &.components-button {
height: auto; height: auto;
@ -271,26 +272,29 @@ $border: $light-gray-tertiary;
align-items: normal; align-items: normal;
} }
&:hover { &:hover {
background-color: $light-gray-100; background-color: $gray-100;
color: color($theme-color shade(20%)); color: var(--wp-admin-theme-color);
.woocommerce-summary__item-label {
color: var(--wp-admin-theme-color);
}
} }
&:active { &:active {
background-color: $light-gray-200; background-color: $gray-100;
} }
&:focus { &:focus {
// !important to override button styles // !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 { &.is-selected {
&:focus { &:focus {
// !important to override button styles // !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 $gray-700, inset 1px 0 0 $gray-700,
inset 0 -4px 0 var(--wp-admin-theme-color) !important;
} }
} }
@ -312,26 +316,26 @@ $border: $light-gray-tertiary;
.woocommerce-summary__item-label { .woocommerce-summary__item-label {
display: block; display: block;
margin-bottom: $gap; margin-bottom: $gap;
color: $theme-color; color: $gray-700;
} }
.woocommerce-summary__item-value { .woocommerce-summary__item-value {
margin-bottom: $gap-smallest; margin-bottom: $gap-smallest;
font-weight: 500; font-weight: 500;
color: $dark-gray-primary; color: $gray-900;
} }
.woocommerce-summary__item-delta { .woocommerce-summary__item-delta {
padding: 5px; padding: 5px;
border-radius: 3px; border-radius: 3px;
height: min-content; height: min-content;
background-color: $light-gray-500; background-color: $gray-100;
color: $dark-gray-primary; color: $gray-900;
} }
&.is-selected { &.is-selected {
background: $studio-white; 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 { .woocommerce-summary__item-value {
font-weight: 600; font-weight: 600;

22
plugins/woocommerce-admin/packages/components/src/table/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-table { .woocommerce-table {
.woocommerce-card__body { .woocommerce-card__body {
padding: 0; padding: 0;
@ -20,12 +18,12 @@
$header-row-height: #{$gap-smaller * 2} + #{$row-text-height} + 1px; $header-row-height: #{$gap-smaller * 2} + #{$row-text-height} + 1px;
&.is-empty { &.is-empty {
align-items: center; align-items: center;
background: $core-grey-light-100; background: $gray-100;
color: $core-grey-dark-500; color: $gray-700;
display: flex; display: flex;
// Default to 5 rows for browsers not supporting custom properties (IE11) // 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} ) * 5);
height: calc(#{$header-row-height} + (#{$row-height}) * var(--number-of-rows)); height: calc(#{$header-row-height} + ( #{$row-height} ) * var(--number-of-rows));
justify-content: center; justify-content: center;
padding: $gap; padding: $gap;
text-align: center; text-align: center;
@ -106,7 +104,7 @@
tr:hover, tr:hover,
tr:focus-within { tr:focus-within {
background-color: $core-grey-light-200; background-color: $gray-200;
td, td,
th { th {
background: transparent; background: transparent;
@ -118,7 +116,7 @@
.woocommerce-table__item, .woocommerce-table__item,
.woocommerce-table__empty-item { .woocommerce-table__empty-item {
padding: $gap $gap-large; padding: $gap $gap-large;
border-bottom: 1px solid $core-grey-light-500; border-bottom: 1px solid $gray-100;
} }
.woocommerce-table__header, .woocommerce-table__header,
@ -163,7 +161,7 @@
} }
&.is-sorted { &.is-sorted {
background-color: $core-grey-light-100; background-color: $gray-100;
} }
&.is-checkbox-column { &.is-checkbox-column {
@ -180,7 +178,7 @@
.woocommerce-table__empty-item { .woocommerce-table__empty-item {
text-align: center; text-align: center;
@include font-size( 18 ); @include font-size( 18 );
color: $core-grey-dark-300; color: $gray-700;
font-weight: bold; font-weight: bold;
@include breakpoint( '<782px' ) { @include breakpoint( '<782px' ) {
@ -195,12 +193,12 @@ th.woocommerce-table__item {
.woocommerce-table__header { .woocommerce-table__header {
padding: $gap-smaller $gap-large; padding: $gap-smaller $gap-large;
background-color: #f8f9fa; background-color: #f8f9fa;
border-bottom: 1px solid $core-grey-light-700; border-bottom: 1px solid $gray-400;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
& + .woocommerce-table__header { & + .woocommerce-table__header {
border-left: 1px solid $core-grey-light-700; border-left: 1px solid $gray-400;
} }
&.is-left-aligned.is-sortable { &.is-left-aligned.is-sortable {

10
plugins/woocommerce-admin/packages/components/src/tag/style.scss
View File

@ -1,5 +1,3 @@
.woocommerce-tag { .woocommerce-tag {
display: inline-flex; display: inline-flex;
margin: 1px 4px 1px 0; margin: 1px 4px 1px 0;
@ -10,7 +8,7 @@
.woocommerce-tag__remove { .woocommerce-tag__remove {
display: inline-block; display: inline-block;
line-height: 24px; line-height: 24px;
background: $core-grey-light-500; background: $gray-100;
transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
} }
@ -18,7 +16,7 @@
align-self: center; align-self: center;
padding: 0 $gap-smaller; padding: 0 $gap-smaller;
border-radius: 12px; border-radius: 12px;
color: $core-grey-dark-500; color: $gray-700;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -33,13 +31,13 @@
cursor: pointer; cursor: pointer;
padding: 0 2px; padding: 0 2px;
border-radius: 0 12px 12px 0; border-radius: 0 12px 12px 0;
color: $core-grey-dark-500; color: $gray-700;
line-height: 10px; line-height: 10px;
text-indent: 0; text-indent: 0;
height: 24px; height: 24px;
&:hover { &:hover {
color: $core-grey-dark-700; color: $gray-900;
} }
} }
} }

6
plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/style.scss
View File

@ -15,7 +15,7 @@
border-right-width: 0; border-right-width: 0;
& + .text-control-with-affixes__suffix { & + .text-control-with-affixes__suffix {
border-left: 1px solid $core-grey-light-500; border-left: 1px solid $gray-100;
} }
} }
} }
@ -37,7 +37,7 @@
background: $studio-white; background: $studio-white;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: $core-form-grey; border-color: $gray-700;
color: $gray-text; color: $gray-text;
padding: 7px 14px; padding: 7px 14px;
white-space: nowrap; white-space: nowrap;
@ -63,7 +63,7 @@
& + input[type='text'], & + input[type='text'],
& + input[type='number'] { & + input[type='number'] {
&:disabled { &:disabled {
border-left-color: $core-grey-light-500; border-left-color: $gray-100;
} }
} }
} }

21
plugins/woocommerce-admin/packages/components/src/text-control/style.scss
View File

@ -1,5 +1,3 @@
.muriel-input-text { .muriel-input-text {
background: $studio-white; background: $studio-white;
border: 1px solid $studio-gray-20; 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; border: 0;
box-shadow: none; box-shadow: none;
font-size: 16px; font-size: 16px;
@ -39,7 +52,7 @@
} }
&.active { &.active {
box-shadow: 0 0 0 2px $blue-medium-focus; box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
border-color: transparent; border-color: transparent;
input { input {