@seed-design/lynx-css 0.1.0

package/vars/component/page-banner.mjs

@@ -0,0 +1,336 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x2_5)",
+        "minHeight": "var(--seed-dimension-x10)"
+      },
+      "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)"
+      }
+    }
+  },
+  "toneNeutralVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "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)"
+      }
+    }
+  },
+  "toneNeutralVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "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)"
+      }
+    }
+  },
+  "tonePositiveVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-weak)"
+      },
+      "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)"
+      }
+    }
+  },
+  "tonePositiveVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-solid)"
+      },
+      "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)"
+      }
+    }
+  },
+  "toneInformativeVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-weak)"
+      },
+      "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)"
+      }
+    }
+  },
+  "toneInformativeVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-solid)"
+      },
+      "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)"
+      }
+    }
+  },
+  "toneWarningVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-weak)"
+      },
+      "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)"
+      }
+    }
+  },
+  "toneWarningVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-solid)"
+      },
+      "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)"
+      }
+    }
+  },
+  "toneCriticalVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-weak)"
+      },
+      "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)"
+      }
+    }
+  },
+  "toneCriticalVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-solid)"
+      },
+      "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)"
+      }
+    }
+  },
+  "toneMagicVariantWeak": {
+    "enabled": {
+      "root": {
+        "gradient": "var(--seed-gradient-glow-magic)"
+      },
+      "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)"
+      }
+    }
+  }
+}

package/vars/component/progress-circle.d.ts

@@ -0,0 +1,88 @@
+export declare const vars: {
+  /**
+   * 주로 전체 페이지 로딩에 사용합니다.
+   */
+  "size40": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x10)",
+        "thickness": "5px"
+      }
+    }
+  },
+  /**
+   * 특정 요소 안에서 사용하는 경우 사용합니다.
+   */
+  "size24": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x6)",
+        "thickness": "3px"
+      }
+    }
+  },
+  /**
+   * 대기 시간이 얼마나 남은지 아는 상황일 때 사용합니다. 진행 상황에 맞춰서 원을 채웁니다.
+   */
+  "indeterminateFalse": {
+    "enabled": {
+      "range": {
+        "lengthDuration": "300ms",
+        "lengthTimingFunction": "cubic-bezier(0, 0, 0.15, 1)"
+      }
+    }
+  },
+  /**
+   * 대기 시간이 얼마나 남은지 모르는 상황일 때 사용합니다. 계속해서 회전하는 동작을 합니다.
+   */
+  "indeterminateTrue": {
+    "enabled": {
+      "range": {
+        "lengthDuration": "1.2s",
+        "rotateDuration": "1.2s",
+        "headTimingFunction": "cubic-bezier(0.35, 0, 0.65, 1)",
+        "tailTimingFunction": "cubic-bezier(0.35, 0, 0.65, 0.6)",
+        "rotateTimingFunction": "cubic-bezier(0.35, 0.25, 0.65, 0.75)"
+      }
+    }
+  },
+  /**
+   * 가장 보편적으로 사용되며 스타일보다는 로딩 상태의 인식이 더 중요한 경우 사용합니다.
+   */
+  "toneNeutral": {
+    "enabled": {
+      "track": {
+        "color": "var(--seed-color-palette-gray-200)"
+      },
+      "range": {
+        "color": "var(--seed-color-palette-gray-500)"
+      }
+    }
+  },
+  /**
+   * 사용자 경험의 초기 단계에서 브랜드 컬러를 통해 주요 전환점을 강조할 때 사용합니다.
+   */
+  "toneBrand": {
+    "enabled": {
+      "track": {
+        "color": "var(--seed-color-palette-carrot-200)"
+      },
+      "range": {
+        "color": "var(--seed-color-bg-brand-solid)"
+      }
+    }
+  },
+  /**
+   * 화면 전체를 어둡게 덮는 오버레이(Overlay) 위에 로딩 상태를 표시할 때 사용합니다.
+   */
+  "toneStaticWhite": {
+    "enabled": {
+      "track": {
+        "color": "var(--seed-color-palette-static-white-alpha-300)"
+      },
+      "range": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  }
+}

package/vars/component/progress-circle.mjs

@@ -0,0 +1,67 @@
+export const vars = {
+  "size40": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x10)",
+        "thickness": "5px"
+      }
+    }
+  },
+  "size24": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x6)",
+        "thickness": "3px"
+      }
+    }
+  },
+  "indeterminateFalse": {
+    "enabled": {
+      "range": {
+        "lengthDuration": "300ms",
+        "lengthTimingFunction": "cubic-bezier(0, 0, 0.15, 1)"
+      }
+    }
+  },
+  "indeterminateTrue": {
+    "enabled": {
+      "range": {
+        "lengthDuration": "1.2s",
+        "rotateDuration": "1.2s",
+        "headTimingFunction": "cubic-bezier(0.35, 0, 0.65, 1)",
+        "tailTimingFunction": "cubic-bezier(0.35, 0, 0.65, 0.6)",
+        "rotateTimingFunction": "cubic-bezier(0.35, 0.25, 0.65, 0.75)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "track": {
+        "color": "var(--seed-color-palette-gray-200)"
+      },
+      "range": {
+        "color": "var(--seed-color-palette-gray-500)"
+      }
+    }
+  },
+  "toneBrand": {
+    "enabled": {
+      "track": {
+        "color": "var(--seed-color-palette-carrot-200)"
+      },
+      "range": {
+        "color": "var(--seed-color-bg-brand-solid)"
+      }
+    }
+  },
+  "toneStaticWhite": {
+    "enabled": {
+      "track": {
+        "color": "var(--seed-color-palette-static-white-alpha-300)"
+      },
+      "range": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gapY": "var(--seed-dimension-x1)"
+      }
+    }
+  }
+}

package/vars/component/radio-group.mjs

@@ -0,0 +1,9 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gapY": "var(--seed-dimension-x1)"
+      }
+    }
+  }
+}

package/vars/component/radio.d.ts

@@ -0,0 +1,53 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "root": {
+        "gap": "var(--seed-dimension-x2)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "weightRegular": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  },
+  "weightBold": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x8)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      }
+    }
+  }
+}

package/vars/component/radio.mjs

@@ -0,0 +1,53 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "root": {
+        "gap": "var(--seed-dimension-x2)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "weightRegular": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  },
+  "weightBold": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x8)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x9)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      }
+    }
+  }
+}