Skip to content

docs: Refactor Style Macro reference table to disclosures #9201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+350 −261
Open

docs: Refactor Style Macro reference table to disclosures #9201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0489073
quick and dirty refactor
LFDanLu Nov 15, 2025
2179c22
refactor relative links so they are descriptions
LFDanLu Nov 17, 2025
fb78771
rought stab at color update
LFDanLu Nov 17, 2025
525165c
get rid of rendered values in favor of disclosures only for color/bac…
LFDanLu Nov 18, 2025
87d2059
fix lint
LFDanLu Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 0 additions & 19 deletions packages/dev/s2-docs/pages/s2/style-macro.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import {Layout} from '../../src/Layout';
import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2';
import {S2Colors} from '../../src/S2Colors';
import {S2Typography} from '../../src/S2Typography';
import {StyleMacroProperties} from '../../src/types';
import {getPropertyDefinitions, getShorthandDefinitions} from '../../src/styleProperties';
export default Layout;
Expand All @@ -17,23 +15,11 @@ The `style` macro supports a constrained set of values per property that conform
## Colors

All Spectrum 2 color tokens are available across color properties (e.g., `backgroundColor`, `color`, `borderColor`).
`baseColors` consists of the semantic and global colors listed below.

<S2Colors />

<StyleMacroProperties properties={getPropertyDefinitions('color')} />

## Dimensions

Spacing props like `margin` and `padding` accept values on a **4px grid**. These are specified in `px` and get converted to `rem`. In addition to numbers, these named options are available:

- `edge-to-text` – default spacing between the edge of a control and its text. Relative to control height.
- `pill` – default spacing between the edge of a pill-shaped control and its text. Relative to control height.
- `text-to-control` – default spacing between text and a control (e.g., label and input). Scales with font size.
- `text-to-visual` – default spacing between text and a visual element (e.g., icon). Scales with font size.

Size props like `width` and `height` accept arbitrary pixel values. Values are converted to `rem` and multiplied by 1.25x on touch devices to increase hit targets.

<StyleMacroProperties properties={getPropertyDefinitions('dimensions')} />

