diff --git a/.changeset/famous-ducks-drum.md b/.changeset/famous-ducks-drum.md new file mode 100644 index 0000000000..a08c8fce65 --- /dev/null +++ b/.changeset/famous-ducks-drum.md @@ -0,0 +1,5 @@ +--- +'@yamada-ui/core': patch +--- + +Updated property assignments in style configs. diff --git a/packages/core/src/styles/background.ts b/packages/core/src/styles/background.ts index bcc3d027f3..21af31f540 100644 --- a/packages/core/src/styles/background.ts +++ b/packages/core/src/styles/background.ts @@ -11,20 +11,20 @@ export const background: Configs = { backgroundRepeat: true, backgroundAttachment: true, backgroundClip: { transform: transforms.bgClip }, + bgSize: configs.prop('backgroundSize'), + bgPosition: configs.prop('backgroundPosition'), + bg: configs.color('background'), + bgColor: configs.color('backgroundColor'), + bgPos: configs.prop('backgroundPosition'), + bgRepeat: configs.prop('backgroundRepeat'), + bgAttachment: configs.prop('backgroundAttachment'), + bgGradient: configs.gradient('backgroundImage'), + bgClip: { transform: transforms.bgClip }, } Object.assign(background, { - bg: background.background, - bgColor: background.backgroundColor, bgImage: background.backgroundImage, bgImg: background.backgroundImage, - bgGradient: background.backgroundImage, - bgPos: background.bgPosition, - bgClip: background.backgroundClip, - bgSize: background.backgroundSize, - bgPosition: background.backgroundPosition, - bgRepeat: background.backgroundRepeat, - bgAttachment: background.backgroundAttachment, }) export type BackgroundProps = { diff --git a/packages/core/src/styles/effect.ts b/packages/core/src/styles/effect.ts index d1a84a731a..7fe18c7925 100644 --- a/packages/core/src/styles/effect.ts +++ b/packages/core/src/styles/effect.ts @@ -5,14 +5,14 @@ import { Configs, configs } from './config' export const effect: Configs = { boxShadow: configs.shadow('boxShadow'), mixBlendMode: true, + blendMode: configs.prop('mixBlendMode'), backgroundBlendMode: true, + bgBlendMode: configs.prop('backgroundBlendMode'), opacity: true, } Object.assign(effect, { shadow: effect.boxShadow, - blendMode: effect.mixBlendMode, - backgroundBlendMode: effect.backgroundBlendMode, }) export type EffectProps = { diff --git a/packages/core/src/styles/flex.ts b/packages/core/src/styles/flex.ts index 32ec6de818..eae7ef6283 100644 --- a/packages/core/src/styles/flex.ts +++ b/packages/core/src/styles/flex.ts @@ -9,6 +9,7 @@ export const flex: Configs = { justifyContent: true, flexWrap: true, flexDirection: true, + flexDir: { properties: 'flexDirection' }, flex: true, flexFlow: true, flexGrow: true, @@ -25,10 +26,6 @@ export const flex: Configs = { columnGap: configs.space('columnGap'), } -Object.assign(flex, { - flexDir: flex.flexDirection, -}) - export type FlexProps = { /** * The CSS `align-items` property. diff --git a/packages/core/src/styles/layout.ts b/packages/core/src/styles/layout.ts index 9a4a79a94e..9591a1a7a7 100644 --- a/packages/core/src/styles/layout.ts +++ b/packages/core/src/styles/layout.ts @@ -20,8 +20,11 @@ export const layout: Configs = { overflowX: true, overflowY: true, overscrollBehavior: true, - overscrollBehaviorX: true, + overscroll: { properties: 'overscrollBehavior' }, + overscrollX: true, + textDecor: { properties: 'overscrollBehaviorX' }, overscrollBehaviorY: true, + overscrollY: { properties: 'overscrollBehaviorY' }, display: true, aspectRatio: true, verticalAlign: true, @@ -41,9 +44,6 @@ Object.assign(layout, { maxW: layout.maxWidth, minH: layout.minHeight, maxH: layout.maxHeight, - overscroll: layout.overscrollBehavior, - overscrollX: layout.overscrollBehaviorX, - overscrollY: layout.overscrollBehaviorY, }) export type LayoutProps = { diff --git a/packages/core/src/styles/list.ts b/packages/core/src/styles/list.ts index da79cef403..039f675b22 100644 --- a/packages/core/src/styles/list.ts +++ b/packages/core/src/styles/list.ts @@ -1,18 +1,15 @@ import type * as CSS from 'csstype' import { Token } from '../css' -import { Configs } from './config' +import { Configs, configs } from './config' export const list: Configs = { listStyleType: true, listStylePosition: true, + listStylePos: configs.prop('listStylePosition'), listStyleImage: true, + listStyleImg: configs.prop('listStyleImage'), } -Object.assign(list, { - listStylePos: list.listStylePosition, - listStyleImg: list.listStyleImage, -}) - export type ListProps = { /** * The CSS `list-style-type` property. diff --git a/packages/core/src/styles/position.ts b/packages/core/src/styles/position.ts index 87c57f20fe..76f081fc44 100644 --- a/packages/core/src/styles/position.ts +++ b/packages/core/src/styles/position.ts @@ -4,6 +4,7 @@ import { Configs, configs } from './config' export const position: Configs = { position: true, + pos: configs.prop('position'), zIndex: configs.prop('zIndex', 'zIndices'), inset: configs.space('inset'), insetX: configs.space(['left', 'right']), @@ -21,7 +22,6 @@ export const position: Configs = { } Object.assign(position, { - pos: position.position, insetStart: position.insetInlineStart, insetEnd: position.insetInlineEnd, }) diff --git a/packages/core/src/styles/typography.ts b/packages/core/src/styles/typography.ts index 48fcc70722..f4b9cf1d61 100644 --- a/packages/core/src/styles/typography.ts +++ b/packages/core/src/styles/typography.ts @@ -19,6 +19,7 @@ export const typography: Configs = { whiteSpace: true, textDecorationColor: configs.color('textDecorationColor'), textDecoration: true, + textDecor: { properties: 'textDecoration' }, textDecorationLine: true, textDecorationStyle: true, textDecorationThickness: true, @@ -39,10 +40,6 @@ export const typography: Configs = { }, } -Object.assign(typography, { - textDecor: typography.textDecoration, -}) - export type TypographyProps = { /** * The CSS `font-weight` property.