@seed-design/css 1.2.16 → 2.1.0

package/recipes/input-button.css

@@ -5,10 +5,6 @@
     box-sizing: border-box;
     position: relative;
     isolation: isolate;
-    height: var(--seed-dimension-x13);
-    gap: var(--seed-dimension-x2_5);
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
 }
 .seed-input-button__button {
     position: absolute;
@@ -20,7 +16,6 @@
     cursor: pointer;
     border: none;
     padding: 0;
-    border-radius: var(--seed-radius-r3);
     background-color: var(--seed-color-bg-transparent);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
@@ -70,8 +65,6 @@
     border-color: var(--seed-color-stroke-critical-solid);
 }
 .seed-input-button__value {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
     color: var(--seed-color-fg-neutral);
     overflow: hidden;
@@ -87,8 +80,6 @@
     color: var(--seed-color-fg-neutral);
 }
 .seed-input-button__placeholder {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
     color: var(--seed-color-fg-placeholder);
     overflow: hidden;
@@ -104,33 +95,37 @@
     color: var(--seed-color-fg-placeholder);
 }
 .seed-input-button__prefixText {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
-    color: var(--seed-color-fg-neutral-muted);
+    color: var(--seed-color-fg-neutral-subtle);
     pointer-events: none;
 }
+.seed-input-button__prefixText[data-disabled] {
+    color: var(--seed-color-fg-disabled);
+}
 .seed-input-button__prefixIcon {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
     flex-shrink: 0;
     color: var(--seed-color-fg-neutral-muted);
     pointer-events: none;
 }
+.seed-input-button__prefixIcon[data-disabled] {
+    color: var(--seed-color-fg-disabled);
+}
 .seed-input-button__suffixText {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
-    color: var(--seed-color-fg-neutral-muted);
+    color: var(--seed-color-fg-neutral-subtle);
     pointer-events: none;
 }
+.seed-input-button__suffixText[data-disabled] {
+    color: var(--seed-color-fg-disabled);
+}
 .seed-input-button__suffixIcon {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
     flex-shrink: 0;
     color: var(--seed-color-fg-neutral-muted);
     pointer-events: none;
 }
