feat(Border Radius Token)!: Updating Molecules + Organism (#2922)

* updated molecules + organism borderradii
Codecademy · Aug 6, 2024 · 976edaa · 976edaa
1 parent 6ad1890
commit 976edaa
Show file tree

Hide file tree

Showing 10 changed files with 14 additions and 13 deletions.
diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx
@@ -30,7 +30,7 @@ const listVariants = variant({
   },
   variants: {
     default: {
-      borderRadius: '2px',
+      borderRadius: 'sm',
     },
     table: {},
     card: {
@@ -119,11 +119,11 @@ const rowVariants = variant({
     },
     card: {
       border: 1,
-      borderRadius: '2px',
+      borderRadius: 'sm',
     },
     block: {
       border: 'none',
-      borderRadius: '2px',
+      borderRadius: 'sm',
     },
     plain: {},
   },

diff --git a/packages/gamut/src/Menu/MenuSeparator.tsx b/packages/gamut/src/Menu/MenuSeparator.tsx
@@ -14,7 +14,7 @@ export const MenuSeparator: React.FC<MenuSeperatorProps> = (props) => {
 
   return (
     <FlexBox as="li" role="separator" height={8} fit center {...props}>
-      <Box fit height="1px" bg="text-disabled" borderRadius="2px" mx={16} />
+      <Box fit height="1px" bg="text-disabled" borderRadius="sm" mx={16} />
     </FlexBox>
   );
 };
diff --git a/packages/gamut/src/Menu/elements.tsx b/packages/gamut/src/Menu/elements.tsx
@@ -55,7 +55,7 @@ const StyledList = styled('ul', styledOptions<'ul'>())<ListProps>(
       bg: 'background',
       p: 0,
       border: 1,
-      borderRadius: '2px',
+      borderRadius: 'sm',
     },
   }),
   sharedStates,
@@ -91,7 +91,7 @@ const interactiveVariants = system.variant({
       content: "''",
       position: 'absolute',
       inset: 4,
-      borderRadius: '4px',
+      borderRadius: 'm',
       border: 2,
       borderColor: 'primary',
       opacity: 0,

diff --git a/packages/gamut/src/ModalDeprecated/index.tsx b/packages/gamut/src/ModalDeprecated/index.tsx
@@ -18,7 +18,7 @@ export type ModalDeprecatedOverlayProps = Partial<
 const CardShell = styled.div(
   css({
     background: 'white',
-    borderRadius: '2px',
+    borderRadius: 'sm',
     boxShadow: `0 2px 8px 0  ${theme.colors['shadow-black-slight']}`,
     position: 'relative',
     transition: 'box-shadow 250ms ease-in',

diff --git a/packages/gamut/src/Popover/elements.tsx b/packages/gamut/src/Popover/elements.tsx
@@ -51,7 +51,7 @@ export const PatternContainer = styled.div(
     base: {
       width: '100%',
       height: '100%',
-      borderRadius: '2px',
+      borderRadius: 'sm',
       overflow: 'hidden',
       bg: 'background',
       position: 'absolute',

diff --git a/packages/gamut/src/Popover/styles.tsx b/packages/gamut/src/Popover/styles.tsx
@@ -22,7 +22,7 @@ export const raisedDivVariants = variant({
   variants: {
     primary: {
       bg: 'background',
-      borderRadius: '2px',
+      borderRadius: 'sm',
     },
     secondary: { ...toolTipBodyCss },
   },

diff --git a/packages/gamut/src/Tabs/TabButton.tsx b/packages/gamut/src/Tabs/TabButton.tsx
@@ -41,7 +41,7 @@ const tabVariants = variant({
     justifyContent: 'center',
     alignItems: 'center',
     whiteSpace: 'nowrap',
-    borderRadius: 0,
+    borderRadius: 'none',
     px: 24,
     textOverflow: 'ellipsis',
     color: 'text',

diff --git a/packages/gamut/src/Tip/shared/elements.tsx b/packages/gamut/src/Tip/shared/elements.tsx
@@ -49,7 +49,7 @@ export const TargetContainer = styled(Box)(
       content: "''",
       position: 'absolute',
       inset: -2,
-      borderRadius: '4px',
+      borderRadius: 'm',
       border: 2,
       borderColor: 'primary',
       opacity: 0,

diff --git a/packages/gamut/src/Toast/Toast.tsx b/packages/gamut/src/Toast/Toast.tsx
@@ -77,7 +77,7 @@ export const Toast: React.FC<ToastProps> = ({
       return (
         <IconContainer
           gridArea="icon"
-          borderRadius="50%"
+          borderRadius="full"
           backgroundImage={`url(${icon})`}
         />
       );

diff --git a/packages/styleguide/stories/Molecules/Menu/MenuSeparator.stories.mdx b/packages/styleguide/stories/Molecules/Menu/MenuSeparator.stories.mdx
@@ -12,7 +12,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
     status: 'updating',
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/file/r5Y0iuLDFPXy8SmYX1UW2H',
+      url:
+        'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=30420-41139&t=k5tu1lVEUoXtCb6m-4',
     },
   }}
   decorators={[(Story) => <Menu variant="action">{Story()}</Menu>]}