@uniai-fe/uds-primitives 0.3.6 → 0.3.8

package/dist/styles.css

@@ -316,6 +316,7 @@
   /* Layout presets */
   --input-width: 100%;
   --input-flex: 0 1 auto;
+  --input-layout-gap: var(--spacing-gap-3);
   /* Input sizing tokens; Button 변수 규칙과 동일한 prefix 패턴을 맞춘다. */
   --input-default-height-small: var(--theme-size-medium-1);
   --input-default-height-medium: var(--theme-size-medium-2);
@@ -323,10 +324,16 @@
   --input-tertiary-height-base: calc(var(--theme-size-medium-2) + 24px);
   --input-default-padding-inline: var(--spacing-padding-6);
   --input-default-padding-block: var(--spacing-padding-4);
+  --input-secondary-padding-block: var(--spacing-padding-4);
   --input-default-gap: var(--spacing-gap-4);
+  --input-affix-gap: var(--spacing-gap-3);
+  --input-utility-gap: var(--spacing-gap-2);
+  --input-tertiary-row-gap: var(--spacing-gap-1);
+  --input-tertiary-control-row-gap: var(--spacing-gap-1);
   --input-default-radius-base: var(--theme-radius-large-1);
   --input-tertiary-radius-base: var(--theme-radius-large-2);
   --input-table-radius-base: 0;
+  --input-tertiary-element-min-height: var(--theme-size-medium-2);
   --input-table-text-small-size: var(--font-body-xxsmall-size);
   --input-table-text-small-line-height: var(--font-body-xxsmall-line-height);
   --input-table-text-small-weight: var(--font-body-xxsmall-weight);
@@ -340,13 +347,26 @@
   --input-label-color: var(--color-label-standard);
   --input-label-accent-color: var(--color-primary-default);
   --input-label-error-color: var(--color-error);
+  --input-label-font-size: var(--font-label-small-size);
+  --input-label-line-height: var(--font-label-small-line-height);
+  --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-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);
   /* Text & placeholder colors */
   --input-text-color: var(--color-label-strong);
+  --input-text-readonly-color: var(--color-label-strong);
+  --input-text-disabled-color: var(--color-label-disabled);
   --input-placeholder-color: var(--color-label-alternative);
+  --input-placeholder-disabled-color: var(--color-label-disabled);
+  --input-placeholder-readonly-color: var(--input-placeholder-disabled-color);
+  --input-font-size: var(--font-body-medium-size);
+  --input-line-height: var(--font-body-medium-line-height);
+  --input-font-weight: 400;
+  --input-letter-spacing: 0px;
   /* Border tokens */
   --input-border-color: var(--color-border-standard-cool-gray);
   --input-border-width-default: 1px;
@@ -354,6 +374,8 @@
   --input-border-active-color: var(--color-blue-80);
   --input-border-success-color: var(--color-blue-80);
   --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);
   --input-border-disabled-color: var(--color-border-standard-cool-gray);
@@ -362,6 +384,15 @@
   --input-surface-color: var(--color-common-100);
   --input-surface-muted-color: var(--color-neutral-99);
   --input-surface-disabled-color: var(--color-neutral-95);
+  --input-table-surface-color: transparent;
+  --input-table-surface-disabled-color: var(--input-table-surface-color);
+  --input-table-surface-readonly-color: var(
+  --input-table-surface-disabled-color
+  );
+  --input-secondary-surface-color: transparent;
+  /* Status/affix colors */
+  --input-status-error-color: var(--color-error);
+  --input-status-success-color: var(--color-primary-default);
   --theme-navigation-height: 86px;
   --theme-navigation-padding-inline: 32px;
   --theme-navigation-padding-block-start: 8px;
@@ -405,6 +436,8 @@
   /* layout presets */
   --select-width: 100%;
   --select-flex: 0 1 auto;
+  --select-layout-gap: var(--spacing-gap-2);
+  --select-value-gap: var(--spacing-gap-2);
   --select-primary-height-small: var(--input-default-height-small);
   --select-primary-height-medium: var(--input-default-height-medium);
   --select-primary-height-large: var(--input-default-height-large);
@@ -426,9 +459,16 @@
   --select-table-border-default-color: var(--input-border-table-default-color);
   --select-table-border-focus-color: var(--input-border-active-color);
   --select-table-border-disabled-color: var(--input-border-disabled-color);
