@uniai-fe/uds-primitives 0.12.1 → 0.12.2

package/dist/styles.css

@@ -489,25 +489,18 @@
   --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-default-radius-small: var(--theme-radius-medium-4);
+  --input-default-radius-medium: var(--theme-radius-large-1);
+  --input-default-radius-large: var(--theme-radius-large-2);
+  --input-default-radius-base: var(--input-default-radius-medium);
   --input-tertiary-radius-base: var(--theme-radius-large-2);
   --input-table-radius-base: 0;
   --input-tertiary-element-min-height: 1.5em;
   --input-textarea-min-height: calc(var(--input-default-height-medium) * 2);
   --input-textarea-height: 128px;
-  /* TextArea size token은 Input 기본 size token을 재할당해 축을 일치시킨다. */
-  --input-textarea-radius-small: var(--input-default-radius-base);
-  --input-textarea-radius-medium: var(--input-default-radius-base);
-  --input-textarea-radius-large: var(--input-default-radius-base);
-  --input-textarea-padding-inline-small: var(--spacing-padding-6);
-  --input-textarea-padding-inline-medium: var(--spacing-padding-6);
-  --input-textarea-padding-inline-large: var(--spacing-padding-6);
   --input-textarea-padding-block-small: var(--spacing-padding-5);
   --input-textarea-padding-block-medium: var(--spacing-padding-5);
   --input-textarea-padding-block-large: var(--spacing-padding-6);
-  --input-textarea-gap-small: var(--input-default-gap);
-  --input-textarea-gap-medium: var(--input-default-gap);
-  --input-textarea-gap-large: var(--input-default-gap);
   --input-textarea-counter-font-size: var(--font-label-medium-size);
   --input-textarea-counter-line-height: var(--font-label-medium-line-height);
   --input-textarea-counter-font-weight: var(--font-label-medium-weight);
@@ -588,33 +581,24 @@
   --input-status-success-color: var(--color-primary-default);
   /* TimePicker tokens */
   --input-time-width: 100%;
-  --input-time-height-small: var(--input-default-height-small);
-  --input-time-height-medium: var(--input-default-height-medium);
-  --input-time-height-large: var(--input-default-height-large);
-  --input-time-tertiary-height: var(--input-tertiary-height-base);
-  --input-time-padding-inline: var(--input-default-padding-inline);
-  --input-time-padding-block: var(--input-default-padding-block);
-  --input-time-secondary-padding-block: var(--input-secondary-padding-block);
   --input-time-table-padding-inline: var(--spacing-padding-4);
-  --input-time-radius: var(--theme-radius-medium-3);
-  --input-time-tertiary-radius: var(--input-tertiary-radius-base);
-  --input-time-table-radius: var(--input-table-radius-base);
+  --input-time-radius: var(--input-default-radius-medium);
   --input-time-field-gap: 0;
-  --input-time-field-width: 2.7ch;
-  --input-time-field-middle-width: 2.2ch;
   --input-time-period-field-width: 4.2ch;
   --input-time-field-height: 100%;
   --input-time-icon-size: 24px;
   --input-time-stepper-width: 28px;
-  --input-time-stepper-button-height: 28px;
+  --input-time-stepper-button-height: calc(
+    var(--input-default-height-medium) / 2
+  );
   --input-time-stepper-radius: var(--theme-radius-medium-3);
   --input-time-stepper-icon-size: 16px;
-  --input-time-text-color: var(--input-text-color);
-  --input-time-text-disabled-color: var(--input-text-disabled-color);
-  --input-time-placeholder-color: var(--input-placeholder-color);
+  --input-time-text-color: var(--color-cool-gray-30);
+  --input-time-text-disabled-color: var(--color-cool-gray-60);
+  --input-time-placeholder-color: var(--color-cool-gray-40);
   --input-time-separator-color: var(--color-label-alternative);
-  --input-time-icon-color: var(--color-label-alternative);
-  --input-time-icon-disabled-color: var(--color-label-disabled);
+  --input-time-icon-color: var(--color-cool-gray-25);
+  --input-time-icon-disabled-color: var(--color-cool-gray-45);
   --input-time-font-size: var(--input-text-medium-size);
   --input-time-line-height: var(--input-text-medium-line-height);
   --input-time-font-weight: var(--input-text-medium-weight);
@@ -639,6 +623,7 @@
   --input-time-border-color: var(--input-border-color);
   --input-time-border-width: var(--input-border-width-default);
   --input-time-border-width-emphasis: var(--input-border-width-emphasis);
+  --input-time-border-width-focus: 2px;
   --input-time-border-active-color: var(--input-border-active-color);
   --input-time-border-success-color: var(--input-border-success-color);
   --input-time-border-error-color: var(--input-border-error-color);
@@ -646,7 +631,7 @@
   --input-time-table-border-color: var(--input-border-table-default-color);
   --input-time-surface-color: var(--input-surface-color);
   --input-time-secondary-surface-color: var(--input-secondary-surface-color);
