Skip to content

Commit 8fabbed

Browse files
LFDanLusnowystinger
LFDanLu
and
snowystinger
authored
docs: Style macro reference table refactor (#9329)
* move mapping and change capitalization * make values a bulleted list * restore pipe separation for some number only values * render color swatches for fill/etc and fix render of values for borderSpacing * add back font typography section and sort values alphabetically * move shorthands into related properties * double check shorthands mappings * add descriptsions * add more descriptions * more missing mdn links * fix blend mode screen description and add cursor mdn * fix missing flexShrink/etc properties and make number description only for sizing properties * refactor so shorthands are top level * forgot to remove code * move to new section * fix test-esm * undo type module * add missing base colors --------- Co-authored-by: Robert Snow <rsnow@adobe.com> Co-authored-by: Robert Snow <snowystinger@gmail.com>
1 parent e5bb07b commit 8fabbed

File tree

6 files changed

+1297
-288
lines changed

6 files changed

+1297
-288
lines changed

‎packages/@react-spectrum/s2/style/spectrum-theme.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -687,15 +687,19 @@ export const style = createTheme({
687687
containIntrinsicWidth: createSpectrumSizingProperty('containIntrinsicWidth', width),
688688
containIntrinsicHeight: createSpectrumSizingProperty('containIntrinsicHeight', height),
689689
minHeight: createSpectrumSizingProperty('minHeight', height),
690-
maxHeight: createSpectrumSizingProperty('maxHeight', {
691-
...height,
692-
none: 'none'
693-
}),
690+
maxHeight: createSpectrumSizingProperty('maxHeight', (() => {
691+
// auto is not a valid value for maxHeight
692+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
693+
const {auto, ...rest} = height;
694+
return {...rest, none: 'none'};
695+
})()),
694696
minWidth: createSpectrumSizingProperty('minWidth', width),
695-
maxWidth: createSpectrumSizingProperty('maxWidth', {
696-
...width,
697-
none: 'none'
698-
}),
697+
maxWidth: createSpectrumSizingProperty('maxWidth', (() => {
698+
// auto is not a valid value for maxWidth
699+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
700+
const {auto, ...rest} = width;
701+
return {...rest, none: 'none'};
702+
})()),
699703
borderStartWidth: new MappedProperty('borderInlineStartWidth', borderWidth),
700704
borderEndWidth: new MappedProperty('borderInlineEndWidth', borderWidth),
701705
borderTopWidth: borderWidth,

‎packages/dev/mcp/s2/scripts/build-data.mjs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function buildIllustrationNames() {
7777
}
7878

7979
async function loadAliases(modPath, exportName) {
80-
if (!fs.existsSync(modPath)) {return {};}
80+
if (!fs.existsSync(modPath)) {return {};}
8181
const mod = await import(pathToFileURL(modPath).href);
8282
return mod[exportName] ?? {};
8383
}
@@ -201,7 +201,6 @@ async function main() {
201201
for (const category of propertyCategories) {
202202
Object.assign(styleProperties, stylePropsMod.getPropertyDefinitions(category));
203203
}
204-
Object.assign(styleProperties, stylePropsMod.getShorthandDefinitions());
205204
writeJson(path.join(OUT_DIR, 'styleProperties.json'), styleProperties);
206205

207206
const require = createRequire(import.meta.url);

‎packages/dev/s2-docs/pages/s2/style-macro.mdx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {Layout} from '../../src/Layout';
22
import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2';
33
import {StyleMacroProperties} from '../../src/StyleMacroProperties';
4-
import {getPropertyDefinitions, getShorthandDefinitions} from '../../src/styleProperties';
4+
import {getPropertyDefinitions} from '../../src/styleProperties';
55
export default Layout;
66

7-
export const section = 'Components';
7+
export const section = 'Reference';
88
export const tags = ['style', 'macro', 'spectrum', 'custom', 'values', 'reference'];
99
export const description = 'Reference table for the style macro';
1010

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

2525
## Text
2626

27-
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.
27+
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.
2828
Note that `font` should be applied on a per element basis rather than globally so as to properly conform with Spectrum designs.
2929

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

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

55-
## Shorthands
56-
57-
Shorthands apply their provided value to commonly grouped properties.
58-
59-
<StyleMacroProperties properties={getShorthandDefinitions('shorthand')} />
60-
6155
## Conditions
6256

63-
<StyleMacroProperties properties={getPropertyDefinitions('conditions')} />
57+
<StyleMacroProperties properties={getPropertyDefinitions('conditions')} sort={false} />

‎packages/dev/s2-docs/src/S2Colors.tsx‎

Lines changed: 78 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export function SemanticColorsDisclosure() {
115115

116116
export function GlobalColorsDisclosure() {
117117
return (
118-
<Disclosure isQuiet styles={style({marginBottom: 16})}>
118+
<Disclosure isQuiet>
119119
<DisclosureTitle>Global colors</DisclosureTitle>
120120
<DisclosurePanel>
121121
<p>The following values are available across all color properties.</p>
@@ -145,13 +145,89 @@ export function GlobalColorsDisclosure() {
145145
);
146146
}
147147

148+
export function TransparentColorsDisclosure() {
149+
return (
150+
<Disclosure isQuiet>
151+
<DisclosureTitle>Transparent colors</DisclosureTitle>
152+
<DisclosurePanel>
153+
<p>These colors are useful for overlays or transparent effects.</p>
154+
<div className="sb-unstyled" style={{columnWidth: 150}}>
155+
<Color name="transparent" className={colorSwatch('transparent')} />
156+
<Color name="transparent-white-25" className={colorSwatch('transparent-white-25')} />
157+
<Color name="transparent-white-50" className={colorSwatch('transparent-white-50')} />
158+
<Color name="transparent-white-75" className={colorSwatch('transparent-white-75')} />
159+
<Color name="transparent-white-100" className={colorSwatch('transparent-white-100')} />
160+
<Color name="transparent-white-200" className={colorSwatch('transparent-white-200')} />
161+
<Color name="transparent-white-300" className={colorSwatch('transparent-white-300')} />
162+
<Color name="transparent-white-400" className={colorSwatch('transparent-white-400')} />
163+
<Color name="transparent-white-500" className={colorSwatch('transparent-white-500')} />
164+
<Color name="transparent-white-600" className={colorSwatch('transparent-white-600')} />
165+
<Color name="transparent-white-700" className={colorSwatch('transparent-white-700')} />
166+
<Color name="transparent-white-800" className={colorSwatch('transparent-white-800')} />
167+
<Color name="transparent-white-900" className={colorSwatch('transparent-white-900')} />
168+
<Color name="transparent-white-1000" className={colorSwatch('transparent-white-1000')} />
169+
<Color name="transparent-black-25" className={colorSwatch('transparent-black-25')} />
170+
<Color name="transparent-black-50" className={colorSwatch('transparent-black-50')} />
171+
<Color name="transparent-black-75" className={colorSwatch('transparent-black-75')} />
172+
<Color name="transparent-black-100" className={colorSwatch('transparent-black-100')} />
173+
<Color name="transparent-black-200" className={colorSwatch('transparent-black-200')} />
174+
<Color name="transparent-black-300" className={colorSwatch('transparent-black-300')} />
175+
<Color name="transparent-black-400" className={colorSwatch('transparent-black-400')} />
176+
<Color name="transparent-black-500" className={colorSwatch('transparent-black-500')} />
177+
<Color name="transparent-black-600" className={colorSwatch('transparent-black-600')} />
178+
<Color name="transparent-black-700" className={colorSwatch('transparent-black-700')} />
179+
<Color name="transparent-black-800" className={colorSwatch('transparent-black-800')} />
180+
<Color name="transparent-black-900" className={colorSwatch('transparent-black-900')} />
181+
<Color name="transparent-black-1000" className={colorSwatch('transparent-black-1000')} />
182+
<Color name="transparent-overlay-25" className={colorSwatch('transparent-overlay-25')} />
183+
<Color name="transparent-overlay-50" className={colorSwatch('transparent-overlay-50')} />
184+
<Color name="transparent-overlay-75" className={colorSwatch('transparent-overlay-75')} />
185+
<Color name="transparent-overlay-100" className={colorSwatch('transparent-overlay-100')} />
186+
<Color name="transparent-overlay-200" className={colorSwatch('transparent-overlay-200')} />
187+
<Color name="transparent-overlay-300" className={colorSwatch('transparent-overlay-300')} />
188+
<Color name="transparent-overlay-400" className={colorSwatch('transparent-overlay-400')} />
189+
<Color name="transparent-overlay-500" className={colorSwatch('transparent-overlay-500')} />
190+
<Color name="transparent-overlay-600" className={colorSwatch('transparent-overlay-600')} />
191+
<Color name="transparent-overlay-700" className={colorSwatch('transparent-overlay-700')} />
192+
<Color name="transparent-overlay-800" className={colorSwatch('transparent-overlay-800')} />
193+
<Color name="transparent-overlay-900" className={colorSwatch('transparent-overlay-900')} />
194+
<Color name="transparent-overlay-1000" className={colorSwatch('transparent-overlay-1000')} />
195+
</div>
196+
</DisclosurePanel>
197+
</Disclosure>
198+
);
199+
}
200+
201+
export function HCMColorsDisclosure() {
202+
return (
203+
<Disclosure isQuiet styles={style({marginBottom: 16})}>
204+
<DisclosureTitle>High contrast mode colors</DisclosureTitle>
205+
<DisclosurePanel>
206+
<p>These colors map to system colors when forced colors mode is active.</p>
207+
<ul className={style({marginStart: 24, marginTop: 8, display: 'flex', flexDirection: 'column', gap: 12, paddingStart: 0})}>
208+
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>Background</code></li>
209+
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>ButtonBorder</code></li>
210+
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>ButtonFace</code></li>
211+
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>ButtonText</code></li>
212+
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>Field</code></li>
213+
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>Highlight</code></li>
214+
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>HighlightText</code></li>
215+
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>GrayText</code></li>
216+
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>Mark</code></li>
217+
<li className={style({font: 'body'})}><code className={style({font: {default: 'code-xs', lg: 'code-sm'}})}>LinkText</code></li>
218+
</ul>
219+
</DisclosurePanel>
220+
</Disclosure>
221+
);
222+
}
223+
148224
function ColorScale({scale}) {
149225
return scale.map(([name, className]) => (
150226
<Color key={name} name={name} className={className} />
151227
));
152228
}
153229

154-
function Color({name, className}) {
230+
export function Color({name, className}) {
155231
return (
156232
<div className={style({display: 'flex', gap: 8, marginBottom: 4, font: 'ui', alignItems: 'center', breakInside: 'avoid'})}>
157233
<div className={typeof className === 'function' ? className({}) : className} />

0 commit comments

Comments
 (0)