Add radius to storybook

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

@@ -0,0 +1,46 @@
+import { Meta, Typeset } from '@storybook/addon-docs/blocks';
+import { linkTo, hrefTo } from '@storybook/addon-links';
+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

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import React from 'react';
+
+export const RadiusTable = ( { tokens } ) => {
+	return (
+		<table width="100%">
+			<thead>
+				<tr>
+					<th>Token</th>
+					<th>Value</th>
+					<th>Example</th>
+				</tr>
+			</thead>
+			<tbody>
+				{ tokens.map( ( { name, valueShow, valueCode } ) => (
+					<tr key={ name }>
+						<td style={ { whiteSpace: 'nowrap' } }>{ name }</td>
+						<td>
+							<code
+								style={ {
+									lineHeight: 1,
+									margin: '0 2px',
+									padding: '3px 5px',
+									borderRadius: '3px',
+									fontSize: '13px',
+									border: '1px solid #ECF4F9',
+									color: 'rgba(46, 52, 56, 0.9)',
+									backgroundColor: '#F7FAFC',
+								} }
+							>
+								{ valueShow }
+							</code>
+						</td>
+						<td style={ { padding: '24px' } }>
+							<div
+								aria-label={ `An square showing an example of the '${ name }' radius styles` }
+								style={ {
+									width: '100px',
+									height: '100px',
+									borderRadius: valueCode,
+									background: 'white',
+									border: '1px solid #1e1e1e',
+								} }
+							></div>
+						</td>
+					</tr>
+				) ) }
+			</tbody>
+		</table>
+	);
+};

storybook/stories/tokens/radius.mdx

@@ -0,0 +1,112 @@
+import { Meta } from '@storybook/blocks';
+import { RadiusTable } 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:
+
+<RadiusTable
+	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%',
+		},
+	] }
+/>
+
+## 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 };
+```