align EmptyState with @wordpress/ui conventions

remove docblock comments, use semantic CSS tokens

Author: retrofox

packages/ui/src/empty-state/actions.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { useRender, mergeProps } from '@base-ui/react';
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { EmptyStateActionsProps } from './types';
 import styles from './style.module.css';
 

packages/ui/src/empty-state/description.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { useRender, mergeProps } from '@base-ui/react';
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { EmptyStateDescriptionProps } from './types';
 import styles from './style.module.css';
 

packages/ui/src/empty-state/icon.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { Icon as IconComponent } from '../icon';
 import { Visual } from './visual';
 import type { EmptyStateIconProps } from './types';

packages/ui/src/empty-state/index.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { Root } from './root';
 import { Visual } from './visual';
 import { Icon } from './icon';

packages/ui/src/empty-state/root.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { useRender, mergeProps } from '@base-ui/react';
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { EmptyStateRootProps } from './types';
 import styles from './style.module.css';
 

packages/ui/src/empty-state/stories/index.story.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryObj } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { search } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import { Button, EmptyState } from '../..';
 
 const meta: Meta< typeof EmptyState.Root > = {

packages/ui/src/empty-state/style.module.css

@@ -6,23 +6,23 @@
 		flex-direction: column;
 		align-items: center;
 		text-align: center;
-		gap: calc( 2 * var( --wpds-dimension-base ) );
+		gap: var( --wpds-dimension-gap-xs );
 		font-family: var( --wpds-font-family-body );
 		color: var( --wpds-color-fg-content-neutral );
 		text-wrap: balance;
 	}
 
 	.visual {
 		display: flex;
-		margin-block-end: calc( 2 * var( --wpds-dimension-base ) );
+		margin-block-end: var( --wpds-dimension-gap-xs );
 		align-items: center;
 		justify-content: center;
 		color: var( --wpds-color-fg-content-neutral-weak );
 		line-height: 1;
 	}
 
 	.icon {
-		padding: calc( 2 * var( --wpds-dimension-base ) );
+		padding: var( --wpds-dimension-padding-surface-xs );
 		border: 1px solid var( --wpds-color-stroke-surface-neutral-weak );
 		border-radius: 50%;
 		background-color: var( --wpds-color-bg-surface-neutral );
@@ -45,9 +45,9 @@
 
 	.actions {
 		display: flex;
-		margin-block-start: calc( 4 * var( --wpds-dimension-base ) );
+		margin-block-start: var( --wpds-dimension-gap-md );
 		flex-direction: column;
-		gap: calc( 2 * var( --wpds-dimension-base ) );
+		gap: var( --wpds-dimension-gap-xs );
 		align-items: center;
 
 		@media ( min-width: 480px ) {

packages/ui/src/empty-state/test/actions.test.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { createRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { Actions } from '../index';
 import { Button } from '../../button';
 

packages/ui/src/empty-state/test/description.test.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { createRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { Description } from '../index';
 
 describe( 'EmptyState.Description', () => {

packages/ui/src/empty-state/test/icon.test.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { createRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { Icon } from '../index';
 
 describe( 'EmptyState.Icon', () => {