@uniai-fe/uds-primitives 0.3.10 → 0.3.12

package/dist/styles.css

@@ -293,8 +293,8 @@
   --form-field-helper-font-size: var(--font-caption-medium-size);
   --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);
-  --form-field-helper-error-color: var(--color-feedback-error);
+  --form-field-helper-color-default: var(--color-label-neutral);
+  --form-field-helper-color-error: var(--color-feedback-error);
   --info-box-background-color: var(--color-blue-99);
   --info-box-border-color: var(--color-secondary-standard);
   --info-box-icon-color: var(--color-feedback-information);
@@ -353,7 +353,7 @@
   --input-label-font-weight: var(--font-label-small-weight);
   --input-helper-color: var(--color-label-neutral);
   --input-helper-success-color: var(--color-success);
-  --input-helper-error-color: var(--color-error);
+  --input-helper-error-color: var(--color-feedback-error);
   --input-helper-disabled-color: var(--color-label-disabled);
   --input-helper-font-size: var(--font-label-small-size);
   --input-helper-line-height: var(--font-label-small-line-height);
@@ -377,7 +377,7 @@
   --input-border-table-default-color: transparent;
   --input-border-table-disabled-color: var(--input-border-table-default-color);
   --input-border-table-readonly-color: var(--input-border-table-disabled-color);
-  /* error는 Figma 44% alpha */
+  /* error border는 기존 RGBA 스펙을 유지한다. */
   --input-border-error-color: rgba(218, 29, 11, 0.44);
   --input-border-disabled-color: var(--color-border-standard-cool-gray);
   --input-border-underline-disabled-color: var(--color-border-assistive);
@@ -470,7 +470,6 @@
   --select-table-surface-disabled-color
   );
   --select-table-color-text: var(--input-text-color);
-  --select-table-color-text-error: var(--input-label-error-color);
   --select-table-color-text-readonly: var(--select-primary-color-text-readonly);
   --select-table-color-placeholder: var(--input-placeholder-color);
   --select-table-icon-color-default: var(--select-icon-color-default);
@@ -510,7 +509,6 @@
   --select-primary-color-surface: var(--input-surface-color);
   --select-primary-color-text: var(--color-label-alternative);
   --select-primary-color-text-focused: var(--color-label-strong);
-  --select-primary-color-text-error: var(--input-label-error-color);
   --select-primary-color-text-disabled: var(--color-label-disabled);
   --select-primary-color-text-readonly: var(--color-label-strong);
   --select-primary-color-border: var(--input-border-color);
@@ -526,7 +524,6 @@
   );
   --select-primary-color-surface-disabled: var(--input-surface-disabled-color);
   --select-secondary-color-text: var(--color-label-standard);
