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

@@ -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',

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' ),
 ];

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
 

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",

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",

packages/base-styles/.npmrc

@@ -0,0 +1 @@
+package-lock=false

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 )
+```
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

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',
+		},
+	},
+};

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"
+	}
+}

playground/.sassrc

@@ -0,0 +1,5 @@
+{
+	"includePaths": [
+		"node_modules"
+	]
+}

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";