Skip to content

Commit b0c0454

Browse files
devongovettdevongovett
authored
refactor: Theme updates (#8155)
* Remove columns for now, and reduce spacing scale * use rems for media queries * use px instead of rems for padding and absolute positioning * use rems for icon sizes and support size prop * use rems for checkbox and radio borders * more component-specific rem fixes * support percentages and viewport units by default * support arbitrary aspect ratios * support math functions and css-wide keywords without bracket syntax * update property data * fix test * icon colors * Remove runtime conditions from color properties in theme, use baseColor macro instead * Move control styles to shared macros * inherit doesn't need brackets anymore * update property data * sort properties by number of generated rules rather than absolute frequency of usage using the same value many time results in only one rule, so shouldn't be counted more than once * Add shorter mappings for some common custom properties * update snapshots * Fix color with opacity
1 parent b07a79d commit b0c0454

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+3282
-3107
lines changed

‎.storybook-s2/docs/Colors.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function Colors() {
99
<Disclosure isQuiet>
1010
<DisclosureTitle>Background colors</DisclosureTitle>
1111
<DisclosurePanel>
12-
<P>The <Code>backgroundColor</Code> 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. Some background colors also automatically update according to states such as <Code>isHovered</Code> (see <Link href="#runtime-conditions" target="_self">runtime conditions</Link> below).</P>
12+
<P>The <Code>backgroundColor</Code> 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>
1313
<div className="sb-unstyled" style={{columnWidth: 120}}>
1414
<Color name="base" className={colorSwatch('base')} />
1515
<Color name="layer-1" className={colorSwatch('layer-1')} />
@@ -74,7 +74,7 @@ export function Colors() {
7474
<Disclosure isQuiet>
7575
<DisclosureTitle>Text colors</DisclosureTitle>
7676
<DisclosurePanel>
77-
<P>The <Code>color</Code> 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. Some text colors also automatically update according to states such as <Code>isHovered</Code> (see <Link href="#runtime-conditions" target="_self">runtime conditions</Link> below).</P>
77+
<P>The <Code>color</Code> 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>
7878
<div className="sb-unstyled" style={{columnWidth: 120}}>
7979
<Color name="accent" className={colorSwatch('accent', 'color')} />
8080
<Color name="neutral" className={colorSwatch('neutral', 'color')} />

‎packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ let combinations = generatePowerset(states);
4141
const Template = (args) => {
4242
let {children, ...otherArgs} = args;
4343
return (
44-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
44+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
4545
{combinations.map(c => {
4646
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4747
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/Badge.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ let chunkSize = Math.ceil(combinations.length / 3);
3838

3939
const Template = ({combos, ...args}) => {
4040
return (
41-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
41+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
4242
{combos.map(c => {
4343
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4444
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ let combinations = generatePowerset(states);
5050

5151
const Template = () => {
5252
return (
53-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
53+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
5454
{combinations.map(c => {
5555
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
5656
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/Button.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ let combinations = generatePowerset(states);
4242
const Template = (args) => {
4343
let {children, ...otherArgs} = args;
4444
return (
45-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
45+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
4646
{combinations.map(c => {
4747
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4848
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const Horizontal = {
6565
render: Template,
6666
args: {
6767
combos: horizontalCombos,
68-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})
68+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})
6969
}
7070
};
7171

@@ -81,6 +81,6 @@ export const Vertical = {
8181
render: Template,
8282
args: {
8383
combos: verticalCombos,
84-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})
84+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})
8585
}
8686
};

‎packages/@react-spectrum/s2/chromatic/Card.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ export const Collection = (args: any) => (
211211
export const PreviewOverlay = (args: any) => (
212212
<Card {...args}>
213213
<CardPreview>
214-
<Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: '[1/1]', objectFit: 'cover', pointerEvents: 'none'})} />
214+
<Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: 'square', objectFit: 'cover', pointerEvents: 'none'})} />
215215
<Badge
216216
variant="positive"
217217
styles={style({

‎packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ let states = [
3939

4040
const Template = ({combos, ...args}) => {
4141
return (
42-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
42+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
4343
{combos.map(c => {
4444
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4545
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const Horizontal = {
6565
render: Template,
6666
args: {
6767
combos: chunks[0],
68-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
68+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
6969
orientation: 'horizontal'
7070
}
7171
};
@@ -106,7 +106,7 @@ export const Vertical = {
106106
render: Template,
107107
args: {
108108
combos: chunks[0],
109-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
109+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
110110
orientation: 'vertical'
111111
}
112112
};
@@ -157,7 +157,7 @@ export const ContextualHelpStories = {
157157
render: Template,
158158
args: {
159159
combos: contextualHelpChunks[0],
160-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
160+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
161161
orientation: 'horizontal',
162162
contextualHelp: (
163163
<ContextualHelp>
@@ -188,7 +188,7 @@ export const ContextualHelpVertical = {
188188
render: Template,
189189
args: {
190190
...ContextualHelpStories.args,
191-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
191+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
192192
orientation: 'vertical'
193193
}
194194
};

‎packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ let states = [
3636

3737
const Template = ({combos, ...args}) => {
3838
return (
39-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 450px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
39+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 450px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
4040
{combos.map(c => {
4141
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4242
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

0 commit comments

Comments
 (0)