@wordpress/components 37.0.1-next.v.202607070741.0 → 38.0.0

package/src/theme/stories/index.story.tsx

@@ -1,127 +0,0 @@
-/**
- * External dependencies
- */
-import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
-import Theme from '../index';
-import Button from '../../button';
-import { generateThemeVariables, checkContrasts } from '../color-algorithms';
-import { HStack } from '../../h-stack';
-
-const meta: Meta< typeof Theme > = {
-	component: Theme,
-	title: 'Components/Utilities/Theme',
-	id: 'components-theme',
-	argTypes: {
-		accent: { control: { type: 'color' } },
-		background: { control: { type: 'color' } },
-	},
-	tags: [ 'status-private' ],
-	parameters: {
-		controls: { expanded: true },
-		docs: { canvas: { sourceState: 'shown' } },
-		componentStatus: {
-			status: 'not-recommended',
-			whereUsed: 'global',
-			notes: 'This is an internal experiment and not meant for external use. Will be superseded by `@wordpress/theme`.',
-		},
-	},
-};
-export default meta;
-
-const Template: StoryFn< typeof Theme > = ( args ) => (
-	<Theme { ...args }>
-		<Button __next40pxDefaultSize variant="primary">
-			Hello
-		</Button>
-	</Theme>
-);
-
-export const Default = Template.bind( {} );
-Default.args = {};
-
-export const Nested: StoryFn< typeof Theme > = ( args ) => (
-	<Theme accent="crimson">
-		<Button __next40pxDefaultSize variant="primary">
-			Outer theme (hardcoded)
-		</Button>
-
-		<Theme { ...args }>
-			<Button __next40pxDefaultSize variant="primary">
-				Inner theme (set via Storybook controls)
-			</Button>
-		</Theme>
-	</Theme>
-);
-Nested.args = {
-	accent: 'blue',
-};
-
-/**
- * The rest of the required colors are generated based on the given accent and background colors.
- */
-export const ColorScheme: StoryFn< typeof Theme > = ( {
-	accent,
-	background,
-} ) => {
-	const { colors } = generateThemeVariables( { accent, background } );
-	const { gray, ...otherColors } = colors;
-	/* eslint-disable @typescript-eslint/no-unused-vars */
-	const contrastIssues = Object.entries(
-		checkContrasts( { accent, background }, colors )
-	).filter( ( [ _, error ] ) => !! error );
-	/* eslint-enable @typescript-eslint/no-unused-vars */
-
-	const Chip = ( { color, name }: { color: string; name: string } ) => (
-		<HStack justify="flex-start">
-			<div
-				style={ {
-					backgroundColor: color,
-					height: '1.25em',
-					width: 40,
-				} }
-			/>
-			<div style={ { fontSize: 14 } }>{ name }</div>
-		</HStack>
-	);
-
-	return (
-		<>
-			{ Object.entries( otherColors ).map( ( [ key, value ] ) => (
-				<Chip color={ value } name={ key } key={ key } />
-			) ) }
-			{ Object.entries( gray as NonNullable< typeof gray > ).map(
-				( [ key, value ] ) => (
-					<Chip
-						color={ value }
-						name={ `gray ${ key }` }
-						key={ key }
-					/>
-				)
-			) }
-			{ !! contrastIssues.length && (
-				<>
-					<h2>Contrast issues</h2>
-					<ul>
-						{ contrastIssues.map( ( [ key, error ] ) => (
-							<li key={ key }>{ error }</li>
-						) ) }
-					</ul>
-				</>
-			) }
-		</>
-	);
-};
-ColorScheme.args = {
-	accent: '#3858e9',
-	background: '#fff',
-};
-ColorScheme.argTypes = {
-	children: { table: { disable: true } },
-};
-ColorScheme.parameters = {
-	docs: { canvas: { sourceState: 'hidden' } },
-};

package/src/theme/style.module.scss

