From 6caf9e247db5130f6474fb77906012c24ac22639 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 11 Dec 2025 14:33:41 -0500 Subject: [PATCH 01/12] Theme: Normalize typography tokens to using dashes CSS export will already normalize this, but this is necessary for use in some tools like Figma to ensure correct CSS property code snippets --- packages/theme/tokens/typography.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/tokens/typography.json b/packages/theme/tokens/typography.json index b781daff612e3a..2bfec1acf6aa9c 100644 --- a/packages/theme/tokens/typography.json +++ b/packages/theme/tokens/typography.json @@ -62,7 +62,7 @@ "$description": "2X large font size" } }, - "lineHeight": { + "line-height": { "$type": "dimension", "x-small": { "$value": { "value": 16, "unit": "px" }, From fccf0201144c6a7b075e7a83be421ed4939685fa Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 11 Dec 2025 14:35:35 -0500 Subject: [PATCH 02/12] Theme: Normalize typography tokens to use shorthand --- packages/theme/docs/ds-tokens.md | 34 +++++++++---------- .../theme/src/prebuilt/css/design-tokens.css | 24 ++++++------- .../theme/src/prebuilt/js/design-tokens.js | 24 ++++++------- packages/theme/tokens/typography.json | 24 ++++++------- 4 files changed, 53 insertions(+), 53 deletions(-) diff --git a/packages/theme/docs/ds-tokens.md b/packages/theme/docs/ds-tokens.md index 12a0fe9f4d9559..a5f2ca73312ad8 100644 --- a/packages/theme/docs/ds-tokens.md +++ b/packages/theme/docs/ds-tokens.md @@ -157,20 +157,20 @@ Do not edit directly. ### Typography -| Variable name | Description | -| ---------------------------------- | ----------------------- | -| `--wpds-font-family-heading` | Headings font family | -| `--wpds-font-family-body` | Body font family | -| `--wpds-font-family-mono` | Monospace font family | -| `--wpds-font-size-x-small` | Extra small font size | -| `--wpds-font-size-small` | Small font size | -| `--wpds-font-size-medium` | Medium font size | -| `--wpds-font-size-large` | Large font size | -| `--wpds-font-size-x-large` | Extra large font size | -| `--wpds-font-size-2x-large` | 2X large font size | -| `--wpds-font-line-height-x-small` | Extra small line height | -| `--wpds-font-line-height-small` | Small line height | -| `--wpds-font-line-height-medium` | Medium line height | -| `--wpds-font-line-height-large` | Large line height | -| `--wpds-font-line-height-x-large` | Extra large line height | -| `--wpds-font-line-height-2x-large` | 2X large line height | +| Variable name | Description | +| ----------------------------- | ----------------------- | +| `--wpds-font-family-heading` | Headings font family | +| `--wpds-font-family-body` | Body font family | +| `--wpds-font-family-mono` | Monospace font family | +| `--wpds-font-size-xs` | Extra small font size | +| `--wpds-font-size-sm` | Small font size | +| `--wpds-font-size-md` | Medium font size | +| `--wpds-font-size-lg` | Large font size | +| `--wpds-font-size-xl` | Extra large font size | +| `--wpds-font-size-2xs` | 2X large font size | +| `--wpds-font-line-height-xs` | Extra small line height | +| `--wpds-font-line-height-sm` | Small line height | +| `--wpds-font-line-height-md` | Medium line height | +| `--wpds-font-line-height-lg` | Large line height | +| `--wpds-font-line-height-xl` | Extra large line height | +| `--wpds-font-line-height-2xs` | 2X large line height | diff --git a/packages/theme/src/prebuilt/css/design-tokens.css b/packages/theme/src/prebuilt/css/design-tokens.css index d63c02438976cd..c97b6c9c007780 100644 --- a/packages/theme/src/prebuilt/css/design-tokens.css +++ b/packages/theme/src/prebuilt/css/design-tokens.css @@ -140,18 +140,18 @@ --wpds-font-family-heading: -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; /* Headings font family */ --wpds-font-family-mono: 'Menlo', 'Consolas', monaco, monospace; /* Monospace font family */ - --wpds-font-line-height-2x-large: 40px; /* 2X large line height */ - --wpds-font-line-height-large: 28px; /* Large line height */ - --wpds-font-line-height-medium: 24px; /* Medium line height */ - --wpds-font-line-height-small: 20px; /* Small line height */ - --wpds-font-line-height-x-large: 32px; /* Extra large line height */ - --wpds-font-line-height-x-small: 16px; /* Extra small line height */ - --wpds-font-size-2x-large: 32px; /* 2X large font size */ - --wpds-font-size-large: 15px; /* Large font size */ - --wpds-font-size-medium: 13px; /* Medium font size */ - --wpds-font-size-small: 12px; /* Small font size */ - --wpds-font-size-x-large: 20px; /* Extra large font size */ - --wpds-font-size-x-small: 11px; /* Extra small font size */ + --wpds-font-line-height-2xs: 40px; /* 2X large line height */ + --wpds-font-line-height-lg: 28px; /* Large line height */ + --wpds-font-line-height-md: 24px; /* Medium line height */ + --wpds-font-line-height-sm: 20px; /* Small line height */ + --wpds-font-line-height-xl: 32px; /* Extra large line height */ + --wpds-font-line-height-xs: 16px; /* Extra small line height */ + --wpds-font-size-2xs: 32px; /* 2X large font size */ + --wpds-font-size-lg: 15px; /* Large font size */ + --wpds-font-size-md: 13px; /* Medium font size */ + --wpds-font-size-sm: 12px; /* Small font size */ + --wpds-font-size-xl: 20px; /* Extra large font size */ + --wpds-font-size-xs: 11px; /* Extra small font size */ } [data-wpds-theme-provider-id][data-wpds-density='default'] { diff --git a/packages/theme/src/prebuilt/js/design-tokens.js b/packages/theme/src/prebuilt/js/design-tokens.js index 434a0aaff94a0f..eb70980ea75176 100644 --- a/packages/theme/src/prebuilt/js/design-tokens.js +++ b/packages/theme/src/prebuilt/js/design-tokens.js @@ -135,16 +135,16 @@ export default [ '--wpds-font-family-heading', '--wpds-font-family-body', '--wpds-font-family-mono', - '--wpds-font-size-x-small', - '--wpds-font-size-small', - '--wpds-font-size-medium', - '--wpds-font-size-large', - '--wpds-font-size-x-large', - '--wpds-font-size-2x-large', - '--wpds-font-line-height-x-small', - '--wpds-font-line-height-small', - '--wpds-font-line-height-medium', - '--wpds-font-line-height-large', - '--wpds-font-line-height-x-large', - '--wpds-font-line-height-2x-large', + '--wpds-font-size-xs', + '--wpds-font-size-sm', + '--wpds-font-size-md', + '--wpds-font-size-lg', + '--wpds-font-size-xl', + '--wpds-font-size-2xs', + '--wpds-font-line-height-xs', + '--wpds-font-line-height-sm', + '--wpds-font-line-height-md', + '--wpds-font-line-height-lg', + '--wpds-font-line-height-xl', + '--wpds-font-line-height-2xs', ]; diff --git a/packages/theme/tokens/typography.json b/packages/theme/tokens/typography.json index 2bfec1acf6aa9c..ac445f7d5e93a0 100644 --- a/packages/theme/tokens/typography.json +++ b/packages/theme/tokens/typography.json @@ -37,54 +37,54 @@ }, "size": { "$type": "dimension", - "x-small": { + "xs": { "$value": { "value": 11, "unit": "px" }, "$description": "Extra small font size" }, - "small": { + "sm": { "$value": { "value": 12, "unit": "px" }, "$description": "Small font size" }, - "medium": { + "md": { "$value": { "value": 13, "unit": "px" }, "$description": "Medium font size" }, - "large": { + "lg": { "$value": { "value": 15, "unit": "px" }, "$description": "Large font size" }, - "x-large": { + "xl": { "$value": { "value": 20, "unit": "px" }, "$description": "Extra large font size" }, - "2x-large": { + "2xs": { "$value": { "value": 32, "unit": "px" }, "$description": "2X large font size" } }, "line-height": { "$type": "dimension", - "x-small": { + "xs": { "$value": { "value": 16, "unit": "px" }, "$description": "Extra small line height" }, - "small": { + "sm": { "$value": { "value": 20, "unit": "px" }, "$description": "Small line height" }, - "medium": { + "md": { "$value": { "value": 24, "unit": "px" }, "$description": "Medium line height" }, - "large": { + "lg": { "$value": { "value": 28, "unit": "px" }, "$description": "Large line height" }, - "x-large": { + "xl": { "$value": { "value": 32, "unit": "px" }, "$description": "Extra large line height" }, - "2x-large": { + "2xs": { "$value": { "value": 40, "unit": "px" }, "$description": "2X large line height" } From 587e6c115a76581bb9450fb6bb79fcb5851fb581 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 11 Dec 2025 14:51:35 -0500 Subject: [PATCH 03/12] Theme: Add font weight typography tokens --- packages/theme/docs/ds-tokens.md | 36 ++++++++++--------- .../theme/src/prebuilt/css/design-tokens.css | 2 ++ .../theme/src/prebuilt/js/design-tokens.js | 2 ++ packages/theme/tokens/typography.json | 11 ++++++ 4 files changed, 34 insertions(+), 17 deletions(-) diff --git a/packages/theme/docs/ds-tokens.md b/packages/theme/docs/ds-tokens.md index a5f2ca73312ad8..a3a49bef02344e 100644 --- a/packages/theme/docs/ds-tokens.md +++ b/packages/theme/docs/ds-tokens.md @@ -157,20 +157,22 @@ Do not edit directly. ### Typography -| Variable name | Description | -| ----------------------------- | ----------------------- | -| `--wpds-font-family-heading` | Headings font family | -| `--wpds-font-family-body` | Body font family | -| `--wpds-font-family-mono` | Monospace font family | -| `--wpds-font-size-xs` | Extra small font size | -| `--wpds-font-size-sm` | Small font size | -| `--wpds-font-size-md` | Medium font size | -| `--wpds-font-size-lg` | Large font size | -| `--wpds-font-size-xl` | Extra large font size | -| `--wpds-font-size-2xs` | 2X large font size | -| `--wpds-font-line-height-xs` | Extra small line height | -| `--wpds-font-line-height-sm` | Small line height | -| `--wpds-font-line-height-md` | Medium line height | -| `--wpds-font-line-height-lg` | Large line height | -| `--wpds-font-line-height-xl` | Extra large line height | -| `--wpds-font-line-height-2xs` | 2X large line height | +| Variable name | Description | +| ----------------------------- | -------------------------------------------- | +| `--wpds-font-family-heading` | Headings font family | +| `--wpds-font-family-body` | Body font family | +| `--wpds-font-family-mono` | Monospace font family | +| `--wpds-font-size-xs` | Extra small font size | +| `--wpds-font-size-sm` | Small font size | +| `--wpds-font-size-md` | Medium font size | +| `--wpds-font-size-lg` | Large font size | +| `--wpds-font-size-xl` | Extra large font size | +| `--wpds-font-size-2xs` | 2X large font size | +| `--wpds-font-line-height-xs` | Extra small line height | +| `--wpds-font-line-height-sm` | Small line height | +| `--wpds-font-line-height-md` | Medium line height | +| `--wpds-font-line-height-lg` | Large line height | +| `--wpds-font-line-height-xl` | Extra large line height | +| `--wpds-font-line-height-2xs` | 2X large line height | +| `--wpds-font-weight-regular` | Regular font weight for body text | +| `--wpds-font-weight-medium` | Medium font weight for emphasis and headings | diff --git a/packages/theme/src/prebuilt/css/design-tokens.css b/packages/theme/src/prebuilt/css/design-tokens.css index c97b6c9c007780..55150419642382 100644 --- a/packages/theme/src/prebuilt/css/design-tokens.css +++ b/packages/theme/src/prebuilt/css/design-tokens.css @@ -152,6 +152,8 @@ --wpds-font-size-sm: 12px; /* Small font size */ --wpds-font-size-xl: 20px; /* Extra large font size */ --wpds-font-size-xs: 11px; /* Extra small font size */ + --wpds-font-weight-medium: 500; /* Medium font weight for emphasis and headings */ + --wpds-font-weight-regular: 400; /* Regular font weight for body text */ } [data-wpds-theme-provider-id][data-wpds-density='default'] { diff --git a/packages/theme/src/prebuilt/js/design-tokens.js b/packages/theme/src/prebuilt/js/design-tokens.js index eb70980ea75176..8f57bb30604b4b 100644 --- a/packages/theme/src/prebuilt/js/design-tokens.js +++ b/packages/theme/src/prebuilt/js/design-tokens.js @@ -147,4 +147,6 @@ export default [ '--wpds-font-line-height-lg', '--wpds-font-line-height-xl', '--wpds-font-line-height-2xs', + '--wpds-font-weight-regular', + '--wpds-font-weight-medium', ]; diff --git a/packages/theme/tokens/typography.json b/packages/theme/tokens/typography.json index ac445f7d5e93a0..67285fbb4d5f60 100644 --- a/packages/theme/tokens/typography.json +++ b/packages/theme/tokens/typography.json @@ -88,6 +88,17 @@ "$value": { "value": 40, "unit": "px" }, "$description": "2X large line height" } + }, + "weight": { + "$type": "fontWeight", + "regular": { + "$value": 400, + "$description": "Regular font weight for body text" + }, + "medium": { + "$value": 500, + "$description": "Medium font weight for emphasis and headings" + } } } } From 6ca8e3653de75fe4bf4f16d157aef506058663e2 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 11 Dec 2025 15:08:11 -0500 Subject: [PATCH 04/12] UI: Add Text component --- packages/ui/src/index.ts | 3 +- packages/ui/src/text/index.ts | 1 + packages/ui/src/text/stories/index.story.tsx | 52 +++++++++++++++++++ packages/ui/src/text/test/text.test.tsx | 53 ++++++++++++++++++++ packages/ui/src/text/text.tsx | 53 ++++++++++++++++++++ packages/ui/src/text/types.ts | 36 +++++++++++++ 6 files changed, 197 insertions(+), 1 deletion(-) create mode 100644 packages/ui/src/text/index.ts create mode 100644 packages/ui/src/text/stories/index.story.tsx create mode 100644 packages/ui/src/text/test/text.test.tsx create mode 100644 packages/ui/src/text/text.tsx create mode 100644 packages/ui/src/text/types.ts diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 8efe7bdc93fcaa..b067948bd7c29a 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,5 +1,6 @@ -export * from './box'; export * from './badge'; +export * from './box'; export * from './form/primitives'; export * from './stack'; +export * from './text'; export * from './visually-hidden'; diff --git a/packages/ui/src/text/index.ts b/packages/ui/src/text/index.ts new file mode 100644 index 00000000000000..8463c3cf8c7971 --- /dev/null +++ b/packages/ui/src/text/index.ts @@ -0,0 +1 @@ +export { Text } from './text'; diff --git a/packages/ui/src/text/stories/index.story.tsx b/packages/ui/src/text/stories/index.story.tsx new file mode 100644 index 00000000000000..c9301c362058bf --- /dev/null +++ b/packages/ui/src/text/stories/index.story.tsx @@ -0,0 +1,52 @@ +import { type Meta, type StoryObj } from '@storybook/react'; +import '@wordpress/theme/design-tokens.css'; +import { Text } from '../text'; + +const meta: Meta< typeof Text > = { + title: 'Design System/Components/Text', + component: Text, + tags: [ 'status-experimental' ], +}; +export default meta; + +type Story = StoryObj< typeof Text >; + +export const Default: Story = { + args: { + children: 'The quick brown fox jumps over the lazy dog', + fontFamily: 'body', + fontSize: 'md', + fontWeight: 'regular', + lineHeight: 'md', + }, +}; + +export const Heading: Story = { + args: { + children: 'Heading Text', + fontFamily: 'heading', + fontSize: 'xl', + fontWeight: 'medium', + lineHeight: 'lg', + }, +}; + +export const Body: Story = { + args: { + children: 'Body text with regular weight and medium size.', + fontFamily: 'body', + fontSize: 'md', + fontWeight: 'regular', + lineHeight: 'md', + }, +}; + +export const Monospace: Story = { + args: { + children: 'const code = "monospace";', + fontFamily: 'mono', + fontSize: 'sm', + fontWeight: 'regular', + lineHeight: 'sm', + }, +}; diff --git a/packages/ui/src/text/test/text.test.tsx b/packages/ui/src/text/test/text.test.tsx new file mode 100644 index 00000000000000..7709ce0f41a871 --- /dev/null +++ b/packages/ui/src/text/test/text.test.tsx @@ -0,0 +1,53 @@ +import { render, screen } from '@testing-library/react'; +import { createRef } from '@wordpress/element'; +import { Text } from '../text'; + +describe( 'Text', () => { + it( 'forwards ref', () => { + const ref = createRef< HTMLSpanElement >(); + + render( Content ); + + expect( ref.current ).toBeInstanceOf( HTMLSpanElement ); + } ); + + it( 'applies typography design tokens', () => { + render( + + Content + + ); + + const text = screen.getByText( 'Content' ); + + expect( text ).toHaveStyle( { + 'font-family': 'var(--wpds-font-family-body)', + 'font-size': 'var(--wpds-font-size-md)', + 'font-weight': 'var(--wpds-font-weight-medium)', + 'line-height': 'var(--wpds-font-line-height-lg)', + } ); + } ); + + it( 'merges custom styles', () => { + render( + + Content + + ); + + const text = screen.getByText( 'Content' ); + + expect( text ).toHaveStyle( { + 'font-weight': 'var(--wpds-font-weight-regular)', + 'text-decoration': 'underline', + } ); + } ); +} ); diff --git a/packages/ui/src/text/text.tsx b/packages/ui/src/text/text.tsx new file mode 100644 index 00000000000000..d27c0ff6248a49 --- /dev/null +++ b/packages/ui/src/text/text.tsx @@ -0,0 +1,53 @@ +import { forwardRef } from '@wordpress/element'; +import { type TextProps } from './types'; +import { renderElement } from '../utils/element'; + +/** + * Default render function that renders a span element with the given props. + * + * @param props The props to apply to the HTML element. + */ +const DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'span' > ) => ( + +); + +/** + * A typography primitive that provides an interface for applying design + * token-based typography styles including font family, size, weight, and line height. + */ +export const Text = forwardRef< HTMLSpanElement, TextProps >( function Text( + { + fontFamily, + fontSize, + fontWeight, + lineHeight, + render = DEFAULT_RENDER, + ...props + }, + ref +) { + const style: React.CSSProperties = { ...props.style }; + + if ( fontFamily ) { + style.fontFamily = `var(--wpds-font-family-${ fontFamily })`; + } + + if ( fontSize ) { + style.fontSize = `var(--wpds-font-size-${ fontSize })`; + } + + if ( fontWeight ) { + style.fontWeight = `var(--wpds-font-weight-${ fontWeight })`; + } + + if ( lineHeight ) { + style.lineHeight = `var(--wpds-font-line-height-${ lineHeight })`; + } + + return renderElement< 'span' >( { + render, + defaultTagName: 'span', + ref, + props: { ...props, style }, + } ); +} ); diff --git a/packages/ui/src/text/types.ts b/packages/ui/src/text/types.ts new file mode 100644 index 00000000000000..40a32beba038e1 --- /dev/null +++ b/packages/ui/src/text/types.ts @@ -0,0 +1,36 @@ +import { type ComponentProps } from '../utils/types'; + +type FontFamily = 'heading' | 'body' | 'mono'; + +type FontSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; + +type FontWeight = 'regular' | 'medium'; + +type LineHeight = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; + +export interface TextProps extends ComponentProps< 'span' > { + /** + * The font family design token. + */ + fontFamily?: FontFamily; + + /** + * The font size design token. + */ + fontSize?: FontSize; + + /** + * The font weight design token. + */ + fontWeight?: FontWeight; + + /** + * The line height design token. + */ + lineHeight?: LineHeight; + + /** + * The content to be rendered inside the component. + */ + children?: React.ReactNode; +} From 0ecdfb1b8ad7bc309e3c27a9def861041f6e2108 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 15 Dec 2025 11:07:06 -0500 Subject: [PATCH 05/12] Fix misnamed token for 2xl line height Co-Authored-By: Lena Morita <555336+mirka@users.noreply.github.com> --- packages/theme/docs/ds-tokens.md | 2 +- packages/theme/src/prebuilt/css/design-tokens.css | 2 +- packages/theme/src/prebuilt/js/design-tokens.js | 2 +- packages/theme/tokens/typography.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/theme/docs/ds-tokens.md b/packages/theme/docs/ds-tokens.md index a3a49bef02344e..9817bb7b04f8d2 100644 --- a/packages/theme/docs/ds-tokens.md +++ b/packages/theme/docs/ds-tokens.md @@ -173,6 +173,6 @@ Do not edit directly. | `--wpds-font-line-height-md` | Medium line height | | `--wpds-font-line-height-lg` | Large line height | | `--wpds-font-line-height-xl` | Extra large line height | -| `--wpds-font-line-height-2xs` | 2X large line height | +| `--wpds-font-line-height-2xl` | 2X large line height | | `--wpds-font-weight-regular` | Regular font weight for body text | | `--wpds-font-weight-medium` | Medium font weight for emphasis and headings | diff --git a/packages/theme/src/prebuilt/css/design-tokens.css b/packages/theme/src/prebuilt/css/design-tokens.css index 55150419642382..349dcf7e35db80 100644 --- a/packages/theme/src/prebuilt/css/design-tokens.css +++ b/packages/theme/src/prebuilt/css/design-tokens.css @@ -140,7 +140,7 @@ --wpds-font-family-heading: -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; /* Headings font family */ --wpds-font-family-mono: 'Menlo', 'Consolas', monaco, monospace; /* Monospace font family */ - --wpds-font-line-height-2xs: 40px; /* 2X large line height */ + --wpds-font-line-height-2xl: 40px; /* 2X large line height */ --wpds-font-line-height-lg: 28px; /* Large line height */ --wpds-font-line-height-md: 24px; /* Medium line height */ --wpds-font-line-height-sm: 20px; /* Small line height */ diff --git a/packages/theme/src/prebuilt/js/design-tokens.js b/packages/theme/src/prebuilt/js/design-tokens.js index 8f57bb30604b4b..2d2964e110f82c 100644 --- a/packages/theme/src/prebuilt/js/design-tokens.js +++ b/packages/theme/src/prebuilt/js/design-tokens.js @@ -146,7 +146,7 @@ export default [ '--wpds-font-line-height-md', '--wpds-font-line-height-lg', '--wpds-font-line-height-xl', - '--wpds-font-line-height-2xs', + '--wpds-font-line-height-2xl', '--wpds-font-weight-regular', '--wpds-font-weight-medium', ]; diff --git a/packages/theme/tokens/typography.json b/packages/theme/tokens/typography.json index 67285fbb4d5f60..0a822d983e3596 100644 --- a/packages/theme/tokens/typography.json +++ b/packages/theme/tokens/typography.json @@ -84,7 +84,7 @@ "$value": { "value": 32, "unit": "px" }, "$description": "Extra large line height" }, - "2xs": { + "2xl": { "$value": { "value": 40, "unit": "px" }, "$description": "2X large line height" } From ad420d8c1d787e8bf6f6faee6b572eccaea67f8c Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 15 Dec 2025 11:38:09 -0500 Subject: [PATCH 06/12] Add support for configurable color --- packages/ui/src/text/stories/index.story.tsx | 48 ++++++++++++++++++++ packages/ui/src/text/test/text.test.tsx | 24 ++++++++++ packages/ui/src/text/text.tsx | 8 +++- packages/ui/src/text/types.ts | 43 ++++++++++++++++++ 4 files changed, 122 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/text/stories/index.story.tsx b/packages/ui/src/text/stories/index.story.tsx index c9301c362058bf..b047606efa5d7f 100644 --- a/packages/ui/src/text/stories/index.story.tsx +++ b/packages/ui/src/text/stories/index.story.tsx @@ -1,6 +1,7 @@ import { type Meta, type StoryObj } from '@storybook/react'; import '@wordpress/theme/design-tokens.css'; import { Text } from '../text'; +import { Stack } from '../../stack'; const meta: Meta< typeof Text > = { title: 'Design System/Components/Text', @@ -50,3 +51,50 @@ export const Monospace: Story = { lineHeight: 'sm', }, }; + +export const WithColor: Story = { + args: { + children: 'Text with error color', + color: 'error', + fontFamily: 'body', + fontSize: 'md', + fontWeight: 'regular', + lineHeight: 'md', + }, +}; + +export const ColorVariations: Story = { + render: () => ( + + neutral + neutral-weak + neutral-active + neutral-disabled + neutral-strong + neutral-strong-active + neutral-strong-disabled + neutral-weak-disabled + brand + brand-active + brand-disabled + brand-strong + brand-strong-active + brand-strong-disabled + success + success-weak + info + info-weak + warning + warning-weak + caution + caution-weak + error + error-weak + error-active + error-disabled + error-strong + error-strong-active + error-strong-disabled + + ), +}; diff --git a/packages/ui/src/text/test/text.test.tsx b/packages/ui/src/text/test/text.test.tsx index 7709ce0f41a871..8ab98373e84bfa 100644 --- a/packages/ui/src/text/test/text.test.tsx +++ b/packages/ui/src/text/test/text.test.tsx @@ -33,6 +33,30 @@ describe( 'Text', () => { } ); } ); + it( 'applies color design tokens', () => { + render( Content ); + + const text = screen.getByText( 'Content' ); + + expect( text ).toHaveStyle( { + color: 'var(--wpds-color-fg-content-error, var(--wpds-color-fg-content-error))', + } ); + } ); + + it( 'applies color with custom target', () => { + render( + + Content + + ); + + const text = screen.getByText( 'Content' ); + + expect( text ).toHaveStyle( { + color: 'var(--wpds-color-fg-interactive-brand, var(--wpds-color-fg-content-brand))', + } ); + } ); + it( 'merges custom styles', () => { render( ) => ( /** * A typography primitive that provides an interface for applying design - * token-based typography styles including font family, size, weight, and line height. + * token-based typography styles. */ export const Text = forwardRef< HTMLSpanElement, TextProps >( function Text( { + target = 'content', + color, fontFamily, fontSize, fontWeight, @@ -28,6 +30,10 @@ export const Text = forwardRef< HTMLSpanElement, TextProps >( function Text( ) { const style: React.CSSProperties = { ...props.style }; + if ( color ) { + style.color = `var(--wpds-color-fg-${ target }-${ color }, var(--wpds-color-fg-content-${ color }))`; + } + if ( fontFamily ) { style.fontFamily = `var(--wpds-font-family-${ fontFamily })`; } diff --git a/packages/ui/src/text/types.ts b/packages/ui/src/text/types.ts index 40a32beba038e1..a4d3b0208b5f00 100644 --- a/packages/ui/src/text/types.ts +++ b/packages/ui/src/text/types.ts @@ -8,7 +8,50 @@ type FontWeight = 'regular' | 'medium'; type LineHeight = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; +type ForegroundColor = + | 'neutral' + | 'neutral-weak' + | 'neutral-active' + | 'neutral-disabled' + | 'neutral-strong' + | 'neutral-strong-active' + | 'neutral-strong-disabled' + | 'neutral-weak-disabled' + | 'brand' + | 'brand-active' + | 'brand-disabled' + | 'brand-strong' + | 'brand-strong-active' + | 'brand-strong-disabled' + | 'success' + | 'success-weak' + | 'info' + | 'info-weak' + | 'warning' + | 'warning-weak' + | 'caution' + | 'caution-weak' + | 'error' + | 'error-weak' + | 'error-active' + | 'error-disabled' + | 'error-strong' + | 'error-strong-active' + | 'error-strong-disabled'; + export interface TextProps extends ComponentProps< 'span' > { + /** + * The target rendering element design token grouping to use for the text. + * + * @default 'content' + */ + target?: string; + + /** + * The foreground design token for text color. + */ + color?: ForegroundColor; + /** * The font family design token. */ From 72d212dd7e1e2d1d3ab319df0f249319a60c33d9 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 18 Dec 2025 15:46:14 -0500 Subject: [PATCH 07/12] Theme: Generate TypeScript types for valid typography tokens --- packages/theme/src/prebuilt/ts/token-types.ts | 54 +++++++++++++++++++ packages/theme/terrazzo.config.ts | 31 +++++++++++ 2 files changed, 85 insertions(+) diff --git a/packages/theme/src/prebuilt/ts/token-types.ts b/packages/theme/src/prebuilt/ts/token-types.ts index c7888c44873364..4bfb93c8157575 100644 --- a/packages/theme/src/prebuilt/ts/token-types.ts +++ b/packages/theme/src/prebuilt/ts/token-types.ts @@ -123,3 +123,57 @@ export type InteractiveStrokeColor = | 'brand' | 'error' | 'error-strong'; + +/** + * Foreground color variants for text elements. + */ +export type ForegroundColor = + | 'neutral' + | 'neutral-weak' + | 'success' + | 'success-weak' + | 'info' + | 'info-weak' + | 'warning' + | 'warning-weak' + | 'caution' + | 'caution-weak' + | 'error' + | 'error-weak' + | 'neutral-active' + | 'neutral-disabled' + | 'neutral-strong' + | 'neutral-strong-active' + | 'neutral-strong-disabled' + | 'neutral-weak-disabled' + | 'brand' + | 'brand-active' + | 'brand-disabled' + | 'brand-strong' + | 'brand-strong-active' + | 'brand-strong-disabled' + | 'error-active' + | 'error-disabled' + | 'error-strong' + | 'error-strong-active' + | 'error-strong-disabled'; + +/** + * Font family variants. + */ +export type FontFamily = 'heading' | 'body' | 'mono'; + +/** + * Font size scale. + */ +export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xs'; + +/** + * Font weight variants. + */ +export type FontWeight = 'regular' | 'medium'; + +/** + * Line height scale. + */ +export type LineHeight = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; diff --git a/packages/theme/terrazzo.config.ts b/packages/theme/terrazzo.config.ts index b4d1ffb74cc492..c133c7bde78027 100644 --- a/packages/theme/terrazzo.config.ts +++ b/packages/theme/terrazzo.config.ts @@ -189,6 +189,37 @@ export default defineConfig( { }, ], }, + { + name: 'ForegroundColor', + description: 'Foreground color variants for text elements.', + patterns: [ + { + pattern: /^wpds-color\.fg\.[^.]+\.(.+)$/, + transform: ( variant ) => + variant.split( '.' ).join( '-' ), + }, + ], + }, + { + name: 'FontFamily', + description: 'Font family variants.', + patterns: [ /^wpds-font\.family\.([^.]+)$/ ], + }, + { + name: 'FontSize', + description: 'Font size scale.', + patterns: [ /^wpds-font\.size\.([^.]+)$/ ], + }, + { + name: 'FontWeight', + description: 'Font weight variants.', + patterns: [ /^wpds-font\.weight\.([^.]+)$/ ], + }, + { + name: 'LineHeight', + description: 'Line height scale.', + patterns: [ /^wpds-font\.line-height\.([^.]+)$/ ], + }, ], } ), pluginModeOverrides(), From eafa73f324e23f5cb7cb3bcaa68ad39383bfa9f8 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 18 Dec 2025 15:46:30 -0500 Subject: [PATCH 08/12] UI: Update Text component to consume generated token types --- packages/ui/src/text/types.ts | 49 +++++++---------------------------- 1 file changed, 9 insertions(+), 40 deletions(-) diff --git a/packages/ui/src/text/types.ts b/packages/ui/src/text/types.ts index a4d3b0208b5f00..9d69ee28821121 100644 --- a/packages/ui/src/text/types.ts +++ b/packages/ui/src/text/types.ts @@ -1,51 +1,20 @@ +import { + type Target, + type FontFamily, + type FontSize, + type FontWeight, + type LineHeight, + type ForegroundColor, +} from '@wordpress/theme'; import { type ComponentProps } from '../utils/types'; -type FontFamily = 'heading' | 'body' | 'mono'; - -type FontSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; - -type FontWeight = 'regular' | 'medium'; - -type LineHeight = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; - -type ForegroundColor = - | 'neutral' - | 'neutral-weak' - | 'neutral-active' - | 'neutral-disabled' - | 'neutral-strong' - | 'neutral-strong-active' - | 'neutral-strong-disabled' - | 'neutral-weak-disabled' - | 'brand' - | 'brand-active' - | 'brand-disabled' - | 'brand-strong' - | 'brand-strong-active' - | 'brand-strong-disabled' - | 'success' - | 'success-weak' - | 'info' - | 'info-weak' - | 'warning' - | 'warning-weak' - | 'caution' - | 'caution-weak' - | 'error' - | 'error-weak' - | 'error-active' - | 'error-disabled' - | 'error-strong' - | 'error-strong-active' - | 'error-strong-disabled'; - export interface TextProps extends ComponentProps< 'span' > { /** * The target rendering element design token grouping to use for the text. * * @default 'content' */ - target?: string; + target?: Target; /** * The foreground design token for text color. From b057f07981108dcdf1740e968b602cb9d7db5964 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 30 Dec 2025 12:06:07 -0500 Subject: [PATCH 09/12] Remove Text component --- packages/ui/src/index.ts | 1 - packages/ui/src/text/index.ts | 1 - packages/ui/src/text/stories/index.story.tsx | 100 ------------------- packages/ui/src/text/test/text.test.tsx | 77 -------------- packages/ui/src/text/text.tsx | 59 ----------- packages/ui/src/text/types.ts | 48 --------- 6 files changed, 286 deletions(-) delete mode 100644 packages/ui/src/text/index.ts delete mode 100644 packages/ui/src/text/stories/index.story.tsx delete mode 100644 packages/ui/src/text/test/text.test.tsx delete mode 100644 packages/ui/src/text/text.tsx delete mode 100644 packages/ui/src/text/types.ts diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index b067948bd7c29a..61e9eace29381f 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -2,5 +2,4 @@ export * from './badge'; export * from './box'; export * from './form/primitives'; export * from './stack'; -export * from './text'; export * from './visually-hidden'; diff --git a/packages/ui/src/text/index.ts b/packages/ui/src/text/index.ts deleted file mode 100644 index 8463c3cf8c7971..00000000000000 --- a/packages/ui/src/text/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Text } from './text'; diff --git a/packages/ui/src/text/stories/index.story.tsx b/packages/ui/src/text/stories/index.story.tsx deleted file mode 100644 index b047606efa5d7f..00000000000000 --- a/packages/ui/src/text/stories/index.story.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { type Meta, type StoryObj } from '@storybook/react'; -import '@wordpress/theme/design-tokens.css'; -import { Text } from '../text'; -import { Stack } from '../../stack'; - -const meta: Meta< typeof Text > = { - title: 'Design System/Components/Text', - component: Text, - tags: [ 'status-experimental' ], -}; -export default meta; - -type Story = StoryObj< typeof Text >; - -export const Default: Story = { - args: { - children: 'The quick brown fox jumps over the lazy dog', - fontFamily: 'body', - fontSize: 'md', - fontWeight: 'regular', - lineHeight: 'md', - }, -}; - -export const Heading: Story = { - args: { - children: 'Heading Text', - fontFamily: 'heading', - fontSize: 'xl', - fontWeight: 'medium', - lineHeight: 'lg', - }, -}; - -export const Body: Story = { - args: { - children: 'Body text with regular weight and medium size.', - fontFamily: 'body', - fontSize: 'md', - fontWeight: 'regular', - lineHeight: 'md', - }, -}; - -export const Monospace: Story = { - args: { - children: 'const code = "monospace";', - fontFamily: 'mono', - fontSize: 'sm', - fontWeight: 'regular', - lineHeight: 'sm', - }, -}; - -export const WithColor: Story = { - args: { - children: 'Text with error color', - color: 'error', - fontFamily: 'body', - fontSize: 'md', - fontWeight: 'regular', - lineHeight: 'md', - }, -}; - -export const ColorVariations: Story = { - render: () => ( - - neutral - neutral-weak - neutral-active - neutral-disabled - neutral-strong - neutral-strong-active - neutral-strong-disabled - neutral-weak-disabled - brand - brand-active - brand-disabled - brand-strong - brand-strong-active - brand-strong-disabled - success - success-weak - info - info-weak - warning - warning-weak - caution - caution-weak - error - error-weak - error-active - error-disabled - error-strong - error-strong-active - error-strong-disabled - - ), -}; diff --git a/packages/ui/src/text/test/text.test.tsx b/packages/ui/src/text/test/text.test.tsx deleted file mode 100644 index 8ab98373e84bfa..00000000000000 --- a/packages/ui/src/text/test/text.test.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import { createRef } from '@wordpress/element'; -import { Text } from '../text'; - -describe( 'Text', () => { - it( 'forwards ref', () => { - const ref = createRef< HTMLSpanElement >(); - - render( Content ); - - expect( ref.current ).toBeInstanceOf( HTMLSpanElement ); - } ); - - it( 'applies typography design tokens', () => { - render( - - Content - - ); - - const text = screen.getByText( 'Content' ); - - expect( text ).toHaveStyle( { - 'font-family': 'var(--wpds-font-family-body)', - 'font-size': 'var(--wpds-font-size-md)', - 'font-weight': 'var(--wpds-font-weight-medium)', - 'line-height': 'var(--wpds-font-line-height-lg)', - } ); - } ); - - it( 'applies color design tokens', () => { - render( Content ); - - const text = screen.getByText( 'Content' ); - - expect( text ).toHaveStyle( { - color: 'var(--wpds-color-fg-content-error, var(--wpds-color-fg-content-error))', - } ); - } ); - - it( 'applies color with custom target', () => { - render( - - Content - - ); - - const text = screen.getByText( 'Content' ); - - expect( text ).toHaveStyle( { - color: 'var(--wpds-color-fg-interactive-brand, var(--wpds-color-fg-content-brand))', - } ); - } ); - - it( 'merges custom styles', () => { - render( - - Content - - ); - - const text = screen.getByText( 'Content' ); - - expect( text ).toHaveStyle( { - 'font-weight': 'var(--wpds-font-weight-regular)', - 'text-decoration': 'underline', - } ); - } ); -} ); diff --git a/packages/ui/src/text/text.tsx b/packages/ui/src/text/text.tsx deleted file mode 100644 index 7e81d98e13b225..00000000000000 --- a/packages/ui/src/text/text.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { forwardRef } from '@wordpress/element'; -import { type TextProps } from './types'; -import { renderElement } from '../utils/element'; - -/** - * Default render function that renders a span element with the given props. - * - * @param props The props to apply to the HTML element. - */ -const DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'span' > ) => ( - -); - -/** - * A typography primitive that provides an interface for applying design - * token-based typography styles. - */ -export const Text = forwardRef< HTMLSpanElement, TextProps >( function Text( - { - target = 'content', - color, - fontFamily, - fontSize, - fontWeight, - lineHeight, - render = DEFAULT_RENDER, - ...props - }, - ref -) { - const style: React.CSSProperties = { ...props.style }; - - if ( color ) { - style.color = `var(--wpds-color-fg-${ target }-${ color }, var(--wpds-color-fg-content-${ color }))`; - } - - if ( fontFamily ) { - style.fontFamily = `var(--wpds-font-family-${ fontFamily })`; - } - - if ( fontSize ) { - style.fontSize = `var(--wpds-font-size-${ fontSize })`; - } - - if ( fontWeight ) { - style.fontWeight = `var(--wpds-font-weight-${ fontWeight })`; - } - - if ( lineHeight ) { - style.lineHeight = `var(--wpds-font-line-height-${ lineHeight })`; - } - - return renderElement< 'span' >( { - render, - defaultTagName: 'span', - ref, - props: { ...props, style }, - } ); -} ); diff --git a/packages/ui/src/text/types.ts b/packages/ui/src/text/types.ts deleted file mode 100644 index 9d69ee28821121..00000000000000 --- a/packages/ui/src/text/types.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { - type Target, - type FontFamily, - type FontSize, - type FontWeight, - type LineHeight, - type ForegroundColor, -} from '@wordpress/theme'; -import { type ComponentProps } from '../utils/types'; - -export interface TextProps extends ComponentProps< 'span' > { - /** - * The target rendering element design token grouping to use for the text. - * - * @default 'content' - */ - target?: Target; - - /** - * The foreground design token for text color. - */ - color?: ForegroundColor; - - /** - * The font family design token. - */ - fontFamily?: FontFamily; - - /** - * The font size design token. - */ - fontSize?: FontSize; - - /** - * The font weight design token. - */ - fontWeight?: FontWeight; - - /** - * The line height design token. - */ - lineHeight?: LineHeight; - - /** - * The content to be rendered inside the component. - */ - children?: React.ReactNode; -} From 3f476b12005be084ccdb325e196e1af21a5e916d Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 30 Dec 2025 12:07:09 -0500 Subject: [PATCH 10/12] Fix misnamed 2xs font size --- packages/theme/docs/ds-tokens.md | 2 +- packages/theme/src/prebuilt/css/design-tokens.css | 2 +- packages/theme/src/prebuilt/js/design-tokens.js | 2 +- packages/theme/src/prebuilt/ts/token-types.ts | 2 +- packages/theme/tokens/typography.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/theme/docs/ds-tokens.md b/packages/theme/docs/ds-tokens.md index 9817bb7b04f8d2..99927d40d38781 100644 --- a/packages/theme/docs/ds-tokens.md +++ b/packages/theme/docs/ds-tokens.md @@ -167,7 +167,7 @@ Do not edit directly. | `--wpds-font-size-md` | Medium font size | | `--wpds-font-size-lg` | Large font size | | `--wpds-font-size-xl` | Extra large font size | -| `--wpds-font-size-2xs` | 2X large font size | +| `--wpds-font-size-2xl` | 2X large font size | | `--wpds-font-line-height-xs` | Extra small line height | | `--wpds-font-line-height-sm` | Small line height | | `--wpds-font-line-height-md` | Medium line height | diff --git a/packages/theme/src/prebuilt/css/design-tokens.css b/packages/theme/src/prebuilt/css/design-tokens.css index 349dcf7e35db80..e3394f029011bf 100644 --- a/packages/theme/src/prebuilt/css/design-tokens.css +++ b/packages/theme/src/prebuilt/css/design-tokens.css @@ -146,7 +146,7 @@ --wpds-font-line-height-sm: 20px; /* Small line height */ --wpds-font-line-height-xl: 32px; /* Extra large line height */ --wpds-font-line-height-xs: 16px; /* Extra small line height */ - --wpds-font-size-2xs: 32px; /* 2X large font size */ + --wpds-font-size-2xl: 32px; /* 2X large font size */ --wpds-font-size-lg: 15px; /* Large font size */ --wpds-font-size-md: 13px; /* Medium font size */ --wpds-font-size-sm: 12px; /* Small font size */ diff --git a/packages/theme/src/prebuilt/js/design-tokens.js b/packages/theme/src/prebuilt/js/design-tokens.js index 2d2964e110f82c..f0294c3ecbbf21 100644 --- a/packages/theme/src/prebuilt/js/design-tokens.js +++ b/packages/theme/src/prebuilt/js/design-tokens.js @@ -140,7 +140,7 @@ export default [ '--wpds-font-size-md', '--wpds-font-size-lg', '--wpds-font-size-xl', - '--wpds-font-size-2xs', + '--wpds-font-size-2xl', '--wpds-font-line-height-xs', '--wpds-font-line-height-sm', '--wpds-font-line-height-md', diff --git a/packages/theme/src/prebuilt/ts/token-types.ts b/packages/theme/src/prebuilt/ts/token-types.ts index 4bfb93c8157575..bf72210af4397e 100644 --- a/packages/theme/src/prebuilt/ts/token-types.ts +++ b/packages/theme/src/prebuilt/ts/token-types.ts @@ -166,7 +166,7 @@ export type FontFamily = 'heading' | 'body' | 'mono'; /** * Font size scale. */ -export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xs'; +export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; /** * Font weight variants. diff --git a/packages/theme/tokens/typography.json b/packages/theme/tokens/typography.json index 0a822d983e3596..831f6aac5cd105 100644 --- a/packages/theme/tokens/typography.json +++ b/packages/theme/tokens/typography.json @@ -57,7 +57,7 @@ "$value": { "value": 20, "unit": "px" }, "$description": "Extra large font size" }, - "2xs": { + "2xl": { "$value": { "value": 32, "unit": "px" }, "$description": "2X large font size" } From dfc81643448add9c15c41e9cac6cf91ee1b1ca3d Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 30 Dec 2025 12:56:34 -0500 Subject: [PATCH 11/12] Use 499 value for medium font weight See: https://github.com/WordPress/gutenberg/pull/73931/changes#r2611949330 --- packages/theme/src/prebuilt/css/design-tokens.css | 2 +- packages/theme/tokens/typography.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/prebuilt/css/design-tokens.css b/packages/theme/src/prebuilt/css/design-tokens.css index e3394f029011bf..38c13296fb14d7 100644 --- a/packages/theme/src/prebuilt/css/design-tokens.css +++ b/packages/theme/src/prebuilt/css/design-tokens.css @@ -152,7 +152,7 @@ --wpds-font-size-sm: 12px; /* Small font size */ --wpds-font-size-xl: 20px; /* Extra large font size */ --wpds-font-size-xs: 11px; /* Extra small font size */ - --wpds-font-weight-medium: 500; /* Medium font weight for emphasis and headings */ + --wpds-font-weight-medium: 499; /* Medium font weight for emphasis and headings */ --wpds-font-weight-regular: 400; /* Regular font weight for body text */ } diff --git a/packages/theme/tokens/typography.json b/packages/theme/tokens/typography.json index 831f6aac5cd105..7713e02a7b7232 100644 --- a/packages/theme/tokens/typography.json +++ b/packages/theme/tokens/typography.json @@ -96,7 +96,7 @@ "$description": "Regular font weight for body text" }, "medium": { - "$value": 500, + "$value": 499, "$description": "Medium font weight for emphasis and headings" } } From 6584a7f2f53d830f7bb013bb77d10def99b875e1 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 30 Dec 2025 13:13:45 -0500 Subject: [PATCH 12/12] Update existing usage of typography tokens --- packages/ui/src/badge/badge.tsx | 6 +++--- packages/ui/src/utils/css/field.module.css | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/badge/badge.tsx b/packages/ui/src/badge/badge.tsx index 9efdb392bd6f8f..81846b304dd90d 100644 --- a/packages/ui/src/badge/badge.tsx +++ b/packages/ui/src/badge/badge.tsx @@ -85,9 +85,9 @@ export const Badge = forwardRef< HTMLDivElement, BadgeProps >( function Badge( render={ render } style={ { fontFamily: 'var(--wpds-font-family-body)', - fontSize: 'var(--wpds-font-size-small)', - fontWeight: '400', - lineHeight: 'var(--wpds-font-line-height-x-small)', + fontSize: 'var(--wpds-font-size-sm)', + fontWeight: 'var(--wpds-font-weight-regular)', + lineHeight: 'var(--wpds-font-line-height-xs)', ...props.style, } } ref={ ref } diff --git a/packages/ui/src/utils/css/field.module.css b/packages/ui/src/utils/css/field.module.css index dd5c15f1f8142f..a9e566f8b24bd1 100644 --- a/packages/ui/src/utils/css/field.module.css +++ b/packages/ui/src/utils/css/field.module.css @@ -2,17 +2,17 @@ @layer wp-ui-utilities { .label { - --wp-ui-field-label-line-height: var(--wpds-font-line-height-x-small); + --wp-ui-field-label-line-height: var(--wpds-font-line-height-xs); font-family: var(--wpds-font-family-body); - font-size: var(--wpds-font-size-x-small); + font-size: var(--wpds-font-size-xs); line-height: var(--wp-ui-field-label-line-height); - font-weight: 499; /* TODO: Use variable? */ + font-weight: var(--wpds-font-weight-medium); text-transform: uppercase; color: var(--wpds-color-fg-content-neutral); &.is-plain { - font-size: var(--wpds-font-size-medium); + font-size: var(--wpds-font-size-md); text-transform: none; } } @@ -20,8 +20,8 @@ .description { margin: 0; font-family: var(--wpds-font-family-body); - font-size: var(--wpds-font-size-small); - line-height: var(--wpds-font-line-height-x-small); + font-size: var(--wpds-font-size-sm); + line-height: var(--wpds-font-line-height-xs); color: var(--wpds-color-fg-content-neutral-weak); } }