## Text
Expand All @@ -51,11 +37,6 @@ Note that `font` should be applied on a per element basis rather than globally s
</main>
```

Type scales include: UI, Body, Heading, Title, Detail, and Code. Each scale has a default and additional t-shirt sizes (e.g., `ui-sm`, `heading-2xl`, `code-xl`).

<S2Typography />


<StyleMacroProperties properties={getPropertyDefinitions('text')} />


Expand Down
267 changes: 141 additions & 126 deletions packages/dev/s2-docs/src/S2Colors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,150 @@
'use client';

import {colorSwatch, getColorScale} from './color.macro' with {type: 'macro'};
import {Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/s2';
import React from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

export function S2Colors() {
export function BackgroundColorsDisclosure() {
return (
<Disclosure isQuiet>
<DisclosureTitle>Background colors</DisclosureTitle>
<DisclosurePanel>
<p>The backgroundColor property supports the following values, in addition to the semantic and global colors. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.</p>
<div className="sb-unstyled" style={{columnWidth: 120}}>
<Color name="base" className={colorSwatch('base')} />
<Color name="layer-1" className={colorSwatch('layer-1')} />
<Color name="layer-2" className={colorSwatch('layer-2')} />
<Color name="pasteboard" className={colorSwatch('pasteboard')} />
<Color name="elevated" className={colorSwatch('elevated')} />
<Color name="accent" className={colorSwatch('accent')} />
<Color name="accent-subtle" className={colorSwatch('accent-subtle')} />
<Color name="neutral" className={colorSwatch('neutral')} />
<Color name="neutral-subdued" className={colorSwatch('neutral-subdued')} />
<Color name="neutral-subtle" className={colorSwatch('neutral-subtle')} />
<Color name="negative" className={colorSwatch('negative')} />
<Color name="negative-subtle" className={colorSwatch('negative-subtle')} />
<Color name="informative" className={colorSwatch('informative')} />
<Color name="informative-subtle" className={colorSwatch('informative-subtle')} />
<Color name="positive" className={colorSwatch('positive')} />
<Color name="positive-subtle" className={colorSwatch('positive-subtle')} />
<Color name="notice" className={colorSwatch('notice')} />
<Color name="notice-subtle" className={colorSwatch('notice-subtle')} />
<Color name="gray" className={colorSwatch('gray')} />
<Color name="gray-subtle" className={colorSwatch('gray-subtle')} />
<Color name="red" className={colorSwatch('red')} />
<Color name="red-subtle" className={colorSwatch('red-subtle')} />
<Color name="orange" className={colorSwatch('orange')} />
<Color name="orange-subtle" className={colorSwatch('orange-subtle')} />
<Color name="yellow" className={colorSwatch('yellow')} />
<Color name="yellow-subtle" className={colorSwatch('yellow-subtle')} />
<Color name="chartreuse" className={colorSwatch('chartreuse')} />
<Color name="chartreuse-subtle" className={colorSwatch('chartreuse-subtle')} />
<Color name="celery" className={colorSwatch('celery')} />
<Color name="celery-subtle" className={colorSwatch('celery-subtle')} />
<Color name="green" className={colorSwatch('green')} />
<Color name="green-subtle" className={colorSwatch('green-subtle')} />
<Color name="seafoam" className={colorSwatch('seafoam')} />
<Color name="seafoam-subtle" className={colorSwatch('seafoam-subtle')} />
<Color name="cyan" className={colorSwatch('cyan')} />
<Color name="cyan-subtle" className={colorSwatch('cyan-subtle')} />
<Color name="blue" className={colorSwatch('blue')} />
<Color name="blue-subtle" className={colorSwatch('blue-subtle')} />
<Color name="indigo" className={colorSwatch('indigo')} />
<Color name="indigo-subtle" className={colorSwatch('indigo-subtle')} />
<Color name="purple" className={colorSwatch('purple')} />
<Color name="purple-subtle" className={colorSwatch('purple-subtle')} />
<Color name="fuchsia" className={colorSwatch('fuchsia')} />
<Color name="fuchsia-subtle" className={colorSwatch('fuchsia-subtle')} />
<Color name="magenta" className={colorSwatch('magenta')} />
<Color name="magenta-subtle" className={colorSwatch('magenta-subtle')} />
<Color name="pink" className={colorSwatch('pink')} />
<Color name="pink-subtle" className={colorSwatch('pink-subtle')} />
<Color name="turquoise" className={colorSwatch('turquoise')} />
<Color name="turquoise-subtle" className={colorSwatch('turquoise-subtle')} />
<Color name="cinnamon" className={colorSwatch('cinnamon')} />
<Color name="cinnamon-subtle" className={colorSwatch('cinnamon-subtle')} />
<Color name="brown" className={colorSwatch('brown')} />
<Color name="brown-subtle" className={colorSwatch('brown-subtle')} />
<Color name="silver" className={colorSwatch('silver')} />
<Color name="silver-subtle" className={colorSwatch('silver-subtle')} />
<Color name="disabled" className={colorSwatch('disabled')} />
</div>
</DisclosurePanel>
</Disclosure>
);
}

export function TextColorsDisclosure() {
return (
<Disclosure isQuiet>
<DisclosureTitle>Text colors</DisclosureTitle>
<DisclosurePanel>
<p>The color property supports the following values, in addition to the semantic and global colors. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.</p>
<div className="sb-unstyled" style={{columnWidth: 120}}>
<Color name="accent" className={colorSwatch('accent', 'color')} />
<Color name="neutral" className={colorSwatch('neutral', 'color')} />
<Color name="neutral-subdued" className={colorSwatch('neutral-subdued', 'color')} />
<Color name="negative" className={colorSwatch('negative', 'color')} />
<Color name="disabled" className={colorSwatch('disabled', 'color')} />
<Color name="heading" className={colorSwatch('heading', 'color')} />
<Color name="title" className={colorSwatch('title', 'color')} />
<Color name="body" className={colorSwatch('body', 'color')} />
<Color name="detail" className={colorSwatch('detail', 'color')} />
<Color name="code" className={colorSwatch('code', 'color')} />
</div>
</DisclosurePanel>
</Disclosure>
);
}

export function SemanticColorsDisclosure() {
return (
<Disclosure isQuiet>
<DisclosureTitle>Semantic colors</DisclosureTitle>
<DisclosurePanel>
<p>The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.</p>
<div className="sb-unstyled" style={{columnWidth: 120}}>
<ColorScale scale={getColorScale('accent-color')} />
<ColorScale scale={getColorScale('informative-color')} />
<ColorScale scale={getColorScale('negative-color')} />
<ColorScale scale={getColorScale('notice-color')} />
<ColorScale scale={getColorScale('positive-color')} />
</div>
</DisclosurePanel>
</Disclosure>
);
}

export function GlobalColorsDisclosure() {
return (
<>
<Disclosure isQuiet>
<DisclosureTitle>Background colors</DisclosureTitle>
<DisclosurePanel>
<p>The backgroundColor property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.</p>
<div className="sb-unstyled" style={{columnWidth: 120}}>
<Color name="base" className={colorSwatch('base')} />
<Color name="layer-1" className={colorSwatch('layer-1')} />
<Color name="layer-2" className={colorSwatch('layer-2')} />
<Color name="pasteboard" className={colorSwatch('pasteboard')} />
<Color name="elevated" className={colorSwatch('elevated')} />
<Color name="accent" className={colorSwatch('accent')} />
<Color name="accent-subtle" className={colorSwatch('accent-subtle')} />
<Color name="neutral" className={colorSwatch('neutral')} />
<Color name="neutral-subdued" className={colorSwatch('neutral-subdued')} />
<Color name="neutral-subtle" className={colorSwatch('neutral-subtle')} />
<Color name="negative" className={colorSwatch('negative')} />
<Color name="negative-subtle" className={colorSwatch('negative-subtle')} />
<Color name="informative" className={colorSwatch('informative')} />
<Color name="informative-subtle" className={colorSwatch('informative-subtle')} />
<Color name="positive" className={colorSwatch('positive')} />
<Color name="positive-subtle" className={colorSwatch('positive-subtle')} />
<Color name="notice" className={colorSwatch('notice')} />
<Color name="notice-subtle" className={colorSwatch('notice-subtle')} />
<Color name="gray" className={colorSwatch('gray')} />
<Color name="gray-subtle" className={colorSwatch('gray-subtle')} />
<Color name="red" className={colorSwatch('red')} />
<Color name="red-subtle" className={colorSwatch('red-subtle')} />
<Color name="orange" className={colorSwatch('orange')} />
<Color name="orange-subtle" className={colorSwatch('orange-subtle')} />
<Color name="yellow" className={colorSwatch('yellow')} />
<Color name="yellow-subtle" className={colorSwatch('yellow-subtle')} />
<Color name="chartreuse" className={colorSwatch('chartreuse')} />
<Color name="chartreuse-subtle" className={colorSwatch('chartreuse-subtle')} />
<Color name="celery" className={colorSwatch('celery')} />
<Color name="celery-subtle" className={colorSwatch('celery-subtle')} />
<Color name="green" className={colorSwatch('green')} />
<Color name="green-subtle" className={colorSwatch('green-subtle')} />
<Color name="seafoam" className={colorSwatch('seafoam')} />
<Color name="seafoam-subtle" className={colorSwatch('seafoam-subtle')} />
<Color name="cyan" className={colorSwatch('cyan')} />
<Color name="cyan-subtle" className={colorSwatch('cyan-subtle')} />
<Color name="blue" className={colorSwatch('blue')} />
<Color name="blue-subtle" className={colorSwatch('blue-subtle')} />
<Color name="indigo" className={colorSwatch('indigo')} />
<Color name="indigo-subtle" className={colorSwatch('indigo-subtle')} />
<Color name="purple" className={colorSwatch('purple')} />
<Color name="purple-subtle" className={colorSwatch('purple-subtle')} />
<Color name="fuchsia" className={colorSwatch('fuchsia')} />
<Color name="fuchsia-subtle" className={colorSwatch('fuchsia-subtle')} />
<Color name="magenta" className={colorSwatch('magenta')} />
<Color name="magenta-subtle" className={colorSwatch('magenta-subtle')} />
<Color name="pink" className={colorSwatch('pink')} />
<Color name="pink-subtle" className={colorSwatch('pink-subtle')} />
<Color name="turquoise" className={colorSwatch('turquoise')} />
<Color name="turquoise-subtle" className={colorSwatch('turquoise-subtle')} />
<Color name="cinnamon" className={colorSwatch('cinnamon')} />
<Color name="cinnamon-subtle" className={colorSwatch('cinnamon-subtle')} />
<Color name="brown" className={colorSwatch('brown')} />
<Color name="brown-subtle" className={colorSwatch('brown-subtle')} />
<Color name="silver" className={colorSwatch('silver')} />
<Color name="silver-subtle" className={colorSwatch('silver-subtle')} />
<Color name="disabled" className={colorSwatch('disabled')} />
</div>
</DisclosurePanel>
</Disclosure>
<Disclosure isQuiet>
<DisclosureTitle>Text colors</DisclosureTitle>
<DisclosurePanel>
<p>The color property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.</p>
<div className="sb-unstyled" style={{columnWidth: 120}}>
<Color name="accent" className={colorSwatch('accent', 'color')} />
<Color name="neutral" className={colorSwatch('neutral', 'color')} />
<Color name="neutral-subdued" className={colorSwatch('neutral-subdued', 'color')} />
<Color name="negative" className={colorSwatch('negative', 'color')} />
<Color name="disabled" className={colorSwatch('disabled', 'color')} />
<Color name="heading" className={colorSwatch('heading', 'color')} />
<Color name="title" className={colorSwatch('title', 'color')} />
<Color name="body" className={colorSwatch('body', 'color')} />
<Color name="detail" className={colorSwatch('detail', 'color')} />
<Color name="code" className={colorSwatch('code', 'color')} />
</div>
</DisclosurePanel>
</Disclosure>
<Disclosure isQuiet>
<DisclosureTitle>Semantic colors</DisclosureTitle>
<DisclosurePanel>
<p>The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.</p>
<div className="sb-unstyled" style={{columnWidth: 120}}>
<ColorScale scale={getColorScale('accent-color')} />
<ColorScale scale={getColorScale('informative-color')} />
<ColorScale scale={getColorScale('negative-color')} />
<ColorScale scale={getColorScale('notice-color')} />
<ColorScale scale={getColorScale('positive-color')} />
</div>
</DisclosurePanel>
</Disclosure>
<Disclosure isQuiet styles={style({marginBottom: 16})}>
<DisclosureTitle>Global colors</DisclosureTitle>
<DisclosurePanel>
<p>The following values are available across all color properties.</p>
<div className="sb-unstyled" style={{columnWidth: 120}}>
<ColorScale scale={getColorScale('gray')} />
<ColorScale scale={getColorScale('blue')} />
<ColorScale scale={getColorScale('red')} />
<ColorScale scale={getColorScale('orange')} />
<ColorScale scale={getColorScale('yellow')} />
<ColorScale scale={getColorScale('chartreuse')} />
<ColorScale scale={getColorScale('celery')} />
<ColorScale scale={getColorScale('green')} />
<ColorScale scale={getColorScale('seafoam')} />
<ColorScale scale={getColorScale('cyan')} />
<ColorScale scale={getColorScale('indigo')} />
<ColorScale scale={getColorScale('purple')} />
<ColorScale scale={getColorScale('fuchsia')} />
<ColorScale scale={getColorScale('magenta')} />
<ColorScale scale={getColorScale('pink')} />
<ColorScale scale={getColorScale('turquoise')} />
<ColorScale scale={getColorScale('brown')} />
<ColorScale scale={getColorScale('silver')} />
<ColorScale scale={getColorScale('cinnamon')} />
</div>
</DisclosurePanel>
</Disclosure>
</>
<Disclosure isQuiet styles={style({marginBottom: 16})}>
<DisclosureTitle>Global colors</DisclosureTitle>
<DisclosurePanel>
<p>The following values are available across all color properties.</p>
<div className="sb-unstyled" style={{columnWidth: 120}}>
<ColorScale scale={getColorScale('gray')} />
<ColorScale scale={getColorScale('blue')} />
<ColorScale scale={getColorScale('red')} />
<ColorScale scale={getColorScale('orange')} />
<ColorScale scale={getColorScale('yellow')} />
<ColorScale scale={getColorScale('chartreuse')} />
<ColorScale scale={getColorScale('celery')} />
<ColorScale scale={getColorScale('green')} />
<ColorScale scale={getColorScale('seafoam')} />
<ColorScale scale={getColorScale('cyan')} />
<ColorScale scale={getColorScale('indigo')} />
<ColorScale scale={getColorScale('purple')} />
<ColorScale scale={getColorScale('fuchsia')} />
<ColorScale scale={getColorScale('magenta')} />
<ColorScale scale={getColorScale('pink')} />
<ColorScale scale={getColorScale('turquoise')} />
<ColorScale scale={getColorScale('brown')} />
<ColorScale scale={getColorScale('silver')} />
<ColorScale scale={getColorScale('cinnamon')} />
</div>
</DisclosurePanel>
</Disclosure>
);
}

Expand Down
2 changes: 2 additions & 0 deletions packages/dev/s2-docs/src/S2Typography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import React from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

Expand Down
Loading