@seed-design/lynx-css 0.1.0

package/vars/component/tablist.mjs

@@ -0,0 +1,51 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeBottomWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "indicator": {
+        "height": "2px",
+        "color": "var(--seed-color-fg-neutral)",
+        "transformDuration": "var(--seed-duration-d4)",
+        "transformTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    }
+  },
+  "layoutHug": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
+      },
+      "indicator": {
+        "insetX": "0px"
+      }
+    }
+  },
+  "layoutFill": {
+    "enabled": {
+      "root": {
+        "paddingX": "0px"
+      },
+      "indicator": {
+        "insetX": "var(--seed-dimension-spacing-x-global-gutter)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "height": "40px"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "height": "44px"
+      }
+    }
+  }
+}

package/vars/component/tag-group-item.d.ts

@@ -0,0 +1,122 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x0_5)"
+      }
+    }
+  },
+  "sizeT2": {
+    "enabled": {
+      "label": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "sizeT3": {
+    "enabled": {
+      "label": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      },
+      "icon": {
+        "size": "13px"
+      },
+      "prefixIcon": {
+        "size": "13px"
+      },
+      "suffixIcon": {
+        "size": "13px"
+      }
+    }
+  },
+  "sizeT4": {
+    "enabled": {
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      }
+    }
+  },
+  "weightRegular": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  },
+  "weightBold": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  "toneNeutralSubtle": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneBrand": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-brand)"
+      }
+    }
+  }
+}

package/vars/component/tag-group-item.mjs

@@ -0,0 +1,122 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x0_5)"
+      }
+    }
+  },
+  "sizeT2": {
+    "enabled": {
+      "label": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "sizeT3": {
+    "enabled": {
+      "label": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      },
+      "icon": {
+        "size": "13px"
+      },
+      "prefixIcon": {
+        "size": "13px"
+      },
+      "suffixIcon": {
+        "size": "13px"
+      }
+    }
+  },
+  "sizeT4": {
+    "enabled": {
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      }
+    }
+  },
+  "weightRegular": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  },
+  "weightBold": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  "toneNeutralSubtle": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneBrand": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-brand)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-brand)"
+      }
+    }
+  }
+}

package/vars/component/tag-group.d.ts

@@ -0,0 +1,34 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "separator": {
+        "color": "var(--seed-color-palette-gray-600)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  },
+  "sizeT2": {
+    "enabled": {
+      "separator": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      }
+    }
+  },
+  "sizeT3": {
+    "enabled": {
+      "separator": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      }
+    }
+  },
+  "sizeT4": {
+    "enabled": {
+      "separator": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  }
+}

package/vars/component/tag-group.mjs

@@ -0,0 +1,34 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "separator": {
+        "color": "var(--seed-color-palette-gray-600)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  },
+  "sizeT2": {
+    "enabled": {
+      "separator": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      }
+    }
+  },
+  "sizeT3": {
+    "enabled": {
+      "separator": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      }
+    }
+  },
+  "sizeT4": {
+    "enabled": {
+      "separator": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x2)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    }
+  }
+}

package/vars/component/text-button.mjs

@@ -0,0 +1,23 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x2)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,224 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        /** enabled 상태의 stroke 위에 focused/invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
+        "strokeDuration": "0.1s",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "value": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "placeholder": {
+        "color": "var(--seed-color-fg-placeholder)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "prefixText": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "suffixText": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    },
+    "focused": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-critical-solid)"
+      }
+    },
+    "invalidFocused": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-critical-solid)"
+      }
+    },
+    "disabled": {
+      "value": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "placeholder": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  /**
+   * 기본 스타일입니다.
+   */
+  "variantOutline": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "strokeWidth": "1px"
+      }
+    },
+    "focused": {
+      "root": {
+        "strokeWidth": "2px"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeWidth": "2px"
+      }
+    },
+    "readonly": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      }
+    }
+  },
+  /**
+   * - `variant=outline`: 기본 스타일입니다.
+   */
+  "variantOutlineSizeLarge": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x2_5)",
+        "minHeight": "var(--seed-dimension-x13)"
+      },
+      "value": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "placeholder": {
+        "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)"
+      }
+    }
+  },
+  /**
+   * - `variant=outline`: 기본 스타일입니다.
+   */
+  "variantOutlineSizeMedium": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1_5)",
+        "minHeight": "var(--seed-dimension-x10)"
+      },
+      "value": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "placeholder": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixText": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "suffixText": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  /**
+   * 화면에 하나의 Input만 있는 경우 사용을 권장합니다.
+   */
+  "variantUnderline": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x2_5)",
+        "minHeight": "var(--seed-dimension-x10)",
+        "strokeBottomWidth": "1px"
+      },
+      "value": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "placeholder": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "prefixText": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "suffixText": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x6)"
+      }
+    },
+    "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)"
+      }
+    }
+  },
+  "typeSingleline": {},
+  "typeMultilineSizeLarge": {
+    "enabled": {
+      "root": {
+        "minHeight": "95px",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      }
+    }
+  },
+  "typeMultilineSizeMedium": {
+    "enabled": {
+      "root": {
+        "minHeight": "90px",
+        "paddingY": "11px"
+      }
+    }
+  }
+}