From c91e46624ffc71efe40dba43a222db387db2e1c3 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Wed, 23 Oct 2019 13:11:39 +0300 Subject: [PATCH] Add `@wordpress/base-styles` package (#17883) - Move `assets/stylesheets/*` to the new package - Move admin color schemes to the new package --- bin/packages/build-worker.js | 2 +- bin/packages/post-css-config.js | 63 +------------------ docs/contributors/coding-guidelines.md | 2 +- docs/manifest-devhub.json | 6 ++ package-lock.json | 4 ++ package.json | 1 + packages/base-styles/.npmrc | 1 + packages/base-styles/README.md | 51 +++++++++++++++ .../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/index.js | 60 ++++++++++++++++++ packages/base-styles/package.json | 25 ++++++++ playground/.sassrc | 5 ++ playground/src/style.scss | 12 ++-- 18 files changed, 164 insertions(+), 68 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/index.js create mode 100644 packages/base-styles/package.json create mode 100644 playground/.sassrc 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/bin/packages/post-css-config.js b/bin/packages/post-css-config.js index 3d7861f75044b..842688a8d784b 100644 --- a/bin/packages/post-css-config.js +++ b/bin/packages/post-css-config.js @@ -1,64 +1,7 @@ +const { adminColorSchemes } = require( '@wordpress/base-styles' ); + 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' )( adminColorSchemes ), require( 'autoprefixer' )( { grid: true } ), require( 'postcss-color-function' ), ]; 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/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", diff --git a/package-lock.json b/package-lock.json index c71a6f8db2f42..eb34acc845481 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7207,6 +7207,10 @@ "core-js": "^3.1.4" } }, + "@wordpress/base-styles": { + "version": "file:packages/base-styles", + "dev": true + }, "@wordpress/blob": { "version": "file:packages/blob", "requires": { diff --git a/package.json b/package.json index e1c25716bd94c..fcb77778ca522 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", 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..20945fd08acf8 --- /dev/null +++ b/packages/base-styles/README.md @@ -0,0 +1,51 @@ +# Base Styles + +Base SCSS utilities and variables for WordPress. + +## Installation + +Install the module + +```bash +npm install @wordpress/base-styles --save-dev +``` + +## Use + +### SCSS utilities and variables + +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"; +``` + +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 color schemes with [`@wordpress/postcss-themes`](https://www.npmjs.com/package/@wordpress/postcss-themes), import them like so: + +```js +const { adminColorSchemes } = require( '@wordpress/base-styles' ); +const wpPostcss = require( '@wordpress/postcss-themes' )( adminColorSchemes ) +``` + +

Code is Poetry.

diff --git a/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/index.js b/packages/base-styles/index.js new file mode 100644 index 0000000000000..bac5dede479a1 --- /dev/null +++ b/packages/base-styles/index.js @@ -0,0 +1,60 @@ +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/base-styles/package.json b/packages/base-styles/package.json new file mode 100644 index 0000000000000..9e54a1f0a8686 --- /dev/null +++ b/packages/base-styles/package.json @@ -0,0 +1,25 @@ +{ + "name": "@wordpress/base-styles", + "version": "1.0.0-alpha.1", + "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/.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 43d7a0460ab0e..0fc00355758af 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 "~@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";