feat: add new border radii theme and reset all on components

WTTJ · May 14, 2024 · de85161 · de85161
1 parent da83126
commit de85161
Show file tree

Hide file tree

Showing 14 changed files with 7 additions and 52 deletions.
diff --git a/docs/pages/components/button.mdx b/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.

diff --git a/docs/pages/theming/customize.mdx b/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
   },

diff --git a/packages/Core/src/theme/alerts.ts b/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'],

diff --git a/packages/Core/src/theme/buttons.ts b/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 {

diff --git a/packages/Core/src/theme/cards.ts b/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,
-    },
   }
 }
diff --git a/packages/Core/src/theme/core.ts b/packages/Core/src/theme/core.ts
@@ -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)

diff --git a/packages/Core/src/theme/defaultCards.ts b/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,

diff --git a/packages/Core/src/theme/defaultFields.ts b/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: {

diff --git a/packages/Core/src/theme/toasts.ts b/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,

diff --git a/packages/Core/src/theme/tooltips.ts b/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',
   }
 }
diff --git a/packages/MarkdownEditor/src/styles.ts b/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;

diff --git a/packages/RadioTab/src/styles.ts b/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;
   }

diff --git a/packages/Tag/src/styles.ts b/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%;

diff --git a/packages/Themes/Welcome/src/theme.ts b/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',