fix: change default border radius to 6px (#556)

Author: tenphi

.changeset/smart-deers-remember.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Change default border radius to 6px.

src/components/GlobalStyles.tsx

@@ -252,7 +252,7 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
     word-spacing: normal;
     word-break: normal;
     word-wrap: normal;
-    border-radius: 4px;
+    border-radius: 6px;
     border: none;
 
     -moz-tab-size: 4;

src/components/content/Skeleton/Skeleton.tsx

@@ -73,7 +73,7 @@ const LAYOUT_MAP = {
             <Placeholder
               key={i}
               isStatic={isStatic}
-              radius="1x"
+              radius="1r"
               width="20x"
               height="12x"
               flexGrow={1}

src/components/fields/Checkbox/Checkbox.tsx

@@ -89,7 +89,7 @@ const CheckboxElement = tasty({
   styles: {
     display: 'grid',
     placeItems: 'center',
-    radius: '.5r',
+    radius: '.25x',
     fill: {
       '': '#white',
       'checked | indeterminate': '#purple-text',

src/components/fields/DatePicker/DatePickerSegment.tsx

@@ -37,7 +37,7 @@ const EditableSegmentElement = tasty({
       '': '#clear',
       ':focus': '#purple',
     },
-    radius: '.5r',
+    radius: '.25x',
 
     Placeholder: {
       opacity: '#disabled-opacity',

src/components/fields/Select/Select.tsx

@@ -196,7 +196,7 @@ const ListBoxElement = tasty({
     margin: '0',
     padding: '.5x',
     listStyle: 'none',
-    radius: true,
+    radius: '@large-radius',
     fill: '#white',
     shadow: '0px 4px 16px #shadow',
     height: 'initial 30x',

src/components/organisms/Modal/Modal.tsx

@@ -207,7 +207,7 @@ export function Modal(allProps: CubeModalProps) {
           padding="0"
           shadow={true}
           border={false}
-          radius="1.5r"
+          radius="1x"
           width={`288px (100% - 32px) ${
             typeof width === 'number' ? `${width}px` : width || '360px'
           }`}

src/components/overlays/Dialog/Dialog.tsx

@@ -48,8 +48,8 @@ const DialogElement = tasty({
     gap: 0,
     flow: 'column',
     radius: {
-      '': '2r',
-      '[data-type="tray"]': '2r top',
+      '': '(@large-radius + 1bw)',
+      '[data-type="tray"]': '(@large-radius + 1bw) top',
       '[data-type="fullscreenTakeover"] | [data-type="panel"]': '0r',
     },
     fill: '#white',

src/components/overlays/NewNotifications/Bar/FloatingNotification.tsx

@@ -22,7 +22,7 @@ export type FloatingNotificationProps = {
 const NotificationContainer = tasty({
   styles: {
     overflow: 'hidden',
-    radius: '0.5x',
+    radius: true,
     boxShadow: '0 0.5x 2x #shadow',
     pointerEvents: 'auto',
   },

src/components/overlays/NewNotifications/NotificationView/NotificationIcon.tsx

@@ -44,7 +44,7 @@ const IconPreset = tasty({
       success: '#success-text',
       danger: '#danger-text',
     },
-    borderRadius: '0.5x',
+    radius: '1r',
     width: '3x',
     height: '3x',
     padding: '0.5x',