+.seed-input-button__suffixIcon[data-disabled] {
+    color: var(--seed-color-fg-disabled);
+}
 .seed-input-button__clearButton {
     cursor: pointer;
     border: none;
@@ -146,6 +141,167 @@
     outline-offset: var(--seed-dimension-x0_5);
 }
 .seed-input-button__clearButton {
-    --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-input-button__root--size_large {
+    height: var(--seed-dimension-x13);
+    gap: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+}
+.seed-input-button__button--size_large {
+    border-radius: var(--seed-radius-r3);
+}
+.seed-input-button__value--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+.seed-input-button__placeholder--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+.seed-input-button__prefixText--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+.seed-input-button__prefixIcon--size_large {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+.seed-input-button__suffixText--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+.seed-input-button__suffixIcon--size_large {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+.seed-input-button__clearButton--size_large {
+    --seed-icon-size: 22px;
+}
+.seed-input-button__root--size_medium {
+    height: var(--seed-dimension-x10);
+    gap: var(--seed-dimension-x2);
+    padding-left: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x3_5);
+}
+.seed-input-button__button--size_medium {
+    border-radius: var(--seed-radius-r2);
+}
+.seed-input-button__value--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+}
+.seed-input-button__placeholder--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+}
+.seed-input-button__prefixText--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+}
+.seed-input-button__prefixIcon--size_medium {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4);
+}
+.seed-input-button__suffixText--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+}
+.seed-input-button__suffixIcon--size_medium {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4);
+}
+.seed-input-button__clearButton--size_medium {
+    --seed-icon-size: var(--seed-dimension-x4_5);
+}
+.seed-input-button__root--size_responsive {
+    height: var(--seed-dimension-x13);
+    gap: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+}
+@media (min-width: 1280px) {
+    .seed-input-button__root--size_responsive {
+        height: var(--seed-dimension-x10);
+        gap: var(--seed-dimension-x2);
+        padding-left: var(--seed-dimension-x3_5);
+        padding-right: var(--seed-dimension-x3_5);
+    }
+}
+.seed-input-button__button--size_responsive {
+    border-radius: var(--seed-radius-r3);
+}
+@media (min-width: 1280px) {
+    .seed-input-button__button--size_responsive {
+        border-radius: var(--seed-radius-r2);
+    }
+}
+.seed-input-button__value--size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+@media (min-width: 1280px) {
+    .seed-input-button__value--size_responsive {
+        font-size: var(--seed-font-size-t4);
+        line-height: var(--seed-line-height-t4);
+    }
+}
+.seed-input-button__placeholder--size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+@media (min-width: 1280px) {
+    .seed-input-button__placeholder--size_responsive {
+        font-size: var(--seed-font-size-t4);
+        line-height: var(--seed-line-height-t4);
+    }
+}
+.seed-input-button__prefixText--size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+@media (min-width: 1280px) {
+    .seed-input-button__prefixText--size_responsive {
+        font-size: var(--seed-font-size-t4);
+        line-height: var(--seed-line-height-t4);
+    }
+}
+.seed-input-button__prefixIcon--size_responsive {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+@media (min-width: 1280px) {
+    .seed-input-button__prefixIcon--size_responsive {
+        width: var(--seed-dimension-x4);
+        height: var(--seed-dimension-x4);
+    }
+}
+.seed-input-button__suffixText--size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+}
+@media (min-width: 1280px) {
+    .seed-input-button__suffixText--size_responsive {
+        font-size: var(--seed-font-size-t4);
+        line-height: var(--seed-line-height-t4);
+    }
+}
+.seed-input-button__suffixIcon--size_responsive {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+@media (min-width: 1280px) {
+    .seed-input-button__suffixIcon--size_responsive {
+        width: var(--seed-dimension-x4);
+        height: var(--seed-dimension-x4);
+    }
+}
+.seed-input-button__clearButton--size_responsive {
+    --seed-icon-size: 22px;
+}
+@media (min-width: 1280px) {
+    .seed-input-button__clearButton--size_responsive {
+        --seed-icon-size: var(--seed-dimension-x4_5);
+    }
 }

package/recipes/input-button.d.ts

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

package/recipes/input-button.layered.css

@@ -2,12 +2,8 @@
   .seed-input-button__root {
     box-sizing: border-box;
     isolation: isolate;
-    width: 100%;
-    height: var(--seed-dimension-x13);
     align-items: center;
-    gap: var(--seed-dimension-x2_5);
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    width: 100%;
     display: flex;
     position: relative;
   }
@@ -15,7 +11,6 @@
   .seed-input-button__button {
     z-index: -1;
     cursor: pointer;
-    border-radius: var(--seed-radius-r3);
     background-color: var(--seed-color-bg-transparent);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
@@ -73,8 +68,6 @@
   }
 
   .seed-input-button__value {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
     color: var(--seed-color-fg-neutral);
     text-overflow: ellipsis;
@@ -93,8 +86,6 @@
   }
 
   .seed-input-button__placeholder {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
     color: var(--seed-color-fg-placeholder);
     text-overflow: ellipsis;
@@ -113,37 +104,45 @@
   }
 
   .seed-input-button__prefixText {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
-    color: var(--seed-color-fg-neutral-muted);
+    color: var(--seed-color-fg-neutral-subtle);
     pointer-events: none;
   }
 
+  .seed-input-button__prefixText[data-disabled] {
+    color: var(--seed-color-fg-disabled);
+  }
+
   .seed-input-button__prefixIcon {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
     color: var(--seed-color-fg-neutral-muted);
     pointer-events: none;
     flex-shrink: 0;
   }
 
+  .seed-input-button__prefixIcon[data-disabled] {
+    color: var(--seed-color-fg-disabled);
+  }
+
   .seed-input-button__suffixText {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);
-    color: var(--seed-color-fg-neutral-muted);
+    color: var(--seed-color-fg-neutral-subtle);
     pointer-events: none;
   }
 
+  .seed-input-button__suffixText[data-disabled] {
+    color: var(--seed-color-fg-disabled);
+  }
+
   .seed-input-button__suffixIcon {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
     color: var(--seed-color-fg-neutral-muted);
     pointer-events: none;
     flex-shrink: 0;
   }
 
