From 10ceda5851eab4f96eb0f3b73ce877ed4c1b94f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Thu, 22 Oct 2020 12:40:32 +0200 Subject: [PATCH] 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 --- .../assets/css/abstracts/_breakpoints.scss | 2 + .../assets/css/abstracts/_colors.scss | 63 +-- .../assets/css/abstracts/_mixins.scss | 16 +- .../assets/css/abstracts/_variables.scss | 28 +- .../woocommerce-blocks/assets/css/editor.scss | 2 +- .../variable/variation-attributes/style.scss | 4 +- .../product-elements/shared/editor.scss | 2 +- .../stock-indicator/style.scss | 6 +- .../js/base/components/button/style.scss | 4 +- .../cart-checkout/policies/style.scss | 2 +- .../assets/js/base/components/chip/style.scss | 8 +- .../components/dropdown-selector/style.scss | 8 +- .../no-payment-methods/style.scss | 2 +- .../components/payment-methods/style.scss | 8 +- .../base/components/price-slider/style.scss | 365 +++++++++--------- .../components/quantity-selector/style.scss | 16 +- .../js/base/components/select/style.scss | 8 +- .../js/base/components/text-input/style.scss | 8 +- .../js/base/components/validation/style.scss | 2 +- .../cart/checkout-button/style.scss | 2 +- .../form/no-shipping-placeholder/style.scss | 2 +- .../js/blocks/featured-category/style.scss | 2 +- .../js/blocks/featured-product/style.scss | 2 +- .../js/blocks/product-categories/style.scss | 14 +- .../js/blocks/product-search/style.scss | 14 +- .../assets/js/blocks/products/editor.scss | 4 +- .../js/blocks/single-product/edit/editor.scss | 2 +- .../feedback-prompt/style.scss | 2 +- .../product-attribute-term-control/style.scss | 4 +- .../product-control/style.scss | 4 +- .../text-toolbar-button/style.scss | 2 +- .../view-switcher/editor.scss | 2 +- .../js/icons/library/radio-unselected.js | 2 +- .../woocommerce-blocks/docs/theming/README.md | 1 + .../docs/theming/all-products-and-filters.md | 29 ++ plugins/woocommerce-blocks/package-lock.json | 6 + plugins/woocommerce-blocks/package.json | 1 + 37 files changed, 327 insertions(+), 322 deletions(-) create mode 100644 plugins/woocommerce-blocks/docs/theming/all-products-and-filters.md diff --git a/plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss b/plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss index 6c0f2ceab96..90ce2887719 100644 --- a/plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss +++ b/plugins/woocommerce-blocks/assets/css/abstracts/_breakpoints.scss @@ -8,6 +8,8 @@ // See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage $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... ) { @each $size in $sizes { @if type-of( $size ) == string { diff --git a/plugins/woocommerce-blocks/assets/css/abstracts/_colors.scss b/plugins/woocommerce-blocks/assets/css/abstracts/_colors.scss index 9ea48aa5568..5df71c6c5e3 100644 --- a/plugins/woocommerce-blocks/assets/css/abstracts/_colors.scss +++ b/plugins/woocommerce-blocks/assets/css/abstracts/_colors.scss @@ -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 -$core-grey-light-100: #f8f9f9; -$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-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 - +$black: #000; // Use only when you truly need pure black. For UI, use $gray-900. +$gray-100: #f0f0f0; // Used for light gray backgrounds. +$gray-200: #e0e0e0; // Used sparingly for light borders. +$gray-300: #ddd; // Used for most borders. +$gray-400: #ccc; +$gray-600: #949494; // Meets 3:1 UI or large text contrast against white. +$gray-700: #757575; // Meets 4.6:1 text contrast against white. +$gray-900: #1e1e1e; $white: #fff; // Bright colors -$valid-green: #4ab866; -$notice-yellow: #ffb900; -$error-red: #d94f4f; -$box-shadow-blue: #5b9dd9; -$core-orange: #ca4a1f; - -$gray-10: #c3c4c7; -$gray-20: #a7aaad; -$gray-50: #646970; -$gray-60: #50575e; -$gray-80: #2c3338; +$no-stock-color: $alert-red; +$low-stock-color: $alert-yellow; +$in-stock-color: $alert-green; $input-border-gray: #8d96a0; $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-light: #fff; $select-item-dark: rgba(0, 0, 0, 0.4); - diff --git a/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss b/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss index c515687edfa..2de3a98e7f3 100644 --- a/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss +++ b/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss @@ -26,9 +26,9 @@ $fontSizes: ( // Adds animation to placeholder section @mixin placeholder() { animation: loading-fade 1.2s ease-in-out infinite; - background-color: $core-grey-light-500 !important; - border-color: $core-grey-light-500 !important; - color: $core-grey-light-500 !important; + background-color: $gray-200 !important; + border-color: $gray-200 !important; + color: $gray-200 !important; box-shadow: none; pointer-events: none; @@ -147,3 +147,13 @@ $fontSizes: ( @function em($size, $base: 16px) { @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}"); +} diff --git a/plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss b/plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss index b93fb3b1faa..99133873398 100644 --- a/plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss +++ b/plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss @@ -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-large: 24px; -$gap: 16px; -$gap-small: 12px; -$gap-smaller: 8px; -$gap-smallest: 4px; - -// 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. +$gap-large: 24px; // $grid-unit-30 +$gap: 16px; // $grid-unit-20 +$gap-small: 12px; // $grid-unit-15 +$gap-smaller: 8px; // $grid-unit-10 +$gap-smallest: 4px; // $grid-unit-05 // Cart block $cart-image-width: 5rem; diff --git a/plugins/woocommerce-blocks/assets/css/editor.scss b/plugins/woocommerce-blocks/assets/css/editor.scss index 95a22a8a714..22f6ce025db 100644 --- a/plugins/woocommerce-blocks/assets/css/editor.scss +++ b/plugins/woocommerce-blocks/assets/css/editor.scss @@ -49,7 +49,7 @@ // Adds border to placeholder lists, so they can be distinguished from the white background. .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. diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss index a9dbfd50c8a..5f58b06699c 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss @@ -23,9 +23,9 @@ margin-bottom: $gap-large; select { - border-color: $error-red; + border-color: $alert-red; &:focus { - outline-color: $error-red; + outline-color: $alert-red; } } } diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/editor.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/editor.scss index 763110f6414..1f43ee64e15 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/editor.scss @@ -3,7 +3,7 @@ } .wc-atomic-blocks-product__edit-card { padding: 16px; - border-top: 1px solid #e2e4e7; + border-top: 1px solid $gray-200; .wc-atomic-blocks-product__edit-card-title { margin: 0 0 $gap; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/style.scss index d6615c0afb5..b2b9e02417d 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/style.scss +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/style.scss @@ -5,13 +5,13 @@ @include font-size(small); &--in-stock { - color: $valid-green; + color: $in-stock-color; } &--out-of-stock { - color: $error-red; + color: $no-stock-color; } &--low-stock, &--available-on-backorder { - color: $notice-yellow; + color: $low-stock-color; } } diff --git a/plugins/woocommerce-blocks/assets/js/base/components/button/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/button/style.scss index c8f3e5bd14a..87fe932804d 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/button/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/button/style.scss @@ -1,7 +1,7 @@ .wc-block-components-button:not(.is-link) { @include reset-typography(); align-items: center; - background-color: $black; + background-color: $gray-900; color: $white; display: inline-flex; font-weight: bold; @@ -18,7 +18,7 @@ &:hover, &:focus, &:active { - background-color: $black; + background-color: $gray-900; color: $white; } diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/style.scss index 7a2fd544e71..b7a34f13962 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/style.scss @@ -14,7 +14,7 @@ margin: 0; &:not(:first-child) { - border-left: 1px solid $gray-10; + border-left: 1px solid $gray-400; } > a { diff --git a/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss index 729e81e1db2..68a9083a2d8 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss @@ -14,8 +14,8 @@ &:hover, &:focus, &:active { - background: $core-grey-light-500; - color: $core-grey-dark-800; + background: $gray-200; + color: $gray-900; } &.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, .wc-block-components-chip__remove:hover, .wc-block-components-chip__remove:focus { - fill: #d94f4f; + fill: $alert-red; } button.wc-block-components-chip:disabled > .wc-block-components-chip__remove, .wc-block-components-chip__remove:disabled { - fill: $core-grey-dark-100; + fill: $gray-600; cursor: not-allowed; } diff --git a/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss index e4f1971f2ac..4060170ec4e 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss @@ -20,7 +20,7 @@ $dropdown-selector-line-height: 18/14; padding: 2px $gap-smaller; .is-disabled & { - background-color: $core-grey-light-500; + background-color: $gray-200; } .is-multiple.has-checked > & { @@ -102,7 +102,7 @@ $dropdown-selector-line-height: 18/14; .wc-block-components-dropdown-selector__selected-value { @include font-size(small); align-items: center; - color: $core-grey-dark-600; + color: $gray-700; display: inline-flex; margin: em($gap-small/4) 0; 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 { @include font-size(small); - color: $core-grey-dark-600; + color: $gray-700; cursor: default; list-style: none; margin: 0; padding: 0 $gap-smallest; &.is-selected { - background-color: $core-grey-light-600; + background-color: $gray-300; } &:hover, diff --git a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss index 12e117eb380..e9b498492b2 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss @@ -9,7 +9,7 @@ display: block; .components-button { - background-color: $black; + background-color: $gray-900; color: $white; } diff --git a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss index 50bff84d54d..9de1775acc6 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss @@ -67,7 +67,7 @@ left: 0; top: 0; transform-origin: top left; - color: $gray-50; + color: $gray-700; transition: transform 200ms ease; margin: 0 0 0 #{$gap + 1px}; overflow: hidden; @@ -109,14 +109,14 @@ } .wc-block-gateway-input.has-error { - border-color: $error-red; + border-color: $alert-red; &:focus { - outline-color: $error-red; + outline-color: $alert-red; } } .wc-block-gateway-input.has-error + label { - color: $error-red; + color: $alert-red; } } diff --git a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss index 382e6fe482e..9c1f5b17eca 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss @@ -11,7 +11,7 @@ cursor: pointer; z-index: 20; 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; -webkit-appearance: none; -moz-appearance: none; @@ -49,46 +49,6 @@ .wc-block-components-price-slider { 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__controls { 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-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 { - .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%; - --range-color: #a8739d; + --range-color: #{$studio-woocommerce-purple-30}; background: var(--track-background); } } @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; - box-shadow: none; - height: 24px; - .wc-block-components-price-slider__range-input-progress { - background: #a8739d; - box-shadow: 0 0 0 1px inset #95588a; - width: 100%; - top: 7px; - } + /*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; } - .wc-block-components-price-slider__range-input { - height: 24px; + &::-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; - 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 { - background: #e1e1e1; - box-shadow: 0 0 0 1px inset #b8b8b8; - } - &::-ms-fill-lower { - background: transparent; - } + } + .wc-block-components-price-slider__range-input--max { + &::-ms-fill-upper { + background: #e1e1e1; + box-shadow: 0 0 0 1px inset #b8b8b8; } - - &.is-loading, - &.is-disabled { - .wc-block-components-price-slider__range-input-wrapper { - @include placeholder(); - box-shadow: none; - } + &::-ms-fill-lower { + background: transparent; } + } - &.is-disabled:not(.is-loading) { - .wc-block-components-price-slider__range-input-wrapper { - animation: none; - } + &.is-loading, + &.is-disabled { + .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; } } } diff --git a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss index b8fe3d1c2e6..86c8f9b752a 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss @@ -6,14 +6,14 @@ box-shadow: none; &:focus { - outline: 2px solid $core-grey-light-600; + outline: 2px solid $gray-300; } } .wc-block-components-quantity-selector { display: flex; min-width: 100px; - border: 1px solid $core-grey-light-600; + border: 1px solid $gray-300; background: #fff; border-radius: 4px; // needed so that buttons fill the container. @@ -42,11 +42,11 @@ -moz-appearance: textfield; &:focus { - background: $core-grey-light-200; - outline: 1px solid $core-grey-light-600; + background: $gray-100; + outline: 1px solid $gray-300; } &:disabled { - color: $core-grey-dark-100; + color: $gray-600; } .has-dark-controls & { @@ -71,17 +71,17 @@ @include font-size(regular); min-width: 30px; cursor: pointer; - color: $core-grey-dark-700; + color: $gray-900; font-style: normal; text-align: center; &:hover, &:focus { @include reset-button; - color: $core-grey-dark-900; + color: $gray-900; } &:disabled { - color: $core-grey-dark-100; + color: $gray-600; cursor: default; @include reset-button; } diff --git a/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss index 855274aa46c..4d4256d780e 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss @@ -10,7 +10,7 @@ transform: translateY(0.75em); transform-origin: top left; transition: all 200ms ease; - color: $gray-50; + color: $gray-700; z-index: 1; margin: 0 0 0 #{$gap + 1px}; overflow: hidden; @@ -36,17 +36,17 @@ &:hover, &:focus, &:active { - border-color: $error-red; + border-color: $alert-red; } &:focus { - outline: 1px dotted $error-red; + outline: 1px dotted $alert-red; outline-offset: 2px; } } } &.has-error label { - color: $error-red; + color: $alert-red; } .components-custom-select-control__button { diff --git a/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss index 89b6fb3a978..9a919d7b4e6 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss @@ -12,7 +12,7 @@ top: 0; transform-origin: top left; line-height: 1.375; // =22px when font-size is 16px. - color: $gray-50; + color: $gray-700; transition: transform 200ms ease; margin: 0 0 0 #{$gap + 1px}; overflow: hidden; @@ -76,16 +76,16 @@ &:hover, &:focus, &:active { - border-color: $error-red; + border-color: $alert-red; } &:focus { - outline: 1px dotted $error-red; + outline: 1px dotted $alert-red; outline-offset: 2px; } } &.has-error label { - color: $error-red; + color: $alert-red; } &:only-child { diff --git a/plugins/woocommerce-blocks/assets/js/base/components/validation/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/validation/style.scss index b3111fc0ca8..ca6a9896b90 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/validation/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/validation/style.scss @@ -1,6 +1,6 @@ .wc-block-components-validation-error { @include font-size(smaller); - color: $error-red; + color: $alert-red; max-width: 100%; position: absolute; top: calc(100% - 1px); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/style.scss index 09fac85684f..efa8fb148bb 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/style.scss @@ -43,7 +43,7 @@ &::before { box-shadow: 0 -10px 20px 10px currentColor; - color: transparentize($core-grey-light-700, 0.5); + color: transparentize($gray-400, 0.5); content: ""; height: 100%; left: 0; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss index 222a54959bf..a5e23fedd40 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss @@ -9,7 +9,7 @@ display: block; .components-button { - background-color: $black; + background-color: $gray-900; color: $white; } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-category/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/featured-category/style.scss index 5c510ed0949..07bf38d18d7 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/featured-category/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-category/style.scss @@ -1,6 +1,6 @@ .wc-block-featured-category { position: relative; - background-color: $black; + background-color: $gray-900; background-size: cover; background-position: center center; width: 100%; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss index cfcfcd4c3f4..864fad80b3a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss @@ -1,6 +1,6 @@ .wc-block-featured-product { position: relative; - background-color: $black; + background-color: $gray-900; background-size: cover; background-position: center center; width: 100%; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss index 00274b59dc0..2a8b08a9a7b 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss @@ -68,7 +68,7 @@ cursor: pointer; background: none; padding: 0 0.5em; - color: #555d66; + color: $gray-700; position: relative; overflow: hidden; border-radius: 0.25em; @@ -89,21 +89,21 @@ } &:focus:enabled { background-color: #fff; - color: #191e23; - box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff; + color: $gray-900; + box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px #fff; outline: 2px solid transparent; outline-offset: -2px; } &:not(:disabled):not([aria-disabled="true"]):hover { background-color: #fff; - color: #191e23; - box-shadow: inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2); + color: $gray-900; + 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 { outline: none; background-color: #fff; - color: #191e23; - box-shadow: inset 0 0 0 1px #ccd0d4, inset 0 0 0 2px #fff; + color: $gray-900; + box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px #fff; } &[aria-disabled="true"]:focus, &:disabled:focus { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/product-search/style.scss index a4527bf2115..bb4bb09f0f5 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-search/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/style.scss @@ -16,7 +16,7 @@ cursor: pointer; background: none; padding: 0 0.5em; - color: #555d66; + color: $gray-700; position: relative; overflow: hidden; border-radius: 0.25em; @@ -37,21 +37,21 @@ } &:focus:enabled { background-color: #fff; - color: #191e23; - box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff; + color: $gray-900; + box-shadow: inset 0 0 0 1px $gray-700, inset 0 0 0 2px #fff; outline: 2px solid transparent; outline-offset: -2px; } &:not(:disabled):not([aria-disabled="true"]):hover { background-color: #fff; - color: #191e23; - box-shadow: inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2); + color: $gray-900; + 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 { outline: none; background-color: #fff; - color: #191e23; - box-shadow: inset 0 0 0 1px #ccd0d4, inset 0 0 0 2px #fff; + color: $gray-900; + box-shadow: inset 0 0 0 1px $gray-900, inset 0 0 0 2px #fff; } &[aria-disabled="true"]:focus, &:disabled:focus { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/products/editor.scss index 0cf12f8a637..8f2fa80eb03 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/products/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/products/editor.scss @@ -37,7 +37,7 @@ overflow: hidden; } .wc-block-all-products-grid-item-template { - border-top: 1px solid #e2e4e7; + border-top: 1px solid $gray-200; margin-top: 20px; width: 100%; overflow: hidden; @@ -96,7 +96,7 @@ &::before, &::after { content: ""; - background: #e2e4e7; + background: $gray-200; display: block; position: absolute; width: 100%; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor.scss index 8cfe0ae2338..fe122597870 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor.scss @@ -10,7 +10,7 @@ } .wc-block-single-product__edit-card { padding: 16px; - border-top: 1px solid #e2e4e7; + border-top: 1px solid $gray-200; .wc-block-single-product__edit-card-title { margin: 0 0 $gap; diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/feedback-prompt/style.scss b/plugins/woocommerce-blocks/assets/js/editor-components/feedback-prompt/style.scss index e3e72230265..9a5a65e8819 100644 --- a/plugins/woocommerce-blocks/assets/js/editor-components/feedback-prompt/style.scss +++ b/plugins/woocommerce-blocks/assets/js/editor-components/feedback-prompt/style.scss @@ -1,6 +1,6 @@ .wc-block-feedback-prompt { background-color: #f7f7f7; - border-top: 1px solid #e2e4e7; + border-top: 1px solid $gray-200; margin: 0 -16px 0; padding: $gap-large; text-align: center; diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/product-attribute-term-control/style.scss b/plugins/woocommerce-blocks/assets/js/editor-components/product-attribute-term-control/style.scss index 7efa9688bb4..f443ab531f9 100644 --- a/plugins/woocommerce-blocks/assets/js/editor-components/product-attribute-term-control/style.scss +++ b/plugins/woocommerce-blocks/assets/js/editor-components/product-attribute-term-control/style.scss @@ -49,14 +49,14 @@ content: ""; height: $gap-large; width: $gap-large; - background-image: url('data:image/svg+xml;utf8,'); + background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center right; background-size: contain; } &.depth-0[aria-expanded="true"]::after { - background-image: url('data:image/svg+xml;utf8,'); + background-image: url('data:image/svg+xml;utf8,'); } &[disabled].depth-0::after { diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/product-control/style.scss b/plugins/woocommerce-blocks/assets/js/editor-components/product-control/style.scss index d6c6f59e2ef..575186735f8 100644 --- a/plugins/woocommerce-blocks/assets/js/editor-components/product-control/style.scss +++ b/plugins/woocommerce-blocks/assets/js/editor-components/product-control/style.scss @@ -33,13 +33,13 @@ content: ""; height: $gap-large; width: $gap-large; - background-image: url('data:image/svg+xml;utf8,'); + background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center right; background-size: contain; } &.depth-0.is-variable[aria-expanded="true"]::after { - background-image: url('data:image/svg+xml;utf8,'); + background-image: url('data:image/svg+xml;utf8,'); } } diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/style.scss b/plugins/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/style.scss index 4a40c71b8d1..082fc0a6cf1 100644 --- a/plugins/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/style.scss +++ b/plugins/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/style.scss @@ -3,7 +3,7 @@ &.is-toggled, &.is-toggled:focus { - background: $core-grey-dark-500; + background: $gray-700; color: $white; } } diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/view-switcher/editor.scss b/plugins/woocommerce-blocks/assets/js/editor-components/view-switcher/editor.scss index 5064fed02a5..ac83057dae4 100644 --- a/plugins/woocommerce-blocks/assets/js/editor-components/view-switcher/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/editor-components/view-switcher/editor.scss @@ -4,7 +4,7 @@ box-shadow: 0 0 0 13px #f0f2f3; margin: 0 0 27px; visibility: hidden; - color: #555d66; + color: $gray-700; } .has-child-selected, .is-selected { diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/radio-unselected.js b/plugins/woocommerce-blocks/assets/js/icons/library/radio-unselected.js index 91e7e575e17..045bb7ea947 100644 --- a/plugins/woocommerce-blocks/assets/js/icons/library/radio-unselected.js +++ b/plugins/woocommerce-blocks/assets/js/icons/library/radio-unselected.js @@ -6,7 +6,7 @@ import { SVG } from 'wordpress-components'; const radioUnselected = ( diff --git a/plugins/woocommerce-blocks/docs/theming/README.md b/plugins/woocommerce-blocks/docs/theming/README.md index 40e27488e5a..b991747dfcc 100644 --- a/plugins/woocommerce-blocks/docs/theming/README.md +++ b/plugins/woocommerce-blocks/docs/theming/README.md @@ -65,6 +65,7 @@ WooCommerce Blocks avoids using legacy unprefixed classes as much as possible. H ## Blocks +- [All Products & filters](./all-products-and-filters.md) - [Cart and Checkout](./cart-and-checkout.md) ## Other docs diff --git a/plugins/woocommerce-blocks/docs/theming/all-products-and-filters.md b/plugins/woocommerce-blocks/docs/theming/all-products-and-filters.md new file mode 100644 index 00000000000..0c5bc366156 --- /dev/null +++ b/plugins/woocommerce-blocks/docs/theming/all-products-and-filters.md @@ -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. + +Price filter screenshot + +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; +} +``` + +Price filter screenshot with custom styles + +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; + } +} +``` diff --git a/plugins/woocommerce-blocks/package-lock.json b/plugins/woocommerce-blocks/package-lock.json index a52b35d32e8..1aa97e39a9c 100644 --- a/plugins/woocommerce-blocks/package-lock.json +++ b/plugins/woocommerce-blocks/package-lock.json @@ -4,6 +4,12 @@ "lockfileVersion": 1, "requires": true, "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": { "version": "7.12.1", "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.12.1.tgz", diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json index f9239137f23..f0d6023cb82 100644 --- a/plugins/woocommerce-blocks/package.json +++ b/plugins/woocommerce-blocks/package.json @@ -61,6 +61,7 @@ "wp-env:config": "./bin/wp-env-pre-config.sh" }, "devDependencies": { + "@automattic/color-studio": "2.3.1", "@babel/cli": "7.12.1", "@babel/core": "7.12.3", "@babel/plugin-proposal-class-properties": "7.12.1",