diff --git a/packages/gamut/src/Anchor/index.tsx b/packages/gamut/src/Anchor/index.tsx index b68952ddb8..5ca819861a 100644 --- a/packages/gamut/src/Anchor/index.tsx +++ b/packages/gamut/src/Anchor/index.tsx @@ -17,7 +17,7 @@ const outlineFocusVisible = { content: "''", position: 'absolute', inset: -4, - borderRadius: '4px', + borderRadius: 'm', border: 2, borderColor: 'primary', opacity: 0, @@ -72,7 +72,7 @@ const anchorVariants = variant({ textDecoration: 'underline', [ButtonSelectors.FOCUS_VISIBLE]: { outline: 'currentColor solid 2px', - borderRadius: '1px', + borderRadius: 'sm', outlineOffset: '1.5px', textDecoration: 'underline', }, diff --git a/packages/gamut/src/Badge/index.tsx b/packages/gamut/src/Badge/index.tsx index a906ea8865..96f5e55337 100644 --- a/packages/gamut/src/Badge/index.tsx +++ b/packages/gamut/src/Badge/index.tsx @@ -10,7 +10,7 @@ const colorVariants = variant({ defaultVariant: 'primary', base: { alignItems: 'center', - borderRadius: '40px', + borderRadius: 'xl', fontFamily: 'accent', fontWeight: 400, display: 'flex', diff --git a/packages/gamut/src/Button/shared/styles.ts b/packages/gamut/src/Button/shared/styles.ts index 3398c1e9a3..c5cb38d375 100644 --- a/packages/gamut/src/Button/shared/styles.ts +++ b/packages/gamut/src/Button/shared/styles.ts @@ -48,7 +48,7 @@ export const buttonStyles = system.css({ justifyContent: 'center', alignItems: 'center', border: 2, - borderRadius: '4px', + borderRadius: 'm', borderColor: 'transparent', transition: transitionConcat( ['border-color', 'color', 'background-color', 'box-shadow'], @@ -59,7 +59,7 @@ export const buttonStyles = system.css({ content: '""', transition: transitionConcat(['opacity'], 'fast', 'ease-in'), position: 'absolute', - borderRadius: '4px', + borderRadius: 'm', bg: 'text', inset: -2, opacity: 0, @@ -82,7 +82,7 @@ export const buttonStyles = system.css({ content: '""', transition: transitionConcat(['opacity'], 'fast'), position: 'absolute', - borderRadius: '6px', + borderRadius: 'l', border: 2, inset: -5, opacity: 0, diff --git a/packages/gamut/src/Form/SelectDropdown/styles.ts b/packages/gamut/src/Form/SelectDropdown/styles.ts index d078533f9f..767a5b79af 100644 --- a/packages/gamut/src/Form/SelectDropdown/styles.ts +++ b/packages/gamut/src/Form/SelectDropdown/styles.ts @@ -9,7 +9,6 @@ import { StylesConfig } from 'react-select'; import { dismissSharedStyles, tagBaseStyles, - tagBorderRadius, tagLabelFontSize, tagLabelPadding, } from '../../Tag/styles'; @@ -174,13 +173,13 @@ export const getMemoizedStyles = ( ...tagBaseStyles, cursor: 'pointer', background: theme.colors.background, - borderRadius: '4px', + borderRadius: 'm', }), multiValueLabel: (provided) => ({ ...provided, fontSize: `${tagLabelFontSize}px`, color: theme.colors.text, - borderRadius: tagBorderRadius, + borderRadius: 'm', padding: `0 ${tagLabelPadding}px`, paddingLeft: `${tagLabelPadding}px`, // default label has an explicit rule for padding left so we need this to override it }), @@ -188,7 +187,7 @@ export const getMemoizedStyles = ( ...provided, ...dismissSharedStyles, cursor: 'pointer', - borderRadius: `0px ${tagBorderRadius} ${tagBorderRadius} 0px`, // only want border radius on top and bottom right + borderRadius: `0px 4px 4px 0px` as const, // only want border radius on top and bottom right padding: 0, // default remove has padding left and right that we don't need ':hover': { backgroundColor: theme.colors['background-hover'], diff --git a/packages/gamut/src/Form/styles/Radio-styles.ts b/packages/gamut/src/Form/styles/Radio-styles.ts index 725176d6af..950e05dfd2 100644 --- a/packages/gamut/src/Form/styles/Radio-styles.ts +++ b/packages/gamut/src/Form/styles/Radio-styles.ts @@ -25,7 +25,7 @@ const consistentLabelStyles = { width: 20, height: 20, minWidth: 20, - borderRadius: '100%', + borderRadius: 'full', mr: 8, } as const; diff --git a/packages/gamut/src/ProgressBar/index.tsx b/packages/gamut/src/ProgressBar/index.tsx index c15faf6b3a..ff696412ad 100644 --- a/packages/gamut/src/ProgressBar/index.tsx +++ b/packages/gamut/src/ProgressBar/index.tsx @@ -6,13 +6,6 @@ import * as React from 'react'; import { Box } from '../Box'; import { Text } from '../Typography'; -const borderRadius = { - small: '3px', - medium: '80px', - large: '9px', - xl: '18px', -}; - export type ProgressBarProps = { className?: string; @@ -52,12 +45,12 @@ const progressBarFlatVariants = variant({ prop: 'flat', variants: { 'flat-bottom': { - borderBottomRightRadius: 0, - borderBottomLeftRadius: 0, + borderBottomRightRadius: 'none', + borderBottomLeftRadius: 'none', }, 'flat-top': { - borderTopRightRadius: 0, - borderTopLeftRadius: 0, + borderTopRightRadius: 'none', + borderTopLeftRadius: 'none', }, default: {}, }, @@ -74,20 +67,20 @@ const progressBarSizeVariants = variant({ variants: { small: { height: '6px', - borderRadius: borderRadius.small, + borderRadius: 'sm', }, medium: { height: '8px', - borderRadius: borderRadius.medium, + borderRadius: 'm', }, large: { height: '18px', - borderRadius: borderRadius.large, + borderRadius: 'l', fontSize: 14, }, xl: { height: '36px', - borderRadius: borderRadius.xl, + borderRadius: 'xl', }, }, }); @@ -196,8 +189,8 @@ export const ProgressBar: React.FC = ({ boxShadow={ showBarBorder ? `0.5px 0 0 0.5px ${theme.colors.navy}` : 'none' } - borderRadiusTopRight={flat ? 0 : 'inherit'} - borderRadiusBottomRight={flat ? 0 : 'inherit'} + borderRadiusTopRight={flat ? 'none' : 'inherit'} + borderRadiusBottomRight={flat ? 'none' : 'inherit'} width={`${Math.max(minimumPercent, percent)}%`} data-testid="progress-bar-bar" > diff --git a/packages/gamut/src/Tag/elements.tsx b/packages/gamut/src/Tag/elements.tsx index 860c10de9d..ef71120109 100644 --- a/packages/gamut/src/Tag/elements.tsx +++ b/packages/gamut/src/Tag/elements.tsx @@ -10,7 +10,6 @@ import { colorVariants, dismissSharedStyles, iconButtonOverrides, - tagBorderRadius, tagWrapperStates, } from './styles'; import { BaseTagProps } from './types'; @@ -24,7 +23,7 @@ export const tagProps = variance.compose( export const Outline = styled(Box)( css({ // this is a bit of a hack as we don't have access to focus-visible from this component. if you are not properly dismissing your tags you may see this primary colored outline after clicking X, but otherwise you should never hit this behavior. - borderRadius: tagBorderRadius, + borderRadius: 'm', width: '100%', maxWidth: 'fit-content', '&:focus-within': { @@ -54,7 +53,7 @@ export const DismissButton = styled(IconButton)( ...iconButtonOverrides, color: 'background', border: 'none', - borderRadius: `0 ${tagBorderRadius} ${tagBorderRadius} 0`, + borderRadius: `0 ${theme.borderRadii.m} ${theme.borderRadii.m} 0` as any, width: 12, [hoverAndFocus]: { color: 'background', diff --git a/packages/gamut/src/Tag/styles.tsx b/packages/gamut/src/Tag/styles.tsx index 01646bbbaf..0f80f90b7f 100644 --- a/packages/gamut/src/Tag/styles.tsx +++ b/packages/gamut/src/Tag/styles.tsx @@ -4,11 +4,10 @@ import { ButtonSelectors } from '../ButtonBase/ButtonBase'; export const tagLabelPadding = 8; export const tagLabelFontSize = 14; -export const tagBorderRadius = '4px'; export const tagBaseStyles = { alignItems: 'center', - borderRadiusLeft: `${tagBorderRadius}`, + display: 'flex', height: '24px', justifyContent: 'center', @@ -21,6 +20,7 @@ export const colorVariants = variant({ base: { ...tagBaseStyles, color: 'background', + borderRadiusLeft: 'm', }, variants: { default: { @@ -34,7 +34,7 @@ export const colorVariants = variant({ export const tagWrapperStates = states({ readOnly: { - borderRadius: tagBorderRadius, + borderRadius: 'm', }, }); diff --git a/packages/gamut/src/Toggle/elements.tsx b/packages/gamut/src/Toggle/elements.tsx index d041ab43cb..d95a7f52f9 100644 --- a/packages/gamut/src/Toggle/elements.tsx +++ b/packages/gamut/src/Toggle/elements.tsx @@ -28,7 +28,7 @@ const ToggleTrackVariants = variant({ cursor: 'inherit', transition: 'background-color 0.2s ease', borderColor: 'primary', - borderRadius: '99rem', + borderRadius: 'full', position: 'relative', '&:after': { content: '""', diff --git a/packages/gamut/src/Toggle/index.tsx b/packages/gamut/src/Toggle/index.tsx index 2229375ecc..d722d43276 100644 --- a/packages/gamut/src/Toggle/index.tsx +++ b/packages/gamut/src/Toggle/index.tsx @@ -45,7 +45,7 @@ export const Toggle = ({