@uniai-fe/uds-primitives 0.3.2 → 0.3.3

package/dist/styles.css

@@ -181,29 +181,34 @@
   --theme-checkbox-icon-selected: var(--color-common-100);
   --theme-checkbox-icon-disabled-selected: var(--color-common-100);
   --theme-checkbox-focus-ring: rgba(2, 84, 255, 0.32);
-  --theme-chip-height: var(--theme-size-small-3, 32px);
-  --theme-chip-padding-horizontal: var(--spacing-padding-5, 12px);
-  --theme-chip-gap: var(--spacing-gap-1, 4px);
+  --theme-chip-height: var(--theme-size-small-3);
+  --theme-chip-padding-horizontal: var(--spacing-padding-5);
+  --theme-chip-gap: var(--spacing-gap-1);
+  --theme-chip-assist-gap: var(--spacing-gap-2);
+  --theme-chip-input-gap: var(--spacing-gap-1);
+  --theme-chip-input-padding-left: var(--spacing-padding-4);
+  --theme-chip-input-padding-right: var(--spacing-padding-2);
+  --theme-chip-label-gap: var(--spacing-gap-1);
   /* 변경: table chip 수치를 Figma table 액션 셀 기준으로 보정한다. */
   /* 변경: table chip 높이는 button table과 동일하게 24px로 맞춘다. */
   --theme-chip-height-table: 24px;
-  --theme-chip-padding-horizontal-table: var(--spacing-padding-5, 12px);
-  --theme-chip-padding-left-table: var(--spacing-padding-5, 12px);
-  --theme-chip-padding-right-table: var(--spacing-padding-4, 8px);
+  --theme-chip-padding-horizontal-table: var(--spacing-padding-5);
+  --theme-chip-padding-left-table: var(--spacing-padding-5);
+  --theme-chip-padding-right-table: var(--spacing-padding-4);
   /* 변경: table chip은 높이 24px 고정을 위해 수직 padding을 사용하지 않는다. */
   --theme-chip-padding-block-table: 0px;
-  --theme-chip-gap-table: var(--spacing-gap-1, 4px);
-  --theme-chip-font-size-table: var(--font-caption-large-size, 12px);
+  --theme-chip-gap-table: var(--spacing-gap-1);
+  --theme-chip-font-size-table: var(--font-caption-large-size);
   /* 변경: table chip 텍스트는 font-weight를 400으로 고정한다. */
   --theme-chip-font-weight-table: 400;
-  --theme-chip-line-height-table: var(--font-caption-large-line-height, 1.5);
+  --theme-chip-line-height-table: var(--font-caption-large-line-height);
   /* 변경: Figma 705:13702 기준으로 table chip radius를 6px로 고정한다. */
-  --theme-chip-radius-table: var(--theme-radius-medium-2, 6px);
-  --theme-chip-radius: var(--theme-radius-medium-3, 8px);
-  --theme-chip-rounded-radius: var(--theme-radius-large-2, 16px);
-  --theme-chip-font-family: var(--font-body-medium-family, "Pretendard");
-  --theme-chip-font-size: var(--font-body-xsmall-size, 13px);
-  --theme-chip-font-weight: var(--font-body-xsmall-weight, 400);
+  --theme-chip-radius-table: var(--theme-radius-medium-2);
+  --theme-chip-radius: var(--theme-radius-medium-3);
+  --theme-chip-rounded-radius: var(--theme-radius-large-2);
+  --theme-chip-font-family: var(--font-body-medium-family);
+  --theme-chip-font-size: var(--font-body-xsmall-size);
+  --theme-chip-font-weight: var(--font-body-xsmall-weight);
   --divider-width: 1px;
   --divider-height: 12px;
   --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
@@ -276,16 +281,8 @@
   --form-field-helper-font-weight: 400;
   --form-field-helper-line-height: var(--font-caption-medium-line-height);
   --form-field-helper-color: var(--color-label-neutral);
-  --info-box-background-color: color-mix(
-  in srgb,
-  var(--color-feedback-information) 9%,
-  var(--color-common-100)
-  );
-  --info-box-border-color: color-mix(
-  in srgb,
-  var(--color-feedback-information) 24%,
-  var(--color-common-100)
-  );
+  --info-box-background-color: var(--color-blue-99);
+  --info-box-border-color: var(--color-secondary-standard);
   --info-box-icon-color: var(--color-feedback-information);
   --info-box-heading-color: var(--color-feedback-information);
   --info-box-body-color: var(--color-label-strong);
