@seed-design/lynx-css 0.1.0

package/vars/component/manner-temp.mjs

@@ -0,0 +1,88 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "emote": {
+        "size": "var(--seed-dimension-x8)",
+        "bleed": "var(--seed-dimension-x1)"
+      }
+    }
+  },
+  "levelL1": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l1-text)"
+      }
+    }
+  },
+  "levelL2": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l2-text)"
+      }
+    }
+  },
+  "levelL3": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l3-text)"
+      }
+    }
+  },
+  "levelL4": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l4-text)"
+      }
+    }
+  },
+  "levelL5": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l5-text)"
+      }
+    }
+  },
+  "levelL6": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l6-text)"
+      }
+    }
+  },
+  "levelL7": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l7-text)"
+      }
+    }
+  },
+  "levelL8": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l8-text)"
+      }
+    }
+  },
+  "levelL9": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l9-text)"
+      }
+    }
+  },
+  "levelL10": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-manner-temp-l10-text)"
+      }
+    }
+  }
+}

package/vars/component/menu-sheet-close-button.d.ts

@@ -0,0 +1,24 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)",
+        "minHeight": "52px",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x5)",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  }
+}

package/vars/component/menu-sheet-close-button.mjs

@@ -0,0 +1,24 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)",
+        "minHeight": "52px",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x5)",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  }
+}

package/vars/component/menu-sheet-item.d.ts

@@ -0,0 +1,73 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)",
+        "minHeight": "52px",
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x3_5)",
+        "gap": "var(--seed-dimension-x3_5)"
+      },
+      "prefixIcon": {
+        "size": "22px"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x0_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  },
+  /**
+   * 일반적인 작업을 수행하는 기본 아이템입니다.
+   */
+  "toneNeutral": {
+    "enabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  /**
+   * 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다.
+   */
+  "toneCritical": {
+    "enabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-critical)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-critical)"
+      }
+    }
+  },
+  /**
+   * 라벨을 왼쪽 정렬합니다.
+   */
+  "labelAlignLeft": {
+    "enabled": {}
+  },
+  /**
+   * 라벨을 중앙 정렬합니다.
+   */
+  "labelAlignCenter": {
+    "enabled": {}
+  }
+}

package/vars/component/menu-sheet-item.mjs

@@ -0,0 +1,61 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)",
+        "minHeight": "52px",
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x3_5)",
+        "gap": "var(--seed-dimension-x3_5)"
+      },
+      "prefixIcon": {
+        "size": "22px"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x0_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneCritical": {
+    "enabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-critical)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-critical)"
+      }
+    }
+  },
+  "labelAlignLeft": {
+    "enabled": {}
+  },
+  "labelAlignCenter": {
+    "enabled": {}
+  }
+}

package/vars/component/menu-sheet.d.ts

@@ -0,0 +1,56 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)",
+        "enterDuration": "var(--seed-duration-d2)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "enterOpacity": "0",
+        "exitDuration": "var(--seed-duration-d2)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)",
+        "exitOpacity": "0"
+      },
+      "content": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "maxWidth": "480px",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x4)",
+        "topCornerRadius": "var(--seed-radius-r5)",
+        "enterDuration": "var(--seed-duration-d6)",
+        "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
+        "exitDuration": "var(--seed-duration-d4)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)"
+      },
+      "header": {
+        "gap": "var(--seed-dimension-x1)",
+        "paddingTop": "var(--seed-dimension-x2)",
+        "paddingBottom": "var(--seed-dimension-x4)"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)",
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "list": {
+        "gap": "var(--seed-dimension-x2_5)"
+      },
+      "group": {
+        "cornerRadius": "var(--seed-radius-r4)"
+      },
+      "divider": {
+        "strokeBottomWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "footer": {
+        "paddingTop": "var(--seed-dimension-x2_5)"
+      }
+    }
+  }
+}

package/vars/component/menu-sheet.mjs

@@ -0,0 +1,56 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)",
+        "enterDuration": "var(--seed-duration-d2)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "enterOpacity": "0",
+        "exitDuration": "var(--seed-duration-d2)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)",
+        "exitOpacity": "0"
+      },
+      "content": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "maxWidth": "480px",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x4)",
+        "topCornerRadius": "var(--seed-radius-r5)",
+        "enterDuration": "var(--seed-duration-d6)",
+        "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
+        "exitDuration": "var(--seed-duration-d4)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)"
+      },
+      "header": {
+        "gap": "var(--seed-dimension-x1)",
+        "paddingTop": "var(--seed-dimension-x2)",
+        "paddingBottom": "var(--seed-dimension-x4)"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)",
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "list": {
+        "gap": "var(--seed-dimension-x2_5)"
+      },
+      "group": {
+        "cornerRadius": "var(--seed-radius-r4)"
+      },
+      "divider": {
+        "strokeBottomWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "footer": {
+        "paddingTop": "var(--seed-dimension-x2_5)"
+      }
+    }
+  }
+}

package/vars/component/notification-badge.d.ts

@@ -0,0 +1,48 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다. 세부 정보가 중요하고 충분한 공간이 있을 때 사용합니다. 내부 라벨을 반드시 포함해야 합니다.
+   */
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "minWidth": "18px",
+        "minHeight": "18px",
+        "paddingX": "var(--seed-dimension-x1)",
+        "paddingY": "0px",
+        "cornerRadius": "var(--seed-radius-full)",
+        "iconAttachedInsetEnd": "8px",
+        "iconAttachedInsetTop": "14px",
+        "textAttachedGap": "2px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t1-static)",
+        "lineHeight": "var(--seed-line-height-t1-static)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  /**
+   * 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다. 알림의 존재 여부만 중요하거나 공간이 제한된 경우에 적합합니다. 내부 라벨은 지원하지 않습니다.
+   */
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "size": "6px",
+        "cornerRadius": "var(--seed-radius-full)",
+        "iconAttachedInsetEnd": "7px",
+        "iconAttachedInsetTop": "7px",
+        "textAttachedGap": "2px"
+      }
+    }
+  }
+}

package/vars/component/notification-badge.mjs

@@ -0,0 +1,42 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "minWidth": "18px",
+        "minHeight": "18px",
+        "paddingX": "var(--seed-dimension-x1)",
+        "paddingY": "0px",
+        "cornerRadius": "var(--seed-radius-full)",
+        "iconAttachedInsetEnd": "8px",
+        "iconAttachedInsetTop": "14px",
+        "textAttachedGap": "2px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t1-static)",
+        "lineHeight": "var(--seed-line-height-t1-static)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "size": "6px",
+        "cornerRadius": "var(--seed-radius-full)",
+        "iconAttachedInsetEnd": "7px",
+        "iconAttachedInsetTop": "7px",
+        "textAttachedGap": "2px"
+      }
+    }
+  }
+}