@wordpress/global-styles-ui 1.1.0

package/src/shadows-panel.tsx

@@ -0,0 +1,207 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalItemGroup as ItemGroup,
+	Button,
+	FlexItem,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
+import {
+	plus,
+	Icon,
+	chevronLeft,
+	chevronRight,
+	moreVertical,
+} from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Subtitle } from './subtitle';
+import { NavigationButtonAsItem } from './navigation-button';
+import { ScreenHeader } from './screen-header';
+import { getNewIndexFromPresets } from './utils';
+import ConfirmResetShadowDialog from './confirm-reset-shadow-dialog';
+import { useSetting } from './hooks';
+import { unlock } from './lock-unlock';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+export const defaultShadow = '6px 6px 9px rgba(0, 0, 0, 0.2)';
+
+export default function ShadowsPanel() {
+	const [ defaultShadows ] = useSetting( 'shadow.presets.default' );
+	const [ defaultShadowsEnabled ] = useSetting( 'shadow.defaultPresets' );
+	const [ themeShadows ] = useSetting( 'shadow.presets.theme' );
+	const [ customShadows, setCustomShadows ] = useSetting(
+		'shadow.presets.custom'
+	);
+
+	const onCreateShadow = ( shadow: any ) => {
+		setCustomShadows( [ ...( customShadows || [] ), shadow ] );
+	};
+
+	const handleResetShadows = () => {
+		setCustomShadows( [] );
+	};
+
+	const [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );
+
+	const toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );
+
+	return (
+		<>
+			{ isResetDialogOpen && (
+				<ConfirmResetShadowDialog
+					text={ __(
+						'Are you sure you want to remove all custom shadows?'
+					) }
+					confirmButtonText={ __( 'Remove' ) }
+					isOpen={ isResetDialogOpen }
+					toggleOpen={ toggleResetDialog }
+					onConfirm={ handleResetShadows }
+				/>
+			) }
+			<ScreenHeader
+				title={ __( 'Shadows' ) }
+				description={ __(
+					'Manage and create shadow styles for use across the site.'
+				) }
+			/>
+			<div className="global-styles-ui-screen">
+				<VStack
+					className="global-styles-ui__shadows-panel"
+					spacing={ 7 }
+				>
+					{ defaultShadowsEnabled && (
+						<ShadowList
+							label={ __( 'Default' ) }
+							shadows={ defaultShadows || [] }
+							category="default"
+						/>
+					) }
+					{ themeShadows && themeShadows.length > 0 && (
+						<ShadowList
+							label={ __( 'Theme' ) }
+							shadows={ themeShadows || [] }
+							category="theme"
+						/>
+					) }
+					<ShadowList
+						label={ __( 'Custom' ) }
+						shadows={ customShadows || [] }
+						category="custom"
+						canCreate
+						onCreate={ onCreateShadow }
+						onReset={ toggleResetDialog }
+					/>
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+interface ShadowListProps {
+	label: string;
+	shadows: any[];
+	category: string;
+	canCreate?: boolean;
+	onCreate?: ( shadow: any ) => void;
+	onReset?: () => void;
+}
+
+function ShadowList( {
+	label,
+	shadows,
+	category,
+	canCreate,
+	onCreate,
+	onReset,
+}: ShadowListProps ) {
+	const handleAddShadow = () => {
+		const newIndex = getNewIndexFromPresets( shadows, 'shadow-' );
+		onCreate?.( {
+			name: sprintf(
+				/* translators: %d: is an index for a preset */
+				__( 'Shadow %d' ),
+				newIndex
+			),
+			shadow: defaultShadow,
+			slug: `shadow-${ newIndex }`,
+		} );
+	};
+
+	return (
+		<VStack spacing={ 2 }>
+			<HStack justify="space-between">
+				<Subtitle level={ 3 }>{ label }</Subtitle>
+				<FlexItem className="global-styles-ui__shadows-panel__options-container">
+					{ canCreate && (
+						<Button
+							size="small"
+							icon={ plus }
+							label={ __( 'Add shadow' ) }
+							onClick={ () => {
+								handleAddShadow();
+							} }
+						/>
+					) }
+					{ !! shadows?.length && category === 'custom' && (
+						<Menu>
+							<Menu.TriggerButton
+								render={
+									<Button
+										size="small"
+										icon={ moreVertical }
+										label={ __( 'Shadow options' ) }
+									/>
+								}
+							/>
+							<Menu.Popover>
+								<Menu.Item onClick={ onReset }>
+									<Menu.ItemLabel>
+										{ __( 'Remove all custom shadows' ) }
+									</Menu.ItemLabel>
+								</Menu.Item>
+							</Menu.Popover>
+						</Menu>
+					) }
+				</FlexItem>
+			</HStack>
+			{ shadows.length > 0 && (
+				<ItemGroup isBordered isSeparated>
+					{ shadows.map( ( shadow ) => (
+						<ShadowItem
+							key={ shadow.slug }
+							shadow={ shadow }
+							category={ category }
+						/>
+					) ) }
+				</ItemGroup>
+			) }
+		</VStack>
+	);
+}
+
+interface ShadowItemProps {
+	shadow: any;
+	category: string;
+}
+
+function ShadowItem( { shadow, category }: ShadowItemProps ) {
+	return (
+		<NavigationButtonAsItem
+			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
+		>
+			<HStack>
+				<FlexItem>{ shadow.name }</FlexItem>
+				<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}

package/src/size-control/index.tsx

@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BaseControl,
+	RangeControl,
+	Flex,
+	FlexItem,
+	useBaseControlProps,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalUnitControl as UnitControl,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
+
+interface SizeControlProps {
+	value?: string;
+	onChange?: ( value: string | undefined ) => void;
+	fallbackValue?: number;
+	disabled?: boolean;
+	label?: string;
+	__nextHasNoMarginBottom?: boolean;
+}
+
+function SizeControl( {
+	// Do not allow manipulation of margin bottom
+	__nextHasNoMarginBottom,
+	...props
+}: SizeControlProps ) {
+	const { baseControlProps } = useBaseControlProps( props );
+	const { value, onChange, fallbackValue, disabled, label } = props;
+
+	const units = useCustomUnits( {
+		availableUnits: DEFAULT_UNITS,
+	} );
+
+	const [ valueQuantity, valueUnit = 'px' ] =
+		parseQuantityAndUnitFromRawValue( value, units );
+
+	const isValueUnitRelative =
+		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
+
+	// Receives the new value from the UnitControl component as a string containing the value and unit.
+	const handleUnitControlChange = ( newValue: string | undefined ) => {
+		onChange?.( newValue );
+	};
+
+	// Receives the new value from the RangeControl component as a number.
+	const handleRangeControlChange = ( newValue: number | undefined ) => {
+		if ( newValue !== undefined ) {
+			onChange?.( newValue + valueUnit );
+		} else {
+			onChange?.( undefined );
+		}
+	};
+
+	return (
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						__next40pxDefaultSize
+						label={ label }
+						hideLabelFromVision
+						value={ value }
+						onChange={ handleUnitControlChange }
+						units={ units }
+						min={ 0 }
+						disabled={ disabled }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<Spacer marginX={ 2 } marginBottom={ 0 }>
+						<RangeControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ label }
+							hideLabelFromVision
+							value={ valueQuantity }
+							initialPosition={ fallbackValue }
+							withInputField={ false }
+							onChange={ handleRangeControlChange }
+							min={ 0 }
+							max={ isValueUnitRelative ? 10 : 100 }
+							step={ isValueUnitRelative ? 0.1 : 1 }
+							disabled={ disabled }
+						/>
+					</Spacer>
+				</FlexItem>
+			</Flex>
+		</BaseControl>
+	);
+}
+
+export { SizeControl };

package/src/size-control/style.scss

@@ -0,0 +1,7 @@
+@use "@wordpress/base-styles/variables";
+@use "@wordpress/base-styles/colors";
+@use "@wordpress/base-styles/mixins";
+
+// Size control component styling
+// The component relies primarily on WordPress component styling
+// This file is for any custom overrides or additional styling needed

package/src/stories/index.story.js

@@ -0,0 +1,410 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesUI as GlobalStylesUIComponent } from '../global-styles-ui';
+
+export default { title: 'GlobalStylesUI/GlobalStylesUI' };
+
+const BASE_SETTINGS = {
+	settings: {
+		appearanceTools: false,
+		useRootPaddingAwareAlignments: true,
+		border: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+		color: {
+			background: true,
+			custom: true,
+			customDuotone: true,
+			customGradient: true,
+			defaultDuotone: true,
+			defaultGradients: true,
+			defaultPalette: true,
+			duotone: {
+				default: [
+					{
+						name: 'Dark grayscale',
+						colors: [ '#000000', '#7f7f7f' ],
+						slug: 'dark-grayscale',
+					},
+					{
+						name: 'Grayscale',
+						colors: [ '#000000', '#ffffff' ],
+						slug: 'grayscale',
+					},
+					{
+						name: 'Purple and yellow',
+						colors: [ '#8c00b7', '#fcff41' ],
+						slug: 'purple-yellow',
+					},
+					{
+						name: 'Blue and red',
+						colors: [ '#000097', '#ff4747' ],
+						slug: 'blue-red',
+					},
+					{
+						name: 'Midnight',
+						colors: [ '#000000', '#00a5ff' ],
+						slug: 'midnight',
+					},
+					{
+						name: 'Magenta and yellow',
+						colors: [ '#c7005a', '#fff278' ],
+						slug: 'magenta-yellow',
+					},
+					{
+						name: 'Purple and green',
+						colors: [ '#a60072', '#67ff66' ],
+						slug: 'purple-green',
+					},
+					{
+						name: 'Blue and orange',
+						colors: [ '#1900d8', '#ffa96b' ],
+						slug: 'blue-orange',
+					},
+				],
+			},
+			gradients: {
+				default: [
+					{
+						name: 'Vivid cyan blue to vivid purple',
+						gradient:
+							'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					},
+					{
+						name: 'Light green cyan to vivid green cyan',
+						gradient:
+							'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					},
+					{
+						name: 'Luminous vivid amber to luminous vivid orange',
+						gradient:
+							'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
+						slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
+					},
+					{
+						name: 'Luminous vivid orange to vivid red',
+						gradient:
+							'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
+						slug: 'luminous-vivid-orange-to-vivid-red',
+					},
+					{
+						name: 'Very light gray to cyan bluish gray',
+						gradient:
+							'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
+						slug: 'very-light-gray-to-cyan-bluish-gray',
+					},
+					{
+						name: 'Cool to warm spectrum',
+						gradient:
+							'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
+						slug: 'cool-to-warm-spectrum',
+					},
+					{
+						name: 'Blush light purple',
+						gradient:
+							'linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)',
+						slug: 'blush-light-purple',
+					},
+					{
+						name: 'Blush bordeaux',
+						gradient:
+							'linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)',
+						slug: 'blush-bordeaux',
+					},
+					{
+						name: 'Luminous dusk',
+						gradient:
+							'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)',
+						slug: 'luminous-dusk',
+					},
+					{
+						name: 'Pale ocean',
+						gradient:
+							'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+						slug: 'pale-ocean',
+					},
+					{
+						name: 'Electric grass',
+						gradient:
+							'linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)',
+						slug: 'electric-grass',
+					},
+					{
+						name: 'Midnight',
+						gradient:
+							'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
+						slug: 'midnight',
+					},
+				],
+			},
+			link: true,
+			palette: {
+				default: [
+					{
+						name: 'Black',
+						slug: 'black',
+						color: '#000000',
+					},
+					{
+						name: 'Cyan bluish gray',
+						slug: 'cyan-bluish-gray',
+						color: '#abb8c3',
+					},
+					{
+						name: 'White',
+						slug: 'white',
+						color: '#ffffff',
+					},
+					{
+						name: 'Pale pink',
+						slug: 'pale-pink',
+						color: '#f78da7',
+					},
+					{
+						name: 'Vivid red',
+						slug: 'vivid-red',
+						color: '#cf2e2e',
+					},
+					{
+						name: 'Luminous vivid orange',
+						slug: 'luminous-vivid-orange',
+						color: '#ff6900',
+					},
+					{
+						name: 'Luminous vivid amber',
+						slug: 'luminous-vivid-amber',
+						color: '#fcb900',
+					},
+					{
+						name: 'Light green cyan',
+						slug: 'light-green-cyan',
+						color: '#7bdcb5',
+					},
+					{
+						name: 'Vivid green cyan',
+						slug: 'vivid-green-cyan',
+						color: '#00d084',
+					},
+					{
+						name: 'Pale cyan blue',
+						slug: 'pale-cyan-blue',
+						color: '#8ed1fc',
+					},
+					{
+						name: 'Vivid cyan blue',
+						slug: 'vivid-cyan-blue',
+						color: '#0693e3',
+					},
+					{
+						name: 'Vivid purple',
+						slug: 'vivid-purple',
+						color: '#9b51e0',
+					},
+				],
+				theme: [
+					{
+						color: '#ffffff',
+						name: 'Base',
+						slug: 'base',
+					},
+					{
+						color: '#000000',
+						name: 'Contrast',
+						slug: 'contrast',
+					},
+					{
+						color: '#9DFF20',
+						name: 'Primary',
+						slug: 'primary',
+					},
+					{
+						color: '#345C00',
+						name: 'Secondary',
+						slug: 'secondary',
+					},
+					{
+						color: '#F6F6F6',
+						name: 'Tertiary',
+						slug: 'tertiary',
+					},
+				],
+			},
+			text: true,
+		},
+		shadow: {
+			defaultPresets: true,
+			presets: {
+				default: [
+					{
+						name: 'Natural',
+						slug: 'natural',
+						shadow: '6px 6px 9px rgba(0, 0, 0, 0.2)',
+					},
+					{
+						name: 'Deep',
+						slug: 'deep',
+						shadow: '12px 12px 50px rgba(0, 0, 0, 0.4)',
+					},
+					{
+						name: 'Sharp',
+						slug: 'sharp',
+						shadow: '6px 6px 0px rgba(0, 0, 0, 0.2)',
+					},
+					{
+						name: 'Outlined',
+						slug: 'outlined',
+						shadow: '6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)',
+					},
+					{
+						name: 'Crisp',
+						slug: 'crisp',
+						shadow: '6px 6px 0px rgba(0, 0, 0, 1)',
+					},
+				],
+			},
+		},
+		layout: {
+			contentSize: '650px',
+			wideSize: '1200px',
+		},
+		spacing: {
+			blockGap: true,
+			margin: true,
+			padding: true,
+			customSpacingSize: true,
+			units: [ '%', 'px', 'em', 'rem', 'vh', 'vw' ],
+			spacingScale: {
+				operator: '*',
+				increment: 1.5,
+				steps: 0,
+				mediumStep: 1.5,
+				unit: 'rem',
+			},
+			spacingSizes: {
+				theme: [
+					{
+						size: 'clamp(1.5rem, 5vw, 2rem)',
+						slug: '30',
+						name: '1',
+					},
+					{
+						size: 'clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)',
+						slug: '40',
+						name: '2',
+					},
+					{
+						size: 'clamp(2.5rem, 8vw, 4.5rem)',
+						slug: '50',
+						name: '3',
+					},
+					{
+						size: 'clamp(3.75rem, 10vw, 7rem)',
+						slug: '60',
+						name: '4',
+					},
+					{
+						size: 'clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)',
+						slug: '70',
+						name: '5',
+					},
+					{
+						size: 'clamp(7rem, 14vw, 11rem)',
+						slug: '80',
+						name: '6',
+					},
+				],
+			},
+		},
+		typography: {
+			customFontSize: true,
+			dropCap: false,
+			fontSizes: {
+				default: [
+					{
+						name: 'Small',
+						slug: 'small',
+						size: '13px',
+					},
+					{
+						name: 'Medium',
+						slug: 'medium',
+						size: '20px',
+					},
+					{
+						name: 'Large',
+						slug: 'large',
+						size: '36px',
+					},
+					{
+						name: 'Extra Large',
+						slug: 'x-large',
+						size: '42px',
+					},
+				],
+			},
+			fontStyle: true,
+			fontWeight: true,
+			letterSpacing: true,
+			lineHeight: true,
+			textColumns: false,
+			textDecoration: true,
+			textTransform: true,
+			writingMode: false,
+			fluid: true,
+			fontFamilies: {
+				theme: [
+					{
+						fontFamily:
+							'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+						name: 'System Font',
+						slug: 'system-font',
+					},
+				],
+			},
+		},
+		dimensions: {
+			minHeight: true,
+		},
+		position: {
+			fixed: true,
+			sticky: true,
+		},
+	},
+	styles: {
+		blocks: {},
+		elements: {},
+	},
+};
+
+export const GlobalStylesUI = () => {
+	const [ userGlobalStyles, setUserStyles ] = useState( {
+		settings: {},
+		styles: {},
+	} );
+	const wrapperStyle = {
+		width: 280,
+	};
+	return (
+		<div style={ wrapperStyle }>
+			<GlobalStylesUIComponent
+				value={ userGlobalStyles }
+				baseValue={ BASE_SETTINGS }
+				onChange={ setUserStyles }
+				fontLibraryEnabled
+				serverCSS={ [] }
+				serverSettings={ {} }
+			/>
+		</div>
+	);
+};