refactor(core): update property assignments in style configs

yamada-ui · Sep 30, 2023 · e73947b · e73947b
1 parent 322fee4
commit e73947b
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 30 deletions.
diff --git a/.changeset/famous-ducks-drum.md 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
@@ -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<Y = 'responsive', M = 'colorMode'> = {

diff --git 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<Y = 'responsive', M = 'colorMode'> = {

diff --git 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<Y = 'responsive', M = 'colorMode'> = {
   /**
    * The CSS `align-items` property.

diff --git 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<Y = 'responsive', M = 'colorMode'> = {

diff --git 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<Y = 'responsive', M = 'colorMode'> = {
   /**
    * The CSS `list-style-type` property.

diff --git 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
@@ -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<Y = 'responsive', M = 'colorMode'> = {
   /**
    * The CSS `font-weight` property.