feat(Border Radius): Fixing Atoms' border radii (#2921)

* updated atom's border radius
Codecademy · Aug 6, 2024 · 6ad1890 · 6ad1890
1 parent a3c3537
commit 6ad1890
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -9,7 +9,6 @@ import { StylesConfig } from 'react-select';
 import {
   dismissSharedStyles,
   tagBaseStyles,
-  tagBorderRadius,
   tagLabelFontSize,
   tagLabelPadding,
 } from '../../Tag/styles';
@@ -174,21 +173,21 @@ 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
     }),
     multiValueRemove: (provided) => ({
       ...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
@@ -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
@@ -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<ProgressBarProps> = ({
         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
@@ -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
@@ -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
@@ -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
@@ -45,7 +45,7 @@ export const Toggle = <Props extends ToggleProps>({
         <Circle
           bg="white"
           borderColor="background"
-          borderRadius="50%"
+          borderRadius="full"
           borderStyle="solid"
           borderWidth="1px"
           bottom="10%"