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

cube-js · Dec 20, 2024 · 7c70da6 · 7c70da6
1 parent 4496c1f
commit 7c70da6
Show file tree

Hide file tree

Showing 13 changed files with 19 additions and 15 deletions.
diff --git a/.changeset/smart-deers-remember.md b/.changeset/smart-deers-remember.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Change default border radius to 6px.
diff --git a/src/components/GlobalStyles.tsx b/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;

diff --git a/src/components/content/Skeleton/Skeleton.tsx b/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}

diff --git a/src/components/fields/Checkbox/Checkbox.tsx b/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',

diff --git a/src/components/fields/DatePicker/DatePickerSegment.tsx b/src/components/fields/DatePicker/DatePickerSegment.tsx
@@ -37,7 +37,7 @@ const EditableSegmentElement = tasty({
       '': '#clear',
       ':focus': '#purple',
     },
-    radius: '.5r',
+    radius: '.25x',
 
     Placeholder: {
       opacity: '#disabled-opacity',

diff --git a/src/components/fields/Select/Select.tsx b/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',

diff --git a/src/components/organisms/Modal/Modal.tsx b/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'
           }`}

diff --git a/src/components/overlays/Dialog/Dialog.tsx b/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',

diff --git a/src/components/overlays/NewNotifications/Bar/FloatingNotification.tsx b/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',
   },

diff --git a/src/components/overlays/NewNotifications/NotificationView/NotificationIcon.tsx b/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',

diff --git a/src/components/overlays/Notification/Notification.tsx b/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',

diff --git a/src/components/pickers/Menu/styled.tsx b/src/components/pickers/Menu/styled.tsx
@@ -26,9 +26,7 @@ export const StyledMenu = tasty({
       '': '#dark-05',
       section: '',
     },
-    radius: {
-      '': '1r',
-    },
+    radius: '(@large-radius + 1bw)',
     boxShadow: {
       '': '',
       popover: '0px 5px 15px #dark.05',

diff --git a/src/tokens.ts b/src/tokens.ts
@@ -42,7 +42,8 @@ const TOKENS = {
   gap: '8px',
   'outline-width': 'calc(1rem / 16 * 3)',
   'border-width': '1px',
-  radius: '4px',
+  radius: '6px',
+  'large-radius': '(1r + .5x)',
   'leaf-sharp-radius': '0px',
   'fade-width': '32px',
   transition: '80ms',