@seed-design/lynx-css 0.1.0

package/vars/component/avatar.d.ts

@@ -0,0 +1,204 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-full)",
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 댓글을 남긴 사용자
+   */
+  "size20": {
+    "enabled": {
+      "root": {
+        "size": "20px",
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 답글 프로필
+   */
+  "size24": {
+    "enabled": {
+      "root": {
+        "size": "24px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "14px",
+        "size": "12px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "15px",
+        "size": "10px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 댓글 프로필
+   */
+  "size36": {
+    "enabled": {
+      "root": {
+        "size": "36px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "20px",
+        "size": "18px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "22px",
+        "size": "14px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 게시글 상세 내 프로필
+   */
+  "size42": {
+    "enabled": {
+      "root": {
+        "size": "42px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "24px",
+        "size": "20px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "26px",
+        "size": "16px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 작은 리스트
+   */
+  "size48": {
+    "enabled": {
+      "root": {
+        "size": "48px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "28px",
+        "size": "22px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "30px",
+        "size": "18px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 큰 리스트
+   */
+  "size56": {
+    "enabled": {
+      "root": {
+        "size": "56px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "34px",
+        "size": "24px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "36px",
+        "size": "20px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 프로필 상세, 캐러셀
+   */
+  "size64": {
+    "enabled": {
+      "root": {
+        "size": "64px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "40px",
+        "size": "26px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "42px",
+        "size": "22px"
+      }
+    }
+  },
+  "size80": {
+    "enabled": {
+      "root": {
+        "size": "80px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "52px",
+        "size": "32px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "54px",
+        "size": "28px"
+      }
+    }
+  },
+  "size96": {
+    "enabled": {
+      "root": {
+        "size": "96px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "62px",
+        "size": "38px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "65px",
+        "size": "32px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 프로필 수정
+   */
+  "size108": {
+    "enabled": {
+      "root": {
+        "size": "108px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "70px",
+        "size": "44px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "74px",
+        "size": "36px"
+      }
+    }
+  }
+}

package/vars/component/avatar.mjs

@@ -0,0 +1,162 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-full)",
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)"
+      }
+    }
+  },
+  "size20": {
+    "enabled": {
+      "root": {
+        "size": "20px",
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  "size24": {
+    "enabled": {
+      "root": {
+        "size": "24px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "14px",
+        "size": "12px"
+      },
+      "badge": {
+        "offset": "15px",
+        "size": "10px"
+      }
+    }
+  },
+  "size36": {
+    "enabled": {
+      "root": {
+        "size": "36px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "20px",
+        "size": "18px"
+      },
+      "badge": {
+        "offset": "22px",
+        "size": "14px"
+      }
+    }
+  },
+  "size42": {
+    "enabled": {
+      "root": {
+        "size": "42px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "24px",
+        "size": "20px"
+      },
+      "badge": {
+        "offset": "26px",
+        "size": "16px"
+      }
+    }
+  },
+  "size48": {
+    "enabled": {
+      "root": {
+        "size": "48px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "28px",
+        "size": "22px"
+      },
+      "badge": {
+        "offset": "30px",
+        "size": "18px"
+      }
+    }
+  },
+  "size56": {
+    "enabled": {
+      "root": {
+        "size": "56px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "34px",
+        "size": "24px"
+      },
+      "badge": {
+        "offset": "36px",
+        "size": "20px"
+      }
+    }
+  },
+  "size64": {
+    "enabled": {
+      "root": {
+        "size": "64px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "40px",
+        "size": "26px"
+      },
+      "badge": {
+        "offset": "42px",
+        "size": "22px"
+      }
+    }
+  },
+  "size80": {
+    "enabled": {
+      "root": {
+        "size": "80px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "52px",
+        "size": "32px"
+      },
+      "badge": {
+        "offset": "54px",
+        "size": "28px"
+      }
+    }
+  },
+  "size96": {
+    "enabled": {
+      "root": {
+        "size": "96px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "62px",
+        "size": "38px"
+      },
+      "badge": {
+        "offset": "65px",
+        "size": "32px"
+      }
+    }
+  },
+  "size108": {
+    "enabled": {
+      "root": {
+        "size": "108px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "70px",
+        "size": "44px"
+      },
+      "badge": {
+        "offset": "74px",
+        "size": "36px"
+      }
+    }
+  }
+}

package/vars/component/badge.d.ts

@@ -0,0 +1,316 @@
+export declare const vars: {
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        /** 10글자 이상의 텍스트를 말줄임 처리하기 위해 설정된 최대 너비입니다. */
+        "maxWidth": "6.75rem",
+        "minHeight": "var(--seed-dimension-x6)",
+        "paddingX": "var(--seed-dimension-x2)",
+        "paddingY": "var(--seed-dimension-x1)",
+        "cornerRadius": "var(--seed-radius-r1_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        /** 10글자 이상의 텍스트를 말줄임 처리하기 위해 설정된 최대 너비입니다. */
+        "maxWidth": "7.5rem",
+        "minHeight": "var(--seed-dimension-x5)",
+        "paddingX": "var(--seed-dimension-x1_5)",
+        "paddingY": "var(--seed-dimension-x0_5)",
+        "cornerRadius": "var(--seed-radius-r1)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t1)",
+        "lineHeight": "var(--seed-line-height-t1)"
+      }
+    }
+  },
+  /**
+   * 반복적인 구조를 가진 환경에서 사용합니다. 배경색이 있는 경우에는 권장하지 않습니다.
+   */
+  "variantWeak": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  /**
+   * 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우 사용합니다.
+   */
+  "variantSolid": {
+    "enabled": {
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  /**
+   * 중간 정도의 주목도가 필요한 본문 또는 상세 화면에서 사용합니다.
+   */
+  "variantOutline": {
+    "enabled": {
+      "root": {
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  /**
+   * - `tone=neutral`: 상태가 특별히 없거나, 상태값이 명확하지 않은 초기 상태
+   * - `variant=weak`: 반복적인 구조를 가진 환경에서 사용합니다. 배경색이 있는 경우에는 권장하지 않습니다.
+   */
+  "toneNeutralVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    }
+  },
+  /**
+   * - `tone=neutral`: 상태가 특별히 없거나, 상태값이 명확하지 않은 초기 상태
+   * - `variant=solid`: 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우 사용합니다.
+   */
+  "toneNeutralVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-800)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    }
+  },
+  /**
+   * - `tone=neutral`: 상태가 특별히 없거나, 상태값이 명확하지 않은 초기 상태
+   * - `variant=outline`: 중간 정도의 주목도가 필요한 본문 또는 상세 화면에서 사용합니다.
+   */
+  "toneNeutralVariantOutline": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 반복적인 구조를 가진 환경에서 사용합니다. 배경색이 있는 경우에는 권장하지 않습니다.
+   */
+  "toneBrandVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-brand-contrast)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우 사용합니다.
+   */
+  "toneBrandVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `variant=outline`: 중간 정도의 주목도가 필요한 본문 또는 상세 화면에서 사용합니다.
+   */
+  "toneBrandVariantOutline": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-brand-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-brand)"
+      }
+    }
+  },
+  /**
+   * - `tone=informative`: 베타 기능 안내, 사용자 권한 제한, 정보 기반 메시지
+   * - `variant=weak`: 반복적인 구조를 가진 환경에서 사용합니다. 배경색이 있는 경우에는 권장하지 않습니다.
+   */
+  "toneInformativeVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  /**
+   * - `tone=informative`: 베타 기능 안내, 사용자 권한 제한, 정보 기반 메시지
+   * - `variant=solid`: 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우 사용합니다.
+   */
+  "toneInformativeVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `tone=informative`: 베타 기능 안내, 사용자 권한 제한, 정보 기반 메시지
+   * - `variant=outline`: 중간 정도의 주목도가 필요한 본문 또는 상세 화면에서 사용합니다.
+   */
+  "toneInformativeVariantOutline": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-informative-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-informative)"
+      }
+    }
+  },
+  /**
+   * - `tone=positive`: 완료, 적용됨, 승인됨, 발행됨, 저장 성공, 검토 통과
+   * - `variant=weak`: 반복적인 구조를 가진 환경에서 사용합니다. 배경색이 있는 경우에는 권장하지 않습니다.
+   */
+  "tonePositiveVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  /**
+   * - `tone=positive`: 완료, 적용됨, 승인됨, 발행됨, 저장 성공, 검토 통과
+   * - `variant=solid`: 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우 사용합니다.
+   */
+  "tonePositiveVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `tone=positive`: 완료, 적용됨, 승인됨, 발행됨, 저장 성공, 검토 통과
+   * - `variant=outline`: 중간 정도의 주목도가 필요한 본문 또는 상세 화면에서 사용합니다.
+   */
+  "tonePositiveVariantOutline": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-positive-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-positive)"
+      }
+    }
+  },
+  /**
+   * - `tone=warning`: 만료 임박, 제출 누락, 필수 정보 부족 등 잠재적 문제 상태
+   * - `variant=weak`: 반복적인 구조를 가진 환경에서 사용합니다. 배경색이 있는 경우에는 권장하지 않습니다.
+   */
+  "toneWarningVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  /**
+   * - `tone=warning`: 만료 임박, 제출 누락, 필수 정보 부족 등 잠재적 문제 상태
+   * - `variant=solid`: 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우 사용합니다.
+   */
+  "toneWarningVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
+      }
+    }
+  },
+  /**
+   * - `tone=warning`: 만료 임박, 제출 누락, 필수 정보 부족 등 잠재적 문제 상태
+   * - `variant=outline`: 중간 정도의 주목도가 필요한 본문 또는 상세 화면에서 사용합니다.
+   */
+  "toneWarningVariantOutline": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-warning-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-warning)"
+      }
+    }
+  },
+  /**
+   * - `tone=critical`: 검수 거절, 제재 상태, 편집 불가, 유효성 검증 실패
+   * - `variant=weak`: 반복적인 구조를 가진 환경에서 사용합니다. 배경색이 있는 경우에는 권장하지 않습니다.
+   */
+  "toneCriticalVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  /**
+   * - `tone=critical`: 검수 거절, 제재 상태, 편집 불가, 유효성 검증 실패
+   * - `variant=solid`: 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우 사용합니다.
+   */
+  "toneCriticalVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `tone=critical`: 검수 거절, 제재 상태, 편집 불가, 유효성 검증 실패
+   * - `variant=outline`: 중간 정도의 주목도가 필요한 본문 또는 상세 화면에서 사용합니다.
+   */
+  "toneCriticalVariantOutline": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-critical-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-critical)"
+      }
+    }
+  }
+}