Skip to content

docs: Style macro reference table refactor #9329

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

Merged
LFDanLu merged 21 commits into from
Dec 15, 2025
+1,297 −288
Merged

docs: Style macro reference table refactor #9329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
2f1f62c
move mapping and change capitalization
LFDanLu Dec 10, 2025
f9138e6
make values a bulleted list
LFDanLu Dec 10, 2025
0cb0910
restore pipe separation for some number only values
LFDanLu Dec 11, 2025
4cdd710
render color swatches for fill/etc and fix render of values for borde…
LFDanLu Dec 11, 2025
d19ab50
add back font typography section and sort values alphabetically
LFDanLu Dec 11, 2025
30eff79
move shorthands into related properties
LFDanLu Dec 11, 2025
63e2268
double check shorthands mappings
LFDanLu Dec 11, 2025
0f6511e
add descriptsions
LFDanLu Dec 11, 2025
c494801
add more descriptions
LFDanLu Dec 11, 2025
39adf21
more missing mdn links
LFDanLu Dec 12, 2025
449cdc4
fix blend mode screen description and add cursor mdn
LFDanLu Dec 12, 2025
faa942e
Merge branch 'main' into style_macro_docs_update
LFDanLu Dec 12, 2025
69409c1
fix missing flexShrink/etc properties and make number description onl…
LFDanLu Dec 12, 2025
c18c971
refactor so shorthands are top level
LFDanLu Dec 12, 2025
bb0d3ab
forgot to remove code
LFDanLu Dec 12, 2025
f92183b
move to new section
LFDanLu Dec 12, 2025
95e657d
Merge branch 'main' into style_macro_docs_update
LFDanLu Dec 12, 2025
ff04133
Merge branch 'main' into style_macro_docs_update
snowystinger Dec 14, 2025
55c836a
fix test-esm
snowystinger Dec 14, 2025
9d248c1
undo type module
snowystinger Dec 14, 2025
9ba7307
add missing base colors
LFDanLu Dec 15, 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
20 changes: 12 additions & 8 deletions packages/@react-spectrum/s2/style/spectrum-theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -687,15 +687,19 @@ export const style = createTheme({
containIntrinsicWidth: createSpectrumSizingProperty('containIntrinsicWidth', width),
containIntrinsicHeight: createSpectrumSizingProperty('containIntrinsicHeight', height),
minHeight: createSpectrumSizingProperty('minHeight', height),
maxHeight: createSpectrumSizingProperty('maxHeight', {
...height,
none: 'none'
}),
maxHeight: createSpectrumSizingProperty('maxHeight', (() => {
// auto is not a valid value for maxHeight
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {auto, ...rest} = height;
return {...rest, none: 'none'};
})()),
Comment on lines +690 to +695
Copy link
Member Author

@LFDanLu LFDanLu Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note this change in the theme, should be pretty minor

minWidth: createSpectrumSizingProperty('minWidth', width),
maxWidth: createSpectrumSizingProperty('maxWidth', {
...width,
none: 'none'
}),
maxWidth: createSpectrumSizingProperty('maxWidth', (() => {
// auto is not a valid value for maxWidth
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {auto, ...rest} = width;
return {...rest, none: 'none'};
})()),
borderStartWidth: new MappedProperty('borderInlineStartWidth', borderWidth),
borderEndWidth: new MappedProperty('borderInlineEndWidth', borderWidth),
borderTopWidth: borderWidth,
Expand Down
3 changes: 1 addition & 2 deletions packages/dev/mcp/s2/scripts/build-data.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ function buildIllustrationNames() {
}

async function loadAliases(modPath, exportName) {
if (!fs.existsSync(modPath)) {return {};}
if (!fs.existsSync(modPath)) {return {};}
const mod = await import(pathToFileURL(modPath).href);
return mod[exportName] ?? {};
}
Expand Down Expand Up @@ -201,7 +201,6 @@ async function main() {
for (const category of propertyCategories) {
Object.assign(styleProperties, stylePropsMod.getPropertyDefinitions(category));
}
Object.assign(styleProperties, stylePropsMod.getShorthandDefinitions());
writeJson(path.join(OUT_DIR, 'styleProperties.json'), styleProperties);

const require = createRequire(import.meta.url);
Expand Down
14 changes: 4 additions & 10 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,10 +1,10 @@
import {Layout} from '../../src/Layout';
import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2';
import {StyleMacroProperties} from '../../src/StyleMacroProperties';
import {getPropertyDefinitions, getShorthandDefinitions} from '../../src/styleProperties';
import {getPropertyDefinitions} from '../../src/styleProperties';
export default Layout;

export const section = 'Components';
export const section = 'Reference';
Copy link
Member Author

@LFDanLu LFDanLu Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved this to its own section, feel free to weigh in

export const tags = ['style', 'macro', 'spectrum', 'custom', 'values', 'reference'];
export const description = 'Reference table for the style macro';

Expand All @@ -24,7 +24,7 @@ All Spectrum 2 color tokens are available across color properties (e.g., `backgr

## Text

Spectrum 2 typography can be applied via the `font` [shorthand](#shorthands), which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually.
Spectrum 2 typography can be applied via the `font` shorthand, which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually.
Note that `font` should be applied on a per element basis rather than globally so as to properly conform with Spectrum designs.

```tsx
Expand Down Expand Up @@ -52,12 +52,6 @@ Note that `font` should be applied on a per element basis rather than globally s

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

## Shorthands

Shorthands apply their provided value to commonly grouped properties.

<StyleMacroProperties properties={getShorthandDefinitions('shorthand')} />

## Conditions

<StyleMacroProperties properties={getPropertyDefinitions('conditions')} />
<StyleMacroProperties properties={getPropertyDefinitions('conditions')} sort={false} />
80 changes: 78 additions & 2 deletions packages/dev/s2-docs/src/S2Colors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export function SemanticColorsDisclosure() {

export function GlobalColorsDisclosure() {
return (
<Disclosure isQuiet styles={style({marginBottom: 16})}>
<Disclosure isQuiet>
<DisclosureTitle>Global colors</DisclosureTitle>
<DisclosurePanel>
<p>The following values are available across all color properties.</p>
Expand Down Expand Up @@ -145,13 +145,89 @@ export function GlobalColorsDisclosure() {
);
}

export function TransparentColorsDisclosure() {
return (
<Disclosure isQuiet>
<DisclosureTitle>Transparent colors</DisclosureTitle>
<DisclosurePanel>
<p>These colors are useful for overlays or transparent effects.</p>
<div className="sb-unstyled" style={{columnWidth: 150}}>
<Color name="transparent" className={colorSwatch('transparent')} />
<Color name="transparent-white-25" className={colorSwatch('transparent-white-25')} />
<Color name="transparent-white-50" className={colorSwatch('transparent-white-50')} />
<Color name="transparent-white-75" className={colorSwatch('transparent-white-75')} />
<Color name="transparent-white-100" className={colorSwatch('transparent-white-100')} />
<Color name="transparent-white-200" className={colorSwatch('transparent-white-200')} />
<Color name="transparent-white-300" className={colorSwatch('transparent-white-300')} />
<Color name="transparent-white-400" className={colorSwatch('transparent-white-400')} />
<Color name="transparent-white-500" className={colorSwatch('transparent-white-500')} />
<Color name="transparent-white-600" className={colorSwatch('transparent-white-600')} />
<Color name="transparent-white-700" className={colorSwatch('transparent-white-700')} />
<Color name="transparent-white-800" className={colorSwatch('transparent-white-800')} />
<Color name="transparent-white-900" className={colorSwatch('transparent-white-900')} />
<Color name="transparent-white-1000" className={colorSwatch('transparent-white-1000')} />
<Color name="transparent-black-25" className={colorSwatch('transparent-black-25')} />
<Color name="transparent-black-50" className={colorSwatch('transparent-black-50')} />
<Color name="transparent-black-75" className={colorSwatch('transparent-black-75')} />
<Color name="transparent-black-100" className={colorSwatch('transparent-black-100')} />
<Color name="transparent-black-200" className={colorSwatch('transparent-black-200')} />
<Color name="transparent-black-300" className={colorSwatch('transparent-black-300')} />
<Color name="transparent-black-400" className={colorSwatch('transparent-black-400')} />
<Color name="transparent-black-500" className={colorSwatch('transparent-black-500')} />
<Color name="transparent-black-600" className={colorSwatch('transparent-black-600')} />
<Color name="transparent-black-700" className={colorSwatch('transparent-black-700')} />
<Color name="transparent-black-800" className={colorSwatch('transparent-black-800')} />
<Color name="transparent-black-900" className={colorSwatch('transparent-black-900')} />
<Color name="transparent-black-1000" className={colorSwatch('transparent-black-1000')} />
<Color name="transparent-overlay-25" className={colorSwatch('transparent-overlay-25')} />
<Color name="transparent-overlay-50" className={colorSwatch('transparent-overlay-50')} />
<Color name="transparent-overlay-75" className={colorSwatch('transparent-overlay-75')} />
<Color name="transparent-overlay-100" className={colorSwatch('transparent-overlay-100')} />
<Color name="transparent-overlay-200" className={colorSwatch('transparent-overlay-200')} />
<Color name="transparent-overlay-300" className={colorSwatch('transparent-overlay-300')} />
<Color name="transparent-overlay-400" className={colorSwatch('transparent-overlay-400')} />
<Color name="transparent-overlay-500" className={colorSwatch('transparent-overlay-500')} />
<Color name="transparent-overlay-600" className={colorSwatch('transparent-overlay-600')} />
<Color name="transparent-overlay-700" className={colorSwatch('transparent-overlay-700')} />
<Color name="transparent-overlay-800" className={colorSwatch('transparent-overlay-800')} />
<Color name="transparent-overlay-900" className={colorSwatch('transparent-overlay-900')} />
<Color name="transparent-overlay-1000" className={colorSwatch('transparent-overlay-1000')} />
</div>
</DisclosurePanel>
</Disclosure>
);
}

export function HCMColorsDisclosure() {
return (
<Disclosure isQuiet styles={style({marginBottom: 16})}>
<DisclosureTitle>High contrast mode colors</DisclosureTitle>
<DisclosurePanel>
<p>These colors map to system colors when forced colors mode is active.</p>
<ul className={style({marginStart: 24, marginTop: 8, display: 'flex', flexDirection: 'column', gap: 12, paddingStart: 0})}>
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>Background</code></li>
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>ButtonBorder</code></li>
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>ButtonFace</code></li>
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>ButtonText</code></li>
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>Field</code></li>
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>Highlight</code></li>
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>HighlightText</code></li>
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>GrayText</code></li>
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>Mark</code></li>
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>LinkText</code></li>
</ul>
</DisclosurePanel>
</Disclosure>
);
}

function ColorScale({scale}) {
return scale.map(([name, className]) => (
<Color key={name} name={name} className={className} />
));
}

function Color({name, className}) {
export function Color({name, className}) {
return (
<div className={style({display: 'flex', gap: 8, marginBottom: 4, font: 'ui', alignItems: 'center', breakInside: 'avoid'})}>
<div className={typeof className === 'function' ? className({}) : className} />
Expand Down
Loading