Add radius foundation and tokens to storybook (#66219)

Co-authored-by: jameskoster <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: jasmussen <[email protected]>

storybook/stories/foundations/design-language/radius.mdx

@@ -0,0 +1,55 @@
+import { Meta, Typeset } from '@storybook/addon-docs/blocks';
+import radius from './static/radius.svg';
+import radiusDo from './static/radius-do.svg';
+import radiusDont from './static/radius-dont.svg';
+
+<Meta title="Foundations/Design Language/Radius" name="page" />
+
+# Radius
+
+<img src={ radius } alt="Radius" width="100%" />
+
+The radius scale is designed to provide a consistent, elegant appearance across nested elements. The defined values help maintain visual harmony between smaller primitives and larger containers, ensuring a cohesive user experience.
+
+## Scale
+
+The scale includes the following steps:
+
+-   `radius-x-small`: Applied to the smallest elements, such as buttons inside inputs or similar small primitives. This ensures subtle rounding without distracting from the core design.
+-   `radius-small`: The most commonly used radius value, applied to many primitives like buttons, inputs, and other standalone controls. It provides a moderate rounding that feels balanced and polished.
+-   `radius-medium`: Used for medium-sized containers like dropdown menus, popovers, and other mid-level components. This value is slightly more pronounced, giving these elements a soft but noticeable edge.
+-   `radius-large`: Reserved for larger containers such as cards and modals. The larger radius ensures that these elements have a smooth, elegant appearance that enhances their prominence on the page.
+-   `radius-full`: Applies a `border-radius` of `9999px`, this value creates a highly rounded appearance, often used on pill-shaped buttons or other components where extreme rounding is desired but full circularity is not necessary.
+-   `radius-round`: This value applies a `border-radius` of `100%`, making elements fully circular. It's typically used for circular avatars or buttons where complete rounding is required.
+
+These steps are defined as tokens. To view the values and understand how to use them please view the [Tokens section](?path=/docs/tokens-radius--page).
+
+## Usage Guidelines
+
+-   Consistency: To maintain visual cohesion, adhere to the radius scale when styling elements. Avoid custom radius values unless there is a specific need.
+-   Nested Elements: When combining elements of different sizes (e.g., buttons within inputs or cards within modals), ensure that smaller nested elements use the appropriate radius value for their size.
+-   Accessibility: Larger radius values can create a more approachable and friendly appearance, especially for larger components like cards and modals that demand more attention from users.
+
+<table>
+  <tr>
+    <th width="50%">✅ Do</th>
+    <th width="50%">🚫 Don't</th>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <img src={ radiusDo } alt="Radius do" width="100%" />
+
+      - Scale application of radius with element or container size.
+
+      - Use `radius-round` for circles and `radius-full` for pills.
+    </td>
+    <td width="50%" valign="top">
+      <img src={ radiusDont } alt="Radius don't" width="100%" />
+
+        -   Don't nest larger radii inside smaller radii.
+
+        -   Don't apply the same
+    radius value to container and immediate descendent.
+    </td>
+  </tr>
+</table>

storybook/stories/tokens/components.tsx

@@ -4,9 +4,9 @@
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import React from 'react';
 
-export const ElevationTable = ( { tokens } ) => {
+export const TokensTable = ( { tokenCategory, tokens, applyTokenStyle } ) => {
 	return (
-		<table>
+		<table style={ { width: '100%' } }>
 			<thead>
 				<tr>
 					<th>Token</th>
@@ -36,12 +36,12 @@ export const ElevationTable = ( { tokens } ) => {
 						</td>
 						<td style={ { padding: '24px' } }>
 							<div
-								aria-label={ `An square showing an example of the '${ name }' elevation styles` }
+								aria-label={ `A shape showing an example of the '${ name }' ${ tokenCategory } token` }
 								style={ {
 									width: '100px',
 									height: '100px',
-									boxShadow: valueCode,
 									background: 'white',
+									...applyTokenStyle( valueCode ),
 								} }
 							></div>
 						</td>

storybook/stories/tokens/elevation.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs/blocks';
-import { ElevationTable } from './components.tsx';
+import { TokensTable } from './components.tsx';
 
 <Meta title="Tokens/Elevation" name="page" />
 
@@ -11,7 +11,8 @@ This document outlines the various tokens relating to [elevation](?path=/docs/fo
 
 Tokens can be used in different ways, but regardless of which method is used, each one is meant to be used as the value of the CSS `box-shadow` property, and references the following values:
 
-<ElevationTable
+<TokensTable
+	tokenCategory="elevation"
 	tokens={ [
 		{
 			name: 'Extra small',
@@ -42,6 +43,7 @@ Tokens can be used in different ways, but regardless of which method is used, ea
 				'0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)',
 		},
 	] }
+	applyTokenStyle={ ( valueCode ) => ( { boxShadow: valueCode } ) }
 />
 
 ## CSS tokens

storybook/stories/tokens/radius.mdx

@@ -0,0 +1,105 @@
+import { Meta } from '@storybook/blocks';
+import { TokensTable } from './components.tsx';
+
+<Meta title="Tokens/Radius" name="page" />
+
+# Radius
+
+This document outlines the various tokens relating to radius in the WordPress design system.
+
+## Values
+
+Tokens can be used in different ways, but regardless of which method is used, each one is meant to be used as the value of the CSS `border-radius` property, and references the following values:
+
+<TokensTable
+	tokenCategory="radius"
+	tokens={ [
+		{
+			name: 'Extra small',
+			valueShow: '1px',
+			valueCode: '1px',
+		},
+		{
+			name: 'Small',
+			valueShow: '2px',
+			valueCode: '2px',
+		},
+		{
+			name: 'Medium',
+			valueShow: '4px',
+			valueCode: '4px',
+		},
+		{
+			name: 'Large',
+			valueShow: '8px',
+			valueCode: '8px',
+		},
+		{
+			name: 'Full',
+			valueShow: '9999px',
+			valueCode: '9999px',
+		},
+		{
+			name: 'Round',
+			valueShow: '100%',
+			valueCode: '100%',
+		},
+	] }
+	applyTokenStyle={ ( valueCode ) => ( {
+		borderRadius: valueCode,
+		border: '1px solid #1e1e1e',
+	} ) }
+/>
+
+## CSS tokens
+
+Radius tokens are defined as SASS variables:
+
+-   `$radius-x-small`
+-   `$radius-small`
+-   `$radius-medium`
+-   `$radius-large`
+-   `$radius-full`
+-   `$radius-round`
+
+They can be used like so:
+
+```css
+.radius-extra-small {
+	border-radius: $radius-x-small;
+}
+.radius-small {
+	border-radius: $radius-small;
+}
+.radius-medium {
+	border-radius: $radius-medium;
+}
+.radius-large {
+	border-radius: $radius-large;
+}
+.radius-full {
+	border-radius: $radius-full;
+}
+.radius-round {
+	border-radius: $radius-round;
+}
+```
+
+## JS tokens
+
+When working in the `@wordpress/components` package, the radius tokens can also be consumed as JavaScript variables via the `CONFIG` object found in the `packages/components/src/utils/index.js` file:
+
+-   `CONFIG.radiusXSmall`
+-   `CONFIG.radiusSmall`
+-   `CONFIG.radiusMedium`
+-   `CONFIG.radiusLarge`
+-   `CONFIG.radiusFull`
+-   `CONFIG.radiusRound`
+
+```js
+// Note: the `CONFIG` object is only available within the `@wordpress/components` package.
+import { CONFIG } from '../utils';
+
+// Later in the code:
+border-radius: ${ CONFIG.radiusXSmall };
+```