Skip to content
This repository has been archived by the owner on Jul 12, 2024. It is now read-only.

Update @wordpress/base-styles and replace deprecated variables #4759

Merged
merged 36 commits into from
Jul 17, 2020
Merged

Update @wordpress/base-styles and replace deprecated variables #4759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
6091dc6
Update base-styles.
samueljseay Jul 1, 2020
fd69b17
Remove -color which is no longer supported by base-styles.
samueljseay Jul 2, 2020
db0910d
Replace -medium-focus with the base-styles CSS var.
samueljseay Jul 3, 2020
c420a70
Update @wordpress/components to 9.9.0
samueljseay Jul 6, 2020
f463275
Replace postcss theme calls with css vars generated by base styles.
samueljseay Jul 7, 2020
b4cb6b2
Map the deprecated gray color vars across to the new ones in base-styles
samueljseay Jul 7, 2020
312d9ad
Remove overrides of vars.
samueljseay Jul 9, 2020
87eac66
Replace $core-grey-light-700 with $gray-400
samueljseay Jul 9, 2020
21bf182
Replace light-gray-secondary with gray-400
samueljseay Jul 10, 2020
5505d3e
Replace dark-gray-primary with gray-900
samueljseay Jul 10, 2020
306d9fc
Replace medium-gray-text with gray-700
samueljseay Jul 10, 2020
64b3bf6
Replace core-grey-dark-900 with gray-900
samueljseay Jul 10, 2020
a9ff5ed
Replace core-grey-light-100 with gray-100
samueljseay Jul 10, 2020
035bcf5
Replace core-grey-light-200 with gray-200
samueljseay Jul 10, 2020
111a20b
Fix some mistakes, replace core-grey-light with gray-100
samueljseay Jul 10, 2020
f6efcce
Update @wordpress/components to 10.0.0 to work with base-styles 2.0.0.
samueljseay Jul 10, 2020
82d3931
Replace core-grey-light 400 & 500 with grey-100
samueljseay Jul 10, 2020
ee3f7bf
Replace core-grey-light-600 with gray-200
samueljseay Jul 10, 2020
dc95860
Replace core-grey-light-900 with gray-400
samueljseay Jul 10, 2020
112ff90
Replace core-grey-dark 150 with gray-600, remove core-grey-dark 100,200
samueljseay Jul 10, 2020
e876b01
Replace core-grey-dark-300 with gray-700
samueljseay Jul 10, 2020
daaa712
Remove core-grey-dark-600
samueljseay Jul 10, 2020
f1ed3f7
Replace core-grey-dark-400 with gray-700
samueljseay Jul 10, 2020
377798c
Replace core-grey-dark-500 with gray-700.
samueljseay Jul 10, 2020
9eb67fe
Replace core-grey-dark-700 with gray-900.
samueljseay Jul 10, 2020
dd0cde1
Replace core-grey-dark-800 with gray-900.
samueljseay Jul 10, 2020
e8ffc35
Replace core-form-grey with gray-700
samueljseay Jul 10, 2020
ad216dd
Fix packages build, adjust greys to match look better.
samueljseay Jul 10, 2020
1b34ac1
Revert a change that is conflicting with main.
samueljseay Jul 10, 2020
6b801df
Bring back core-grey-dark-800 temp to avoid a conflict.
samueljseay Jul 10, 2020
bb1aaa3
Move base-styles to deps from devDeps.
samueljseay Jul 10, 2020
868f5a8
Try updating postcss-plugins-preset
samueljseay Jul 10, 2020
35007f8
Adjustments to usage of gray where a direct replacement wasn't enough.
samueljseay Jul 14, 2020
db83b7f
Introduce an interim gray variable till the design can be refactored.
samueljseay Jul 14, 2020
61ff315
Color harmony 🌈 (#4803)
jameskoster Jul 15, 2020
c2c72e4
Remove new refs to -color.
samueljseay Jul 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions client/analytics/report/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

.woocommerce-analytics__table-placeholder {
.woocommerce-card__body {
padding: 0;
Expand All @@ -18,7 +17,7 @@
// exportable card based on the Gutenberg component that houses wc-admin styles.
.woocommerce-analytics__card {
border-radius: 0;
border: 1px solid $core-grey-light-700;
border: 1px solid $gray-400;
box-shadow: none;
margin-bottom: $gap-large;

Expand All @@ -34,8 +33,8 @@
}

> .woocommerce-card__header {
padding: ($gap - 3) $gap;
border-bottom: 1px solid $core-grey-light-700;
padding: ( $gap - 3 ) $gap;
border-bottom: 1px solid $gray-400;
border-radius: 0;

> .woocommerce-card__title-wrapper > .woocommerce-card__title {
Expand Down
8 changes: 3 additions & 5 deletions client/analytics/settings/setting.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


.woocommerce-setting {
display: flex;
margin-bottom: $gap-large;
Expand All @@ -9,7 +7,7 @@
}

.woocommerce-setting__label {
@include font-size(16);
@include font-size( 16 );
margin-bottom: $gap;
padding-right: $gap;
font-weight: bold;
Expand All @@ -33,7 +31,7 @@
width: 100%;
display: block;
margin-bottom: $gap-small;
color: $core-grey-dark-500;
color: $gray-700;
}

.woocommerce-filters-filter label {
Expand Down Expand Up @@ -62,5 +60,5 @@

.woocommerce-setting__help {
font-style: italic;
color: $core-grey-dark-300;
color: $gray-700;
}
10 changes: 4 additions & 6 deletions client/dashboard/dashboard-charts/block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


.woocommerce-dashboard__chart-block-wrapper {
cursor: pointer;
&:hover {
Expand Down Expand Up @@ -38,7 +36,7 @@
.woocommerce-legend__item > button {
cursor: default;
&:hover {
background: $core-grey-light-100;
background: $gray-100;
}
.woocommerce-legend__item-container {
cursor: default;
Expand All @@ -49,16 +47,16 @@
}

&:hover {
background: $core-grey-light-100;
background: $gray-100;
.woocommerce-legend__item > button {
background: $core-grey-light-100;
background: $gray-100;
}
}
}
}

&:hover {
background: $core-grey-light-100;
background: $gray-100;
}

.screen-reader-text:focus {
Expand Down
4 changes: 1 addition & 3 deletions client/dashboard/leaderboards/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@


.woocommerce-dashboard__dashboard-leaderboards {
.components-base-control__field {
width: 100%;
}
.components-select-control__input {
border: 1px solid $core-grey-light-700;
border: 1px solid $gray-400;
height: 34px;
}
.woocommerce-dashboard__dashboard-leaderboards__select {
Expand Down
10 changes: 4 additions & 6 deletions client/dashboard/store-performance/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


.woocommerce-dashboard__store-performance {
margin-bottom: $gap-large;

Expand All @@ -8,7 +6,7 @@
}

.woocommerce-summary {
background-color: $core-grey-light-100;
background-color: $gray-100;
margin: 0;

@include breakpoint( '<782px' ) {
Expand All @@ -19,7 +17,7 @@
&:not(.is-placeholder) {
.woocommerce-summary__item-container:first-child {
.woocommerce-summary__item {
border-top: 1px solid $core-grey-light-700;
border-top: 1px solid $gray-400;
}
}
}
Expand All @@ -30,11 +28,11 @@
background-color: $studio-white;

&:hover {
background-color: $core-grey-light-200;
background-color: $gray-100;
}

&:active {
background-color: $core-grey-light-300;
background-color: $gray-100;
}
}
}
7 changes: 3 additions & 4 deletions client/dashboard/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
}

> button svg {
fill: $core-grey-dark-500;
fill: $gray-700;
}
}

Expand All @@ -68,12 +68,12 @@
}

.woocommerce-dashboard-section__add-more-btn-title {
color: $core-grey-dark-300;
color: $gray-700;
padding-top: 8px;
}

.woocommerce-dashboard-section-controls {
border-top: $border-width solid $core-grey-light-500;
border-top: $border-width solid $gray-100;
padding-top: $gap-smaller;

.dashicon {
Expand All @@ -100,7 +100,6 @@
}
}


.woocommerce-dashboard-card {
.components-card__header.is-size-large,
.components-card__header.is-size-medium {
Expand Down
14 changes: 6 additions & 8 deletions client/devdocs/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


.woocommerce_devdocs {
@include breakpoint( '>1280px' ) {
&.is-list {
Expand Down Expand Up @@ -27,13 +25,13 @@

.woocommerce-devdocs__example {
padding: $gap;
box-shadow: inset 0 2px 1px rgba($core-grey-dark-800, 0.075);
box-shadow: inset 0 2px 1px rgba($gray-900, 0.075);

// Grid background
background-image: linear-gradient(rgba($core-grey-dark-800, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba($core-grey-dark-800, 0.05) 1px, transparent 1px),
linear-gradient(rgba($core-grey-dark-800, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba($core-grey-dark-800, 0.025) 1px, transparent 1px);
background-image: linear-gradient(rgba($gray-900, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba($gray-900, 0.05) 1px, transparent 1px),
linear-gradient(rgba($gray-900, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba($gray-900, 0.025) 1px, transparent 1px);
background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px;
background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;

Expand Down Expand Up @@ -65,7 +63,7 @@

th,
td {
border-bottom: 1px solid $core-grey-light-700;
border-bottom: 1px solid $gray-400;
text-align: left;
}

Expand Down
39 changes: 19 additions & 20 deletions client/header/activity-panel/activity-card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@


.woocommerce-activity-card {
position: relative;
padding: $fallback-gutter;
padding: $gutter;
background: $studio-white;
border-bottom: 1px solid $core-grey-light-400;
border-bottom: 1px solid $gray-200;
color: $gray-text;
@include font-size( 13 );

Expand All @@ -25,10 +23,10 @@

.woocommerce-activity-card__unread {
position: absolute;
top: calc(#{ $fallback-gutter } - 6px);
top: calc(#{ $gutter } - 6px);
right: calc(#{ $fallback-gutter } - 6px);
right: calc(#{ $gutter } - 6px);
top: calc(#{$fallback-gutter} - 6px);
top: calc(#{$gutter} - 6px);
right: calc(#{$fallback-gutter} - 6px);
right: calc(#{$gutter} - 6px);
width: 6px;
height: 6px;
border-radius: 50%;
Expand All @@ -37,7 +35,7 @@

.woocommerce-activity-card__icon {
grid-area: icon;
fill: $core-grey-light-600;
fill: $gray-200;
}

.woocommerce-activity-card__header {
Expand All @@ -51,7 +49,7 @@
order: 2;

.woocommerce-empty-activity-card & {
color: $dark-gray-primary;
color: $gray-900;
@include font-size( 16 );
font-style: normal;
line-height: 24px;
Expand All @@ -60,7 +58,7 @@
}

.woocommerce-activity-card__date {
color: $core-grey-dark-300;
color: $gray-700;
text-transform: uppercase;
@include font-size( 11 );
margin-bottom: $gap-small;
Expand Down Expand Up @@ -107,7 +105,7 @@
margin-bottom: 0;
}
.woocommerce-empty-activity-card & {
color: $medium-gray-text;
color: $gray-700;
font-style: normal;
font-weight: normal;
@include font-size( 14 );
Expand Down Expand Up @@ -224,7 +222,7 @@
padding: $fallback-gutter;
padding: $gutter;

@media screen and (prefers-reduced-motion: no-preference) {
@media screen and ( prefers-reduced-motion: no-preference ) {
transition: opacity 0.3s, height 0s, padding 0s;
}

Expand All @@ -240,7 +238,7 @@
height: 0;
opacity: 0;
padding: 0;
@media screen and (prefers-reduced-motion: no-preference) {
@media screen and ( prefers-reduced-motion: no-preference ) {
transition: opacity 0.3s, height 0s 0.3s, padding 0s 0.3s;
}
}
Expand Down Expand Up @@ -288,7 +286,8 @@
margin-top: $gap-smallest;
}

.woocommerce-review-activity-card__image-overlay__product .woocommerce-gravatar {
.woocommerce-review-activity-card__image-overlay__product
.woocommerce-gravatar {
margin-left: 0;
width: 18px;
height: 18px;
Expand All @@ -306,7 +305,7 @@
width: 60px;

&.is-placeholder::before {
background-color: $core-grey-dark-500;
background-color: $gray-700;
border-radius: 50%;
content: '';
position: absolute;
Expand All @@ -319,7 +318,7 @@
}

.woocommerce-stock-activity-card {
@media screen and (prefers-reduced-motion: no-preference) {
@media screen and ( prefers-reduced-motion: no-preference ) {
transition: opacity 0.3s;
}

Expand All @@ -328,8 +327,8 @@
}

.woocommerce-stock-activity-card__stock-quantity {
background: $core-grey-light-300;
color: $core-grey-dark-500;
background: $gray-100;
color: $gray-700;
padding: 3px $gap-smaller;
border-radius: 3px;
}
Expand Down Expand Up @@ -366,13 +365,13 @@
}

.woocommerce-activity-card__subtitle {
color: $core-grey-dark-500;
color: $gray-700;
@include font-size( 12 );
}
}

.woocommerce-empty-activity-card {
background: $core-grey-light-200;
background: $gray-100;
margin: 20px;
border-bottom: unset;
}
12 changes: 5 additions & 7 deletions client/header/activity-panel/activity-header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@


.woocommerce-layout__activity-panel-header {
height: 50px;
background: $core-grey-light-500;
background: $gray-200;
padding: 16px;
display: flex;
justify-content: space-between;
Expand All @@ -24,23 +22,23 @@
.woocommerce-ellipsis-menu__toggle.components-button:not(:disabled):not([aria-disabled='true']):hover {
box-shadow: none;
border-radius: 10px;
background: $core-grey-light-700;
background: $gray-400;
}
}

.woocommerce-layout__inbox-title {
color: $dark-gray-primary;
color: $gray-900;
display: flex;
align-items: center;
}

.woocommerce-layout__inbox-subtitle {
color: $medium-gray-text;
color: $gray-700;
}

.woocommerce-layout__inbox-badge {
margin-left: $gap-small / 2;
background-color: $medium-gray-text;
background-color: $gray-700;
border-radius: 13px;
padding: 0 $gap-small / 2;
color: $white;
Expand Down
Loading