Components: Add styles package for new style system

packages/components/src/ui/create-styles/create-compiler/README.md

@@ -14,6 +14,8 @@ css({
 
 This will dynamically respond to breakpoints and render the appropriate width for each `min-width`. The breakpoints are documented in the code in [`utils.js`](./utils.js).
 
+
+
 ## Plugins
 
 `createCompiler` supports passing certain parameters to plugins. Plugin initialization should be contained to [`plugins/index.js`](./plugins/index.js).

packages/components/src/ui/create-styles/create-compiler/create-compiler.js

@@ -7,15 +7,13 @@ import mitt from 'mitt';
 /**
  * Internal dependencies
  */
-import { RootStore } from '../css-custom-properties';
 import { createCSS } from './create-css';
 import { createPlugins } from './plugins';
 import { breakpoints, generateInterpolationName } from './utils';
 
 const defaultOptions = {
 	key: 'css',
 	specificityLevel: 1,
-	rootStore: new RootStore(),
 };
 
 /* eslint-disable jsdoc/valid-types */
@@ -32,26 +30,24 @@ const defaultOptions = {
  * @typedef {import('create-emotion').Options & {
  *	key?: string,
  *	specificityLevel?: number,
- *	rootStore: import('../css-custom-properties').RootStore
  * }} CreateCompilerOptions
  */
 
 /**
  * @param {CreateCompilerOptions} options
  * @return {Compiler} The compiler.
  */
-export function createCompiler( options ) {
+export function createCompiler( options = {} ) {
 	const mergedOptions = {
 		...defaultOptions,
 		...options,
 	};
 
-	const { key, rootStore, specificityLevel } = mergedOptions;
+	const { key, specificityLevel } = mergedOptions;
 
 	const defaultPlugins = createPlugins( {
 		key,
 		specificityLevel,
-		rootStore,
 	} );
 
 	if ( options.stylisPlugins ) {

packages/components/src/ui/create-styles/create-compiler/plugins/index.js

@@ -6,30 +6,19 @@ import cssGridPlugin from 'styled-griddie';
 /**
  * Internal dependencies
  */
-import cssVariablesPlugin from './css-variables';
 import specificityPlugin from './extra-specificity';
 
-const isProd = process.env.NODE_ENV === 'production';
-
 /**
  * A collection of custom Stylis plugins to enhance the way the compiler (Emotion)
  * generates selectors and CSS rules.
  *
  * @param {Object} options
  * @param {number} [options.specificityLevel=7]
  * @param {string} [options.key='css']
- * @param {boolean} [options.skipSupportedBrowsers]
- * @param {import('../../css-custom-properties').RootStore} [options.rootStore]
  * @return {import('@emotion/stylis').Plugin[]} The list of stylis plugins.
  */
-export function createPlugins( {
-	specificityLevel = 1,
-	key = 'css',
-	rootStore,
-	skipSupportedBrowsers = isProd,
-} ) {
+export function createPlugins( { specificityLevel = 1, key = 'css' } ) {
 	return [
-		cssVariablesPlugin( { skipSupportedBrowsers, rootStore } ),
 		specificityPlugin( { level: specificityLevel, key } ),
 		// @ts-ignore styled-griddie imports StylisPlugin from `styled-components` which has different types from the actual one we're using here
 		cssGridPlugin,

packages/components/src/ui/create-styles/create-style-system/constants.js

@@ -1,21 +1,7 @@
 /**
  * Uses the the prefix for the CSS variables compiled by the system.
  */
-export const NAMESPACE = '--wp-experimental';
-
-export const DARK_MODE_ATTR_PROP = 'data-system-ui-mode';
-export const HIGH_CONTRAST_MODE_ATTR_PROP = 'data-system-ui-contrast-mode';
-export const COLOR_BLIND_MODE_ATTR_PROP = 'data-system-ui-color-blind-mode';
-export const REDUCED_MOTION_MODE_ATTR_PROP =
-	'data-system-ui-reduced-motion-mode';
-
-export const DARK_MODE_ATTR = `[${ DARK_MODE_ATTR_PROP }="dark"]`;
-export const HIGH_CONTRAST_MODE_MODE_ATTR = `[${ HIGH_CONTRAST_MODE_ATTR_PROP }="high"]`;
-
-export const COLOR_BLIND_MODE_ATTR = `[${ COLOR_BLIND_MODE_ATTR_PROP }="true"]`;
-export const REDUCED_MOTION_MODE_ATTR = `[${ REDUCED_MOTION_MODE_ATTR_PROP }="true"]`;
-
-export const DARK_HIGH_CONTRAST_MODE_MODE_ATTR = `${ DARK_MODE_ATTR }${ HIGH_CONTRAST_MODE_MODE_ATTR }`;
+export const NAMESPACE = '--wp-unstable';
 
 export const MODE_SPECIFICITY_COMPOUND_LEVEL = 3;
 

packages/components/src/ui/create-styles/create-style-system/create-core-element.js

@@ -8,10 +8,7 @@ import { forwardRef, createElement } from '@wordpress/element';
  * Internal dependencies
  */
 import { useHydrateGlobalStyles } from '../hooks';
-import {
-	INTERPOLATION_CLASS_NAME,
-	REDUCED_MOTION_MODE_ATTR,
-} from './constants';
+import { INTERPOLATION_CLASS_NAME } from './constants';
 import {
 	DEFAULT_STYLE_SYSTEM_OPTIONS,
 	getInterpolatedClassName,
@@ -23,7 +20,7 @@ const defaultOptions = DEFAULT_STYLE_SYSTEM_OPTIONS;
  * @typedef CreateCoreElementOptions
  * @property {import('create-emotion').ObjectInterpolation<any>} baseStyles The baseStyles from the Style system.
  * @property {import('../create-compiler').Compiler} compiler The injectGlobal from the Style system's compiler.
- * @property {import('./generate-theme').GenerateThemeResults} globalStyles The globalStyles from the Style system.
+ * @property {import('./create-css-custom-properties').CreateCSSCustomPropertiesResults} globalStyles The globalStyles from the Style system.
  */
 
 /**
@@ -69,9 +66,6 @@ export const createCoreElement = ( tagName, options ) => {
 			@media ( prefers-reduced-motion ) {
 				transition: none !important;
 			}
-			${ REDUCED_MOTION_MODE_ATTR } & {
-				transition: none !important;
-			}
 		`,
 	};
 

packages/components/src/ui/create-styles/create-style-system/create-core-elements.js

@@ -8,7 +8,7 @@ import { tags } from './tags';
  * @typedef CreateCoreElementProps
  * @property {import('create-emotion').ObjectInterpolation<any>} baseStyles Base styles for the coreElements.
  * @property {import('../create-compiler').Compiler} compiler The injectGlobal from the Style system's compiler.
- * @property {import('./generate-theme').GenerateThemeResults} globalStyles Global styles for the coreElements.
+ * @property {import('./create-css-custom-properties').CreateCSSCustomPropertiesResults} globalStyles Global styles for the coreElements.
  */
 
 /**

packages/components/src/ui/create-styles/create-style-system/create-css-custom-properties.js

@@ -0,0 +1,41 @@
+/**
+ * Internal dependencies
+ */
+import {
+	transformValuesToReferences,
+	transformValuesToVariables,
+	transformValuesToVariablesString,
+} from './utils';
+
+/**
+ * @typedef CreateCSSCustomPropertiesProps
+ * @property {import('./utils').StyleConfigValues} config Default theme config.
+ */
+
+/**
+ * @typedef CreateCSSCustomPropertiesResults
+ * @property {import('./utils').StyleConfig} theme A set of theme style references.
+ * @property {import('./utils').StyleConfig} globalVariables A set of global variables.
+ * @property {string} globalCSSVariables The compiled CSS string for global variables.
+ */
+
+/**
+ * Generates theme references and compiles CSS variables to be used by the Style System.
+ *
+ * @param {CreateCSSCustomPropertiesProps} props Props to generate a Style system theme with.
+ * @return {CreateCSSCustomPropertiesResults} A set of variables and content for the System.
+ */
+export function createCSSCustomProperties( { config = {} } ) {
+	const theme = transformValuesToReferences( config );
+	const globalVariables = transformValuesToVariables( config );
+	const globalCSSVariables = transformValuesToVariablesString(
+		':root',
+		config
+	);
+
+	return {
+		theme,
+		globalVariables,
+		globalCSSVariables,
+	};
+}

packages/components/src/ui/create-styles/create-style-system/create-style-system.js

@@ -2,47 +2,34 @@
  * Internal dependencies
  */
 import { createCompiler } from '../create-compiler';
-import { createRootStore } from '../css-custom-properties';
 import { createCoreElement } from './create-core-element';
 import { createCoreElements } from './create-core-elements';
 import { createStyledComponents } from './create-styled-components';
-import { generateTheme } from './generate-theme';
+import { createCSSCustomProperties } from './create-css-custom-properties';
 import { createToken, DEFAULT_STYLE_SYSTEM_OPTIONS } from './utils';
 
 const defaultOptions = DEFAULT_STYLE_SYSTEM_OPTIONS;
 
 /* eslint-disable jsdoc/valid-types */
 /**
- * @template {Record<string, string | number>} TConfig
- * @template {Record<string, string | number>} TDarkConfig
- * @template {Record<string, string | number>} THCConfig
- * @template {Record<string, string | number>} TDarkHCConfig
- * @template {string} TGeneratedTokens
+ * @template {Record<string, string | number> | {}} TConfig
  * @typedef CreateStyleSystemObjects
  * @property {import('./polymorphic-component').CoreElements} core A set of coreElements.
  * @property {import('../create-compiler').Compiler} compiler The Style system compiler (a custom Emotion instance).
  * @property {(tagName: keyof JSX.IntrinsicElements) => ReturnType<createCoreElement>} createCoreElement A function to create a coreElement (with settings from the Style system).
  * @property {import('../create-compiler').Compiler['css']} css A function to compile CSS styles.
  * @property {import('../create-compiler').Compiler['cx']} cx A function to resolve + combine classNames.
  * @property {(tokenName: string) => string} createToken A function to generate a design token (CSS variable) used by the system.
- * @property {(value: keyof (TConfig & TDarkConfig & THCConfig & TDarkHCConfig) | TGeneratedTokens) => string} get The primary function to retrieve Style system variables.
+ * @property {(value: keyof TConfig) => string} get The primary function to retrieve Style system variables.
  * @property {import('./polymorphic-component').CreateStyled} styled A set of styled components.
  * @property {import('react').ComponentType} View The base <View /> component.
- * @property {import('../css-custom-properties').RootStore} rootStore The root store.
  */
 
 /**
- * @template {Record<string, string | number>} TConfig
- * @template {Record<string, string | number>} TDarkConfig
- * @template {Record<string, string | number>} THCConfig
- * @template {Record<string, string | number>} TDarkHCConfig
- * @template {string} TGeneratedTokens
+ * @template {Record<string, string | number> | {}} TConfig
  * @typedef CreateStyleSystemOptions
  * @property {import('create-emotion').ObjectInterpolation<any>} baseStyles The base styles.
  * @property {TConfig} config The base theme config.
- * @property {TDarkConfig} darkModeConfig The dark mode theme config.
- * @property {THCConfig} highContrastModeConfig The high contrast mode theme config.
- * @property {TDarkHCConfig} darkHighContrastModeConfig The dark-high contrast mode theme config.
  * @property {import('../create-compiler').CreateCompilerOptions} [compilerOptions] The compiler options.
  */
 /* eslint-enable jsdoc/valid-types */
@@ -56,44 +43,24 @@ const defaultOptions = DEFAULT_STYLE_SYSTEM_OPTIONS;
  * const blueStyleSystem = createStyleSystem({ baseStyles });
  * ```
  *
- * @template {Record<string, string | number>} TConfig
- * @template {Record<string, string | number>} TDarkConfig
- * @template {Record<string, string | number>} THCConfig
- * @template {Record<string, string | number>} TDarkHCConfig
- * @template {string} TGeneratedTokens
- * @param {CreateStyleSystemOptions<TConfig, TDarkConfig, THCConfig, TDarkHCConfig, TGeneratedTokens>} options Options to create a Style system with.
- * @return {CreateStyleSystemObjects<TConfig, TDarkConfig, THCConfig, TDarkHCConfig, TGeneratedTokens>} A collection of functions and elements from the generated Style system.
+ * @template {Record<string, string | number> | {}} TConfig
+ * @param {CreateStyleSystemOptions<TConfig>} options Options to create a Style system with.
+ * @return {CreateStyleSystemObjects<TConfig>} A collection of functions and elements from the generated Style system.
  */
 export function createStyleSystem( options = defaultOptions ) {
-	const {
-		baseStyles,
-		compilerOptions,
-		config,
-		darkHighContrastModeConfig,
-		darkModeConfig,
-		highContrastModeConfig,
-	} = {
+	const { baseStyles, compilerOptions, config } = {
 		...defaultOptions,
 		...options,
 	};
 
-	const globalStyles = generateTheme( {
+	const globalStyles = createCSSCustomProperties( {
 		config,
-		darkHighContrastModeConfig,
-		darkModeConfig,
-		highContrastModeConfig,
 	} );
 
-	const rootStore = createRootStore( globalStyles.globalVariables );
-	rootStore.setState( globalStyles.globalVariables );
-
 	/**
 	 * Compiler (Custom Emotion instance).
 	 */
-	const compiler = createCompiler( {
-		...compilerOptions,
-		rootStore,
-	} );
+	const compiler = createCompiler( compilerOptions );
 	const { css, cx } = compiler;
 
 	/**
@@ -137,12 +104,11 @@ export function createStyleSystem( options = defaultOptions ) {
 		cx,
 		get: (
 			/* eslint-disable jsdoc/no-undefined-types */
-			/** @type {keyof TConfig | keyof TDarkConfig | keyof THCConfig | keyof TDarkHCConfig | TGeneratedTokens} */ key
+			/** @type {keyof TConfig} */ key
 			/* eslint-enable jsdoc/no-undefined-types */
 		) => `var(${ createToken( key.toString() ) })`,
 		styled,
 		View,
-		rootStore,
 	};
 
 	return styleSystem;