@seed-design/lynx-css 0.2.1 → 0.4.0

package/vars/component/side-panel-close-button.d.ts

@@ -0,0 +1,23 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "targetSize": "52px",
+        "size": "22px"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "22px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

package/vars/component/side-panel-close-button.mjs

@@ -0,0 +1,23 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "targetSize": "52px",
+        "size": "22px"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "22px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

package/vars/component/side-panel.d.ts

@@ -0,0 +1,94 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)",
+        "enterDuration": "var(--seed-duration-d6)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "enterOpacity": "0",
+        "exitDuration": "var(--seed-duration-d6)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)",
+        "exitOpacity": "0"
+      },
+      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      "content": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        /** viewport 또는 parent width에 대한 mobile content width 비율입니다. */
+        "widthFraction": "0.8",
+        "enterDuration": "var(--seed-duration-d6)",
+        "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
+        "exitDuration": "var(--seed-duration-d6)",
+        "exitTimingFunction": "var(--seed-timing-function-exit-expressive)"
+      },
+      "header": {
+        "gap": "var(--seed-dimension-x1_5)",
+        "minHeight": "70px",
+        "paddingX": "var(--seed-dimension-x6)",
+        /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
+        "paddingTop": "var(--seed-dimension-x6)",
+        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
+        "paddingBottom": "var(--seed-dimension-x4)"
+      },
+      "body": {
+        "paddingX": "var(--seed-dimension-x6)",
+        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
+        "paddingBottom": "var(--seed-dimension-x12)",
+        "transitionDuration": "var(--seed-duration-color-transition)",
+        "transitionTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "footer": {
+        "paddingX": "var(--seed-dimension-x6)",
+        /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
+        "paddingTop": "var(--seed-dimension-x4)",
+        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
+        "paddingBottom": "var(--seed-dimension-x6)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t8)",
+        "lineHeight": "var(--seed-line-height-t8)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "closeButton": {
+        "fromTop": "28px",
+        "fromRight": "24px"
+      }
+    },
+    "scrolled": {
+      "body": {
+        /** 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다. */
+        "stroke": "var(--seed-color-stroke-neutral-muted)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      "content": {
+        "width": "480px"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      "content": {
+        "width": "720px"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      "content": {
+        "width": "960px"
+      }
+    }
+  }
+}

package/vars/component/side-panel.mjs

@@ -0,0 +1,83 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)",
+        "enterDuration": "var(--seed-duration-d6)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "enterOpacity": "0",
+        "exitDuration": "var(--seed-duration-d6)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)",
+        "exitOpacity": "0"
+      },
+      "content": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "widthFraction": "0.8",
+        "enterDuration": "var(--seed-duration-d6)",
+        "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
+        "exitDuration": "var(--seed-duration-d6)",
+        "exitTimingFunction": "var(--seed-timing-function-exit-expressive)"
+      },
+      "header": {
+        "gap": "var(--seed-dimension-x1_5)",
+        "minHeight": "70px",
+        "paddingX": "var(--seed-dimension-x6)",
+        "paddingTop": "var(--seed-dimension-x6)",
+        "paddingBottom": "var(--seed-dimension-x4)"
+      },
+      "body": {
+        "paddingX": "var(--seed-dimension-x6)",
+        "paddingBottom": "var(--seed-dimension-x12)",
+        "transitionDuration": "var(--seed-duration-color-transition)",
+        "transitionTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "footer": {
+        "paddingX": "var(--seed-dimension-x6)",
+        "paddingTop": "var(--seed-dimension-x4)",
+        "paddingBottom": "var(--seed-dimension-x6)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t8)",
+        "lineHeight": "var(--seed-line-height-t8)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "closeButton": {
+        "fromTop": "28px",
+        "fromRight": "24px"
+      }
+    },
+    "scrolled": {
+      "body": {
+        "stroke": "var(--seed-color-stroke-neutral-muted)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "content": {
+        "width": "480px"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "content": {
+        "width": "720px"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "content": {
+        "width": "960px"
+      }
+    }
+  }
+}

package/vars/component/text-input.d.ts

