From bf4ae6e4c3cb1e79e6550755731062781fc4ebb6 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Mon, 5 Aug 2024 22:25:47 -0400 Subject: [PATCH 1/4] finished atoms' border radius token update --- packages/gamut/src/Anchor/index.tsx | 4 ++-- packages/gamut/src/Badge/index.tsx | 2 +- packages/gamut/src/Button/shared/styles.ts | 6 +++--- .../gamut/src/Form/styles/Radio-styles.ts | 2 +- packages/gamut/src/ProgressBar/index.tsx | 19 ++++++------------- packages/gamut/src/Tag/elements.tsx | 5 ++--- packages/gamut/src/Tag/styles.tsx | 6 +++--- packages/gamut/src/Toggle/index.tsx | 2 +- 8 files changed, 19 insertions(+), 27 deletions(-) diff --git a/packages/gamut/src/Anchor/index.tsx b/packages/gamut/src/Anchor/index.tsx index b68952ddb8..d54762ceba 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: 'medium', 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: 'small', outlineOffset: '1.5px', textDecoration: 'underline', }, diff --git a/packages/gamut/src/Badge/index.tsx b/packages/gamut/src/Badge/index.tsx index a906ea8865..628d835126 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: 'xLarge', 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..1a508ffa73 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: 'medium', 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: 'medium', 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: 'large', border: 2, inset: -5, opacity: 0, 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..8f35a8db6a 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; @@ -74,20 +67,20 @@ const progressBarSizeVariants = variant({ variants: { small: { height: '6px', - borderRadius: borderRadius.small, + borderRadius: "small", }, medium: { height: '8px', - borderRadius: borderRadius.medium, + borderRadius: "medium", }, large: { height: '18px', - borderRadius: borderRadius.large, + borderRadius: "large", fontSize: 14, }, xl: { height: '36px', - borderRadius: borderRadius.xl, + borderRadius: "xLarge", }, }, }); @@ -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..cf3bc22937 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: 'medium', 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.medium} ${theme.borderRadii.medium} 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..771d609e5a 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: 'medium', }, variants: { default: { @@ -34,7 +34,7 @@ export const colorVariants = variant({ export const tagWrapperStates = states({ readOnly: { - borderRadius: tagBorderRadius, + borderRadius: 'medium', }, }); 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 = ({ Date: Mon, 5 Aug 2024 22:44:09 -0400 Subject: [PATCH 2/4] forgot toggle elements file --- .../gamut-styles/src/variables/borderRadii.ts | 2 +- packages/gamut-styles/src/variance/config.ts | 28 +++++++++++++------ packages/gamut/src/Card/index.tsx | 2 +- packages/gamut/src/Drawer/index.tsx | 2 +- packages/gamut/src/ProgressBar/index.tsx | 8 +++--- packages/gamut/src/Toggle/elements.tsx | 2 +- 6 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/gamut-styles/src/variables/borderRadii.ts b/packages/gamut-styles/src/variables/borderRadii.ts index a9fcdf4cf7..e479aa76f9 100644 --- a/packages/gamut-styles/src/variables/borderRadii.ts +++ b/packages/gamut-styles/src/variables/borderRadii.ts @@ -5,4 +5,4 @@ export const borderRadii = { large: '8px', xLarge: '16px', full: '50%', -} +}; diff --git a/packages/gamut-styles/src/variance/config.ts b/packages/gamut-styles/src/variance/config.ts index e3a7c0e9e6..80adb66263 100644 --- a/packages/gamut-styles/src/variance/config.ts +++ b/packages/gamut-styles/src/variance/config.ts @@ -57,27 +57,39 @@ export const border = { borderRadiusLeft: { property: 'borderRadius', properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'], - scale: 'borderRadii' + scale: 'borderRadii', }, borderRadiusTop: { property: 'borderRadius', properties: ['borderTopLeftRadius', 'borderTopRightRadius'], - scale: 'borderRadii' + scale: 'borderRadii', }, borderRadiusBottom: { property: 'borderRadius', properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'], - scale: 'borderRadii' + scale: 'borderRadii', }, borderRadiusRight: { property: 'borderRadius', properties: ['borderTopRightRadius', 'borderBottomRightRadius'], - scale: 'borderRadii' + scale: 'borderRadii', + }, + borderRadiusTopLeft: { + property: 'borderTopLeftRadius', + scale: 'borderRadii', + }, + borderRadiusTopRight: { + property: 'borderTopRightRadius', + scale: 'borderRadii', + }, + borderRadiusBottomRight: { + property: 'borderBottomRightRadius', + scale: 'borderRadii', + }, + borderRadiusBottomLeft: { + property: 'borderBottomLeftRadius', + scale: 'borderRadii', }, - borderRadiusTopLeft: { property: 'borderTopLeftRadius', scale: 'borderRadii' }, - borderRadiusTopRight: { property: 'borderTopRightRadius' , scale: 'borderRadii' }, - borderRadiusBottomRight: { property: 'borderBottomRightRadius', scale: 'borderRadii' }, - borderRadiusBottomLeft: { property: 'borderBottomLeftRadius', scale: 'borderRadii' }, // Style borderStyle: { property: 'borderStyle' }, borderStyleX: { diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx index c132035902..e7659e5e0f 100644 --- a/packages/gamut/src/Card/index.tsx +++ b/packages/gamut/src/Card/index.tsx @@ -109,7 +109,7 @@ export const Card: React.FC = ({ variant, ...rest }) => { = ({ {...props} > Date: Mon, 5 Aug 2024 22:46:49 -0400 Subject: [PATCH 3/4] updated selectdropdown too --- packages/gamut/src/Form/SelectDropdown/styles.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/gamut/src/Form/SelectDropdown/styles.ts b/packages/gamut/src/Form/SelectDropdown/styles.ts index f040947216..abab612a6d 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'; @@ -180,7 +179,7 @@ export const getMemoizedStyles = ( ...provided, fontSize: `${tagLabelFontSize}px`, color: theme.colors.text, - borderRadius: tagBorderRadius, + borderRadius: 'medium', 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'], From c346016662124ea9cd2e457ffe2deffd9fba0a92 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Tue, 6 Aug 2024 12:00:30 -0400 Subject: [PATCH 4/4] updated atoms border radius --- packages/gamut/src/Anchor/index.tsx | 4 ++-- packages/gamut/src/Badge/index.tsx | 2 +- packages/gamut/src/Button/shared/styles.ts | 6 +++--- packages/gamut/src/Form/SelectDropdown/styles.ts | 4 ++-- packages/gamut/src/ProgressBar/index.tsx | 16 ++++++++-------- packages/gamut/src/Tag/elements.tsx | 4 ++-- packages/gamut/src/Tag/styles.tsx | 4 ++-- 7 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/gamut/src/Anchor/index.tsx b/packages/gamut/src/Anchor/index.tsx index d54762ceba..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: 'medium', + 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: 'small', + borderRadius: 'sm', outlineOffset: '1.5px', textDecoration: 'underline', }, diff --git a/packages/gamut/src/Badge/index.tsx b/packages/gamut/src/Badge/index.tsx index 628d835126..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: 'xLarge', + 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 1a508ffa73..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: 'medium', + 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: 'medium', + 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: 'large', + 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 88d619cd1d..767a5b79af 100644 --- a/packages/gamut/src/Form/SelectDropdown/styles.ts +++ b/packages/gamut/src/Form/SelectDropdown/styles.ts @@ -173,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: 'medium', + 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 }), diff --git a/packages/gamut/src/ProgressBar/index.tsx b/packages/gamut/src/ProgressBar/index.tsx index 6c916afb23..ff696412ad 100644 --- a/packages/gamut/src/ProgressBar/index.tsx +++ b/packages/gamut/src/ProgressBar/index.tsx @@ -45,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: {}, }, @@ -67,20 +67,20 @@ const progressBarSizeVariants = variant({ variants: { small: { height: '6px', - borderRadius: 'small', + borderRadius: 'sm', }, medium: { height: '8px', - borderRadius: 'medium', + borderRadius: 'm', }, large: { height: '18px', - borderRadius: 'large', + borderRadius: 'l', fontSize: 14, }, xl: { height: '36px', - borderRadius: 'xLarge', + borderRadius: 'xl', }, }, }); diff --git a/packages/gamut/src/Tag/elements.tsx b/packages/gamut/src/Tag/elements.tsx index cf3bc22937..ef71120109 100644 --- a/packages/gamut/src/Tag/elements.tsx +++ b/packages/gamut/src/Tag/elements.tsx @@ -23,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: 'medium', + borderRadius: 'm', width: '100%', maxWidth: 'fit-content', '&:focus-within': { @@ -53,7 +53,7 @@ export const DismissButton = styled(IconButton)( ...iconButtonOverrides, color: 'background', border: 'none', - borderRadius: `0 ${theme.borderRadii.medium} ${theme.borderRadii.medium} 0` as any, + 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 771d609e5a..0f80f90b7f 100644 --- a/packages/gamut/src/Tag/styles.tsx +++ b/packages/gamut/src/Tag/styles.tsx @@ -20,7 +20,7 @@ export const colorVariants = variant({ base: { ...tagBaseStyles, color: 'background', - borderRadiusLeft: 'medium', + borderRadiusLeft: 'm', }, variants: { default: { @@ -34,7 +34,7 @@ export const colorVariants = variant({ export const tagWrapperStates = states({ readOnly: { - borderRadius: 'medium', + borderRadius: 'm', }, });