+  .seed-input-button__suffixIcon[data-disabled] {
+    color: var(--seed-color-fg-disabled);
+  }
+
   .seed-input-button__clearButton {
     cursor: pointer;
     border-radius: var(--seed-radius-full);
@@ -161,7 +160,184 @@
   }
 
   .seed-input-button__clearButton {
-    --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral-subtle);
   }
+
+  .seed-input-button__root--size_large {
+    height: var(--seed-dimension-x13);
+    gap: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+  }
+
+  .seed-input-button__button--size_large {
+    border-radius: var(--seed-radius-r3);
+  }
+
+  .seed-input-button__value--size_large, .seed-input-button__placeholder--size_large, .seed-input-button__prefixText--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+  }
+
+  .seed-input-button__prefixIcon--size_large {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+  }
+
+  .seed-input-button__suffixText--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+  }
+
+  .seed-input-button__suffixIcon--size_large {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+  }
+
+  .seed-input-button__clearButton--size_large {
+    --seed-icon-size: 22px;
+  }
+
+  .seed-input-button__root--size_medium {
+    height: var(--seed-dimension-x10);
+    gap: var(--seed-dimension-x2);
+    padding-left: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x3_5);
+  }
+
+  .seed-input-button__button--size_medium {
+    border-radius: var(--seed-radius-r2);
+  }
+
+  .seed-input-button__value--size_medium, .seed-input-button__placeholder--size_medium, .seed-input-button__prefixText--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+  }
+
+  .seed-input-button__prefixIcon--size_medium {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4);
+  }
+
+  .seed-input-button__suffixText--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+  }
+
+  .seed-input-button__suffixIcon--size_medium {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4);
+  }
+
+  .seed-input-button__clearButton--size_medium {
+    --seed-icon-size: var(--seed-dimension-x4_5);
+  }
+
+  .seed-input-button__root--size_responsive {
+    height: var(--seed-dimension-x13);
+    gap: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+  }
+
+  @media (width >= 1280px) {
+    .seed-input-button__root--size_responsive {
+      height: var(--seed-dimension-x10);
+      gap: var(--seed-dimension-x2);
+      padding-left: var(--seed-dimension-x3_5);
+      padding-right: var(--seed-dimension-x3_5);
+    }
+  }
+
+  .seed-input-button__button--size_responsive {
+    border-radius: var(--seed-radius-r3);
+  }
+
+  @media (width >= 1280px) {
+    .seed-input-button__button--size_responsive {
+      border-radius: var(--seed-radius-r2);
+    }
+  }
+
+  .seed-input-button__value--size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+  }
+
+  @media (width >= 1280px) {
+    .seed-input-button__value--size_responsive {
+      font-size: var(--seed-font-size-t4);
+      line-height: var(--seed-line-height-t4);
+    }
+  }
+
+  .seed-input-button__placeholder--size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+  }
+
+  @media (width >= 1280px) {
+    .seed-input-button__placeholder--size_responsive {
+      font-size: var(--seed-font-size-t4);
+      line-height: var(--seed-line-height-t4);
+    }
+  }
+
+  .seed-input-button__prefixText--size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+  }
+
+  @media (width >= 1280px) {
+    .seed-input-button__prefixText--size_responsive {
+      font-size: var(--seed-font-size-t4);
+      line-height: var(--seed-line-height-t4);
+    }
+  }
+
+  .seed-input-button__prefixIcon--size_responsive {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+  }
+
+  @media (width >= 1280px) {
+    .seed-input-button__prefixIcon--size_responsive {
+      width: var(--seed-dimension-x4);
+      height: var(--seed-dimension-x4);
+    }
+  }
+
+  .seed-input-button__suffixText--size_responsive {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+  }
+
+  @media (width >= 1280px) {
+    .seed-input-button__suffixText--size_responsive {
+      font-size: var(--seed-font-size-t4);
+      line-height: var(--seed-line-height-t4);
+    }
+  }
+
+  .seed-input-button__suffixIcon--size_responsive {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+  }
+
+  @media (width >= 1280px) {
+    .seed-input-button__suffixIcon--size_responsive {
+      width: var(--seed-dimension-x4);
+      height: var(--seed-dimension-x4);
+    }
+  }
+
+  .seed-input-button__clearButton--size_responsive {
+    --seed-icon-size: 22px;
+  }
+
+  @media (width >= 1280px) {
+    .seed-input-button__clearButton--size_responsive {
+      --seed-icon-size: var(--seed-dimension-x4_5);
+    }
+  }
 }