@@ -1,4 +0,0 @@
-.wrapper {
-	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Preserve Theme's currentColor fallback when no foreground variable is generated. */
-	color: var(--wp-components-color-foreground, currentColor);
-}

package/src/theme/test/color-algorithms.ts

@@ -1,100 +0,0 @@
-/**
- * External dependencies
- */
-import { colord } from 'colord';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../../utils';
-
-/**
- * Internal dependencies
- */
-import { generateShades, generateThemeVariables } from '../color-algorithms';
-
-describe( 'Theme color algorithms', () => {
-	describe( 'generateThemeVariables', () => {
-		it( 'should allow explicitly undefined values', () => {
-			generateThemeVariables( {
-				accent: undefined,
-				background: undefined,
-			} );
-			expect( console ).not.toHaveWarned();
-		} );
-
-		it( 'should warn if invalid colors are passed', () => {
-			generateThemeVariables( { accent: 'var(--invalid)' } );
-			expect( console ).toHaveWarned();
-		} );
-
-		it( 'should warn if standard foreground colors are not readable against background', () => {
-			generateThemeVariables( { background: '#777' } );
-			expect( console ).toHaveWarnedWith(
-				'wp.components.Theme: The background color provided ("#777") does not have sufficient contrast against the standard foreground colors.'
-			);
-		} );
-
-		it( 'should warn if accent color is not readable against background', () => {
-			generateThemeVariables( { background: '#fefefe' } );
-			expect( console ).not.toHaveWarned();
-
-			generateThemeVariables( {
-				accent: '#000',
-				background: '#fff',
-			} );
-			expect( console ).not.toHaveWarned();
-
-			generateThemeVariables( {
-				accent: '#111',
-				background: '#000',
-			} );
-			expect( console ).toHaveWarnedWith(
-				'wp.components.Theme: The background color ("#000") does not have sufficient contrast against the accent color ("#111").'
-			);
-
-			generateThemeVariables( { background: '#1a1a1a' } );
-			expect( console ).toHaveWarnedWith(
-				'wp.components.Theme: The background color ("#1a1a1a") does not have sufficient contrast against the accent color ("#3858e9").'
-			);
-		} );
-
-		it( 'should warn if a readable grayscale cannot be generated', () => {
-			generateThemeVariables( { background: '#ddd' } );
-			expect( console ).toHaveWarnedWith(
-				'wp.components.Theme: The background color provided ("#ddd") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.'
-			);
-		} );
-	} );
-
-	describe( 'generateShades', () => {
-		it( 'should generate the default WP shades when the default WP background/foreground colors are given', () => {
-			const shades = generateShades( '#fff', '#1e1e1e' );
-
-			Object.entries( shades ).forEach( ( [ k, color ] ) => {
-				const key = parseInt( k, 10 ) as keyof typeof shades;
-				const normalizedExpectedColor = colord(
-					COLORS.gray[ key ]
-				).toHex();
-
-				expect( color ).toBe( normalizedExpectedColor );
-			} );
-		} );
-
-		it.each( [
-			[ '#000', '#fff' ], // wide delta
-			[ '#fff', '#000' ], // flipped
-			[ '#eee', '#fff' ], // narrow delta
-		] )( 'should generate unique shades (bg: %s, fg: %s)', ( bg, fg ) => {
-			const shades = generateShades( bg, fg );
-
-			// The darkest and lightest shades should be different from the fg/bg colors
-			expect( colord( shades[ 100 ] ).isEqual( bg ) ).toBe( false );
-			expect( colord( shades[ 800 ] ).isEqual( fg ) ).toBe( false );
-
-			// The shades should be unique
-			const shadeValues = Object.values( shades );
-			expect( shadeValues ).toHaveLength( new Set( shadeValues ).size );
-		} );
-	} );
-} );

package/src/theme/test/index.tsx

