Skip to content

Commit 3a229f6

Browse files
LFDanLudevongovett
LFDanLu
and
devongovett
authored
docs: Refactor Style Macro reference table to disclosures (#9201)
* quick and dirty refactor * refactor relative links so they are descriptions * rought stab at color update * get rid of rendered values in favor of disclosures only for color/backgroundColor felt like it looks better because all the values map directly to the disclosure values * fix lint * dont render value description title twice if it is the only value --------- Co-authored-by: Devon Govett <[email protected]>
1 parent 692e782 commit 3a229f6

File tree

5 files changed

+356
-261
lines changed

5 files changed

+356
-261
lines changed

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

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import {Layout} from '../../src/Layout';
22
import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2';
3-
import {S2Colors} from '../../src/S2Colors';
4-
import {S2Typography} from '../../src/S2Typography';
53
import {StyleMacroProperties} from '../../src/types';
64
import {getPropertyDefinitions, getShorthandDefinitions} from '../../src/styleProperties';
75
export default Layout;
@@ -17,23 +15,11 @@ The `style` macro supports a constrained set of values per property that conform
1715
## Colors
1816

1917
All Spectrum 2 color tokens are available across color properties (e.g., `backgroundColor`, `color`, `borderColor`).
20-
`baseColors` consists of the semantic and global colors listed below.
21-
22-
<S2Colors />
2318

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

2621
## Dimensions
2722

28-
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:
29-
30-
- `edge-to-text` – default spacing between the edge of a control and its text. Relative to control height.
31-
- `pill` – default spacing between the edge of a pill-shaped control and its text. Relative to control height.
32-
- `text-to-control` – default spacing between text and a control (e.g., label and input). Scales with font size.
33-
- `text-to-visual` – default spacing between text and a visual element (e.g., icon). Scales with font size.
34-
35-
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.
36-
3723
<StyleMacroProperties properties={getPropertyDefinitions('dimensions')} />
3824

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

54-
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`).
55-
56-
<S2Typography />
57-
58-
5940
<StyleMacroProperties properties={getPropertyDefinitions('text')} />
6041

6142

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

Lines changed: 141 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,150 @@
1+
'use client';
2+
13
import {colorSwatch, getColorScale} from './color.macro' with {type: 'macro'};
24
import {Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/s2';
35
import React from 'react';
46
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
57

6-
export function S2Colors() {
8+
export function BackgroundColorsDisclosure() {
9+
return (
10+
<Disclosure isQuiet>
11+
<DisclosureTitle>Background colors</DisclosureTitle>
12+
<DisclosurePanel>
13+
<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>
14+
<div className="sb-unstyled" style={{columnWidth: 120}}>
15+
<Color name="base" className={colorSwatch('base')} />
16+
<Color name="layer-1" className={colorSwatch('layer-1')} />
17+
<Color name="layer-2" className={colorSwatch('layer-2')} />
18+
<Color name="pasteboard" className={colorSwatch('pasteboard')} />
19+
<Color name="elevated" className={colorSwatch('elevated')} />
20+
<Color name="accent" className={colorSwatch('accent')} />
21+
<Color name="accent-subtle" className={colorSwatch('accent-subtle')} />
22+
<Color name="neutral" className={colorSwatch('neutral')} />
23+
<Color name="neutral-subdued" className={colorSwatch('neutral-subdued')} />
24+
<Color name="neutral-subtle" className={colorSwatch('neutral-subtle')} />
25+
<Color name="negative" className={colorSwatch('negative')} />
26+
<Color name="negative-subtle" className={colorSwatch('negative-subtle')} />
27+
<Color name="informative" className={colorSwatch('informative')} />
28+
<Color name="informative-subtle" className={colorSwatch('informative-subtle')} />
29+
<Color name="positive" className={colorSwatch('positive')} />
30+
<Color name="positive-subtle" className={colorSwatch('positive-subtle')} />
31+
<Color name="notice" className={colorSwatch('notice')} />
32+
<Color name="notice-subtle" className={colorSwatch('notice-subtle')} />
33+
<Color name="gray" className={colorSwatch('gray')} />
34+
<Color name="gray-subtle" className={colorSwatch('gray-subtle')} />
35+
<Color name="red" className={colorSwatch('red')} />
36+
<Color name="red-subtle" className={colorSwatch('red-subtle')} />
37+
<Color name="orange" className={colorSwatch('orange')} />
38+
<Color name="orange-subtle" className={colorSwatch('orange-subtle')} />
39+
<Color name="yellow" className={colorSwatch('yellow')} />
40+
<Color name="yellow-subtle" className={colorSwatch('yellow-subtle')} />
41+
<Color name="chartreuse" className={colorSwatch('chartreuse')} />
42+
<Color name="chartreuse-subtle" className={colorSwatch('chartreuse-subtle')} />
43+
<Color name="celery" className={colorSwatch('celery')} />
44+
<Color name="celery-subtle" className={colorSwatch('celery-subtle')} />
45+
<Color name="green" className={colorSwatch('green')} />
46+
<Color name="green-subtle" className={colorSwatch('green-subtle')} />
47+
<Color name="seafoam" className={colorSwatch('seafoam')} />
48+
<Color name="seafoam-subtle" className={colorSwatch('seafoam-subtle')} />
49+
<Color name="cyan" className={colorSwatch('cyan')} />
50+
<Color name="cyan-subtle" className={colorSwatch('cyan-subtle')} />
51+
<Color name="blue" className={colorSwatch('blue')} />
52+
<Color name="blue-subtle" className={colorSwatch('blue-subtle')} />
53+
<Color name="indigo" className={colorSwatch('indigo')} />
54+
<Color name="indigo-subtle" className={colorSwatch('indigo-subtle')} />
55+
<Color name="purple" className={colorSwatch('purple')} />
56+
<Color name="purple-subtle" className={colorSwatch('purple-subtle')} />
57+
<Color name="fuchsia" className={colorSwatch('fuchsia')} />
58+
<Color name="fuchsia-subtle" className={colorSwatch('fuchsia-subtle')} />
59+
<Color name="magenta" className={colorSwatch('magenta')} />
60+
<Color name="magenta-subtle" className={colorSwatch('magenta-subtle')} />
61+
<Color name="pink" className={colorSwatch('pink')} />
62+
<Color name="pink-subtle" className={colorSwatch('pink-subtle')} />
63+
<Color name="turquoise" className={colorSwatch('turquoise')} />
64+
<Color name="turquoise-subtle" className={colorSwatch('turquoise-subtle')} />
65+
<Color name="cinnamon" className={colorSwatch('cinnamon')} />
66+
<Color name="cinnamon-subtle" className={colorSwatch('cinnamon-subtle')} />
67+
<Color name="brown" className={colorSwatch('brown')} />
68+
<Color name="brown-subtle" className={colorSwatch('brown-subtle')} />
69+
<Color name="silver" className={colorSwatch('silver')} />
70+
<Color name="silver-subtle" className={colorSwatch('silver-subtle')} />
71+
<Color name="disabled" className={colorSwatch('disabled')} />
72+
</div>
73+
</DisclosurePanel>
74+
</Disclosure>
75+
);
76+
}
77+
78+
export function TextColorsDisclosure() {
79+
return (
80+
<Disclosure isQuiet>
81+
<DisclosureTitle>Text colors</DisclosureTitle>
82+
<DisclosurePanel>
83+
<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>
84+
<div className="sb-unstyled" style={{columnWidth: 120}}>
85+
<Color name="accent" className={colorSwatch('accent', 'color')} />
86+
<Color name="neutral" className={colorSwatch('neutral', 'color')} />
87+
<Color name="neutral-subdued" className={colorSwatch('neutral-subdued', 'color')} />
88+
<Color name="negative" className={colorSwatch('negative', 'color')} />
89+
<Color name="disabled" className={colorSwatch('disabled', 'color')} />
90+
<Color name="heading" className={colorSwatch('heading', 'color')} />
91+
<Color name="title" className={colorSwatch('title', 'color')} />
92+
<Color name="body" className={colorSwatch('body', 'color')} />
93+
<Color name="detail" className={colorSwatch('detail', 'color')} />
94+
<Color name="code" className={colorSwatch('code', 'color')} />
95+
</div>
96+
</DisclosurePanel>
97+
</Disclosure>
98+
);
99+
}
100+
101+
export function SemanticColorsDisclosure() {
102+
return (
103+
<Disclosure isQuiet>
104+
<DisclosureTitle>Semantic colors</DisclosureTitle>
105+
<DisclosurePanel>
106+
<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>
107+
<div className="sb-unstyled" style={{columnWidth: 120}}>
108+
<ColorScale scale={getColorScale('accent-color')} />
109+
<ColorScale scale={getColorScale('informative-color')} />
110+
<ColorScale scale={getColorScale('negative-color')} />
111+
<ColorScale scale={getColorScale('notice-color')} />
112+
<ColorScale scale={getColorScale('positive-color')} />
113+
</div>
114+
</DisclosurePanel>
115+
</Disclosure>
116+
);
117+
}
118+
119+
export function GlobalColorsDisclosure() {
7120
return (
8-
<>
9-
<Disclosure isQuiet>
10-
<DisclosureTitle>Background colors</DisclosureTitle>
11-
<DisclosurePanel>
12-
<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>
13-
<div className="sb-unstyled" style={{columnWidth: 120}}>
14-
<Color name="base" className={colorSwatch('base')} />
15-
<Color name="layer-1" className={colorSwatch('layer-1')} />
16-
<Color name="layer-2" className={colorSwatch('layer-2')} />
17-
<Color name="pasteboard" className={colorSwatch('pasteboard')} />
18-
<Color name="elevated" className={colorSwatch('elevated')} />
19-
<Color name="accent" className={colorSwatch('accent')} />
20-
<Color name="accent-subtle" className={colorSwatch('accent-subtle')} />
21-
<Color name="neutral" className={colorSwatch('neutral')} />
22-
<Color name="neutral-subdued" className={colorSwatch('neutral-subdued')} />
23-
<Color name="neutral-subtle" className={colorSwatch('neutral-subtle')} />
24-
<Color name="negative" className={colorSwatch('negative')} />
25-
<Color name="negative-subtle" className={colorSwatch('negative-subtle')} />
26-
<Color name="informative" className={colorSwatch('informative')} />
27-
<Color name="informative-subtle" className={colorSwatch('informative-subtle')} />
28-
<Color name="positive" className={colorSwatch('positive')} />
29-
<Color name="positive-subtle" className={colorSwatch('positive-subtle')} />
30-
<Color name="notice" className={colorSwatch('notice')} />
31-
<Color name="notice-subtle" className={colorSwatch('notice-subtle')} />
32-
<Color name="gray" className={colorSwatch('gray')} />
33-
<Color name="gray-subtle" className={colorSwatch('gray-subtle')} />
34-
<Color name="red" className={colorSwatch('red')} />
35-
<Color name="red-subtle" className={colorSwatch('red-subtle')} />
36-
<Color name="orange" className={colorSwatch('orange')} />
37-
<Color name="orange-subtle" className={colorSwatch('orange-subtle')} />
38-
<Color name="yellow" className={colorSwatch('yellow')} />
39-
<Color name="yellow-subtle" className={colorSwatch('yellow-subtle')} />
40-
<Color name="chartreuse" className={colorSwatch('chartreuse')} />
41-
<Color name="chartreuse-subtle" className={colorSwatch('chartreuse-subtle')} />
42-
<Color name="celery" className={colorSwatch('celery')} />
43-
<Color name="celery-subtle" className={colorSwatch('celery-subtle')} />
44-
<Color name="green" className={colorSwatch('green')} />
45-
<Color name="green-subtle" className={colorSwatch('green-subtle')} />
46-
<Color name="seafoam" className={colorSwatch('seafoam')} />
47-
<Color name="seafoam-subtle" className={colorSwatch('seafoam-subtle')} />
48-
<Color name="cyan" className={colorSwatch('cyan')} />
49-
<Color name="cyan-subtle" className={colorSwatch('cyan-subtle')} />
50-
<Color name="blue" className={colorSwatch('blue')} />
51-
<Color name="blue-subtle" className={colorSwatch('blue-subtle')} />
52-
<Color name="indigo" className={colorSwatch('indigo')} />
53-
<Color name="indigo-subtle" className={colorSwatch('indigo-subtle')} />
54-
<Color name="purple" className={colorSwatch('purple')} />
55-
<Color name="purple-subtle" className={colorSwatch('purple-subtle')} />
56-
<Color name="fuchsia" className={colorSwatch('fuchsia')} />
57-
<Color name="fuchsia-subtle" className={colorSwatch('fuchsia-subtle')} />
58-
<Color name="magenta" className={colorSwatch('magenta')} />
59-
<Color name="magenta-subtle" className={colorSwatch('magenta-subtle')} />
60-
<Color name="pink" className={colorSwatch('pink')} />
61-
<Color name="pink-subtle" className={colorSwatch('pink-subtle')} />
62-
<Color name="turquoise" className={colorSwatch('turquoise')} />
63-
<Color name="turquoise-subtle" className={colorSwatch('turquoise-subtle')} />
64-
<Color name="cinnamon" className={colorSwatch('cinnamon')} />
65-
<Color name="cinnamon-subtle" className={colorSwatch('cinnamon-subtle')} />
66-
<Color name="brown" className={colorSwatch('brown')} />
67-
<Color name="brown-subtle" className={colorSwatch('brown-subtle')} />
68-
<Color name="silver" className={colorSwatch('silver')} />
69-
<Color name="silver-subtle" className={colorSwatch('silver-subtle')} />
70-
<Color name="disabled" className={colorSwatch('disabled')} />
71-
</div>
72-
</DisclosurePanel>
73-
</Disclosure>
74-
<Disclosure isQuiet>
75-
<DisclosureTitle>Text colors</DisclosureTitle>
76-
<DisclosurePanel>
77-
<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>
78-
<div className="sb-unstyled" style={{columnWidth: 120}}>
79-
<Color name="accent" className={colorSwatch('accent', 'color')} />
80-
<Color name="neutral" className={colorSwatch('neutral', 'color')} />
81-
<Color name="neutral-subdued" className={colorSwatch('neutral-subdued', 'color')} />
82-
<Color name="negative" className={colorSwatch('negative', 'color')} />
83-
<Color name="disabled" className={colorSwatch('disabled', 'color')} />
84-
<Color name="heading" className={colorSwatch('heading', 'color')} />
85-
<Color name="title" className={colorSwatch('title', 'color')} />
86-
<Color name="body" className={colorSwatch('body', 'color')} />
87-
<Color name="detail" className={colorSwatch('detail', 'color')} />
88-
<Color name="code" className={colorSwatch('code', 'color')} />
89-
</div>
90-
</DisclosurePanel>
91-
</Disclosure>
92-
<Disclosure isQuiet>
93-
<DisclosureTitle>Semantic colors</DisclosureTitle>
94-
<DisclosurePanel>
95-
<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>
96-
<div className="sb-unstyled" style={{columnWidth: 120}}>
97-
<ColorScale scale={getColorScale('accent-color')} />
98-
<ColorScale scale={getColorScale('informative-color')} />
99-
<ColorScale scale={getColorScale('negative-color')} />
100-
<ColorScale scale={getColorScale('notice-color')} />
101-
<ColorScale scale={getColorScale('positive-color')} />
102-
</div>
103-
</DisclosurePanel>
104-
</Disclosure>
105-
<Disclosure isQuiet styles={style({marginBottom: 16})}>
106-
<DisclosureTitle>Global colors</DisclosureTitle>
107-
<DisclosurePanel>
108-
<p>The following values are available across all color properties.</p>
109-
<div className="sb-unstyled" style={{columnWidth: 120}}>
110-
<ColorScale scale={getColorScale('gray')} />
111-
<ColorScale scale={getColorScale('blue')} />
112-
<ColorScale scale={getColorScale('red')} />
113-
<ColorScale scale={getColorScale('orange')} />
114-
<ColorScale scale={getColorScale('yellow')} />
115-
<ColorScale scale={getColorScale('chartreuse')} />
116-
<ColorScale scale={getColorScale('celery')} />
117-
<ColorScale scale={getColorScale('green')} />
118-
<ColorScale scale={getColorScale('seafoam')} />
119-
<ColorScale scale={getColorScale('cyan')} />
120-
<ColorScale scale={getColorScale('indigo')} />
121-
<ColorScale scale={getColorScale('purple')} />
122-
<ColorScale scale={getColorScale('fuchsia')} />
123-
<ColorScale scale={getColorScale('magenta')} />
124-
<ColorScale scale={getColorScale('pink')} />
125-
<ColorScale scale={getColorScale('turquoise')} />
126-
<ColorScale scale={getColorScale('brown')} />
127-
<ColorScale scale={getColorScale('silver')} />
128-
<ColorScale scale={getColorScale('cinnamon')} />
129-
</div>
130-
</DisclosurePanel>
131-
</Disclosure>
132-
</>
121+
<Disclosure isQuiet styles={style({marginBottom: 16})}>
122+
<DisclosureTitle>Global colors</DisclosureTitle>
123+
<DisclosurePanel>
124+
<p>The following values are available across all color properties.</p>
125+
<div className="sb-unstyled" style={{columnWidth: 120}}>
126+
<ColorScale scale={getColorScale('gray')} />
127+
<ColorScale scale={getColorScale('blue')} />
128+
<ColorScale scale={getColorScale('red')} />
129+
<ColorScale scale={getColorScale('orange')} />
130+
<ColorScale scale={getColorScale('yellow')} />
131+
<ColorScale scale={getColorScale('chartreuse')} />
132+
<ColorScale scale={getColorScale('celery')} />
133+
<ColorScale scale={getColorScale('green')} />
134+
<ColorScale scale={getColorScale('seafoam')} />
135+
<ColorScale scale={getColorScale('cyan')} />
136+
<ColorScale scale={getColorScale('indigo')} />
137+
<ColorScale scale={getColorScale('purple')} />
138+
<ColorScale scale={getColorScale('fuchsia')} />
139+
<ColorScale scale={getColorScale('magenta')} />
140+
<ColorScale scale={getColorScale('pink')} />
141+
<ColorScale scale={getColorScale('turquoise')} />
142+
<ColorScale scale={getColorScale('brown')} />
143+
<ColorScale scale={getColorScale('silver')} />
144+
<ColorScale scale={getColorScale('cinnamon')} />
145+
</div>
146+
</DisclosurePanel>
147+
</Disclosure>
133148
);
134149
}
135150

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import React from 'react';
24
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
35

0 commit comments

Comments
 (0)