feat(styles): added shorthand props for styling

yamada-ui · Dec 23, 2023 · d1c7f17 · d1c7f17
1 parent d3c1c6e
commit d1c7f17
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 0 deletions.
diff --git a/.changeset/happy-turkeys-sing.md b/.changeset/happy-turkeys-sing.md
@@ -0,0 +1,14 @@
+---
+"@yamada-ui/core": patch
+---
+
+Added shorthand props.
+
+- `zIndex`: `z`
+- `accentColor`: `accent`
+- `caretColor`: `caret`
+- `letterSpacing`: `tracking`
+- `lineHeight`: `leading`
+- `gap`: `g`
+- `columnGap`: `gapX`, `gx`
+- `rowGap`: `gapY` , `gy`
diff --git a/packages/core/src/styles.ts b/packages/core/src/styles.ts
@@ -1069,6 +1069,8 @@ export const standardStyles: Configs = {
     token: "sizes",
     transform: transforms.token("sizes", transforms.fraction(transforms.px)),
   },
+  minBoxSize: true,
+  maxBoxSize: true,
   translateX: {
     properties: "--ui-translate-x",
     token: "spaces",
@@ -1191,6 +1193,7 @@ export const standardStyles: Configs = {
 }
 
 export const shorthandStyles: Configs = {
+  accent: standardStyles.accentColor,
   bg: standardStyles.background,
   bgAttachment: { properties: "backgroundAttachment" },
   bgBlendMode: { properties: "backgroundBlendMode" },
@@ -1229,11 +1232,18 @@ export const shorthandStyles: Configs = {
   roundedTopLeft: standardStyles.borderTopLeftRadius,
   roundedTopRight: standardStyles.borderTopRightRadius,
   shadow: standardStyles.boxShadow,
+  caret: standardStyles.caretColor,
   textColor: standardStyles.color,
+  gx: standardStyles.columnGap,
+  gapX: standardStyles.columnGap,
   flexDir: { properties: "flexDirection" },
+  text: standardStyles.fontSize,
+  g: standardStyles.gap,
   h: standardStyles.height,
   insetEnd: standardStyles.insetInlineEnd,
   insetStart: standardStyles.insetInlineStart,
+  tracking: standardStyles.letterSpacing,
+  leading: standardStyles.lineHeight,
   listStyleImg: { properties: "listStyleImage" },
   listStylePos: { properties: "listStylePosition" },
   m: standardStyles.margin,
@@ -1263,8 +1273,11 @@ export const shorthandStyles: Configs = {
   pr: standardStyles.paddingRight,
   pt: standardStyles.paddingTop,
   pos: { properties: "position" },
+  gy: standardStyles.rowGap,
+  gapY: standardStyles.rowGap,
   textDecor: { properties: "textDecoration" },
   w: standardStyles.width,
+  z: standardStyles.zIndex,
   mx: standardStyles.marginX,
   my: standardStyles.marginY,
   px: standardStyles.paddingX,
@@ -1434,6 +1447,12 @@ export type StyleProps = {
    * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
    */
   accentColor?: Token<CSS.Property.AccentColor, "colors">
+  /**
+   * The CSS `accent-color` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
+   */
+  accent?: Token<CSS.Property.AccentColor, "colors">
   /**
    * The CSS `align-content` property.
    *
@@ -2404,6 +2423,12 @@ export type StyleProps = {
    * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
    */
   caretColor?: Token<CSS.Property.CaretColor, "colors">
+  /**
+   * The CSS `caret-color` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
+   */
+  caret?: Token<CSS.Property.CaretColor, "colors">
   /**
    * The CSS `clear` property.
    *
@@ -2458,6 +2483,18 @@ export type StyleProps = {
    * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
    */
   columnGap?: Token<CSS.Property.ColumnGap | number, "spaces">
+  /**
+   * The CSS `column-gap` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
+   */
+  gx?: Token<CSS.Property.ColumnGap | number, "spaces">
+  /**
+   * The CSS `column-gap` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
+   */
+  gapX?: Token<CSS.Property.ColumnGap | number, "spaces">
   /**
    * The CSS `column-rule` property.
    *
@@ -2710,6 +2747,12 @@ export type StyleProps = {
    * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
    */
   fontSize?: Token<CSS.Property.FontSize | number, "fontSizes">
+  /**
+   * The CSS `font-size` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
+   */
+  text?: Token<CSS.Property.FontSize | number, "fontSizes">
   /**
    * The CSS `font-size-adjust` property.
    *
@@ -2836,6 +2879,12 @@ export type StyleProps = {
    * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/gap
    */
   gap?: Token<CSS.Property.Gap | number, "spaces">
+  /**
+   * The CSS `gap` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+   */
+  g?: Token<CSS.Property.Gap | number, "spaces">
   /**
    * The CSS `grid` property.
    *
@@ -3088,6 +3137,12 @@ export type StyleProps = {
    * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
    */
   letterSpacing?: Token<CSS.Property.LetterSpacing, "letterSpacings">
+  /**
+   * The CSS `letter-spacing` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
+   */
+  tracking?: Token<CSS.Property.LetterSpacing, "letterSpacings">
   /**
    * The CSS `line-break` property.
    *
@@ -3100,6 +3155,12 @@ export type StyleProps = {
    * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
    */
   lineHeight?: Token<CSS.Property.LineHeight, "lineHeights">
+  /**
+   * The CSS `line-height` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
+   */
+  leading?: Token<CSS.Property.LineHeight, "lineHeights">
   /**
    * The CSS `line-height-step` property.
    *
@@ -3904,6 +3965,18 @@ export type StyleProps = {
    * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
    */
   rowGap?: Token<CSS.Property.RowGap | number, "spaces">
+  /**
+   * The CSS `row-gap` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
+   */
+  gy?: Token<CSS.Property.RowGap | number, "spaces">
+  /**
+   * The CSS `row-gap` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
+   */
+  gapY?: Token<CSS.Property.RowGap | number, "spaces">
   /**
    * The CSS `ruby-align` property.
    *
@@ -4498,6 +4571,12 @@ export type StyleProps = {
    * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
    */
   zIndex?: Token<CSS.Property.ZIndex, "zIndices">
+  /**
+   * The CSS `z-index` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
+   */
+  z?: Token<CSS.Property.ZIndex, "zIndices">
   /**
    * The CSS `zoom` property.
    *
@@ -5003,6 +5082,20 @@ export type StyleProps = {
    * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/width
    */
   boxSize?: Token<CSS.Property.Height | CSS.Property.Width | number, "sizes">
+  /**
+   * The CSS `min-width` and `min-height` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
+   */
+  minBoxSize?: Token<CSS.Property.MinHeight | CSS.Property.MinWidth>
+  /**
+   * The CSS `max-width` and `max-height` property.
+   *
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
+   * @see Docs https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
+   */
+  maxBoxSize?: Token<CSS.Property.MaxHeight | CSS.Property.MaxWidth>
   /**
    * If `transform=auto` or `transform=auto-3d`, sets the value of `--ui-translate-x`.
    */

diff --git a/scripts/generate-css/shorthand-props.ts b/scripts/generate-css/shorthand-props.ts
@@ -3,6 +3,11 @@ import type { CSSProperties, UIProperties } from "."
 type ShorthandProps = Partial<Record<CSSProperties | UIProperties, string[]>>
 
 export const shorthandProps: ShorthandProps = {
+  fontSize: ["text"],
+  accentColor: ["accent"],
+  caretColor: ["caret"],
+  letterSpacing: ["tracking"],
+  lineHeight: ["leading"],
   background: ["bg"],
   boxShadow: ["shadow"],
   backgroundColor: ["bgColor"],
@@ -47,7 +52,11 @@ export const shorthandProps: ShorthandProps = {
   paddingInlineStart: ["ps", "paddingStart"],
   paddingRight: ["pr"],
   paddingInlineEnd: ["pe", "paddingEnd"],
+  gap: ["g"],
+  columnGap: ["gx", "gapX"],
+  rowGap: ["gy", "gapY"],
   position: ["pos"],
+  zIndex: ["z"],
   insetInlineStart: ["insetStart"],
   insetInlineEnd: ["insetEnd"],
   listStylePosition: ["listStylePos"],

diff --git a/scripts/generate-css/ui-props.ts b/scripts/generate-css/ui-props.ts
@@ -50,6 +50,8 @@ export const uiProps = createUIProps({
     properties: ["borderEndStartRadius", "borderEndEndRadius"],
   },
   boxSize: { properties: ["width", "height"] },
+  minBoxSize: { properties: ["minWidth", "minHeight"] },
+  maxBoxSize: { properties: ["maxWidth", "maxHeight"] },
   translateX: {
     properties: "--ui-translate-x",
     description: [