From b2a556da9e4b49844e3464f79114ed7c3ddac53e Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Thu, 10 Oct 2019 15:45:30 +0300 Subject: [PATCH 01/15] Add base-styles package --- bin/packages/build-worker.js | 2 +- docs/contributors/coding-guidelines.md | 2 +- packages/base-styles/.npmrc | 1 + packages/base-styles/README.md | 26 +++++++++++++++++++ .../base-styles}/_animations.scss | 0 .../base-styles}/_breakpoints.scss | 0 .../base-styles}/_colors.scss | 0 .../base-styles}/_mixins.scss | 0 .../base-styles}/_variables.scss | 0 .../base-styles}/_z-index.scss | 0 packages/base-styles/package.json | 25 ++++++++++++++++++ playground/src/style.scss | 12 ++++----- 12 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 packages/base-styles/.npmrc create mode 100644 packages/base-styles/README.md rename {assets/stylesheets => packages/base-styles}/_animations.scss (100%) rename {assets/stylesheets => packages/base-styles}/_breakpoints.scss (100%) rename {assets/stylesheets => packages/base-styles}/_colors.scss (100%) rename {assets/stylesheets => packages/base-styles}/_mixins.scss (100%) rename {assets/stylesheets => packages/base-styles}/_variables.scss (100%) rename {assets/stylesheets => packages/base-styles}/_z-index.scss (100%) create mode 100644 packages/base-styles/package.json diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js index 7e3e636c013a1..d0f1d1c809984 100644 --- a/bin/packages/build-worker.js +++ b/bin/packages/build-worker.js @@ -94,7 +94,7 @@ const BUILD_TASK_BY_EXTENSION = { const builtSass = await renderSass( { file, - includePaths: [ path.resolve( __dirname, '../../assets/stylesheets' ) ], + includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ], data: ( [ 'colors', diff --git a/docs/contributors/coding-guidelines.md b/docs/contributors/coding-guidelines.md index 2e02dfeaa10f7..8e69e8c8ccddb 100644 --- a/docs/contributors/coding-guidelines.md +++ b/docs/contributors/coding-guidelines.md @@ -59,7 +59,7 @@ export default function Notice( { children, onRemove, isDismissible } ) { } ``` -A component's class name should **never** be used outside its own folder (with rare exceptions such as [`_z-index.scss`](https://github.com/WordPress/gutenberg/blob/master/assets/stylesheets/_z-index.scss)). If you need to inherit styles of another component in your own components, you should render an instance of that other component. At worst, you should duplicate the styles within your own component's stylesheet. This is intended to improve maintainability by treating individual components as the isolated abstract interface. +A component's class name should **never** be used outside its own folder (with rare exceptions such as [`_z-index.scss`](https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_z-index.scss)). If you need to inherit styles of another component in your own components, you should render an instance of that other component. At worst, you should duplicate the styles within your own component's stylesheet. This is intended to improve maintainability by treating individual components as the isolated abstract interface. #### SCSS File Naming Conventions for Blocks diff --git a/packages/base-styles/.npmrc b/packages/base-styles/.npmrc new file mode 100644 index 0000000000000..43c97e719a5a8 --- /dev/null +++ b/packages/base-styles/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/packages/base-styles/README.md b/packages/base-styles/README.md new file mode 100644 index 0000000000000..d45d166dd6467 --- /dev/null +++ b/packages/base-styles/README.md @@ -0,0 +1,26 @@ +# Base styles + +Base scss utilities and variables for WordPress. + +## Installation + +Install the module + +```bash +npm install @wordpress/base-styles --save-dev +``` + +## Use + +In your application's scss files, include available styles like so: + +```scss +@import "~@wordpress/base-styles/colors"; +@import "~@wordpress/base-styles/variables"; +@import "~@wordpress/base-styles/mixins"; +@import "~@wordpress/base-styles/breakpoints"; +@import "~@wordpress/base-styles/animations"; +@import "~@wordpress/base-styles/z-index"; +``` + +

Code is Poetry.

diff --git a/assets/stylesheets/_animations.scss b/packages/base-styles/_animations.scss similarity index 100% rename from assets/stylesheets/_animations.scss rename to packages/base-styles/_animations.scss diff --git a/assets/stylesheets/_breakpoints.scss b/packages/base-styles/_breakpoints.scss similarity index 100% rename from assets/stylesheets/_breakpoints.scss rename to packages/base-styles/_breakpoints.scss diff --git a/assets/stylesheets/_colors.scss b/packages/base-styles/_colors.scss similarity index 100% rename from assets/stylesheets/_colors.scss rename to packages/base-styles/_colors.scss diff --git a/assets/stylesheets/_mixins.scss b/packages/base-styles/_mixins.scss similarity index 100% rename from assets/stylesheets/_mixins.scss rename to packages/base-styles/_mixins.scss diff --git a/assets/stylesheets/_variables.scss b/packages/base-styles/_variables.scss similarity index 100% rename from assets/stylesheets/_variables.scss rename to packages/base-styles/_variables.scss diff --git a/assets/stylesheets/_z-index.scss b/packages/base-styles/_z-index.scss similarity index 100% rename from assets/stylesheets/_z-index.scss rename to packages/base-styles/_z-index.scss diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json new file mode 100644 index 0000000000000..064b67675aeb2 --- /dev/null +++ b/packages/base-styles/package.json @@ -0,0 +1,25 @@ +{ + "name": "@wordpress/base-styles", + "version": "1.0.0", + "description": "Base scss utilities and variables for WordPress.", + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "keywords": [ + "wordpress", + "sass", + "scss", + "css" + ], + "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/base-styles/README.md", + "repository": { + "type": "git", + "url": "https://github.com/WordPress/gutenberg.git", + "directory": "packages/base-styles" + }, + "bugs": { + "url": "https://github.com/WordPress/gutenberg/issues" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/playground/src/style.scss b/playground/src/style.scss index 43d7a0460ab0e..d95cdee7d39ff 100644 --- a/playground/src/style.scss +++ b/playground/src/style.scss @@ -1,9 +1,9 @@ -@import "../../assets/stylesheets/colors"; -@import "../../assets/stylesheets/variables"; -@import "../../assets/stylesheets/mixins"; -@import "../../assets/stylesheets/breakpoints"; -@import "../../assets/stylesheets/animations"; -@import "../../assets/stylesheets/z-index"; +@import "../../packages/base-styles/colors"; +@import "../../packages/base-styles/variables"; +@import "../../packages/base-styles/mixins"; +@import "../../packages/base-styles/breakpoints"; +@import "../../packages/base-styles/animations"; +@import "../../packages/base-styles/z-index"; @import "./reset"; @import "./editor-styles"; From 33f2a8b2120cbd38f8998035b27e8875dc2fcf7b Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Thu, 10 Oct 2019 16:30:03 +0300 Subject: [PATCH 02/15] Update manifest-devhub.json --- docs/manifest-devhub.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/manifest-devhub.json b/docs/manifest-devhub.json index 10b2c9362e8ae..998097f22d10e 100644 --- a/docs/manifest-devhub.json +++ b/docs/manifest-devhub.json @@ -1079,6 +1079,12 @@ "markdown_source": "../packages/babel-preset-default/README.md", "parent": "packages" }, + { + "title": "@wordpress/base-styles", + "slug": "packages-base-styles", + "markdown_source": "../packages/base-styles/README.md", + "parent": "packages" + }, { "title": "@wordpress/blob", "slug": "packages-blob", From 1e0d7d94d16526dc9328be15c4f52abddb79ee80 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 11 Oct 2019 15:33:31 +0300 Subject: [PATCH 03/15] Move Post CSS config's themes to the package --- bin/packages/post-css-config.js | 63 ++------------------------------- packages/base-styles/README.md | 13 ++++++- packages/base-styles/themes.js | 60 +++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+), 61 deletions(-) create mode 100644 packages/base-styles/themes.js diff --git a/bin/packages/post-css-config.js b/bin/packages/post-css-config.js index 3d7861f75044b..1263dfcd8c752 100644 --- a/bin/packages/post-css-config.js +++ b/bin/packages/post-css-config.js @@ -1,64 +1,7 @@ +const themes = require( '../../packages/base-styles/themes' ); + module.exports = [ - require( '@wordpress/postcss-themes' )( { - 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', - }, - }, - } ), + require( '@wordpress/postcss-themes' )( themes ), require( 'autoprefixer' )( { grid: true } ), require( 'postcss-color-function' ), ]; diff --git a/packages/base-styles/README.md b/packages/base-styles/README.md index d45d166dd6467..98c6a1e364c82 100644 --- a/packages/base-styles/README.md +++ b/packages/base-styles/README.md @@ -12,7 +12,9 @@ npm install @wordpress/base-styles --save-dev ## Use -In your application's scss files, include available styles like so: +### Scss utilities and variables + +In your application's scss file, include styles like so: ```scss @import "~@wordpress/base-styles/colors"; @@ -23,4 +25,13 @@ In your application's scss files, include available styles like so: @import "~@wordpress/base-styles/z-index"; ``` +### Post-CSS themes + +To use themes with `@wordpress/postcss-themes`, import them like so: + +```js +const themes = require( '@wordpress/base-styles/themes' ); +const wpPostcss = require( '@wordpress/postcss-themes' )( themes ) +``` +

Code is Poetry.

diff --git a/packages/base-styles/themes.js b/packages/base-styles/themes.js new file mode 100644 index 0000000000000..59d7cfda1128a --- /dev/null +++ b/packages/base-styles/themes.js @@ -0,0 +1,60 @@ +module.exports = { + 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', + }, + }, +}; From 9cae68905fe4b422c8a0ed9399cbd1a242657249 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Mon, 14 Oct 2019 12:51:43 +0300 Subject: [PATCH 04/15] Add snapshot tests --- .../test/__snapshots__/index.js.snap | 350 ++++++++++++++++++ packages/base-styles/test/animations.scss | 6 + packages/base-styles/test/breakpoints.scss | 11 + packages/base-styles/test/colors.scss | 5 + packages/base-styles/test/index.js | 50 +++ packages/base-styles/test/mixins.scss | 8 + packages/base-styles/test/variables.scss | 6 + packages/base-styles/test/z-index.scss | 5 + 8 files changed, 441 insertions(+) create mode 100644 packages/base-styles/test/__snapshots__/index.js.snap create mode 100644 packages/base-styles/test/animations.scss create mode 100644 packages/base-styles/test/breakpoints.scss create mode 100644 packages/base-styles/test/colors.scss create mode 100644 packages/base-styles/test/index.js create mode 100644 packages/base-styles/test/mixins.scss create mode 100644 packages/base-styles/test/variables.scss create mode 100644 packages/base-styles/test/z-index.scss diff --git a/packages/base-styles/test/__snapshots__/index.js.snap b/packages/base-styles/test/__snapshots__/index.js.snap new file mode 100644 index 0000000000000..1da03f002af8b --- /dev/null +++ b/packages/base-styles/test/__snapshots__/index.js.snap @@ -0,0 +1,350 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`base-styles can use animations 1`] = ` +"/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Button states and focus styles + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Applies editor right position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.test { + animation: edit-post__fade-in-animation 0.2s ease-out 0s; + animation-fill-mode: forwards; } + @media (prefers-reduced-motion: reduce) { + .test { + animation-duration: 1ms; } } +" +`; + +exports[`base-styles can use breakpoints 1`] = ` +"/** + * Breakpoints & Media Queries + */ +/** + * Colors + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Button states and focus styles + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Applies editor right position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +/** + * Often re-used variables + */ +.test { + max-width: 100px; } + @media (min-width: 1440px) { + .test { + max-width: 200px; } } +" +`; + +exports[`base-styles can use colors 1`] = ` +"/** + * Colors + */ +body { + color: #000; } +" +`; + +exports[`base-styles can use mixins 1`] = ` +"/** + * Breakpoints & Media Queries + */ +/** + * Colors + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Button states and focus styles + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Applies editor right position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +/** + * Often re-used variables + */ +:root { + box-sizing: border-box; } + :root *, + :root *::before, + :root *::after { + box-sizing: inherit; } + :root .input-control, + :root input[type=\\"text\\"], + :root input[type=\\"search\\"], + :root input[type=\\"radio\\"], + :root input[type=\\"tel\\"], + :root input[type=\\"time\\"], + :root input[type=\\"url\\"], + :root input[type=\\"week\\"], + :root input[type=\\"password\\"], + :root input[type=\\"checkbox\\"], + :root input[type=\\"color\\"], + :root input[type=\\"date\\"], + :root input[type=\\"datetime\\"], + :root input[type=\\"datetime-local\\"], + :root input[type=\\"email\\"], + :root input[type=\\"month\\"], + :root input[type=\\"number\\"], + :root select, + :root textarea { + font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \\"Helvetica Neue\\", sans-serif; + padding: 6px 8px; + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.1s linear; + border-radius: 4px; + border: 1px solid #7e8993; + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: 16px; + /* Override core line-height. To be reviewed. */ + line-height: normal; } + @media (prefers-reduced-motion: reduce) { + :root .input-control, + :root input[type=\\"text\\"], + :root input[type=\\"search\\"], + :root input[type=\\"radio\\"], + :root input[type=\\"tel\\"], + :root input[type=\\"time\\"], + :root input[type=\\"url\\"], + :root input[type=\\"week\\"], + :root input[type=\\"password\\"], + :root input[type=\\"checkbox\\"], + :root input[type=\\"color\\"], + :root input[type=\\"date\\"], + :root input[type=\\"datetime\\"], + :root input[type=\\"datetime-local\\"], + :root input[type=\\"email\\"], + :root input[type=\\"month\\"], + :root input[type=\\"number\\"], + :root select, + :root textarea { + transition-duration: 0s; } } + @media (min-width: 600px) { + :root .input-control, + :root input[type=\\"text\\"], + :root input[type=\\"search\\"], + :root input[type=\\"radio\\"], + :root input[type=\\"tel\\"], + :root input[type=\\"time\\"], + :root input[type=\\"url\\"], + :root input[type=\\"week\\"], + :root input[type=\\"password\\"], + :root input[type=\\"checkbox\\"], + :root input[type=\\"color\\"], + :root input[type=\\"date\\"], + :root input[type=\\"datetime\\"], + :root input[type=\\"datetime-local\\"], + :root input[type=\\"email\\"], + :root input[type=\\"month\\"], + :root input[type=\\"number\\"], + :root select, + :root textarea { + font-size: 13px; + /* Override core line-height. To be reviewed. */ + line-height: normal; } } + :root .input-control:focus, + :root input[type=\\"text\\"]:focus, + :root input[type=\\"search\\"]:focus, + :root input[type=\\"radio\\"]:focus, + :root input[type=\\"tel\\"]:focus, + :root input[type=\\"time\\"]:focus, + :root input[type=\\"url\\"]:focus, + :root input[type=\\"week\\"]:focus, + :root input[type=\\"password\\"]:focus, + :root input[type=\\"checkbox\\"]:focus, + :root input[type=\\"color\\"]:focus, + :root input[type=\\"date\\"]:focus, + :root input[type=\\"datetime\\"]:focus, + :root input[type=\\"datetime-local\\"]:focus, + :root input[type=\\"email\\"]:focus, + :root input[type=\\"month\\"]:focus, + :root input[type=\\"number\\"]:focus, + :root select:focus, + :root textarea:focus { + color: #191e23; + border-color: #007cba; + box-shadow: 0 0 0 1px #007cba; + outline: 2px solid transparent; } + :root input[type=\\"number\\"] { + padding-left: 4px; + padding-right: 4px; } + :root select { + padding: 2px; + font-size: 13px; + color: #555d66; } + :root select:focus { + border-color: #008dbe; + outline: 2px solid transparent; + outline-offset: 0; } + :root input[type=\\"checkbox\\"], + :root input[type=\\"radio\\"] { + border: 2px solid #6c7781; + margin-right: 12px; + transition: none; } + :root input[type=\\"checkbox\\"]:focus, + :root input[type=\\"radio\\"]:focus { + border-color: #6c7781; + box-shadow: 0 0 0 1px #6c7781; } + :root input[type=\\"checkbox\\"]:checked, + :root input[type=\\"radio\\"]:checked { + background: theme(toggle); + border-color: theme(toggle); } + :root input[type=\\"checkbox\\"]:checked:focus, + :root input[type=\\"radio\\"]:checked:focus { + box-shadow: 0 0 0 2px #555d66; } + :root input[type=\\"checkbox\\"] { + border-radius: 2px; } + :root input[type=\\"checkbox\\"]:checked::before, :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"]::before { + margin: -3px -5px; + color: #fff; } + @media (min-width: 782px) { + :root input[type=\\"checkbox\\"]:checked::before, :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"]::before { + margin: -4px 0 0 -5px; } } + :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"] { + background: theme(toggle); + border-color: theme(toggle); } + :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"]::before { + content: \\"\\\\f460\\"; + float: left; + display: inline-block; + vertical-align: middle; + width: 16px; + /* stylelint-disable */ + font: normal 30px/1 dashicons; + /* stylelint-enable */ + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + @media (min-width: 782px) { + :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"]::before { + float: none; + font-size: 21px; } } + :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"]:focus { + box-shadow: 0 0 0 2px #555d66; } + :root input[type=\\"radio\\"] { + border-radius: 50%; } + :root input[type=\\"radio\\"]:checked::before { + width: 6px; + height: 6px; + margin: 6px 0 0 6px; + background-color: #fff; } + @media (min-width: 782px) { + :root input[type=\\"radio\\"]:checked::before { + margin: 3px 0 0 3px; } } + :root input::-webkit-input-placeholder, + :root textarea::-webkit-input-placeholder { + color: rgba(14, 28, 46, 0.62); } + :root input::-moz-placeholder, + :root textarea::-moz-placeholder { + opacity: 1; + color: rgba(14, 28, 46, 0.62); } + :root input:-ms-input-placeholder, + :root textarea:-ms-input-placeholder { + color: rgba(14, 28, 46, 0.62); } + .is-dark-theme :root input::-webkit-input-placeholder, .is-dark-theme + :root textarea::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.65); } + .is-dark-theme :root input::-moz-placeholder, .is-dark-theme + :root textarea::-moz-placeholder { + opacity: 1; + color: rgba(255, 255, 255, 0.65); } + .is-dark-theme :root input:-ms-input-placeholder, .is-dark-theme + :root textarea:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.65); } +" +`; + +exports[`base-styles can use variables 1`] = ` +"/** + * Colors + */ +/** + * Often re-used variables + */ +body { + font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \\"Helvetica Neue\\", sans-serif; } +" +`; + +exports[`base-styles can use z-indexes 1`] = ` +".test { + z-index: 30; } +" +`; diff --git a/packages/base-styles/test/animations.scss b/packages/base-styles/test/animations.scss new file mode 100644 index 0000000000000..ac2adfd142ea4 --- /dev/null +++ b/packages/base-styles/test/animations.scss @@ -0,0 +1,6 @@ +@import "../animations"; +@import "../mixins"; + +.test { + @include edit-post__fade-in-animation(); +} diff --git a/packages/base-styles/test/breakpoints.scss b/packages/base-styles/test/breakpoints.scss new file mode 100644 index 0000000000000..62e17cf748e5b --- /dev/null +++ b/packages/base-styles/test/breakpoints.scss @@ -0,0 +1,11 @@ +@import "../breakpoints"; +@import "../colors"; +@import "../mixins"; +@import "../variables"; + +.test { + max-width: 100px; + @include break-huge() { + max-width: 200px; + } +} diff --git a/packages/base-styles/test/colors.scss b/packages/base-styles/test/colors.scss new file mode 100644 index 0000000000000..61069997e5967 --- /dev/null +++ b/packages/base-styles/test/colors.scss @@ -0,0 +1,5 @@ +@import "../colors"; + +body { + color: $black; +} diff --git a/packages/base-styles/test/index.js b/packages/base-styles/test/index.js new file mode 100644 index 0000000000000..4e4a0b024471b --- /dev/null +++ b/packages/base-styles/test/index.js @@ -0,0 +1,50 @@ +/** + * External dependencies + */ +const util = require( 'util' ); +const nodeSass = require( 'node-sass' ); +const path = require( 'path' ); + +const run = ( filename ) => { + return util.promisify( nodeSass.render )( { + file: path.resolve( __dirname, filename ), + } ); +}; + +describe( 'base-styles', () => { + it( 'can use animations', ( ) => { + return run( 'animations.scss' ).then( ( result ) => { + expect( result.css.toString() ).toMatchSnapshot(); + } ); + } ); + + it( 'can use breakpoints', ( ) => { + return run( 'breakpoints.scss' ).then( ( result ) => { + expect( result.css.toString() ).toMatchSnapshot(); + } ); + } ); + + it( 'can use colors', ( ) => { + return run( 'colors.scss' ).then( ( result ) => { + expect( result.css.toString() ).toMatchSnapshot(); + } ); + } ); + + it( 'can use mixins', ( ) => { + return run( 'mixins.scss' ).then( ( result ) => { + expect( result.css.toString() ).toMatchSnapshot(); + } ); + } ); + + it( 'can use variables', ( ) => { + return run( 'variables.scss' ).then( ( result ) => { + expect( result.css.toString() ).toMatchSnapshot(); + } ); + } ); + + it( 'can use z-indexes', ( ) => { + return run( 'z-index.scss' ).then( ( result ) => { + expect( result.css.toString() ).toMatchSnapshot(); + } ); + } ); +} ); diff --git a/packages/base-styles/test/mixins.scss b/packages/base-styles/test/mixins.scss new file mode 100644 index 0000000000000..d27f20fb03cf5 --- /dev/null +++ b/packages/base-styles/test/mixins.scss @@ -0,0 +1,8 @@ +@import "../breakpoints"; +@import "../colors"; +@import "../mixins"; +@import "../variables"; + +:root { + @include reset; +} diff --git a/packages/base-styles/test/variables.scss b/packages/base-styles/test/variables.scss new file mode 100644 index 0000000000000..c80824361ed71 --- /dev/null +++ b/packages/base-styles/test/variables.scss @@ -0,0 +1,6 @@ +@import "../colors"; +@import "../variables"; + +body { + font-family: $default-font; +} diff --git a/packages/base-styles/test/z-index.scss b/packages/base-styles/test/z-index.scss new file mode 100644 index 0000000000000..83e2509fb3e95 --- /dev/null +++ b/packages/base-styles/test/z-index.scss @@ -0,0 +1,5 @@ +@import "../z-index"; + +.test { + z-index: z-index(".edit-post-header"); +} From 82eb4af0ff5961770604260a577f62616721390b Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Mon, 14 Oct 2019 12:52:12 +0300 Subject: [PATCH 05/15] Add @wordpress/base-styles as devDependency --- package-lock.json | 8 ++++++-- package.json | 1 + 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index b0800b864bd84..c59e9bc864c7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7219,6 +7219,10 @@ "core-js": "^3.1.4" } }, + "@wordpress/base-styles": { + "version": "file:packages/base-styles", + "dev": true + }, "@wordpress/blob": { "version": "file:packages/blob", "requires": { @@ -11670,7 +11674,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": false, + "resolved": "", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -17209,7 +17213,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": false, + "resolved": "", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true diff --git a/package.json b/package.json index 013c7e6921410..ce15243662295 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma", "@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot", "@wordpress/babel-preset-default": "file:packages/babel-preset-default", + "@wordpress/base-styles": "file:packages/base-styles", "@wordpress/browserslist-config": "file:packages/browserslist-config", "@wordpress/custom-templated-path-webpack-plugin": "file:packages/custom-templated-path-webpack-plugin", "@wordpress/dependency-extraction-webpack-plugin": "file:packages/dependency-extraction-webpack-plugin", From b489eda54e226a01476767cf10b95d17bb0ec0d1 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Mon, 14 Oct 2019 12:59:44 +0300 Subject: [PATCH 06/15] Use admin color schemes from package --- bin/packages/post-css-config.js | 4 ++-- packages/base-styles/README.md | 4 ++-- packages/base-styles/{themes.js => index.js} | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) rename packages/base-styles/{themes.js => index.js} (97%) diff --git a/bin/packages/post-css-config.js b/bin/packages/post-css-config.js index 1263dfcd8c752..842688a8d784b 100644 --- a/bin/packages/post-css-config.js +++ b/bin/packages/post-css-config.js @@ -1,7 +1,7 @@ -const themes = require( '../../packages/base-styles/themes' ); +const { adminColorSchemes } = require( '@wordpress/base-styles' ); module.exports = [ - require( '@wordpress/postcss-themes' )( themes ), + require( '@wordpress/postcss-themes' )( adminColorSchemes ), require( 'autoprefixer' )( { grid: true } ), require( 'postcss-color-function' ), ]; diff --git a/packages/base-styles/README.md b/packages/base-styles/README.md index 98c6a1e364c82..d031a2b8f17d5 100644 --- a/packages/base-styles/README.md +++ b/packages/base-styles/README.md @@ -30,8 +30,8 @@ In your application's scss file, include styles like so: To use themes with `@wordpress/postcss-themes`, import them like so: ```js -const themes = require( '@wordpress/base-styles/themes' ); -const wpPostcss = require( '@wordpress/postcss-themes' )( themes ) +const { adminColorSchemes } = require( '@wordpress/base-styles' ); +const wpPostcss = require( '@wordpress/postcss-themes' )( adminColorSchemes ) ```

Code is Poetry.

diff --git a/packages/base-styles/themes.js b/packages/base-styles/index.js similarity index 97% rename from packages/base-styles/themes.js rename to packages/base-styles/index.js index 59d7cfda1128a..bac5dede479a1 100644 --- a/packages/base-styles/themes.js +++ b/packages/base-styles/index.js @@ -1,4 +1,4 @@ -module.exports = { +exports.adminColorSchemes = { defaults: { primary: '#0085ba', secondary: '#11a0d2', From cb10861d3fcb2a211cb6b4ecb9756130b437a17c Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Mon, 14 Oct 2019 13:05:24 +0300 Subject: [PATCH 07/15] Lint in test file --- packages/base-styles/test/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/base-styles/test/index.js b/packages/base-styles/test/index.js index 4e4a0b024471b..503ec426052f4 100644 --- a/packages/base-styles/test/index.js +++ b/packages/base-styles/test/index.js @@ -12,37 +12,37 @@ const run = ( filename ) => { }; describe( 'base-styles', () => { - it( 'can use animations', ( ) => { + it( 'can use animations', () => { return run( 'animations.scss' ).then( ( result ) => { expect( result.css.toString() ).toMatchSnapshot(); } ); } ); - it( 'can use breakpoints', ( ) => { + it( 'can use breakpoints', () => { return run( 'breakpoints.scss' ).then( ( result ) => { expect( result.css.toString() ).toMatchSnapshot(); } ); } ); - it( 'can use colors', ( ) => { + it( 'can use colors', () => { return run( 'colors.scss' ).then( ( result ) => { expect( result.css.toString() ).toMatchSnapshot(); } ); } ); - it( 'can use mixins', ( ) => { + it( 'can use mixins', () => { return run( 'mixins.scss' ).then( ( result ) => { expect( result.css.toString() ).toMatchSnapshot(); } ); } ); - it( 'can use variables', ( ) => { + it( 'can use variables', () => { return run( 'variables.scss' ).then( ( result ) => { expect( result.css.toString() ).toMatchSnapshot(); } ); } ); - it( 'can use z-indexes', ( ) => { + it( 'can use z-indexes', () => { return run( 'z-index.scss' ).then( ( result ) => { expect( result.css.toString() ).toMatchSnapshot(); } ); From c2988f3ec8788c91300369cb687231f5f91bad21 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 15 Oct 2019 15:06:55 +0300 Subject: [PATCH 08/15] Resolve styles from package in the playground --- playground/.sassrc | 5 +++++ playground/src/style.scss | 12 ++++++------ 2 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 playground/.sassrc diff --git a/playground/.sassrc b/playground/.sassrc new file mode 100644 index 0000000000000..4f704b80b310a --- /dev/null +++ b/playground/.sassrc @@ -0,0 +1,5 @@ +{ + "includePaths": [ + "node_modules" + ] +} diff --git a/playground/src/style.scss b/playground/src/style.scss index d95cdee7d39ff..0fc00355758af 100644 --- a/playground/src/style.scss +++ b/playground/src/style.scss @@ -1,9 +1,9 @@ -@import "../../packages/base-styles/colors"; -@import "../../packages/base-styles/variables"; -@import "../../packages/base-styles/mixins"; -@import "../../packages/base-styles/breakpoints"; -@import "../../packages/base-styles/animations"; -@import "../../packages/base-styles/z-index"; +@import "~@wordpress/base-styles/colors"; +@import "~@wordpress/base-styles/variables"; +@import "~@wordpress/base-styles/mixins"; +@import "~@wordpress/base-styles/breakpoints"; +@import "~@wordpress/base-styles/animations"; +@import "~@wordpress/base-styles/z-index"; @import "./reset"; @import "./editor-styles"; From d27eece94d34f21f0d8f4e548c23ce1ddc65fc5f Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Wed, 16 Oct 2019 12:13:53 +0300 Subject: [PATCH 09/15] Revert minor package-lock changes to test if those are due differences between Macos dev machine and Linux based CI --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index c59e9bc864c7a..77bdba240337d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11674,7 +11674,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "", + "resolved": false, "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -17213,7 +17213,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "", + "resolved": false, "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true From b38746db13aa076b1c4b51f4ab824a7f034e3d40 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Wed, 16 Oct 2019 12:19:16 +0300 Subject: [PATCH 10/15] Update title in readme Co-Authored-By: Pascal Birchler --- packages/base-styles/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/base-styles/README.md b/packages/base-styles/README.md index d031a2b8f17d5..4ab76bf899786 100644 --- a/packages/base-styles/README.md +++ b/packages/base-styles/README.md @@ -25,7 +25,7 @@ In your application's scss file, include styles like so: @import "~@wordpress/base-styles/z-index"; ``` -### Post-CSS themes +### PostCSS themes To use themes with `@wordpress/postcss-themes`, import them like so: From 24d004794f5a6c47c295bf18d0d1649ece3163a1 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 18 Oct 2019 09:50:59 +0300 Subject: [PATCH 11/15] Add `alpha` to version MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Grzegorz (Greg) Ziółkowski --- packages/base-styles/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json index 064b67675aeb2..0bff29f24cb83 100644 --- a/packages/base-styles/package.json +++ b/packages/base-styles/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/base-styles", - "version": "1.0.0", + "version": "1.0.0-alpha.1", "description": "Base scss utilities and variables for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From 60b0c1b1a916b26f00bebeb6425e7f1f99426caf Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 18 Oct 2019 09:51:15 +0300 Subject: [PATCH 12/15] Title case package name in docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Grzegorz (Greg) Ziółkowski --- packages/base-styles/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/base-styles/README.md b/packages/base-styles/README.md index 4ab76bf899786..a53c455286e06 100644 --- a/packages/base-styles/README.md +++ b/packages/base-styles/README.md @@ -1,4 +1,4 @@ -# Base styles +# Base Styles Base scss utilities and variables for WordPress. From 071883cc5f98117dba99f0a29adeb782d22b162b Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 18 Oct 2019 10:46:33 +0300 Subject: [PATCH 13/15] =?UTF-8?q?scss=20=E2=86=92=20SCSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/base-styles/README.md | 6 +++--- packages/base-styles/package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/base-styles/README.md b/packages/base-styles/README.md index a53c455286e06..ba0de66df6993 100644 --- a/packages/base-styles/README.md +++ b/packages/base-styles/README.md @@ -1,6 +1,6 @@ # Base Styles -Base scss utilities and variables for WordPress. +Base SCSS utilities and variables for WordPress. ## Installation @@ -12,9 +12,9 @@ npm install @wordpress/base-styles --save-dev ## Use -### Scss utilities and variables +### SCSS utilities and variables -In your application's scss file, include styles like so: +In your application's SCSS file, include styles like so: ```scss @import "~@wordpress/base-styles/colors"; diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json index 0bff29f24cb83..9e54a1f0a8686 100644 --- a/packages/base-styles/package.json +++ b/packages/base-styles/package.json @@ -1,7 +1,7 @@ { "name": "@wordpress/base-styles", "version": "1.0.0-alpha.1", - "description": "Base scss utilities and variables for WordPress.", + "description": "Base SCSS utilities and variables for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", "keywords": [ From 910c3b18af179b61f94b54c1173a7f0a26094fd9 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 18 Oct 2019 11:04:47 +0300 Subject: [PATCH 14/15] Update README.md --- packages/base-styles/README.md | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/base-styles/README.md b/packages/base-styles/README.md index ba0de66df6993..20945fd08acf8 100644 --- a/packages/base-styles/README.md +++ b/packages/base-styles/README.md @@ -16,18 +16,32 @@ npm install @wordpress/base-styles --save-dev In your application's SCSS file, include styles like so: +```scss +@import "node_modules/@wordpress/base-styles/colors"; +@import "node_modules/@wordpress/base-styles/variables"; +@import "node_modules/@wordpress/base-styles/mixins"; +@import "node_modules/@wordpress/base-styles/breakpoints"; +@import "node_modules/@wordpress/base-styles/animations"; +@import "node_modules/@wordpress/base-styles/z-index"; +``` + +If you use [Webpack](https://webpack.js.org/) for your SCSS pipeline, you can use `~` to resolve to `node_modules`: + ```scss @import "~@wordpress/base-styles/colors"; -@import "~@wordpress/base-styles/variables"; -@import "~@wordpress/base-styles/mixins"; -@import "~@wordpress/base-styles/breakpoints"; -@import "~@wordpress/base-styles/animations"; -@import "~@wordpress/base-styles/z-index"; ``` -### PostCSS themes +To make that work with [`sass`](https://www.npmjs.com/package/sass) or [`node-sass`](https://www.npmjs.com/package/node-sass) NPM modules without Webpack, you'd have to use [includePaths option](https://sass-lang.com/documentation/js-api#includepaths): + +```json +{ + "includePaths": ["node_modules"] +} +``` + +### PostCSS color schemes -To use themes with `@wordpress/postcss-themes`, import them like so: +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' ); From 68dd6067722a8fc999eb452507a93127dd11b02d Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 22 Oct 2019 15:45:27 +0300 Subject: [PATCH 15/15] Remove tests --- .../test/__snapshots__/index.js.snap | 350 ------------------ packages/base-styles/test/animations.scss | 6 - packages/base-styles/test/breakpoints.scss | 11 - packages/base-styles/test/colors.scss | 5 - packages/base-styles/test/index.js | 50 --- packages/base-styles/test/mixins.scss | 8 - packages/base-styles/test/variables.scss | 6 - packages/base-styles/test/z-index.scss | 5 - 8 files changed, 441 deletions(-) delete mode 100644 packages/base-styles/test/__snapshots__/index.js.snap delete mode 100644 packages/base-styles/test/animations.scss delete mode 100644 packages/base-styles/test/breakpoints.scss delete mode 100644 packages/base-styles/test/colors.scss delete mode 100644 packages/base-styles/test/index.js delete mode 100644 packages/base-styles/test/mixins.scss delete mode 100644 packages/base-styles/test/variables.scss delete mode 100644 packages/base-styles/test/z-index.scss diff --git a/packages/base-styles/test/__snapshots__/index.js.snap b/packages/base-styles/test/__snapshots__/index.js.snap deleted file mode 100644 index 1da03f002af8b..0000000000000 --- a/packages/base-styles/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,350 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`base-styles can use animations 1`] = ` -"/** - * Breakpoint mixins - */ -/** - * Long content fade mixin - * - * Creates a fading overlay to signify that the content is longer - * than the space allows. - */ -/** - * Button states and focus styles - */ -/** - * Applies editor left position to the selector passed as argument - */ -/** - * Applies editor right position to the selector passed as argument - */ -/** - * Styles that are reused verbatim in a few places - */ -/** - * Allows users to opt-out of animations via OS-level preferences. - */ -/** - * Reset default styles for JavaScript UI based pages. - * This is a WP-admin agnostic reset - */ -/** - * Reset the WP Admin page styles for Gutenberg-like pages. - */ -.test { - animation: edit-post__fade-in-animation 0.2s ease-out 0s; - animation-fill-mode: forwards; } - @media (prefers-reduced-motion: reduce) { - .test { - animation-duration: 1ms; } } -" -`; - -exports[`base-styles can use breakpoints 1`] = ` -"/** - * Breakpoints & Media Queries - */ -/** - * Colors - */ -/** - * Breakpoint mixins - */ -/** - * Long content fade mixin - * - * Creates a fading overlay to signify that the content is longer - * than the space allows. - */ -/** - * Button states and focus styles - */ -/** - * Applies editor left position to the selector passed as argument - */ -/** - * Applies editor right position to the selector passed as argument - */ -/** - * Styles that are reused verbatim in a few places - */ -/** - * Allows users to opt-out of animations via OS-level preferences. - */ -/** - * Reset default styles for JavaScript UI based pages. - * This is a WP-admin agnostic reset - */ -/** - * Reset the WP Admin page styles for Gutenberg-like pages. - */ -/** - * Often re-used variables - */ -.test { - max-width: 100px; } - @media (min-width: 1440px) { - .test { - max-width: 200px; } } -" -`; - -exports[`base-styles can use colors 1`] = ` -"/** - * Colors - */ -body { - color: #000; } -" -`; - -exports[`base-styles can use mixins 1`] = ` -"/** - * Breakpoints & Media Queries - */ -/** - * Colors - */ -/** - * Breakpoint mixins - */ -/** - * Long content fade mixin - * - * Creates a fading overlay to signify that the content is longer - * than the space allows. - */ -/** - * Button states and focus styles - */ -/** - * Applies editor left position to the selector passed as argument - */ -/** - * Applies editor right position to the selector passed as argument - */ -/** - * Styles that are reused verbatim in a few places - */ -/** - * Allows users to opt-out of animations via OS-level preferences. - */ -/** - * Reset default styles for JavaScript UI based pages. - * This is a WP-admin agnostic reset - */ -/** - * Reset the WP Admin page styles for Gutenberg-like pages. - */ -/** - * Often re-used variables - */ -:root { - box-sizing: border-box; } - :root *, - :root *::before, - :root *::after { - box-sizing: inherit; } - :root .input-control, - :root input[type=\\"text\\"], - :root input[type=\\"search\\"], - :root input[type=\\"radio\\"], - :root input[type=\\"tel\\"], - :root input[type=\\"time\\"], - :root input[type=\\"url\\"], - :root input[type=\\"week\\"], - :root input[type=\\"password\\"], - :root input[type=\\"checkbox\\"], - :root input[type=\\"color\\"], - :root input[type=\\"date\\"], - :root input[type=\\"datetime\\"], - :root input[type=\\"datetime-local\\"], - :root input[type=\\"email\\"], - :root input[type=\\"month\\"], - :root input[type=\\"number\\"], - :root select, - :root textarea { - font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \\"Helvetica Neue\\", sans-serif; - padding: 6px 8px; - box-shadow: 0 0 0 transparent; - transition: box-shadow 0.1s linear; - border-radius: 4px; - border: 1px solid #7e8993; - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: 16px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } - @media (prefers-reduced-motion: reduce) { - :root .input-control, - :root input[type=\\"text\\"], - :root input[type=\\"search\\"], - :root input[type=\\"radio\\"], - :root input[type=\\"tel\\"], - :root input[type=\\"time\\"], - :root input[type=\\"url\\"], - :root input[type=\\"week\\"], - :root input[type=\\"password\\"], - :root input[type=\\"checkbox\\"], - :root input[type=\\"color\\"], - :root input[type=\\"date\\"], - :root input[type=\\"datetime\\"], - :root input[type=\\"datetime-local\\"], - :root input[type=\\"email\\"], - :root input[type=\\"month\\"], - :root input[type=\\"number\\"], - :root select, - :root textarea { - transition-duration: 0s; } } - @media (min-width: 600px) { - :root .input-control, - :root input[type=\\"text\\"], - :root input[type=\\"search\\"], - :root input[type=\\"radio\\"], - :root input[type=\\"tel\\"], - :root input[type=\\"time\\"], - :root input[type=\\"url\\"], - :root input[type=\\"week\\"], - :root input[type=\\"password\\"], - :root input[type=\\"checkbox\\"], - :root input[type=\\"color\\"], - :root input[type=\\"date\\"], - :root input[type=\\"datetime\\"], - :root input[type=\\"datetime-local\\"], - :root input[type=\\"email\\"], - :root input[type=\\"month\\"], - :root input[type=\\"number\\"], - :root select, - :root textarea { - font-size: 13px; - /* Override core line-height. To be reviewed. */ - line-height: normal; } } - :root .input-control:focus, - :root input[type=\\"text\\"]:focus, - :root input[type=\\"search\\"]:focus, - :root input[type=\\"radio\\"]:focus, - :root input[type=\\"tel\\"]:focus, - :root input[type=\\"time\\"]:focus, - :root input[type=\\"url\\"]:focus, - :root input[type=\\"week\\"]:focus, - :root input[type=\\"password\\"]:focus, - :root input[type=\\"checkbox\\"]:focus, - :root input[type=\\"color\\"]:focus, - :root input[type=\\"date\\"]:focus, - :root input[type=\\"datetime\\"]:focus, - :root input[type=\\"datetime-local\\"]:focus, - :root input[type=\\"email\\"]:focus, - :root input[type=\\"month\\"]:focus, - :root input[type=\\"number\\"]:focus, - :root select:focus, - :root textarea:focus { - color: #191e23; - border-color: #007cba; - box-shadow: 0 0 0 1px #007cba; - outline: 2px solid transparent; } - :root input[type=\\"number\\"] { - padding-left: 4px; - padding-right: 4px; } - :root select { - padding: 2px; - font-size: 13px; - color: #555d66; } - :root select:focus { - border-color: #008dbe; - outline: 2px solid transparent; - outline-offset: 0; } - :root input[type=\\"checkbox\\"], - :root input[type=\\"radio\\"] { - border: 2px solid #6c7781; - margin-right: 12px; - transition: none; } - :root input[type=\\"checkbox\\"]:focus, - :root input[type=\\"radio\\"]:focus { - border-color: #6c7781; - box-shadow: 0 0 0 1px #6c7781; } - :root input[type=\\"checkbox\\"]:checked, - :root input[type=\\"radio\\"]:checked { - background: theme(toggle); - border-color: theme(toggle); } - :root input[type=\\"checkbox\\"]:checked:focus, - :root input[type=\\"radio\\"]:checked:focus { - box-shadow: 0 0 0 2px #555d66; } - :root input[type=\\"checkbox\\"] { - border-radius: 2px; } - :root input[type=\\"checkbox\\"]:checked::before, :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"]::before { - margin: -3px -5px; - color: #fff; } - @media (min-width: 782px) { - :root input[type=\\"checkbox\\"]:checked::before, :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"]::before { - margin: -4px 0 0 -5px; } } - :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"] { - background: theme(toggle); - border-color: theme(toggle); } - :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"]::before { - content: \\"\\\\f460\\"; - float: left; - display: inline-block; - vertical-align: middle; - width: 16px; - /* stylelint-disable */ - font: normal 30px/1 dashicons; - /* stylelint-enable */ - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } - @media (min-width: 782px) { - :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"]::before { - float: none; - font-size: 21px; } } - :root input[type=\\"checkbox\\"][aria-checked=\\"mixed\\"]:focus { - box-shadow: 0 0 0 2px #555d66; } - :root input[type=\\"radio\\"] { - border-radius: 50%; } - :root input[type=\\"radio\\"]:checked::before { - width: 6px; - height: 6px; - margin: 6px 0 0 6px; - background-color: #fff; } - @media (min-width: 782px) { - :root input[type=\\"radio\\"]:checked::before { - margin: 3px 0 0 3px; } } - :root input::-webkit-input-placeholder, - :root textarea::-webkit-input-placeholder { - color: rgba(14, 28, 46, 0.62); } - :root input::-moz-placeholder, - :root textarea::-moz-placeholder { - opacity: 1; - color: rgba(14, 28, 46, 0.62); } - :root input:-ms-input-placeholder, - :root textarea:-ms-input-placeholder { - color: rgba(14, 28, 46, 0.62); } - .is-dark-theme :root input::-webkit-input-placeholder, .is-dark-theme - :root textarea::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme :root input::-moz-placeholder, .is-dark-theme - :root textarea::-moz-placeholder { - opacity: 1; - color: rgba(255, 255, 255, 0.65); } - .is-dark-theme :root input:-ms-input-placeholder, .is-dark-theme - :root textarea:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.65); } -" -`; - -exports[`base-styles can use variables 1`] = ` -"/** - * Colors - */ -/** - * Often re-used variables - */ -body { - font-family: -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \\"Helvetica Neue\\", sans-serif; } -" -`; - -exports[`base-styles can use z-indexes 1`] = ` -".test { - z-index: 30; } -" -`; diff --git a/packages/base-styles/test/animations.scss b/packages/base-styles/test/animations.scss deleted file mode 100644 index ac2adfd142ea4..0000000000000 --- a/packages/base-styles/test/animations.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../animations"; -@import "../mixins"; - -.test { - @include edit-post__fade-in-animation(); -} diff --git a/packages/base-styles/test/breakpoints.scss b/packages/base-styles/test/breakpoints.scss deleted file mode 100644 index 62e17cf748e5b..0000000000000 --- a/packages/base-styles/test/breakpoints.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import "../breakpoints"; -@import "../colors"; -@import "../mixins"; -@import "../variables"; - -.test { - max-width: 100px; - @include break-huge() { - max-width: 200px; - } -} diff --git a/packages/base-styles/test/colors.scss b/packages/base-styles/test/colors.scss deleted file mode 100644 index 61069997e5967..0000000000000 --- a/packages/base-styles/test/colors.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "../colors"; - -body { - color: $black; -} diff --git a/packages/base-styles/test/index.js b/packages/base-styles/test/index.js deleted file mode 100644 index 503ec426052f4..0000000000000 --- a/packages/base-styles/test/index.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * External dependencies - */ -const util = require( 'util' ); -const nodeSass = require( 'node-sass' ); -const path = require( 'path' ); - -const run = ( filename ) => { - return util.promisify( nodeSass.render )( { - file: path.resolve( __dirname, filename ), - } ); -}; - -describe( 'base-styles', () => { - it( 'can use animations', () => { - return run( 'animations.scss' ).then( ( result ) => { - expect( result.css.toString() ).toMatchSnapshot(); - } ); - } ); - - it( 'can use breakpoints', () => { - return run( 'breakpoints.scss' ).then( ( result ) => { - expect( result.css.toString() ).toMatchSnapshot(); - } ); - } ); - - it( 'can use colors', () => { - return run( 'colors.scss' ).then( ( result ) => { - expect( result.css.toString() ).toMatchSnapshot(); - } ); - } ); - - it( 'can use mixins', () => { - return run( 'mixins.scss' ).then( ( result ) => { - expect( result.css.toString() ).toMatchSnapshot(); - } ); - } ); - - it( 'can use variables', () => { - return run( 'variables.scss' ).then( ( result ) => { - expect( result.css.toString() ).toMatchSnapshot(); - } ); - } ); - - it( 'can use z-indexes', () => { - return run( 'z-index.scss' ).then( ( result ) => { - expect( result.css.toString() ).toMatchSnapshot(); - } ); - } ); -} ); diff --git a/packages/base-styles/test/mixins.scss b/packages/base-styles/test/mixins.scss deleted file mode 100644 index d27f20fb03cf5..0000000000000 --- a/packages/base-styles/test/mixins.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import "../breakpoints"; -@import "../colors"; -@import "../mixins"; -@import "../variables"; - -:root { - @include reset; -} diff --git a/packages/base-styles/test/variables.scss b/packages/base-styles/test/variables.scss deleted file mode 100644 index c80824361ed71..0000000000000 --- a/packages/base-styles/test/variables.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../colors"; -@import "../variables"; - -body { - font-family: $default-font; -} diff --git a/packages/base-styles/test/z-index.scss b/packages/base-styles/test/z-index.scss deleted file mode 100644 index 83e2509fb3e95..0000000000000 --- a/packages/base-styles/test/z-index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "../z-index"; - -.test { - z-index: z-index(".edit-post-header"); -}