From f5a2149a5232886e79bc41fc5e5e4b08050ffa1a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 10 Jun 2020 11:25:12 +0100 Subject: [PATCH 01/12] Update the theme colors to rely on CSS variables --- bin/packages/build-worker.js | 1 - package-lock.json | 116 +++++++++++++++++- packages/base-styles/_colors.scss | 2 - packages/base-styles/_mixins.scss | 18 +-- packages/base-styles/_variables.scss | 13 ++ packages/base-styles/index.js | 50 +++++--- .../components/block-breadcrumb/style.scss | 2 +- .../components/block-list-appender/style.scss | 2 +- .../src/components/block-list/style.scss | 10 +- .../src/components/block-styles/style.scss | 4 +- .../button-block-appender/style.scss | 4 +- .../components/inserter-list-item/style.scss | 4 +- .../src/components/inserter/style.scss | 6 +- .../src/components/link-control/style.scss | 2 +- .../components/media-placeholder/style.scss | 2 +- .../src/components/preview-options/style.scss | 2 +- .../skip-to-selected-block/style.scss | 2 +- .../src/components/url-input/style.scss | 2 +- .../src/block/edit-panel/editor.scss | 4 +- .../block-library/src/gallery/editor.scss | 2 +- .../src/social-links/editor.scss | 2 +- .../components/src/autocomplete/style.scss | 2 +- .../components/src/button-group/style.scss | 6 +- packages/components/src/button/style.scss | 46 +++---- .../src/custom-gradient-picker/style.scss | 2 +- .../src/custom-select-control/style.scss | 4 +- packages/components/src/date-time/style.scss | 6 +- .../src/focal-point-picker/style.scss | 2 +- .../components/src/form-toggle/style.scss | 10 +- .../src/form-token-field/style.scss | 2 +- packages/components/src/panel/style.scss | 2 +- .../components/src/resizable-box/style.scss | 4 +- packages/components/src/snackbar/style.scss | 2 +- packages/components/src/tab-panel/style.scss | 8 +- .../templates/esnext/src/style.scss.mustache | 2 +- .../header/fullscreen-mode-close/style.scss | 2 +- .../header/header-toolbar/style.scss | 2 +- .../sidebar/settings-header/style.scss | 6 +- .../header/fullscreen-mode-close/style.scss | 2 +- .../components/template-switcher/style.scss | 2 +- .../src/components/sidebar/style.scss | 6 +- .../components/document-outline/style.scss | 2 +- .../components/post-last-revision/style.scss | 2 +- .../components/table-of-contents/style.scss | 2 +- packages/postcss-plugins-preset/lib/index.js | 1 + packages/postcss-plugins-preset/package.json | 3 +- 46 files changed, 260 insertions(+), 118 deletions(-) diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js index b206fc3e031303..d09294c10b0df9 100644 --- a/bin/packages/build-worker.js +++ b/bin/packages/build-worker.js @@ -8,7 +8,6 @@ const babel = require( '@babel/core' ); const makeDir = require( 'make-dir' ); const sass = require( 'node-sass' ); const postcss = require( 'postcss' ); - /** * Internal dependencies */ diff --git a/package-lock.json b/package-lock.json index 1224a12c0cf1e1..889f6333286c88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11202,7 +11202,8 @@ "@wordpress/base-styles": "file:packages/base-styles", "@wordpress/postcss-themes": "file:packages/postcss-themes", "autoprefixer": "^9.4.5", - "postcss-color-function": "^4.0.1" + "postcss-color-function": "^4.0.1", + "postcss-custom-properties": "^9.1.1" } }, "@wordpress/postcss-themes": { @@ -24381,6 +24382,15 @@ "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=" }, + "is-url-superb": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-3.0.0.tgz", + "integrity": "sha512-3faQP+wHCGDQT1qReM5zCPx2mxoal6DzbzquFlCYJLWyy4WPTved33ea2xFbX37z4NoriEwZGIYhFtx8RUB5wQ==", + "dev": true, + "requires": { + "url-regex": "^5.0.0" + } + }, "is-utf8": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", @@ -34943,6 +34953,66 @@ "postcss-value-parser": "^3.0.0" } }, + "postcss-custom-properties": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-9.1.1.tgz", + "integrity": "sha512-GVu+j7vwMTKUGhGXckYAFAAG5tTJUkSt8LuSyimtZdVVmdAEZYYqserkAgX8vwMhgGDPA4vJtWt7VgFxgiooDA==", + "dev": true, + "requires": { + "postcss": "^7.0.17", + "postcss-values-parser": "^3.0.5" + }, + "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "postcss": { + "version": "7.0.32", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz", + "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "postcss-discard-comments": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz", @@ -35666,6 +35736,26 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=" }, + "postcss-values-parser": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-3.2.1.tgz", + "integrity": "sha512-SQ7/88VE9LhJh9gc27/hqnSU/aZaREVJcRVccXBmajgP2RkjdJzNyH/a9GCVMI5nsRhT0jC5HpUMwfkz81DVVg==", + "dev": true, + "requires": { + "color-name": "^1.1.4", + "is-url-superb": "^3.0.0", + "postcss": "^7.0.5", + "url-regex": "^5.0.0" + }, + "dependencies": { + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + } + } + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -43232,6 +43322,12 @@ "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=" }, + "tlds": { + "version": "1.207.0", + "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz", + "integrity": "sha512-k7d7Q1LqjtAvhtEOs3yN14EabsNO8ZCoY6RESSJDB9lst3bTx3as/m1UuAeCKzYxiyhR1qq72ZPhpSf+qlqiwg==", + "dev": true + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -44030,6 +44126,24 @@ "requires-port": "^1.0.0" } }, + "url-regex": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/url-regex/-/url-regex-5.0.0.tgz", + "integrity": "sha512-O08GjTiAFNsSlrUWfqF1jH0H1W3m35ZyadHrGv5krdnmPPoxP27oDTqux/579PtaroiSGm5yma6KT1mHFH6Y/g==", + "dev": true, + "requires": { + "ip-regex": "^4.1.0", + "tlds": "^1.203.0" + }, + "dependencies": { + "ip-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.1.0.tgz", + "integrity": "sha512-pKnZpbgCTfH/1NLIlOduP/V+WRXzC2MOz3Qo8xmxk8C5GudJLgK5QyLVXOSWy3ParAH7Eemurl3xjv/WXYFvMA==", + "dev": true + } + } + }, "url-template": { "version": "2.0.8", "resolved": "https://registry.npmjs.org/url-template/-/url-template-2.0.8.tgz", diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index bd738f85d54249..efa46eed439392 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -31,8 +31,6 @@ $medium-gray-text: #757575; // Meets 4.6:1 text contrast. $light-gray-ui: #949494; // Meets 3:1 UI contrast. $light-gray-secondary: #ccc; $light-gray-tertiary: #e7e8e9; -$theme-color: theme(button); -$blue-medium-focus: theme(button); $blue-medium-focus-dark: $white; // Dark opacities, for use with light themes. diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 296262b3a09402..7bb9294af12856 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -118,7 +118,7 @@ */ @mixin block-toolbar-button-style__focus() { - box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 4px $white; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 0 4px $white; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; @@ -135,8 +135,8 @@ @mixin input-style__focus() { - border-color: color($theme-color); - box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color; + border-color: var(--wp-theme-color); + box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; @@ -300,8 +300,8 @@ } &:checked { - background: theme(toggle); - border-color: theme(toggle); + background: var(--wp-theme-color-toggle); + border-color: var(--wp-theme-color-toggle); } &:checked:focus { @@ -320,8 +320,8 @@ } &[aria-checked="mixed"] { - background: theme(toggle); - border-color: theme(toggle); + background: var(--wp-theme-color-toggle); + border-color: var(--wp-theme-color-toggle); &::before { // Inherited from `forms.css`. @@ -374,8 +374,8 @@ } &:checked { - background: theme(toggle); - border-color: theme(toggle); + background: var(--wp-theme-color-toggle); + border-color: var(--wp-theme-color-toggle); } &:checked:focus { diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index ef5e079179ea88..7735a97bae3ddf 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -104,3 +104,16 @@ $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $b $radius-round-rectangle: 4px; $radius-round: 50%; $radius-block-ui: 2px; + +:root { + --wp-theme-color: theme(primary); + --wp-theme-color-secondary: theme(secondary); + --wp-theme-color-toggle: theme(toggle); + + // Ideally this are computed and not their own variables but due to Current CSS limitation + // We need these. + --wp-theme-color-darker-20: theme(primaryDarker20); + --wp-theme-color-darker-10: theme(primaryDarker10); + --wp-theme-color-lighter-10: theme(primaryLighter10); + --wp-theme-color-lighter-40: theme(primaryLighter40); +} diff --git a/packages/base-styles/index.js b/packages/base-styles/index.js index bac5dede479a12..963efc19dec0c8 100644 --- a/packages/base-styles/index.js +++ b/packages/base-styles/index.js @@ -1,60 +1,76 @@ exports.adminColorSchemes = { defaults: { - primary: '#0085ba', + primary: '#007cba', secondary: '#11a0d2', toggle: '#11a0d2', - button: '#007cba', - outlines: '#007cba', + primaryDarker10: '#005a87', + primaryDarker20: '#003854', + primaryLighter10: '#009eed', + primaryLighter40: '#87d7ff', }, themes: { 'admin-color-light': { primary: '#0085ba', secondary: '#c75726', toggle: '#11a0d2', - button: '#0085ba', - outlines: '#007cba', + primaryDarker10: '#006187', + primaryDarker20: '#003c54', + primaryLighter10: '#00a9ed', + primaryLighter40: '#87ddff', }, 'admin-color-blue': { primary: '#82b4cb', secondary: '#d9ab59', toggle: '#82b4cb', - button: '#d9ab59', - outlines: '#417e9B', + primaryDarker10: '#5e9ebc', + primaryDarker20: '#4485a3', + primaryLighter10: '#a6cada', + primaryLighter40: '#eef5f8', }, 'admin-color-coffee': { primary: '#c2a68c', secondary: '#9fa47b', toggle: '#c2a68c', - button: '#c2a68c', - outlines: '#59524c', + primaryDarker10: '', + primaryDarker20: '', + primaryLighter10: '', + primaryLighter40: '', }, 'admin-color-ectoplasm': { primary: '#a7b656', secondary: '#c77430', toggle: '#a7b656', - button: '#a7b656', - outlines: '#523f6d', + primaryDarker10: '#b08c6b', + primaryDarker20: '#987350', + primaryLighter10: '#c2a68c', + primaryLighter40: '#f7f3f0', }, 'admin-color-midnight': { primary: '#e14d43', secondary: '#77a6b9', toggle: '#77a6b9', - button: '#e14d43', - outlines: '#497b8d', + primaryDarker10: '#d02c21', + primaryDarker20: '#a4231a', + primaryLighter10: '#e8776f', + primaryLighter40: '#fdf4f3', }, 'admin-color-ocean': { primary: '#a3b9a2', secondary: '#a89d8a', toggle: '#a3b9a2', - button: '#a3b9a2', - outlines: '#5e7d5e', + primaryDarker10: '#86a385', + primaryDarker20: '#6b8c69', + primaryLighter10: '#c0cfbf', + primaryLighter40: '#f9fbf9', }, 'admin-color-sunrise': { primary: '#d1864a', secondary: '#c8b03c', toggle: '#c8b03c', - button: '#d1864a', - outlines: '#837425', + primaryDarker10: '#b96c2f', + primaryDarker20: '#905525', + primaryLighter10: '#dba173', + primaryLighter40: '#faf3ed', }, }, }; diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss index 6dc47828019ad9..98e95f045d06b0 100644 --- a/packages/block-editor/src/components/block-breadcrumb/style.scss +++ b/packages/block-editor/src/components/block-breadcrumb/style.scss @@ -37,7 +37,7 @@ right: $border-width; bottom: $border-width; left: $border-width; - box-shadow: inset 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); } } diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss index 731df3b69f9deb..359d0bc3b62e84 100644 --- a/packages/block-editor/src/components/block-list-appender/style.scss +++ b/packages/block-editor/src/components/block-list-appender/style.scss @@ -27,7 +27,7 @@ top: -$grid-unit-10; bottom: -$grid-unit-10; border-radius: $radius-block-ui; - border: 3px solid theme(primary); + border: 3px solid var(--wp-theme-color); } .block-list-appender > .block-editor-inserter { diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index cd6565b905220e..f4bc3be33d4689 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -75,7 +75,7 @@ right: $border-width; // 2px outside. - box-shadow: 0 0 0 $border-width-focus $blue-medium-focus; + box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius. // Show a light color for dark themes. @@ -107,7 +107,7 @@ right: 0; left: 0; top: -$default-block-margin / 2; - border-top: 4px solid $blue-medium-focus; + border-top: 4px solid var(--wp-theme-color); } } @@ -140,7 +140,7 @@ &::after { // Everything else. // 2px outside. - box-shadow: 0 0 0 $border-width-focus $blue-medium-focus; + box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius. transition: box-shadow 0.2s ease-out; @include reduce-motion("transition"); @@ -328,7 +328,7 @@ height: $border-width-focus; left: 0; right: 0; - background: theme(primary); + background: var(--wp-theme-color); } // This is the clickable plus. @@ -600,7 +600,7 @@ // When button is focused, it receives a box-shadow instead of the border. &:focus { - box-shadow: 0 0 0 $border-width-focus $theme-color; + box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); } } } diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss index ab720c9495d992..c6bf09f1888f29 100644 --- a/packages/block-editor/src/components/block-styles/style.scss +++ b/packages/block-editor/src/components/block-styles/style.scss @@ -16,14 +16,14 @@ flex-direction: column; &:focus { - box-shadow: 0 0 0 $border-width-focus $theme-color; + box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } &:hover .block-editor-block-styles__item-preview { - border-color: $theme-color; + border-color: var(--wp-theme-color); } &.is-active { diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss index 68c5607286b275..23433d8ba28e40 100644 --- a/packages/block-editor/src/components/button-block-appender/style.scss +++ b/packages/block-editor/src/components/button-block-appender/style.scss @@ -10,11 +10,11 @@ box-shadow: inset 0 0 0 $border-width $dark-gray-primary; &:hover { - box-shadow: inset 0 0 0 $border-width $theme-color; + box-shadow: inset 0 0 0 $border-width var(--wp-theme-color); } &:focus { - box-shadow: inset 0 0 0 2px $theme-color; + box-shadow: inset 0 0 0 2px var(--wp-theme-color); } &:active { diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index 745caa0ed1ff7a..65fae9f805ec8a 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -31,8 +31,8 @@ &:not(:disabled) { &:hover { - border-color: $theme-color; - color: $theme-color !important; + border-color: var(--wp-theme-color); + color: var(--wp-theme-color) !important; } &.is-active { diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 4a2b50b14d8518..86985f3c35d575 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -86,7 +86,7 @@ $block-inserter-tabs-height: 44px; &:focus { background: $white; - box-shadow: 0 0 0 $border-width-focus $theme-color; + box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); } &::placeholder { @@ -256,11 +256,11 @@ $block-inserter-tabs-height: 44px; border: $border-width solid transparent; &:hover { - border: $border-width solid $theme-color; + border: $border-width solid var(--wp-theme-color); } &:focus { - box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 9b8908a8a9aeee..0b9f5344dc8f64 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -127,7 +127,7 @@ $block-editor-link-control-number-of-actions: 1; // The added specificity is needed to override. &:focus:not(:disabled) { - box-shadow: 0 0 0 $border-width-focus $theme-color inset; + box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color) inset; } &.is-selected { diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss index da043f1cc88c36..6a1d844779143a 100644 --- a/packages/block-editor/src/components/media-placeholder/style.scss +++ b/packages/block-editor/src/components/media-placeholder/style.scss @@ -41,6 +41,6 @@ &:hover { cursor: pointer; - box-shadow: 0 0 0 1px $theme-color; + box-shadow: 0 0 0 1px var(--wp-theme-color); } } diff --git a/packages/block-editor/src/components/preview-options/style.scss b/packages/block-editor/src/components/preview-options/style.scss index 48b44bfa091517..ad0726a05840b8 100644 --- a/packages/block-editor/src/components/preview-options/style.scss +++ b/packages/block-editor/src/components/preview-options/style.scss @@ -10,7 +10,7 @@ padding: 0 $grid-unit-10 0 $grid-unit-15; &:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-theme-color); } svg { diff --git a/packages/block-editor/src/components/skip-to-selected-block/style.scss b/packages/block-editor/src/components/skip-to-selected-block/style.scss index a0c707df2167aa..00cb0d5a786017 100644 --- a/packages/block-editor/src/components/skip-to-selected-block/style.scss +++ b/packages/block-editor/src/components/skip-to-selected-block/style.scss @@ -10,7 +10,7 @@ font-weight: 600; padding: 15px 23px 14px; background: #f1f1f1; - color: theme(secondary); + color: var(--wp-theme-color-secondary); line-height: normal; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); text-decoration: none; diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss index 884ca5dd7c6fe4..55697f3eb0a6aa 100644 --- a/packages/block-editor/src/components/url-input/style.scss +++ b/packages/block-editor/src/components/url-input/style.scss @@ -93,7 +93,7 @@ $input-size: 300px; &:focus, &.is-selected { - background: color(theme(primary) shade(15%)); + background: var(--wp-theme-color-darker-20); color: $white; outline: none; } diff --git a/packages/block-library/src/block/edit-panel/editor.scss b/packages/block-library/src/block/edit-panel/editor.scss index 9c538e8ee0b697..0fd5a9dbab6e57 100644 --- a/packages/block-library/src/block/edit-panel/editor.scss +++ b/packages/block-library/src/block/edit-panel/editor.scss @@ -52,9 +52,9 @@ } .is-navigate-mode .is-selected .reusable-block-edit-panel { - box-shadow: 0 0 0 $border-width $blue-medium-focus; + box-shadow: 0 0 0 $border-width var(--wp-theme-color); .is-dark-theme & { - box-shadow: 0 0 0 $border-width $blue-medium-focus; + box-shadow: 0 0 0 $border-width var(--wp-theme-color); } } diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 4689d36f0c2721..82a28526273517 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -43,7 +43,7 @@ figure.wp-block-gallery { } figure.is-selected { - box-shadow: 0 0 0 $border-width $white, 0 0 0 3px $theme-color; + box-shadow: 0 0 0 $border-width $white, 0 0 0 3px var(--wp-theme-color); border-radius: $radius-block-ui; outline: 2px solid transparent; diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index a0d038d02f6001..6c3d1b7b99fb10 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -75,7 +75,7 @@ // The child block itself has a more generic focus style, see line 55. [data-type="core/social-links"] .wp-social-link:focus { // This needs specificity. opacity: 1; - box-shadow: 0 0 0 2px $white, 0 0 0 4px $blue-medium-focus; + box-shadow: 0 0 0 2px $white, 0 0 0 4px var(--wp-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss index 20dc5db90ae6e8..6070c6482cf6b3 100644 --- a/packages/components/src/autocomplete/style.scss +++ b/packages/components/src/autocomplete/style.scss @@ -10,6 +10,6 @@ width: 100%; &.is-selected { - box-shadow: 0 0 0 2px color($theme-color); + box-shadow: 0 0 0 2px var(--wp-theme-color); } } diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss index f1dace4f64797a..1e63fb456932ba 100644 --- a/packages/components/src/button-group/style.scss +++ b/packages/components/src/button-group/style.scss @@ -4,8 +4,8 @@ .components-button { border-radius: 0; display: inline-flex; - color: $theme-color; - box-shadow: inset 0 0 0 $border-width $theme-color; + color: var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width var(--wp-theme-color); & + .components-button { margin-left: -1px; @@ -29,7 +29,7 @@ // The active button should look pressed. &.is-primary { - box-shadow: inset 0 0 0 $border-width $theme-color; + box-shadow: inset 0 0 0 $border-width var(--wp-theme-color); } } } diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 3f259cc9a1b549..f7deed195e19d2 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -19,7 +19,7 @@ &[aria-expanded="true"], &:hover { - color: $theme-color; + color: var(--wp-theme-color); } // Unset some hovers, instead of adding :not specificity. @@ -30,7 +30,7 @@ // Focus. // See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors. &:focus:not(:disabled) { - box-shadow: 0 0 0 $border-width-focus $theme-color; + box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 1px solid transparent; @@ -42,24 +42,24 @@ &.is-primary { white-space: nowrap; - background: color($theme-color); + background: var(--wp-theme-color); color: $white; text-decoration: none; text-shadow: none; &:hover:not(:disabled) { - background: color($theme-color shade(10%)); + background: var(--wp-theme-color-darker-10); color: $white; } &:active:not(:disabled) { - background: color($theme-color shade(20%)); - border-color: color($theme-color shade(20%)); + background: var(--wp-theme-color-darker-20); + border-color: var(--wp-theme-color-darker-20); color: $white; } &:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 1px solid transparent; @@ -70,15 +70,15 @@ &[aria-disabled="true"], &[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled. &[aria-disabled="true"]:active:enabled { - color: color($theme-color tint(40%)); - background: color($theme-color tint(10%)); - border-color: color($theme-color tint(10%)); + color: var(--wp-theme-color-lighter-40); + background: var(--wp-theme-color-lighter-10); + border-color: var(--wp-theme-color-lighter-10); opacity: 1; &:focus:enabled { box-shadow: 0 0 0 $border-width $white, - 0 0 0 3px color($theme-color); + 0 0 0 3px var(--wp-theme-color); } } @@ -91,13 +91,13 @@ /* stylelint-disable */ background-image: linear-gradient( -45deg, - $theme-color 28%, - color($theme-color shade(20%)) 28%, - color($theme-color shade(20%)) 72%, - $theme-color 72% + var(--wp-theme-color) 28%, + var(--wp-theme-color-darker-20) 28%, + var(--wp-theme-color-darker-20) 72%, + var(--wp-theme-color) 72% ); /* stylelint-enable */ - border-color: color($theme-color); + border-color: var(--wp-theme-color); } } @@ -109,13 +109,13 @@ &.is-tertiary { &:active:not(:disabled) { background: $light-gray-tertiary; - color: color($theme-color shade(10%)); + color: var(--wp-theme-color-darker-10); box-shadow: none; } &:hover:not(:disabled) { - color: color($theme-color shade(10%)); - box-shadow: inset 0 0 0 $border-width color($theme-color shade(10%)); + color: var(--wp-theme-color-darker-10); + box-shadow: inset 0 0 0 $border-width var(--wp-theme-color-darker-10); } &:disabled, @@ -134,10 +134,10 @@ */ &.is-secondary { - box-shadow: inset 0 0 0 $border-width $theme-color; + box-shadow: inset 0 0 0 $border-width var(--wp-theme-color); outline: 1px solid transparent; // Shown in high contrast mode. white-space: nowrap; - color: $theme-color; + color: var(--wp-theme-color); background: transparent; } @@ -147,7 +147,7 @@ &.is-tertiary { white-space: nowrap; - color: $theme-color; + color: var(--wp-theme-color); background: transparent; padding: 6px; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically. @@ -265,7 +265,7 @@ background: $dark-gray-primary; &:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss index bf8c473a5179df..d24a412dcf65a2 100644 --- a/packages/components/src/custom-gradient-picker/style.scss +++ b/packages/components/src/custom-gradient-picker/style.scss @@ -50,7 +50,7 @@ $components-custom-gradient-picker__padding: 3px; // 24px container, 18px handle border-color: #999; box-shadow: 0 0 0 1px $white, - 0 0 0 3px $blue-medium-focus; + 0 0 0 3px var(--wp-theme-color); } } } diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss index 73e7acdf117821..bc445d6a0eaa83 100644 --- a/packages/components/src/custom-select-control/style.scss +++ b/packages/components/src/custom-select-control/style.scss @@ -22,8 +22,8 @@ } &:focus:not(:disabled) { - border-color: $theme-color; - box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color; + border-color: var(--wp-theme-color); + box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-theme-color); } &-icon { diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index 71f367ba8eeb7a..00c1aa33747881 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -72,17 +72,17 @@ text-align: center; &:focus { - box-shadow: inset 0 0 0 $border-width-focus theme(primary), inset 0 0 0 #{ $border-width-focus + $border-width } $white; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 0 #{ $border-width-focus + $border-width } $white; outline: 2px solid transparent; // Shown in Windows 10 high contrast mode. } } .CalendarDay__selected { - background: theme(primary); + background: var(--wp-theme-color); border: 2px solid transparent; // This indicates selection in Windows 10 high contrast mode. &:hover { - background: color(theme(primary) shade(15%)); + background: var(--wp-theme-color-darker-20); } &:focus { diff --git a/packages/components/src/focal-point-picker/style.scss b/packages/components/src/focal-point-picker/style.scss index f93f2e57ad6886..a3555f17c3d9a9 100644 --- a/packages/components/src/focal-point-picker/style.scss +++ b/packages/components/src/focal-point-picker/style.scss @@ -52,7 +52,7 @@ } .components-focal-point-picker__icon-fill { - fill: theme(primary); + fill: var(--wp-theme-color); } } diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index 8be2aa6655ea98..99fffe757dd301 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -71,13 +71,13 @@ $toggle-border-width: 2px; // Checked state. &.is-checked .components-form-toggle__track { - background-color: theme(toggle); - border: $toggle-border-width solid theme(toggle); + background-color: var(--wp-theme-color-toggle); + border: $toggle-border-width solid var(--wp-theme-color-toggle); border: #{ $toggle-height / 2 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode. } &__input:focus + .components-form-toggle__track { - box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $theme-color; + box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) var(--wp-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; @@ -92,8 +92,8 @@ $toggle-border-width: 2px; } &::before { - background-color: theme(toggle); - border: $toggle-border-width solid theme(toggle); + background-color: var(--wp-theme-color-toggle); + border: $toggle-border-width solid var(--wp-theme-color-toggle); } } diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index cf4315c58ef167..14f1dd587e46b1 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -82,7 +82,7 @@ .components-form-token-field__token-text { background: transparent; - color: theme(secondary); + color: var(--wp-theme-color-secondary); } .components-form-token-field__remove-token { diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index fa53a3ceb130f4..d4102fc09c9627 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -89,7 +89,7 @@ height: auto; &:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); border-radius: 0; } diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index 51231b060fc123..6282a2d84398a2 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -22,7 +22,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M height: $resize-handler-size; border: 2px solid $white; border-radius: 50%; - background: theme(primary); + background: var(--wp-theme-color); cursor: inherit; position: absolute; top: calc(50% - #{ceil($resize-handler-size / 2)}); @@ -36,7 +36,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M width: 7px; height: 7px; border: 2px solid $white; - background: theme(primary); + background: var(--wp-theme-color); cursor: inherit; position: absolute; top: calc(50% - 4px); diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index 184de4aeb5314d..11a9f85b881a5c 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -23,7 +23,7 @@ background-color: $dark-gray-900; box-shadow: 0 0 0 1px $white, - 0 0 0 3px $blue-medium-focus; + 0 0 0 3px var(--wp-theme-color); } } diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss index fbc051f407e45c..157acce87eeb89 100644 --- a/packages/components/src/tab-panel/style.scss +++ b/packages/components/src/tab-panel/style.scss @@ -29,13 +29,13 @@ } &:focus:not(:disabled) { - box-shadow: inset 0 $border-width-focus $theme-color; + box-shadow: inset 0 $border-width-focus var(--wp-theme-color); } &.is-active { // The transparent shadow ensures no jumpiness when focus animates on an active tab. - box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 $theme-color; + box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); position: relative; // This border appears in Windows High Contrast mode instead of the box-shadow. @@ -51,10 +51,10 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); } &.is-active:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); } } diff --git a/packages/create-block/lib/templates/esnext/src/style.scss.mustache b/packages/create-block/lib/templates/esnext/src/style.scss.mustache index b4c87868e969b0..c5f26b84311fd3 100644 --- a/packages/create-block/lib/templates/esnext/src/style.scss.mustache +++ b/packages/create-block/lib/templates/esnext/src/style.scss.mustache @@ -6,7 +6,7 @@ */ .wp-block-{{namespace}}-{{slug}} { - background-color: theme(button); + background-color: var(--wp-admin-theme-color); color: #fff; padding: 2px; } diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index 2997e7745387b6..37d88d6cb72bb6 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -23,7 +23,7 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 ($border-width-focus + 1px) $white; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 0 ($border-width-focus + 1px) $white; } } } diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 52df89ab040862..af089a85514877 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -38,7 +38,7 @@ } &:focus:not(:disabled) { - box-shadow: 0 0 0 $border-width-focus $theme-color; + box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); outline: 1px solid transparent; } diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss index 04684bc06b4232..33d42a42f2a118 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/style.scss +++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss @@ -40,7 +40,7 @@ &.is-active { // The transparent shadow ensures no jumpiness when focus animates on an active tab. - box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 $theme-color; + box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); font-weight: 600; position: relative; @@ -57,10 +57,10 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); } &.is-active:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); } } diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss index e7ce0ff5ad4c70..83ebd3995dac87 100644 --- a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss @@ -23,7 +23,7 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 3px $white; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 0 3px $white; } } } diff --git a/packages/edit-site/src/components/template-switcher/style.scss b/packages/edit-site/src/components/template-switcher/style.scss index e2fef51a3a9c59..7da267f842e1de 100644 --- a/packages/edit-site/src/components/template-switcher/style.scss +++ b/packages/edit-site/src/components/template-switcher/style.scss @@ -21,7 +21,7 @@ width: 8px; height: 8px; display: block; - background: $theme-color; + background: var(--wp-theme-color); border-radius: 50%; } diff --git a/packages/edit-widgets/src/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss index 22c52fd5204e48..9f307b19960c4f 100644 --- a/packages/edit-widgets/src/components/sidebar/style.scss +++ b/packages/edit-widgets/src/components/sidebar/style.scss @@ -49,7 +49,7 @@ &.is-active { // The transparent shadow ensures no jumpiness when focus animates on an active tab. - box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 $theme-color; + box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); font-weight: 600; position: relative; @@ -66,11 +66,11 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); } &.is-active:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); } } diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss index 52e1a9e5b91fbd..817e37da3dbb9d 100644 --- a/packages/editor/src/components/document-outline/style.scss +++ b/packages/editor/src/components/document-outline/style.scss @@ -58,7 +58,7 @@ } &:focus { - box-shadow: 0 0 0 $border-width-focus $theme-color; + box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss index d9fd35f16edb5c..181660b49a4489 100644 --- a/packages/editor/src/components/post-last-revision/style.scss +++ b/packages/editor/src/components/post-last-revision/style.scss @@ -17,7 +17,7 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); border-radius: 0; } } diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss index 968f69a653764b..2886cc3a5b70e5 100644 --- a/packages/editor/src/components/table-of-contents/style.scss +++ b/packages/editor/src/components/table-of-contents/style.scss @@ -29,7 +29,7 @@ right: 0; bottom: 0; left: 0; - box-shadow: inset 0 0 0 $border-width-focus $theme-color; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); } .table-of-contents__counts { diff --git a/packages/postcss-plugins-preset/lib/index.js b/packages/postcss-plugins-preset/lib/index.js index 71eb89f520c576..0d6e120bf27258 100644 --- a/packages/postcss-plugins-preset/lib/index.js +++ b/packages/postcss-plugins-preset/lib/index.js @@ -4,6 +4,7 @@ const { adminColorSchemes } = require( '@wordpress/base-styles' ); module.exports = [ + require( 'postcss-custom-properties' )(), require( '@wordpress/postcss-themes' )( adminColorSchemes ), require( 'autoprefixer' )( { grid: true } ), require( 'postcss-color-function' ), diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json index 7a9ffa704ca34d..0f520ebf43bd5d 100644 --- a/packages/postcss-plugins-preset/package.json +++ b/packages/postcss-plugins-preset/package.json @@ -32,7 +32,8 @@ "@wordpress/base-styles": "file:../base-styles", "@wordpress/postcss-themes": "file:../postcss-themes", "autoprefixer": "^9.4.5", - "postcss-color-function": "^4.0.1" + "postcss-color-function": "^4.0.1", + "postcss-custom-properties": "^9.1.1" }, "publishConfig": { "access": "public" From 9708d09efb4d3e9612550f64bf0c914d9370ab96 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 11 Jun 2020 11:48:25 +0100 Subject: [PATCH 02/12] rename CSS variables --- packages/base-styles/_mixins.scss | 18 ++++---- packages/base-styles/_variables.scss | 14 +++--- .../components/block-breadcrumb/style.scss | 2 +- .../components/block-list-appender/style.scss | 2 +- .../src/components/block-list/style.scss | 10 ++-- .../src/components/block-styles/style.scss | 4 +- .../button-block-appender/style.scss | 4 +- .../components/inserter-list-item/style.scss | 4 +- .../src/components/inserter/style.scss | 6 +-- .../src/components/link-control/style.scss | 2 +- .../components/media-placeholder/style.scss | 2 +- .../src/components/preview-options/style.scss | 2 +- .../skip-to-selected-block/style.scss | 2 +- .../src/components/url-input/style.scss | 2 +- .../src/block/edit-panel/editor.scss | 4 +- .../block-library/src/gallery/editor.scss | 2 +- .../src/social-links/editor.scss | 2 +- .../components/src/autocomplete/style.scss | 2 +- .../components/src/button-group/style.scss | 6 +-- packages/components/src/button/style.scss | 46 +++++++++---------- .../src/custom-gradient-picker/style.scss | 2 +- .../src/custom-select-control/style.scss | 4 +- packages/components/src/date-time/style.scss | 6 +-- .../src/focal-point-picker/style.scss | 2 +- .../components/src/form-toggle/style.scss | 10 ++-- .../src/form-token-field/style.scss | 2 +- packages/components/src/panel/style.scss | 2 +- .../components/src/resizable-box/style.scss | 4 +- packages/components/src/snackbar/style.scss | 2 +- packages/components/src/tab-panel/style.scss | 8 ++-- .../header/fullscreen-mode-close/style.scss | 2 +- .../header/header-toolbar/style.scss | 2 +- .../sidebar/settings-header/style.scss | 6 +-- .../header/fullscreen-mode-close/style.scss | 2 +- .../components/template-switcher/style.scss | 2 +- .../src/components/sidebar/style.scss | 6 +-- .../components/document-outline/style.scss | 2 +- .../components/post-last-revision/style.scss | 2 +- .../components/table-of-contents/style.scss | 2 +- 39 files changed, 102 insertions(+), 102 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 7bb9294af12856..cf7658b1bb969f 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -118,7 +118,7 @@ */ @mixin block-toolbar-button-style__focus() { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 0 4px $white; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 0 4px $white; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; @@ -135,8 +135,8 @@ @mixin input-style__focus() { - border-color: var(--wp-theme-color); - box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-theme-color); + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; @@ -300,8 +300,8 @@ } &:checked { - background: var(--wp-theme-color-toggle); - border-color: var(--wp-theme-color-toggle); + background: var(--wp-admin-theme-color-toggle); + border-color: var(--wp-admin-theme-color-toggle); } &:checked:focus { @@ -320,8 +320,8 @@ } &[aria-checked="mixed"] { - background: var(--wp-theme-color-toggle); - border-color: var(--wp-theme-color-toggle); + background: var(--wp-admin-theme-color-toggle); + border-color: var(--wp-admin-theme-color-toggle); &::before { // Inherited from `forms.css`. @@ -374,8 +374,8 @@ } &:checked { - background: var(--wp-theme-color-toggle); - border-color: var(--wp-theme-color-toggle); + background: var(--wp-admin-theme-color-toggle); + border-color: var(--wp-admin-theme-color-toggle); } &:checked:focus { diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 7735a97bae3ddf..8039d53ef7110b 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -106,14 +106,14 @@ $radius-round: 50%; $radius-block-ui: 2px; :root { - --wp-theme-color: theme(primary); - --wp-theme-color-secondary: theme(secondary); - --wp-theme-color-toggle: theme(toggle); + --wp-admin-theme-color: theme(primary); + --wp-admin-theme-color-secondary: theme(secondary); + --wp-admin-theme-color-toggle: theme(toggle); // Ideally this are computed and not their own variables but due to Current CSS limitation // We need these. - --wp-theme-color-darker-20: theme(primaryDarker20); - --wp-theme-color-darker-10: theme(primaryDarker10); - --wp-theme-color-lighter-10: theme(primaryLighter10); - --wp-theme-color-lighter-40: theme(primaryLighter40); + --wp-admin-theme-color-darker-20: theme(primaryDarker20); + --wp-admin-theme-color-darker-10: theme(primaryDarker10); + --wp-admin-theme-color-lighter-10: theme(primaryLighter10); + --wp-admin-theme-color-lighter-40: theme(primaryLighter40); } diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss index 98e95f045d06b0..fd0dd70c16aa3f 100644 --- a/packages/block-editor/src/components/block-breadcrumb/style.scss +++ b/packages/block-editor/src/components/block-breadcrumb/style.scss @@ -37,7 +37,7 @@ right: $border-width; bottom: $border-width; left: $border-width; - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color); } } diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss index 359d0bc3b62e84..e382d175070634 100644 --- a/packages/block-editor/src/components/block-list-appender/style.scss +++ b/packages/block-editor/src/components/block-list-appender/style.scss @@ -27,7 +27,7 @@ top: -$grid-unit-10; bottom: -$grid-unit-10; border-radius: $radius-block-ui; - border: 3px solid var(--wp-theme-color); + border: 3px solid var(--wp-admin-theme-color); } .block-list-appender > .block-editor-inserter { diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index f4bc3be33d4689..0ffd059aacdfb4 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -75,7 +75,7 @@ right: $border-width; // 2px outside. - box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color); border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius. // Show a light color for dark themes. @@ -107,7 +107,7 @@ right: 0; left: 0; top: -$default-block-margin / 2; - border-top: 4px solid var(--wp-theme-color); + border-top: 4px solid var(--wp-admin-theme-color); } } @@ -140,7 +140,7 @@ &::after { // Everything else. // 2px outside. - box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color); border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius. transition: box-shadow 0.2s ease-out; @include reduce-motion("transition"); @@ -328,7 +328,7 @@ height: $border-width-focus; left: 0; right: 0; - background: var(--wp-theme-color); + background: var(--wp-admin-theme-color); } // This is the clickable plus. @@ -600,7 +600,7 @@ // When button is focused, it receives a box-shadow instead of the border. &:focus { - box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color); } } } diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss index c6bf09f1888f29..8ae9248313c87f 100644 --- a/packages/block-editor/src/components/block-styles/style.scss +++ b/packages/block-editor/src/components/block-styles/style.scss @@ -16,14 +16,14 @@ flex-direction: column; &:focus { - box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } &:hover .block-editor-block-styles__item-preview { - border-color: var(--wp-theme-color); + border-color: var(--wp-admin-theme-color); } &.is-active { diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss index 23433d8ba28e40..835f302d1d4f27 100644 --- a/packages/block-editor/src/components/button-block-appender/style.scss +++ b/packages/block-editor/src/components/button-block-appender/style.scss @@ -10,11 +10,11 @@ box-shadow: inset 0 0 0 $border-width $dark-gray-primary; &:hover { - box-shadow: inset 0 0 0 $border-width var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color); } &:focus { - box-shadow: inset 0 0 0 2px var(--wp-theme-color); + box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color); } &:active { diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index 65fae9f805ec8a..4ec155f07cfce7 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -31,8 +31,8 @@ &:not(:disabled) { &:hover { - border-color: var(--wp-theme-color); - color: var(--wp-theme-color) !important; + border-color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color) !important; } &.is-active { diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 86985f3c35d575..66c9b99dcad5ba 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -86,7 +86,7 @@ $block-inserter-tabs-height: 44px; &:focus { background: $white; - box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color); } &::placeholder { @@ -256,11 +256,11 @@ $block-inserter-tabs-height: 44px; border: $border-width solid transparent; &:hover { - border: $border-width solid var(--wp-theme-color); + border: $border-width solid var(--wp-admin-theme-color); } &:focus { - box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 0b9f5344dc8f64..8752e583a186fa 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -127,7 +127,7 @@ $block-editor-link-control-number-of-actions: 1; // The added specificity is needed to override. &:focus:not(:disabled) { - box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color) inset; + box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color) inset; } &.is-selected { diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss index 6a1d844779143a..88fa0f90deddc9 100644 --- a/packages/block-editor/src/components/media-placeholder/style.scss +++ b/packages/block-editor/src/components/media-placeholder/style.scss @@ -41,6 +41,6 @@ &:hover { cursor: pointer; - box-shadow: 0 0 0 1px var(--wp-theme-color); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); } } diff --git a/packages/block-editor/src/components/preview-options/style.scss b/packages/block-editor/src/components/preview-options/style.scss index ad0726a05840b8..903fa7fccc0846 100644 --- a/packages/block-editor/src/components/preview-options/style.scss +++ b/packages/block-editor/src/components/preview-options/style.scss @@ -10,7 +10,7 @@ padding: 0 $grid-unit-10 0 $grid-unit-15; &:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-admin-theme-color); } svg { diff --git a/packages/block-editor/src/components/skip-to-selected-block/style.scss b/packages/block-editor/src/components/skip-to-selected-block/style.scss index 00cb0d5a786017..70bcc75ea0d6f4 100644 --- a/packages/block-editor/src/components/skip-to-selected-block/style.scss +++ b/packages/block-editor/src/components/skip-to-selected-block/style.scss @@ -10,7 +10,7 @@ font-weight: 600; padding: 15px 23px 14px; background: #f1f1f1; - color: var(--wp-theme-color-secondary); + color: var(--wp-admin-theme-color-secondary); line-height: normal; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); text-decoration: none; diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss index 55697f3eb0a6aa..e645b7b3fac0c8 100644 --- a/packages/block-editor/src/components/url-input/style.scss +++ b/packages/block-editor/src/components/url-input/style.scss @@ -93,7 +93,7 @@ $input-size: 300px; &:focus, &.is-selected { - background: var(--wp-theme-color-darker-20); + background: var(--wp-admin-theme-color-darker-20); color: $white; outline: none; } diff --git a/packages/block-library/src/block/edit-panel/editor.scss b/packages/block-library/src/block/edit-panel/editor.scss index 0fd5a9dbab6e57..f13ccf0371e951 100644 --- a/packages/block-library/src/block/edit-panel/editor.scss +++ b/packages/block-library/src/block/edit-panel/editor.scss @@ -52,9 +52,9 @@ } .is-navigate-mode .is-selected .reusable-block-edit-panel { - box-shadow: 0 0 0 $border-width var(--wp-theme-color); + box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); .is-dark-theme & { - box-shadow: 0 0 0 $border-width var(--wp-theme-color); + box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); } } diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 82a28526273517..f216d139b7f7b2 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -43,7 +43,7 @@ figure.wp-block-gallery { } figure.is-selected { - box-shadow: 0 0 0 $border-width $white, 0 0 0 3px var(--wp-theme-color); + box-shadow: 0 0 0 $border-width $white, 0 0 0 3px var(--wp-admin-theme-color); border-radius: $radius-block-ui; outline: 2px solid transparent; diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 6c3d1b7b99fb10..cb38701728f1e3 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -75,7 +75,7 @@ // The child block itself has a more generic focus style, see line 55. [data-type="core/social-links"] .wp-social-link:focus { // This needs specificity. opacity: 1; - box-shadow: 0 0 0 2px $white, 0 0 0 4px var(--wp-theme-color); + box-shadow: 0 0 0 2px $white, 0 0 0 4px var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss index 6070c6482cf6b3..bdf0e6fed00807 100644 --- a/packages/components/src/autocomplete/style.scss +++ b/packages/components/src/autocomplete/style.scss @@ -10,6 +10,6 @@ width: 100%; &.is-selected { - box-shadow: 0 0 0 2px var(--wp-theme-color); + box-shadow: 0 0 0 2px var(--wp-admin-theme-color); } } diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss index 1e63fb456932ba..8ac03a2c21e756 100644 --- a/packages/components/src/button-group/style.scss +++ b/packages/components/src/button-group/style.scss @@ -4,8 +4,8 @@ .components-button { border-radius: 0; display: inline-flex; - color: var(--wp-theme-color); - box-shadow: inset 0 0 0 $border-width var(--wp-theme-color); + color: var(--wp-admin-theme-color); + box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color); & + .components-button { margin-left: -1px; @@ -29,7 +29,7 @@ // The active button should look pressed. &.is-primary { - box-shadow: inset 0 0 0 $border-width var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color); } } } diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index f7deed195e19d2..6074bf333908d5 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -19,7 +19,7 @@ &[aria-expanded="true"], &:hover { - color: var(--wp-theme-color); + color: var(--wp-admin-theme-color); } // Unset some hovers, instead of adding :not specificity. @@ -30,7 +30,7 @@ // Focus. // See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors. &:focus:not(:disabled) { - box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 1px solid transparent; @@ -42,24 +42,24 @@ &.is-primary { white-space: nowrap; - background: var(--wp-theme-color); + background: var(--wp-admin-theme-color); color: $white; text-decoration: none; text-shadow: none; &:hover:not(:disabled) { - background: var(--wp-theme-color-darker-10); + background: var(--wp-admin-theme-color-darker-10); color: $white; } &:active:not(:disabled) { - background: var(--wp-theme-color-darker-20); - border-color: var(--wp-theme-color-darker-20); + background: var(--wp-admin-theme-color-darker-20); + border-color: var(--wp-admin-theme-color-darker-20); color: $white; } &:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 1px solid transparent; @@ -70,15 +70,15 @@ &[aria-disabled="true"], &[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled. &[aria-disabled="true"]:active:enabled { - color: var(--wp-theme-color-lighter-40); - background: var(--wp-theme-color-lighter-10); - border-color: var(--wp-theme-color-lighter-10); + color: var(--wp-admin-theme-color-lighter-40); + background: var(--wp-admin-theme-color-lighter-10); + border-color: var(--wp-admin-theme-color-lighter-10); opacity: 1; &:focus:enabled { box-shadow: 0 0 0 $border-width $white, - 0 0 0 3px var(--wp-theme-color); + 0 0 0 3px var(--wp-admin-theme-color); } } @@ -91,13 +91,13 @@ /* stylelint-disable */ background-image: linear-gradient( -45deg, - var(--wp-theme-color) 28%, - var(--wp-theme-color-darker-20) 28%, - var(--wp-theme-color-darker-20) 72%, - var(--wp-theme-color) 72% + var(--wp-admin-theme-color) 28%, + var(--wp-admin-theme-color-darker-20) 28%, + var(--wp-admin-theme-color-darker-20) 72%, + var(--wp-admin-theme-color) 72% ); /* stylelint-enable */ - border-color: var(--wp-theme-color); + border-color: var(--wp-admin-theme-color); } } @@ -109,13 +109,13 @@ &.is-tertiary { &:active:not(:disabled) { background: $light-gray-tertiary; - color: var(--wp-theme-color-darker-10); + color: var(--wp-admin-theme-color-darker-10); box-shadow: none; } &:hover:not(:disabled) { - color: var(--wp-theme-color-darker-10); - box-shadow: inset 0 0 0 $border-width var(--wp-theme-color-darker-10); + color: var(--wp-admin-theme-color-darker-10); + box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10); } &:disabled, @@ -134,10 +134,10 @@ */ &.is-secondary { - box-shadow: inset 0 0 0 $border-width var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color); outline: 1px solid transparent; // Shown in high contrast mode. white-space: nowrap; - color: var(--wp-theme-color); + color: var(--wp-admin-theme-color); background: transparent; } @@ -147,7 +147,7 @@ &.is-tertiary { white-space: nowrap; - color: var(--wp-theme-color); + color: var(--wp-admin-theme-color); background: transparent; padding: 6px; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically. @@ -265,7 +265,7 @@ background: $dark-gray-primary; &:focus:not(:disabled) { - box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss index d24a412dcf65a2..61f15bfbb1414d 100644 --- a/packages/components/src/custom-gradient-picker/style.scss +++ b/packages/components/src/custom-gradient-picker/style.scss @@ -50,7 +50,7 @@ $components-custom-gradient-picker__padding: 3px; // 24px container, 18px handle border-color: #999; box-shadow: 0 0 0 1px $white, - 0 0 0 3px var(--wp-theme-color); + 0 0 0 3px var(--wp-admin-theme-color); } } } diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss index bc445d6a0eaa83..332d5464d24aa4 100644 --- a/packages/components/src/custom-select-control/style.scss +++ b/packages/components/src/custom-select-control/style.scss @@ -22,8 +22,8 @@ } &:focus:not(:disabled) { - border-color: var(--wp-theme-color); - box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-theme-color); + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color); } &-icon { diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index 00c1aa33747881..6f4f562b5288da 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -72,17 +72,17 @@ text-align: center; &:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 0 #{ $border-width-focus + $border-width } $white; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 0 #{ $border-width-focus + $border-width } $white; outline: 2px solid transparent; // Shown in Windows 10 high contrast mode. } } .CalendarDay__selected { - background: var(--wp-theme-color); + background: var(--wp-admin-theme-color); border: 2px solid transparent; // This indicates selection in Windows 10 high contrast mode. &:hover { - background: var(--wp-theme-color-darker-20); + background: var(--wp-admin-theme-color-darker-20); } &:focus { diff --git a/packages/components/src/focal-point-picker/style.scss b/packages/components/src/focal-point-picker/style.scss index a3555f17c3d9a9..c09cc1cac521be 100644 --- a/packages/components/src/focal-point-picker/style.scss +++ b/packages/components/src/focal-point-picker/style.scss @@ -52,7 +52,7 @@ } .components-focal-point-picker__icon-fill { - fill: var(--wp-theme-color); + fill: var(--wp-admin-theme-color); } } diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index 99fffe757dd301..da769c03fcefe0 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -71,13 +71,13 @@ $toggle-border-width: 2px; // Checked state. &.is-checked .components-form-toggle__track { - background-color: var(--wp-theme-color-toggle); - border: $toggle-border-width solid var(--wp-theme-color-toggle); + background-color: var(--wp-admin-theme-color-toggle); + border: $toggle-border-width solid var(--wp-admin-theme-color-toggle); border: #{ $toggle-height / 2 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode. } &__input:focus + .components-form-toggle__track { - box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) var(--wp-theme-color); + box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; @@ -92,8 +92,8 @@ $toggle-border-width: 2px; } &::before { - background-color: var(--wp-theme-color-toggle); - border: $toggle-border-width solid var(--wp-theme-color-toggle); + background-color: var(--wp-admin-theme-color-toggle); + border: $toggle-border-width solid var(--wp-admin-theme-color-toggle); } } diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index 14f1dd587e46b1..ba53ba646c949d 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -82,7 +82,7 @@ .components-form-token-field__token-text { background: transparent; - color: var(--wp-theme-color-secondary); + color: var(--wp-admin-theme-color-secondary); } .components-form-token-field__remove-token { diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index d4102fc09c9627..ed1d293600f819 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -89,7 +89,7 @@ height: auto; &:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color); border-radius: 0; } diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index 6282a2d84398a2..ffc11e75f31b51 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -22,7 +22,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M height: $resize-handler-size; border: 2px solid $white; border-radius: 50%; - background: var(--wp-theme-color); + background: var(--wp-admin-theme-color); cursor: inherit; position: absolute; top: calc(50% - #{ceil($resize-handler-size / 2)}); @@ -36,7 +36,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M width: 7px; height: 7px; border: 2px solid $white; - background: var(--wp-theme-color); + background: var(--wp-admin-theme-color); cursor: inherit; position: absolute; top: calc(50% - 4px); diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss index 11a9f85b881a5c..609449d1d63c40 100644 --- a/packages/components/src/snackbar/style.scss +++ b/packages/components/src/snackbar/style.scss @@ -23,7 +23,7 @@ background-color: $dark-gray-900; box-shadow: 0 0 0 1px $white, - 0 0 0 3px var(--wp-theme-color); + 0 0 0 3px var(--wp-admin-theme-color); } } diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss index 157acce87eeb89..0e7af82ad8a700 100644 --- a/packages/components/src/tab-panel/style.scss +++ b/packages/components/src/tab-panel/style.scss @@ -29,13 +29,13 @@ } &:focus:not(:disabled) { - box-shadow: inset 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 $border-width-focus var(--wp-admin-theme-color); } &.is-active { // The transparent shadow ensures no jumpiness when focus animates on an active tab. - box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); position: relative; // This border appears in Windows High Contrast mode instead of the box-shadow. @@ -51,10 +51,10 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color); } &.is-active:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); } } diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index 37d88d6cb72bb6..6846cac965113e 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -23,7 +23,7 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 0 ($border-width-focus + 1px) $white; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 0 ($border-width-focus + 1px) $white; } } } diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index af089a85514877..ad48b65d790753 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -38,7 +38,7 @@ } &:focus:not(:disabled) { - box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color); outline: 1px solid transparent; } diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss index 33d42a42f2a118..cb23ee73d5f7d6 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/style.scss +++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss @@ -40,7 +40,7 @@ &.is-active { // The transparent shadow ensures no jumpiness when focus animates on an active tab. - box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); font-weight: 600; position: relative; @@ -57,10 +57,10 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color); } &.is-active:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); } } diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss index 83ebd3995dac87..79b42cad715456 100644 --- a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss @@ -23,7 +23,7 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 0 3px $white; + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 0 3px $white; } } } diff --git a/packages/edit-site/src/components/template-switcher/style.scss b/packages/edit-site/src/components/template-switcher/style.scss index 7da267f842e1de..fe3e8c7a235ae3 100644 --- a/packages/edit-site/src/components/template-switcher/style.scss +++ b/packages/edit-site/src/components/template-switcher/style.scss @@ -21,7 +21,7 @@ width: 8px; height: 8px; display: block; - background: var(--wp-theme-color); + background: var(--wp-admin-theme-color); border-radius: 50%; } diff --git a/packages/edit-widgets/src/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss index 9f307b19960c4f..73096951ce0cbc 100644 --- a/packages/edit-widgets/src/components/sidebar/style.scss +++ b/packages/edit-widgets/src/components/sidebar/style.scss @@ -49,7 +49,7 @@ &.is-active { // The transparent shadow ensures no jumpiness when focus animates on an active tab. - box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); font-weight: 600; position: relative; @@ -66,11 +66,11 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color); } &.is-active:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); } } diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss index 817e37da3dbb9d..0654f984cba3fc 100644 --- a/packages/editor/src/components/document-outline/style.scss +++ b/packages/editor/src/components/document-outline/style.scss @@ -58,7 +58,7 @@ } &:focus { - box-shadow: 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss index 181660b49a4489..544183840e91bb 100644 --- a/packages/editor/src/components/post-last-revision/style.scss +++ b/packages/editor/src/components/post-last-revision/style.scss @@ -17,7 +17,7 @@ } &:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color); border-radius: 0; } } diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss index 2886cc3a5b70e5..c15d6c1c68eb87 100644 --- a/packages/editor/src/components/table-of-contents/style.scss +++ b/packages/editor/src/components/table-of-contents/style.scss @@ -29,7 +29,7 @@ right: 0; bottom: 0; left: 0; - box-shadow: inset 0 0 0 $border-width-focus var(--wp-theme-color); + box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color); } .table-of-contents__counts { From 8255a787831f501db4881c7f39b905321f05cd71 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 11 Jun 2020 12:07:10 +0100 Subject: [PATCH 03/12] Add comment to explain the duplication --- packages/base-styles/_variables.scss | 2 ++ packages/edit-widgets/src/style.scss | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 8039d53ef7110b..51945c104638b6 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -105,6 +105,8 @@ $radius-round-rectangle: 4px; $radius-round: 50%; $radius-block-ui: 2px; +// Ideally this is not repeated on all built styles +// But until we drop IE11 support, it's need to generate fallback colors. :root { --wp-admin-theme-color: theme(primary); --wp-admin-theme-color-secondary: theme(secondary); diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index 89981d7b8786d4..c1d86d238322e4 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -62,4 +62,3 @@ body.gutenberg_page_gutenberg-widgets { .edit-widgets-sidebar .components-button.interface-complementary-area__pin-unpin-item { display: none; } - From b67a5f93c4bea73b9daa813125c526e546fd0360 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 12 Jun 2020 10:21:12 +0100 Subject: [PATCH 04/12] Remove useless PostCSS plugin --- package-lock.json | 97 -------------------- packages/components/src/button/style.scss | 8 +- packages/postcss-plugins-preset/lib/index.js | 1 - packages/postcss-plugins-preset/package.json | 1 - 4 files changed, 4 insertions(+), 103 deletions(-) diff --git a/package-lock.json b/package-lock.json index 889f6333286c88..1124f3046059df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11202,7 +11202,6 @@ "@wordpress/base-styles": "file:packages/base-styles", "@wordpress/postcss-themes": "file:packages/postcss-themes", "autoprefixer": "^9.4.5", - "postcss-color-function": "^4.0.1", "postcss-custom-properties": "^9.1.1" } }, @@ -15488,17 +15487,6 @@ "object-visit": "^1.0.0" } }, - "color": { - "version": "0.11.4", - "resolved": "https://registry.npmjs.org/color/-/color-0.11.4.tgz", - "integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=", - "dev": true, - "requires": { - "clone": "^1.0.2", - "color-convert": "^1.3.0", - "color-string": "^0.3.0" - } - }, "color-convert": { "version": "1.9.2", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz", @@ -15512,15 +15500,6 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz", "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=" }, - "color-string": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz", - "integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=", - "dev": true, - "requires": { - "color-name": "^1.0.0" - } - }, "color-support": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", @@ -16657,26 +16636,6 @@ } } }, - "css-color-function": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/css-color-function/-/css-color-function-1.3.3.tgz", - "integrity": "sha1-jtJMLAIFBzM5+voAS8jBQfzLKC4=", - "dev": true, - "requires": { - "balanced-match": "0.1.0", - "color": "^0.11.0", - "debug": "^3.1.0", - "rgb": "~0.1.0" - }, - "dependencies": { - "balanced-match": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.1.0.tgz", - "integrity": "sha1-tQS9BYabOSWd0MXvw12EMXbczEo=", - "dev": true - } - } - }, "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -34864,50 +34823,6 @@ } } }, - "postcss-color-function": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-function/-/postcss-color-function-4.0.1.tgz", - "integrity": "sha1-QCs/LOvD9pR+YY+2vjZU++zvZEQ=", - "dev": true, - "requires": { - "css-color-function": "~1.3.3", - "postcss": "^6.0.1", - "postcss-message-helpers": "^2.0.0", - "postcss-value-parser": "^3.3.0" - }, - "dependencies": { - "postcss": { - "version": "6.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", - "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", - "dev": true, - "requires": { - "chalk": "^2.4.1", - "source-map": "^0.6.1", - "supports-color": "^5.4.0" - }, - "dependencies": { - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - } - } - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } - }, "postcss-colormin": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz", @@ -35226,12 +35141,6 @@ } } }, - "postcss-message-helpers": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz", - "integrity": "sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4=", - "dev": true - }, "postcss-minify-font-values": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz", @@ -39215,12 +39124,6 @@ "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", "dev": true }, - "rgb": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/rgb/-/rgb-0.1.0.tgz", - "integrity": "sha1-vieykej+/+rBvZlylyG/pA/AN7U=", - "dev": true - }, "rgb-regex": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz", diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 6074bf333908d5..f62e8d6cdaee83 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -218,10 +218,10 @@ /* stylelint-disable */ background-image: linear-gradient( -45deg, - color($white shade(2%)) 28%, - color($white shade(12%)) 28%, - color($white shade(12%)) 72%, - color($white shade(2%)) 72% + darken($white, 2%) 28%, + darken($white, 12%) 28%, + darken($white, 12%) 72%, + darken($white, 2%) 72% ); /* stylelint-enable */ } diff --git a/packages/postcss-plugins-preset/lib/index.js b/packages/postcss-plugins-preset/lib/index.js index 0d6e120bf27258..b4e6d543d1c05c 100644 --- a/packages/postcss-plugins-preset/lib/index.js +++ b/packages/postcss-plugins-preset/lib/index.js @@ -7,5 +7,4 @@ module.exports = [ require( 'postcss-custom-properties' )(), require( '@wordpress/postcss-themes' )( adminColorSchemes ), require( 'autoprefixer' )( { grid: true } ), - require( 'postcss-color-function' ), ]; diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json index 0f520ebf43bd5d..454c2f8797d99d 100644 --- a/packages/postcss-plugins-preset/package.json +++ b/packages/postcss-plugins-preset/package.json @@ -32,7 +32,6 @@ "@wordpress/base-styles": "file:../base-styles", "@wordpress/postcss-themes": "file:../postcss-themes", "autoprefixer": "^9.4.5", - "postcss-color-function": "^4.0.1", "postcss-custom-properties": "^9.1.1" }, "publishConfig": { From d4e6b0379506ce08fdac2af45bc8721b438f3ebe Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 12 Jun 2020 11:29:30 +0100 Subject: [PATCH 05/12] Fix the production build --- package-lock.json | 8 ++++---- package.json | 2 +- packages/base-styles/index.js | 8 ++++---- packages/postcss-themes/package.json | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1124f3046059df..32e7e9992c5c30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11209,7 +11209,7 @@ "version": "file:packages/postcss-themes", "dev": true, "requires": { - "postcss": "^7.0.13" + "postcss": "^7.0.32" } }, "@wordpress/prettier-config": { @@ -34737,9 +34737,9 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=" }, "postcss": { - "version": "7.0.13", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.13.tgz", - "integrity": "sha512-h8SY6kQTd1wISHWjz+E6cswdhMuyBZRb16pSTv3W4zYZ3/YbyWeJdNUeOXB5IdZqE1U76OUEjjjqsC3z2f3hVg==", + "version": "7.0.32", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz", + "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==", "dev": true, "requires": { "chalk": "^2.4.2", diff --git a/package.json b/package.json index 27366e0f0dfa79..382bd3756fd8b5 100644 --- a/package.json +++ b/package.json @@ -164,7 +164,7 @@ "nock": "12.0.3", "node-sass": "4.13.1", "node-watch": "0.6.0", - "postcss": "7.0.13", + "postcss": "7.0.32", "postcss-loader": "3.0.0", "prettier": "npm:wp-prettier@2.0.5", "progress": "2.0.3", diff --git a/packages/base-styles/index.js b/packages/base-styles/index.js index 963efc19dec0c8..5eb06301f17680 100644 --- a/packages/base-styles/index.js +++ b/packages/base-styles/index.js @@ -31,10 +31,10 @@ exports.adminColorSchemes = { primary: '#c2a68c', secondary: '#9fa47b', toggle: '#c2a68c', - primaryDarker10: '', - primaryDarker20: '', - primaryLighter10: '', - primaryLighter40: '', + primaryDarker10: '#b08c6b', + primaryDarker20: '#987350', + primaryLighter10: '#d4c0ad', + primaryLighter40: '#f7f3f0', }, 'admin-color-ectoplasm': { primary: '#a7b656', diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json index 538dd8120a60d8..b6611c6ca43d0e 100644 --- a/packages/postcss-themes/package.json +++ b/packages/postcss-themes/package.json @@ -31,7 +31,7 @@ ], "main": "index.js", "dependencies": { - "postcss": "^7.0.13" + "postcss": "^7.0.32" }, "publishConfig": { "access": "public" From ff03248619d3c876d5cfdd53433f247326534e39 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 15 Jun 2020 10:39:25 +0100 Subject: [PATCH 06/12] Update the CSS variables setup --- packages/base-styles/CHANGELOG.md | 4 + packages/base-styles/README.md | 9 - packages/base-styles/_mixins.scss | 50 +++ packages/base-styles/_variables.scss | 15 - packages/base-styles/index.js | 76 ---- .../grammar.pegjs | 331 ------------------ packages/edit-post/src/style.scss | 3 +- packages/edit-site/src/style.scss | 2 + packages/edit-widgets/src/style.scss | 3 + packages/list-reusable-blocks/src/style.scss | 2 + packages/postcss-plugins-preset/lib/index.js | 6 - 11 files changed, 63 insertions(+), 438 deletions(-) delete mode 100644 packages/base-styles/index.js delete mode 100644 packages/block-serialization-spec-parser/grammar.pegjs diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index 7bc8b507e119dd..fab0cd143d2534 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +## Breaking Changes + +- Remove the AdminColorThemes JavaScript variables. + ## 1.2.0 (2020-01-13) ### Bug Fix diff --git a/packages/base-styles/README.md b/packages/base-styles/README.md index 20945fd08acf8f..b4ad22facfce83 100644 --- a/packages/base-styles/README.md +++ b/packages/base-styles/README.md @@ -39,13 +39,4 @@ To make that work with [`sass`](https://www.npmjs.com/package/sass) or [`node-sa } ``` -### PostCSS color schemes - -To use color schemes with [`@wordpress/postcss-themes`](https://www.npmjs.com/package/@wordpress/postcss-themes), import them like so: - -```js -const { adminColorSchemes } = require( '@wordpress/base-styles' ); -const wpPostcss = require( '@wordpress/postcss-themes' )( adminColorSchemes ) -``` -

Code is Poetry.

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index cf7658b1bb969f..41002aee82fdf8 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -437,3 +437,53 @@ max-width: 100%; } } + +@mixin admin-scheme($color-primary, $color-secondary, $color-toggle) { + --wp-admin-theme-color: #{$color-primary}; + --wp-admin-theme-color-secondary: #{$color-secondary}; + --wp-admin-theme-color-toggle: #{$color-toggle}; + + // Ideally, we should limit these computed variables, + // because we can"t compute colors based on CSS variables. + // This requires refactoring some existing styles. + --wp-admin-theme-color-darker-20: darken(#{$color-primary}, 20%); + --wp-admin-theme-color-darker-10: darken(#{$color-primary}, 10%); + --wp-admin-theme-color-lighter-10: lighten(#{$color-primary}, 10%); + --wp-admin-theme-color-lighter-40: lighten(#{$color-primary}, 40%); +} + +@mixin wordpress-admin-schemes() { + body.admin-color-light { + @include admin-scheme("#0085ba", "#c75726", "#11a0d2"); + } + + body.admin-color-blue { + @include admin-scheme("#82b4cb", "#d9ab59", "#82b4cb"); + } + + body.admin-color-coffee { + @include admin-scheme("#c2a68c", "#9fa47b", "#c2a68c"); + } + + body.admin-color-ectoplasm { + @include admin-scheme("#a7b656", "#c77430", "#a7b656"); + } + + body.admin-color-midnight { + @include admin-scheme("#e14d43", "#77a6b9", "#77a6b9"); + } + + body.admin-color-ocean { + @include admin-scheme("#a3b9a2", "#a89d8a", "#a3b9a2"); + } + + body.admin-color-sunrise { + @include admin-scheme("#d1864a", "#c8b03c", "#c8b03c"); + } +} + +// It is important to include these styles in all built stylesheets +// This allows to CSS variables post CSS plugin to generate fallbacks. +:root { + @include admin-scheme("#007cba", "#11a0d2", "#11a0d2"); +} diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 51945c104638b6..ef5e079179ea88 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -104,18 +104,3 @@ $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $b $radius-round-rectangle: 4px; $radius-round: 50%; $radius-block-ui: 2px; - -// Ideally this is not repeated on all built styles -// But until we drop IE11 support, it's need to generate fallback colors. -:root { - --wp-admin-theme-color: theme(primary); - --wp-admin-theme-color-secondary: theme(secondary); - --wp-admin-theme-color-toggle: theme(toggle); - - // Ideally this are computed and not their own variables but due to Current CSS limitation - // We need these. - --wp-admin-theme-color-darker-20: theme(primaryDarker20); - --wp-admin-theme-color-darker-10: theme(primaryDarker10); - --wp-admin-theme-color-lighter-10: theme(primaryLighter10); - --wp-admin-theme-color-lighter-40: theme(primaryLighter40); -} diff --git a/packages/base-styles/index.js b/packages/base-styles/index.js deleted file mode 100644 index 5eb06301f17680..00000000000000 --- a/packages/base-styles/index.js +++ /dev/null @@ -1,76 +0,0 @@ -exports.adminColorSchemes = { - defaults: { - primary: '#007cba', - secondary: '#11a0d2', - toggle: '#11a0d2', - primaryDarker10: '#005a87', - primaryDarker20: '#003854', - primaryLighter10: '#009eed', - primaryLighter40: '#87d7ff', - }, - themes: { - 'admin-color-light': { - primary: '#0085ba', - secondary: '#c75726', - toggle: '#11a0d2', - primaryDarker10: '#006187', - primaryDarker20: '#003c54', - primaryLighter10: '#00a9ed', - primaryLighter40: '#87ddff', - }, - 'admin-color-blue': { - primary: '#82b4cb', - secondary: '#d9ab59', - toggle: '#82b4cb', - primaryDarker10: '#5e9ebc', - primaryDarker20: '#4485a3', - primaryLighter10: '#a6cada', - primaryLighter40: '#eef5f8', - }, - 'admin-color-coffee': { - primary: '#c2a68c', - secondary: '#9fa47b', - toggle: '#c2a68c', - primaryDarker10: '#b08c6b', - primaryDarker20: '#987350', - primaryLighter10: '#d4c0ad', - primaryLighter40: '#f7f3f0', - }, - 'admin-color-ectoplasm': { - primary: '#a7b656', - secondary: '#c77430', - toggle: '#a7b656', - primaryDarker10: '#b08c6b', - primaryDarker20: '#987350', - primaryLighter10: '#c2a68c', - primaryLighter40: '#f7f3f0', - }, - 'admin-color-midnight': { - primary: '#e14d43', - secondary: '#77a6b9', - toggle: '#77a6b9', - primaryDarker10: '#d02c21', - primaryDarker20: '#a4231a', - primaryLighter10: '#e8776f', - primaryLighter40: '#fdf4f3', - }, - 'admin-color-ocean': { - primary: '#a3b9a2', - secondary: '#a89d8a', - toggle: '#a3b9a2', - primaryDarker10: '#86a385', - primaryDarker20: '#6b8c69', - primaryLighter10: '#c0cfbf', - primaryLighter40: '#f9fbf9', - }, - 'admin-color-sunrise': { - primary: '#d1864a', - secondary: '#c8b03c', - toggle: '#c8b03c', - primaryDarker10: '#b96c2f', - primaryDarker20: '#905525', - primaryLighter10: '#dba173', - primaryLighter40: '#faf3ed', - }, - }, -}; diff --git a/packages/block-serialization-spec-parser/grammar.pegjs b/packages/block-serialization-spec-parser/grammar.pegjs deleted file mode 100644 index 19b8dd9e70487b..00000000000000 --- a/packages/block-serialization-spec-parser/grammar.pegjs +++ /dev/null @@ -1,331 +0,0 @@ -{ - -/* - * - * _____ _ _ - * / ____| | | | | - * | | __ _ _| |_ ___ _ __ | |__ ___ _ __ __ _ - * | | |_ | | | | __/ _ \ '_ \| '_ \ / _ \ '__/ _` | - * | |__| | |_| | || __/ | | | |_) | __/ | | (_| | - * \_____|\__,_|\__\___|_| |_|_.__/ \___|_| \__, | - * __/ | - * GRAMMAR |___/ - * - * - * Welcome to the grammar file for Gutenberg posts! - * - * Please don't be distracted by the functions at the top - * here - they're just helpers for the grammar below. We - * try to keep them as minimal and simple as possible, - * but the parser generator forces us to declare them at - * the beginning of the file. - * - * What follows is the official specification grammar for - * documents created or edited in Gutenberg. It starts at - * the top-level rule `Block_List` - * - * The grammar is defined by a series of _rules_ and ways - * to return matches on those rules. It's a _PEG_, a - * parsing expression grammar, which simply means that for - * each of our rules we have a set of sub-rules to match - * on and the generated parser will try them in order - * until it finds the first match. - * - * This grammar is a _specification_ (with as little actual - * code as we can get away with) which is used by the - * parser generator to generate the actual _parser_ which - * is used by Gutenberg. We generate two parsers: one in - * JavaScript for use the browser and one in PHP for - * WordPress itself. PEG parser generators are available - * in many languages, though different libraries may require - * some translation of this grammar into their syntax. - * - * For more information: - * @see https://pegjs.org - * @see https://en.wikipedia.org/wiki/Parsing_expression_grammar - * - */ - -/** null, - 'attrs' => peg_empty_attrs(), - 'innerBlocks' => array(), - 'innerHTML' => $pre, - 'innerContent' => array( $pre ), - ); - } - - foreach ( $tokens as $token ) { - list( $token, $html ) = $token; - - $blocks[] = $token; - - if ( ! empty( $html ) ) { - $blocks[] = array( - 'blockName' => null, - 'attrs' => peg_empty_attrs(), - 'innerBlocks' => array(), - 'innerHTML' => $html, - 'innerContent' => array( $html ), - ); - } - } - - if ( ! empty( $post ) ) { - $blocks[] = array( - 'blockName' => null, - 'attrs' => peg_empty_attrs(), - 'innerBlocks' => array(), - 'innerHTML' => $post, - 'innerContent' => array( $post ), - ); - } - - return $blocks; - } -} - -?> **/ - -function freeform( s ) { - return s.length && { - blockName: null, - attrs: {}, - innerBlocks: [], - innerHTML: s, - innerContent: [ s ], - }; -} - -function joinBlocks( pre, tokens, post ) { - var blocks = [], i, l, html, item, token; - - if ( pre.length ) { - blocks.push( freeform( pre ) ); - } - - for ( i = 0, l = tokens.length; i < l; i++ ) { - item = tokens[ i ]; - token = item[ 0 ]; - html = item[ 1 ]; - - blocks.push( token ); - if ( html.length ) { - blocks.push( freeform( html ) ); - } - } - - if ( post.length ) { - blocks.push( freeform( post ) ); - } - - return blocks; -} - -function maybeJSON( s ) { - try { - return JSON.parse( s ); - } catch (e) { - return null; - } -} - -function processInnerContent( list ) { - var i, l, item; - var html = ''; - var blocks = []; - var content = []; - - // nod to performance over a simpler reduce - // and clone model we could have taken here - for ( i = 0, l = list.length; i < l; i++ ) { - item = list[ i ]; - - if ( 'string' === typeof item ) { - html += item; - content.push( item ); - } else { - blocks.push( item ); - content.push( null ); - } - }; - - return [ html, blocks, content ]; -} - -} - -////////////////////////////////////////////////////// -// -// Here starts the grammar proper! -// -////////////////////////////////////////////////////// - -Block_List - = pre:$(!Block .)* - bs:(b:Block html:$((!Block .)*) { /** **/ return [ b, html ] })* - post:$(.*) - { /** **/ - return joinBlocks( pre, bs, post ); - } - -Block - = Block_Void - / Block_Balanced - -Block_Void - = "" - { - /** $blockName, - 'attrs' => empty( $attrs ) ? peg_empty_attrs() : $attrs, - 'innerBlocks' => array(), - 'innerHTML' => '', - 'innerContent' => array(), - ); - ?> **/ - - return { - blockName: blockName, - attrs: attrs || {}, - innerBlocks: [], - innerHTML: '', - innerContent: [] - }; - } - -Block_Balanced - = s:Block_Start children:(Block / $((!Block !Block_End .)+))* e:Block_End - { - /** $s['blockName'], - 'attrs' => empty( $s['attrs'] ) ? peg_empty_attrs() : $s['attrs'], - 'innerBlocks' => $innerBlocks, - 'innerHTML' => $innerHTML, - 'innerContent' => $innerContent, - ); - ?> **/ - - var innerParts = processInnerContent( children ); - var innerHTML = innerParts[ 0 ]; - var innerBlocks = innerParts[ 1 ]; - var innerContent = innerParts[ 2 ]; - - return { - blockName: s.blockName, - attrs: s.attrs, - innerBlocks: innerBlocks, - innerHTML: innerHTML, - innerContent: innerContent, - }; - } - -Block_Start - = "" - { - /** $blockName, - 'attrs' => isset( $attrs ) ? $attrs : array(), - ); - ?> **/ - - return { - blockName: blockName, - attrs: attrs || {} - }; - } - -Block_End - = "" - { - /** $blockName, - ); - ?> **/ - - return { - blockName: blockName - }; - } - -Block_Name - = Namespaced_Block_Name - / Core_Block_Name - -Namespaced_Block_Name - = $( Block_Name_Part "/" Block_Name_Part ) - -Core_Block_Name - = type:$( Block_Name_Part ) - { - /** **/ - return 'core/' + type; - } - -Block_Name_Part - = $( [a-z][a-z0-9_-]* ) - -Block_Attributes - "JSON-encoded attributes embedded in a block's opening comment" - = attrs:$("{" (!("}" __ """/"? "-->") .)* "}") - { - /** **/ - return maybeJSON( attrs ); - } - -__ - = [ \t\r\n]+ diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 92eb32bd0ffca9..a671241c6293f4 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -24,7 +24,6 @@ $footer-height: $button-size-small; @import "./components/options-modal/style.scss"; @import "./components/welcome-guide/style.scss"; - /** * Animations */ @@ -110,3 +109,5 @@ body.block-editor-page { max-width: none; } } + +@include wordpress-admin-schemes(); diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index d4dabbda8d75a0..47265124394f04 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -86,3 +86,5 @@ body.toplevel_page_gutenberg-edit-site { opacity: 1; } } + +@include wordpress-admin-schemes(); diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index c1d86d238322e4..63cfa061dd70c2 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -62,3 +62,6 @@ body.gutenberg_page_gutenberg-widgets { .edit-widgets-sidebar .components-button.interface-complementary-area__pin-unpin-item { display: none; } + + +@include wordpress-admin-schemes(); diff --git a/packages/list-reusable-blocks/src/style.scss b/packages/list-reusable-blocks/src/style.scss index a95e831759ae15..ad85c700586099 100644 --- a/packages/list-reusable-blocks/src/style.scss +++ b/packages/list-reusable-blocks/src/style.scss @@ -11,3 +11,5 @@ height: 26px; } } + +@include wordpress-admin-schemes(); diff --git a/packages/postcss-plugins-preset/lib/index.js b/packages/postcss-plugins-preset/lib/index.js index b4e6d543d1c05c..925b3dec46ec52 100644 --- a/packages/postcss-plugins-preset/lib/index.js +++ b/packages/postcss-plugins-preset/lib/index.js @@ -1,10 +1,4 @@ -/** - * WordPress dependencies - */ -const { adminColorSchemes } = require( '@wordpress/base-styles' ); - module.exports = [ require( 'postcss-custom-properties' )(), - require( '@wordpress/postcss-themes' )( adminColorSchemes ), require( 'autoprefixer' )( { grid: true } ), ]; From 0aa5a1127084f27bca3d678738925a96b24e7993 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 15 Jun 2020 10:56:32 +0100 Subject: [PATCH 07/12] restore removed file --- .../grammar.pegjs | 331 ++++++++++++++++++ 1 file changed, 331 insertions(+) create mode 100644 packages/block-serialization-spec-parser/grammar.pegjs diff --git a/packages/block-serialization-spec-parser/grammar.pegjs b/packages/block-serialization-spec-parser/grammar.pegjs new file mode 100644 index 00000000000000..19b8dd9e70487b --- /dev/null +++ b/packages/block-serialization-spec-parser/grammar.pegjs @@ -0,0 +1,331 @@ +{ + +/* + * + * _____ _ _ + * / ____| | | | | + * | | __ _ _| |_ ___ _ __ | |__ ___ _ __ __ _ + * | | |_ | | | | __/ _ \ '_ \| '_ \ / _ \ '__/ _` | + * | |__| | |_| | || __/ | | | |_) | __/ | | (_| | + * \_____|\__,_|\__\___|_| |_|_.__/ \___|_| \__, | + * __/ | + * GRAMMAR |___/ + * + * + * Welcome to the grammar file for Gutenberg posts! + * + * Please don't be distracted by the functions at the top + * here - they're just helpers for the grammar below. We + * try to keep them as minimal and simple as possible, + * but the parser generator forces us to declare them at + * the beginning of the file. + * + * What follows is the official specification grammar for + * documents created or edited in Gutenberg. It starts at + * the top-level rule `Block_List` + * + * The grammar is defined by a series of _rules_ and ways + * to return matches on those rules. It's a _PEG_, a + * parsing expression grammar, which simply means that for + * each of our rules we have a set of sub-rules to match + * on and the generated parser will try them in order + * until it finds the first match. + * + * This grammar is a _specification_ (with as little actual + * code as we can get away with) which is used by the + * parser generator to generate the actual _parser_ which + * is used by Gutenberg. We generate two parsers: one in + * JavaScript for use the browser and one in PHP for + * WordPress itself. PEG parser generators are available + * in many languages, though different libraries may require + * some translation of this grammar into their syntax. + * + * For more information: + * @see https://pegjs.org + * @see https://en.wikipedia.org/wiki/Parsing_expression_grammar + * + */ + +/** null, + 'attrs' => peg_empty_attrs(), + 'innerBlocks' => array(), + 'innerHTML' => $pre, + 'innerContent' => array( $pre ), + ); + } + + foreach ( $tokens as $token ) { + list( $token, $html ) = $token; + + $blocks[] = $token; + + if ( ! empty( $html ) ) { + $blocks[] = array( + 'blockName' => null, + 'attrs' => peg_empty_attrs(), + 'innerBlocks' => array(), + 'innerHTML' => $html, + 'innerContent' => array( $html ), + ); + } + } + + if ( ! empty( $post ) ) { + $blocks[] = array( + 'blockName' => null, + 'attrs' => peg_empty_attrs(), + 'innerBlocks' => array(), + 'innerHTML' => $post, + 'innerContent' => array( $post ), + ); + } + + return $blocks; + } +} + +?> **/ + +function freeform( s ) { + return s.length && { + blockName: null, + attrs: {}, + innerBlocks: [], + innerHTML: s, + innerContent: [ s ], + }; +} + +function joinBlocks( pre, tokens, post ) { + var blocks = [], i, l, html, item, token; + + if ( pre.length ) { + blocks.push( freeform( pre ) ); + } + + for ( i = 0, l = tokens.length; i < l; i++ ) { + item = tokens[ i ]; + token = item[ 0 ]; + html = item[ 1 ]; + + blocks.push( token ); + if ( html.length ) { + blocks.push( freeform( html ) ); + } + } + + if ( post.length ) { + blocks.push( freeform( post ) ); + } + + return blocks; +} + +function maybeJSON( s ) { + try { + return JSON.parse( s ); + } catch (e) { + return null; + } +} + +function processInnerContent( list ) { + var i, l, item; + var html = ''; + var blocks = []; + var content = []; + + // nod to performance over a simpler reduce + // and clone model we could have taken here + for ( i = 0, l = list.length; i < l; i++ ) { + item = list[ i ]; + + if ( 'string' === typeof item ) { + html += item; + content.push( item ); + } else { + blocks.push( item ); + content.push( null ); + } + }; + + return [ html, blocks, content ]; +} + +} + +////////////////////////////////////////////////////// +// +// Here starts the grammar proper! +// +////////////////////////////////////////////////////// + +Block_List + = pre:$(!Block .)* + bs:(b:Block html:$((!Block .)*) { /** **/ return [ b, html ] })* + post:$(.*) + { /** **/ + return joinBlocks( pre, bs, post ); + } + +Block + = Block_Void + / Block_Balanced + +Block_Void + = "" + { + /** $blockName, + 'attrs' => empty( $attrs ) ? peg_empty_attrs() : $attrs, + 'innerBlocks' => array(), + 'innerHTML' => '', + 'innerContent' => array(), + ); + ?> **/ + + return { + blockName: blockName, + attrs: attrs || {}, + innerBlocks: [], + innerHTML: '', + innerContent: [] + }; + } + +Block_Balanced + = s:Block_Start children:(Block / $((!Block !Block_End .)+))* e:Block_End + { + /** $s['blockName'], + 'attrs' => empty( $s['attrs'] ) ? peg_empty_attrs() : $s['attrs'], + 'innerBlocks' => $innerBlocks, + 'innerHTML' => $innerHTML, + 'innerContent' => $innerContent, + ); + ?> **/ + + var innerParts = processInnerContent( children ); + var innerHTML = innerParts[ 0 ]; + var innerBlocks = innerParts[ 1 ]; + var innerContent = innerParts[ 2 ]; + + return { + blockName: s.blockName, + attrs: s.attrs, + innerBlocks: innerBlocks, + innerHTML: innerHTML, + innerContent: innerContent, + }; + } + +Block_Start + = "" + { + /** $blockName, + 'attrs' => isset( $attrs ) ? $attrs : array(), + ); + ?> **/ + + return { + blockName: blockName, + attrs: attrs || {} + }; + } + +Block_End + = "" + { + /** $blockName, + ); + ?> **/ + + return { + blockName: blockName + }; + } + +Block_Name + = Namespaced_Block_Name + / Core_Block_Name + +Namespaced_Block_Name + = $( Block_Name_Part "/" Block_Name_Part ) + +Core_Block_Name + = type:$( Block_Name_Part ) + { + /** **/ + return 'core/' + type; + } + +Block_Name_Part + = $( [a-z][a-z0-9_-]* ) + +Block_Attributes + "JSON-encoded attributes embedded in a block's opening comment" + = attrs:$("{" (!("}" __ """/"? "-->") .)* "}") + { + /** **/ + return maybeJSON( attrs ); + } + +__ + = [ \t\r\n]+ From 2b1506b0706dd5e7e368aa038bac267ec9aef7a4 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 15 Jun 2020 20:29:44 +0100 Subject: [PATCH 08/12] Fix admin scheme mixin --- packages/base-styles/_mixins.scss | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 41002aee82fdf8..437ba9c6576e24 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -446,44 +446,44 @@ // Ideally, we should limit these computed variables, // because we can"t compute colors based on CSS variables. // This requires refactoring some existing styles. - --wp-admin-theme-color-darker-20: darken(#{$color-primary}, 20%); - --wp-admin-theme-color-darker-10: darken(#{$color-primary}, 10%); - --wp-admin-theme-color-lighter-10: lighten(#{$color-primary}, 10%); - --wp-admin-theme-color-lighter-40: lighten(#{$color-primary}, 40%); + --wp-admin-theme-color-darker-20: #{darken($color-primary, 20%)}; + --wp-admin-theme-color-darker-10: #{darken($color-primary, 10%)}; + --wp-admin-theme-color-lighter-10: #{lighten($color-primary, 10%)}; + --wp-admin-theme-color-lighter-40: #{lighten($color-primary, 40%)}; } @mixin wordpress-admin-schemes() { body.admin-color-light { - @include admin-scheme("#0085ba", "#c75726", "#11a0d2"); + @include admin-scheme(#0085ba, #c75726, #11a0d2); } body.admin-color-blue { - @include admin-scheme("#82b4cb", "#d9ab59", "#82b4cb"); + @include admin-scheme(#82b4cb, #d9ab59, #82b4cb); } body.admin-color-coffee { - @include admin-scheme("#c2a68c", "#9fa47b", "#c2a68c"); + @include admin-scheme(#c2a68c, #9fa47b, #c2a68c); } body.admin-color-ectoplasm { - @include admin-scheme("#a7b656", "#c77430", "#a7b656"); + @include admin-scheme(#a7b656, #c77430, #a7b656); } body.admin-color-midnight { - @include admin-scheme("#e14d43", "#77a6b9", "#77a6b9"); + @include admin-scheme(#e14d43, #77a6b9, #77a6b9); } body.admin-color-ocean { - @include admin-scheme("#a3b9a2", "#a89d8a", "#a3b9a2"); + @include admin-scheme(#a3b9a2, #a89d8a, #a3b9a2); } body.admin-color-sunrise { - @include admin-scheme("#d1864a", "#c8b03c", "#c8b03c"); + @include admin-scheme(#d1864a, #c8b03c, #c8b03c); } } // It is important to include these styles in all built stylesheets // This allows to CSS variables post CSS plugin to generate fallbacks. :root { - @include admin-scheme("#007cba", "#11a0d2", "#11a0d2"); + @include admin-scheme(#007cba, #11a0d2, #11a0d2); } From 3e1bad6f06d7cf37097c31f415034ca603e2f7e0 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 16 Jun 2020 10:45:15 +0200 Subject: [PATCH 09/12] Fix checkbox. --- .../src/checkbox-control/style.scss | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss index 64c02a70a80053..530cf29e9b5e43 100644 --- a/packages/components/src/checkbox-control/style.scss +++ b/packages/components/src/checkbox-control/style.scss @@ -1,39 +1,42 @@ $checkbox-input-size: 20px; -$checkbox-input-size-sm: 24px; // width + height for small viewports +$checkbox-input-size-sm: 24px; // Width & height for small viewports. .components-checkbox-control__input[type="checkbox"] { @include checkbox-control; - background: #fff; - color: #555; + background: $white; + color: $dark-gray-primary; clear: none; cursor: pointer; display: inline-block; line-height: 0; - margin: 0 4px 0 0; + margin: 0 $grid-unit-05 0 0; outline: 0; padding: 0 !important; text-align: center; vertical-align: top; width: $checkbox-input-size-sm; height: $checkbox-input-size-sm; + @include break-small() { height: $checkbox-input-size; width: $checkbox-input-size; } - -webkit-appearance: none; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - transition: 0.05s border-color ease-in-out; + + appearance: none; + transition: 0.1s border-color ease-in-out; + @include reduce-motion("transition"); + &:focus { - border-color: #5b9dd9; - box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); + box-shadow: 0 0 0 2px var(--wp-admin-theme-color); + // Only visible in Windows High Contrast mode. outline: 2px solid transparent; } &:checked { - background: #11a0d2; - border-color: #11a0d2; + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); // Hide default checkbox styles in IE. &::-ms-check { @@ -57,6 +60,7 @@ $checkbox-input-size-sm: 24px; // width + height for small viewports vertical-align: middle; width: $checkbox-input-size-sm; height: $checkbox-input-size-sm; + @include break-small() { width: $checkbox-input-size; height: $checkbox-input-size; @@ -64,7 +68,7 @@ $checkbox-input-size-sm: 24px; // width + height for small viewports } svg.components-checkbox-control__checked { - fill: #fff; + fill: $white; cursor: pointer; position: absolute; left: 0; From 197900e2665f19dc111116cf4417b9410a9099db Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 16 Jun 2020 10:50:33 +0200 Subject: [PATCH 10/12] Retire toggle color. --- packages/base-styles/_mixins.scss | 31 +++++++++---------- .../components/src/form-toggle/style.scss | 8 ++--- 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 437ba9c6576e24..3cf8e85b215469 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -300,8 +300,8 @@ } &:checked { - background: var(--wp-admin-theme-color-toggle); - border-color: var(--wp-admin-theme-color-toggle); + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); } &:checked:focus { @@ -320,8 +320,8 @@ } &[aria-checked="mixed"] { - background: var(--wp-admin-theme-color-toggle); - border-color: var(--wp-admin-theme-color-toggle); + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); &::before { // Inherited from `forms.css`. @@ -374,8 +374,8 @@ } &:checked { - background: var(--wp-admin-theme-color-toggle); - border-color: var(--wp-admin-theme-color-toggle); + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); } &:checked:focus { @@ -438,10 +438,9 @@ } } -@mixin admin-scheme($color-primary, $color-secondary, $color-toggle) { +@mixin admin-scheme($color-primary, $color-secondary) { --wp-admin-theme-color: #{$color-primary}; --wp-admin-theme-color-secondary: #{$color-secondary}; - --wp-admin-theme-color-toggle: #{$color-toggle}; // Ideally, we should limit these computed variables, // because we can"t compute colors based on CSS variables. @@ -454,36 +453,36 @@ @mixin wordpress-admin-schemes() { body.admin-color-light { - @include admin-scheme(#0085ba, #c75726, #11a0d2); + @include admin-scheme(#0085ba, #c75726); } body.admin-color-blue { - @include admin-scheme(#82b4cb, #d9ab59, #82b4cb); + @include admin-scheme(#82b4cb, #d9ab59); } body.admin-color-coffee { - @include admin-scheme(#c2a68c, #9fa47b, #c2a68c); + @include admin-scheme(#c2a68c, #9fa47b); } body.admin-color-ectoplasm { - @include admin-scheme(#a7b656, #c77430, #a7b656); + @include admin-scheme(#a7b656, #c77430); } body.admin-color-midnight { - @include admin-scheme(#e14d43, #77a6b9, #77a6b9); + @include admin-scheme(#e14d43, #77a6b9); } body.admin-color-ocean { - @include admin-scheme(#a3b9a2, #a89d8a, #a3b9a2); + @include admin-scheme(#a3b9a2, #a89d8a); } body.admin-color-sunrise { - @include admin-scheme(#d1864a, #c8b03c, #c8b03c); + @include admin-scheme(#d1864a, #c8b03c); } } // It is important to include these styles in all built stylesheets // This allows to CSS variables post CSS plugin to generate fallbacks. :root { - @include admin-scheme(#007cba, #11a0d2, #11a0d2); + @include admin-scheme(#007cba, #11a0d2); } diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index da769c03fcefe0..f47777a83b14f3 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -71,8 +71,8 @@ $toggle-border-width: 2px; // Checked state. &.is-checked .components-form-toggle__track { - background-color: var(--wp-admin-theme-color-toggle); - border: $toggle-border-width solid var(--wp-admin-theme-color-toggle); + background-color: var(--wp-admin-theme-color); + border: $toggle-border-width solid var(--wp-admin-theme-color); border: #{ $toggle-height / 2 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode. } @@ -92,8 +92,8 @@ $toggle-border-width: 2px; } &::before { - background-color: var(--wp-admin-theme-color-toggle); - border: $toggle-border-width solid var(--wp-admin-theme-color-toggle); + background-color: var(--wp-admin-theme-color); + border: $toggle-border-width solid var(--wp-admin-theme-color); } } From 43d41f4dc3b1d6bdc4e10287b3a6579901e0f311 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 16 Jun 2020 11:01:04 +0200 Subject: [PATCH 11/12] Retire the 2nd color variable. --- packages/base-styles/_mixins.scss | 19 +++++++++---------- .../skip-to-selected-block/style.scss | 2 +- .../src/form-token-field/style.scss | 2 +- 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 3cf8e85b215469..47a2b5e61ff786 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -438,9 +438,8 @@ } } -@mixin admin-scheme($color-primary, $color-secondary) { +@mixin admin-scheme($color-primary) { --wp-admin-theme-color: #{$color-primary}; - --wp-admin-theme-color-secondary: #{$color-secondary}; // Ideally, we should limit these computed variables, // because we can"t compute colors based on CSS variables. @@ -453,36 +452,36 @@ @mixin wordpress-admin-schemes() { body.admin-color-light { - @include admin-scheme(#0085ba, #c75726); + @include admin-scheme(#0085ba); } body.admin-color-blue { - @include admin-scheme(#82b4cb, #d9ab59); + @include admin-scheme(#82b4cb); } body.admin-color-coffee { - @include admin-scheme(#c2a68c, #9fa47b); + @include admin-scheme(#c2a68c); } body.admin-color-ectoplasm { - @include admin-scheme(#a7b656, #c77430); + @include admin-scheme(#a7b656); } body.admin-color-midnight { - @include admin-scheme(#e14d43, #77a6b9); + @include admin-scheme(#e14d43); } body.admin-color-ocean { - @include admin-scheme(#a3b9a2, #a89d8a); + @include admin-scheme(#a3b9a2); } body.admin-color-sunrise { - @include admin-scheme(#d1864a, #c8b03c); + @include admin-scheme(#d1864a); } } // It is important to include these styles in all built stylesheets // This allows to CSS variables post CSS plugin to generate fallbacks. :root { - @include admin-scheme(#007cba, #11a0d2); + @include admin-scheme(#007cba); } diff --git a/packages/block-editor/src/components/skip-to-selected-block/style.scss b/packages/block-editor/src/components/skip-to-selected-block/style.scss index 70bcc75ea0d6f4..075e9d3c522653 100644 --- a/packages/block-editor/src/components/skip-to-selected-block/style.scss +++ b/packages/block-editor/src/components/skip-to-selected-block/style.scss @@ -10,7 +10,7 @@ font-weight: 600; padding: 15px 23px 14px; background: #f1f1f1; - color: var(--wp-admin-theme-color-secondary); + color: var(--wp-admin-theme-color); line-height: normal; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); text-decoration: none; diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index ba53ba646c949d..ec50a8265fbda6 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -82,7 +82,7 @@ .components-form-token-field__token-text { background: transparent; - color: var(--wp-admin-theme-color-secondary); + color: var(--wp-admin-theme-color); } .components-form-token-field__remove-token { From 190b04160d2af4d8b16091e8192dfb0baa2245f1 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 16 Jun 2020 11:11:59 +0200 Subject: [PATCH 12/12] Update colors. --- packages/base-styles/_mixins.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 47a2b5e61ff786..0df09ab7f02f09 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -456,15 +456,15 @@ } body.admin-color-blue { - @include admin-scheme(#82b4cb); + @include admin-scheme(#096484); } body.admin-color-coffee { - @include admin-scheme(#c2a68c); + @include admin-scheme(#46403c); } body.admin-color-ectoplasm { - @include admin-scheme(#a7b656); + @include admin-scheme(#523f6d); } body.admin-color-midnight { @@ -472,11 +472,11 @@ } body.admin-color-ocean { - @include admin-scheme(#a3b9a2); + @include admin-scheme(#627c83); } body.admin-color-sunrise { - @include admin-scheme(#d1864a); + @include admin-scheme(#dd823b); } }