@reco-inc/upbox-ui 0.1.1

package/src/style.css

@@ -0,0 +1,458 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-grey-30, currentColor);
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  :root {
+    /* Shadcn UI semantic colors */
+    --radius: 0.125rem;
+    --background: var(--color-grey-10);
+    --foreground: var(--color-grey-100);
+    --popover: var(--color-grey-10);
+    --popover-foreground: var(--color-grey-100);
+    --accent: var(--color-grey-30);
+    --accent-foreground: var(--color-grey-100);
+    --muted: var(--color-grey-30);
+    --muted-foreground: var(--color-grey-60);
+    --border: var(--color-grey-40);
+
+    /* CTA colors */
+    --color-cta-primary: var(--color-navy-80);
+    --color-cta-destructive: var(--color-red-80);
+    --color-cta-secondary: var(--color-grey-60);
+    --color-cta-tertiary: var(--color-grey-30);
+
+    /* Label colors */
+    --color-label-1: var(--color-grey-60);
+    --color-label-2: var(--color-grey-90);
+
+    /* Background colors */
+    --color-bg-1: var(--color-grey-10);
+    --color-bg-2: var(--color-grey-20);
+    --color-bg-3: var(--color-grey-30);
+
+    /* Status colors */
+    --color-status-informative: var(--color-blue-80);
+    --color-status-positive: var(--color-green-80);
+    --color-status-negative: var(--color-red-80);
+    --color-status-warning: var(--color-orange-80);
+  }
+
+  .dark {
+    --color-grey-10: #0D152A;
+    --color-grey-20: #303445;
+    --color-grey-30: #555C6C;
+    --color-grey-40: #6F7789;
+    --color-grey-50: #8E94A3;
+    --color-grey-60: #AFB4BF;
+    --color-grey-70: #D3D6DE;
+    --color-grey-80: #ECEDF0;
+    --color-grey-90: #F8F8F9;
+    --color-grey-100: #FFFFFF;
+
+    --color-navy-20: #081E38;
+    --color-navy-30: #1D3756;
+    --color-navy-40: #264870;
+    --color-navy-50: #385B85;
+    --color-navy-60: #4D7099;
+    --color-navy-70: #85A2C7;
+    --color-navy-80: #C5D6EC;
+    --color-navy-90: #DAE7F5;
+    --color-navy-100: #F4F7FC;
+  }
+}
+
+@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;
+
+  /* Text sizes */
+  --text-size-8: 0.5rem;
+  --text-size-8--line-height: 0.75rem;
+  --text-size-9: 0.56rem;
+  --text-size-9--line-height: 0.84rem;
+  --text-size-10: 0.62rem;
+  --text-size-10--line-height: 0.92rem;
+  --text-size-11: 0.688rem;
+  --text-size-11--line-height: 1rem;
+  --text-size-12: 0.750rem;
+  --text-size-12--line-height: 1rem;
+  --text-size-13: 0.813rem;
+  --text-size-13--line-height: 1.250rem;
+  --text-size-14: 0.875rem;
+  --text-size-14--line-height: 1.250rem;
+  --text-size-15: 0.938rem;
+  --text-size-15--line-height: 1.5rem;
+  --text-size-16: 1rem;
+  --text-size-16--line-height: 1.5rem;
+  --text-size-18: 1.125rem;
+  --text-size-18--line-height: 1.75rem;
+  --text-size-20: 1.250rem;
+  --text-size-20--line-height: 1.75rem;
+  --text-size-22: 1.375rem;
+  --text-size-22--line-height: 2rem;
+  --text-size-24: 1.5rem;
+  --text-size-24--line-height: 2rem;
+  --text-size-28: 1.75rem;
+  --text-size-28--line-height: 2.25rem;
+  --text-size-32: 2rem;
+  --text-size-32--line-height: 3rem;
+
+  /* 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: #FFFFFF;
+  --color-grey-20: #F8F8F9;
+  --color-grey-30: #ECEDF0;
+  --color-grey-40: #D3D6DE;
+  --color-grey-50: #AFB4BF;
+  --color-grey-60: #8E94A3;
+  --color-grey-70: #6F7789;
+  --color-grey-80: #555C6C;
+  --color-grey-90: #303445;
+  --color-grey-100: #0D152A;
+
+  /* Colors - Navy */
+  --color-navy-20: #F4F7FC;
+  --color-navy-30: #DAE7F5;
+  --color-navy-40: #C5D6EC;
+  --color-navy-50: #85A2C7;
+  --color-navy-60: #4D7099;
+  --color-navy-70: #385B85;
+  --color-navy-80: #264870;
+  --color-navy-90: #1D3756;
+  --color-navy-100: #081E38;
+
+  /* Colors - Blue */
+  --color-blue-20: #F5F9FF;
+  --color-blue-30: #E1EDFF;
+  --color-blue-40: #B9D5FF;
+  --color-blue-50: #93BEFF;
+  --color-blue-60: #64A2FF;
+  --color-blue-70: #3D8BFF;
+  --color-blue-80: #0066FF;
+  --color-blue-90: #004FC5;
+  --color-blue-100: #003C96;
+
+  /* Colors - Green */
+  --color-green-20: #F1F9F6;
+  --color-green-30: #DBEEE9;
+  --color-green-40: #B3D7CC;
+  --color-green-50: #8EC0B1;
+  --color-green-60: #66AF99;
+  --color-green-70: #4DA288;
+  --color-green-80: #1A8766;
+  --color-green-90: #107B5A;
+  --color-green-100: #006E4D;
+
+  /* Colors - Red */
+  --color-red-20: #FFF6F6;
+  --color-red-30: #FBEAEA;
+  --color-red-40: #FDC9C9;
+  --color-red-50: #F8A8A8;
+  --color-red-60: #F27D7E;
+  --color-red-70: #ED4242;
+  --color-red-80: #E11D1D;
+  --color-red-90: #C21919;
+  --color-red-100: #851111;
+
+  /* Colors - Orange */
+  --color-orange-20: #FFF2E4;
+  --color-orange-30: #FFE9D1;
+  --color-orange-40: #FFDBB3;
+  --color-orange-50: #FFBB63;
+  --color-orange-60: #FFA037;
+  --color-orange-70: #F68511;
+  --color-orange-80: #E46F00;
+  --color-orange-90: #CB5D00;
+  --color-orange-100: #B14C00;
+
+  /* Semantic colors */
+  --color-cta-primary: var(--color-navy-80);
+  --color-cta-destructive: var(--color-red-80);
+  --color-cta-secondary: var(--color-grey-60);
+  --color-cta-tertiary: var(--color-grey-30);
+  --color-label-1: var(--color-grey-60);
+  --color-label-2: var(--color-grey-90);
+  --color-bg-1: var(--color-grey-10);
+  --color-bg-2: var(--color-grey-20);
+  --color-bg-3: var(--color-grey-30);
+  --color-status-informative: var(--color-blue-80);
+  --color-status-positive: var(--color-green-80);
+  --color-status-negative: var(--color-red-80);
+  --color-status-warning: var(--color-orange-80);
+
+  /* Spacing */
+  --spacing: 0.25rem;
+  --space-2: 0.125rem;
+  --space-4: 0.25rem;
+  --space-6: 0.375rem;
+  --space-8: 0.5rem;
+  --space-12: 0.75rem;
+  --space-16: 1rem;
+  --space-20: 1.25rem;
+  --space-24: 1.5rem;
+  --space-28: 1.75rem;
+  --space-32: 2rem;
+  --space-36: 2.25rem;
+  --space-40: 2.5rem;
+  --space-48: 3rem;
+  --space-56: 3.5rem;
+  --space-64: 4rem;
+  --space-80: 5rem;
+  --space-112: 7rem;
+
+  /* Shadows */
+  --shadow-small: 0px 1px 2px 0px rgba(13, 21, 42, 0.08);
+  --shadow-regular: 0px 2px 4px 0px rgba(13, 21, 42, 0.08);
+  --shadow-medium: 0px 4px 8px 0px rgba(13, 21, 42, 0.08);
+  --shadow-large: 0px 8px 16px 0px rgba(13, 21, 42, 0.08);
+
+  /* Border radius
+   * shadcn 원본은 --radius(10px) 에서 빼는 공식이지만, Upbox 기준값은 2px 이라
+   * 그대로 두면 sm/md 가 0 이하로 무너져 모서리가 아예 깎이지 않았다(조용한 버그).
+   * Upbox 실사용 값(2/4/8px)으로 스케일을 직접 정의한다. */
+  --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;
+}