@uniai-fe/uds-primitives 0.1.13 → 0.2.1

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

@@ -1,476 +1,4 @@
-:root {
-  --theme-input-height-small: var(--theme-size-medium-1);
-  --theme-input-height-medium: var(--theme-size-medium-2);
-  --theme-input-height-large: var(--theme-size-medium-3);
-  --theme-input-height-tertiary: calc(var(--theme-size-medium-2) + 24px);
-  --theme-input-padding-x: var(--spacing-padding-6);
-  --theme-input-padding-y: var(--spacing-padding-4);
-  --theme-input-gap: var(--spacing-gap-4);
-  --theme-input-radius-default: var(--theme-radius-large-1);
-  --theme-input-radius-tertiary: var(--theme-radius-large-2);
-  --theme-input-label-color: var(--color-label-standard);
-  --theme-input-helper-color: var(--color-label-neutral);
-  --theme-input-helper-success-color: var(--color-success);
-  --theme-input-helper-error-color: var(--color-error);
-  --theme-input-helper-disabled-color: var(--color-label-disabled);
-  --theme-input-label-accent-color: var(--color-primary-default);
-  --theme-input-label-error-color: var(--color-error);
-  --theme-input-placeholder-color: var(--color-label-alternative);
-  --theme-input-text-color: var(--color-label-strong);
-  --theme-input-border-color: var(--color-border-standard-cool-gray);
-  --theme-input-border-width-default: 1px;
-  --theme-input-border-width-emphasis: 1.4px;
-  --theme-input-border-active: #99bdff;
-  // success 상태는 파란색 보더(blue-80) 사용
-  --theme-input-border-success: #99bdff;
-  // error 상태는 Figma 기준 44% alpha 레드 보더 사용
-  --theme-input-border-error: rgba(218, 29, 11, 0.44);
-  --theme-input-border-disabled: var(--color-border-standard-cool-gray);
-  --theme-input-border-underline-disabled: var(--color-border-assistive);
-  --theme-input-surface: var(--color-common-100);
-  --theme-input-surface-muted: var(--color-neutral-99);
-  --theme-input-surface-disabled: var(--color-neutral-95);
-}
-
-.input {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-3);
-  width: 100%;
-
-  &[data-block="true"],
-  &--block {
-    width: 100%;
-  }
-}
-
-.input-label {
-  color: var(--theme-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);
-}
-
-.input-label--visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
-.input-box {
-  width: 100%;
-}
-
-.input-field {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: var(--theme-input-gap);
-  border-radius: var(--theme-input-radius-default);
-  border: var(--theme-input-border-width-default) solid
-    var(--theme-input-border-color);
-  background-color: var(--theme-input-surface);
-  padding: var(--theme-input-padding-y) var(--theme-input-padding-x);
-  min-height: var(--theme-input-height-medium);
-  transition:
-    border-color 0.15s ease,
-    background-color 0.15s ease;
-  box-sizing: border-box;
-  outline: none;
-  box-shadow: none;
-
-  &[data-size="small"] {
-    min-height: var(--theme-input-height-small);
-  }
-
-  &[data-size="large"] {
-    min-height: var(--theme-input-height-large);
-  }
-
-  &[data-priority="secondary"] {
-    border: none;
-    border-bottom: var(--theme-input-border-width-default) solid
-      var(--theme-input-border-color);
-    border-radius: 0;
-    padding-inline: 0;
-    padding-block: var(--spacing-padding-4);
-    background-color: transparent;
-
-    &[data-state="active"],
-    &[data-state="focused"] {
-      border-bottom-color: var(--theme-input-border-active);
-      border-bottom-width: var(--theme-input-border-width-emphasis);
-    }
-
-    &[data-state="success"] {
-      border-bottom-color: var(--theme-input-border-success);
-      border-bottom-width: var(--theme-input-border-width-emphasis);
-    }
-
-    &[data-state="error"] {
-      border-bottom-color: var(--theme-input-border-error);
-      border-bottom-width: var(--theme-input-border-width-emphasis);
-    }
-
-    &[data-state="disabled"] {
-      border-bottom-color: var(--theme-input-border-underline-disabled);
-      border-bottom-width: var(--theme-input-border-width-default);
-    }
-  }
-
-  &[data-priority="tertiary"] {
-    border-radius: var(--theme-input-radius-tertiary);
-    background-color: var(--theme-input-surface);
-    min-height: var(--theme-input-height-tertiary);
-    row-gap: var(--spacing-gap-1);
-    column-gap: var(--theme-input-gap);
-    flex-wrap: wrap;
-    align-items: center;
-
-    .input-field__control {
-      display: grid;
-      grid-template-columns: auto minmax(0, 1fr);
-      column-gap: var(--theme-input-gap);
-      row-gap: var(--spacing-gap-1);
-      align-items: center;
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-
-    .input-inline-label {
-      grid-column: 1 / -1;
-      margin: 0;
-      align-self: flex-start;
-    }
-
-    .input-element {
-      min-height: var(--theme-size-medium-2);
-      width: auto;
-      flex: 1 1 auto;
-    }
-
-    .input-field__utilities {
-      align-self: center;
-      margin-left: 0;
-    }
-  }
-
-  &:not([data-priority="secondary"]) {
-    &[data-state="active"],
-    &[data-state="focused"] {
-      border-color: var(--theme-input-border-active);
-      border-width: var(--theme-input-border-width-emphasis);
-    }
-
-    &[data-state="success"] {
-      border-color: var(--theme-input-border-success);
-      border-width: var(--theme-input-border-width-emphasis);
-    }
-
-    &[data-state="error"] {
-      border-color: var(--theme-input-border-error);
-      border-width: var(--theme-input-border-width-emphasis);
-    }
-
-    &[data-state="disabled"] {
-      border-color: var(--theme-input-border-disabled);
-      border-width: var(--theme-input-border-width-default);
-      background-color: var(--theme-input-surface-disabled);
-    }
-  }
-}
-
-.input-element {
-  flex: 1 1 auto;
-  width: 100%;
-  border: none;
-  background: transparent;
-  color: var(--theme-input-text-color);
-  caret-color: var(--theme-input-text-color);
-  font-size: var(--font-body-medium-size);
-  line-height: var(--font-body-medium-line-height);
-  font-weight: var(--font-body-medium-weight);
-  letter-spacing: 0px;
-  outline: none;
-  box-shadow: none;
-  min-width: 0;
-
-  &::placeholder {
-    color: var(--theme-input-placeholder-color);
-  }
-
-  &:disabled {
-    color: var(--color-label-disabled);
-
-    &::placeholder {
-      color: var(--color-label-disabled);
-    }
-  }
-
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
-    outline: none;
-    box-shadow: none;
-  }
-}
-
-.input-field__control {
-  display: flex;
-  align-items: center;
-  gap: var(--theme-input-gap);
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.input-field__utilities {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-gap-2, 8px);
-  flex-shrink: 0;
-  margin-left: var(--spacing-gap-3, 12px);
-
-  .input-affix {
-    margin-left: 0;
-  }
-}
-
-.input-inline-label {
-  order: -2;
-  flex-basis: 100%;
-  font-size: var(--font-label-small-size);
-  line-height: var(--font-label-small-line-height);
-  color: var(--theme-input-label-color);
-}
-
-.input-field[data-priority="secondary"] .input-element {
-  padding-inline: 0;
-}
-
-.input-field[data-priority="tertiary"] .input-element {
-  min-height: var(--theme-size-medium-2);
-}
-
-.input-helper-text {
-  color: var(--theme-input-helper-color);
-  font-size: var(--font-label-small-size);
-  line-height: var(--font-label-small-line-height);
-
-  [data-state="error"] & {
-    color: var(--theme-input-border-error);
-  }
-
-  // [data-state="success"] & {
-  //   color: var(--theme-input-helper-success-color);
-  // }
-
-  [data-state="disabled"] & {
-    color: var(--theme-input-helper-disabled-color);
-  }
-}
-
-.input-affix {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  color: var(--theme-input-helper-color);
-
-  &--left {
-    order: -1;
-    margin-right: var(--spacing-gap-3);
-  }
-
-  &--right,
-  &--clear,
-  &--status {
-    margin-left: var(--spacing-gap-3);
-  }
-
-  &--clear,
-  &--status {
-    color: var(--theme-input-text-color);
-  }
-
-  // 상태별 아이콘 컬러는 디자인 토큰으로 직접 지정한다.
-  &--status[data-state="error"] {
-    color: var(--color-error);
-  }
-
-  &--status[data-state="success"] {
-    color: var(--color-primary-default);
-  }
-}
-.input-field[data-priority="secondary"] {
-  border-bottom-width: var(--theme-input-border-width-default);
-
-  &[data-state="active"],
-  &[data-state="focused"] {
-    border-bottom-color: var(--theme-input-border-active);
-    border-bottom-width: var(--theme-input-border-width-emphasis);
-  }
-
-  &[data-state="success"] {
-    border-bottom-color: var(--theme-input-border-success);
-    border-bottom-width: var(--theme-input-border-width-emphasis);
-  }
-
-  &[data-state="error"] {
-    border-bottom-color: var(--theme-input-border-error);
-    border-bottom-width: var(--theme-input-border-width-emphasis);
-  }
-
-  &[data-state="disabled"] {
-    border-bottom-color: var(--theme-input-border-underline-disabled);
-    border-bottom-width: var(--theme-input-border-width-default);
-  }
-}
-
-.input[data-state="active"],
-.input[data-state="focused"],
-.input[data-state="success"] {
-  .input-label,
-  .input-inline-label {
-    color: var(--theme-input-label-accent-color);
-  }
-}
-
-.input[data-state="error"] {
-  .input-label,
-  .input-inline-label {
-    color: var(--theme-input-label-error-color);
-  }
-
-  .input-helper-text {
-    color: var(--theme-input-label-error-color);
-  }
-}
-
-.input[data-state="disabled"] {
-  .input-label,
-  .input-inline-label,
-  .input-helper-text,
-  .input-affix {
-    color: var(--theme-input-helper-disabled-color);
-  }
-
-  .input-field {
-    border-color: var(--theme-input-border-color);
-    background-color: var(--theme-input-surface-disabled);
-
-    &[data-priority="secondary"] {
-      background-color: transparent;
-    }
-  }
-}
-
-.input-password-toggle {
-  border: none;
-  background: transparent;
-  color: var(--theme-input-label-accent-color);
-  font-size: var(--font-label-small-size);
-  line-height: var(--font-label-small-line-height);
-  font-weight: var(--font-label-small-weight);
-  padding: 0;
-  cursor: pointer;
-
-  &:disabled {
-    color: var(--theme-input-helper-disabled-color);
-    cursor: not-allowed;
-  }
-}
-
-.input-search-icon {
-  font-size: var(--font-label-large-size);
-  line-height: 1;
-}
-
-.one-time-code {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-2);
-}
-
-.one-time-code__label {
-  font-size: var(--font-label-small-size);
-  color: var(--theme-input-label-color);
-}
-
-.one-time-code__fields {
-  display: flex;
-  gap: var(--spacing-gap-3);
-}
-
-.one-time-code__input {
-  width: 44px;
-  height: 56px;
-  border-radius: var(--theme-input-radius-default);
-  border: var(--theme-input-border-width-default) solid
-    var(--theme-input-border-color);
-  text-align: center;
-  font-size: var(--font-heading-medium-size);
-  font-weight: var(--font-heading-medium-weight);
-  color: var(--theme-input-text-color);
-
-  &:focus {
-    outline: none;
-    border-color: var(--theme-input-border-active);
-    border-width: var(--theme-input-border-width-emphasis);
-  }
-}
-
-.one-time-code__helper {
-  font-size: var(--font-label-small-size);
-  color: var(--theme-input-helper-color);
-}
-
-.email-verification,
-.phone-verification {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-4);
-}
-
-.auth-code-input__actions,
-.email-verification__code-actions,
-.phone-verification__code-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-gap-3);
-  min-width: 0;
-}
-
-.auth-code-input__countdown,
-.email-verification__countdown,
-.phone-verification__countdown {
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-  font-style: normal;
-  font-size: 13px;
-  line-height: 1em;
-  letter-spacing: -0.0025em;
-  color: var(--color-primary-default);
-  flex-shrink: 0;
-}
-
-.button.input-utility-button {
-  min-height: 32px;
-  padding: var(--spacing-padding-2, 4px) var(--spacing-padding-6, 24px);
-  border-radius: var(--shape-rounded-1, 8px);
-
-  .button-label {
-    font-size: var(--font-body-xxsmall-size);
-    line-height: var(--font-body-xxsmall-line-height);
-    letter-spacing: var(--font-body-xxsmall-letter-spacing);
-    font-weight: var(--font-body-xxsmall-weight);
-  }
-}
+@use "./variables.scss" as inputVariables;
+@use "./foundation.scss" as inputFoundation;
+@use "./text.scss" as inputText;
+@use "./calendar.scss" as inputCalendar;

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

