@uniai-fe/uds-primitives 0.1.10 → 0.1.12

package/dist/styles.css

@@ -105,11 +105,11 @@
   --theme-button-color-blue-90: var(--color-blue-90);
   --theme-button-color-blue-50: var(--color-blue-50);
   --theme-button-color-blue-45: var(--color-blue-45);
-  --theme-button-overlay-solid-tertiary-bg: var(--color-bg-surface-strong);
+  --theme-button-overlay-solid-tertiary-bg: var(--color-surface-strong);
   /* Confirm dialog cancel 버튼을 위한 solid tertiary 색상 정의 */
-  --theme-button-tertiary-solid-bg: var(--color-bg-surface-neutral);
-  --theme-button-tertiary-solid-hover-bg: var(--color-bg-surface-strong);
-  --theme-button-tertiary-solid-pressed-bg: var(--color-bg-surface-strong);
+  --theme-button-tertiary-solid-bg: var(--color-surface-neutral);
+  --theme-button-tertiary-solid-hover-bg: var(--color-surface-strong);
+  --theme-button-tertiary-solid-pressed-bg: var(--color-surface-strong);
   --theme-button-tertiary-solid-foreground: var(--color-label-neutral);
   --theme-button-secondary-solid-bg: var(--color-blue-95, #e5eeff);
   --theme-button-secondary-solid-hover-bg: #dbe9ff;
@@ -117,11 +117,11 @@
   --theme-button-color-cool-gray-90: var(--color-cool-gray-90);
   --theme-button-color-cool-gray-95: var(--color-cool-gray-95);
   --theme-button-color-cool-gray-10: var(--color-cool-gray-10);
-  --theme-button-color-bg-surface-standard: var(--color-bg-surface-standard);
+  --theme-button-color-bg-surface-standard: var(--color-surface-standard);
   --theme-button-color-bg-alternative-cool-gray: var(
   --color-bg-alternative-cool-gray
   );
-  --theme-button-color-bg-surface-strong: var(--color-bg-surface-strong);
+  --theme-button-color-bg-surface-strong: var(--color-surface-strong);
   --theme-button-color-label-disabled: var(--color-label-disabled);
   /* overlays */
   --theme-button-overlay-solid-secondary-bg: var(--color-blue-90);
@@ -135,7 +135,7 @@
   --theme-checkbox-control-radius-medium: var(--theme-radius-xsmall-3, 3px);
   --theme-checkbox-control-radius-large: var(--theme-radius-small-1, 4px);
   --theme-checkbox-border-width: 1.4px;
-  --theme-checkbox-border-color: var(--color-border-standard-assistive);
+  --theme-checkbox-border-color: var(--color-border-assistive);
   --theme-checkbox-border-selected: var(--color-primary-default);
   --theme-checkbox-surface: var(--color-common-100);
   --theme-checkbox-surface-selected: var(--color-primary-default);
@@ -157,7 +157,7 @@
   --theme-chip-font-size: var(--font-body-xsmall-size, 13px);
   --theme-chip-font-weight: var(--font-body-xsmall-weight, 400);
   --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
-  --drawer-surface-bg: var(--color-bg-surface-static-white);
+  --drawer-surface-bg: var(--color-surface-static-white);
   --drawer-radius-large: var(--theme-radius-large-2);
   --drawer-radius-medium: var(--theme-radius-large-1);
   --drawer-body-color: var(--color-label-standard);
@@ -202,9 +202,7 @@
   --theme-input-border-success: #99bdff;
   --theme-input-border-error: rgba(218, 29, 11, 0.44);
   --theme-input-border-disabled: var(--color-border-standard-cool-gray);
-  --theme-input-border-underline-disabled: var(
-  --color-border-standard-assistive
-  );
+  --theme-input-border-underline-disabled: var(--color-border-assistive);
   --theme-input-surface: var(--color-common-100);
   --theme-input-surface-muted: var(--color-neutral-99);
   --theme-input-surface-disabled: var(--color-neutral-95);
@@ -219,7 +217,7 @@
   --theme-navigation-label-font-weight: 500;
   --theme-navigation-label-letter-spacing: -0.12px;
   --theme-navigation-bg: var(--color-common-100, #ffffff);
-  --theme-navigation-border: var(--color-border-standard-assistive, #e4e5e7);
+  --theme-navigation-border: var(--color-border-assistive, #e4e5e7);
   --theme-navigation-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
   --theme-navigation-color: var(--color-label-strong, #3d3f43);
   --theme-navigation-color-active: var(--color-primary-default, #0061ff);
@@ -231,11 +229,11 @@
   --theme-radio-indicator-border-width: 1.4px;
   --theme-radio-indicator-border-width-selected-medium: 4px;
   --theme-radio-indicator-border-width-selected-large: 6px;
-  --theme-radio-border-color: var(--color-border-standard-assistive);
+  --theme-radio-border-color: var(--color-border-assistive);
   --theme-radio-border-selected: var(--color-primary-default);
   --theme-radio-surface-selected: var(--color-primary-default);
-  --theme-radio-surface-disabled: var(--color-border-standard-assistive);
-  --theme-radio-border-disabled: var(--color-border-standard-assistive);
+  --theme-radio-surface-disabled: var(--color-border-assistive);
+  --theme-radio-border-disabled: var(--color-border-assistive);
   --theme-radio-disabled-selected-fill: var(--color-primary-default);
   --theme-radio-label-color: var(--color-label-strong);
   --theme-radio-label-disabled: var(--color-label-disabled);
@@ -244,7 +242,7 @@
   --theme-radio-card-background: var(--color-common-100);
   --theme-radio-card-title-color: var(--color-label-strong);
   --theme-radio-card-description-color: var(--color-label-neutral);
-  --theme-radio-card-badge-background: var(--color-bg-surface-static-blue);
+  --theme-radio-card-badge-background: var(--color-surface-static-blue);
   --theme-radio-card-badge-color: var(--color-primary-default);
   --theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-radio-disabled-selected-opacity: 0.28;
@@ -356,7 +354,7 @@
 }
 
 .badge:where([data-style=outlined]) {
-  background-color: var(--color-bg-surface-static-white, #ffffff);
+  background-color: var(--color-surface-static-white, #ffffff);
   border-width: 1px;
   border-style: solid;
   border-color: var(--badge-outline-border-color);
@@ -413,7 +411,7 @@
 }
 
 .badge:where([data-style=fill][data-intent=gray]) {
-  --badge-fill-bg-color: var(--color-bg-surface-neutral, #f2f2f2);
+  --badge-fill-bg-color: var(--color-surface-neutral, #f2f2f2);
   --badge-fill-label-color: var(--color-label-neutral, #797e86);
 }
 
@@ -449,12 +447,12 @@
 }
 
 .badge:where([data-style=outlined][data-intent=tertiary]) {
-  --badge-outline-border-color: var(--color-border-standard-heavy, #313235);
+  --badge-outline-border-color: var(--color-border-heavy, #313235);
   --badge-outline-label-color: var(--color-label-strong, #18191b);
 }
 
 .badge:where([data-style=outlined][data-intent=gray]) {
-  --badge-outline-border-color: var(--color-border-standard-assistive, #e4e5e7);
+  --badge-outline-border-color: var(--color-border-assistive, #e4e5e7);
   --badge-outline-label-color: var(--color-label-standard, #3d3f43);
 }
 
@@ -538,7 +536,7 @@
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 :where(.button):not(.button-fill-solid):not(.button-fill-outlined):active:not(:disabled):not([aria-disabled=true]), :where(.button):not(.button-fill-solid):not(.button-fill-outlined)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 
@@ -553,8 +551,8 @@
   color: var(--theme-button-color-common-100, var(--color-common-100));
 }
 :where(.button.button-fill-solid.button-priority-primary):disabled, :where(.button.button-fill-solid.button-priority-primary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-solid.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
@@ -572,8 +570,8 @@
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
 :where(.button.button-fill-outlined.button-priority-primary):disabled, :where(.button.button-fill-outlined.button-priority-primary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-outlined.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
@@ -591,8 +589,8 @@
   color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
 :where(.button.button-fill-solid.button-priority-secondary):disabled, :where(.button.button-fill-solid.button-priority-secondary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-solid.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
@@ -610,8 +608,8 @@
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 :where(.button.button-fill-outlined.button-priority-secondary):disabled, :where(.button.button-fill-outlined.button-priority-secondary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-outlined.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
@@ -624,22 +622,22 @@
 }
 
 :where(.button.button-fill-solid.button-priority-tertiary) {
-  background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
-  border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
+  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
   color: var(--theme-button-tertiary-solid-foreground, var(--color-label-neutral));
 }
 :where(.button.button-fill-solid.button-priority-tertiary):disabled, :where(.button.button-fill-solid.button-priority-tertiary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-bg-surface-static-cool-gray));
-  border-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-bg-surface-static-cool-gray));
+  background-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-surface-static-cool-gray));
+  border-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-surface-static-cool-gray));
 }
 :where(.button.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-bg-surface-strong));
-  border-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-bg-surface-strong));
+  background-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-surface-strong));
+  border-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-surface-strong));
 }
 
 :where(.button.button-fill-outlined.button-priority-tertiary) {
@@ -648,8 +646,8 @@
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 :where(.button.button-fill-outlined.button-priority-tertiary):disabled, :where(.button.button-fill-outlined.button-priority-tertiary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-outlined.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
@@ -657,7 +655,7 @@
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 :where(.button.button-fill-outlined.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 
@@ -744,13 +742,13 @@
 }
 
 :where(.button.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--color-border-standard-strong, var(--color-bg-surface-strong));
-  border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  background-color: var(--color-border-strong, var(--color-surface-strong));
+  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
 :where(.button.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--color-border-standard-strong, var(--color-bg-surface-strong));
-  border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  background-color: var(--color-border-strong, var(--color-surface-strong));
+  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.48);
 }
 
@@ -789,8 +787,8 @@
 
 :where(.button:disabled),
 :where(.button[aria-disabled=true]) {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
   cursor: not-allowed;
 }
@@ -851,7 +849,7 @@
   background-color: var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95));
 }
 :where(.button.button-template-text.button-priority-tertiary):active:not(:disabled), :where(.button.button-template-text.button-priority-tertiary)[data-user-action=pressed]:not(:disabled) {
-  background-color: var(--color-bg-surface-strong, var(--color-cool-gray-20));
+  background-color: var(--color-surface-strong, var(--color-cool-gray-20));
 }
 
 :where(.button.button-template-round) {
@@ -1066,14 +1064,14 @@ figure.chip {
 
 .chip:where([data-kind=filter]),
 .chip:where([data-kind=filter-rounded]) {
-  --chip-bg: var(--color-bg-surface-standard, #f2f2f3);
+  --chip-bg: var(--color-surface-standard, #f2f2f3);
   --chip-label-color: var(--color-label-neutral, #797e86);
   --chip-border-color: transparent;
 }
 
 .chip:where([data-kind=filter][data-selected=true]),
 .chip:where([data-kind=filter-rounded][data-selected=true]) {
-  --chip-bg: var(--color-bg-surface-heavy, #313235);
+  --chip-bg: var(--color-surface-heavy, #313235);
   --chip-label-color: var(--color-common-100, #ffffff);
 }
 
@@ -1082,7 +1080,7 @@ figure.chip {
 }
 
 .chip:where([data-kind=assist]) {
-  --chip-bg: var(--color-bg-surface-static-neutral, #f2f2f2);
+  --chip-bg: var(--color-surface-static-neutral, #f2f2f2);
   --chip-label-color: var(--color-label-strong, #18191b);
   --chip-gap: var(--spacing-gap-2, 8px);
   --chip-border-color: transparent;
@@ -1096,7 +1094,7 @@ figure.chip {
   --chip-gap: var(--spacing-gap-1, 4px);
   --chip-bg: var(--color-common-100, #ffffff);
   --chip-label-color: var(--color-label-standard, #3d3f43);
-  --chip-border-color: var(--color-border-standard-assistive, #e4e5e7);
+  --chip-border-color: var(--color-border-assistive, #e4e5e7);
   padding-inline-start: var(--spacing-padding-4, 8px);
   padding-inline-end: var(--spacing-padding-2, 4px);
 }
@@ -1851,7 +1849,7 @@ figure.chip {
   --pagination-dot-bg: var(--color-cool-gray-85, #d2d3d7);
   --pagination-dot-active-bg: var(--color-primary-default, #0061ff);
   --pagination-dot-active-bg-secondary: var(
-    --color-bg-surface-heavy,
+    --color-surface-heavy,
     #313235
   );
   --pagination-carousel-height: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/badge/markup/Badge.tsx

@@ -50,7 +50,11 @@ const Badge = forwardRef<HTMLElementTagNameMap["figure"], BadgeProps>(
         data-has-label={hasLabel ? "true" : undefined}
       >
         {renderDot}
-        {children ? <span className="badge-label">{children}</span> : null}
+        {["string", "number"].includes(typeof children) ? (
+          <span className="badge-label">{children}</span>
+        ) : (
+          children
+        )}
       </figure>
     );
   },

package/src/components/badge/styles/index.scss

@@ -54,7 +54,7 @@
 }
 
 .badge:where([data-style="outlined"]) {
-  background-color: var(--color-bg-surface-static-white, #ffffff);
+  background-color: var(--color-surface-static-white, #ffffff);
   border-width: 1px;
   border-style: solid;
   border-color: var(--badge-outline-border-color);
@@ -111,7 +111,7 @@
 }
 
 .badge:where([data-style="fill"][data-intent="gray"]) {
-  --badge-fill-bg-color: var(--color-bg-surface-neutral, #f2f2f2);
+  --badge-fill-bg-color: var(--color-surface-neutral, #f2f2f2);
   --badge-fill-label-color: var(--color-label-neutral, #797e86);
 }
 
@@ -147,12 +147,12 @@
 }
 
 .badge:where([data-style="outlined"][data-intent="tertiary"]) {
-  --badge-outline-border-color: var(--color-border-standard-heavy, #313235);
+  --badge-outline-border-color: var(--color-border-heavy, #313235);
   --badge-outline-label-color: var(--color-label-strong, #18191b);
 }
 
 .badge:where([data-style="outlined"][data-intent="gray"]) {
-  --badge-outline-border-color: var(--color-border-standard-assistive, #e4e5e7);
+  --badge-outline-border-color: var(--color-border-assistive, #e4e5e7);
   --badge-outline-label-color: var(--color-label-standard, #3d3f43);
 }
 

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

@@ -99,11 +99,11 @@
   --theme-button-color-blue-90: var(--color-blue-90);
   --theme-button-color-blue-50: var(--color-blue-50);
   --theme-button-color-blue-45: var(--color-blue-45);
-  --theme-button-overlay-solid-tertiary-bg: var(--color-bg-surface-strong);
+  --theme-button-overlay-solid-tertiary-bg: var(--color-surface-strong);
   /* Confirm dialog cancel 버튼을 위한 solid tertiary 색상 정의 */
-  --theme-button-tertiary-solid-bg: var(--color-bg-surface-neutral);
-  --theme-button-tertiary-solid-hover-bg: var(--color-bg-surface-strong);
-  --theme-button-tertiary-solid-pressed-bg: var(--color-bg-surface-strong);
+  --theme-button-tertiary-solid-bg: var(--color-surface-neutral);
+  --theme-button-tertiary-solid-hover-bg: var(--color-surface-strong);
+  --theme-button-tertiary-solid-pressed-bg: var(--color-surface-strong);
   --theme-button-tertiary-solid-foreground: var(--color-label-neutral);
   --theme-button-secondary-solid-bg: var(--color-blue-95, #e5eeff);
   --theme-button-secondary-solid-hover-bg: #dbe9ff;
@@ -111,11 +111,11 @@
   --theme-button-color-cool-gray-90: var(--color-cool-gray-90);
   --theme-button-color-cool-gray-95: var(--color-cool-gray-95);
   --theme-button-color-cool-gray-10: var(--color-cool-gray-10);
-  --theme-button-color-bg-surface-standard: var(--color-bg-surface-standard);
+  --theme-button-color-bg-surface-standard: var(--color-surface-standard);
   --theme-button-color-bg-alternative-cool-gray: var(
     --color-bg-alternative-cool-gray
   );
-  --theme-button-color-bg-surface-strong: var(--color-bg-surface-strong);
+  --theme-button-color-bg-surface-strong: var(--color-surface-strong);
   --theme-button-color-label-disabled: var(--color-label-disabled);
 
   /* overlays */
@@ -181,15 +181,15 @@ $button-priorities: (
   tertiary: (
     solid-bg: var(
         --theme-button-tertiary-solid-bg,
-        var(--color-bg-surface-neutral)
+        var(--color-surface-neutral)
       ),
     solid-hover: var(
         --theme-button-tertiary-solid-hover-bg,
-        var(--color-bg-surface-static-cool-gray)
+        var(--color-surface-static-cool-gray)
       ),
     solid-active: var(
         --theme-button-tertiary-solid-pressed-bg,
-        var(--color-bg-surface-strong)
+        var(--color-surface-strong)
       ),
     solid-foreground: var(
         --theme-button-tertiary-solid-foreground,
@@ -366,11 +366,11 @@ $button-priorities: (
     &[aria-disabled="true"] {
       background-color: var(
         --theme-button-color-bg-surface-standard,
-        var(--color-bg-surface-standard)
+        var(--color-surface-standard)
       );
       border-color: var(
         --theme-button-color-bg-surface-standard,
-        var(--color-bg-surface-standard)
+        var(--color-surface-standard)
       );
       color: var(
         --theme-button-color-label-disabled,
@@ -400,11 +400,11 @@ $button-priorities: (
     &[aria-disabled="true"] {
       background-color: var(
         --theme-button-color-bg-surface-standard,
-        var(--color-bg-surface-standard)
+        var(--color-surface-standard)
       );
       border-color: var(
         --theme-button-color-bg-surface-standard,
-        var(--color-bg-surface-standard)
+        var(--color-surface-standard)
       );
       color: var(
         --theme-button-color-label-disabled,
@@ -587,7 +587,7 @@ $button-size-map: (
 @include button-overlay-state(
   "solid",
   "tertiary",
-  var(--color-border-standard-strong, var(--color-bg-surface-strong)),
+  var(--color-border-strong, var(--color-surface-strong)),
   0.68,
   0.48,
   priority-token(tertiary, solid-bg)
@@ -624,11 +624,11 @@ $button-size-map: (
 :where(.button[aria-disabled="true"]) {
   background-color: var(
     --theme-button-color-bg-surface-standard,
-    var(--color-bg-surface-standard)
+    var(--color-surface-standard)
   );
   border-color: var(
     --theme-button-color-bg-surface-standard,
-    var(--color-bg-surface-standard)
+    var(--color-surface-standard)
   );
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
   cursor: not-allowed;

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

@@ -89,6 +89,6 @@
 
   &:active:not(:disabled),
   &[data-user-action="pressed"]:not(:disabled) {
-    background-color: var(--color-bg-surface-strong, var(--color-cool-gray-20));
+    background-color: var(--color-surface-strong, var(--color-cool-gray-20));
   }
 }

package/src/components/checkbox/styles/index.scss

@@ -6,7 +6,7 @@
   --theme-checkbox-control-radius-medium: var(--theme-radius-xsmall-3, 3px);
   --theme-checkbox-control-radius-large: var(--theme-radius-small-1, 4px);
   --theme-checkbox-border-width: 1.4px;
-  --theme-checkbox-border-color: var(--color-border-standard-assistive);
+  --theme-checkbox-border-color: var(--color-border-assistive);
   --theme-checkbox-border-selected: var(--color-primary-default);
   --theme-checkbox-surface: var(--color-common-100);
   --theme-checkbox-surface-selected: var(--color-primary-default);

package/src/components/chip/styles/index.scss

@@ -56,14 +56,14 @@ figure.chip {
 
 .chip:where([data-kind="filter"]),
 .chip:where([data-kind="filter-rounded"]) {
-  --chip-bg: var(--color-bg-surface-standard, #f2f2f3);
+  --chip-bg: var(--color-surface-standard, #f2f2f3);
   --chip-label-color: var(--color-label-neutral, #797e86);
   --chip-border-color: transparent;
 }
 
 .chip:where([data-kind="filter"][data-selected="true"]),
 .chip:where([data-kind="filter-rounded"][data-selected="true"]) {
-  --chip-bg: var(--color-bg-surface-heavy, #313235);
+  --chip-bg: var(--color-surface-heavy, #313235);
   --chip-label-color: var(--color-common-100, #ffffff);
 }
 
@@ -72,7 +72,7 @@ figure.chip {
 }
 
 .chip:where([data-kind="assist"]) {
-  --chip-bg: var(--color-bg-surface-static-neutral, #f2f2f2);
+  --chip-bg: var(--color-surface-static-neutral, #f2f2f2);
   --chip-label-color: var(--color-label-strong, #18191b);
   --chip-gap: var(--spacing-gap-2, 8px);
   --chip-border-color: transparent;
@@ -86,7 +86,7 @@ figure.chip {
   --chip-gap: var(--spacing-gap-1, 4px);
   --chip-bg: var(--color-common-100, #ffffff);
   --chip-label-color: var(--color-label-standard, #3d3f43);
-  --chip-border-color: var(--color-border-standard-assistive, #e4e5e7);
+  --chip-border-color: var(--color-border-assistive, #e4e5e7);
   padding-inline-start: var(--spacing-padding-4, 8px);
   padding-inline-end: var(--spacing-padding-2, 4px);
 }

package/src/components/drawer/styles/index.scss

@@ -1,7 +1,7 @@
 :root {
   // Figma 기준 bottom sheet 여백/톤을 전역 변수로 정리한다.
   --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
-  --drawer-surface-bg: var(--color-bg-surface-static-white);
+  --drawer-surface-bg: var(--color-surface-static-white);
   --drawer-radius-large: var(--theme-radius-large-2);
   --drawer-radius-medium: var(--theme-radius-large-1);
   --drawer-body-color: var(--color-label-standard);

package/src/components/input/styles/index.scss

@@ -26,9 +26,7 @@
   // error 상태는 Figma 기준 44% alpha 레드 보더 사용
   --theme-input-border-error: rgba(218, 29, 11, 0.44);
   --theme-input-border-disabled: var(--color-border-standard-cool-gray);
-  --theme-input-border-underline-disabled: var(
-    --color-border-standard-assistive
-  );
+  --theme-input-border-underline-disabled: var(--color-border-assistive);
   --theme-input-surface: var(--color-common-100);
   --theme-input-surface-muted: var(--color-neutral-99);
   --theme-input-surface-disabled: var(--color-neutral-95);

package/src/components/navigation/styles/index.scss

@@ -10,7 +10,7 @@
   --theme-navigation-label-font-weight: 500;
   --theme-navigation-label-letter-spacing: -0.12px;
   --theme-navigation-bg: var(--color-common-100, #ffffff);
-  --theme-navigation-border: var(--color-border-standard-assistive, #e4e5e7);
+  --theme-navigation-border: var(--color-border-assistive, #e4e5e7);
   --theme-navigation-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
   --theme-navigation-color: var(--color-label-strong, #3d3f43);
   --theme-navigation-color-active: var(--color-primary-default, #0061ff);

package/src/components/pagination/styles/index.scss

@@ -12,7 +12,7 @@
   --pagination-dot-bg: var(--color-cool-gray-85, #d2d3d7);
   --pagination-dot-active-bg: var(--color-primary-default, #0061ff);
   --pagination-dot-active-bg-secondary: var(
-    --color-bg-surface-heavy,
+    --color-surface-heavy,
     #313235
   ); // semantic surface heavy
   --pagination-carousel-height: 8px;

package/src/components/radio/styles/index.scss

@@ -6,11 +6,11 @@
   --theme-radio-indicator-border-width: 1.4px;
   --theme-radio-indicator-border-width-selected-medium: 4px;
   --theme-radio-indicator-border-width-selected-large: 6px;
-  --theme-radio-border-color: var(--color-border-standard-assistive);
+  --theme-radio-border-color: var(--color-border-assistive);
   --theme-radio-border-selected: var(--color-primary-default);
   --theme-radio-surface-selected: var(--color-primary-default);
-  --theme-radio-surface-disabled: var(--color-border-standard-assistive);
-  --theme-radio-border-disabled: var(--color-border-standard-assistive);
+  --theme-radio-surface-disabled: var(--color-border-assistive);
+  --theme-radio-border-disabled: var(--color-border-assistive);
   --theme-radio-disabled-selected-fill: var(--color-primary-default);
   --theme-radio-label-color: var(--color-label-strong);
   --theme-radio-label-disabled: var(--color-label-disabled);
@@ -19,7 +19,7 @@
   --theme-radio-card-background: var(--color-common-100);
   --theme-radio-card-title-color: var(--color-label-strong);
   --theme-radio-card-description-color: var(--color-label-neutral);
-  --theme-radio-card-badge-background: var(--color-bg-surface-static-blue);
+  --theme-radio-card-badge-background: var(--color-surface-static-blue);
   --theme-radio-card-badge-color: var(--color-primary-default);
   --theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-radio-disabled-selected-opacity: 0.28;