@uniai-fe/uds-primitives 0.10.4 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.10.4",
+  "version": "0.12.0",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -88,9 +88,9 @@
     "sass": "^1.101.3",
     "typescript": "6.0.3",
     "@uniai-fe/eslint-config": "0.4.2",
-    "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/util-functions": "0.4.3",
     "@uniai-fe/next-devkit": "0.4.0",
+    "@uniai-fe/util-functions": "0.4.3",
+    "@uniai-fe/tsconfig": "0.2.0",
     "@uniai-fe/uds-foundation": "0.5.0"
   },
   "scripts": {

package/src/components/button/markup/Base.tsx

@@ -19,7 +19,7 @@ import {
  * @param {"solid-xlarge" | "solid-large" | "solid-medium" | "solid-small" | "outlined-xlarge" | "outlined-large" | "outlined-medium" | "outlined-small"} [props.scale] legacy fill/size fallback 식별자.
  * @param {"solid" | "outlined"} props.fill 채움 스타일.
  * @param {"xlarge" | "large" | "medium" | "small" | "table"} props.size 버튼 크기. `table`은 Table 셀 액션용 compact 규격이다.
- * @param {"primary" | "secondary" | "tertiary"} props.priority semantic color priority.
+ * @param {"primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray"} props.priority semantic color priority.
  * @param {"default" | "readonly" | "disabled"} [props.state="default"] 내부 상태. `disabled`/`loading`과 병합된다.
  * @param {boolean} [props.block=false] true면 폭을 100%로 확장한다.
  * @param {"full" | "fit" | "fill" | "auto" | number | string} [props.width] Form.Field width preset 또는 custom width.

package/src/components/button/styles/button.scss

@@ -36,6 +36,7 @@ $button-priorities: (
         --button-default-primary-outline-hover-foreground,
         var(--color-common-100)
       ),
+    outline-active-bg: var(--button-default-primary-solid-bg),
   ),
   secondary: (
     solid-bg: var(
@@ -64,6 +65,7 @@ $button-priorities: (
         --button-default-secondary-outline-hover-foreground,
         var(--color-primary-heavy)
       ),
+    outline-active-bg: var(--button-default-secondary-solid-bg),
   ),
   tertiary: (
     solid-bg: var(
@@ -98,6 +100,87 @@ $button-priorities: (
         --button-default-tertiary-outline-hover-foreground,
         var(--color-neutral-20)
       ),
+    outline-active-bg: var(--button-default-tertiary-solid-bg),
+  ),
+  "green": (
+    solid-bg: var(--button-default-green-solid-bg),
+    solid-hover: var(--button-default-green-solid-hover-bg),
+    solid-active: var(--button-default-green-solid-active-bg),
+    solid-foreground: var(--button-default-green-solid-foreground),
+    outline-border: var(--button-default-green-outline-border),
+    outline-foreground: var(--button-default-green-outline-foreground),
+    outline-hover-bg: var(--button-default-green-outline-hover-bg),
+    outline-active-bg: var(--button-default-green-outline-active-bg),
+  ),
+  "yellow": (
+    solid-bg: var(--button-default-yellow-solid-bg),
+    solid-hover: var(--button-default-yellow-solid-hover-bg),
+    solid-active: var(--button-default-yellow-solid-active-bg),
+    solid-foreground: var(--button-default-yellow-solid-foreground),
+    outline-border: var(--button-default-yellow-outline-border),
+    outline-foreground: var(--button-default-yellow-outline-foreground),
+    outline-hover-bg: var(--button-default-yellow-outline-hover-bg),
+    outline-active-bg: var(--button-default-yellow-outline-active-bg),
+  ),
+  "orange": (
+    solid-bg: var(--button-default-orange-solid-bg),
+    solid-hover: var(--button-default-orange-solid-hover-bg),
+    solid-active: var(--button-default-orange-solid-active-bg),
+    solid-foreground: var(--button-default-orange-solid-foreground),
+    outline-border: var(--button-default-orange-outline-border),
+    outline-foreground: var(--button-default-orange-outline-foreground),
+    outline-hover-bg: var(--button-default-orange-outline-hover-bg),
+    outline-active-bg: var(--button-default-orange-outline-active-bg),
+  ),
+  "teal": (
+    solid-bg: var(--button-default-teal-solid-bg),
+    solid-hover: var(--button-default-teal-solid-hover-bg),
+    solid-active: var(--button-default-teal-solid-active-bg),
+    solid-foreground: var(--button-default-teal-solid-foreground),
+    outline-border: var(--button-default-teal-outline-border),
+    outline-foreground: var(--button-default-teal-outline-foreground),
+    outline-hover-bg: var(--button-default-teal-outline-hover-bg),
+    outline-active-bg: var(--button-default-teal-outline-active-bg),
+  ),
+  "pink": (
+    solid-bg: var(--button-default-pink-solid-bg),
+    solid-hover: var(--button-default-pink-solid-hover-bg),
+    solid-active: var(--button-default-pink-solid-active-bg),
+    solid-foreground: var(--button-default-pink-solid-foreground),
+    outline-border: var(--button-default-pink-outline-border),
+    outline-foreground: var(--button-default-pink-outline-foreground),
+    outline-hover-bg: var(--button-default-pink-outline-hover-bg),
+    outline-active-bg: var(--button-default-pink-outline-active-bg),
+  ),
+  "red": (
+    solid-bg: var(--button-default-red-solid-bg),
+    solid-hover: var(--button-default-red-solid-hover-bg),
+    solid-active: var(--button-default-red-solid-active-bg),
+    solid-foreground: var(--button-default-red-solid-foreground),
+    outline-border: var(--button-default-red-outline-border),
+    outline-foreground: var(--button-default-red-outline-foreground),
+    outline-hover-bg: var(--button-default-red-outline-hover-bg),
+    outline-active-bg: var(--button-default-red-outline-active-bg),
+  ),
+  "darkGray": (
+    solid-bg: var(--button-default-dark-gray-solid-bg),
+    solid-hover: var(--button-default-dark-gray-solid-hover-bg),
+    solid-active: var(--button-default-dark-gray-solid-active-bg),
+    solid-foreground: var(--button-default-dark-gray-solid-foreground),
+    outline-border: var(--button-default-dark-gray-outline-border),
+    outline-foreground: var(--button-default-dark-gray-outline-foreground),
+    outline-hover-bg: var(--button-default-dark-gray-outline-hover-bg),
+    outline-active-bg: var(--button-default-dark-gray-outline-active-bg),
+  ),
+  "lightGray": (
+    solid-bg: var(--button-default-light-gray-solid-bg),
+    solid-hover: var(--button-default-light-gray-solid-hover-bg),
+    solid-active: var(--button-default-light-gray-solid-active-bg),
+    solid-foreground: var(--button-default-light-gray-solid-foreground),
+    outline-border: var(--button-default-light-gray-outline-border),
+    outline-foreground: var(--button-default-light-gray-outline-foreground),
+    outline-hover-bg: var(--button-default-light-gray-outline-hover-bg),
+    outline-active-bg: var(--button-default-light-gray-outline-active-bg),
   ),
 );
 
@@ -327,7 +410,7 @@ $button-priorities: (
 
       &:active:not(:disabled):not([aria-disabled="true"]),
       &[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
-        background-color: priority-token($priority, solid-bg);
+        background-color: priority-token($priority, outline-active-bg);
         border-color: priority-token($priority, outline-border);
       }
     }

package/src/components/button/styles/variables.scss

@@ -141,6 +141,79 @@
   --button-default-tertiary-overlay-outlined-bg: var(--color-cool-gray-95);
   --button-default-tertiary-overlay-solid-bg: var(--color-surface-strong);
 
+  /* FE-274: Badge 팔레트를 초기값으로 사용하며 서비스에서 priority별로 교정할 수 있다. */
+  --button-default-green-solid-bg: var(--color-green-95);
+  --button-default-green-solid-hover-bg: var(--color-green-90);
+  --button-default-green-solid-active-bg: var(--color-green-80);
+  --button-default-green-solid-foreground: var(--color-green-45);
+  --button-default-green-outline-border: var(--color-green-45);
+  --button-default-green-outline-foreground: var(--color-green-45);
+  --button-default-green-outline-hover-bg: var(--color-green-95);
+  --button-default-green-outline-active-bg: var(--color-green-90);
+
+  --button-default-yellow-solid-bg: var(--color-yellow-95);
+  --button-default-yellow-solid-hover-bg: var(--color-yellow-90);
+  --button-default-yellow-solid-active-bg: var(--color-yellow-80);
+  --button-default-yellow-solid-foreground: var(--color-yellow-45);
+  --button-default-yellow-outline-border: var(--color-yellow-60);
+  --button-default-yellow-outline-foreground: var(--color-yellow-45);
+  --button-default-yellow-outline-hover-bg: var(--color-yellow-95);
+  --button-default-yellow-outline-active-bg: var(--color-yellow-90);
+
+  --button-default-orange-solid-bg: var(--color-orange-95);
+  --button-default-orange-solid-hover-bg: var(--color-orange-90);
+  --button-default-orange-solid-active-bg: var(--color-orange-80);
+  --button-default-orange-solid-foreground: var(--color-orange-55);
+  --button-default-orange-outline-border: var(--color-orange-70);
+  --button-default-orange-outline-foreground: var(--color-orange-55);
+  --button-default-orange-outline-hover-bg: var(--color-orange-95);
+  --button-default-orange-outline-active-bg: var(--color-orange-90);
+
+  --button-default-teal-solid-bg: var(--color-teal-95);
+  --button-default-teal-solid-hover-bg: var(--color-teal-90);
+  --button-default-teal-solid-active-bg: var(--color-teal-80);
+  --button-default-teal-solid-foreground: var(--color-teal-45);
+  --button-default-teal-outline-border: var(--color-teal-45);
+  --button-default-teal-outline-foreground: var(--color-teal-45);
+  --button-default-teal-outline-hover-bg: var(--color-teal-95);
+  --button-default-teal-outline-active-bg: var(--color-teal-90);
+
+  --button-default-pink-solid-bg: var(--color-pink-95);
+  --button-default-pink-solid-hover-bg: var(--color-pink-90);
+  --button-default-pink-solid-active-bg: var(--color-pink-80);
+  --button-default-pink-solid-foreground: var(--color-pink-55);
+  --button-default-pink-outline-border: var(--color-pink-70);
+  --button-default-pink-outline-foreground: var(--color-pink-55);
+  --button-default-pink-outline-hover-bg: var(--color-pink-95);
+  --button-default-pink-outline-active-bg: var(--color-pink-90);
+
+  --button-default-red-solid-bg: var(--color-red-95);
+  --button-default-red-solid-hover-bg: var(--color-red-90);
+  --button-default-red-solid-active-bg: var(--color-red-80);
+  --button-default-red-solid-foreground: var(--color-red-55);
+  --button-default-red-outline-border: var(--color-red-70);
+  --button-default-red-outline-foreground: var(--color-red-55);
+  --button-default-red-outline-hover-bg: var(--color-red-95);
+  --button-default-red-outline-active-bg: var(--color-red-90);
+
+  --button-default-dark-gray-solid-bg: var(--color-cool-gray-20);
+  --button-default-dark-gray-solid-hover-bg: var(--color-cool-gray-10);
+  --button-default-dark-gray-solid-active-bg: var(--color-cool-gray-10);
+  --button-default-dark-gray-solid-foreground: var(--color-common-100);
+  --button-default-dark-gray-outline-border: var(--color-cool-gray-20);
+  --button-default-dark-gray-outline-foreground: var(--color-cool-gray-20);
+  --button-default-dark-gray-outline-hover-bg: var(--color-cool-gray-95);
+  --button-default-dark-gray-outline-active-bg: var(--color-cool-gray-90);
+
+  --button-default-light-gray-solid-bg: var(--color-cool-gray-95);
+  --button-default-light-gray-solid-hover-bg: var(--color-cool-gray-90);
+  --button-default-light-gray-solid-active-bg: var(--color-cool-gray-80);
+  --button-default-light-gray-solid-foreground: var(--color-cool-gray-20);
+  --button-default-light-gray-outline-border: var(--color-cool-gray-80);
+  --button-default-light-gray-outline-foreground: var(--color-cool-gray-20);
+  --button-default-light-gray-outline-hover-bg: var(--color-cool-gray-99);
+  --button-default-light-gray-outline-active-bg: var(--color-cool-gray-95);
+
   /* text button colors */
   --button-text-secondary-foreground: var(--color-primary-default);
   --button-text-secondary-hover-bg: var(

package/src/components/button/types/options.ts

@@ -51,6 +51,14 @@ export const BUTTON_PRIORITIES: ButtonPriority[] = [
   "primary",
   "secondary",
   "tertiary",
+  "green",
+  "yellow",
+  "orange",
+  "teal",
+  "pink",
+  "red",
+  "darkGray",
+  "lightGray",
 ] as const;
 
 /**

package/src/components/button/types/props.ts

@@ -3,13 +3,25 @@ import type { FormFieldWidth } from "../../form/types";
 
 /**
  * Button; priority 옵션
- * @typedef {"primary" | "secondary" | "tertiary"} ButtonPriority
+ * @typedef {"primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray"} ButtonPriority
  * @desc
  * - primary: 브랜드 컬러를 사용하는 기본 버튼.
  * - secondary: 보조 강조 색상.
  * - tertiary: 중립/회색 계열 보조 버튼.
+ * - green~lightGray: Button.Default에서 사용하는 고정 컬러 preset.
  */
-export type ButtonPriority = "primary" | "secondary" | "tertiary";
+export type ButtonPriority =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "green"
+  | "yellow"
+  | "orange"
+  | "teal"
+  | "pink"
+  | "red"
+  | "darkGray"
+  | "lightGray";
 
 /**
  * Button; fill 옵션
@@ -99,7 +111,7 @@ type SharedElementProps = Omit<NativeButtonProps, "children"> &
  * @property {"solid-xlarge" | "solid-large" | "solid-medium" | "solid-small" | "outlined-xlarge" | "outlined-large" | "outlined-medium" | "outlined-small"} [scale] 레이아웃/spacing 집합. 추후 fill/size 조합으로 대체 예정이다.
  * @property {"solid" | "outlined"} fill 채움 스타일. scale 조합보다 우선한다.
  * @property {"xlarge" | "large" | "medium" | "small" | "table"} size 높이/타이포 스케일. scale 조합보다 우선한다.
- * @property {"primary" | "secondary" | "tertiary"} priority semantic color priority.
+ * @property {"primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray"} priority semantic color priority.
  * @property {"default" | "readonly" | "disabled"} [state] UI 상태. disabled prop과 조합된다.
  * @property {boolean} [block] width:100% 확장 여부.
  * @property {FormFieldWidth} [width] width preset. block보다 우선 적용된다.
@@ -128,7 +140,8 @@ export interface ButtonProps extends SharedElementProps {
   scale?: ButtonScale;
   /**
    * @required
-   * "primary" | "secondary" | "tertiary"
+   * "primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" |
+   * "teal" | "pink" | "red" | "darkGray" | "lightGray"
    */
   priority: ButtonPriority;
   /**
@@ -196,7 +209,7 @@ export type TextButtonSize = "small" | "medium" | "large";
  * - `secondary`
  * - `tertiary`
  */
-export type TextButtonPriority = Exclude<ButtonPriority, "primary">;
+export type TextButtonPriority = "secondary" | "tertiary";
 
 /**
  * Button Types; Text preset props
@@ -238,6 +251,12 @@ export interface TextButtonProps extends Omit<
  */
 export type RoundButtonSize = "small" | "medium" | "large";
 
+/**
+ * Button Types; Rounded preset priority 옵션
+ * @typedef {"primary" | "secondary" | "tertiary"} RoundButtonPriority
+ */
+export type RoundButtonPriority = "primary" | "secondary" | "tertiary";
+
 /**
  * Button Types; Rounded preset props
  * @property {ElementType} [as] 렌더링할 요소. 기본값은 button.
@@ -253,8 +272,13 @@ export type RoundButtonSize = "small" | "medium" | "large";
  */
 export interface RoundButtonProps extends Omit<
   ButtonProps,
-  "scale" | "size" | "fill"
+  "scale" | "priority" | "size" | "fill"
 > {
+  /**
+   * 라운드 버튼 전용 priority 축.
+   * "primary" | "secondary" | "tertiary"
+   */
+  priority: RoundButtonPriority;
   /**
    * 라운드 버튼 전용 size 축.
    * "small" | "medium" | "large"

package/src/components/input/markup/address/Button.tsx

@@ -12,7 +12,7 @@ import { useAddress } from "../../hooks/useAddress";
  * @param {AddressFindButtonProps} props 버튼 props
  * @param {React.ReactNode} [props.label] 버튼 라벨 텍스트
  * @param {string} [props.className] 커스텀 className
- * @param {"primary"|"secondary"|"tertiary"} [props.priority="secondary"] 버튼 priority
+ * @param {"primary"|"secondary"|"tertiary"|"green"|"yellow"|"orange"|"teal"|"pink"|"red"|"darkGray"|"lightGray"} [props.priority="secondary"] 버튼 priority
  * @param {"solid"|"outlined"} [props.fill="solid"] 버튼 fill 타입
  * @param {"xlarge"|"large"|"medium"|"small"} [props.size="xlarge"] 버튼 size
  * @param {"button"|"submit"|"reset"} [props.type="button"] native type