@seed-design/lynx-css 0.0.0-alpha-20260622094810

package/vars/component/action-chip.mjs

@@ -0,0 +1,132 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)",
+        "cornerRadius": "var(--seed-radius-full)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "count": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "count": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x8)",
+        "paddingY": "var(--seed-dimension-x1_5)",
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "count": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)",
+        "paddingY": "var(--seed-dimension-x2)",
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "count": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "sizeSmallLayoutWithText": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "sizeSmallLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x8)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "sizeMediumLayoutWithText": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x3_5)"
+      }
+    }
+  },
+  "sizeMediumLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x9)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "minHeight": "50px",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "minHeight": "50px",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "minHeight": "50px",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneCritical": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-critical)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "minHeight": "50px",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneCritical": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-critical)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+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",
+        "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": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x3_5)",
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "divider": {
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "marginX": "var(--seed-dimension-spacing-x-global-gutter)"
+      }
+    }
+  }
+}

package/vars/component/action-sheet.mjs

@@ -0,0 +1,46 @@
+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",
+        "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": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x3_5)",
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "divider": {
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "marginX": "var(--seed-dimension-spacing-x-global-gutter)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-dropzone.d.ts

@@ -0,0 +1,32 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      /** 파일을 root 위로 dragging over 하는 동안 border style이 dashed에서 solid로 변경됩니다. */
+      "root": {
+        "height": "120px",
+        "gap": "var(--seed-dimension-x2)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-palette-gray-500)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-font-size-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "draggingOver": {
+      /** 파일을 root 위로 dragging over 하는 동안 border style이 dashed에서 solid로 변경됩니다. */
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-solid)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-dropzone.mjs

@@ -0,0 +1,30 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "120px",
+        "gap": "var(--seed-dimension-x2)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-palette-gray-500)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-font-size-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "draggingOver": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-solid)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item-action-button.d.ts

@@ -0,0 +1,37 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "typeFile": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    }
+  },
+  "typeImage": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item-action-button.mjs

@@ -0,0 +1,37 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "typeFile": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    }
+  },
+  "typeImage": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item-remove-button.d.ts

@@ -0,0 +1,28 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "offset": "var(--seed-dimension-x1)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x2_5)",
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item-remove-button.mjs

@@ -0,0 +1,28 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "offset": "var(--seed-dimension-x1)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x2_5)",
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item.d.ts

@@ -0,0 +1,103 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "80px",
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "gap": "var(--seed-dimension-x2_5)"
+      },
+      "thumbnail": {
+        "color": "var(--seed-color-bg-neutral-weak)",
+        "size": "var(--seed-dimension-x12)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "var(--seed-dimension-x6)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t1)",
+        "lineHeight": "var(--seed-line-height-t1)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      /** dragging 상태에서는 표시되지 않습니다. */
+      "removeButtonMask": {
+        "offset": "var(--seed-dimension-x1_5)",
+        "size": "var(--seed-dimension-x6)"
+      }
+    }
+  },
+  "typeFile": {
+    "enabled": {
+      "root": {
+        "width": "160px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "paddingX": "var(--seed-dimension-x4)"
+      }
+    },
+    "readonly": {
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "dragging": {
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "typeImage": {
+    "enabled": {
+      "root": {
+        "width": "80px",
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)"
+      },
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)"
+      },
+      "badge": {
+        "color": "var(--seed-color-bg-overlay)",
+        "height": "var(--seed-dimension-x6)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x1)"
+      },
+      "badgeLabel": {
+        "color": "var(--seed-color-palette-static-white)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "readonly": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "dragging": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  }
+}