@reco-inc/upbox-ui 0.1.1

package/tailwind-theme.css

@@ -0,0 +1,379 @@
+/* @reco-inc/upbox-ui Tailwind v4 Theme
+ * Import this file in your project's CSS entry:
+ *   @import "@reco-inc/upbox-ui/tailwind-theme.css";
+ *
+ * This registers all design tokens as Tailwind v4 theme values
+ * and provides semantic typography @utility classes.
+ * Your project must process this file with Tailwind v4.
+ */
+
+@theme {
+  /* Font family */
+  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+
+  /* Font sizes */
+  --text-size-8: var(--text-size-8);
+  --text-size-8--line-height: var(--text-size-8--line-height);
+  --text-size-9: var(--text-size-9);
+  --text-size-9--line-height: var(--text-size-9--line-height);
+  --text-size-10: var(--text-size-10);
+  --text-size-10--line-height: var(--text-size-10--line-height);
+  --text-size-11: var(--text-size-11);
+  --text-size-11--line-height: var(--text-size-11--line-height);
+  --text-size-12: var(--text-size-12);
+  --text-size-12--line-height: var(--text-size-12--line-height);
+  --text-size-13: var(--text-size-13);
+  --text-size-13--line-height: var(--text-size-13--line-height);
+  --text-size-14: var(--text-size-14);
+  --text-size-14--line-height: var(--text-size-14--line-height);
+  --text-size-15: var(--text-size-15);
+  --text-size-15--line-height: var(--text-size-15--line-height);
+  --text-size-16: var(--text-size-16);
+  --text-size-16--line-height: var(--text-size-16--line-height);
+  --text-size-18: var(--text-size-18);
+  --text-size-18--line-height: var(--text-size-18--line-height);
+  --text-size-20: var(--text-size-20);
+  --text-size-20--line-height: var(--text-size-20--line-height);
+  --text-size-22: var(--text-size-22);
+  --text-size-22--line-height: var(--text-size-22--line-height);
+  --text-size-24: var(--text-size-24);
+  --text-size-24--line-height: var(--text-size-24--line-height);
+  --text-size-28: var(--text-size-28);
+  --text-size-28--line-height: var(--text-size-28--line-height);
+  --text-size-32: var(--text-size-32);
+  --text-size-32--line-height: var(--text-size-32--line-height);
+
+  /* Font weights */
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  /* Colors - Grey */
+  --color-grey-10: var(--color-grey-10);
+  --color-grey-20: var(--color-grey-20);
+  --color-grey-30: var(--color-grey-30);
+  --color-grey-40: var(--color-grey-40);
+  --color-grey-50: var(--color-grey-50);
+  --color-grey-60: var(--color-grey-60);
+  --color-grey-70: var(--color-grey-70);
+  --color-grey-80: var(--color-grey-80);
+  --color-grey-90: var(--color-grey-90);
+  --color-grey-100: var(--color-grey-100);
+
+  /* Colors - Navy */
+  --color-navy-20: var(--color-navy-20);
+  --color-navy-30: var(--color-navy-30);
+  --color-navy-40: var(--color-navy-40);
+  --color-navy-50: var(--color-navy-50);
+  --color-navy-60: var(--color-navy-60);
+  --color-navy-70: var(--color-navy-70);
+  --color-navy-80: var(--color-navy-80);
+  --color-navy-90: var(--color-navy-90);
+  --color-navy-100: var(--color-navy-100);
+
+  /* Colors - Blue */
+  --color-blue-20: var(--color-blue-20);
+  --color-blue-30: var(--color-blue-30);
+  --color-blue-40: var(--color-blue-40);
+  --color-blue-50: var(--color-blue-50);
+  --color-blue-60: var(--color-blue-60);
+  --color-blue-70: var(--color-blue-70);
+  --color-blue-80: var(--color-blue-80);
+  --color-blue-90: var(--color-blue-90);
+  --color-blue-100: var(--color-blue-100);
+
+  /* Colors - Green */
+  --color-green-20: var(--color-green-20);
+  --color-green-30: var(--color-green-30);
+  --color-green-40: var(--color-green-40);
+  --color-green-50: var(--color-green-50);
+  --color-green-60: var(--color-green-60);
+  --color-green-70: var(--color-green-70);
+  --color-green-80: var(--color-green-80);
+  --color-green-90: var(--color-green-90);
+  --color-green-100: var(--color-green-100);
+
+  /* Colors - Red */
+  --color-red-20: var(--color-red-20);
+  --color-red-30: var(--color-red-30);
+  --color-red-40: var(--color-red-40);
+  --color-red-50: var(--color-red-50);
+  --color-red-60: var(--color-red-60);
+  --color-red-70: var(--color-red-70);
+  --color-red-80: var(--color-red-80);
+  --color-red-90: var(--color-red-90);
+  --color-red-100: var(--color-red-100);
+
+  /* Colors - Orange */
+  --color-orange-20: var(--color-orange-20);
+  --color-orange-30: var(--color-orange-30);
+  --color-orange-40: var(--color-orange-40);
+  --color-orange-50: var(--color-orange-50);
+  --color-orange-60: var(--color-orange-60);
+  --color-orange-70: var(--color-orange-70);
+  --color-orange-80: var(--color-orange-80);
+  --color-orange-90: var(--color-orange-90);
+  --color-orange-100: var(--color-orange-100);
+
+  /* Semantic colors - CTA */
+  --color-cta-primary: var(--color-cta-primary);
+  --color-cta-destructive: var(--color-cta-destructive);
+  --color-cta-secondary: var(--color-cta-secondary);
+  --color-cta-tertiary: var(--color-cta-tertiary);
+
+  /* Semantic colors - Label */
+  --color-label-1: var(--color-label-1);
+  --color-label-2: var(--color-label-2);
+
+  /* Semantic colors - Background */
+  --color-bg-1: var(--color-bg-1);
+  --color-bg-2: var(--color-bg-2);
+
+  /* Semantic colors - Status */
+  --color-status-informative: var(--color-status-informative);
+  --color-status-positive: var(--color-status-positive);
+  --color-status-negative: var(--color-status-negative);
+  --color-status-warning: var(--color-status-warning);
+
+  /* Spacing base unit */
+  --spacing: 0.25rem;
+
+  /* Shadows */
+  --shadow-small: var(--shadow-small);
+  --shadow-regular: var(--shadow-regular);
+  --shadow-medium: var(--shadow-medium);
+  --shadow-large: var(--shadow-large);
+
+  /* Border radius
+   * shadcn 원본은 --radius(10px) 에서 빼는 공식이지만, Upbox 기준값은 2px 이라
+   * 그대로 두면 sm/md 가 0 이하로 무너져 모서리가 아예 깎이지 않았다(조용한 버그).
+   * Upbox 실사용 값(2/4/8px)으로 스케일을 직접 정의한다. (src/style.css 와 동일하게 유지) */
+  --radius-sm: 0.125rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.5rem;
+
+  /* Accordion animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--reka-accordion-content-height); }
+}
+@keyframes accordion-up {
+  from { height: var(--reka-accordion-content-height); }
+  to { height: 0; }
+}
+
+/* Semantic Typography - Page Title (Bold) */
+@utility text-page-title-1 {
+  font-size: var(--text-size-28);
+  line-height: var(--text-size-28--line-height);
+  font-weight: 700;
+}
+@utility text-page-title-2 {
+  font-size: var(--text-size-24);
+  line-height: var(--text-size-24--line-height);
+  font-weight: 700;
+}
+@utility text-page-title-3 {
+  font-size: var(--text-size-22);
+  line-height: var(--text-size-22--line-height);
+  font-weight: 700;
+}
+@utility text-page-title-4 {
+  font-size: var(--text-size-20);
+  line-height: var(--text-size-20--line-height);
+  font-weight: 700;
+}
+
+/* Semantic Typography - Headline (Bold) */
+@utility text-h1 {
+  font-size: var(--text-size-24);
+  line-height: var(--text-size-24--line-height);
+  font-weight: 700;
+}
+@utility text-h2 {
+  font-size: var(--text-size-22);
+  line-height: var(--text-size-22--line-height);
+  font-weight: 700;
+}
+@utility text-h3 {
+  font-size: var(--text-size-20);
+  line-height: var(--text-size-20--line-height);
+  font-weight: 700;
+}
+@utility text-h4 {
+  font-size: var(--text-size-18);
+  line-height: var(--text-size-18--line-height);
+  font-weight: 700;
+}
+@utility text-h5 {
+  font-size: var(--text-size-16);
+  line-height: var(--text-size-16--line-height);
+  font-weight: 700;
+}
+
+/* Semantic Typography - Title (Semi-Bold) */
+@utility text-title-1 {
+  font-size: var(--text-size-20);
+  line-height: var(--text-size-20--line-height);
+  font-weight: 600;
+}
+@utility text-title-2 {
+  font-size: var(--text-size-18);
+  line-height: var(--text-size-18--line-height);
+  font-weight: 600;
+}
+@utility text-title-3 {
+  font-size: var(--text-size-16);
+  line-height: var(--text-size-16--line-height);
+  font-weight: 600;
+}
+@utility text-title-4 {
+  font-size: var(--text-size-15);
+  line-height: var(--text-size-15--line-height);
+  font-weight: 600;
+}
+
+/* Semantic Typography - Label (Bold) */
+@utility text-label-1 {
+  font-size: var(--text-size-16);
+  line-height: var(--text-size-16--line-height);
+  font-weight: 700;
+}
+@utility text-label-2 {
+  font-size: var(--text-size-15);
+  line-height: var(--text-size-15--line-height);
+  font-weight: 700;
+}
+@utility text-label-3 {
+  font-size: var(--text-size-14);
+  line-height: var(--text-size-14--line-height);
+  font-weight: 700;
+}
+@utility text-label-4 {
+  font-size: var(--text-size-13);
+  line-height: var(--text-size-13--line-height);
+  font-weight: 700;
+}
+@utility text-label-5 {
+  font-size: var(--text-size-12);
+  line-height: var(--text-size-12--line-height);
+  font-weight: 700;
+}
+@utility text-label-6 {
+  font-size: var(--text-size-11);
+  line-height: var(--text-size-11--line-height);
+  font-weight: 700;
+}
+
+/* Semantic Typography - Body (Regular) */
+@utility text-body-1 {
+  font-size: var(--text-size-16);
+  line-height: var(--text-size-16--line-height);
+  font-weight: 400;
+}
+@utility text-body-2 {
+  font-size: var(--text-size-15);
+  line-height: var(--text-size-15--line-height);
+  font-weight: 400;
+}
+@utility text-body-3 {
+  font-size: var(--text-size-14);
+  line-height: var(--text-size-14--line-height);
+  font-weight: 400;
+}
+@utility text-body-4 {
+  font-size: var(--text-size-13);
+  line-height: var(--text-size-13--line-height);
+  font-weight: 400;
+}
+@utility text-body-5 {
+  font-size: var(--text-size-12);
+  line-height: var(--text-size-12--line-height);
+  font-weight: 400;
+}
+
+/* Semantic Typography - Body Semi-Bold */
+@utility text-body-1-sb {
+  font-size: var(--text-size-16);
+  line-height: var(--text-size-16--line-height);
+  font-weight: 600;
+}
+@utility text-body-2-sb {
+  font-size: var(--text-size-15);
+  line-height: var(--text-size-15--line-height);
+  font-weight: 600;
+}
+@utility text-body-3-sb {
+  font-size: var(--text-size-14);
+  line-height: var(--text-size-14--line-height);
+  font-weight: 600;
+}
+@utility text-body-4-sb {
+  font-size: var(--text-size-13);
+  line-height: var(--text-size-13--line-height);
+  font-weight: 600;
+}
+@utility text-body-5-sb {
+  font-size: var(--text-size-12);
+  line-height: var(--text-size-12--line-height);
+  font-weight: 600;
+}
+
+/* Semantic Typography - Body Bold */
+@utility text-body-1-b {
+  font-size: var(--text-size-16);
+  line-height: var(--text-size-16--line-height);
+  font-weight: 700;
+}
+@utility text-body-2-b {
+  font-size: var(--text-size-15);
+  line-height: var(--text-size-15--line-height);
+  font-weight: 700;
+}
+@utility text-body-3-b {
+  font-size: var(--text-size-14);
+  line-height: var(--text-size-14--line-height);
+  font-weight: 700;
+}
+@utility text-body-4-b {
+  font-size: var(--text-size-13);
+  line-height: var(--text-size-13--line-height);
+  font-weight: 700;
+}
+@utility text-body-5-b {
+  font-size: var(--text-size-12);
+  line-height: var(--text-size-12--line-height);
+  font-weight: 700;
+}
+
+/* Semantic Typography - Caption (Regular) */
+@utility text-caption-1 {
+  font-size: var(--text-size-13);
+  line-height: var(--text-size-13--line-height);
+  font-weight: 400;
+}
+@utility text-caption-2 {
+  font-size: var(--text-size-12);
+  line-height: var(--text-size-12--line-height);
+  font-weight: 400;
+}
+@utility text-caption-3 {
+  font-size: var(--text-size-10);
+  line-height: 1rem;
+  font-weight: 400;
+}
+@utility text-caption-4 {
+  font-size: var(--text-size-8);
+  line-height: var(--text-size-8--line-height);
+  font-weight: 400;
+}