@uniai-fe/uds-primitives 0.1.13 → 0.2.0

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

@@ -0,0 +1,345 @@
+.input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-3);
+  width: 100%;
+
+  &[data-block="true"],
+  &--block {
+    width: 100%;
+  }
+}
+
+.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);
+}
+
+.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(--input-default-gap);
+  border-radius: var(--input-default-radius-base);
+  border: var(--input-border-width-default) solid var(--input-border-color);
+  background-color: var(--input-surface-color);
+  padding: var(--input-default-padding-block)
+    var(--input-default-padding-inline);
+  min-height: var(--input-default-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(--input-default-height-small);
+  }
+
+  &[data-size="large"] {
+    min-height: var(--input-default-height-large);
+  }
+
+  &[data-priority="secondary"] {
+    border: none;
+    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;
+
+    &[data-state="active"],
+    &[data-state="focused"] {
+      border-bottom-color: var(--input-border-active-color);
+      border-bottom-width: var(--input-border-width-emphasis);
+    }
+
+    &[data-state="success"] {
+      border-bottom-color: var(--input-border-success-color);
+      border-bottom-width: var(--input-border-width-emphasis);
+    }
+
+    &[data-state="error"] {
+      border-bottom-color: var(--input-border-error-color);
+      border-bottom-width: var(--input-border-width-emphasis);
+    }
+
+    &[data-state="disabled"] {
+      border-bottom-color: var(--input-border-underline-disabled-color);
+      border-bottom-width: var(--input-border-width-default);
+    }
+  }
+
+  &[data-priority="tertiary"] {
+    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);
+    column-gap: var(--input-default-gap);
+    flex-wrap: wrap;
+    align-items: center;
+
+    .input-field-control {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      column-gap: var(--input-default-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(--input-border-active-color);
+      border-width: var(--input-border-width-emphasis);
+    }
+
+    &[data-state="success"] {
+      border-color: var(--input-border-success-color);
+      border-width: var(--input-border-width-emphasis);
+    }
+
+    &[data-state="error"] {
+      border-color: var(--input-border-error-color);
+      border-width: var(--input-border-width-emphasis);
+    }
+
+    &[data-state="disabled"] {
+      border-color: var(--input-border-disabled-color);
+      border-width: var(--input-border-width-default);
+      background-color: var(
+        --input-surface-disabled-color
+      ); /* disabled 배경 토큰 */
+    }
+  }
+}
+
+.input-element {
+  flex: 1 1 auto;
+  width: 100%;
+  border: none;
+  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;
+  outline: none;
+  box-shadow: none;
+  min-width: 0;
+
+  &::placeholder {
+    color: var(--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(--input-default-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(--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(--input-helper-color);
+  font-size: var(--font-label-small-size);
+  line-height: var(--font-label-small-line-height);
+
+  [data-state="error"] & {
+    color: var(--input-border-error-color);
+  }
+
+  // [data-state="success"] & {
+  //   color: var(--input-helper-success-color);
+  // }
+
+  [data-state="disabled"] & {
+    color: var(--input-helper-disabled-color);
+  }
+}
+
+.input-affix {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  color: var(--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(--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(--input-border-width-default);
+
+  &[data-state="active"],
+  &[data-state="focused"] {
+    border-bottom-color: var(--input-border-active-color);
+    border-bottom-width: var(--input-border-width-emphasis);
+  }
+
+  &[data-state="success"] {
+    border-bottom-color: var(--input-border-success-color);
+    border-bottom-width: var(--input-border-width-emphasis);
+  }
+
+  &[data-state="error"] {
+    border-bottom-color: var(--input-border-error-color);
+    border-bottom-width: var(--input-border-width-emphasis);
+  }
+
+  &[data-state="disabled"] {
+    border-bottom-color: var(--input-border-underline-disabled-color);
+    border-bottom-width: var(--input-border-width-default);
+  }
+}
+
+.input[data-state="active"],
+.input[data-state="focused"],
+.input[data-state="success"] {
+  .input-label,
+  .input-inline-label {
+    color: var(--input-label-accent-color);
+  }
+}
+
+.input[data-state="error"] {
+  .input-label,
+  .input-inline-label {
+    color: var(--input-label-error-color);
+  }
+
+  .input-helper-text {
+    color: var(--input-label-error-color);
+  }
+}
+
+.input[data-state="disabled"] {
+  .input-label,
+  .input-inline-label,
+  .input-helper-text,
+  .input-affix {
+    color: var(--input-helper-disabled-color);
+  }
+
+  .input-field {
+    border-color: var(--input-border-color);
+    background-color: var(--input-surface-disabled-color);
+
+    &[data-priority="secondary"] {
+      background-color: transparent;
+    }
+  }
+}
+
+.input-side {
+  display: flex;
+  align-items: center;
+}