diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
index b206fc3e03130..d09294c10b0df 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 1224a12c0cf1e..32e7e9992c5c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11202,14 +11202,14 @@
"@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"
}
},
"@wordpress/postcss-themes": {
"version": "file:packages/postcss-themes",
"dev": true,
"requires": {
- "postcss": "^7.0.13"
+ "postcss": "^7.0.32"
}
},
"@wordpress/prettier-config": {
@@ -15487,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",
@@ -15511,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",
@@ -16656,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",
@@ -24381,6 +24341,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",
@@ -34768,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",
@@ -34854,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",
@@ -34943,6 +34868,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",
@@ -35156,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",
@@ -35666,6 +35645,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",
@@ -39125,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",
@@ -43232,6 +43225,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 +44029,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/package.json b/package.json
index 27366e0f0dfa7..382bd3756fd8b 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/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
index 7bc8b507e119d..fab0cd143d253 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 20945fd08acf8..b4ad22facfce8 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 )
-```
-
diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index bd738f85d5424..efa46eed43939 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 296262b3a0940..0df09ab7f02f0 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-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: color($theme-color);
- box-shadow: 0 0 0 ($border-width-focus - $border-width) $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: theme(toggle);
- border-color: theme(toggle);
+ background: var(--wp-admin-theme-color);
+ border-color: var(--wp-admin-theme-color);
}
&:checked:focus {
@@ -320,8 +320,8 @@
}
&[aria-checked="mixed"] {
- background: theme(toggle);
- border-color: theme(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: theme(toggle);
- border-color: theme(toggle);
+ background: var(--wp-admin-theme-color);
+ border-color: var(--wp-admin-theme-color);
}
&:checked:focus {
@@ -437,3 +437,51 @@
max-width: 100%;
}
}
+
+@mixin admin-scheme($color-primary) {
+ --wp-admin-theme-color: #{$color-primary};
+
+ // 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);
+ }
+
+ body.admin-color-blue {
+ @include admin-scheme(#096484);
+ }
+
+ body.admin-color-coffee {
+ @include admin-scheme(#46403c);
+ }
+
+ body.admin-color-ectoplasm {
+ @include admin-scheme(#523f6d);
+ }
+
+ body.admin-color-midnight {
+ @include admin-scheme(#e14d43);
+ }
+
+ body.admin-color-ocean {
+ @include admin-scheme(#627c83);
+ }
+
+ body.admin-color-sunrise {
+ @include admin-scheme(#dd823b);
+ }
+}
+
+// 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);
+}
diff --git a/packages/base-styles/index.js b/packages/base-styles/index.js
deleted file mode 100644
index bac5dede479a1..0000000000000
--- a/packages/base-styles/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-exports.adminColorSchemes = {
- defaults: {
- primary: '#0085ba',
- secondary: '#11a0d2',
- toggle: '#11a0d2',
- button: '#007cba',
- outlines: '#007cba',
- },
- themes: {
- 'admin-color-light': {
- primary: '#0085ba',
- secondary: '#c75726',
- toggle: '#11a0d2',
- button: '#0085ba',
- outlines: '#007cba',
- },
- 'admin-color-blue': {
- primary: '#82b4cb',
- secondary: '#d9ab59',
- toggle: '#82b4cb',
- button: '#d9ab59',
- outlines: '#417e9B',
- },
- 'admin-color-coffee': {
- primary: '#c2a68c',
- secondary: '#9fa47b',
- toggle: '#c2a68c',
- button: '#c2a68c',
- outlines: '#59524c',
- },
- 'admin-color-ectoplasm': {
- primary: '#a7b656',
- secondary: '#c77430',
- toggle: '#a7b656',
- button: '#a7b656',
- outlines: '#523f6d',
- },
- 'admin-color-midnight': {
- primary: '#e14d43',
- secondary: '#77a6b9',
- toggle: '#77a6b9',
- button: '#e14d43',
- outlines: '#497b8d',
- },
- 'admin-color-ocean': {
- primary: '#a3b9a2',
- secondary: '#a89d8a',
- toggle: '#a3b9a2',
- button: '#a3b9a2',
- outlines: '#5e7d5e',
- },
- 'admin-color-sunrise': {
- primary: '#d1864a',
- secondary: '#c8b03c',
- toggle: '#c8b03c',
- button: '#d1864a',
- outlines: '#837425',
- },
- },
-};
diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
index 6dc47828019ad..fd0dd70c16aa3 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-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 731df3b69f9de..e382d17507063 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-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 cd6565b905220..0ffd059aacdfb 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-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 $blue-medium-focus;
+ 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 $blue-medium-focus;
+ 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: theme(primary);
+ 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 $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 ab720c9495d99..8ae9248313c87 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-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: $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 68c5607286b27..835f302d1d4f2 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-admin-theme-color);
}
&:focus {
- box-shadow: inset 0 0 0 2px $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 745caa0ed1ff7..4ec155f07cfce 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-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 4a2b50b14d851..66c9b99dcad5b 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-admin-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-admin-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-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 9b8908a8a9aee..8752e583a186f 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-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 da043f1cc88c3..88fa0f90deddc 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-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 48b44bfa09151..903fa7fccc084 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-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 a0c707df2167a..075e9d3c52265 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-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/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index 884ca5dd7c6fe..e645b7b3fac0c 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-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 9c538e8ee0b69..f13ccf0371e95 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-admin-theme-color);
.is-dark-theme & {
- box-shadow: 0 0 0 $border-width $blue-medium-focus;
+ 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 4689d36f0c272..f216d139b7f7b 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-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 a0d038d02f600..cb38701728f1e 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-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 20dc5db90ae6e..bdf0e6fed0080 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-admin-theme-color);
}
}
diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss
index f1dace4f64797..8ac03a2c21e75 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-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 $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 3f259cc9a1b54..f62e8d6cdaee8 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-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 $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: color($theme-color);
+ background: var(--wp-admin-theme-color);
color: $white;
text-decoration: none;
text-shadow: none;
&:hover:not(:disabled) {
- background: color($theme-color shade(10%));
+ background: var(--wp-admin-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-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 $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: color($theme-color tint(40%));
- background: color($theme-color tint(10%));
- border-color: color($theme-color tint(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 color($theme-color);
+ 0 0 0 3px var(--wp-admin-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-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: color($theme-color);
+ border-color: var(--wp-admin-theme-color);
}
}
@@ -109,13 +109,13 @@
&.is-tertiary {
&:active:not(:disabled) {
background: $light-gray-tertiary;
- color: color($theme-color shade(10%));
+ color: var(--wp-admin-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-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 $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: $theme-color;
+ color: var(--wp-admin-theme-color);
background: transparent;
}
@@ -147,7 +147,7 @@
&.is-tertiary {
white-space: nowrap;
- color: $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.
@@ -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 */
}
@@ -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-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/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 64c02a70a8005..530cf29e9b5e4 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;
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index bf8c473a5179d..61f15bfbb1414 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-admin-theme-color);
}
}
}
diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
index 73e7acdf11782..332d5464d24aa 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-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 71f367ba8eeb7..6f4f562b5288d 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-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: theme(primary);
+ background: var(--wp-admin-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-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 f93f2e57ad688..c09cc1cac521b 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-admin-theme-color);
}
}
diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index 8be2aa6655ea9..f47777a83b14f 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-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.
}
&__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-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: theme(toggle);
- border: $toggle-border-width solid theme(toggle);
+ background-color: var(--wp-admin-theme-color);
+ border: $toggle-border-width solid var(--wp-admin-theme-color);
}
}
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index cf4315c58ef16..ec50a8265fbda 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-admin-theme-color);
}
.components-form-token-field__remove-token {
diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index fa53a3ceb130f..ed1d293600f81 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-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 51231b060fc12..ffc11e75f31b5 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-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: theme(primary);
+ 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 184de4aeb5314..609449d1d63c4 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-admin-theme-color);
}
}
diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
index fbc051f407e45..0e7af82ad8a70 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-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 $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 $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 $theme-color, inset 0 0 -$border-width-tab 0 0 $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/create-block/lib/templates/esnext/src/style.scss.mustache b/packages/create-block/lib/templates/esnext/src/style.scss.mustache
index b4c87868e969b..c5f26b84311fd 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 2997e7745387b..6846cac965113 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-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 52df89ab04086..ad48b65d79075 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-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 04684bc06b423..cb23ee73d5f7d 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-admin-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-admin-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-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
}
}
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 92eb32bd0ffca..a671241c6293f 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/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
index e7ce0ff5ad4c7..79b42cad71545 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-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 e2fef51a3a9c5..fe3e8c7a235ae 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-admin-theme-color);
border-radius: 50%;
}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index d4dabbda8d75a..47265124394f0 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/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss
index 22c52fd5204e4..73096951ce0cb 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-admin-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-admin-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-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
}
}
diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss
index 89981d7b8786d..63cfa061dd70c 100644
--- a/packages/edit-widgets/src/style.scss
+++ b/packages/edit-widgets/src/style.scss
@@ -63,3 +63,5 @@ body.gutenberg_page_gutenberg-widgets {
display: none;
}
+
+@include wordpress-admin-schemes();
diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss
index 52e1a9e5b91fb..0654f984cba3f 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-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 d9fd35f16edb5..544183840e91b 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-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 968f69a653764..c15d6c1c68eb8 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-admin-theme-color);
}
.table-of-contents__counts {
diff --git a/packages/list-reusable-blocks/src/style.scss b/packages/list-reusable-blocks/src/style.scss
index a95e831759ae1..ad85c70058609 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 71eb89f520c57..925b3dec46ec5 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( '@wordpress/postcss-themes' )( adminColorSchemes ),
+ require( 'postcss-custom-properties' )(),
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 7a9ffa704ca34..454c2f8797d99 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -32,7 +32,7 @@
"@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": {
"access": "public"
diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
index 538dd8120a60d..b6611c6ca43d0 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"