-  --input-time-surface-disabled-color: var(--input-surface-disabled-color);
+  --input-time-surface-disabled-color: var(--color-cool-gray-85);
   --input-time-table-surface-color: var(--input-table-surface-color);
   --theme-navigation-height: 86px;
   --theme-navigation-padding-inline: 32px;
@@ -694,23 +679,12 @@
   --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);
   --select-primary-height-xsmall: 24px;
-  --select-primary-radius-small: var(--input-default-radius-base);
-  --select-primary-radius-medium: var(--input-default-radius-base);
-  --select-primary-radius-large: var(--input-default-radius-base);
   --select-primary-radius-xsmall: var(--theme-radius-medium-2);
-  --select-primary-padding-inline: var(--input-default-padding-inline);
-  --select-primary-padding-block: var(--input-default-padding-block);
-  --select-primary-gap-inline: var(--input-default-gap);
   --select-primary-padding-inline-start-xsmall: var(--spacing-padding-4);
   --select-primary-padding-inline-end-xsmall: var(--spacing-padding-3);
   --select-primary-padding-block-xsmall: var(--spacing-padding-2);
   --select-primary-gap-inline-xsmall: var(--spacing-gap-1);
-  --select-primary-border-width-default: var(--input-border-width-default);
-  --select-primary-border-width-focus: var(--input-border-width-emphasis);
   --select-secondary-radius: var(--theme-radius-medium-1);
   --select-secondary-padding-inline: var(--spacing-padding-4);
   --select-secondary-padding-block: var(--spacing-padding-2);
@@ -4471,6 +4445,10 @@ figure.chip {
   font-weight: var(--info-box-body-font-weight);
 }
 
