From 8ba32e2b46de5729560ffe0e163a8fe0d1d2a88a Mon Sep 17 00:00:00 2001 From: theojungle Date: Tue, 14 May 2024 11:18:30 +0200 Subject: [PATCH] feat: add new border radii theme and reset all on components --- docs/pages/components/button.mdx | 9 --------- docs/pages/theming/customize.mdx | 6 ------ packages/Core/src/theme/alerts.ts | 3 +-- packages/Core/src/theme/buttons.ts | 3 +-- packages/Core/src/theme/cards.ts | 10 +--------- packages/Core/src/theme/core.ts | 6 +++--- packages/Core/src/theme/defaultCards.ts | 4 ---- packages/Core/src/theme/defaultFields.ts | 3 +-- packages/Core/src/theme/radii.ts | 12 +++++++++++- packages/Core/src/theme/toasts.ts | 3 +-- packages/Core/src/theme/tooltips.ts | 3 +-- packages/MarkdownEditor/src/styles.ts | 1 - packages/RadioTab/src/styles.ts | 6 ------ packages/Tag/src/styles.ts | 1 - packages/Themes/Welcome/src/theme.ts | 5 ----- 15 files changed, 20 insertions(+), 55 deletions(-) diff --git a/docs/pages/components/button.mdx b/docs/pages/components/button.mdx index a74852df24..734f8c1485 100644 --- 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/). ``` -## Radius - -You can add `borderRadius` property from [xstyled](https://xstyled.dev/docs/border-radius/). - -```jsx row - - -``` - ## ButtonGroup See documentation from [ButtonGroup](/components/button-group) component. diff --git a/docs/pages/theming/customize.mdx b/docs/pages/theming/customize.mdx index b5ecd33e0b..9d8331812a 100644 --- 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 index b2f093b550..20291265c4 100644 --- a/packages/Core/src/theme/alerts.ts +++ b/packages/Core/src/theme/alerts.ts @@ -15,14 +15,13 @@ export type ThemeAlerts = { } & Record 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 index bfe594350e..f44c310ed7 100644 --- a/packages/Core/src/theme/buttons.ts +++ b/packages/Core/src/theme/buttons.ts @@ -34,13 +34,12 @@ export type ThemeButtons = Record & Record<'icon', Record>> 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 index fff0089786..5a71544e15 100644 --- 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 index 3d0d7bcd8d..76ab33622c 100644 --- a/packages/Core/src/theme/core.ts +++ b/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) diff --git a/packages/Core/src/theme/defaultCards.ts b/packages/Core/src/theme/defaultCards.ts index 6da7b2a305..2f073c27a6 100644 --- 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 index 31d82c6005..022780b826 100644 --- 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/radii.ts b/packages/Core/src/theme/radii.ts index 25a82c6cc7..13c1e6555d 100644 --- a/packages/Core/src/theme/radii.ts +++ b/packages/Core/src/theme/radii.ts @@ -1,8 +1,18 @@ +import { WuiTheme } from './types' + export type ThemeRadii = { 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 { + sm: theme.toRem(2), + md: theme.toRem(4), + lg: theme.toRem(8), + xl: theme.toRem(12), + } +} diff --git a/packages/Core/src/theme/toasts.ts b/packages/Core/src/theme/toasts.ts index fce71672f3..d1c3fb272d 100644 --- 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 index e4995c5fde..b8cbcb6b1a 100644 --- 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 index 9ef7df7c27..965236c1f3 100644 --- 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 index f807811e21..b5e785f2f8 100644 --- a/packages/RadioTab/src/styles.ts +++ b/packages/RadioTab/src/styles.ts @@ -13,16 +13,13 @@ 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; } @@ -30,16 +27,13 @@ const columnStyles = css` 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 index ce475e5fb8..5a11655a03 100644 --- 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 index 175b5c1bc7..427f5c2bdd 100644 --- a/packages/Themes/Welcome/src/theme.ts +++ b/packages/Themes/Welcome/src/theme.ts @@ -42,11 +42,6 @@ const colors: Partial = { export const welcomeTheme: RecursivePartial = { colors, - radii: { - sm: '0px', - md: '0px', - lg: '0px', - }, shadows: { sm: 'none', md: 'none',