Skip to content

refactor: Theme updates #8155

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
merged 20 commits into from
May 7, 2025
Merged

refactor: Theme updates #8155

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
204ccd3
Remove columns for now, and reduce spacing scale
devongovett Apr 25, 2025
feaf51f
use rems for media queries
devongovett Apr 28, 2025
1e9fc8f
use px instead of rems for padding and absolute positioning
devongovett Apr 28, 2025
de60840
use rems for icon sizes and support size prop
devongovett Apr 28, 2025
9993049
use rems for checkbox and radio borders
devongovett Apr 28, 2025
0af0f80
more component-specific rem fixes
devongovett Apr 28, 2025
eec2747
support percentages and viewport units by default
devongovett Apr 28, 2025
d99d48b
support arbitrary aspect ratios
devongovett Apr 28, 2025
16f4175
support math functions and css-wide keywords without bracket syntax
devongovett Apr 28, 2025
ba505c0
update property data
devongovett Apr 28, 2025
01f41d2
fix test
devongovett Apr 28, 2025
43f2e8a
icon colors
devongovett Apr 29, 2025
7459baf
Remove runtime conditions from color properties in theme, use baseCol…
devongovett Apr 30, 2025
fae4588
Move control styles to shared macros
devongovett May 1, 2025
b6d014c
inherit doesn't need brackets anymore
devongovett May 1, 2025
0dafb18
update property data
devongovett May 1, 2025
760512e
sort properties by number of generated rules rather than absolute fre…
devongovett May 1, 2025
8c20f38
Add shorter mappings for some common custom properties
devongovett May 2, 2025
4492242
update snapshots
devongovett May 6, 2025
1d73d88
Fix color with opacity
devongovett May 6, 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
53 changes: 15 additions & 38 deletions packages/@react-spectrum/s2/src/ActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import {AvatarContext} from './Avatar';
import {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };
import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';
import {centerBaseline} from './CenterBaseline';
import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };
import {createContext, forwardRef, ReactNode, useContext} from 'react';
import {FocusableRef, FocusableRefValue} from '@react-types/shared';
import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };
import {IconContext} from './Icon';
import {NotificationBadgeContext} from './NotificationBadge';
import {pressScale} from './pressScale';
Expand Down Expand Up @@ -61,13 +61,12 @@ export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'styl
// These styles handle both ActionButton and ToggleButton
const iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';
const textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';
const controlStyle = control({shape: 'default', icon: true});
export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({
...focusRing(),
...staticColor(),
display: 'flex',
alignItems: 'center',
...controlStyle,
justifyContent: 'center',
columnGap: 'text-to-visual',
flexShrink: {
default: 1,
isInGroup: 0
Expand All @@ -78,11 +77,8 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
flexBasis: {
isJustified: 0
},
font: 'control',
fontWeight: 'medium',
userSelect: 'none',
height: 'control',
minWidth: 'control',
transition: 'default',
forcedColorAdjust: 'none',
backgroundColor: {
Expand Down Expand Up @@ -153,68 +149,56 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
forcedColors: 'Highlight'
},
borderStyle: 'none',
paddingX: {
default: 'edge-to-text',
[iconOnly]: 0
},
paddingY: 0,
borderTopStartRadius: {
default: 'control',
default: controlStyle.borderRadius,
density: {
compact: {
default: 'none',
':first-child': 'control'
':first-child': controlStyle.borderRadius
}
}
},
borderTopEndRadius: {
default: 'control',
default: controlStyle.borderRadius,
density: {
compact: {
default: 'none',
orientation: {
horizontal: {
':last-child': 'control'
':last-child': controlStyle.borderRadius
},
vertical: {
':first-child': 'control'
':first-child': controlStyle.borderRadius
}
}
}
}
},
borderBottomStartRadius: {
default: 'control',
default: controlStyle.borderRadius,
density: {
compact: {
default: 'none',
orientation: {
horizontal: {
':first-child': 'control'
':first-child': controlStyle.borderRadius
},
vertical: {
':last-child': 'control'
':last-child': controlStyle.borderRadius
}
}
}
}
},
borderBottomEndRadius: {
default: 'control',
default: controlStyle.borderRadius,
density: {
compact: {
default: 'none',
':last-child': 'control'
':last-child': controlStyle.borderRadius
}
}
},
'--iconMargin': {
type: 'marginTop',
value: {
default: fontRelative(-2),
[iconOnly]: 0
}
},
zIndex: {
isFocusVisible: 2
},
Expand All @@ -226,21 +210,14 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
[textOnly]: 0
}
},
'--buttonPaddingX': {
type: 'paddingStart',
value: {
default: 'edge-to-text',
[iconOnly]: 0
}
},
'--iconWidth': {
type: 'width',
value: fontRelative(20)
},
'--badgePosition': {
type: 'width',
value: {
default: 'calc(var(--buttonPaddingX) + var(--iconWidth))',
default: 'calc(self(paddingStart) + var(--iconWidth))',
[iconOnly]: 'calc(self(minWidth)/2 + var(--iconWidth)/2)',
[textOnly]: 'full'
}
Expand Down Expand Up @@ -302,7 +279,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
<Provider
values={[
[SkeletonContext, null],
[TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
[TextContext, {styles: style({order: 1, truncate: true})}],
[IconContext, {
render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
Expand Down
31 changes: 2 additions & 29 deletions packages/@react-spectrum/s2/src/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@

import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
import {centerBaseline} from './CenterBaseline';
import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
import {ContextValue, Provider, TextContext as RACTextContext, SlotProps} from 'react-aria-components';
import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
import {filterDOMProps} from '@react-aria/utils';
import {fontRelative, lightDark, style} from '../style' with {type: 'macro'};
import {IconContext} from './Icon';
Expand Down Expand Up @@ -58,34 +58,8 @@ export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, Bad
export const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);

const badge = style<BadgeStyleProps>({
display: 'flex',
font: 'control',
...control({shape: 'default', wrap: true, icon: true}),
justifyContent: 'center',
alignItems: {
default: 'baseline',
':has([slot=icon]:only-child)': 'center'
},
borderRadius: 'control',
minHeight: 'control',
paddingX: {
default: 'edge-to-text',
':has([slot=icon]:only-child)': 0
},
'--labelPadding': {
type: 'paddingTop',
value: centerPadding()
},
aspectRatio: {
':has([slot=icon]:only-child)': 'square'
},
'--iconMargin': {
type: 'marginTop',
value: {
default: fontRelative(-2),
':has([slot=icon]:only-child)': 0
}
},
columnGap: 'text-to-visual',
color: {
fillStyle: {
bold: {
Expand Down Expand Up @@ -166,7 +140,6 @@ const badge = style<BadgeStyleProps>({
}
},
borderStyle: 'solid',
boxSizing: 'border-box',
borderWidth: 2,
borderColor: {
default: 'transparent',
Expand Down
8 changes: 4 additions & 4 deletions packages/@react-spectrum/s2/src/Breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ import {AriaBreadcrumbItemProps, useLocale} from 'react-aria';
import {baseColor, focusRing, size, style} from '../style' with { type: 'macro' };
import ChevronIcon from '../ui-icons/Chevron';
import {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';
import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
import {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';
import {forwardRefType} from './types';
import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
import {inertValue, useLayoutEffect} from '@react-aria/utils';
// @ts-ignore
import intlMessages from '../intl/*.json';
Expand Down Expand Up @@ -205,7 +205,7 @@ const breadcrumbStyles = style<BreadcrumbsStyleProps & {isMenu?: boolean, isCurr
display: 'flex',
alignItems: 'center',
justifyContent: 'start',
height: 'control',
height: controlSize(),
transition: 'default',
position: 'relative',
flexShrink: 0,
Expand Down Expand Up @@ -249,7 +249,7 @@ const chevronStyles = style({
const linkStyles = style<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolean}>({
...focusRing(),
borderRadius: 'sm',
font: 'control',
font: controlFont(),
color: {
default: baseColor('neutral-subdued'),
isDisabled: 'disabled',
Expand Down Expand Up @@ -279,7 +279,7 @@ const linkStyles = style<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolea
});

const currentStyles = style<{size: string}>({
font: 'control',
font: controlFont(),
fontWeight: 'bold'
});

Expand Down
36 changes: 2 additions & 34 deletions packages/@react-spectrum/s2/src/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
import {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};
import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
import {centerBaseline} from './CenterBaseline';
import {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
import {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';
import {FocusableRef, FocusableRefValue} from '@react-types/shared';
import {IconContext} from './Icon';
Expand Down Expand Up @@ -64,38 +64,17 @@ export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' |
export const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
export const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);

const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({
...focusRing(),
...staticColor(),
...control({shape: 'pill', wrap: true, icon: true}),
position: 'relative',
display: 'flex',
alignItems: {
default: 'baseline',
[iconOnly]: 'center'
},
justifyContent: 'center',
textAlign: 'start',
columnGap: 'text-to-visual',
font: 'control',
fontWeight: 'bold',
userSelect: 'none',
minHeight: 'control',
minWidth: {
[iconOnly]: 'control'
},
borderRadius: 'pill',
boxSizing: 'border-box',
width: 'fit',
textDecoration: 'none', // for link buttons
paddingX: {
default: 'pill',
[iconOnly]: 0
},
paddingY: 0,
aspectRatio: {
[iconOnly]: 'square'
},
transition: 'default',
borderStyle: 'solid',
borderWidth: {
Expand All @@ -108,17 +87,6 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
genai: 0
}
},
'--labelPadding': {
type: 'paddingTop',
value: centerPadding()
},
'--iconMargin': {
type: 'marginTop',
value: {
default: fontRelative(-2),
[iconOnly]: 0
}
},
borderColor: {
variant: {
primary: baseColor('gray-800'),
Expand Down
8 changes: 4 additions & 4 deletions packages/@react-spectrum/s2/src/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ import {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGr
import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
import {CenterBaseline} from './CenterBaseline';
import CheckmarkIcon from '../ui-icons/Checkmark';
import {controlBorderRadius, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
import DashIcon from '../ui-icons/Dash';
import {FocusableRef, FocusableRefValue} from '@react-types/shared';
import {FormContext, useFormProps} from './Form';
import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
import {pressScale} from './pressScale';
import {useFocusableRef} from '@react-spectrum/utils';
import {useSpectrumContextProps} from './useSpectrumContextProps';
Expand Down Expand Up @@ -49,7 +49,7 @@ const wrapper = style({
columnGap: 'text-to-control',
alignItems: 'baseline',
width: 'fit',
font: 'control',
font: controlFont(),
transition: 'colors',
color: {
default: baseColor('neutral'),
Expand All @@ -66,8 +66,8 @@ const wrapper = style({

export const box = style<RenderProps>({
...focusRing(),
size: 'control-sm',
borderRadius: 'control-sm',
...controlBorderRadius('sm'),
size: controlSize('sm'),
Comment on lines +69 to +70
Copy link
Member

Choose a reason for hiding this comment

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

a little confused so far on when it's a spreadable property vs an individual property, the name looks like they should both be one or the other

Copy link
Member Author

Choose a reason for hiding this comment

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

just the return type of the function. If it returns multiple properties it has to be spread.

flexShrink: 0,
display: 'flex',
alignItems: 'center',
Expand Down
3 changes: 2 additions & 1 deletion packages/@react-spectrum/s2/src/ClearButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
ButtonProps,
ButtonRenderProps
} from 'react-aria-components';
import {controlSize} from './style-utils' with {type: 'macro'};
import CrossIcon from '../ui-icons/Cross';
import {FocusableRef} from '@react-types/shared';
import {forwardRef} from 'react';
Expand Down Expand Up @@ -45,7 +46,7 @@ export const ClearButton = forwardRef(function ClearButton(props: ClearButtonPro
alignItems: 'center',
justifyContent: 'center',
height: 'full',
width: 'control',
width: controlSize(),
flexShrink: 0,
borderStyle: 'none',
outlineStyle: 'none',
Expand Down
4 changes: 2 additions & 2 deletions packages/@react-spectrum/s2/src/CloseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@

import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
import {Button, ButtonProps, ContextValue} from 'react-aria-components';
import {controlSize, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
import {createContext, forwardRef} from 'react';
import CrossIcon from '../ui-icons/Cross';
import {FocusableRef, FocusableRefValue} from '@react-types/shared';
import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
// @ts-ignore
import intlMessages from '../intl/*.json';
import {pressScale} from './pressScale';
Expand Down Expand Up @@ -45,7 +45,7 @@ const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boo
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
size: 'control',
size: controlSize(),
flexShrink: 0,
borderRadius: 'full',
padding: 0,
Expand Down
Loading