@@ -0,0 +1,89 @@
+.input-password-toggle {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--input-label-accent-color);
+  font-size: var(--font-label-small-size);
+  line-height: var(--font-label-small-line-height);
+  font-weight: var(--font-label-small-weight);
+  padding: 0;
+  cursor: pointer;
+
+  &:disabled {
+    color: var(--input-helper-disabled-color);
+    cursor: not-allowed;
+  }
+}
+
+.input-search-icon {
+  font-size: var(--font-label-large-size);
+  line-height: 1;
+}
+
+.one-time-code {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-2);
+}
+
+.one-time-code-label {
+  font-size: var(--font-label-small-size);
+  color: var(--input-label-color);
+}
+
+.one-time-code-fields {
+  display: flex;
+  gap: var(--spacing-gap-3);
+}
+
+.one-time-code-input {
+  width: 100%;
+}
+
+.one-time-code-helper {
+  font-size: var(--font-label-small-size);
+  color: var(--input-helper-color);
+}
+
+.email-verification,
+.phone-verification {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-4);
+}
+
+.auth-code-input-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-gap-3);
+  min-width: 0;
+}
+
+.auth-code-input-countdown {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 13px;
+  line-height: 1em;
+  letter-spacing: -0.0025em;
+  color: var(--color-primary-default);
+  flex-shrink: 0;
+}
+
+.button.input-utility-button {
+  min-height: 32px;
+  padding: var(--spacing-padding-2, 4px) var(--spacing-padding-6, 24px);
+  border-radius: var(--shape-rounded-1, 8px);
+
+  .button-label {
+    font-size: var(--font-body-xxsmall-size);
+    line-height: var(--font-body-xxsmall-line-height);
+    letter-spacing: var(--font-body-xxsmall-letter-spacing);
+    font-weight: var(--font-body-xxsmall-weight);
+  }
+}

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