@@ -1,151 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import type { ReactNode } from 'react';
-
-import Theme from '../';
-
-type MyThemableComponentProps = {
-	children: ReactNode;
-};
-
-const MyThemableComponent = ( props: MyThemableComponentProps ) => {
-	return (
-		<div
-			{ ...props }
-			style={ {
-				color: 'var(--wp-components-color-accent)',
-			} }
-		/>
-	);
-};
-
-describe( 'Theme', () => {
-	it( 'should support the as prop', () => {
-		render( <Theme as="section" data-testid="theme" /> );
-
-		expect( screen.getByTestId( 'theme' ) ).toHaveProperty(
-			'tagName',
-			'SECTION'
-		);
-	} );
-
-	it( 'lets user styles override generated theme variables', () => {
-		render(
-			<Theme
-				accent="#123abc"
-				style={ { '--wp-components-color-accent': '#654321' } }
-				data-testid="theme"
-			/>
-		);
-
-		expect( screen.getByTestId( 'theme' ) ).toHaveStyle( {
-			'--wp-components-color-accent': '#654321',
-		} );
-	} );
-
-	describe( 'accent color', () => {
-		it( 'does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
-			render(
-				<Theme data-testid="theme">
-					<MyThemableComponent>Inner</MyThemableComponent>
-				</Theme>
-			);
-
-			const innerElementStyles = window.getComputedStyle(
-				screen.getByTestId( 'theme' )
-			);
-
-			[
-				'--wp-components-color-accent',
-				'--wp-components-color-accent-darker-10',
-				'--wp-components-color-accent-darker-20',
-				'--wp-components-color-accent-inverted',
-			].forEach( ( cssVariable ) => {
-				expect(
-					innerElementStyles.getPropertyValue( cssVariable )
-				).toBe( '' );
-			} );
-		} );
-
-		it( 'defines the accent color (and its variations) as a CSS variable', () => {
-			render(
-				<Theme accent="#123abc" data-testid="theme">
-					<MyThemableComponent>Inner</MyThemableComponent>
-				</Theme>
-			);
-
-			expect( screen.getByTestId( 'theme' ) ).toHaveStyle( {
-				'--wp-components-color-accent': '#123abc',
-				'--wp-components-color-accent-darker-10': '#0e2c8d',
-				'--wp-components-color-accent-darker-20': '#091d5f',
-				'--wp-components-color-accent-inverted': '#fff',
-			} );
-		} );
-	} );
-
-	describe( 'background color', () => {
-		it( 'does not define the background color (and its dependent colors) as a CSS variable when the `background` prop is undefined', () => {
-			render(
-				<Theme data-testid="theme">
-					<MyThemableComponent>Inner</MyThemableComponent>
-				</Theme>
-			);
-
-			const innerElementStyles = window.getComputedStyle(
-				screen.getByTestId( 'theme' )
-			);
-
-			[
-				'--wp-components-color-background',
-				'--wp-components-color-foreground',
-				'--wp-components-color-foreground-inverted',
-				...[ '100', '200', '300', '400', '600', '700', '800' ].map(
-					( shade ) => `--wp-components-color-gray-${ shade }`
-				),
-			].forEach( ( cssVariable ) => {
-				expect(
-					innerElementStyles.getPropertyValue( cssVariable )
-				).toBe( '' );
-			} );
-		} );
-
-		it( 'defines the background color (and its dependent colors) as a CSS variable', () => {
-			render(
-				<Theme background="#ffffff" data-testid="theme">
-					<MyThemableComponent>Inner</MyThemableComponent>
-				</Theme>
-			);
-
-			expect( screen.getByTestId( 'theme' ) ).toHaveStyle( {
-				'--wp-components-color-background': '#ffffff',
-				'--wp-components-color-foreground': '#1e1e1e',
-				'--wp-components-color-foreground-inverted': '#fff',
-				'--wp-components-color-gray-100': '#f0f0f0',
-				'--wp-components-color-gray-200': '#e0e0e0',
-				'--wp-components-color-gray-300': '#dddddd',
-				'--wp-components-color-gray-400': '#cccccc',
-				'--wp-components-color-gray-600': '#949494',
-				'--wp-components-color-gray-700': '#757575',
-				'--wp-components-color-gray-800': '#2f2f2f',
-			} );
-		} );
-	} );
-
-	describe( 'unsupported values', () => {
-		describe.each( [ 'accent', 'background' ] )( '%s', ( propName ) => {
-			it.each( [
-				// Keywords
-				'currentcolor',
-				'initial',
-				'reset',
-				'inherit',
-				'revert',
-				'unset',
-				// CSS Custom properties
-				'var( --my-variable )',
-			] )( 'should warn when the value is "%s"', ( value ) => {
-				render( <Theme { ...{ [ propName ]: value } } /> );
-				expect( console ).toHaveWarned();
-			} );
-		} );
-	} );
-} );

