@seed-design/css 1.2.16 → 2.1.0

package/recipes/text-input.css

@@ -56,23 +56,34 @@
     color: var(--seed-color-fg-disabled);
 }
 .seed-text-input__prefixText {
-    color: var(--seed-color-fg-neutral-muted);
+    color: var(--seed-color-fg-neutral-subtle);
     font-weight: var(--seed-font-weight-regular);
 }
+.seed-text-input__prefixText:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
 .seed-text-input__prefixIcon {
     color: var(--seed-color-fg-neutral-muted);
     flex-shrink: 0;
 }
+.seed-text-input__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
 .seed-text-input__suffixText {
-    color: var(--seed-color-fg-neutral-muted);
+    color: var(--seed-color-fg-neutral-subtle);
     font-weight: var(--seed-font-weight-regular);
 }
+.seed-text-input__suffixText:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
 .seed-text-input__suffixIcon {
     color: var(--seed-color-fg-neutral-muted);
     flex-shrink: 0;
 }
+.seed-text-input__suffixIcon:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
 .seed-text-input__root--variant_outline {
-    border-radius: var(--seed-radius-r3);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
 }
 .seed-text-input__root--variant_outline::after {
@@ -97,27 +108,7 @@
 .seed-text-input__root--variant_outline:is([data-readonly]):not(:is(:disabled, [disabled], [data-disabled])) {
     background-color: var(--seed-color-bg-disabled);
 }
-.seed-text-input__value--variant_outline:first-child {
-    padding-left: var(--seed-dimension-x4);
-}
-.seed-text-input__value--variant_outline:last-child {
-    padding-right: var(--seed-dimension-x4);
-}
-.seed-text-input__prefixText--variant_outline:first-child {
-    margin-left: var(--seed-dimension-x4);
-}
-.seed-text-input__prefixIcon--variant_outline:first-child {
-    margin-left: var(--seed-dimension-x4);
-}
-.seed-text-input__suffixText--variant_outline:last-child {
-    margin-right: var(--seed-dimension-x4);
-}
-.seed-text-input__suffixIcon--variant_outline:last-child {
-    margin-right: var(--seed-dimension-x4);
-}
 .seed-text-input__root--variant_underline {
-    gap: var(--seed-dimension-x2_5);
-    min-height: var(--seed-dimension-x10);
     box-shadow: inset 0 calc(1px * -1) 0 0 var(--seed-color-stroke-neutral-weak);
 }
 .seed-text-input__root--variant_underline::after {
@@ -136,49 +127,38 @@
     border-bottom-color: var(--seed-color-stroke-critical-solid);
     border-bottom-width: 2px;
 }
-.seed-text-input__value--variant_underline {
-    font-size: var(--seed-font-size-t6);
-    line-height: var(--seed-line-height-t6);
-}
-.seed-text-input__value--variant_underline::placeholder {
-    font-size: var(--seed-font-size-t6);
-    line-height: var(--seed-line-height-t6);
-}
 .seed-text-input__value--variant_underline:is([data-readonly]):not(:is(:disabled, [disabled], [data-disabled])) {
     color: var(--seed-color-fg-neutral-muted);
 }
 .seed-text-input__value--variant_underline:is([data-readonly]):not(:is(:disabled, [disabled], [data-disabled]))::placeholder {
     color: var(--seed-color-fg-neutral-muted);
 }
-.seed-text-input__prefixText--variant_underline {
-    font-size: var(--seed-font-size-t6);
-    line-height: var(--seed-line-height-t6);
-}
-.seed-text-input__prefixIcon--variant_underline {
-    width: var(--seed-dimension-x6);
-    height: var(--seed-dimension-x6);
-}
-.seed-text-input__suffixText--variant_underline {
-    font-size: var(--seed-font-size-t6);
-    line-height: var(--seed-line-height-t6);
-}
-.seed-text-input__suffixIcon--variant_underline {
-    width: var(--seed-dimension-x6);
-    height: var(--seed-dimension-x6);
-}
 .seed-text-input__value--size_large:is(textarea) {
-    min-height: 95px;
+    min-height: 94px;
     padding-top: var(--seed-dimension-x3_5);
     padding-bottom: var(--seed-dimension-x3_5);
 }
 .seed-text-input__value--size_medium:is(textarea) {
-    min-height: 90px;
-    padding-top: 11px;
-    padding-bottom: 11px;
+    min-height: 82px;
+    padding-top: var(--seed-dimension-x3);
+    padding-bottom: var(--seed-dimension-x3);
+}
+.seed-text-input__value--size_responsive:is(textarea) {
+    min-height: 94px;
+    padding-top: var(--seed-dimension-x3_5);
+    padding-bottom: var(--seed-dimension-x3_5);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__value--size_responsive:is(textarea) {
+        min-height: 82px;
+        padding-top: var(--seed-dimension-x3);
+        padding-bottom: var(--seed-dimension-x3);
+    }
 }
 .seed-text-input__root--variant_outline-size_large {
     gap: var(--seed-dimension-x2_5);
     min-height: var(--seed-dimension-x13);
+    border-radius: var(--seed-radius-r3);
 }
 .seed-text-input__value--variant_outline-size_large {
     font-size: var(--seed-font-size-t5);
@@ -188,25 +168,44 @@
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
 }
+.seed-text-input__value--variant_outline-size_large:first-child {
+    padding-left: var(--seed-dimension-x4);
+}
+.seed-text-input__value--variant_outline-size_large:last-child {
+    padding-right: var(--seed-dimension-x4);
+}
 .seed-text-input__prefixText--variant_outline-size_large {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
 }
+.seed-text-input__prefixText--variant_outline-size_large:first-child {
+    margin-left: var(--seed-dimension-x4);
+}
 .seed-text-input__prefixIcon--variant_outline-size_large {
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
 }
+.seed-text-input__prefixIcon--variant_outline-size_large:first-child {
+    margin-left: var(--seed-dimension-x4);
+}
 .seed-text-input__suffixText--variant_outline-size_large {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
 }
+.seed-text-input__suffixText--variant_outline-size_large:last-child {
+    margin-right: var(--seed-dimension-x4);
+}
 .seed-text-input__suffixIcon--variant_outline-size_large {
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
 }
+.seed-text-input__suffixIcon--variant_outline-size_large:last-child {
+    margin-right: var(--seed-dimension-x4);
+}
 .seed-text-input__root--variant_outline-size_medium {
-    gap: var(--seed-dimension-x1_5);
+    gap: var(--seed-dimension-x2);
     min-height: var(--seed-dimension-x10);
+    border-radius: var(--seed-radius-r2);
 }
 .seed-text-input__value--variant_outline-size_medium {
     font-size: var(--seed-font-size-t4);
@@ -216,19 +215,291 @@
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
 }
+.seed-text-input__value--variant_outline-size_medium:first-child {
+    padding-left: var(--seed-dimension-x3_5);
+}
+.seed-text-input__value--variant_outline-size_medium:last-child {
+    padding-right: var(--seed-dimension-x3_5);
+}
 .seed-text-input__prefixText--variant_outline-size_medium {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
 }
+.seed-text-input__prefixText--variant_outline-size_medium:first-child {
+    margin-left: var(--seed-dimension-x3_5);
+}
 .seed-text-input__prefixIcon--variant_outline-size_medium {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
 }
+.seed-text-input__prefixIcon--variant_outline-size_medium:first-child {
+    margin-left: var(--seed-dimension-x3_5);
+}
 .seed-text-input__suffixText--variant_outline-size_medium {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
 }
+.seed-text-input__suffixText--variant_outline-size_medium:last-child {
+    margin-right: var(--seed-dimension-x3_5);
+}
 .seed-text-input__suffixIcon--variant_outline-size_medium {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
+}
+.seed-text-input__suffixIcon--variant_outline-size_medium:last-child {
+    margin-right: var(--seed-dimension-x3_5);
+}
+.seed-text-input__root--variant_outline-size_responsive {
+    gap: var(--seed-dimension-x2_5);
+    min-height: var(--seed-dimension-x13);
+    border-radius: var(--seed-radius-r3);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__root--variant_outline-size_responsive {
+        gap: var(--seed-dimension-x2);
+        min-height: var(--seed-dimension-x10);
+        border-radius: var(--seed-radius-r2);
+    }
+}
+.seed-text-input__value--variant_outline-size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__value--variant_outline-size_responsive {
+        font-size: var(--seed-font-size-t4);
+        line-height: var(--seed-line-height-t4);
+    }
+}
+.seed-text-input__value--variant_outline-size_responsive::placeholder {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__value--variant_outline-size_responsive::placeholder {
+        font-size: var(--seed-font-size-t4);
+        line-height: var(--seed-line-height-t4);
+    }
+}
+.seed-text-input__value--variant_outline-size_responsive:first-child {
+    padding-left: var(--seed-dimension-x4);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__value--variant_outline-size_responsive:first-child {
+        padding-left: var(--seed-dimension-x3_5);
+    }
+}
+.seed-text-input__value--variant_outline-size_responsive:last-child {
+    padding-right: var(--seed-dimension-x4);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__value--variant_outline-size_responsive:last-child {
+        padding-right: var(--seed-dimension-x3_5);
+    }
+}
+.seed-text-input__prefixText--variant_outline-size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__prefixText--variant_outline-size_responsive {
+        font-size: var(--seed-font-size-t4);
+        line-height: var(--seed-line-height-t4);
+    }
+}
+.seed-text-input__prefixText--variant_outline-size_responsive:first-child {
+    margin-left: var(--seed-dimension-x4);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__prefixText--variant_outline-size_responsive:first-child {
+        margin-left: var(--seed-dimension-x3_5);
+    }
+}
+.seed-text-input__prefixIcon--variant_outline-size_responsive {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__prefixIcon--variant_outline-size_responsive {
+        width: var(--seed-dimension-x4);
+        height: var(--seed-dimension-x4);
+    }
+}
+.seed-text-input__prefixIcon--variant_outline-size_responsive:first-child {
+    margin-left: var(--seed-dimension-x4);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__prefixIcon--variant_outline-size_responsive:first-child {
+        margin-left: var(--seed-dimension-x3_5);
+    }
+}
+.seed-text-input__suffixText--variant_outline-size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__suffixText--variant_outline-size_responsive {
+        font-size: var(--seed-font-size-t4);
+        line-height: var(--seed-line-height-t4);
+    }
+}
+.seed-text-input__suffixText--variant_outline-size_responsive:last-child {
+    margin-right: var(--seed-dimension-x4);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__suffixText--variant_outline-size_responsive:last-child {
+        margin-right: var(--seed-dimension-x3_5);
+    }
+}
+.seed-text-input__suffixIcon--variant_outline-size_responsive {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__suffixIcon--variant_outline-size_responsive {
+        width: var(--seed-dimension-x4);
+        height: var(--seed-dimension-x4);
+    }
+}
+.seed-text-input__suffixIcon--variant_outline-size_responsive:last-child {
+    margin-right: var(--seed-dimension-x4);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__suffixIcon--variant_outline-size_responsive:last-child {
+        margin-right: var(--seed-dimension-x3_5);
+    }
+}
+.seed-text-input__root--variant_underline-size_large {
+    gap: var(--seed-dimension-x2_5);
+    min-height: var(--seed-dimension-x10);
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+}
+.seed-text-input__value--variant_underline-size_large {
+    font-size: var(--seed-font-size-t6);
+    line-height: var(--seed-line-height-t6);
+}
+.seed-text-input__value--variant_underline-size_large::placeholder {
+    font-size: var(--seed-font-size-t6);
+    line-height: var(--seed-line-height-t6);
+}
+.seed-text-input__prefixText--variant_underline-size_large {
+    font-size: var(--seed-font-size-t6);
+    line-height: var(--seed-line-height-t6);
+}
+.seed-text-input__prefixIcon--variant_underline-size_large {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+}
+.seed-text-input__suffixText--variant_underline-size_large {
+    font-size: var(--seed-font-size-t6);
+    line-height: var(--seed-line-height-t6);
+}
+.seed-text-input__suffixIcon--variant_underline-size_large {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+}
+.seed-text-input__root--variant_underline-size_medium {
+    gap: var(--seed-dimension-x2);
+    min-height: 34px;
+    padding-top: var(--seed-dimension-x1_5);
+    padding-bottom: var(--seed-dimension-x1_5);
+}
+.seed-text-input__value--variant_underline-size_medium {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+.seed-text-input__value--variant_underline-size_medium::placeholder {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+.seed-text-input__prefixText--variant_underline-size_medium {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+.seed-text-input__prefixIcon--variant_underline-size_medium {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+.seed-text-input__suffixText--variant_underline-size_medium {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+.seed-text-input__suffixIcon--variant_underline-size_medium {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+.seed-text-input__root--variant_underline-size_responsive {
+    gap: var(--seed-dimension-x2_5);
+    min-height: var(--seed-dimension-x10);
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__root--variant_underline-size_responsive {
+        gap: var(--seed-dimension-x2);
+        min-height: 34px;
+        padding-top: var(--seed-dimension-x1_5);
+        padding-bottom: var(--seed-dimension-x1_5);
+    }
+}
+.seed-text-input__value--variant_underline-size_responsive {
+    font-size: var(--seed-font-size-t6);
+    line-height: var(--seed-line-height-t6);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__value--variant_underline-size_responsive {
+        font-size: var(--seed-font-size-t5);
+        line-height: var(--seed-line-height-t5);
+    }
+}
+.seed-text-input__value--variant_underline-size_responsive::placeholder {
+    font-size: var(--seed-font-size-t6);
+    line-height: var(--seed-line-height-t6);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__value--variant_underline-size_responsive::placeholder {
+        font-size: var(--seed-font-size-t5);
+        line-height: var(--seed-line-height-t5);
+    }
+}
+.seed-text-input__prefixText--variant_underline-size_responsive {
+    font-size: var(--seed-font-size-t6);
+    line-height: var(--seed-line-height-t6);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__prefixText--variant_underline-size_responsive {
+        font-size: var(--seed-font-size-t5);
+        line-height: var(--seed-line-height-t5);
+    }
+}
+.seed-text-input__prefixIcon--variant_underline-size_responsive {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__prefixIcon--variant_underline-size_responsive {
+        width: var(--seed-dimension-x5);
+        height: var(--seed-dimension-x5);
+    }
+}
+.seed-text-input__suffixText--variant_underline-size_responsive {
+    font-size: var(--seed-font-size-t6);
+    line-height: var(--seed-line-height-t6);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__suffixText--variant_underline-size_responsive {
+        font-size: var(--seed-font-size-t5);
+        line-height: var(--seed-line-height-t5);
+    }
+}
+.seed-text-input__suffixIcon--variant_underline-size_responsive {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+}
+@media (min-width: 1280px) {
+    .seed-text-input__suffixIcon--variant_underline-size_responsive {
+        width: var(--seed-dimension-x5);
+        height: var(--seed-dimension-x5);
+    }
 }

package/recipes/text-input.d.ts

@@ -1,12 +1,19 @@
 declare interface TextInputVariant {
   /**
+  * - `outline`: 기본 스타일입니다.
+  * - `underline`: 화면에 하나의 Input만 있는 경우 사용을 권장합니다.
+  *
   * @default "outline"
   */
   variant: "outline" | "underline";
 /**
+  * - `large`: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+  * - `medium`: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+  * - `responsive`: 뷰포트 너비에 따라 적용되는 사이즈가 달라집니다. Breakpoint `lg` 미만에서는 `large`, `lg` 이상에서는 `medium`으로 적용됩니다.
+  *
   * @default "large"
   */
-  size: "large" | "medium";
+  size: "large" | "medium" | "responsive";
 }
 
 declare type TextInputVariantMap = {