@@ -0,0 +1,41 @@
+:root {
+  /* Input sizing tokens; Button 변수 규칙과 동일한 prefix 패턴을 맞춘다. */
+  --input-default-height-small: var(--theme-size-medium-1);
+  --input-default-height-medium: var(--theme-size-medium-2);
+  --input-default-height-large: var(--theme-size-medium-3);
+  --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-default-gap: var(--spacing-gap-4);
+  --input-default-radius-base: var(--theme-radius-large-1);
+  --input-tertiary-radius-base: var(--theme-radius-large-2);
+
+  /* Label/helper colors */
+  --input-label-color: var(--color-label-standard);
+  --input-label-accent-color: var(--color-primary-default);
+  --input-label-error-color: var(--color-error);
+  --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);
+
+  /* Text & placeholder colors */
+  --input-text-color: var(--color-label-strong);
+  --input-placeholder-color: var(--color-label-alternative);
+
+  /* Border tokens */
+  --input-border-color: var(--color-border-standard-cool-gray);
+  --input-border-width-default: 1px;
+  --input-border-width-emphasis: 1.4px;
+  --input-border-active-color: var(--color-blue-80);
+  --input-border-success-color: var(--color-blue-80);
+  /* error는 Figma 44% alpha */
+  --input-border-error-color: rgba(218, 29, 11, 0.44); // --color-feedback-error
+  --input-border-disabled-color: var(--color-border-standard-cool-gray);
+  --input-border-underline-disabled-color: var(--color-border-assistive);
+
+  /* Surface tokens */
+  --input-surface-color: var(--color-common-100);
+  --input-surface-muted-color: var(--color-neutral-99);
+  --input-surface-disabled-color: var(--color-neutral-95);
+}