package/src/theme/types.ts

@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import type { ReactNode } from 'react';
-
-export type ThemeInputValues = {
-	/**
-	 * The accent color (used by components as the primary color).
-	 *
-	 * If an accent color is not defined, the default fallback value is the original
-	 * WP Admin main theme color. Not all valid CSS color syntaxes are supported —
-	 * in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`,
-	 * `'revert'`, `'unset'`...) and CSS custom properties (e.g.
-	 * `var(--my-custom-property)`) are _not_ supported values for this property.
-	 */
-	accent?: string;
-	/**
-	 * The background color.
-	 *
-	 * If a component explicitly has a background, it will be this color.
-	 * Otherwise, this color will simply be used to determine what the foreground colors should be.
-	 * The actual background color will need to be set on the component's container element.
-	 *
-	 * If a background color is not defined, the default fallback value is #fff.
-	 * Not all valid CSS color syntaxes are supported —
-	 * in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`,
-	 * `'revert'`, `'unset'`...) and CSS custom properties (e.g.
-	 * `var(--my-custom-property)`) are _not_ supported values for this property.
-	 */
-	background?: string;
-};
-
-export type ThemeOutputValues = {
-	colors: Partial< {
-		accent: string;
-		accentDarker10: string;
-		accentDarker20: string;
-		/** Foreground color to use when accent color is the background. */
-		accentInverted: string;
-		background: string;
-		foreground: string;
-		/** Foreground color to use when foreground color is the background. */
-		foregroundInverted: string;
-		gray: {
-			100: string;
-			200: string;
-			300: string;
-			400: string;
-			600: string;
-			700: string;
-			800: string;
-		};
-	} >;
-};
-
-export type ThemeProps = ThemeInputValues & {
-	/**
-	 * The children elements.
-	 */
-	children?: ReactNode;
-};

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { CONFIG, COLORS } from '../../utils';
-import type { ToggleGroupControlProps } from '../types';
-
-export const block = css`
-	display: flex;
-	width: 100%;
-`;
-
-export const toggleGroupControl = ( {
-	isBlock,
-	isDeselectable,
-}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > ) => css`
-	background: ${ COLORS.ui.background };
-	border: 1px solid transparent;
-	border-radius: ${ CONFIG.radiusSmall };
-	display: inline-flex;
-	height: 40px;
-	min-width: 0;
-	position: relative;
-
-	${ ! isDeselectable && enclosingBorders( isBlock ) }
-	${ isBlock && block }
-
-	@media not ( prefers-reduced-motion ) {
-		&[data-indicator-animated]::before {
-			transition-property: transform, border-radius;
-			transition-duration: 0.2s;
-			transition-timing-function: ease-out;
-		}
-	}
-
-	&::before {
-		content: '';
-		position: absolute;
-		pointer-events: none;
-		background: ${ COLORS.theme.gray[ 100 ] };
-		border: 1px solid ${ COLORS.theme.gray[ 700 ] };
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
-		outline-offset: -3px;
-
-		border-radius: ${ CONFIG.radiusSmall };
-		top: -1px;
-		left: -2px;
-		width: calc( calc( var( --selected-width, 0 ) * 1px ) + 2px );
-		height: calc( calc( var( --selected-height, 0 ) * 1px ) + 2px );
-		transform: translateX( calc( var( --selected-left, 0 ) * 1px ) );
-		/* Hide when dimensions are unset (0) */
-		opacity: min(
-			1,
-			max( 0, var( --selected-width, 0 ), var( --selected-height, 0 ) )
-		);
-	}
-`;
-
-const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
-	const enclosingBorder = css`
-		border-color: ${ COLORS.gray[ 300 ] };
-	`;
-
-	return css`
-		${ isBlock && enclosingBorder }
-
-		&:hover {
-			border-color: ${ COLORS.gray[ 400 ] };
-		}
-
-		&:focus-within {
-			z-index: 1;
-			outline: ${ CONFIG.borderWidthFocus } solid
-				${ COLORS.ui.borderFocus };
-			outline-offset: 1px;
-		}
-	`;
-};

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -1,109 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { CONFIG, COLORS } from '../../utils';
-import type {
-	ToggleGroupControlProps,
-	ToggleGroupControlOptionBaseProps,
-} from '../types';
-
-export const LabelView = styled.div`
-	display: inline-flex;
-	max-width: 100%;
-	min-width: 0;
-	position: relative;
-`;
-
-export const labelBlock = css`
-	flex: 1;
-`;
-
-export const buttonView = ( {
-	isDeselectable,
-	isIcon,
-	isPressed,
-}: Pick< ToggleGroupControlProps, 'isDeselectable' > &
-	Pick< ToggleGroupControlOptionBaseProps, 'isIcon' > & {
-		isPressed?: boolean;
-	} ) => css`
-	align-items: center;
-	appearance: none;
-	background: transparent;
-	border: none;
-	border-radius: ${ CONFIG.radiusXSmall };
-	color: ${ COLORS.theme.gray[ 700 ] };
-	fill: currentColor;
-	cursor: pointer;
-	display: flex;
-	font-family: inherit;
-	height: 100%;
-	justify-content: center;
-	line-height: 100%;
-	outline: none;
-	padding: 0 12px;
-	position: relative;
-	text-align: center;
-	@media not ( prefers-reduced-motion ) {
-		transition:
-			color ${ CONFIG.transitionDurationFast } linear,
-			font-weight 60ms linear;
-	}
-	user-select: none;
-	width: 100%;
-	z-index: 2;
-
-	&::-moz-focus-inner {
-		border: 0;
-	}
-
-	&[disabled],
-	&[aria-disabled='true'] {
-		opacity: 0.4;
-		cursor: default;
-	}
-
-	&:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-		color: ${ COLORS.theme.foreground };
-	}
-
-	${ isDeselectable && deselectable }
-	${ isIcon && isIconStyles }
-	${ isPressed && pressed }
-`;
-
-const pressed = css`
-	color: ${ COLORS.theme.foreground };
-	font-weight: ${ CONFIG.fontWeightMedium };
-`;
-
-const deselectable = css`
-	&:focus {
-		outline: ${ CONFIG.borderWidthFocus } solid ${ COLORS.ui.borderFocus };
-		outline-offset: 2px;
-
-		// Hide overlapping border
-		&[aria-pressed='false'] {
-			background: ${ COLORS.ui.background };
-			box-shadow: 0 0 0 2px ${ COLORS.ui.background };
-		}
-	}
-`;
-
-export const ButtonContentView = styled.div`
-	display: flex;
-	font-size: ${ CONFIG.fontSize };
-	line-height: 1;
-`;
-
-const isIconStyles = css`
-	height: 38px;
-	aspect-ratio: 1;
-	padding-left: 0;
-	padding-right: 0;
-`;