feat: add new border radii theme and reset all on components (#2448)

docs/pages/components/button.mdx

@@ -145,15 +145,6 @@ You can add `w` property from [xstyled](https://xstyled.dev/docs/width/).
 <Button w={1 / 2}>half width</Button>
 ```
 
-## Radius
-
-You can add `borderRadius` property from [xstyled](https://xstyled.dev/docs/border-radius/).
-
-```jsx row
-<Button>default</Button>
-<Button borderRadius="10px">10px</Button>
-```
-
 ## ButtonGroup
 
 See documentation from [ButtonGroup](/components/button-group) component.

docs/pages/theming/customize.mdx

@@ -44,12 +44,6 @@ const theme = createTheme({
     3xl: 50,
     4xl: 70
   },
-  // example if you need to remove border radius
-  radii: {
-    sm: 0,
-    md: 0,
-    lg: 0
-  },
   space: {
     lg: 24
   },

package.json

@@ -119,7 +119,6 @@
     "esbuild": "^0.17.11",
     "esbuild-plugin-replace": "^1.4.0",
     "esm": "^3.2.25",
-    "glob": "^10.3.10",
     "husky": "8.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",

packages/Core/src/theme/alerts.ts

@@ -15,14 +15,13 @@ export type ThemeAlerts = {
 } & Record<State, AttributesState>
 
 export const getAlerts = (theme: WuiTheme): ThemeAlerts => {
-  const { borderWidths, colors, fontSizes, radii, space } = theme
+  const { borderWidths, colors, fontSizes, space } = theme
 
   return {
     default: {
       fontSize: fontSizes.sm,
       borderWidth: borderWidths.sm,
       borderStyle: 'solid',
-      borderRadius: radii.md,
       color: colors['dark-700'],
       backgroundColor: colors['light-900'],
       borderColor: colors['dark-100'],

packages/Core/src/theme/buttons.ts

@@ -34,13 +34,12 @@ export type ThemeButtons = Record<Variant, CommonAttributesButton> &
   Record<'icon', Record<Icon, Record<Size, string>>>
 
 export const getButtons = (theme: WuiTheme): ThemeButtons => {
-  const { colors, focus, fontWeights, radii, space, texts, toRem } = theme
+  const { colors, focus, fontWeights, space, texts, toRem } = theme
   const defaults = {
     ...texts.xs,
     color: colors['light-900'],
     fontWeight: fontWeights.bold,
     letterSpacing: 0,
-    borderRadius: radii.md,
   }
 
   return {

packages/Core/src/theme/cards.ts

@@ -1,21 +1,13 @@
 import { CSSObject } from '@xstyled/styled-components'
 
-import { WuiTheme } from './types'
-
 export type ThemeCards = {
   default: CSSObject
-  cover: CSSObject
 }
 
-export const getCards = (theme: WuiTheme): ThemeCards => {
-  const { radii } = theme
+export const getCards = (): ThemeCards => {
   return {
     default: {
       overflow: 'hidden',
     },
-    cover: {
-      borderTopLeftRadius: radii.sm,
-      borderTopRightRadius: radii.sm,
-    },
   }
 }

packages/Core/src/theme/core.ts

@@ -20,7 +20,7 @@ import { timingFunction, transitions } from './transitions'
 import { getUnderline } from './underline'
 import { getDefaultFields } from './defaultFields'
 import { getDefaultCards } from './defaultCards'
-import { radii } from './radii'
+import { getRadii } from './radii'
 import { borderWidths } from './borders'
 import { screens } from './screens'
 import { shadows } from './shadows'
@@ -125,7 +125,7 @@ export const createTheme = (options: Options = {}): WuiTheme => {
 
   theme.icons = getIcons(theme)
 
-  theme.radii = radii
+  theme.radii = getRadii(theme)
 
   theme.transitions = transitions
   theme.timingFunction = timingFunction
@@ -157,7 +157,7 @@ export const createTheme = (options: Options = {}): WuiTheme => {
   theme.links = getLinks(theme)
   theme.dropdownMenu = getDropdownMenu(theme)
   theme.tables = getTables(theme)
-  theme.cards = getCards(theme)
+  theme.cards = getCards()
   theme.modals = getModals(theme)
   theme.drawers = getDrawers(theme)
   theme.loaders = getLoaders(theme)

packages/Core/src/theme/defaultCards.ts

@@ -2,21 +2,17 @@ import { CSSObject } from '@xstyled/styled-components'
 
 import { ThemeBorderWidths } from './borders'
 import { ThemeColors } from './colors'
-import { ThemeRadii } from './radii'
 
 export type ThemeDefaultCards = CSSObject
 
 export const getDefaultCards = ({
   borderWidths,
   colors,
-  radii,
 }: {
   borderWidths: ThemeBorderWidths
   colors: ThemeColors
-  radii: ThemeRadii
 }): ThemeDefaultCards => ({
   backgroundColor: colors['light-900'],
-  borderRadius: radii.md,
   borderStyle: 'solid',
   borderWidth: borderWidths.sm,
   borderColor: colors.border,

packages/Core/src/theme/defaultFields.ts

@@ -37,7 +37,7 @@ export type ThemeDefaultFields = {
 }
 
 export const getDefaultFields = (theme: WuiTheme): ThemeDefaultFields => {
-  const { borderWidths, colors, focus, fontSizes, fontWeights, radii, space, toRem } = theme
+  const { borderWidths, colors, focus, fontSizes, fontWeights, space, toRem } = theme
 
   return {
     default: {
@@ -51,7 +51,6 @@ export const getDefaultFields = (theme: WuiTheme): ThemeDefaultFields => {
       borderWidth: borderWidths.sm,
       borderStyle: 'solid',
       outline: 'none',
-      borderRadius: radii.md,
     },
     sizes: {
       xs: {

packages/Core/src/theme/radii.ts

@@ -1,8 +1,20 @@
+import { WuiTheme } from './types'
+
 export type ThemeRadii = {
+  none: string
   sm: string
   md: string
   lg: string
+  xl: string
   [key: number]: string
 }
 
-export const radii: ThemeRadii = { sm: '4px', md: '6px', lg: '10px' }
+export const getRadii = (theme: WuiTheme): ThemeRadii => {
+  return {
+    none: '0',
+    sm: theme.toRem(2),
+    md: theme.toRem(4),
+    lg: theme.toRem(8),
+    xl: theme.toRem(16),
+  }
+}

packages/Core/src/theme/toasts.ts

@@ -14,7 +14,7 @@ export type ThemeToasts = {
 }
 
 export const getToasts = (theme: WuiTheme): ThemeToasts => {
-  const { borderWidths, colors, fontWeights, radii, space } = theme
+  const { borderWidths, colors, fontWeights, space } = theme
 
   return {
     default: {
@@ -32,7 +32,6 @@ export const getToasts = (theme: WuiTheme): ThemeToasts => {
         ...getTexts(theme).sm,
         borderWidth: borderWidths.sm,
         borderStyle: 'solid',
-        borderRadius: radii.md,
       },
       title: {
         fontWeight: fontWeights.bold,

packages/Core/src/theme/tooltips.ts

@@ -3,7 +3,7 @@ import { CSSObject } from '@xstyled/styled-components'
 import { WuiTheme } from './types'
 
 export const getTooltips = (theme: WuiTheme): CSSObject => {
-  const { borderWidths, colors, fontSizes, lineHeights, radii, space, toRem } = theme
+  const { borderWidths, colors, fontSizes, lineHeights, space, toRem } = theme
 
   return {
     maxWidth: toRem(200),
@@ -13,7 +13,6 @@ export const getTooltips = (theme: WuiTheme): CSSObject => {
     fontSize: fontSizes.xs,
     lineHeight: lineHeights.xs,
     border: `${borderWidths.sm} solid ${colors['light-400']}`,
-    borderRadius: radii.sm,
     boxSizing: 'border-box',
   }
 }

packages/MarkdownEditor/src/styles.ts

@@ -23,7 +23,6 @@ export const Wrapper = styled('div').withConfig({ shouldForwardProp })<
     ${disabled && th('defaultFields.disabled')};
     height: auto;
     padding: 0;
-    border-radius: sm;
 
     .editor-statusbar {
       display: none;

packages/RadioTab/src/styles.ts

@@ -13,33 +13,27 @@ export const Radio = styled(Ariakit.Radio).withConfig({ shouldForwardProp })`
 
 const columnStyles = css`
   margin-top: -${th.borderWidth('sm')};
-  border-radius: 0;
 
   &:first-of-type {
-    border-radius: md;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
   &:last-of-type {
-    border-radius: md;
     border-top-right-radius: 0;
     border-top-left-radius: 0;
   }
 `
 
 const rowStyles = css`
   margin-left: -${th.borderWidth('sm')};
-  border-radius: 0;
 
   &:first-of-type {
-    border-radius: md;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
   &:last-of-type {
-    border-radius: md;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }

packages/Shape/tests/index.test.tsx

@@ -24,7 +24,7 @@ describe('<Shape>', () => {
     )
     const shape = getByTestId('shape')
 
-    expect(shape).toHaveStyleRule('border-radius', '10px')
+    expect(shape).toHaveStyleRule('border-radius', '0.5rem')
   })
 
   it('using shape with unequal width / height props should use biggest value', () => {

packages/Tag/src/styles.ts

@@ -35,7 +35,6 @@ export const Tag = styled.div.withConfig({
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: md;
     line-height: initial; /* avoid cropped font */
     transition: medium;
     max-width: 100%;

packages/Themes/Welcome/src/theme.ts

@@ -42,11 +42,6 @@ const colors: Partial<WuiTheme['colors']> = {
 
 export const welcomeTheme: RecursivePartial<WuiTheme> = {
   colors,
-  radii: {
-    sm: '0px',
-    md: '0px',
-    lg: '0px',
-  },
   shadows: {
     sm: 'none',
     md: 'none',

scripts/upgrade-radii.js

@@ -0,0 +1,77 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-var-requires */
+// This script will help you to migrate to our new radii values
+// node ./scripts/upgrade-radii.js "../YOUR_PROJECT/src/**/**.{ts,tsx}"
+const fs = require('fs/promises')
+
+const glob = require('glob')
+
+// const pattern = 'src/**/**.*(ts|tsx)'
+const [pattern = ''] = process.argv.slice(2)
+
+const newRadiiValues = {
+  2: 'sm',
+  '2px': 'sm',
+  4: 'md',
+  '4px': 'md',
+  8: 'lg',
+  '8px': 'lg',
+  16: 'xl',
+  '16px': 'xl',
+}
+
+const getNewRadiiValue = value => newRadiiValues[value] || value
+const removeQuotes = value => value.replaceAll('{', '').replaceAll('}', '').replaceAll('"', '')
+const removeSemicolon = value => value.replace(';', '')
+
+const cleanJsxRadiiValue = prop => {
+  const [key, value] = prop.split('=')
+  const newValue = getNewRadiiValue(removeQuotes(value))
+
+  return `${key}="${newValue}"`
+}
+
+const cleanStyledRadiiValue = prop => {
+  const [key, value] = prop.split(':')
+  const newValue = getNewRadiiValue(removeSemicolon(value).trim())
+
+  return `${key}: ${newValue};`
+}
+
+const upgradeJsxRadii = content => {
+  const regex = /borderRadius=(\{(2|4|8|16)}|"(2px|4px|8px|16px)")/gm
+
+  if (regex.test(content)) {
+    const newContent = content.replaceAll(regex, cleanJsxRadiiValue)
+    return newContent
+  }
+
+  return content
+}
+
+const upgradeStyledRadii = content => {
+  const regex = /(border-radius):( )(2|4|8|16);/gm
+
+  if (regex.test(content)) {
+    const newContent = content.replaceAll(regex, cleanStyledRadiiValue)
+    return newContent
+  }
+
+  return content
+}
+
+glob(pattern, (error, matches) => {
+  if (error) console.log('error', error)
+
+  matches.forEach(async match => {
+    const file = await fs.readFile(match)
+    let content = file.toString()
+
+    content = upgradeStyledRadii(content)
+    content = upgradeJsxRadii(content)
+
+    await fs.writeFile(match, content)
+  })
+
+  console.log('done')
+})