@@ -505,8 +502,12 @@
   --table-border-color: var(--color-border-standard-cool-gray);
   --table-line-head-background-color: var(--color-surface-static-cool-gray);
   --table-grid-head-background-color: var(
-  --color-background-alternative-cool-gray
+  --color-surface-static-cool-gray-darker
+  );
+  --table-grid-row-header-background-color: var(
+  --color-surface-static-cool-gray-darker
   );
+  --table-grid-row-highlight-background-color: rgba(229, 238, 255, 0.52);
   --table-cell-background-color: var(--color-surface-static-white);
   --table-line-cell-height-head: 44px;
   --table-line-cell-height-body: 56px;
@@ -1555,7 +1556,7 @@
   --chip-gap: var(--theme-chip-gap);
   --chip-bg: transparent;
   --chip-border-color: transparent;
-  --chip-label-color: var(--color-label-standard, #3d3f43);
+  --chip-label-color: var(--color-label-standard);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1589,21 +1590,21 @@ figure.chip {
 }
 
 .chip:focus-visible {
-  outline: 2px solid var(--color-primary-default, #1a6aff);
+  outline: 2px solid var(--color-primary-default);
   outline-offset: 2px;
 }
 
 .chip:where([data-kind=filter]),
 .chip:where([data-kind=filter-rounded]) {
-  --chip-bg: var(--color-surface-standard, #f2f2f3);
-  --chip-label-color: var(--color-label-neutral, #797e86);
+  --chip-bg: var(--color-surface-standard);
+  --chip-label-color: var(--color-label-neutral);
   --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-surface-heavy, #313235);
-  --chip-label-color: var(--color-common-100, #ffffff);
+  --chip-bg: var(--color-surface-heavy);
+  --chip-label-color: var(--color-common-100);
 }
 
 .chip:where([data-kind=filter-rounded]) {
@@ -1611,23 +1612,28 @@ figure.chip {
 }
 
 .chip:where([data-kind=assist]) {
-  --chip-bg: var(--color-surface-static-neutral, #f2f2f2);
-  --chip-label-color: var(--color-label-strong, #18191b);
-  --chip-gap: var(--spacing-gap-2, 8px);
+  --chip-bg: var(--color-surface-static-neutral);
+  --chip-label-color: var(--color-label-strong);
+  --chip-gap: var(--theme-chip-assist-gap);
   --chip-border-color: transparent;
 }
 
 .chip:where([data-kind=assist][data-selected=true]) {
-  --chip-label-color: var(--color-primary-default, #1a6aff);
+  --chip-label-color: var(--color-primary-default);
 }
 
 .chip:where([data-kind=input]) {
-  --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-assistive, #e4e5e7);
-  padding-left: var(--spacing-padding-4, 8px);
-  padding-right: var(--spacing-padding-2, 4px);
+  --chip-gap: var(--theme-chip-input-gap);
+  --chip-bg: var(--color-common-100);
+  --chip-label-color: var(--color-label-standard);
+  --chip-border-color: var(--color-border-standard-cool-gray);
+  padding-left: var(--theme-chip-input-padding-left);
+  padding-right: var(--theme-chip-input-padding-right);
+}
+
+.chip:where([data-kind=input][data-removable=false]) {
+  padding-left: var(--theme-chip-padding-horizontal);
+  padding-right: var(--theme-chip-padding-horizontal);
 }
 
 .chip:where([data-size=table]) {
@@ -1651,13 +1657,18 @@ figure.chip {
   padding-right: var(--theme-chip-padding-right-table);
 }
 
+.chip:where([data-size=table][data-kind=input][data-removable=false]) {
+  padding-left: var(--theme-chip-padding-horizontal-table);
+  padding-right: var(--theme-chip-padding-horizontal-table);
+}
+
 .chip:where([data-size=table][data-kind=input]) .chip-remove-button {
   width: fit-content;
   height: fit-content;
 }
 
 .chip:where([data-kind=input][data-selected=true]) {
-  --chip-border-color: var(--color-border-standard-blue, #ccdeff);
+  --chip-border-color: var(--color-border-standard-blue);
 }
 
 .chip-leading {
@@ -1671,7 +1682,7 @@ figure.chip {
 .chip-label {
   display: flex;
   align-items: center;
-  gap: var(--spacing-gap-1, 4px);
+  gap: var(--theme-chip-label-gap);
   color: inherit;
   line-height: 1;
   white-space: nowrap;
@@ -1685,7 +1696,7 @@ figure.chip {
   height: fit-content;
   border: none;
   background: transparent;
-  color: var(--color-label-neutral, #797e86);
+  color: var(--color-label-neutral);
   cursor: pointer;
   padding: 0;
   transition: color 0.16s ease;
@@ -1693,7 +1704,7 @@ figure.chip {
 
 .chip-remove-button:hover,
 .chip-remove-button:focus-visible {
-  color: var(--color-label-strong, #18191b);
+  color: var(--color-label-strong);
 }
 
 .chip-remove-button svg {
@@ -2387,9 +2398,9 @@ figure.chip {
 .input-field-utilities {
   display: flex;
   align-items: center;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
   flex-shrink: 0;
-  margin-left: var(--spacing-gap-3, 12px);
+  margin-left: var(--spacing-gap-3);
 }
 .input-field-utilities .input-affix {
   margin-left: 0;
@@ -2517,6 +2528,7 @@ figure.chip {
 }
 .input[data-state=disabled] .input-field[data-priority=table] {
   background-color: transparent;
+  border-color: var(--input-border-table-default-color);
 }
 
 .input-side {
@@ -3941,6 +3953,15 @@ figure.chip {
   background-color: var(--table-grid-head-background-color);
 }
 
+.table.table-container[data-layout=grid] .table-body .table-native-cell.table-th {
+  background-color: var(--table-grid-row-header-background-color);
+}
+
+.table.table-container[data-layout=grid] .table-row[data-highlighted=true] .table-native-cell.table-th,
+.table.table-container[data-layout=grid] .table-row[data-highlighted=true] .table-native-cell.table-td {
+  background-color: var(--table-grid-row-highlight-background-color);
+}
+
 .table-native-cell.table-th .table-native-cell-text {
   color: var(--table-th-text-color);
   font-size: var(--table-th-text-size);

package/package.json

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

package/src/components/chip/markup/Chip.tsx

@@ -21,6 +21,7 @@ const isChipInputProps = (props: ChipProps): props is ChipInputProps =>
  * @param {React.ReactNode} [props.leading] assist kind 전용 leading slot.
  * @param {"default" | "table"} [props.size="default"] chip size 축. table은 셀 콘텐츠용 compact 규격이다.
  * @param {string} [props.removeButtonLabel="선택 항목 삭제"] input kind 제거 버튼 라벨.
+ * @param {boolean} [props.disabled] input kind 상호작용 비활성화 여부. true이면 remove 버튼을 렌더링하지 않는다.
  * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onRemove] input kind 제거 핸들러.
  * @param {string} [props.className] root className.
  */
@@ -32,17 +33,19 @@ const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
       className,
       removeButtonLabel = "선택 항목 삭제",
       onRemove,
+      disabled = false,
       selected,
       leading,
       size = "default",
       ...restProps
     } = props;
+    const removable = !disabled && typeof onRemove === "function";
     const hasLeading = Boolean(leading);
     const combinedClassName = composeChipClassName({
       kind: "input",
       selected,
       hasLeading,
-      removable: true,
+      removable,
       className,
     });
 
@@ -52,20 +55,24 @@ const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
         ref={ref as Ref<HTMLElementTagNameMap["figure"]>}
         className={combinedClassName}
         data-kind="input"
-        data-removable="true"
+        data-removable={removable ? "true" : "false"}
         data-size={size}
         data-selected={selected ? "true" : undefined}
         data-has-leading={hasLeading ? "true" : undefined}
+        data-disabled={disabled ? "true" : undefined}
+        aria-disabled={disabled ? "true" : undefined}
       >
         <span className={CHIP_LABEL_CLASSNAME}>{children}</span>
-        <button
-          type="button"
-          className={CHIP_REMOVE_BUTTON_CLASSNAME}
-          aria-label={removeButtonLabel}
-          onClick={onRemove}
-        >
-          <RemoveIcon aria-hidden="true" />
-        </button>
+        {removable ? (
+          <button
+            type="button"
+            className={CHIP_REMOVE_BUTTON_CLASSNAME}
+            aria-label={removeButtonLabel}
+            onClick={onRemove}
+          >
+            <RemoveIcon aria-hidden="true" />
+          </button>
+        ) : null}
       </figure>
     );
   }

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

@@ -2,7 +2,7 @@
   --chip-gap: var(--theme-chip-gap);
   --chip-bg: transparent;
   --chip-border-color: transparent;
-  --chip-label-color: var(--color-label-standard, #3d3f43);
+  --chip-label-color: var(--color-label-standard);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -40,21 +40,21 @@ figure.chip {
 }
 
 .chip:focus-visible {
-  outline: 2px solid var(--color-primary-default, #1a6aff);
+  outline: 2px solid var(--color-primary-default);
   outline-offset: 2px;
 }
 
 .chip:where([data-kind="filter"]),
 .chip:where([data-kind="filter-rounded"]) {
-  --chip-bg: var(--color-surface-standard, #f2f2f3);
-  --chip-label-color: var(--color-label-neutral, #797e86);
+  --chip-bg: var(--color-surface-standard);
+  --chip-label-color: var(--color-label-neutral);
   --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-surface-heavy, #313235);
-  --chip-label-color: var(--color-common-100, #ffffff);
+  --chip-bg: var(--color-surface-heavy);
+  --chip-label-color: var(--color-common-100);
 }
 
 .chip:where([data-kind="filter-rounded"]) {
@@ -62,23 +62,29 @@ figure.chip {
 }
 
 .chip:where([data-kind="assist"]) {
-  --chip-bg: var(--color-surface-static-neutral, #f2f2f2);
-  --chip-label-color: var(--color-label-strong, #18191b);
-  --chip-gap: var(--spacing-gap-2, 8px);
+  --chip-bg: var(--color-surface-static-neutral);
+  --chip-label-color: var(--color-label-strong);
+  --chip-gap: var(--theme-chip-assist-gap);
   --chip-border-color: transparent;
 }
 
 .chip:where([data-kind="assist"][data-selected="true"]) {
-  --chip-label-color: var(--color-primary-default, #1a6aff);
+  --chip-label-color: var(--color-primary-default);
 }
 
 .chip:where([data-kind="input"]) {
-  --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-assistive, #e4e5e7);
-  padding-left: var(--spacing-padding-4, 8px);
-  padding-right: var(--spacing-padding-2, 4px);
+  --chip-gap: var(--theme-chip-input-gap);
+  --chip-bg: var(--color-common-100);
+  --chip-label-color: var(--color-label-standard);
+  --chip-border-color: var(--color-border-standard-cool-gray);
+  padding-left: var(--theme-chip-input-padding-left);
+  padding-right: var(--theme-chip-input-padding-right);
+}
+
+.chip:where([data-kind="input"][data-removable="false"]) {
+  // 변경: remove 버튼이 없는 input chip은 좌우 패딩을 12px로 맞춘다.
+  padding-left: var(--theme-chip-padding-horizontal);
+  padding-right: var(--theme-chip-padding-horizontal);
 }
 
 .chip:where([data-size="table"]) {
@@ -102,13 +108,19 @@ figure.chip {
   padding-right: var(--theme-chip-padding-right-table);
 }
 
+.chip:where([data-size="table"][data-kind="input"][data-removable="false"]) {
+  // 변경: table size에서도 remove 버튼 미노출 시 좌우 패딩을 동일값(12px)으로 맞춘다.
+  padding-left: var(--theme-chip-padding-horizontal-table);
+  padding-right: var(--theme-chip-padding-horizontal-table);
+}
+
 .chip:where([data-size="table"][data-kind="input"]) .chip-remove-button {
   width: fit-content;
   height: fit-content;
 }
 
 .chip:where([data-kind="input"][data-selected="true"]) {
-  --chip-border-color: var(--color-border-standard-blue, #ccdeff);
+  --chip-border-color: var(--color-border-standard-blue);
 }
 
 .chip-leading {
@@ -122,7 +134,7 @@ figure.chip {
 .chip-label {
   display: flex;
   align-items: center;
-  gap: var(--spacing-gap-1, 4px);
+  gap: var(--theme-chip-label-gap);
   color: inherit;
   line-height: 1;
   white-space: nowrap;
@@ -136,7 +148,7 @@ figure.chip {
   height: fit-content;
   border: none;
   background: transparent;
-  color: var(--color-label-neutral, #797e86);
+  color: var(--color-label-neutral);
   cursor: pointer;
   padding: 0;
   transition: color 0.16s ease;
@@ -144,7 +156,7 @@ figure.chip {
 
 .chip-remove-button:hover,
 .chip-remove-button:focus-visible {
-  color: var(--color-label-strong, #18191b);
+  color: var(--color-label-strong);
 }
 
 .chip-remove-button svg {

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

@@ -1,26 +1,31 @@
 /* Chip 기본 토큰 래핑 */
 :root {
-  --theme-chip-height: var(--theme-size-small-3, 32px);
-  --theme-chip-padding-horizontal: var(--spacing-padding-5, 12px);
-  --theme-chip-gap: var(--spacing-gap-1, 4px);
+  --theme-chip-height: var(--theme-size-small-3);
+  --theme-chip-padding-horizontal: var(--spacing-padding-5);
+  --theme-chip-gap: var(--spacing-gap-1);
+  --theme-chip-assist-gap: var(--spacing-gap-2);
+  --theme-chip-input-gap: var(--spacing-gap-1);
+  --theme-chip-input-padding-left: var(--spacing-padding-4);
+  --theme-chip-input-padding-right: var(--spacing-padding-2);
+  --theme-chip-label-gap: var(--spacing-gap-1);
   /* 변경: table chip 수치를 Figma table 액션 셀 기준으로 보정한다. */
   /* 변경: table chip 높이는 button table과 동일하게 24px로 맞춘다. */
   --theme-chip-height-table: 24px;
-  --theme-chip-padding-horizontal-table: var(--spacing-padding-5, 12px);
-  --theme-chip-padding-left-table: var(--spacing-padding-5, 12px);
-  --theme-chip-padding-right-table: var(--spacing-padding-4, 8px);
+  --theme-chip-padding-horizontal-table: var(--spacing-padding-5);
+  --theme-chip-padding-left-table: var(--spacing-padding-5);
+  --theme-chip-padding-right-table: var(--spacing-padding-4);
   /* 변경: table chip은 높이 24px 고정을 위해 수직 padding을 사용하지 않는다. */
   --theme-chip-padding-block-table: 0px;
-  --theme-chip-gap-table: var(--spacing-gap-1, 4px);
-  --theme-chip-font-size-table: var(--font-caption-large-size, 12px);
+  --theme-chip-gap-table: var(--spacing-gap-1);
+  --theme-chip-font-size-table: var(--font-caption-large-size);
   /* 변경: table chip 텍스트는 font-weight를 400으로 고정한다. */
   --theme-chip-font-weight-table: 400;
-  --theme-chip-line-height-table: var(--font-caption-large-line-height, 1.5);
+  --theme-chip-line-height-table: var(--font-caption-large-line-height);
   /* 변경: Figma 705:13702 기준으로 table chip radius를 6px로 고정한다. */
-  --theme-chip-radius-table: var(--theme-radius-medium-2, 6px);
-  --theme-chip-radius: var(--theme-radius-medium-3, 8px);
-  --theme-chip-rounded-radius: var(--theme-radius-large-2, 16px);
-  --theme-chip-font-family: var(--font-body-medium-family, "Pretendard");
-  --theme-chip-font-size: var(--font-body-xsmall-size, 13px);
-  --theme-chip-font-weight: var(--font-body-xsmall-weight, 400);
+  --theme-chip-radius-table: var(--theme-radius-medium-2);
+  --theme-chip-radius: var(--theme-radius-medium-3);
+  --theme-chip-rounded-radius: var(--theme-radius-large-2);
+  --theme-chip-font-family: var(--font-body-medium-family);
+  --theme-chip-font-size: var(--font-body-xsmall-size);
+  --theme-chip-font-weight: var(--font-body-xsmall-weight);
 }

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

@@ -64,6 +64,7 @@ export interface ChipInteractiveProps extends ChipCommonProps, ButtonProps {
  * @property {string} [removeButtonLabel] input kind 전용 제거 버튼 aria-label.
  * @property {"default" | "table"} [size] chip 사이즈 축.
  * @property {"input"} kind input kind 고정값.
+ * @property {boolean} [disabled] input kind 상호작용 비활성화 여부. true이면 remove 버튼을 노출하지 않는다.
  * @property {(event: MouseEvent<HTMLButtonElement>) => void} [onRemove] 제거 버튼 click 핸들러.
  */
 export interface ChipInputProps extends ChipCommonProps, FigureProps {
@@ -75,6 +76,11 @@ export interface ChipInputProps extends ChipCommonProps, FigureProps {
    * 제거 버튼 click 핸들러.
    */
   onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * input kind 상호작용 비활성화 여부.
+   * true이면 remove 버튼을 노출하지 않는다.
+   */
+  disabled?: boolean;
 }
 
 /**

package/src/components/info-box/styles/variables.scss

@@ -1,15 +1,7 @@
 :root {
   // 변경: 실사용 캡처 톤에 맞춰 info 배경/보더 대비를 부드럽게 조정한다.
-  --info-box-background-color: color-mix(
-    in srgb,
-    var(--color-feedback-information) 9%,
-    var(--color-common-100)
-  );
-  --info-box-border-color: color-mix(
-    in srgb,
-    var(--color-feedback-information) 24%,
-    var(--color-common-100)
-  );
+  --info-box-background-color: var(--color-blue-99);
+  --info-box-border-color: var(--color-secondary-standard);
   --info-box-icon-color: var(--color-feedback-information);
   --info-box-heading-color: var(--color-feedback-information);
   --info-box-body-color: var(--color-label-strong);

package/src/components/input/markup/file/UploadedChip.tsx

@@ -13,6 +13,7 @@ import type { InputFileUploadedChipProps } from "../../types";
  * @param {(fileId: string) => void} [props.onRemoveFromInput] input file 컨텍스트 제거 핸들러
  * @param {() => void} [props.onClearSelectedFiles] fileId가 없을 때 선택 파일 초기화 핸들러
  * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onRemove] 파일 제거 핸들러
+ * @param {boolean} [props.disabled] 비활성화 여부. true이면 remove 버튼을 렌더링하지 않는다.
  * @param {string} [props.removeButtonLabel="업로드 파일 삭제"] 제거 버튼 aria-label
  * @example
  * ```tsx

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

@@ -234,9 +234,9 @@
 .input-field-utilities {
   display: flex;
   align-items: center;
-  gap: var(--spacing-gap-2, 8px);
+  gap: var(--spacing-gap-2);
   flex-shrink: 0;
-  margin-left: var(--spacing-gap-3, 12px);
+  margin-left: var(--spacing-gap-3);
 
   .input-affix {
     margin-left: 0;
@@ -391,6 +391,8 @@
     &[data-priority="table"] {
       // table priority는 disabled 상태에서도 배경을 투명하게 유지한다.
       background-color: transparent;
+      // 변경: table priority disabled는 border도 투명하게 유지해 테이블 셀 경계선과 충돌하지 않도록 한다.
+      border-color: var(--input-border-table-default-color);
     }
   }
 }

package/src/components/table/styles/foundation.scss

@@ -70,6 +70,23 @@
   background-color: var(--table-grid-head-background-color);
 }
 
+// 변경: grid 타입의 row-header(th, tbody)는 항상 전용 배경색을 유지한다.
+.table.table-container[data-layout="grid"]
+  .table-body
+  .table-native-cell.table-th {
+  background-color: var(--table-grid-row-header-background-color);
+}
+
+// 변경: grid 타입 highlighted row는 row-header(th)보다 우선해 th/td 모두 blue tint를 적용한다.
+.table.table-container[data-layout="grid"]
+  .table-row[data-highlighted="true"]
+  .table-native-cell.table-th,
+.table.table-container[data-layout="grid"]
+  .table-row[data-highlighted="true"]
+  .table-native-cell.table-td {
+  background-color: var(--table-grid-row-highlight-background-color);
+}
+
 // 변경: tag selector 대신 className selector로 텍스트 스타일 적용 범위를 고정한다.
 .table-native-cell.table-th .table-native-cell-text {
   color: var(--table-th-text-color);

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

@@ -3,8 +3,14 @@
   --table-border-color: var(--color-border-standard-cool-gray);
   --table-line-head-background-color: var(--color-surface-static-cool-gray);
   --table-grid-head-background-color: var(
-    --color-background-alternative-cool-gray
+    --color-surface-static-cool-gray-darker
   );
+  // 변경: grid body row-header(th)는 Figma 기준으로 static-cool-gray-darker를 유지한다.
+  --table-grid-row-header-background-color: var(
+    --color-surface-static-cool-gray-darker
+  );
+  // 변경: grid highlighted row의 데이터 셀(td)은 blue tint(52%)를 사용한다.
+  --table-grid-row-highlight-background-color: rgba(229, 238, 255, 0.52);
   --table-cell-background-color: var(--color-surface-static-white);
 
   --table-line-cell-height-head: 44px;