+  --select-table-border-readonly-color: var(
+  --select-table-border-disabled-color
+  );
   --select-table-surface-color: transparent;
   --select-table-surface-disabled-color: var(--input-surface-disabled-color);
+  --select-table-surface-readonly-color: var(
+  --select-table-surface-disabled-color
+  );
   --select-table-color-text: var(--input-text-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);
   --select-table-icon-color-focused: var(--select-icon-color-focused);
@@ -464,9 +504,11 @@
   --select-icon-size-medium: 2rem;
   --select-icon-size-large: 2rem;
   --select-primary-color-placeholder: var(--input-placeholder-color);
+  --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-disabled: var(--color-label-disabled);
+  --select-primary-color-text-readonly: var(--color-label-strong);
   --select-primary-color-border: var(--input-border-color);
   --select-primary-color-border-focused: var(--input-border-active-color);
   --select-primary-color-border-disabled: var(--input-border-disabled-color);
@@ -478,7 +520,15 @@
   );
   --select-primary-color-surface-disabled: var(--input-surface-disabled-color);
   --select-secondary-color-text: var(--color-label-standard);
+  --select-secondary-color-text-disabled: var(--color-label-disabled);
+  --select-secondary-color-text-readonly: var(
+  --select-primary-color-text-readonly
+  );
   --select-secondary-color-placeholder: var(--color-label-alternative);
+  --select-secondary-color-placeholder-disabled: var(--color-label-disabled);
+  --select-secondary-color-placeholder-readonly: var(
+  --select-secondary-color-placeholder-disabled
+  );
   --select-color-surface-secondary: transparent;
   --select-color-surface-secondary-hover: var(--color-surface-static-cool-gray);
   --select-color-surface-secondary-active: var(--color-surface-standard);
@@ -488,8 +538,10 @@
   --select-icon-color-disabled: var(--color-cool-gray-85);
   /* Multi select chip */
   --select-multiple-chip-gap: var(--spacing-gap-2);
+  --select-multiple-tag-label-gap: var(--spacing-gap-1);
   --select-multiple-chip-padding-inline: var(--spacing-padding-4);
   --select-multiple-chip-padding-block: 0px;
+  --select-multiple-chip-removable-padding-right: var(--spacing-padding-2);
   --select-multiple-chip-radius: var(--theme-radius-medium-2);
   --select-multiple-chip-font-size: var(--font-body-small-size);
   --select-multiple-chip-line-height: var(--font-body-small-line-height);
@@ -501,6 +553,7 @@
   --select-multiple-chip-border-color: transparent;
   --select-multiple-chip-remove-color: var(--color-label-strong);
   --select-multiple-chip-remove-hover-color: var(--color-label-strong);
+  --select-multiple-chip-remove-focus-outline-color: var(--color-border-strong);
   --select-multiple-chip-summary-color: var(--color-label-standard);
   --select-multiple-chip-summary-surface: var(--color-surface-standard);
   --select-multiple-chip-summary-border-color: transparent;
@@ -512,6 +565,8 @@
   --font-body-medium-line-height
   );
   --select-multiple-chip-summary-font-weight: 400;
