diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js index 7e3e636c013a1d..d0f1d1c809984a 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 3d7861f75044bd..842688a8d784b7 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 2e02dfeaa10f7e..8e69e8c8ccddbd 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 10b2c9362e8aef..998097f22d10e9 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 b0800b864bd84a..77bdba240337de 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": { diff --git a/package.json b/package.json index 013c7e69214101..ce15243662295a 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 00000000000000..43c97e719a5a82 --- /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 00000000000000..20945fd08acf8f --- /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 00000000000000..bac5dede479a12 --- /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 00000000000000..9e54a1f0a86864 --- /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 00000000000000..4f704b80b310a5 --- /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 43d7a0460ab0e7..0fc00355758af5 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";