package/recipes/input-button.layered.mjs

@@ -40,11 +40,19 @@ const inputButtonSlotNames = [
   ]
 ];
 
-const defaultVariant = {};
+const defaultVariant = {
+  "size": "large"
+};
 
 const compoundVariants = [];
 
-export const inputButtonVariantMap = {};
+export const inputButtonVariantMap = {
+  "size": [
+    "large",
+    "medium",
+    "responsive"
+  ]
+};
 
 export const inputButtonVariantKeys = Object.keys(inputButtonVariantMap);
 

package/recipes/input-button.mjs

@@ -40,11 +40,19 @@ const inputButtonSlotNames = [
   ]
 ];
 
-const defaultVariant = {};
+const defaultVariant = {
+  "size": "large"
+};
 
 const compoundVariants = [];
 
-export const inputButtonVariantMap = {};
+export const inputButtonVariantMap = {
+  "size": [
+    "large",
+    "medium",
+    "responsive"
+  ]
+};
 
 export const inputButtonVariantKeys = Object.keys(inputButtonVariantMap);
 

package/recipes/layout.css

@@ -0,0 +1,25 @@
+.seed-layout__root {
+    display: flex;
+    height: 100vh;
+    overflow-y: auto
+}
+.seed-layout__content {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto
+}
+@media (min-width: 768px) {
+    .seed-layout__content--density_low {
+        max-width: 720px
+    }
+}
+@media (min-width: 768px) {
+    .seed-layout__content--density_medium {
+        max-width: 720px
+    }
+}
+@media (min-width: 1280px) {
+    .seed-layout__content--density_medium {
+        max-width: 1040px
+    }
+}

package/recipes/layout.d.ts

@@ -0,0 +1,24 @@
+declare interface LayoutVariant {
+  /**
+  * @default "medium"
+  */
+  density: "low" | "medium" | "high";
+}
+
+declare type LayoutVariantMap = {
+  [key in keyof LayoutVariant]: Array<LayoutVariant[key]>;
+};
+
+export declare type LayoutVariantProps = Partial<LayoutVariant>;
+
+export declare type LayoutSlotName = "root" | "content";
+
+export declare const layoutVariantMap: LayoutVariantMap;
+
+export declare const layout: ((
+  props?: LayoutVariantProps,
+) => Record<LayoutSlotName, string>) & {
+  splitVariantProps: <T extends LayoutVariantProps>(
+    props: T,
+  ) => [LayoutVariantProps, Omit<T, keyof LayoutVariantProps>];
+}

package/recipes/layout.layered.css

@@ -0,0 +1,25 @@
+@layer seed-components {
+  .seed-layout__root {
+    height: 100vh;
+    display: flex;
+    overflow-y: auto;
+  }
+
+  .seed-layout__content {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (width >= 768px) {
+    .seed-layout__content--density_low, .seed-layout__content--density_medium {
+      max-width: 720px;
+    }
+  }
+
+  @media (width >= 1280px) {
+    .seed-layout__content--density_medium {
+      max-width: 1040px;
+    }
+  }
+}

package/recipes/layout.layered.mjs

@@ -0,0 +1,44 @@
+import './layout.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const layoutSlotNames = [
+  [
+    "root",
+    "seed-layout__root"
+  ],
+  [
+    "content",
+    "seed-layout__content"
+  ]
+];
+
+const defaultVariant = {
+  "density": "medium"
+};
+
+const compoundVariants = [];
+
+export const layoutVariantMap = {
+  "density": [
+    "low",
+    "medium",
+    "high"
+  ]
+};
+
+export const layoutVariantKeys = Object.keys(layoutVariantMap);
+
+export function layout(props) {
+  return Object.fromEntries(
+    layoutSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(layout, { splitVariantProps: (props) => splitVariantProps(props, layoutVariantMap) });
+
+// @recipe(seed): layout