+  /* Typography tokens */
+  --select-text-font-family: var(--font-body-medium-family);
   --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(
@@ -2318,7 +2373,7 @@ figure.chip {
 .input {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-3);
+  gap: var(--input-layout-gap);
   width: var(--input-width);
   flex: var(--input-flex);
   min-width: 0;
@@ -2348,9 +2403,9 @@ figure.chip {
 
 .input-label {
   color: var(--input-label-color);
-  font-size: var(--font-label-small-size);
-  line-height: var(--font-label-small-line-height);
-  font-weight: var(--font-label-small-weight);
+  font-size: var(--input-label-font-size);
+  line-height: var(--input-label-line-height);
+  font-weight: var(--input-label-font-weight);
 }
 
 .input-label--visually-hidden {
@@ -2396,8 +2451,8 @@ figure.chip {
   border-bottom: var(--input-border-width-default) solid var(--input-border-color);
   border-radius: 0;
   padding-inline: 0;
-  padding-block: var(--spacing-padding-4);
-  background-color: transparent;
+  padding-block: var(--input-secondary-padding-block);
+  background-color: var(--input-secondary-surface-color);
 }
 .input-field[data-priority=secondary][data-state=active], .input-field[data-priority=secondary][data-state=focused] {
   border-bottom-color: var(--input-border-active-color);
@@ -2419,7 +2474,7 @@ figure.chip {
   border-radius: var(--input-tertiary-radius-base);
   background-color: var(--input-surface-color);
   min-height: var(--input-tertiary-height-base);
-  row-gap: var(--spacing-gap-1);
+  row-gap: var(--input-tertiary-row-gap);
   column-gap: var(--input-default-gap);
   flex-wrap: wrap;
   align-items: center;
@@ -2428,7 +2483,7 @@ figure.chip {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   column-gap: var(--input-default-gap);
-  row-gap: var(--spacing-gap-1);
+  row-gap: var(--input-tertiary-control-row-gap);
   align-items: center;
   flex: 1 1 auto;
   min-width: 0;
@@ -2439,7 +2494,7 @@ figure.chip {
   align-self: flex-start;
 }
 .input-field[data-priority=tertiary] .input-element {
-  min-height: var(--theme-size-medium-2);
+  min-height: var(--input-tertiary-element-min-height);
   width: auto;
   flex: 1 1 auto;
 }
@@ -2450,7 +2505,15 @@ figure.chip {
 .input-field[data-priority=table] {
   border-radius: var(--input-table-radius-base);
   border-color: var(--input-border-table-default-color);
-  background-color: transparent;
+  background-color: var(--input-table-surface-color);
+}
+.input-field[data-priority=table][data-state=disabled] {
+  border-color: var(--input-border-table-disabled-color);
+  background-color: var(--input-table-surface-disabled-color);
+}
+.input-field[data-priority=table][data-readonly=true] {
+  border-color: var(--input-border-table-readonly-color);
+  background-color: var(--input-table-surface-readonly-color);
 }
 .input-field:not([data-priority=secondary])[data-state=active], .input-field:not([data-priority=secondary])[data-state=focused] {
   border-color: var(--input-border-active-color);
@@ -2469,6 +2532,11 @@ figure.chip {
   border-width: var(--input-border-width-default);
   background-color: var(--input-surface-disabled-color); /* disabled 배경 토큰 */
 }
+.input-field:not([data-priority=secondary])[data-readonly=true] {
+  border-color: var(--input-border-disabled-color);
+  border-width: var(--input-border-width-default);
+  background-color: var(--input-surface-disabled-color);
+}
 
 .input-element {
   flex: 1 1 auto;
@@ -2477,10 +2545,10 @@ figure.chip {
   background: transparent;
   color: var(--input-text-color);
   caret-color: var(--input-text-color);
-  font-size: var(--font-body-medium-size);
-  line-height: var(--font-body-medium-line-height);
-  font-weight: 400;
-  letter-spacing: 0px;
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+  font-weight: var(--input-font-weight);
+  letter-spacing: var(--input-letter-spacing);
   outline: none;
   box-shadow: none;
   min-width: 0;
@@ -2488,11 +2556,18 @@ figure.chip {
 .input-element::placeholder {
   color: var(--input-placeholder-color);
 }
+.input-element:read-only {
+  color: var(--input-text-readonly-color);
+  caret-color: var(--input-text-readonly-color);
+}
+.input-element:read-only::placeholder {
+  color: var(--input-placeholder-readonly-color);
+}
 .input-element:disabled {
-  color: var(--color-label-disabled);
+  color: var(--input-text-disabled-color);
 }
 .input-element:disabled::placeholder {
-  color: var(--color-label-disabled);
+  color: var(--input-placeholder-disabled-color);
 }
 .input-element:focus, .input-element:focus-visible, .input-element:focus-within {
   outline: none;
@@ -2510,9 +2585,9 @@ figure.chip {
 .input-field-utilities {
   display: flex;
   align-items: center;
-  gap: var(--spacing-gap-2);
+  gap: var(--input-utility-gap);
   flex-shrink: 0;
-  margin-left: var(--spacing-gap-3);
+  margin-left: var(--input-affix-gap);
 }
 .input-field-utilities .input-affix {
   margin-left: 0;
@@ -2521,8 +2596,8 @@ figure.chip {
 .input-inline-label {
   order: -2;
   flex-basis: 100%;
-  font-size: var(--font-label-small-size);
-  line-height: var(--font-label-small-line-height);
+  font-size: var(--input-label-font-size);
+  line-height: var(--input-label-line-height);
   color: var(--input-label-color);
 }
 
@@ -2531,7 +2606,7 @@ figure.chip {
 }
 
 .input-field[data-priority=tertiary] .input-element {
-  min-height: var(--theme-size-medium-2);
+  min-height: var(--input-tertiary-element-min-height);
 }
 
 .input-field[data-priority=table][data-size=small] .input-element {
@@ -2554,8 +2629,8 @@ figure.chip {
 
 .input-helper-text {
   color: var(--input-helper-color);
-  font-size: var(--font-label-small-size);
-  line-height: var(--font-label-small-line-height);
+  font-size: var(--input-helper-font-size);
+  line-height: var(--input-helper-line-height);
 }
 [data-state=error] .input-helper-text {
   color: var(--input-border-error-color);
@@ -2573,19 +2648,19 @@ figure.chip {
 }
 .input-affix-left {
   order: -1;
-  margin-right: var(--spacing-gap-3);
+  margin-right: var(--input-affix-gap);
 }
 .input-affix-right, .input-affix-clear, .input-affix-status {
-  margin-left: var(--spacing-gap-3);
+  margin-left: var(--input-affix-gap);
 }
 .input-affix-clear, .input-affix-status {
   color: var(--input-text-color);
 }
 .input-affix-status[data-state=error] {
-  color: var(--color-error);
+  color: var(--input-status-error-color);
 }
 .input-affix-status[data-state=success] {
-  color: var(--color-primary-default);
+  color: var(--input-status-success-color);
 }
 
 .input-field[data-priority=secondary] {
@@ -2607,6 +2682,10 @@ figure.chip {
   border-bottom-color: var(--input-border-underline-disabled-color);
   border-bottom-width: var(--input-border-width-default);
 }
+.input-field[data-priority=secondary][data-readonly=true] {
+  border-bottom-color: var(--input-border-underline-disabled-color);
+  border-bottom-width: var(--input-border-width-default);
+}
 
 .input[data-state=active] .input-label,
 .input[data-state=active] .input-inline-label,
@@ -2636,11 +2715,16 @@ figure.chip {
   background-color: var(--input-surface-disabled-color);
 }
 .input[data-state=disabled] .input-field[data-priority=secondary] {
-  background-color: transparent;
+  background-color: var(--input-secondary-surface-color);
 }
 .input[data-state=disabled] .input-field[data-priority=table] {
-  background-color: transparent;
-  border-color: var(--input-border-table-default-color);
+  background-color: var(--input-table-surface-disabled-color);
+  border-color: var(--input-border-table-disabled-color);
+}
+
+.input[data-readonly=true] .input-field[data-priority=table] {
+  background-color: var(--input-table-surface-readonly-color);
+  border-color: var(--input-border-table-readonly-color);
 }
 
 .input-side {
@@ -3497,7 +3581,7 @@ figure.chip {
   width: var(--select-width);
   flex: var(--select-flex);
   flex-direction: column;
-  gap: var(--spacing-gap-2);
+  gap: var(--select-layout-gap);
   min-width: 0;
 }
 
@@ -3536,7 +3620,7 @@ figure.chip {
   padding: var(--select-primary-padding-block) var(--select-primary-padding-inline);
   border: var(--select-primary-border-width-default) solid var(--select-primary-color-border);
   border-radius: var(--select-primary-radius-medium);
-  background-color: var(--input-surface-color);
+  background-color: var(--select-primary-color-surface);
   cursor: pointer;
   transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
   text-align: left;
@@ -3581,7 +3665,7 @@ figure.chip {
   background-color: var(--select-color-border-secondary-focused);
 }
 .select-button[data-priority=secondary][data-state=disabled], .select-button[data-priority=secondary]:disabled {
-  color: var(--color-label-disabled);
+  color: var(--select-secondary-color-text-disabled);
   cursor: not-allowed;
 }
 .select-button[data-priority=table] {
@@ -3600,6 +3684,27 @@ figure.chip {
   border-width: var(--select-primary-border-width-focus);
   --select-icon-fill: var(--select-table-icon-color-focused);
 }
+.select-button:not([data-priority=secondary])[data-readonly=true] {
+  border-color: var(--select-primary-color-border-disabled);
+  background-color: var(--select-primary-color-surface-disabled);
+  cursor: default;
+  --select-icon-fill: var(--select-icon-color-disabled);
+}
+.select-button[data-priority=secondary][data-readonly=true] {
+  border-color: transparent;
+  background-color: var(--select-color-surface-secondary-disabled);
+  cursor: default;
+}
+.select-button[data-priority=secondary][data-readonly=true]::after {
+  background-color: var(--select-color-border-secondary-disabled);
+  height: var(--select-secondary-underline-width-default);
+}
+.select-button[data-priority=table][data-readonly=true] {
+  border-color: var(--select-table-border-readonly-color);
+  background-color: var(--select-table-surface-readonly-color);
+  cursor: not-allowed;
+  --select-icon-fill: var(--select-table-icon-color-disabled);
+}
 .select-button:not([data-priority=secondary])[data-state=disabled], .select-button:not([data-priority=secondary]):disabled {
   border-color: var(--select-primary-color-border-disabled);
   background-color: var(--select-primary-color-surface-disabled);
@@ -3626,13 +3731,13 @@ figure.chip {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-2);
+  gap: var(--select-value-gap);
 }
 
 .select-label {
   flex: 1 1 auto;
   min-width: 0;
-  font-family: var(--font-body-medium-family);
+  font-family: var(--select-text-font-family);
   font-size: var(--select-text-medium-size);
   font-weight: var(--select-text-medium-weight);
   line-height: var(--select-text-medium-line-height);
@@ -3648,14 +3753,23 @@ figure.chip {
 .select-button[data-priority=table] .select-label {
   color: var(--select-table-color-text);
 }
+.select-button[data-priority=table][data-readonly=true] .select-label {
+  color: var(--select-table-color-text-readonly);
+}
 .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=disabled] .select-label {
   color: var(--select-primary-color-text-disabled);
 }
+.select-button[data-readonly=true] .select-label {
+  color: var(--select-primary-color-text-readonly);
+}
 .select-button[data-priority=secondary][data-state=disabled] .select-label {
-  color: var(--color-label-disabled);
+  color: var(--select-secondary-color-text-disabled);
+}
+.select-button[data-priority=secondary][data-readonly=true] .select-label {
+  color: var(--select-secondary-color-text-readonly);
 }
 
 .select-label-placeholder {
@@ -3667,6 +3781,12 @@ figure.chip {
 .select-button[data-priority=table] .select-label-placeholder {
   color: var(--select-table-color-placeholder);
 }
+.select-button[data-state=disabled] .select-label-placeholder, .select-button[data-readonly=true] .select-label-placeholder {
+  color: var(--select-primary-color-text-disabled);
+}
+.select-button[data-priority=secondary][data-state=disabled] .select-label-placeholder, .select-button[data-priority=secondary][data-readonly=true] .select-label-placeholder {
+  color: var(--select-secondary-color-placeholder-disabled);
+}
 
 .select-button[data-size=small] .select-label {
   font-size: var(--select-text-small-size);
@@ -3719,7 +3839,7 @@ figure.chip {
   gap: var(--select-multiple-chip-gap);
   padding: var(--select-multiple-chip-padding-block) var(--select-multiple-chip-padding-inline);
   border-radius: var(--select-multiple-chip-radius);
-  border: 1px solid var(--select-multiple-chip-border-color, var(--color-border-standard-cool-gray));
+  border: 1px solid var(--select-multiple-chip-border-color);
   background-color: var(--select-multiple-chip-surface);
   color: var(--select-multiple-chip-color);
   font-size: var(--select-multiple-chip-font-size);
@@ -3732,7 +3852,7 @@ figure.chip {
   border-color: var(--select-color-border-secondary-focused);
 }
 .select-tag[data-removable=true] {
-  padding-right: var(--spacing-padding-2);
+  padding-right: var(--select-multiple-chip-removable-padding-right);
 }
 
 .select-tag[data-kind=summary],
@@ -3751,7 +3871,7 @@ figure.chip {
 .select-tag-label {
   display: flex;
   align-items: center;
-  gap: var(--spacing-gap-1);
+  gap: var(--select-multiple-tag-label-gap);
   min-width: 0;
 }
 
@@ -3777,7 +3897,7 @@ figure.chip {
   transition: color 150ms ease;
 }
 .select-tag-remove:focus-visible {
-  outline: 0.2rem solid var(--color-border-strong);
+  outline: 0.2rem solid var(--select-multiple-chip-remove-focus-outline-color);
   outline-offset: 0.1rem;
 }
 .select-tag-remove:hover {

package/package.json

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