opengovsg · karrui · Feb 15, 2023 · Feb 15, 2023 · Feb 15, 2023
diff --git a/react/src/Calendar/CalendarBase/CalendarHeader.tsx b/react/src/Calendar/CalendarBase/CalendarHeader.tsx
@@ -27,7 +27,7 @@ const MonthYearSelect = ({ children, ...props }: MonthYearSelectProps) => {
       // Prevents any parent form control from applying error styles to this select.
       isInvalid={false}
       variant="flushed"
-      borderRadius="4px"
+      borderRadius="base"
       color="base.content.strong"
       textStyle="subhead-1"
       flexBasis="fit-content"

diff --git a/react/src/Calendar/CalendarBase/DayOfMonth.tsx b/react/src/Calendar/CalendarBase/DayOfMonth.tsx
@@ -125,10 +125,10 @@ export const DayOfMonth = forwardRef<DayOfMonthProps, 'button'>(
         if (isInRange) {
           const returnStyles: SystemStyleObject = {}
           if (isLastDayOfMonth(date) || isSaturday(date)) {
-            returnStyles.borderEndRadius = '4px'
+            returnStyles.borderEndRadius = 'base'
           }
           if (isFirstDayOfMonth(date) || isSunday(date)) {
-            returnStyles.borderStartRadius = '4px'
+            returnStyles.borderStartRadius = 'base'
           }
           return { bg: selectedBgColor, ...returnStyles }
         }

diff --git a/react/src/DatePicker/components/DatePickerContentBase.tsx b/react/src/DatePicker/components/DatePickerContentBase.tsx
@@ -61,7 +61,7 @@ export const DatePickerContentBase = ({
 
   return (
     <Portal>
-      <PopoverContent borderRadius="4px" w="unset" maxW="100vw" bg="white">
+      <PopoverContent borderRadius="base" w="unset" maxW="100vw" bg="white">
         <ReactFocusLock>
           <PopoverHeader
             h="3.5rem"

diff --git a/react/src/theme/components/Attachment.ts b/react/src/theme/components/Attachment.ts
@@ -22,7 +22,7 @@ const baseStyle = definePartsStyle({
     transitionDuration: 'normal',
   },
   fileInfoContainer: {
-    borderRadius: '4px',
+    borderRadius: 'base',
     border: '1px solid',
     borderColor: 'base.divider.medium',
     bg: 'interaction.main-subtle.default',
@@ -130,7 +130,7 @@ const variantOutline = definePartsStyle((props) => {
       justifyContent: 'center',
       cursor: 'pointer',
       border: '1px dashed',
-      borderRadius: '4px',
+      borderRadius: 'base',
       outline: 'none',
       _invalid: {
         // Remove extra 1px of outline.

diff --git a/react/src/theme/components/Badge.ts b/react/src/theme/components/Badge.ts
@@ -90,7 +90,7 @@ const sizes: Record<string, SystemStyleObject> = {
   md: {
     py: '0.25rem',
     px: '0.5rem',
-    borderRadius: '4px',
+    borderRadius: 'base',
   },
 }
 

diff --git a/react/src/theme/components/Button.ts b/react/src/theme/components/Button.ts
@@ -232,7 +232,7 @@ const variantInputAttached = defineStyle((props) => {
     color: 'interaction.support.disabled-content',
     borderColor: 'base.divider.strong',
     borderStartRadius: 0,
-    borderEndRadius: '2px',
+    borderEndRadius: 'sm',
     _hover: {
       bg: 'interaction.muted.main.hover',
       _disabled: {
@@ -279,7 +279,7 @@ const variants = {
 const baseStyle = defineStyle({
   ...textStyles['subhead-1'],
   whiteSpace: 'pre-wrap',
-  borderRadius: '0.25rem',
+  borderRadius: 'base',
   border: '1px solid',
   flexShrink: 0,
   // -1px for border

diff --git a/react/src/theme/components/Checkbox.ts b/react/src/theme/components/Checkbox.ts
@@ -44,7 +44,7 @@ const baseStyle = definePartsStyle((props) => {
     // Control is the box containing the check icon
     control: {
       bg,
-      borderRadius: '0.25rem',
+      borderRadius: 'base',
       border: '2px solid',
       borderColor,
       _checked: {

diff --git a/react/src/theme/components/Input.ts b/react/src/theme/components/Input.ts
@@ -21,10 +21,10 @@ const outlineVariant = definePartsStyle((props) => {
 
   return {
     addon: {
-      borderRadius: '4px',
+      borderRadius: 'base',
     },
     field: {
-      borderRadius: '4px',
+      borderRadius: 'base',
       bg: isPrefilled ? 'utility.input-prefilled' : 'utility.ui',
       border: '1px solid',
       borderColor: isSuccess

diff --git a/react/src/theme/components/Link.ts b/react/src/theme/components/Link.ts
@@ -53,7 +53,7 @@ const baseStyle = defineStyle((props) => {
         color: 'interaction.links.inverse-hover',
       },
     },
-    borderRadius: '0.25rem',
+    borderRadius: 'base',
     _hover: {
       color: hoverColor,
       _disabled: {

diff --git a/react/src/theme/components/Modal.ts b/react/src/theme/components/Modal.ts
@@ -14,7 +14,7 @@ const baseStyleOverlay = defineStyle({
 const baseStyleDialog = defineStyle((props) => {
   const { scrollBehavior } = props
   return {
-    borderRadius: '0.25rem',
+    borderRadius: 'base',
     my: '8rem',
     maxH: scrollBehavior === 'inside' ? 'calc(100% - 16rem)' : undefined,
     boxShadow: 'md',

diff --git a/react/src/theme/components/MultiSelect.ts b/react/src/theme/components/MultiSelect.ts
@@ -94,7 +94,7 @@ const variantOutline = definePartsStyle((props) => {
   return {
     ...comboboxVariantOutline,
     fieldwrapper: {
-      borderRadius: '4px',
+      borderRadius: 'base',
       ...inputFieldVariantOutline,
       _focusWithin: inputFieldVariantOutline?._focusVisible,
       ...(isFocused ? inputFieldVariantOutline?._focusVisible : {}),

diff --git a/react/src/theme/components/Pagination.ts b/react/src/theme/components/Pagination.ts
@@ -17,7 +17,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
 const baseButtonStyling = defineStyle({
   h: 'auto',
   border: 'none',
-  borderRadius: '0.25rem',
+  borderRadius: 'base',
   cursor: 'pointer',
   alignSelf: 'center',
   color: 'base.content.default',

diff --git a/react/src/theme/components/Tag.ts b/react/src/theme/components/Tag.ts
@@ -19,7 +19,7 @@ const baseStyleContainer = defineStyle({
   transitionProperty: 'common',
   transitionDuration: 'normal',
   _focusWithin: layerStyles.focusRing.default._focusVisible,
-  borderRadius: '4px',
+  borderRadius: 'base',
   _disabled: {
     bg: 'interaction.support.disabled',
     color: 'interaction.support.disabled-content',

diff --git a/react/src/theme/components/Tile.ts b/react/src/theme/components/Tile.ts
@@ -17,7 +17,7 @@ const baseStyle = definePartsStyle({
     transitionProperty: 'common',
     transitionDuration: 'normal',
     color: 'base.content.strong',
-    borderRadius: '4px',
+    borderRadius: 'base',
     padding: '1.5rem',
     height: 'auto',
     _hover: {

diff --git a/react/src/theme/components/Toast.ts b/react/src/theme/components/Toast.ts
@@ -20,11 +20,11 @@ const baseStyle = definePartsStyle({
     position: 'absolute',
   },
   wrapper: {
-    borderRadius: '4px',
+    borderRadius: 'base',
     boxSizing: 'border-box',
   },
   container: {
-    borderRadius: '4px',
+    borderRadius: 'base',
     background: 'inherit',
   },
   close: {

diff --git a/react/src/theme/components/Tooltip.ts b/react/src/theme/components/Tooltip.ts
@@ -12,7 +12,7 @@ const baseStyle = defineStyle({
   [$fg.variable]: 'colors.base.content.inverse',
   px: '0.75rem',
   py: '0.5rem',
-  borderRadius: '0.25rem',
+  borderRadius: 'base',
   textAlign: 'left',
   margin: '0.25rem',
   maxWidth: '19.5rem',