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

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"
+      }
+    }
+  }
+}

package/vars/component/page-banner.d.ts

@@ -0,0 +1,382 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x2_5)",
+        "minHeight": "var(--seed-dimension-x10)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)",
+        "marginRight": "var(--seed-dimension-x2)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x1_5)"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "button": {
+        "targetHeight": "var(--seed-dimension-x10)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x4)",
+        "targetSize": "var(--seed-dimension-x10)",
+        "marginLeft": "var(--seed-dimension-x2)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneNeutralVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneNeutralVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "tonePositiveVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-weak)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-weak-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "tonePositiveVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-solid)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "title": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "description": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "button": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-solid-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneInformativeVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-weak)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-weak-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneInformativeVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-solid)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "title": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "description": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "button": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-solid-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneWarningVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-weak)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-weak-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneWarningVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-solid)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
+      },
+      "title": {
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
+      },
+      "description": {
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
+      },
+      "button": {
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-solid-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneCriticalVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-weak)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-weak-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneCriticalVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-solid)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "title": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "description": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "button": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-solid-pressed)"
+      }
+    }
+  },
+  /**
+   * - `tone=magic`: AI 기능을 나타냅니다. variant=solid와 조합하여 사용하지 않습니다.
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneMagicVariantWeak": {
+    "enabled": {
+      "root": {
+        "gradient": "var(--seed-gradient-glow-magic)"
+      },
+      /** 아이콘은 Fill 타입 사용을 권장합니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "gradient": "var(--seed-gradient-glow-magic-pressed)"
+      }
+    }
+  }
+}