-  --select-secondary-color-text-error: var(--input-label-error-color);
   --select-secondary-color-text-disabled: var(--color-label-disabled);
   --select-secondary-color-text-readonly: var(
   --select-primary-color-text-readonly
@@ -2306,15 +2303,19 @@ figure.chip {
   margin-top: var(--form-field-gap-y);
   font-size: var(--form-field-helper-font-size);
   line-height: var(--form-field-helper-line-height);
+  color: var(--form-field-helper-color-default);
 }
 .form-field-footer p,
 .form-field-footer span {
-  color: var(--form-field-helper-color);
+  color: inherit;
 }
 
+.form-field-container[data-state=error] .form-field-footer {
+  color: var(--form-field-helper-color-error);
+}
 .form-field-container[data-state=error] .form-field-footer p,
 .form-field-container[data-state=error] .form-field-footer span {
-  color: var(--form-field-helper-error-color);
+  color: inherit;
 }
 
 
@@ -3700,9 +3701,6 @@ figure.chip {
   border-color: var(--select-primary-color-border-error);
   --select-icon-fill: var(--select-icon-color-default);
 }
-.select-button[data-priority=secondary][data-state=error] {
-  color: var(--select-secondary-color-text-error);
-}
 .select-button[data-priority=secondary][data-state=error]::after {
   height: var(--select-secondary-underline-width-focus);
   background-color: var(--select-color-border-secondary-error);
@@ -3786,9 +3784,6 @@ figure.chip {
 .select-button[data-state=focused] .select-label, .select-button[data-open=true] .select-label {
   color: var(--select-primary-color-text-focused);
 }
-.select-button[data-state=error] .select-label {
-  color: var(--select-primary-color-text-error);
-}
 .select-button[data-state=disabled] .select-label {
   color: var(--select-primary-color-text-disabled);
 }
@@ -3798,15 +3793,9 @@ figure.chip {
 .select-button[data-priority=secondary][data-state=disabled] .select-label {
   color: var(--select-secondary-color-text-disabled);
 }
-.select-button[data-priority=secondary][data-state=error] .select-label {
-  color: var(--select-secondary-color-text-error);
-}
 .select-button[data-priority=secondary][data-readonly=true] .select-label {
   color: var(--select-secondary-color-text-readonly);
 }
-.select-button[data-priority=table][data-state=error] .select-label {
-  color: var(--select-table-color-text-error);
-}
 
 .select-label-placeholder {
   color: var(--select-primary-color-placeholder);

package/package.json

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

package/src/components/form/styles/form-field/layout.scss

@@ -60,17 +60,19 @@
   margin-top: var(--form-field-gap-y);
   font-size: var(--form-field-helper-font-size);
   line-height: var(--form-field-helper-line-height);
+  color: var(--form-field-helper-color-default);
   p,
   span {
-    color: var(--form-field-helper-color);
+    color: inherit;
   }
 }
 
 .form-field-container[data-state="error"] {
   .form-field-footer {
+    color: var(--form-field-helper-color-error);
     p,
     span {
-      color: var(--form-field-helper-error-color);
+      color: inherit;
     }
   }
 }

package/src/components/form/styles/form-field/variables.scss

@@ -13,6 +13,6 @@
   --form-field-helper-font-size: var(--font-caption-medium-size);
   --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);
-  --form-field-helper-error-color: var(--color-feedback-error);
+  --form-field-helper-color-default: var(--color-label-neutral);
+  --form-field-helper-color-error: var(--color-feedback-error);
 }

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

@@ -40,7 +40,7 @@
   --input-label-font-weight: var(--font-label-small-weight);
   --input-helper-color: var(--color-label-neutral);
   --input-helper-success-color: var(--color-success);
-  --input-helper-error-color: var(--color-error);
+  --input-helper-error-color: var(--color-feedback-error);
   --input-helper-disabled-color: var(--color-label-disabled);
   --input-helper-font-size: var(--font-label-small-size);
   --input-helper-line-height: var(--font-label-small-line-height);
@@ -66,8 +66,8 @@
   --input-border-table-default-color: transparent;
   --input-border-table-disabled-color: var(--input-border-table-default-color);
   --input-border-table-readonly-color: var(--input-border-table-disabled-color);
-  /* error는 Figma 44% alpha */
-  --input-border-error-color: rgba(218, 29, 11, 0.44); // --color-feedback-error
+  /* error border는 기존 RGBA 스펙을 유지한다. */
+  --input-border-error-color: rgba(218, 29, 11, 0.44);
   --input-border-disabled-color: var(--color-border-standard-cool-gray);
   --input-border-underline-disabled-color: var(--color-border-assistive);
 

package/src/components/select/markup/foundation/Base.tsx

@@ -59,8 +59,10 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
       className: clsx("select-button", className),
       "data-priority": priority,
       "data-size": size,
-      // 변경: readOnly도 disabled와 동일한 시각 상태를 사용하고 텍스트 컬러만 별도 스타일로 분리한다.
+      ...restProps,
+      // 변경: Radix Dropdown.Trigger가 주입하는 data-state(open|closed)를 최종 단계에서 덮어써 visual state를 고정한다.
       "data-state": resolvedState,
+      // 변경: readOnly도 disabled와 동일한 시각 상태를 사용하고 텍스트 컬러만 별도 스타일로 분리한다.
       "data-readonly": readOnly ? "true" : undefined,
       "data-open": open || undefined,
       "data-multiple": multiple || undefined,
@@ -68,7 +70,6 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
       "aria-readonly": readOnly ? "true" : undefined,
       "aria-haspopup": ariaHasPopup ?? "listbox",
       "aria-expanded": ariaExpanded ?? open,
-      ...restProps,
     };
 
     const elementSpecificProps =

package/src/components/select/styles/select.scss

@@ -139,8 +139,6 @@
   }
 
   &[data-priority="secondary"][data-state="error"] {
-    color: var(--select-secondary-color-text-error);
-
     &::after {
       height: var(--select-secondary-underline-width-focus);
       background-color: var(--select-color-border-secondary-error);
@@ -246,10 +244,6 @@
     color: var(--select-primary-color-text-focused);
   }
 
-  .select-button[data-state="error"] & {
-    color: var(--select-primary-color-text-error);
-  }
-
   .select-button[data-state="disabled"] & {
     color: var(--select-primary-color-text-disabled);
   }
@@ -262,17 +256,9 @@
     color: var(--select-secondary-color-text-disabled);
   }
 
-  .select-button[data-priority="secondary"][data-state="error"] & {
-    color: var(--select-secondary-color-text-error);
-  }
-
   .select-button[data-priority="secondary"][data-readonly="true"] & {
     color: var(--select-secondary-color-text-readonly);
   }
-
-  .select-button[data-priority="table"][data-state="error"] & {
-    color: var(--select-table-color-text-error);
-  }
 }
 
 .select-label-placeholder {

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

@@ -40,7 +40,6 @@
     --select-table-surface-disabled-color
   );
   --select-table-color-text: var(--input-text-color);
-  --select-table-color-text-error: var(--input-label-error-color);
   --select-table-color-text-readonly: var(--select-primary-color-text-readonly);
   --select-table-color-placeholder: var(--input-placeholder-color);
   --select-table-icon-color-default: var(--select-icon-color-default);
@@ -82,7 +81,6 @@
   --select-primary-color-surface: var(--input-surface-color);
   --select-primary-color-text: var(--color-label-alternative);
   --select-primary-color-text-focused: var(--color-label-strong);
-  --select-primary-color-text-error: var(--input-label-error-color);
   --select-primary-color-text-disabled: var(--color-label-disabled);
   --select-primary-color-text-readonly: var(--color-label-strong);
   --select-primary-color-border: var(--input-border-color);
@@ -98,7 +96,6 @@
   );
   --select-primary-color-surface-disabled: var(--input-surface-disabled-color);
   --select-secondary-color-text: var(--color-label-standard);
-  --select-secondary-color-text-error: var(--input-label-error-color);
   --select-secondary-color-text-disabled: var(--color-label-disabled);
   --select-secondary-color-text-readonly: var(
     --select-primary-color-text-readonly