+.input-time {
+  --input-time-field-width: 1.9em;
+}
+
 .input {
   display: flex;
   flex-direction: column;
@@ -4555,6 +4533,7 @@ figure.chip {
 }
 .input-field:where([data-size="small"]) {
   min-height: var(--input-default-height-small);
+  border-radius: var(--input-default-radius-small);
   --input-font-size: var(--input-text-small-size);
   --input-line-height: var(--input-text-small-line-height);
   --input-font-weight: var(--input-text-small-weight);
@@ -4562,6 +4541,7 @@ figure.chip {
 }
 .input-field:where([data-size="large"]) {
   min-height: var(--input-default-height-large);
+  border-radius: var(--input-default-radius-large);
   --input-font-size: var(--input-text-large-size);
   --input-line-height: var(--input-text-large-line-height);
   --input-font-weight: var(--input-text-large-weight);
@@ -4730,30 +4710,23 @@ figure.chip {
 }
 
 .input:where([data-input-type="textarea"]) .input-field {
-  --input-textarea-radius: var(--input-textarea-radius-medium);
-  --input-textarea-padding-inline: var(--input-textarea-padding-inline-medium);
   --input-textarea-padding-block: var(--input-textarea-padding-block-medium);
-  --input-textarea-gap: var(--input-textarea-gap-medium);
   align-items: stretch;
   flex-direction: column;
-  gap: var(--input-textarea-gap);
-  border-radius: var(--input-textarea-radius);
+  gap: var(--input-default-gap);
+  border-radius: var(--input-default-radius-medium);
   padding: var(--input-textarea-padding-block)
-    var(--input-textarea-padding-inline);
+    var(--input-default-padding-inline);
 }
 .input:where([data-input-type="textarea"])
   .input-field:where([data-size="small"]) {
-  --input-textarea-radius: var(--input-textarea-radius-small);
-  --input-textarea-padding-inline: var(--input-textarea-padding-inline-small);
   --input-textarea-padding-block: var(--input-textarea-padding-block-small);
-  --input-textarea-gap: var(--input-textarea-gap-small);
+  border-radius: var(--input-default-radius-small);
 }
 .input:where([data-input-type="textarea"])
   .input-field:where([data-size="large"]) {
-  --input-textarea-radius: var(--input-textarea-radius-large);
-  --input-textarea-padding-inline: var(--input-textarea-padding-inline-large);
   --input-textarea-padding-block: var(--input-textarea-padding-block-large);
-  --input-textarea-gap: var(--input-textarea-gap-large);
+  border-radius: var(--input-default-radius-large);
 }
 
 .input:where([data-input-type="textarea"]) {
@@ -5174,11 +5147,14 @@ figure.chip {
   align-items: center;
   flex: 1 1 auto;
   min-width: 0;
-  min-height: var(--input-time-height-medium);
-  padding: var(--input-time-padding-block) var(--input-time-padding-inline);
+  height: var(--input-default-height-medium);
+  min-height: var(--input-default-height-medium);
+  padding: var(--input-default-padding-block)
+    var(--input-default-padding-inline);
   border: var(--input-time-border-width) solid var(--input-time-border-color);
   border-radius: var(--input-time-radius);
   background-color: var(--input-time-surface-color);
+  box-sizing: border-box;
 }
 
 .input-time-fields-group {
@@ -5211,16 +5187,6 @@ figure.chip {
   letter-spacing: var(--input-time-letter-spacing);
   text-align: center;
 }
-.input-time-field:first-child {
-  text-align: right;
-}
-.input-time-field:last-of-type {
-  text-align: left;
-}
-.input-time-field:not(:first-child):not(:last-of-type) {
-  width: var(--input-time-field-middle-width);
-  min-width: var(--input-time-field-middle-width);
-}
 .input-time-field::placeholder {
   color: var(--input-time-placeholder-color);
 }
@@ -5254,8 +5220,8 @@ figure.chip {
 }
 .input-time-icon-button svg {
   display: block;
-  width: 100%;
-  height: 100%;
+  width: var(--input-time-icon-size);
+  height: var(--input-time-icon-size);
 }
 
 .input-time-stepper {
@@ -5278,6 +5244,7 @@ figure.chip {
   background-color: var(--input-time-surface-color);
   color: var(--input-time-text-color);
   cursor: pointer;
+  box-sizing: border-box;
 }
 .input-time-stepper-button:first-child {
   border-radius: 0 var(--input-time-stepper-radius) 0 0;
@@ -5296,22 +5263,55 @@ figure.chip {
   border-radius: var(--input-time-radius) 0 0 var(--input-time-radius);
 }
 
-.input-time:where([data-size="small"]) .input-time-trigger-input {
-  min-height: var(--input-time-height-small);
+.input-time:where([data-size="small"]) {
+  --input-time-radius: var(--input-default-radius-small);
+  --input-time-stepper-button-height: calc(
+    var(--input-default-height-small) / 2
+  );
+  --input-time-font-size: var(--input-time-text-small-size);
+  --input-time-line-height: var(--input-time-text-small-line-height);
+  --input-time-font-weight: var(--input-time-text-small-weight);
+  --input-time-letter-spacing: var(--input-time-text-small-letter-spacing);
 }
-.input-time:where([data-size="small"]) .input-time-field {
-  font-size: var(--input-time-text-small-size);
-  line-height: var(--input-time-text-small-line-height);
-  font-weight: var(--input-time-text-small-weight);
+.input-time:where([data-size="small"]) .input-time-trigger-input {
+  height: var(--input-default-height-small);
+  min-height: var(--input-default-height-small);
 }
 
+.input-time:where([data-size="large"]) {
+  --input-time-radius: var(--input-default-radius-large);
+  --input-time-stepper-button-height: calc(
+    var(--input-default-height-large) / 2
+  );
+  --input-time-font-size: var(--input-time-text-large-size);
+  --input-time-line-height: var(--input-time-text-large-line-height);
+  --input-time-font-weight: var(--input-time-text-large-weight);
+  --input-time-letter-spacing: var(--input-time-text-large-letter-spacing);
+}
 .input-time:where([data-size="large"]) .input-time-trigger-input {
-  min-height: var(--input-time-height-large);
+  height: var(--input-default-height-large);
+  min-height: var(--input-default-height-large);
+}
+
+.input-time:where([data-state="active"]) .input-time-field::placeholder,
+.input-time:where([data-state="focused"]) .input-time-field::placeholder {
+  color: var(--input-time-text-color);
+}
+
+.input-time:where([data-priority="primary"][data-state="focused"])
+  .input-time-trigger-input,
+.input-time:where([data-priority="primary"][data-state="focused"])
+  .input-time-stepper-button {
+  border-color: var(--input-time-border-active-color);
+  border-width: var(--input-time-border-width-focus);
+}
+.input-time:where([data-priority="primary"][data-state="focused"])
+  .input-time-stepper-button {
+  border-left: 0;
 }
-.input-time:where([data-size="large"]) .input-time-field {
-  font-size: var(--input-time-text-large-size);
-  line-height: var(--input-time-text-large-line-height);
-  font-weight: var(--input-time-text-large-weight);
+.input-time:where([data-priority="primary"][data-state="focused"])
+  .input-time-stepper-button:last-child {
+  border-top: 0;
 }
 
 .input-time:where([data-priority="secondary"]) .input-time-trigger-input {
@@ -5324,8 +5324,8 @@ figure.chip {
 }
 
 .input-time:where([data-priority="tertiary"]) .input-time-trigger-input {
-  min-height: var(--input-time-tertiary-height);
-  border-radius: var(--input-time-tertiary-radius);
+  min-height: var(--input-tertiary-height-base);
+  border-radius: var(--input-tertiary-radius-base);
 }
 
 .input-time:where([data-priority="table"]) {
@@ -5333,11 +5333,11 @@ figure.chip {
   height: 100%;
 }
 .input-time:where([data-priority="table"]) .input-time-trigger-input {
-  min-height: var(--input-time-height-small);
+  min-height: var(--input-default-height-small);
   height: 100%;
   padding-inline: var(--input-time-table-padding-inline);
   border-color: var(--input-time-table-border-color);
-  border-radius: var(--input-time-table-radius);
+  border-radius: var(--input-table-radius-base);
   background-color: var(--input-time-table-surface-color);
 }
 .input-time:where([data-priority="table"]) .input-time-field {
@@ -5360,10 +5360,14 @@ figure.chip {
   border-color: var(--input-time-border-disabled-color);
   background-color: var(--input-time-surface-disabled-color);
 }
-.input-time:where([data-state="disabled"]) .input-time-field {
+.input-time:where([data-state="disabled"]) .input-time-field,
+.input-time:where([data-state="disabled"]) .input-time-period-field {
   color: var(--input-time-text-disabled-color);
   cursor: default;
 }
+.input-time:where([data-state="disabled"]) .input-time-field::placeholder {
+  color: var(--input-time-text-disabled-color);
+}
 .input-time:where([data-state="disabled"]) .input-time-icon-button {
   color: var(--input-time-icon-disabled-color);
   cursor: default;
@@ -6085,7 +6089,7 @@ figure.chip {
   color: var(--segmented-label-active-color);
 }
 
-/* Select tokens mapped to Input primary tokens for visual parity */
+/* Select-specific tokens. Primary small/medium/large geometry consumes Input.Base directly. */
 
 .select {
   display: flex;
@@ -6138,13 +6142,13 @@ figure.chip {
   display: flex;
   width: 100%;
   align-items: center;
-  gap: var(--select-primary-gap-inline);
-  min-height: var(--select-primary-height-medium);
-  padding: var(--select-primary-padding-block)
-    var(--select-primary-padding-inline);
-  border: var(--select-primary-border-width-default) solid
+  gap: var(--input-default-gap);
+  min-height: var(--input-default-height-medium);
+  padding: var(--input-default-padding-block)
+    var(--input-default-padding-inline);
+  border: var(--input-border-width-default) solid
     var(--select-primary-color-border);
-  border-radius: var(--select-primary-radius-medium);
+  border-radius: var(--input-default-radius-medium);
   background-color: var(--select-primary-color-surface);
   cursor: pointer;
   transition:
@@ -6154,8 +6158,8 @@ figure.chip {
   text-align: left;
 }
 .select-button:where([data-size="small"]) {
-  min-height: var(--select-primary-height-small);
-  border-radius: var(--select-primary-radius-small);
+  min-height: var(--input-default-height-small);
+  border-radius: var(--input-default-radius-small);
 }
 .select-button:where([data-size="xsmall"]) {
   min-height: var(--select-primary-height-xsmall);
@@ -6167,8 +6171,8 @@ figure.chip {
     var(--select-primary-padding-inline-start-xsmall);
 }
 .select-button:where([data-size="large"]) {
-  min-height: var(--select-primary-height-large);
-  border-radius: var(--select-primary-radius-large);
+  min-height: var(--input-default-height-large);
+  border-radius: var(--input-default-radius-large);
 }
 .select-button:where([data-multiple="true"]) {
   align-items: center;
@@ -6238,7 +6242,7 @@ figure.chip {
 .select-button:where(:not([data-priority="secondary"])):focus-visible,
 .select-button:where(:not([data-priority="secondary"])):focus-within {
   border-color: var(--select-primary-color-border-focused);
-  border-width: var(--select-primary-border-width-focus);
+  border-width: var(--input-border-width-emphasis);
   --select-icon-fill: var(--select-icon-color-focused);
 }
 .select-button:where([data-priority="table"]):where([data-state="focused"]),
@@ -6246,7 +6250,7 @@ figure.chip {
 .select-button:where([data-priority="table"]):focus-visible,
 .select-button:where([data-priority="table"]):focus-within {
   border-color: var(--select-table-border-focus-color);
-  border-width: var(--select-primary-border-width-focus);
+  border-width: var(--input-border-width-emphasis);
   --select-icon-fill: var(--select-table-icon-color-focused);
 }
 .select-button:where(:not([data-priority="secondary"])):where(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -90,8 +90,8 @@
     "@uniai-fe/eslint-config": "0.4.2",
     "@uniai-fe/next-devkit": "0.4.0",
     "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/util-functions": "0.4.3",
-    "@uniai-fe/uds-foundation": "0.5.0"
+    "@uniai-fe/uds-foundation": "0.5.0",
+    "@uniai-fe/util-functions": "0.4.3"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

package/src/components/input/markup/time/Template.tsx

@@ -22,10 +22,30 @@ import {
   stepTimeValue,
   toDisplayHour,
 } from "../../../time-picker/utils";
-import ClockIcon from "../../img/clock.svg";
 import type { InputTimeDraft, InputTimeTemplateProps } from "../../types";
 import InputTimeTrigger from "./Trigger";
 
+const defaultClockIcon = (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+  >
+    <path
+      d="M12 7.2002C12.4418 7.2002 12.7998 7.55817 12.7998 8V11.8213L15.3965 13.3057C15.78 13.5248 15.9134 14.0129 15.6943 14.3965C15.4752 14.78 14.9871 14.9134 14.6035 14.6943L11.6035 12.9805C11.3544 12.8381 11.2003 12.5731 11.2002 12.2861V8C11.2002 7.55817 11.5582 7.2002 12 7.2002Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 2.2002C17.4124 2.2002 21.7998 6.58761 21.7998 12C21.7998 17.4124 17.4124 21.7998 12 21.7998C6.58761 21.7998 2.2002 17.4124 2.2002 12C2.2002 6.58761 6.58761 2.2002 12 2.2002ZM12 3.7998C7.47126 3.7998 3.7998 7.47126 3.7998 12C3.7998 16.5287 7.47126 20.2002 12 20.2002C16.5287 20.2002 20.2002 16.5287 20.2002 12C20.2002 7.47126 16.5287 3.7998 12 3.7998Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
 const getInputTimeDraft = (
   value: string,
   format: "12h" | "24h",
@@ -122,13 +142,12 @@ const InputTimeTemplate = forwardRef<HTMLDivElement, InputTimeTemplateProps>(
 
     const isDisabled =
       disabled || stateProp === "disabled" || stateProp === "loading";
-    const visualState =
-      priority === "tertiary"
-        ? isDisabled
-          ? "disabled"
-          : "default"
-        : !isDisabled && activeUnit
-          ? "active"
+    const visualState = isDisabled
+      ? "disabled"
+      : priority === "tertiary"
+        ? "default"
+        : activeUnit
+          ? "focused"
           : stateProp;
     const resolvedIconPosition =
       iconPosition ?? (priority === "table" ? "left" : "right");
@@ -343,9 +362,7 @@ const InputTimeTemplate = forwardRef<HTMLDivElement, InputTimeTemplateProps>(
               withSeconds={withSeconds}
               disabled={Boolean(isDisabled)}
               readOnly={readOnly}
-              icon={
-                icon === undefined ? <ClockIcon aria-hidden="true" /> : icon
-              }
+              icon={icon === undefined ? defaultClockIcon : icon}
               iconPosition={resolvedIconPosition}
               iconLabel={iconLabel}
               hoursInputLabel={hoursInputLabel}

package/src/components/input/markup/time/Trigger.tsx

@@ -44,6 +44,7 @@ const InputTimeTrigger = forwardRef<HTMLDivElement, InputTimeTriggerProps>(
       onStep,
       onRootBlur,
       className,
+      onClick: onPopupTriggerClick,
       ...restProps
     },
     ref,
@@ -71,6 +72,15 @@ const InputTimeTrigger = forwardRef<HTMLDivElement, InputTimeTriggerProps>(
     const onClockClick = () => {
       hoursRef.current?.focus();
     };
+    // PopOver.Trigger가 주입한 click은 clock button에서만 popup toggle로 위임한다.
+    const onRootClick = (event: MouseEvent<HTMLDivElement>) => {
+      if (
+        event.target instanceof Element &&
+        event.target.closest(".input-time-icon-button")
+      ) {
+        onPopupTriggerClick?.(event);
+      }
+    };
 
     return (
       <div
@@ -84,6 +94,7 @@ const InputTimeTrigger = forwardRef<HTMLDivElement, InputTimeTriggerProps>(
         data-active-unit={activeUnit ?? undefined}
         data-icon-position={iconPosition}
         onBlur={onRootBlur}
+        onClick={onRootClick}
       >
         <div className="input-time-trigger-input">
           {iconPosition === "left" ? (

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

@@ -89,6 +89,7 @@
 
   &:where([data-size="small"]) {
     min-height: var(--input-default-height-small);
+    border-radius: var(--input-default-radius-small);
     // Figma small 규격(40px/15px/1.4/0.2px)을 size token으로 고정한다.
     --input-font-size: var(--input-text-small-size);
     --input-line-height: var(--input-text-small-line-height);
@@ -98,6 +99,7 @@
 
   &:where([data-size="large"]) {
     min-height: var(--input-default-height-large);
+    border-radius: var(--input-default-radius-large);
     // Figma large 규격(56px/19px)을 size token으로 고정한다.
     --input-font-size: var(--input-text-large-size);
     --input-line-height: var(--input-text-large-line-height);
@@ -299,30 +301,22 @@
 }
 
 .input:where([data-input-type="textarea"]) .input-field {
-  // TextArea는 size별로 radius/spacing을 분기해 input과 동일한 스케일 감각을 유지한다.
-  --input-textarea-radius: var(--input-textarea-radius-medium);
-  --input-textarea-padding-inline: var(--input-textarea-padding-inline-medium);
   --input-textarea-padding-block: var(--input-textarea-padding-block-medium);
-  --input-textarea-gap: var(--input-textarea-gap-medium);
   align-items: stretch;
   flex-direction: column;
-  gap: var(--input-textarea-gap);
-  border-radius: var(--input-textarea-radius);
+  gap: var(--input-default-gap);
+  border-radius: var(--input-default-radius-medium);
   padding: var(--input-textarea-padding-block)
-    var(--input-textarea-padding-inline);
+    var(--input-default-padding-inline);
 
   &:where([data-size="small"]) {
-    --input-textarea-radius: var(--input-textarea-radius-small);
-    --input-textarea-padding-inline: var(--input-textarea-padding-inline-small);
     --input-textarea-padding-block: var(--input-textarea-padding-block-small);
-    --input-textarea-gap: var(--input-textarea-gap-small);
+    border-radius: var(--input-default-radius-small);
   }
 
   &:where([data-size="large"]) {
-    --input-textarea-radius: var(--input-textarea-radius-large);
-    --input-textarea-padding-inline: var(--input-textarea-padding-inline-large);
     --input-textarea-padding-block: var(--input-textarea-padding-block-large);
-    --input-textarea-gap: var(--input-textarea-gap-large);
+    border-radius: var(--input-default-radius-large);
   }
 }
 

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

@@ -31,11 +31,14 @@
   align-items: center;
   flex: 1 1 auto;
   min-width: 0;
-  min-height: var(--input-time-height-medium);
-  padding: var(--input-time-padding-block) var(--input-time-padding-inline);
+  height: var(--input-default-height-medium);
+  min-height: var(--input-default-height-medium);
+  padding: var(--input-default-padding-block)
+    var(--input-default-padding-inline);
   border: var(--input-time-border-width) solid var(--input-time-border-color);
   border-radius: var(--input-time-radius);
   background-color: var(--input-time-surface-color);
+  box-sizing: border-box;
 }
 
 .input-time-fields-group {
@@ -69,19 +72,6 @@
   letter-spacing: var(--input-time-letter-spacing);
   text-align: center;
 
-  &:first-child {
-    text-align: right;
-  }
-
-  &:last-of-type {
-    text-align: left;
-  }
-
-  &:not(:first-child):not(:last-of-type) {
-    width: var(--input-time-field-middle-width);
-    min-width: var(--input-time-field-middle-width);
-  }
-
   &::placeholder {
     color: var(--input-time-placeholder-color);
   }
@@ -116,8 +106,8 @@
 
   svg {
     display: block;
-    width: 100%;
-    height: 100%;
+    width: var(--input-time-icon-size);
+    height: var(--input-time-icon-size);
   }
 }
 
@@ -141,6 +131,7 @@
   background-color: var(--input-time-surface-color);
   color: var(--input-time-text-color);
   cursor: pointer;
+  box-sizing: border-box;
 
   &:first-child {
     border-radius: 0 var(--input-time-stepper-radius) 0 0;
@@ -163,26 +154,57 @@
 }
 
 .input-time:where([data-size="small"]) {
-  .input-time-trigger-input {
-    min-height: var(--input-time-height-small);
-  }
+  --input-time-radius: var(--input-default-radius-small);
+  --input-time-stepper-button-height: calc(
+    var(--input-default-height-small) / 2
+  );
+  --input-time-font-size: var(--input-time-text-small-size);
+  --input-time-line-height: var(--input-time-text-small-line-height);
+  --input-time-font-weight: var(--input-time-text-small-weight);
+  --input-time-letter-spacing: var(--input-time-text-small-letter-spacing);
 
-  .input-time-field {
-    font-size: var(--input-time-text-small-size);
-    line-height: var(--input-time-text-small-line-height);
-    font-weight: var(--input-time-text-small-weight);
+  .input-time-trigger-input {
+    height: var(--input-default-height-small);
+    min-height: var(--input-default-height-small);
   }
 }
 
 .input-time:where([data-size="large"]) {
+  --input-time-radius: var(--input-default-radius-large);
+  --input-time-stepper-button-height: calc(
+    var(--input-default-height-large) / 2
+  );
+  --input-time-font-size: var(--input-time-text-large-size);
+  --input-time-line-height: var(--input-time-text-large-line-height);
+  --input-time-font-weight: var(--input-time-text-large-weight);
+  --input-time-letter-spacing: var(--input-time-text-large-letter-spacing);
+
   .input-time-trigger-input {
-    min-height: var(--input-time-height-large);
+    height: var(--input-default-height-large);
+    min-height: var(--input-default-height-large);
   }
+}
 
-  .input-time-field {
-    font-size: var(--input-time-text-large-size);
-    line-height: var(--input-time-text-large-line-height);
-    font-weight: var(--input-time-text-large-weight);
+.input-time:where([data-state="active"]),
+.input-time:where([data-state="focused"]) {
+  .input-time-field::placeholder {
+    color: var(--input-time-text-color);
+  }
+}
+
+.input-time:where([data-priority="primary"][data-state="focused"]) {
+  .input-time-trigger-input,
+  .input-time-stepper-button {
+    border-color: var(--input-time-border-active-color);
+    border-width: var(--input-time-border-width-focus);
+  }
+
+  .input-time-stepper-button {
+    border-left: 0;
+
+    &:last-child {
+      border-top: 0;
+    }
   }
 }
 
@@ -199,8 +221,8 @@
 
 .input-time:where([data-priority="tertiary"]) {
   .input-time-trigger-input {
-    min-height: var(--input-time-tertiary-height);
-    border-radius: var(--input-time-tertiary-radius);
+    min-height: var(--input-tertiary-height-base);
+    border-radius: var(--input-tertiary-radius-base);
   }
 }
 
@@ -209,11 +231,11 @@
   height: 100%;
 
   .input-time-trigger-input {
-    min-height: var(--input-time-height-small);
+    min-height: var(--input-default-height-small);
     height: 100%;
     padding-inline: var(--input-time-table-padding-inline);
     border-color: var(--input-time-table-border-color);
-    border-radius: var(--input-time-table-radius);
+    border-radius: var(--input-table-radius-base);
     background-color: var(--input-time-table-surface-color);
   }
 
@@ -244,11 +266,16 @@
     background-color: var(--input-time-surface-disabled-color);
   }
 
-  .input-time-field {
+  .input-time-field,
+  .input-time-period-field {
     color: var(--input-time-text-disabled-color);
     cursor: default;
   }
 
+  .input-time-field::placeholder {
+    color: var(--input-time-text-disabled-color);
+  }
+
   .input-time-icon-button {
     color: var(--input-time-icon-disabled-color);
     cursor: default;

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

@@ -17,25 +17,18 @@
   --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-default-radius-small: var(--theme-radius-medium-4);
+  --input-default-radius-medium: var(--theme-radius-large-1);
+  --input-default-radius-large: var(--theme-radius-large-2);
+  --input-default-radius-base: var(--input-default-radius-medium);
   --input-tertiary-radius-base: var(--theme-radius-large-2);
   --input-table-radius-base: 0;
   --input-tertiary-element-min-height: 1.5em;
   --input-textarea-min-height: calc(var(--input-default-height-medium) * 2);
   --input-textarea-height: 128px;
-  /* TextArea size token은 Input 기본 size token을 재할당해 축을 일치시킨다. */
-  --input-textarea-radius-small: var(--input-default-radius-base);
-  --input-textarea-radius-medium: var(--input-default-radius-base);
-  --input-textarea-radius-large: var(--input-default-radius-base);
-  --input-textarea-padding-inline-small: var(--spacing-padding-6);
-  --input-textarea-padding-inline-medium: var(--spacing-padding-6);
-  --input-textarea-padding-inline-large: var(--spacing-padding-6);
   --input-textarea-padding-block-small: var(--spacing-padding-5);
   --input-textarea-padding-block-medium: var(--spacing-padding-5);
   --input-textarea-padding-block-large: var(--spacing-padding-6);
-  --input-textarea-gap-small: var(--input-default-gap);
-  --input-textarea-gap-medium: var(--input-default-gap);
-  --input-textarea-gap-large: var(--input-default-gap);
   --input-textarea-counter-font-size: var(--font-label-medium-size);
   --input-textarea-counter-line-height: var(--font-label-medium-line-height);
   --input-textarea-counter-font-weight: var(--font-label-medium-weight);
@@ -122,33 +115,24 @@
 
   /* TimePicker tokens */
   --input-time-width: 100%;
-  --input-time-height-small: var(--input-default-height-small);
-  --input-time-height-medium: var(--input-default-height-medium);
-  --input-time-height-large: var(--input-default-height-large);
-  --input-time-tertiary-height: var(--input-tertiary-height-base);
-  --input-time-padding-inline: var(--input-default-padding-inline);
-  --input-time-padding-block: var(--input-default-padding-block);
-  --input-time-secondary-padding-block: var(--input-secondary-padding-block);
   --input-time-table-padding-inline: var(--spacing-padding-4);
-  --input-time-radius: var(--theme-radius-medium-3);
-  --input-time-tertiary-radius: var(--input-tertiary-radius-base);
-  --input-time-table-radius: var(--input-table-radius-base);
+  --input-time-radius: var(--input-default-radius-medium);
   --input-time-field-gap: 0;
-  --input-time-field-width: 2.7ch;
-  --input-time-field-middle-width: 2.2ch;
   --input-time-period-field-width: 4.2ch;
   --input-time-field-height: 100%;
   --input-time-icon-size: 24px;
   --input-time-stepper-width: 28px;
-  --input-time-stepper-button-height: 28px;
+  --input-time-stepper-button-height: calc(
+    var(--input-default-height-medium) / 2
+  );
   --input-time-stepper-radius: var(--theme-radius-medium-3);
   --input-time-stepper-icon-size: 16px;
-  --input-time-text-color: var(--input-text-color);
-  --input-time-text-disabled-color: var(--input-text-disabled-color);
-  --input-time-placeholder-color: var(--input-placeholder-color);
+  --input-time-text-color: var(--color-cool-gray-30);
+  --input-time-text-disabled-color: var(--color-cool-gray-60);
+  --input-time-placeholder-color: var(--color-cool-gray-40);
   --input-time-separator-color: var(--color-label-alternative);
-  --input-time-icon-color: var(--color-label-alternative);
-  --input-time-icon-disabled-color: var(--color-label-disabled);
+  --input-time-icon-color: var(--color-cool-gray-25);
+  --input-time-icon-disabled-color: var(--color-cool-gray-45);
   --input-time-font-size: var(--input-text-medium-size);
   --input-time-line-height: var(--input-text-medium-line-height);
   --input-time-font-weight: var(--input-text-medium-weight);
@@ -173,6 +157,7 @@
   --input-time-border-color: var(--input-border-color);
   --input-time-border-width: var(--input-border-width-default);
   --input-time-border-width-emphasis: var(--input-border-width-emphasis);
+  --input-time-border-width-focus: 2px;
   --input-time-border-active-color: var(--input-border-active-color);
   --input-time-border-success-color: var(--input-border-success-color);
   --input-time-border-error-color: var(--input-border-error-color);
@@ -180,6 +165,10 @@
   --input-time-table-border-color: var(--input-border-table-default-color);
   --input-time-surface-color: var(--input-surface-color);
   --input-time-secondary-surface-color: var(--input-secondary-surface-color);
-  --input-time-surface-disabled-color: var(--input-surface-disabled-color);
+  --input-time-surface-disabled-color: var(--color-cool-gray-85);
   --input-time-table-surface-color: var(--input-table-surface-color);
 }
+
+.input-time {
+  --input-time-field-width: 1.9em;
+}

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

@@ -49,13 +49,13 @@
   display: flex;
   width: 100%;
   align-items: center;
-  gap: var(--select-primary-gap-inline);
-  min-height: var(--select-primary-height-medium);
-  padding: var(--select-primary-padding-block)
-    var(--select-primary-padding-inline);
-  border: var(--select-primary-border-width-default) solid
+  gap: var(--input-default-gap);
+  min-height: var(--input-default-height-medium);
+  padding: var(--input-default-padding-block)
+    var(--input-default-padding-inline);
+  border: var(--input-border-width-default) solid
     var(--select-primary-color-border);
-  border-radius: var(--select-primary-radius-medium);
+  border-radius: var(--input-default-radius-medium);
   background-color: var(--select-primary-color-surface);
   cursor: pointer;
   transition:
@@ -65,8 +65,8 @@
   text-align: left;
 
   &:where([data-size="small"]) {
-    min-height: var(--select-primary-height-small);
-    border-radius: var(--select-primary-radius-small);
+    min-height: var(--input-default-height-small);
+    border-radius: var(--input-default-radius-small);
   }
 
   &:where([data-size="xsmall"]) {
@@ -81,8 +81,8 @@
   }
 
   &:where([data-size="large"]) {
-    min-height: var(--select-primary-height-large);
-    border-radius: var(--select-primary-radius-large);
+    min-height: var(--input-default-height-large);
+    border-radius: var(--input-default-radius-large);
   }
 
   &:where([data-multiple="true"]) {
@@ -146,7 +146,7 @@
   &:where(:not([data-priority="secondary"])):focus-visible,
   &:where(:not([data-priority="secondary"])):focus-within {
     border-color: var(--select-primary-color-border-focused);
-    border-width: var(--select-primary-border-width-focus);
+    border-width: var(--input-border-width-emphasis);
     --select-icon-fill: var(--select-icon-color-focused);
   }
 
@@ -155,7 +155,7 @@
   &:where([data-priority="table"]):focus-visible,
   &:where([data-priority="table"]):focus-within {
     border-color: var(--select-table-border-focus-color);
-    border-width: var(--select-primary-border-width-focus);
+    border-width: var(--input-border-width-emphasis);
     --select-icon-fill: var(--select-table-icon-color-focused);
   }
 

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

@@ -1,4 +1,4 @@
-/* Select tokens mapped to Input primary tokens for visual parity */
+/* Select-specific tokens. Primary small/medium/large geometry consumes Input.Base directly. */
 :root {
   /* layout presets */
   --select-width: 100%;
@@ -6,25 +6,14 @@
   --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);
   --select-primary-height-xsmall: 24px;
 
-  --select-primary-radius-small: var(--input-default-radius-base);
-  --select-primary-radius-medium: var(--input-default-radius-base);
-  --select-primary-radius-large: var(--input-default-radius-base);
   --select-primary-radius-xsmall: var(--theme-radius-medium-2);
 
-  --select-primary-padding-inline: var(--input-default-padding-inline);
-  --select-primary-padding-block: var(--input-default-padding-block);
-  --select-primary-gap-inline: var(--input-default-gap);
   --select-primary-padding-inline-start-xsmall: var(--spacing-padding-4);
   --select-primary-padding-inline-end-xsmall: var(--spacing-padding-3);
   --select-primary-padding-block-xsmall: var(--spacing-padding-2);
   --select-primary-gap-inline-xsmall: var(--spacing-gap-1);
-  --select-primary-border-width-default: var(--input-border-width-default);
-  --select-primary-border-width-focus: var(--input-border-width-emphasis);
 
   --select-secondary-radius: var(--theme-radius-medium-1);
   --select-secondary-padding-inline: var(--spacing-padding-4);

package/src/components/input/img/clock.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.6"/>
-<path d="M12 7.5V12L15.25 14.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>