fix: change default border radius to 6px

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/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/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',

src/components/overlays/Notification/Notification.tsx

@@ -24,7 +24,7 @@ const NotificationElement = tasty(Card, {
     shadow: '0 5px 15px #dark.10',
     border: false,
     margin: '1x bottom',
-    radius: '1.5r',
+    radius: '1x',
     gridColumns: 'auto 1fr auto',
     placeItems: 'center start',
     gap: '2x',

src/tokens.ts

@@ -42,7 +42,7 @@ const TOKENS = {
   gap: '8px',
   'outline-width': 'calc(1rem / 16 * 3)',
   'border-width': '1px',
-  radius: '4px',
+  radius: '6px',
   'leaf-sharp-radius': '0px',
   'fade-width': '32px',
   transition: '80ms',