Base Styles

Base SCSS utilities and variables for WordPress.

Installation

Install the module

npm install @wordpress/base-styles --save-dev

Use

SCSS utilities and variables

In your application's SCSS file, include styles like so:

@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 for your SCSS pipeline, you can use ~ to resolve to node_modules:

@import "~@wordpress/base-styles/colors";

To make that work with sass or node-sass NPM modules without Webpack, you'd have to use includePaths option:

{
	"includePaths": ["node_modules"]
}

PostCSS color schemes

To use color schemes with @wordpress/postcss-themes, import them like so:

const { adminColorSchemes } = require( '@wordpress/base-styles' );
const wpPostcss = require( '@wordpress/postcss-themes' )( adminColorSchemes )