@@ -16,14 +16,14 @@ export declare const vars: {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "prefixText": {
-        "color": "var(--seed-color-fg-neutral-muted)",
+        "color": "var(--seed-color-fg-neutral-subtle)",
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral-muted)"
       },
       "suffixText": {
-        "color": "var(--seed-color-fg-neutral-muted)",
+        "color": "var(--seed-color-fg-neutral-subtle)",
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "suffixIcon": {
@@ -51,6 +51,18 @@ export declare const vars: {
       },
       "placeholder": {
         "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixText": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixText": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
       }
     }
   },
@@ -60,8 +72,6 @@ export declare const vars: {
   "variantOutline": {
     "enabled": {
       "root": {
-        "cornerRadius": "var(--seed-radius-r3)",
-        "paddingX": "var(--seed-dimension-x4)",
         "strokeWidth": "1px"
       }
     },
@@ -88,12 +98,15 @@ export declare const vars: {
   },
   /**
    * - `variant=outline`: 기본 스타일입니다.
+   * - `size=large`: 뷰포트 너비와 관계없이 사용할 수 있습니다.
    */
   "variantOutlineSizeLarge": {
     "enabled": {
       "root": {
         "gap": "var(--seed-dimension-x2_5)",
-        "minHeight": "var(--seed-dimension-x13)"
+        "minHeight": "var(--seed-dimension-x13)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x4)"
       },
       "value": {
         "fontSize": "var(--seed-font-size-t5)",
@@ -121,12 +134,15 @@ export declare const vars: {
   },
   /**
    * - `variant=outline`: 기본 스타일입니다.
+   * - `size=medium`: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
    */
   "variantOutlineSizeMedium": {
     "enabled": {
       "root": {
-        "gap": "var(--seed-dimension-x1_5)",
-        "minHeight": "var(--seed-dimension-x10)"
+        "gap": "var(--seed-dimension-x2)",
+        "minHeight": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "paddingX": "var(--seed-dimension-x3_5)"
       },
       "value": {
         "fontSize": "var(--seed-font-size-t4)",
@@ -156,11 +172,40 @@ export declare const vars: {
    * 화면에 하나의 Input만 있는 경우 사용을 권장합니다.
    */
   "variantUnderline": {
+    "enabled": {
+      "root": {
+        "strokeBottomWidth": "1px"
+      }
+    },
+    "focused": {
+      "root": {
+        "strokeBottomWidth": "2px"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeBottomWidth": "2px"
+      }
+    },
+    "readonly": {
+      "value": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "placeholder": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    }
+  },
+  /**
+   * - `variant=underline`: 화면에 하나의 Input만 있는 경우 사용을 권장합니다.
+   * - `size=large`: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+   */
+  "variantUnderlineSizeLarge": {
     "enabled": {
       "root": {
         "gap": "var(--seed-dimension-x2_5)",
         "minHeight": "var(--seed-dimension-x10)",
-        "strokeBottomWidth": "1px"
+        "paddingY": "var(--seed-dimension-x2)"
       },
       "value": {
         "fontSize": "var(--seed-font-size-t6)",
@@ -184,40 +229,63 @@ export declare const vars: {
       "suffixIcon": {
         "size": "var(--seed-dimension-x6)"
       }
-    },
-    "focused": {
-      "root": {
-        "strokeBottomWidth": "2px"
-      }
-    },
-    "invalid": {
+    }
+  },
+  /**
+   * - `variant=underline`: 화면에 하나의 Input만 있는 경우 사용을 권장합니다.
+   * - `size=medium`: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+   */
+  "variantUnderlineSizeMedium": {
+    "enabled": {
       "root": {
-        "strokeBottomWidth": "2px"
-      }
-    },
-    "readonly": {
+        "gap": "var(--seed-dimension-x2)",
+        "minHeight": "34px",
+        "paddingY": "var(--seed-dimension-x1_5)"
+      },
       "value": {
-        "color": "var(--seed-color-fg-neutral-muted)"
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
       },
       "placeholder": {
-        "color": "var(--seed-color-fg-neutral-muted)"
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "prefixText": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "suffixText": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x5)"
       }
     }
   },
   "typeSingleline": {},
+  /**
+   * - `size=large`: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+   */
   "typeMultilineSizeLarge": {
     "enabled": {
       "root": {
-        "minHeight": "95px",
+        "minHeight": "94px",
         "paddingY": "var(--seed-dimension-x3_5)"
       }
     }
   },
+  /**
+   * - `size=medium`: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+   */
   "typeMultilineSizeMedium": {
     "enabled": {
       "root": {
-        "minHeight": "90px",
-        "paddingY": "11px"
+        "minHeight": "82px",
+        "paddingY": "var(--seed-dimension-x3)"
       }
     }
   }

package/vars/component/text-input.mjs

@@ -15,14 +15,14 @@ export const vars = {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "prefixText": {
-        "color": "var(--seed-color-fg-neutral-muted)",
+        "color": "var(--seed-color-fg-neutral-subtle)",
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral-muted)"
       },
       "suffixText": {
-        "color": "var(--seed-color-fg-neutral-muted)",
+        "color": "var(--seed-color-fg-neutral-subtle)",
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "suffixIcon": {
@@ -50,14 +50,24 @@ export const vars = {
       },
       "placeholder": {
         "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixText": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixText": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
       }
     }
   },
   "variantOutline": {
     "enabled": {
       "root": {
-        "cornerRadius": "var(--seed-radius-r3)",
-        "paddingX": "var(--seed-dimension-x4)",
         "strokeWidth": "1px"
       }
     },
@@ -86,7 +96,9 @@ export const vars = {
     "enabled": {
       "root": {
         "gap": "var(--seed-dimension-x2_5)",
-        "minHeight": "var(--seed-dimension-x13)"
+        "minHeight": "var(--seed-dimension-x13)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x4)"
       },
       "value": {
         "fontSize": "var(--seed-font-size-t5)",
@@ -115,8 +127,10 @@ export const vars = {
   "variantOutlineSizeMedium": {
     "enabled": {
       "root": {
-        "gap": "var(--seed-dimension-x1_5)",
-        "minHeight": "var(--seed-dimension-x10)"
+        "gap": "var(--seed-dimension-x2)",
+        "minHeight": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "paddingX": "var(--seed-dimension-x3_5)"
       },
       "value": {
         "fontSize": "var(--seed-font-size-t4)",
@@ -143,11 +157,36 @@ export const vars = {
     }
   },
   "variantUnderline": {
+    "enabled": {
+      "root": {
+        "strokeBottomWidth": "1px"
+      }
+    },
+    "focused": {
+      "root": {
+        "strokeBottomWidth": "2px"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeBottomWidth": "2px"
+      }
+    },
+    "readonly": {
+      "value": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "placeholder": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    }
+  },
+  "variantUnderlineSizeLarge": {
     "enabled": {
       "root": {
         "gap": "var(--seed-dimension-x2_5)",
         "minHeight": "var(--seed-dimension-x10)",
-        "strokeBottomWidth": "1px"
+        "paddingY": "var(--seed-dimension-x2)"
       },
       "value": {
         "fontSize": "var(--seed-font-size-t6)",
@@ -171,23 +210,36 @@ export const vars = {
       "suffixIcon": {
         "size": "var(--seed-dimension-x6)"
       }
-    },
-    "focused": {
-      "root": {
-        "strokeBottomWidth": "2px"
-      }
-    },
-    "invalid": {
+    }
+  },
+  "variantUnderlineSizeMedium": {
+    "enabled": {
       "root": {
-        "strokeBottomWidth": "2px"
-      }
-    },
-    "readonly": {
+        "gap": "var(--seed-dimension-x2)",
+        "minHeight": "34px",
+        "paddingY": "var(--seed-dimension-x1_5)"
+      },
       "value": {
-        "color": "var(--seed-color-fg-neutral-muted)"
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
       },
       "placeholder": {
-        "color": "var(--seed-color-fg-neutral-muted)"
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "prefixText": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "suffixText": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x5)"
       }
     }
   },
@@ -195,7 +247,7 @@ export const vars = {
   "typeMultilineSizeLarge": {
     "enabled": {
       "root": {
-        "minHeight": "95px",
+        "minHeight": "94px",
         "paddingY": "var(--seed-dimension-x3_5)"
       }
     }
@@ -203,8 +255,8 @@ export const vars = {
   "typeMultilineSizeMedium": {
     "enabled": {
       "root": {
-        "minHeight": "90px",
-        "paddingY": "11px"
+        "minHeight": "82px",
+        "paddingY": "var(--seed-dimension-x3)"
       }
     }
   }