feat: rounded 시스템 속성을 추가하고 borderRadiusLevel을 대체한다

packages/vibrant-components/src/lib/Calendar/Calendar.tsx

@@ -116,7 +116,7 @@ export const Calendar = withCalendarVariation(
         backgroundColor="surface2"
         width={320}
         elevationLevel={2}
-        borderRadiusLevel={1}
+        rounded="sm"
         testId={testId}
         {...restProps}
       >

packages/vibrant-components/src/lib/CalendarDateItem/CalenderDateItem.tsx

@@ -56,15 +56,7 @@ export const CalenderDateItem = withCalendarDateItemVariation(
             {date.getDate()}
           </Body>
           {today && (
-            <Box
-              position="absolute"
-              width={4}
-              height={4}
-              borderRadius={2}
-              bottom={8}
-              left={18}
-              backgroundColor="primary"
-            />
+            <Box position="absolute" width={4} height={4} rounded="sm" bottom={8} left={18} backgroundColor="primary" />
           )}
         </Box>
       </>

packages/vibrant-components/src/lib/Callout/Callout.tsx

@@ -23,7 +23,7 @@ export const Callout = withCalloutVariation(
       backgroundColor={backgroundColor}
       borderWidth={1}
       borderColor="outline1"
-      borderRadius={2}
+      rounded="sm"
       p={15}
       data-testid={testId}
     >

packages/vibrant-components/src/lib/ContainedButton/ContainedButton.spec.tsx

@@ -171,7 +171,7 @@ describe('<ContainedButton />', () => {
 
           expect(element).toHaveStyleRule('padding-right', paddingRight);
 
-          expect(element).toHaveStyleRule('border-radius', '2px');
+          expect(element).toHaveStyleRule('border-radius', '4px');
 
           expect(element.clientHeight).toBe(height);
 

packages/vibrant-components/src/lib/ContainedButton/ContainedButton.tsx

@@ -29,7 +29,7 @@ export const ContainedButton = withContainedButtonVariation(
       buttonType={type}
       interactions={['hover', 'focus', 'active']}
       overlayColor={onColor}
-      borderRadiusLevel={1}
+      rounded="sm"
       disabled={loading || disabled}
     >
       <Box

packages/vibrant-components/src/lib/DateInput/DateInput.tsx

@@ -62,15 +62,14 @@ export const DateInput = withDateInputVariation(
           borderStyle="solid"
           borderColor={(isFocused || calendarOpened) && state !== 'error' ? 'outlineNeutral' : borderColor}
           height={height}
-          borderRadius={2}
+          rounded="sm"
           flexShrink={0}
-          alignItems="center"
+          overflow="hidden"
           {...restProps}
         >
           <Pressable
             ref={composeRef}
             pl={px}
-            height="100%"
             justifyContent="center"
             flexGrow={1}
             disabled={disabled}
@@ -93,7 +92,7 @@ export const DateInput = withDateInputVariation(
               </Body>
             </>
           </Pressable>
-          <HStack spacing={iconSpacing} pl={iconSpacing} height="100%">
+          <HStack spacing={iconSpacing} pl={iconSpacing}>
             {!disabled && value ? (
               <PressableBox as="button" onClick={onClear} hitSlop={hitSlop} justifyContent="center">
                 <Icon.CloseCircle.Fill size={iconSize} fill="onView2" />

packages/vibrant-components/src/lib/DatePickerField/__snapshots__/DatePickerField.spec.tsx.snap

@@ -41,11 +41,8 @@ exports[`<DatePickerField /> when size is lg match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   height: 50px;
-  border-radius: 2px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
   background-color: #ffffff;
 }
 
@@ -75,7 +72,6 @@ exports[`<DatePickerField /> when size is lg match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  height: 100%;
   padding-left: 15px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -119,7 +115,6 @@ exports[`<DatePickerField /> when size is lg match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   padding-left: 12px;
-  height: 100%;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -292,11 +287,8 @@ exports[`<DatePickerField /> when size is md match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   height: 38px;
-  border-radius: 2px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
   background-color: #ffffff;
 }
 
@@ -326,7 +318,6 @@ exports[`<DatePickerField /> when size is md match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  height: 100%;
   padding-left: 9px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -370,7 +361,6 @@ exports[`<DatePickerField /> when size is md match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   padding-left: 8px;
-  height: 100%;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -543,11 +533,8 @@ exports[`<DatePickerField /> when size is sm match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   height: 30px;
-  border-radius: 2px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
   background-color: #ffffff;
 }
 
@@ -577,7 +564,6 @@ exports[`<DatePickerField /> when size is sm match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  height: 100%;
   padding-left: 7px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -621,7 +607,6 @@ exports[`<DatePickerField /> when size is sm match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   padding-left: 6px;
-  height: 100%;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;

packages/vibrant-components/src/lib/Drawer/DrawerHeader/__snapshots__/DrawerHeader.spec.tsx.snap

@@ -130,7 +130,7 @@ exports[`<DrawerHeader /> when children is set match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-7 {

packages/vibrant-components/src/lib/Dropdown/Dropdown.tsx

@@ -249,7 +249,7 @@ export const Dropdown = withDropdownVariation(
                     backgroundColor="surface2"
                     py={CONTENT_PADDING}
                     elevationLevel={4}
-                    borderRadiusLevel={1}
+                    rounded="sm"
                     minWidth={[280, 280, 240]}
                   >
                     <Transition
@@ -290,8 +290,8 @@ export const Dropdown = withDropdownVariation(
                   width="100%"
                   maxHeight={viewportHeight - BOTTOM_SHEET_MIN_TOP_MARGIN}
                   backgroundColor="surface2"
-                  borderTopLeftRadiusLevel={4}
-                  borderTopRightRadiusLevel={4}
+                  roundedTopLeft="xxl"
+                  roundedTopRight="xxl"
                   onLayout={handleContainerResize}
                 >
                   <Transition

packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx

@@ -54,7 +54,7 @@ export const FieldLayout = withFieldLayoutVariation(
         borderStyle="solid"
         borderColor={borderColor}
         backgroundColor={backgroundColor}
-        borderRadiusLevel={1}
+        rounded="sm"
       >
         <VStack flexShrink={0}>{renderStart?.()}</VStack>
         <Box width="100%" height="100%" cursor={cursor}>

packages/vibrant-components/src/lib/FilterChip/FilterChip.tsx

@@ -22,7 +22,7 @@ export const FilterChip = withFilterChipVariation(
       testId={testId}
       flexGrow={0}
       flexShrink={0}
-      borderRadiusLevel={5}
+      rounded="full"
       maxWidth={maxWidth}
       flexDirection="row"
       alignItems="center"

packages/vibrant-components/src/lib/GhostButton/GhostButton.tsx

@@ -26,7 +26,7 @@ export const GhostButton = withGhostButtonVariation(
       buttonType={type}
       interactions={['focus', 'active']}
       hitSlop={8}
-      borderRadiusLevel={1}
+      rounded="sm"
       disabled={disabled}
       data-testid={testId}
       flexDirection="row"

packages/vibrant-components/src/lib/IconButton/IconButton.tsx

@@ -10,7 +10,7 @@ export const IconButton = withIconButtonVariation(
       as="button"
       buttonType={type}
       interactions={['focus', 'active']}
-      borderRadiusLevel={1}
+      rounded="sm"
     >
       <IconComponent size={iconSize} fill={color} />
     </Pressable>

packages/vibrant-components/src/lib/ImageThumbnail/ImageThumbnail.tsx

@@ -3,23 +3,8 @@ import { Ratio } from '../Ratio';
 import { withImageThumbnailVariation } from './ImageThumbnailProps';
 
 export const ImageThumbnail = withImageThumbnailVariation(
-  ({
-    src,
-    alt = '',
-    borderRadiusLevel,
-    aspectRatio,
-    dim = true,
-    loading,
-    width = '100%',
-    testId = 'image-thumbnail',
-  }) => (
-    <Ratio
-      data-testid={testId}
-      ratio={aspectRatio}
-      width={width}
-      borderRadiusLevel={borderRadiusLevel}
-      overflow="hidden"
-    >
+  ({ src, alt = '', aspectRatio, dim = true, loading, width = '100%', testId = 'image-thumbnail', ...props }) => (
+    <Ratio data-testid={testId} ratio={aspectRatio} width={width} overflow="hidden" {...props}>
       {dim && (
         <Box
           data-testid={`${testId}-overlay`}

packages/vibrant-components/src/lib/ImageThumbnail/ImageThumbnailProps.ts

@@ -5,6 +5,6 @@ export type ImageThumbnailProps = {
   dim?: ResponsiveValue<boolean>;
   aspectRatio: number;
   testId?: string;
-} & Pick<ImageProps, 'alt' | 'borderRadiusLevel' | 'loading' | 'objectFit' | 'sizes' | 'src' | 'width'>;
+} & Pick<ImageProps, 'alt' | 'borderRadiusLevel' | 'loading' | 'objectFit' | 'rounded' | 'sizes' | 'src' | 'width'>;
 
 export const withImageThumbnailVariation = withVariation<ImageThumbnailProps>('ImageThumbnail')();

packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx

@@ -147,10 +147,10 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
                 maxWidth={[446, 480, desktopModalWidth]}
                 maxHeight={[viewportHeight - 120, 'unset']}
                 backgroundColor="surface2"
-                borderTopLeftRadiusLevel={4}
-                borderTopRightRadiusLevel={4}
-                borderBottomLeftRadiusLevel={[0, 4]}
-                borderBottomRightRadiusLevel={[0, 4]}
+                roundedTopLeft="xxl"
+                roundedTopRight="xxl"
+                roundedBottomLeft={['none', 'xxl']}
+                roundedBottomRight={['none', 'xxl']}
                 onLayout={handleContainerResize}
                 data-testid={testId}
               >

packages/vibrant-components/src/lib/ModalBottomSheet/__snapshots__/ModalBottomSheet.spec.tsx.snap

@@ -257,7 +257,7 @@ exports[`<ModalBottomSheet /> given mobile viewport width match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-9 {
@@ -671,7 +671,7 @@ exports[`<ModalBottomSheet /> given viewport width larger than mobile match snap
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-9 {

packages/vibrant-components/src/lib/NumericField/NumericField.tsx

@@ -60,7 +60,7 @@ export const NumericField = withNumericFieldVariation(
           borderWidth={1}
           borderColor="outline1"
           borderStyle="solid"
-          borderRadius={2}
+          rounded="sm"
           placeholder={placeholder?.toString()}
           disabled={disabled}
           hideInputSpinButton={true}

packages/vibrant-components/src/lib/NumericField/__snapshots__/NumericField.spec.tsx.snap

@@ -47,7 +47,7 @@ exports[`<NumericField /> when NumericField rendered match snapshot 1`] = `
   text-align: center;
   border-color: #00000026;
   border-style: solid;
-  border-radius: 2px;
+  border-radius: 4px;
   -moz-appearance: textfield;
 }
 
@@ -132,7 +132,7 @@ exports[`<NumericField /> when NumericField rendered match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-4 {

packages/vibrant-components/src/lib/OperatorButton/OperatorButton.tsx

@@ -6,7 +6,7 @@ export const OperatorButton = withOperationButtonVariation(
     <Pressable
       p={7}
       borderWidth={0}
-      borderRadius={2}
+      rounded="sm"
       backgroundColor={backgroundColor}
       overlayColor="onView1"
       interactions={['hover', 'focus', 'active']}

packages/vibrant-components/src/lib/OperatorButton/__snapshots__/OperatorButton.spec.tsx.snap

@@ -27,7 +27,7 @@ exports[`<OperatorButton /> when OperatorButton rendered match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-1 {

packages/vibrant-components/src/lib/OutlinedButton/OutlinedButton.tsx

@@ -34,7 +34,7 @@ export const OutlinedButton = withOutlinedButtonVariation(
       borderColor={borderColor}
       borderWidth={1}
       borderStyle="solid"
-      borderRadiusLevel={1}
+      rounded="sm"
       disabled={loading || disabled}
     >
       <Box

packages/vibrant-components/src/lib/Paper/Paper.stories.tsx

@@ -15,7 +15,7 @@ export default {
 export const Basic: ComponentStory<typeof Paper> = props => <Paper {...props} m={20} width={200} height={200} />;
 
 export const BackgroundColor: ComponentStory<typeof Paper> = () => (
-  <Paper m={20} width={200} height={200} backgroundColor="primary" borderRadiusLevel={1} />
+  <Paper m={20} width={200} height={200} backgroundColor="primary" rounded="sm" />
 );
 
 export const BackgroundGradient: ComponentStory<typeof Paper> = () => (

packages/vibrant-components/src/lib/Paper/PaperProps.ts

@@ -57,8 +57,12 @@ type PaperProps = Pick<BorderSystemProps, 'borderColor' | 'borderStyle' | 'borde
       | 'borderBottomRightRadiusLevel'
       | 'borderTopLeftRadiusLevel'
       | 'borderTopRightRadiusLevel'
+      | 'roundedBottomLeft'
+      | 'roundedBottomRight'
+      | 'roundedTopLeft'
+      | 'roundedTopRight'
     >,
-    Pick<BorderSystemProps, 'borderRadiusLevel'>
+    Pick<BorderSystemProps, 'borderRadiusLevel' | 'rounded'>
   >;
 
 export const withPaperVariation = withVariation<PaperProps>('Paper')();