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

Use @wordpress/base-styles and @automattic/color-studio as a base for our styles (https://github.com/woocommerce/woocommerce-blocks/pull/3300) 

* Use colors variables instead of hardcoded values when possible

* Update WC colors from @automattic/color-studio

* Decrease specificity of price-slider CSS selectors

* Update colors to WC purple

* Update bright colors

* Update grays

* Update blacks and whites

* Add @todo comment

* Remove unnecessary blank line

* Remove purple color from price slider handle

* Fix colors not shown in SVG background

* Remove unnecessary box-shadow declaration

* Add theming docs

* Refactor/remove SCSS variables

* Add @todo comment to breakpoints

* Update package-lock.json
This commit is contained in:
Albert Juhé Lluveras 2020-10-22 12:40:32 +02:00 committed by GitHub
parent 9b5e436cc7
commit 10ceda5851
37 changed files with 327 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss
View File

@ -8,6 +8,8 @@
// See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage // See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
$breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px; $breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
// @todo refactor breakpoints so they use the mixins from Gutenberg
// https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss
@mixin breakpoint( $sizes... ) { @mixin breakpoint( $sizes... ) {
@each $size in $sizes { @each $size in $sizes {
@if type-of( $size ) == string { @if type-of( $size ) == string {

63
plugins/woocommerce-blocks/assets/css/abstracts/_colors.scss
View File

@ -1,54 +1,22 @@
@import "node_modules/@wordpress/base-styles/colors";
@import "node_modules/@automattic/color-studio/dist/color-variables";
// @todo remove when `@woocommerce/base-styles` is updated.
// Greys // Greys
$core-grey-light-100: #f8f9f9; $black: #000; // Use only when you truly need pure black. For UI, use $gray-900.
$core-grey-light-200: #f3f4f5; $gray-100: #f0f0f0; // Used for light gray backgrounds.
$core-grey-light-300: #edeff0; $gray-200: #e0e0e0; // Used sparingly for light borders.
$core-grey-light-400: #e8eaeb; $gray-300: #ddd; // Used for most borders.
$core-grey-light-500: #e2e4e7; $gray-400: #ccc;
$core-grey-light-600: #d7dade; $gray-600: #949494; // Meets 3:1 UI or large text contrast against white.
$core-grey-light-700: #ccd0d4; $gray-700: #757575; // Meets 4.6:1 text contrast against white.
$core-grey-light-800: #b5bcc2; $gray-900: #1e1e1e;
$core-grey-light-900: #a2aab2;
$core-grey-dark-100: #86909b;
$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;
$gray-text: $core-grey-dark-500;
// WooCommerce Purples
$woocommerce-100: #ffd7ff;
$woocommerce-200: #e2a5d7;
$woocommerce-300: #c88bbd;
$woocommerce-400: #af72a4;
$woocommerce-500: #95588a;
$woocommerce-600: #7c3f71;
$woocommerce-700: #622557;
$woocommerce-800: #490c3e;
$woocommerce-900: #2f0024;
$woocommerce: $woocommerce-500;
$wp-admin-background: #f1f1f1;
$black: #24292d; // same as wp-admin sidebar
$white: #fff; $white: #fff;
// Bright colors // Bright colors
$valid-green: #4ab866; $no-stock-color: $alert-red;
$notice-yellow: #ffb900; $low-stock-color: $alert-yellow;
$error-red: #d94f4f; $in-stock-color: $alert-green;
$box-shadow-blue: #5b9dd9;
$core-orange: #ca4a1f;
$gray-10: #c3c4c7;
$gray-20: #a7aaad;
$gray-50: #646970;
$gray-60: #50575e;
$gray-80: #2c3338;
$input-border-gray: #8d96a0; $input-border-gray: #8d96a0;
$input-border-dark: rgba(255, 255, 255, 0.4); $input-border-dark: rgba(255, 255, 255, 0.4);
@ -61,4 +29,3 @@ $input-background-dark: rgba(0, 0, 0, 0.1);
$select-dropdown-dark: #1e1e1e; $select-dropdown-dark: #1e1e1e;
$select-dropdown-light: #fff; $select-dropdown-light: #fff;
$select-item-dark: rgba(0, 0, 0, 0.4); $select-item-dark: rgba(0, 0, 0, 0.4);

16
plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
View File

@ -26,9 +26,9 @@ $fontSizes: (
// Adds animation to placeholder section // Adds animation to placeholder section
@mixin placeholder() { @mixin placeholder() {
animation: loading-fade 1.2s ease-in-out infinite; animation: loading-fade 1.2s ease-in-out infinite;
background-color: $core-grey-light-500 !important; background-color: $gray-200 !important;
border-color: $core-grey-light-500 !important; border-color: $gray-200 !important;
color: $core-grey-light-500 !important; color: $gray-200 !important;
box-shadow: none; box-shadow: none;
pointer-events: none; pointer-events: none;
@ -147,3 +147,13 @@ $fontSizes: (
@function em($size, $base: 16px) { @function em($size, $base: 16px) {
@return $size / $base * 1em; @return $size / $base * 1em;
} }
// Encodes hex colors so they can be used in URL content.
@function encode-color($color) {
@if type-of($color) != "color" or str-index(#{$color}, "#") != 1 {
@return $color;
}
$hex: str-slice(ie-hex-str($color), 4);
@return "%23" + unquote("#{$hex}");
}

28
plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss
View File

@ -1,22 +1,14 @@
$gap-largest: 40px; @import "node_modules/@wordpress/base-styles/variables";
// @todo replace with $grid-unit values when `@woocommerce/base-styles` is updated.
// see: https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_variables.scss#L23-L36
$gap-largest: 40px; // $grid-unit-50
$gap-larger: 36px; $gap-larger: 36px;
$gap-large: 24px; $gap-large: 24px; // $grid-unit-30
$gap: 16px; $gap: 16px; // $grid-unit-20
$gap-small: 12px; $gap-small: 12px; // $grid-unit-15
$gap-smaller: 8px; $gap-smaller: 8px; // $grid-unit-10
$gap-smallest: 4px; $gap-smallest: 4px; // $grid-unit-05
// Variables pulled from Gutenberg.
// Editor Widths
$sidebar-width: 280px;
$content-width: 610px; // For the visual width, subtract 30px (2 * $block-padding + 2px borders). This comes to 580px, which is optimized for 70 characters.
// Blocks
$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
$block-spacing: 4px; // Vertical space between blocks.
$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
$block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
$block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
// Cart block // Cart block
$cart-image-width: 5rem; $cart-image-width: 5rem;

2
plugins/woocommerce-blocks/assets/css/editor.scss
View File

@ -49,7 +49,7 @@
// Adds border to placeholder lists, so they can be distinguished from the white background. // Adds border to placeholder lists, so they can be distinguished from the white background.
.components-placeholder .woocommerce-search-list__list { .components-placeholder .woocommerce-search-list__list {
border: 1px solid $core-grey-light-500; border: 1px solid $gray-200;
} }
// Work-around to make the SearchList component work fine with the last versions of @wordpress/components. // Work-around to make the SearchList component work fine with the last versions of @wordpress/components.

4
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss
View File

@ -23,9 +23,9 @@
margin-bottom: $gap-large; margin-bottom: $gap-large;
select { select {
border-color: $error-red; border-color: $alert-red;
&:focus { &:focus {
outline-color: $error-red; outline-color: $alert-red;
} }
} }
} }

2
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/editor.scss
View File

@ -3,7 +3,7 @@
} }
.wc-atomic-blocks-product__edit-card { .wc-atomic-blocks-product__edit-card {
padding: 16px; padding: 16px;
border-top: 1px solid #e2e4e7; border-top: 1px solid $gray-200;
.wc-atomic-blocks-product__edit-card-title { .wc-atomic-blocks-product__edit-card-title {
margin: 0 0 $gap; margin: 0 0 $gap;

6
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/style.scss
View File

@ -5,13 +5,13 @@
@include font-size(small); @include font-size(small);
&--in-stock { &--in-stock {
color: $valid-green; color: $in-stock-color;
} }
&--out-of-stock { &--out-of-stock {
color: $error-red; color: $no-stock-color;
} }
&--low-stock, &--low-stock,
&--available-on-backorder { &--available-on-backorder {
color: $notice-yellow; color: $low-stock-color;
} }
} }

4
plugins/woocommerce-blocks/assets/js/base/components/button/style.scss
View File

@ -1,7 +1,7 @@
.wc-block-components-button:not(.is-link) { .wc-block-components-button:not(.is-link) {
@include reset-typography(); @include reset-typography();
align-items: center; align-items: center;
background-color: $black; background-color: $gray-900;
color: $white; color: $white;
display: inline-flex; display: inline-flex;
font-weight: bold; font-weight: bold;
@ -18,7 +18,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: $black; background-color: $gray-900;
color: $white; color: $white;
} }

2
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/style.scss
View File

@ -14,7 +14,7 @@
margin: 0; margin: 0;
&:not(:first-child) { &:not(:first-child) {
border-left: 1px solid $gray-10; border-left: 1px solid $gray-400;
} }
> a { > a {

8
plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss
View File

@ -14,8 +14,8 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: $core-grey-light-500; background: $gray-200;
color: $core-grey-dark-800; color: $gray-900;
} }
&.wc-block-components-chip--radius-small { &.wc-block-components-chip--radius-small {
@ -55,11 +55,11 @@ button.wc-block-components-chip:hover > .wc-block-components-chip__remove,
button.wc-block-components-chip:focus > .wc-block-components-chip__remove, button.wc-block-components-chip:focus > .wc-block-components-chip__remove,
.wc-block-components-chip__remove:hover, .wc-block-components-chip__remove:hover,
.wc-block-components-chip__remove:focus { .wc-block-components-chip__remove:focus {
fill: #d94f4f; fill: $alert-red;
} }
button.wc-block-components-chip:disabled > .wc-block-components-chip__remove, button.wc-block-components-chip:disabled > .wc-block-components-chip__remove,
.wc-block-components-chip__remove:disabled { .wc-block-components-chip__remove:disabled {
fill: $core-grey-dark-100; fill: $gray-600;
cursor: not-allowed; cursor: not-allowed;
} }

8
plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss
View File

@ -20,7 +20,7 @@ $dropdown-selector-line-height: 18/14;
padding: 2px $gap-smaller; padding: 2px $gap-smaller;
.is-disabled & { .is-disabled & {
background-color: $core-grey-light-500; background-color: $gray-200;
} }
.is-multiple.has-checked > & { .is-multiple.has-checked > & {
@ -102,7 +102,7 @@ $dropdown-selector-line-height: 18/14;
.wc-block-components-dropdown-selector__selected-value { .wc-block-components-dropdown-selector__selected-value {
@include font-size(small); @include font-size(small);
align-items: center; align-items: center;
color: $core-grey-dark-600; color: $gray-700;
display: inline-flex; display: inline-flex;
margin: em($gap-small/4) 0; margin: em($gap-small/4) 0;
padding: em($gap-smallest * 0.75) 0 em($gap-smallest * 0.75); padding: em($gap-smallest * 0.75) 0 em($gap-smallest * 0.75);
@ -155,14 +155,14 @@ $dropdown-selector-line-height: 18/14;
.wc-block-components-dropdown-selector__list-item { .wc-block-components-dropdown-selector__list-item {
@include font-size(small); @include font-size(small);
color: $core-grey-dark-600; color: $gray-700;
cursor: default; cursor: default;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0 $gap-smallest; padding: 0 $gap-smallest;
&.is-selected { &.is-selected {
background-color: $core-grey-light-600; background-color: $gray-300;
} }
&:hover, &:hover,

2
plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss
View File

@ -9,7 +9,7 @@
display: block; display: block;
.components-button { .components-button {
background-color: $black; background-color: $gray-900;
color: $white; color: $white;
} }

8
plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
View File

@ -67,7 +67,7 @@
left: 0; left: 0;
top: 0; top: 0;
transform-origin: top left; transform-origin: top left;
color: $gray-50; color: $gray-700;
transition: transform 200ms ease; transition: transform 200ms ease;
margin: 0 0 0 #{$gap + 1px}; margin: 0 0 0 #{$gap + 1px};
overflow: hidden; overflow: hidden;
@ -109,14 +109,14 @@
} }
.wc-block-gateway-input.has-error { .wc-block-gateway-input.has-error {
border-color: $error-red; border-color: $alert-red;
&:focus { &:focus {
outline-color: $error-red; outline-color: $alert-red;
} }
} }
.wc-block-gateway-input.has-error + label { .wc-block-gateway-input.has-error + label {
color: $error-red; color: $alert-red;
} }
} }

365
plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss
View File

@ -11,7 +11,7 @@
cursor: pointer; cursor: pointer;
z-index: 20; z-index: 20;
pointer-events: auto; pointer-events: auto;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='52' height='42'%3E%3Cdefs%3E%3Cpath id='a' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath id='b' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='%2395588A' d='M24.3176 8.9423l-8.4163-6.1432c-1.706-1.2285-3.6395-1.8988-5.6867-1.787h-.1137c-4.8906.335-8.985 4.356-9.0987 9.2706C.8885 15.644 5.2102 20 10.6696 20h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M9 6v9m3-9v9'/%3E%3Cg fill-rule='nonzero' transform='translate(1 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23a'/%3E%3Cuse stroke='%2395588A' xlink:href='%23a'/%3E%3C/g%3E%3Cpath stroke='%2395588A' d='M9 27v9m3-9v9'/%3E%3Cg%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='%2395588A' d='M27.6824 8.9423l8.4163-6.1432c1.706-1.2285 3.6395-1.8988 5.6867-1.787h.1137c4.8906.335 8.985 4.356 9.0987 9.2706C51.1115 15.644 46.7898 20 41.3304 20h-.1137c-1.8197 0-3.6395-.6702-5.118-1.787l-8.4163-6.255c-.9099-.8935-.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M43 6v9m-3-9v9'/%3E%3C/g%3E%3Cg%3E%3Cg fill-rule='nonzero' transform='matrix(-1 0 0 1 51 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23b'/%3E%3Cuse stroke='%2395588A' xlink:href='%23b'/%3E%3C/g%3E%3Cpath stroke='%2395588A' d='M43 27v9m-3-9v9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='52' height='42'%3E%3Cdefs%3E%3Cpath id='a' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath id='b' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='#{encode-color($gray-700)}' d='M24.3176 8.9423l-8.4163-6.1432c-1.706-1.2285-3.6395-1.8988-5.6867-1.787h-.1137c-4.8906.335-8.985 4.356-9.0987 9.2706C.8885 15.644 5.2102 20 10.6696 20h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M9 6v9m3-9v9'/%3E%3Cg fill-rule='nonzero' transform='translate(1 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23a'/%3E%3Cuse stroke='#{encode-color($gray-700)}' xlink:href='%23a'/%3E%3C/g%3E%3Cpath stroke='#{encode-color($gray-700)}' d='M9 27v9m3-9v9'/%3E%3Cg%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='#{encode-color($gray-700)}' d='M27.6824 8.9423l8.4163-6.1432c1.706-1.2285 3.6395-1.8988 5.6867-1.787h.1137c4.8906.335 8.985 4.356 9.0987 9.2706C51.1115 15.644 46.7898 20 41.3304 20h-.1137c-1.8197 0-3.6395-.6702-5.118-1.787l-8.4163-6.255c-.9099-.8935-.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M43 6v9m-3-9v9'/%3E%3C/g%3E%3Cg%3E%3Cg fill-rule='nonzero' transform='matrix(-1 0 0 1 51 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23b'/%3E%3Cuse stroke='#{encode-color($gray-700)}' xlink:href='%23b'/%3E%3C/g%3E%3Cpath stroke='#{encode-color($gray-700)}' d='M43 27v9m-3-9v9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
transition: transform .2s ease-in-out; transition: transform .2s ease-in-out;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@ -49,46 +49,6 @@
.wc-block-components-price-slider { .wc-block-components-price-slider {
margin-bottom: $gap-large; margin-bottom: $gap-large;
.wc-block-components-price-slider__range-input-wrapper {
@include reset;
height: 9px;
clear: both;
position: relative;
box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1);
background: #e1e1e1;
margin: 15px 0;
.wc-block-components-price-slider__range-input-progress {
height: 9px;
width: 100%;
position: absolute;
left: 0;
top: 0;
--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
--range-color: #a8739d;
/*rtl:ignore*/
background: var(--track-background);
}
}
.wc-block-components-price-slider__controls {
display: flex;
.wc-block-components-price-slider__amount {
margin: 0;
border-radius: 4px;
width: auto;
max-width: 100px;
min-width: 0;
&.wc-block-components-price-slider__amount--min {
margin-right: 10px;
}
&.wc-block-components-price-slider__amount--max {
margin-left: auto;
}
}
}
&.wc-block-components-price-slider--has-filter-button { &.wc-block-components-price-slider--has-filter-button {
.wc-block-components-price-slider__controls { .wc-block-components-price-slider__controls {
justify-content: flex-end; justify-content: flex-end;
@ -99,87 +59,6 @@
} }
} }
} }
.wc-block-components-price-slider__range-input {
@include reset;
width: 100%;
height: 0;
display: block;
position: relative;
pointer-events: none;
outline: none !important;
&::-webkit-slider-runnable-track {
@include track;
}
&::-webkit-slider-thumb {
@include thumb;
margin: -6px 0 0 0;
}
&::-webkit-slider-progress {
@include reset;
}
&::-moz-focus-outer {
border: 0;
}
&::-moz-range-track {
@include track;
}
&::-moz-range-progress {
@include reset;
}
&::-moz-range-thumb {
@include thumb;
}
&::-ms-thumb {
@include thumb;
}
&:focus {
&::-webkit-slider-thumb {
@include thumbFocus;
}
&::-moz-range-thumb {
@include thumbFocus;
}
&::-ms-thumb {
@include thumbFocus;
}
}
&.wc-block-components-price-slider__range-input--min {
z-index: 21;
&::-webkit-slider-thumb {
margin-left: -2px;
background-position-x: left;
}
&::-moz-range-thumb {
background-position-x: left;
transform: translate(-2px, 4px);
}
&::-ms-thumb {
background-position-x: left;
}
}
&.wc-block-components-price-slider__range-input--max {
z-index: 20;
&::-webkit-slider-thumb {
background-position-x: right;
margin-left: 2px;
}
&::-moz-range-thumb {
background-position-x: right;
transform: translate(2px, 4px);
}
&::-ms-thumb {
background-position-x: right;
}
}
}
&.is-loading, &.is-loading,
&.is-disabled { &.is-disabled {
@ -200,83 +79,201 @@
} }
} }
.wc-block-components-price-slider__range-input-wrapper {
@include reset;
height: 9px;
clear: both;
position: relative;
box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1);
background: #e1e1e1;
margin: 15px 0;
}
.wc-block-components-price-slider__range-input-progress {
height: 9px;
width: 100%;
position: absolute;
left: 0;
top: 0;
--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
--range-color: #{$studio-woocommerce-purple-30};
/*rtl:ignore*/
background: var(--track-background);
}
.wc-block-components-price-slider__controls {
display: flex;
.wc-block-components-price-slider__amount {
margin: 0;
border-radius: 4px;
width: auto;
max-width: 100px;
min-width: 0;
&.wc-block-components-price-slider__amount--min {
margin-right: 10px;
}
&.wc-block-components-price-slider__amount--max {
margin-left: auto;
}
}
}
.wc-block-components-price-slider__range-input {
@include reset;
width: 100%;
height: 0;
display: block;
position: relative;
pointer-events: none;
outline: none !important;
&::-webkit-slider-runnable-track {
@include track;
}
&::-webkit-slider-thumb {
@include thumb;
margin: -6px 0 0 0;
}
&::-webkit-slider-progress {
@include reset;
}
&::-moz-focus-outer {
border: 0;
}
&::-moz-range-track {
@include track;
}
&::-moz-range-progress {
@include reset;
}
&::-moz-range-thumb {
@include thumb;
}
&::-ms-thumb {
@include thumb;
}
&:focus {
&::-webkit-slider-thumb {
@include thumbFocus;
}
&::-moz-range-thumb {
@include thumbFocus;
}
&::-ms-thumb {
@include thumbFocus;
}
}
&.wc-block-components-price-slider__range-input--min {
z-index: 21;
&::-webkit-slider-thumb {
margin-left: -2px;
background-position-x: left;
}
&::-moz-range-thumb {
background-position-x: left;
transform: translate(-2px, 4px);
}
&::-ms-thumb {
background-position-x: left;
}
}
&.wc-block-components-price-slider__range-input--max {
z-index: 20;
&::-webkit-slider-thumb {
background-position-x: right;
margin-left: 2px;
}
&::-moz-range-thumb {
background-position-x: right;
transform: translate(2px, 4px);
}
&::-ms-thumb {
background-position-x: right;
}
}
}
.rtl { .rtl {
.wc-block-components-price-slider .wc-block-components-price-slider__range-input-wrapper .wc-block-components-price-slider__range-input-progress { .wc-block-components-price-slider__range-input-progress {
--track-background: linear-gradient(to left, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%; --track-background: linear-gradient(to left, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
--range-color: #a8739d; --range-color: #{$studio-woocommerce-purple-30};
background: var(--track-background); background: var(--track-background);
} }
} }
@mixin ie { @mixin ie {
.wc-block-components-price-slider { .wc-block-components-price-slider__range-input-wrapper {
.wc-block-components-price-slider__range-input-wrapper { background: transparent;
box-shadow: none;
height: 24px;
}
.wc-block-components-price-slider__range-input-progress {
background: #{$studio-woocommerce-purple-30};
width: 100%;
top: 7px;
}
.wc-block-components-price-slider__range-input {
height: 24px;
pointer-events: auto;
position: absolute;
left: 0;
top: 0;
&::-ms-track {
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent; background: transparent;
box-shadow: none;
height: 24px;
.wc-block-components-price-slider__range-input-progress { /*leave room for the larger thumb to overflow with a transparent border */
background: #a8739d; border-color: transparent;
box-shadow: 0 0 0 1px inset #95588a; border-width: 7px 0;
width: 100%;
top: 7px; /*remove default tick marks*/
} color: transparent;
} }
.wc-block-components-price-slider__range-input { &::-ms-fill-lower {
height: 24px; background: #e1e1e1;
box-shadow: 0 0 0 1px inset #b8b8b8;
}
&::-ms-fill-upper {
background: transparent;
}
&::-ms-tooltip {
display: none;
}
&::-ms-thumb {
transform: translate(1px, 0);
pointer-events: auto; pointer-events: auto;
position: absolute;
left: 0;
top: 0;
&::-ms-track {
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 7px 0;
/*remove default tick marks*/
color: transparent;
}
&::-ms-fill-lower {
background: #e1e1e1;
box-shadow: 0 0 0 1px inset #b8b8b8;
}
&::-ms-fill-upper {
background: transparent;
}
&::-ms-tooltip {
display: none;
}
&::-ms-thumb {
transform: translate(1px, 0);
pointer-events: auto;
}
} }
.wc-block-components-price-slider__range-input--max { }
&::-ms-fill-upper { .wc-block-components-price-slider__range-input--max {
background: #e1e1e1; &::-ms-fill-upper {
box-shadow: 0 0 0 1px inset #b8b8b8; background: #e1e1e1;
} box-shadow: 0 0 0 1px inset #b8b8b8;
&::-ms-fill-lower {
background: transparent;
}
} }
&::-ms-fill-lower {
&.is-loading, background: transparent;
&.is-disabled {
.wc-block-components-price-slider__range-input-wrapper {
@include placeholder();
box-shadow: none;
}
} }
}
&.is-disabled:not(.is-loading) { &.is-loading,
.wc-block-components-price-slider__range-input-wrapper { &.is-disabled {
animation: none; .wc-block-components-price-slider__range-input-wrapper {
} @include placeholder();
box-shadow: none;
}
}
&.is-disabled:not(.is-loading) {
.wc-block-components-price-slider__range-input-wrapper {
animation: none;
} }
} }
} }

16
plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss
View File

@ -6,14 +6,14 @@
box-shadow: none; box-shadow: none;
&:focus { &:focus {
outline: 2px solid $core-grey-light-600; outline: 2px solid $gray-300;
} }
} }
.wc-block-components-quantity-selector { .wc-block-components-quantity-selector {
display: flex; display: flex;
min-width: 100px; min-width: 100px;
border: 1px solid $core-grey-light-600; border: 1px solid $gray-300;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
// needed so that buttons fill the container. // needed so that buttons fill the container.
@ -42,11 +42,11 @@
-moz-appearance: textfield; -moz-appearance: textfield;
&:focus { &:focus {
background: $core-grey-light-200; background: $gray-100;
outline: 1px solid $core-grey-light-600; outline: 1px solid $gray-300;
} }
&:disabled { &:disabled {
color: $core-grey-dark-100; color: $gray-600;
} }
.has-dark-controls & { .has-dark-controls & {
@ -71,17 +71,17 @@
@include font-size(regular); @include font-size(regular);
min-width: 30px; min-width: 30px;
cursor: pointer; cursor: pointer;
color: $core-grey-dark-700; color: $gray-900;
font-style: normal; font-style: normal;
text-align: center; text-align: center;
&:hover, &:hover,
&:focus { &:focus {
@include reset-button; @include reset-button;
color: $core-grey-dark-900; color: $gray-900;
} }
&:disabled { &:disabled {
color: $core-grey-dark-100; color: $gray-600;
cursor: default; cursor: default;
@include reset-button; @include reset-button;
} }

8
plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
View File

@ -10,7 +10,7 @@
transform: translateY(0.75em); transform: translateY(0.75em);
transform-origin: top left; transform-origin: top left;
transition: all 200ms ease; transition: all 200ms ease;
color: $gray-50; color: $gray-700;
z-index: 1; z-index: 1;
margin: 0 0 0 #{$gap + 1px}; margin: 0 0 0 #{$gap + 1px};
overflow: hidden; overflow: hidden;
@ -36,17 +36,17 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
border-color: $error-red; border-color: $alert-red;
} }
&:focus { &:focus {
outline: 1px dotted $error-red; outline: 1px dotted $alert-red;
outline-offset: 2px; outline-offset: 2px;
} }
} }
} }
&.has-error label { &.has-error label {
color: $error-red; color: $alert-red;
} }
.components-custom-select-control__button { .components-custom-select-control__button {

8
plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss
View File

@ -12,7 +12,7 @@
top: 0; top: 0;
transform-origin: top left; transform-origin: top left;
line-height: 1.375; // =22px when font-size is 16px. line-height: 1.375; // =22px when font-size is 16px.
color: $gray-50; color: $gray-700;
transition: transform 200ms ease; transition: transform 200ms ease;
margin: 0 0 0 #{$gap + 1px}; margin: 0 0 0 #{$gap + 1px};
overflow: hidden; overflow: hidden;
@ -76,16 +76,16 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
border-color: $error-red; border-color: $alert-red;
} }
&:focus { &:focus {
outline: 1px dotted $error-red; outline: 1px dotted $alert-red;
outline-offset: 2px; outline-offset: 2px;
} }
} }
&.has-error label { &.has-error label {
color: $error-red; color: $alert-red;
} }
&:only-child { &:only-child {

2
plugins/woocommerce-blocks/assets/js/base/components/validation/style.scss
View File

@ -1,6 +1,6 @@
.wc-block-components-validation-error { .wc-block-components-validation-error {
@include font-size(smaller); @include font-size(smaller);
color: $error-red; color: $alert-red;
max-width: 100%; max-width: 100%;
position: absolute; position: absolute;
top: calc(100% - 1px); top: calc(100% - 1px);

2
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/style.scss
View File

@ -43,7 +43,7 @@
&::before { &::before {
box-shadow: 0 -10px 20px 10px currentColor; box-shadow: 0 -10px 20px 10px currentColor;
color: transparentize($core-grey-light-700, 0.5); color: transparentize($gray-400, 0.5);
content: ""; content: "";
height: 100%; height: 100%;
left: 0; left: 0;

2
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss
View File

@ -9,7 +9,7 @@
display: block; display: block;
.components-button { .components-button {
background-color: $black; background-color: $gray-900;
color: $white; color: $white;
} }

2
plugins/woocommerce-blocks/assets/js/blocks/featured-category/style.scss
View File

@ -1,6 +1,6 @@
.wc-block-featured-category { .wc-block-featured-category {
position: relative; position: relative;
background-color: $black; background-color: $gray-900;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
width: 100%; width: 100%;

2
plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss
View File

@ -1,6 +1,6 @@
.wc-block-featured-product { .wc-block-featured-product {
position: relative; position: relative;
background-color: $black; background-color: $gray-900;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
width: 100%; width: 100%;

14
plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss
View File

@ -68,7 +68,7 @@
cursor: pointer; cursor: pointer;
background: none; background: none;
padding: 0 0.5em; padding: 0 0.5em;
color: #555d66; color: $gray-700;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: 0.25em; border-radius: 0.25em;
@ -89,21 +89,21 @@
} }
&:focus:enabled { &:focus:enabled {
background-color: #fff; background-color: #fff;
color: #191e23; color: $gray-900;
box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff; box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px #fff;
outline: 2px solid transparent; outline: 2px solid transparent;
outline-offset: -2px; outline-offset: -2px;
} }
&:not(:disabled):not([aria-disabled="true"]):hover { &:not(:disabled):not([aria-disabled="true"]):hover {
background-color: #fff; background-color: #fff;
color: #191e23; color: $gray-900;
box-shadow: inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2); box-shadow: inset 0 0 0 1px $gray-200, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2);
} }
&:not(:disabled):not([aria-disabled="true"]):active { &:not(:disabled):not([aria-disabled="true"]):active {
outline: none; outline: none;
background-color: #fff; background-color: #fff;
color: #191e23; color: $gray-900;
box-shadow: inset 0 0 0 1px #ccd0d4, inset 0 0 0 2px #fff; box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px #fff;
} }
&[aria-disabled="true"]:focus, &[aria-disabled="true"]:focus,
&:disabled:focus { &:disabled:focus {

14
plugins/woocommerce-blocks/assets/js/blocks/product-search/style.scss
View File

@ -16,7 +16,7 @@
cursor: pointer; cursor: pointer;
background: none; background: none;
padding: 0 0.5em; padding: 0 0.5em;
color: #555d66; color: $gray-700;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: 0.25em; border-radius: 0.25em;
@ -37,21 +37,21 @@
} }
&:focus:enabled { &:focus:enabled {
background-color: #fff; background-color: #fff;
color: #191e23; color: $gray-900;
box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff; box-shadow: inset 0 0 0 1px $gray-700, inset 0 0 0 2px #fff;
outline: 2px solid transparent; outline: 2px solid transparent;
outline-offset: -2px; outline-offset: -2px;
} }
&:not(:disabled):not([aria-disabled="true"]):hover { &:not(:disabled):not([aria-disabled="true"]):hover {
background-color: #fff; background-color: #fff;
color: #191e23; color: $gray-900;
box-shadow: inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2); box-shadow: inset 0 0 0 1px $gray-200, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2);
} }
&:not(:disabled):not([aria-disabled="true"]):active { &:not(:disabled):not([aria-disabled="true"]):active {
outline: none; outline: none;
background-color: #fff; background-color: #fff;
color: #191e23; color: $gray-900;
box-shadow: inset 0 0 0 1px #ccd0d4, inset 0 0 0 2px #fff; box-shadow: inset 0 0 0 1px $gray-900, inset 0 0 0 2px #fff;
} }
&[aria-disabled="true"]:focus, &[aria-disabled="true"]:focus,
&:disabled:focus { &:disabled:focus {

4
plugins/woocommerce-blocks/assets/js/blocks/products/editor.scss
View File

@ -37,7 +37,7 @@
overflow: hidden; overflow: hidden;
} }
.wc-block-all-products-grid-item-template { .wc-block-all-products-grid-item-template {
border-top: 1px solid #e2e4e7; border-top: 1px solid $gray-200;
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@ -96,7 +96,7 @@
&::before, &::before,
&::after { &::after {
content: ""; content: "";
background: #e2e4e7; background: $gray-200;
display: block; display: block;
position: absolute; position: absolute;
width: 100%; width: 100%;

2
plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor.scss
View File

@ -10,7 +10,7 @@
} }
.wc-block-single-product__edit-card { .wc-block-single-product__edit-card {
padding: 16px; padding: 16px;
border-top: 1px solid #e2e4e7; border-top: 1px solid $gray-200;
.wc-block-single-product__edit-card-title { .wc-block-single-product__edit-card-title {
margin: 0 0 $gap; margin: 0 0 $gap;

2
plugins/woocommerce-blocks/assets/js/editor-components/feedback-prompt/style.scss
View File

@ -1,6 +1,6 @@
.wc-block-feedback-prompt { .wc-block-feedback-prompt {
background-color: #f7f7f7; background-color: #f7f7f7;
border-top: 1px solid #e2e4e7; border-top: 1px solid $gray-200;
margin: 0 -16px 0; margin: 0 -16px 0;
padding: $gap-large; padding: $gap-large;
text-align: center; text-align: center;

4
plugins/woocommerce-blocks/assets/js/editor-components/product-attribute-term-control/style.scss
View File

@ -49,14 +49,14 @@
content: ""; content: "";
height: $gap-large; height: $gap-large;
width: $gap-large; width: $gap-large;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="{$core-grey-dark-300}" /></svg>'); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="#{encode-color($gray-700)}" /></svg>');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center right; background-position: center right;
background-size: contain; background-size: contain;
} }
&.depth-0[aria-expanded="true"]::after { &.depth-0[aria-expanded="true"]::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="{$core-grey-dark-300}" /></svg>'); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#{encode-color($gray-700)}" /></svg>');
} }
&[disabled].depth-0::after { &[disabled].depth-0::after {

4
plugins/woocommerce-blocks/assets/js/editor-components/product-control/style.scss
View File

@ -33,13 +33,13 @@
content: ""; content: "";
height: $gap-large; height: $gap-large;
width: $gap-large; width: $gap-large;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="{$core-grey-dark-300}" /></svg>'); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#{encode-color($gray-700)}" /></svg>');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center right; background-position: center right;
background-size: contain; background-size: contain;
} }
&.depth-0.is-variable[aria-expanded="true"]::after { &.depth-0.is-variable[aria-expanded="true"]::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="{$core-grey-dark-300}" /></svg>'); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="#{encode-color($gray-700)}" /></svg>');
} }
} }

2
plugins/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/style.scss
View File

@ -3,7 +3,7 @@
&.is-toggled, &.is-toggled,
&.is-toggled:focus { &.is-toggled:focus {
background: $core-grey-dark-500; background: $gray-700;
color: $white; color: $white;
} }
} }

2
plugins/woocommerce-blocks/assets/js/editor-components/view-switcher/editor.scss
View File

@ -4,7 +4,7 @@
box-shadow: 0 0 0 13px #f0f2f3; box-shadow: 0 0 0 13px #f0f2f3;
margin: 0 0 27px; margin: 0 0 27px;
visibility: hidden; visibility: hidden;
color: #555d66; color: $gray-700;
} }
.has-child-selected, .has-child-selected,
.is-selected { .is-selected {

2
plugins/woocommerce-blocks/assets/js/icons/library/radio-unselected.js
View File

@ -6,7 +6,7 @@ import { SVG } from 'wordpress-components';
const radioUnselected = ( const radioUnselected = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path <path
fill="#6C7781" fill="#757575"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
/> />
</SVG> </SVG>

1
plugins/woocommerce-blocks/docs/theming/README.md
View File

@ -65,6 +65,7 @@ WooCommerce Blocks avoids using legacy unprefixed classes as much as possible. H
## Blocks ## Blocks
- [All Products & filters](./all-products-and-filters.md)
- [Cart and Checkout](./cart-and-checkout.md) - [Cart and Checkout](./cart-and-checkout.md)
## Other docs ## Other docs

29
plugins/woocommerce-blocks/docs/theming/all-products-and-filters.md Normal file
View File

@ -0,0 +1,29 @@
# All Products and filters
## Price slider accent color
The Filter Products by Price block includes a price slider which uses an accent color to show the selected range.
<img src="https://user-images.githubusercontent.com/3616980/96570001-2053f900-12ca-11eb-8a75-8a54f243bda3.png" alt="Price filter screenshot" width="286" />
By default, it uses the WooCommerce purple shade, but it can be easily modified by themes with the following code:
```CSS
.wc-block-components-price-slider__range-input-progress,
.rtl .wc-block-components-price-slider__range-input-progress {
--range-color: #ee6948;
}
```
<img src="https://user-images.githubusercontent.com/3616980/96569858-f0a4f100-12c9-11eb-8011-05227bb60277.png" alt="Price filter screenshot with custom styles" width="286" />
Notice the code snippet above uses a CSS custom property, so the default color might still be available in some browsers that don't support it like Internet Explorer 11. If your theme supports IE11, you can add the following lines to target it:
```CSS
/* Target only IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.wc-block-components-price-slider__range-input-progress {
background: #ee6948;
}
}
```

6
plugins/woocommerce-blocks/package-lock.json generated
View File

@ -4,6 +4,12 @@
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
"@automattic/color-studio": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/@automattic/color-studio/-/color-studio-2.3.1.tgz",
"integrity": "sha512-EukCyI4mJu7pMob/xLrply5LPVQQmpWD4y5JtTn/Vvni78Ax6654I82Ute/Yu9Buvj4MS3sIXasHlhECA7lSEQ==",
"dev": true
},
"@babel/cli": { "@babel/cli": {
"version": "7.12.1", "version": "7.12.1",
"resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.12.1.tgz", "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.12.1.tgz",

1
plugins/woocommerce-blocks/package.json
View File

@ -61,6 +61,7 @@
"wp-env:config": "./bin/wp-env-pre-config.sh" "wp-env:config": "./bin/wp-env-pre-config.sh"
}, },
"devDependencies": { "devDependencies": {
"@automattic/color-studio": "2.3.1",
"@babel/cli": "7.12.1", "@babel/cli": "7.12.1",
"@babel/core": "7.12.3", "@babel/core": "7.12.3",
"@babel/plugin-proposal-class-properties": "7.12.1", "@babel/plugin-proposal-class-properties": "7.12.1",