@uniai-fe/uds-primitives 0.10.3 → 0.11.0

package/README.md

@@ -320,6 +320,7 @@ function LinkButton() {
 - 슬롯: `button-label`, `button-icon`, `button-left`, `button-right`, `button-loading`
 - Modifier: `button-scale-*`, `button-fill-*`, `button-priority-*`, `button-state-*`, `button-size-*`, `button-block`, `button-icon-left/right`
 - `scale` prop은 legacy 호환용이며 `fill`/`size`를 명시 사용하는 것이 권장된다.
+- `Button.Default`의 `priority`는 `primary|secondary|tertiary|green|yellow|orange|teal|pink|red|darkGray|lightGray`를 지원한다. 신규 컬러 preset은 `--button-default-{priority}-*` 변수를 컨테이너 범위에서 재정의해 상태별로 교정할 수 있다.
 - `loading` 상태는 readonly와 동일하게 잠기며 hover/pressed 반응을 막는다. anchor 등 커스텀 요소도 `aria-disabled="true"`를 통해 동일한 스타일을 적용받는다.
 
 ### TextButton / RoundButton 템플릿
@@ -345,7 +346,7 @@ function Templates() {
 ```
 
 - TextButton(`Button.Text`)은 `size="small|medium|large"` + `priority="secondary|tertiary"`만 허용한다.
-- RoundButton(`Button.Rounded`)은 size만 지정하면 되고 priority는 기본 Button과 동일하게 `primary|secondary|tertiary`를 사용한다.
+- RoundButton(`Button.Rounded`)은 `priority="primary|secondary|tertiary"`만 사용한다.
 - 템플릿별 클래스를 추가로 노출한다: `.button-template-text`, `.button-template-text-size-*`, `.button-template-round`, `.button-template-round-size-*`.
 - 스토리북 `primitives/Button` Story에서 solid/outlined/텍스트/라운드 4가지 카테고리를 한 번에 확인할 수 있다.
 

package/dist/styles.css

@@ -195,6 +195,71 @@
   --button-default-tertiary-outline-hover-foreground: var(--color-neutral-20);
   --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(
@@ -1609,10 +1674,7 @@
 .button:where(
     .button-fill-outlined.button-priority-primary
   )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-primary-solid-bg,
-    var(--color-primary-default)
-  );
+  background-color: var(--button-default-primary-solid-bg);
   border-color: var(
     --button-default-primary-outline-border,
     var(--color-primary-default)
@@ -1716,10 +1778,7 @@
 .button:where(
     .button-fill-outlined.button-priority-secondary
   )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-secondary-solid-bg,
-    var(--color-blue-95, #e5eeff)
-  );
+  background-color: var(--button-default-secondary-solid-bg);
   border-color: var(
     --button-default-secondary-outline-border,
     var(--color-cool-gray-90)
@@ -1835,15 +1894,638 @@
 .button:where(
     .button-fill-outlined.button-priority-tertiary
   )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-tertiary-solid-bg,
-    var(--color-surface-neutral)
-  );
+  background-color: var(--button-default-tertiary-solid-bg);
   border-color: var(
     --button-default-tertiary-outline-border,
     var(--color-cool-gray-90)
   );
 }
+.button:where(.button-fill-solid.button-priority-green) {
+  background-color: var(--button-default-green-solid-bg);
+  border-color: var(--button-default-green-solid-bg);
+  color: var(--button-default-green-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-green):disabled,
+.button:where(.button-fill-solid.button-priority-green)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-green):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-green
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-green-solid-hover-bg);
+  border-color: var(--button-default-green-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-green):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-green
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-green-solid-active-bg);
+  border-color: var(--button-default-green-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-green) {
+  background-color: transparent;
+  color: var(--button-default-green-outline-foreground);
+  border-color: var(--button-default-green-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-green):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-green
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-green):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-green
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-green-outline-hover-bg);
+  border-color: var(--button-default-green-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-green):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-green
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-green-outline-active-bg);
+  border-color: var(--button-default-green-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-yellow) {
+  background-color: var(--button-default-yellow-solid-bg);
+  border-color: var(--button-default-yellow-solid-bg);
+  color: var(--button-default-yellow-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-yellow):disabled,
+.button:where(.button-fill-solid.button-priority-yellow)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-yellow):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-yellow
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-yellow-solid-hover-bg);
+  border-color: var(--button-default-yellow-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-yellow):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-yellow
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-yellow-solid-active-bg);
+  border-color: var(--button-default-yellow-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-yellow) {
+  background-color: transparent;
+  color: var(--button-default-yellow-outline-foreground);
+  border-color: var(--button-default-yellow-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-yellow):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-yellow
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-yellow):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-yellow
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-yellow-outline-hover-bg);
+  border-color: var(--button-default-yellow-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-yellow):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-yellow
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-yellow-outline-active-bg);
+  border-color: var(--button-default-yellow-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-orange) {
+  background-color: var(--button-default-orange-solid-bg);
+  border-color: var(--button-default-orange-solid-bg);
+  color: var(--button-default-orange-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-orange):disabled,
+.button:where(.button-fill-solid.button-priority-orange)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-orange):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-orange
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-orange-solid-hover-bg);
+  border-color: var(--button-default-orange-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-orange):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-orange
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-orange-solid-active-bg);
+  border-color: var(--button-default-orange-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-orange) {
+  background-color: transparent;
+  color: var(--button-default-orange-outline-foreground);
+  border-color: var(--button-default-orange-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-orange):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-orange
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-orange):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-orange
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-orange-outline-hover-bg);
+  border-color: var(--button-default-orange-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-orange):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-orange
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-orange-outline-active-bg);
+  border-color: var(--button-default-orange-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-teal) {
+  background-color: var(--button-default-teal-solid-bg);
+  border-color: var(--button-default-teal-solid-bg);
+  color: var(--button-default-teal-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-teal):disabled,
+.button:where(.button-fill-solid.button-priority-teal)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-teal):hover:not(:disabled):not(
+    [aria-disabled="true"]
+  ),
+.button:where(
+    .button-fill-solid.button-priority-teal
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-teal-solid-hover-bg);
+  border-color: var(--button-default-teal-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-teal):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-teal
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-teal-solid-active-bg);
+  border-color: var(--button-default-teal-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-teal) {
+  background-color: transparent;
+  color: var(--button-default-teal-outline-foreground);
+  border-color: var(--button-default-teal-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-teal):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-teal
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-teal):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-teal
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-teal-outline-hover-bg);
+  border-color: var(--button-default-teal-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-teal):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-teal
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-teal-outline-active-bg);
+  border-color: var(--button-default-teal-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-pink) {
+  background-color: var(--button-default-pink-solid-bg);
+  border-color: var(--button-default-pink-solid-bg);
+  color: var(--button-default-pink-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-pink):disabled,
+.button:where(.button-fill-solid.button-priority-pink)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-pink):hover:not(:disabled):not(
+    [aria-disabled="true"]
+  ),
+.button:where(
+    .button-fill-solid.button-priority-pink
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-pink-solid-hover-bg);
+  border-color: var(--button-default-pink-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-pink):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-pink
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-pink-solid-active-bg);
+  border-color: var(--button-default-pink-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-pink) {
+  background-color: transparent;
+  color: var(--button-default-pink-outline-foreground);
+  border-color: var(--button-default-pink-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-pink):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-pink
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-pink):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-pink
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-pink-outline-hover-bg);
+  border-color: var(--button-default-pink-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-pink):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-pink
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-pink-outline-active-bg);
+  border-color: var(--button-default-pink-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-red) {
+  background-color: var(--button-default-red-solid-bg);
+  border-color: var(--button-default-red-solid-bg);
+  color: var(--button-default-red-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-red):disabled,
+.button:where(.button-fill-solid.button-priority-red)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-red):hover:not(:disabled):not(
+    [aria-disabled="true"]
+  ),
+.button:where(
+    .button-fill-solid.button-priority-red
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-red-solid-hover-bg);
+  border-color: var(--button-default-red-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-red):active:not(:disabled):not(
+    [aria-disabled="true"]
+  ),
+.button:where(
+    .button-fill-solid.button-priority-red
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-red-solid-active-bg);
+  border-color: var(--button-default-red-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-red) {
+  background-color: transparent;
+  color: var(--button-default-red-outline-foreground);
+  border-color: var(--button-default-red-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-red):disabled,
+.button:where(.button-fill-outlined.button-priority-red)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-red):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-red
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-red-outline-hover-bg);
+  border-color: var(--button-default-red-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-red):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-red
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-red-outline-active-bg);
+  border-color: var(--button-default-red-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-darkGray) {
+  background-color: var(--button-default-dark-gray-solid-bg);
+  border-color: var(--button-default-dark-gray-solid-bg);
+  color: var(--button-default-dark-gray-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-darkGray):disabled,
+.button:where(
+    .button-fill-solid.button-priority-darkGray
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-darkGray):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-darkGray
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-dark-gray-solid-hover-bg);
+  border-color: var(--button-default-dark-gray-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-darkGray):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-darkGray
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-dark-gray-solid-active-bg);
+  border-color: var(--button-default-dark-gray-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-darkGray) {
+  background-color: transparent;
+  color: var(--button-default-dark-gray-outline-foreground);
+  border-color: var(--button-default-dark-gray-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-darkGray):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-darkGray
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-darkGray):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-darkGray
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-dark-gray-outline-hover-bg);
+  border-color: var(--button-default-dark-gray-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-darkGray):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-darkGray
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-dark-gray-outline-active-bg);
+  border-color: var(--button-default-dark-gray-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-lightGray) {
+  background-color: var(--button-default-light-gray-solid-bg);
+  border-color: var(--button-default-light-gray-solid-bg);
+  color: var(--button-default-light-gray-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-lightGray):disabled,
+.button:where(
+    .button-fill-solid.button-priority-lightGray
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-lightGray):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-lightGray
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-light-gray-solid-hover-bg);
+  border-color: var(--button-default-light-gray-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-lightGray):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-lightGray
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-light-gray-solid-active-bg);
+  border-color: var(--button-default-light-gray-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-lightGray) {
+  background-color: transparent;
+  color: var(--button-default-light-gray-outline-foreground);
+  border-color: var(--button-default-light-gray-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-lightGray):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-lightGray
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-lightGray):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-lightGray
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-light-gray-outline-hover-bg);
+  border-color: var(--button-default-light-gray-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-lightGray):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-lightGray
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-light-gray-outline-active-bg);
+  border-color: var(--button-default-light-gray-outline-border);
+}
 .button:where(.button-size-small) {
   padding-inline: var(
     --button-default-padding-inline-small,
@@ -3554,6 +4236,7 @@ figure.chip {
   background-color: var(--dropdown-option-bg-hover);
   color: var(--dropdown-option-color-hover);
 }
+.dropdown-menu-item-trigger[data-state="selected"][data-highlighted],
 .dropdown-menu-item-trigger[data-state="selected"]:hover {
   background-color: var(--dropdown-option-bg-selected);
   color: var(--dropdown-option-color-selected);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -87,11 +87,11 @@
     "react-hook-form": "^7.82.0",
     "sass": "^1.101.3",
     "typescript": "6.0.3",
+    "@uniai-fe/next-devkit": "0.4.0",
     "@uniai-fe/eslint-config": "0.4.2",
-    "@uniai-fe/uds-foundation": "0.5.0",
     "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/next-devkit": "0.4.0",
-    "@uniai-fe/util-functions": "0.4.3"
+    "@uniai-fe/util-functions": "0.4.3",
+    "@uniai-fe/uds-foundation": "0.5.0"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

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/dropdown/styles/dropdown.scss

@@ -107,6 +107,7 @@
     color: var(--dropdown-option-color-hover);
   }
 
+  &[data-state="selected"][data-highlighted],
   &[data-state="selected"]:hover {
     background-color: var(--dropdown-option-bg-selected);
     color: var(--dropdown-option-color-selected);

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