@hua-labs/ui 2.2.0 → 2.3.0

package/src/styles/landing.css

@@ -15,16 +15,16 @@
 .gradient-bg {
   background: linear-gradient(
     135deg,
-    var(--color-primary, hsl(var(--primary))) 0%,
-    var(--color-accent, hsl(var(--accent-foreground))) 100%
+    var(--color-primary) 0%,
+    var(--color-accent-foreground) 100%
   );
 }
 
 .gradient-bg-soft {
   background: linear-gradient(
     135deg,
-    color-mix(in srgb, var(--color-primary, hsl(var(--primary))) 15%, transparent) 0%,
-    color-mix(in srgb, var(--color-accent, hsl(var(--accent-foreground))) 10%, transparent) 100%
+    color-mix(in srgb, var(--color-primary) 15%, transparent) 0%,
+    color-mix(in srgb, var(--color-accent-foreground) 10%, transparent) 100%
   );
 }
 
@@ -36,8 +36,8 @@
   border-radius: 9999px;
   background: linear-gradient(
     90deg,
-    var(--color-primary, hsl(var(--primary))),
-    var(--color-accent, hsl(var(--accent-foreground)))
+    var(--color-primary),
+    var(--color-accent-foreground)
   );
   margin-bottom: 1.5rem;
   margin-left: auto;
@@ -50,8 +50,8 @@
   border-radius: 9999px;
   background: linear-gradient(
     90deg,
-    var(--color-primary, hsl(var(--primary))),
-    var(--color-accent, hsl(var(--accent-foreground)))
+    var(--color-primary),
+    var(--color-accent-foreground)
   );
   margin-bottom: 1.5rem;
 }
@@ -62,12 +62,12 @@
   background:
     radial-gradient(
       ellipse 80% 60% at 20% 40%,
-      color-mix(in srgb, var(--color-primary, hsl(var(--primary))) 8%, transparent),
+      color-mix(in srgb, var(--color-primary) 8%, transparent),
       transparent
     ),
     radial-gradient(
       ellipse 60% 80% at 80% 60%,
-      color-mix(in srgb, var(--color-primary, hsl(var(--primary))) 5%, transparent),
+      color-mix(in srgb, var(--color-primary) 5%, transparent),
       transparent
     );
 }
@@ -76,12 +76,12 @@
   background:
     radial-gradient(
       ellipse 80% 60% at 80% 30%,
-      color-mix(in srgb, var(--color-accent, hsl(var(--accent-foreground))) 8%, transparent),
+      color-mix(in srgb, var(--color-accent-foreground) 8%, transparent),
       transparent
     ),
     radial-gradient(
       ellipse 60% 80% at 20% 70%,
-      color-mix(in srgb, var(--color-accent, hsl(var(--accent-foreground))) 5%, transparent),
+      color-mix(in srgb, var(--color-accent-foreground) 5%, transparent),
       transparent
     );
 }

package/src/styles/prose.css

@@ -0,0 +1,284 @@
+/**
+ * Prose — Typography styling for rich content areas
+ *
+ * Uses CSS variables for automatic light/dark theme support.
+ * No Tailwind typography plugin dependency.
+ *
+ * @example
+ * import '@hua-labs/ui/styles/prose.css';
+ *
+ * <div class="hua-prose" data-prose-size="lg">
+ *   <h1>Title</h1>
+ *   <p>Paragraph text...</p>
+ * </div>
+ */
+
+/* ── Base ──────────────────────────────────────────────────── */
+.hua-prose {
+  color: var(--color-foreground);
+  max-width: 65ch;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+/* ── Headings ──────────────────────────────────────────────── */
+.hua-prose h1 {
+  font-size: 2.25em;
+  font-weight: 800;
+  line-height: 1.1;
+  margin-top: 0;
+  margin-bottom: 0.9em;
+  color: var(--color-foreground);
+}
+
+.hua-prose h2 {
+  font-size: 1.5em;
+  font-weight: 700;
+  line-height: 1.3;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  color: var(--color-foreground);
+}
+
+.hua-prose h3 {
+  font-size: 1.25em;
+  font-weight: 600;
+  line-height: 1.6;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  color: var(--color-foreground);
+}
+
+.hua-prose h4 {
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1.5;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  color: var(--color-foreground);
+}
+
+.hua-prose h5,
+.hua-prose h6 {
+  font-size: 0.875em;
+  font-weight: 600;
+  line-height: 1.5;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  color: var(--color-foreground);
+}
+
+/* ── Paragraph ─────────────────────────────────────────────── */
+.hua-prose p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  line-height: 1.75;
+}
+
+.hua-prose p:first-child {
+  margin-top: 0;
+}
+
+.hua-prose p:last-child {
+  margin-bottom: 0;
+}
+
+/* ── Links ─────────────────────────────────────────────────── */
+.hua-prose a {
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.hua-prose a:hover {
+  opacity: 0.8;
+}
+
+/* ── Strong / Em ───────────────────────────────────────────── */
+.hua-prose strong {
+  font-weight: 700;
+  color: var(--color-foreground);
+}
+
+.hua-prose em {
+  font-style: italic;
+}
+
+/* ── Lists ─────────────────────────────────────────────────── */
+.hua-prose ul,
+.hua-prose ol {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.hua-prose ul {
+  list-style-type: disc;
+}
+
+.hua-prose ol {
+  list-style-type: decimal;
+}
+
+.hua-prose li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.75;
+}
+
+.hua-prose li > ul,
+.hua-prose li > ol {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+/* ── Blockquote ────────────────────────────────────────────── */
+.hua-prose blockquote {
+  border-left: 0.25rem solid var(--color-border);
+  padding-left: 1em;
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  margin-left: 0;
+  margin-right: 0;
+  font-style: italic;
+  color: var(--color-muted-foreground);
+}
+
+.hua-prose blockquote p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* ── Code (inline) ─────────────────────────────────────────── */
+.hua-prose :not(pre) > code {
+  font-size: 0.875em;
+  font-weight: 600;
+  background: var(--color-muted);
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  color: var(--color-foreground);
+}
+
+/* ── Pre / Code block ──────────────────────────────────────── */
+.hua-prose pre {
+  background: var(--color-muted);
+  padding: 1em;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  font-size: 0.875em;
+  line-height: 1.75;
+  margin-top: 1.75em;
+  margin-bottom: 1.75em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.hua-prose pre code {
+  background: none;
+  padding: 0;
+  font-weight: normal;
+  font-size: inherit;
+  color: inherit;
+  border-radius: 0;
+}
+
+/* ── HR ─────────────────────────────────────────────────────── */
+.hua-prose hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+
+/* ── Images ────────────────────────────────────────────────── */
+.hua-prose img {
+  margin-top: 2em;
+  margin-bottom: 2em;
+  border-radius: 0.5rem;
+  max-width: 100%;
+  height: auto;
+}
+
+/* ── Table ─────────────────────────────────────────────────── */
+.hua-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+}
+
+.hua-prose th,
+.hua-prose td {
+  padding: 0.5em 0.75em;
+  border: 1px solid var(--color-border);
+  text-align: left;
+}
+
+.hua-prose th {
+  font-weight: 600;
+  background: var(--color-muted);
+  color: var(--color-foreground);
+}
+
+.hua-prose td {
+  color: var(--color-foreground);
+}
+
+/* ── First/last child margin reset ─────────────────────────── */
+.hua-prose > *:first-child {
+  margin-top: 0;
+}
+
+.hua-prose > *:last-child {
+  margin-bottom: 0;
+}
+
+/* ── Size variant: sm ──────────────────────────────────────── */
+.hua-prose[data-prose-size="sm"] {
+  font-size: 0.875rem;
+}
+
+.hua-prose[data-prose-size="sm"] h1 {
+  font-size: 1.96875em; /* 2.25 * 0.875 */
+}
+
+.hua-prose[data-prose-size="sm"] h2 {
+  font-size: 1.3125em; /* 1.5 * 0.875 */
+}
+
+.hua-prose[data-prose-size="sm"] h3 {
+  font-size: 1.09375em; /* 1.25 * 0.875 */
+}
+
+/* ── Size variant: lg ──────────────────────────────────────── */
+.hua-prose[data-prose-size="lg"] {
+  font-size: 1.125rem;
+}
+
+.hua-prose[data-prose-size="lg"] h1 {
+  font-size: 2.53125em; /* 2.25 * 1.125 */
+}
+
+.hua-prose[data-prose-size="lg"] h2 {
+  font-size: 1.6875em; /* 1.5 * 1.125 */
+}
+
+.hua-prose[data-prose-size="lg"] h3 {
+  font-size: 1.40625em; /* 1.25 * 1.125 */
+}
+
+/* ── Color variant: gray ───────────────────────────────────── */
+.hua-prose[data-prose-color="gray"] {
+  color: var(--color-muted-foreground);
+}
+
+.hua-prose[data-prose-color="gray"] h1,
+.hua-prose[data-prose-color="gray"] h2,
+.hua-prose[data-prose-color="gray"] h3,
+.hua-prose[data-prose-color="gray"] h4,
+.hua-prose[data-prose-color="gray"] h5,
+.hua-prose[data-prose-color="gray"] h6,
+.hua-prose[data-prose-color="gray"] strong {
+  color: var(--color-foreground);
+}

package/src/styles/recommended-theme.css

@@ -1,18 +1,13 @@
 /**
  * HUA-UI 추천 테마 CSS 변수
  *
- * 이 파일을 앱의 globals.css에 import하세요.
- * HUA UI 컴포넌트는 기본적으로 Tailwind 색상을 직접 사용하므로
- * 이 파일 없이도 동작합니다.
- *
- * Tailwind v4에서 bg-primary, text-foreground 등을 사용하려면
- * 이 파일을 import하세요.
+ * OKLCH 기반 perceptually uniform 팔레트에서 생성.
+ * 다크/라이트 모드: 동일 색상 체감을 위해 light=500 / dark=400 페어링.
  *
  * @example
  * // globals.css
  * @import "tailwindcss";
  * @import "@hua-labs/ui/styles/recommended-theme.css";
- * // @custom-variant dark 자동 포함됨
  */
 
 /* 프레임워크 필수 설정 (다크모드 등) */
@@ -20,84 +15,81 @@
 
 /* Tailwind v4: @theme으로 색상 유틸리티 활성화 */
 @theme {
-  /* HUA 브랜드 컬러 - Teal */
-  --color-primary: hsl(166 78% 30%);
-  --color-primary-foreground: hsl(0 0% 100%);
-  --color-secondary: hsl(210 15% 94%);
-  --color-secondary-foreground: hsl(210 10% 20%);
-  --color-destructive: hsl(0 84% 60%);
-  --color-destructive-foreground: hsl(0 0% 98%);
-  --color-muted: hsl(210 15% 94%);
-  --color-muted-foreground: hsl(210 10% 40%);
-  --color-accent: hsl(226 100% 97%); /* indigo-50 */
-  --color-accent-foreground: hsl(234 89% 74%); /* indigo-400 */
-  --color-card: hsl(0 0% 100%);
-  --color-card-foreground: hsl(210 10% 10%);
-  --color-popover: hsl(0 0% 100%);
-  --color-popover-foreground: hsl(210 10% 10%);
-  --color-background: hsl(210 20% 98%);
-  --color-foreground: hsl(210 10% 10%);
-  --color-border: hsl(210 15% 88%);
-  --color-input: hsl(210 15% 88%);
-  --color-ring: hsl(166 78% 30%);
+  /* Primary — Indigo */
+  --color-primary: #2b6cd6;
+  --color-primary-foreground: #ffffff;
+  /* Secondary — Slate */
+  --color-secondary: #dae2e5;
+  --color-secondary-foreground: #0a161a;
+  /* Destructive — Red */
+  --color-destructive: #ca2c22;
+  --color-destructive-foreground: #ffffff;
+  /* Muted — Slate */
+  --color-muted: #dae2e5;
+  --color-muted-foreground: #62757b;
+  /* Accent — Indigo tint */
+  --color-accent: #e7f0ff;
+  --color-accent-foreground: #1e54a8;
+  /* Surfaces */
+  --color-card: #ffffff;
+  --color-card-foreground: #0a161a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0a161a;
+  --color-background: #eaf1f3;
+  --color-foreground: #0a161a;
+  /* Borders & Ring */
+  --color-border: #bac6ca;
+  --color-input: #bac6ca;
+  --color-ring: #2b6cd6;
 
   /* Semantic status colors */
-  --color-success: hsl(142 71% 45%);
-  --color-success-foreground: hsl(0 0% 100%);
-  --color-warning: hsl(48 96% 53%);
-  --color-warning-foreground: hsl(28 80% 20%);
-  --color-info: hsl(239 84% 67%);
-  --color-info-foreground: hsl(0 0% 100%);
+  --color-success: #00874c;
+  --color-success-foreground: #ffffff;
+  --color-warning: #be7b00;
+  --color-warning-foreground: #ffffff;
+  --color-info: #0079b1;
+  --color-info-foreground: #ffffff;
 }
 
 @layer base {
   :root {
     /* ========================================
-     * HUA-UI 시그니처 컬러: Teal
+     * OKLCH Palette — Light Mode
+     * Primary: Indigo | Accent: Indigo tint
      * ======================================== */
 
-    /* 프라이머리 - 틸 (HUA Labs 시그니처) */
-    --primary: 166 78% 30%;
-    --primary-foreground: 0 0% 100%;
+    --primary: #2b6cd6;
+    --primary-foreground: #ffffff;
 
-    /* 세컨더리 */
-    --secondary: 210 15% 94%;
-    --secondary-foreground: 210 10% 20%;
+    --secondary: #dae2e5;
+    --secondary-foreground: #0a161a;
 
-    /* 악센트 - 인디고 */
-    --accent: 226 100% 97%; /* indigo-50 */
-    --accent-foreground: 234 89% 74%; /* indigo-400 */
+    --accent: #e7f0ff;
+    --accent-foreground: #1e54a8;
 
-    /* 배경/전경 */
-    --background: 210 20% 98%;
-    --foreground: 210 10% 10%;
+    --background: #eaf1f3;
+    --foreground: #0a161a;
 
-    /* 카드 */
-    --card: 0 0% 100%;
-    --card-foreground: 210 10% 10%;
+    --card: #ffffff;
+    --card-foreground: #0a161a;
 
-    /* 팝오버 */
-    --popover: 0 0% 100%;
-    --popover-foreground: 210 10% 10%;
+    --popover: #ffffff;
+    --popover-foreground: #0a161a;
 
-    /* Muted */
-    --muted: 210 15% 94%;
-    --muted-foreground: 210 10% 40%;
+    --muted: #dae2e5;
+    --muted-foreground: #62757b;
 
-    /* 경고/에러 */
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive: #ca2c22;
+    --destructive-foreground: #ffffff;
 
-    /* 보더/인풋 */
-    --border: 210 15% 88%;
-    --input: 210 15% 88%;
-    --ring: 166 78% 30%;
+    --border: #bac6ca;
+    --input: #bac6ca;
+    --ring: #2b6cd6;
 
     /* ========================================
-     * HUA-UI 디자인 토큰
+     * 디자인 토큰
      * ======================================== */
 
-    /* 보더 래디우스 */
     --radius: 0.5rem;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -106,7 +98,6 @@
     --radius-2xl: 1rem;
     --radius-full: 9999px;
 
-    /* 스페이싱 */
     --spacing-xs: 0.25rem;
     --spacing-sm: 0.5rem;
     --spacing-md: 1rem;
@@ -114,15 +105,14 @@
     --spacing-xl: 2rem;
     --spacing-2xl: 3rem;
 
-    /* HUA 브랜드 확장 컬러 */
-    --hua-primary: 166 78% 30%;
-    --hua-secondary: 168 64% 40%;
-    --hua-accent: 187 92% 43%;
+    /* HUA 브랜드 확장 (OKLCH palette) */
+    --hua-primary: #2b6cd6;    /* indigo-500 */
+    --hua-secondary: #62757b;  /* slate-500 */
+    --hua-accent: #0079b1;     /* blue-500 */
 
     /* 마이크로 모션 */
     --hua-motion-duration: 180ms;
     --hua-motion-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
-
   }
 
   /* CodeBlock 신택스 하이라이팅은 별도 파일:
@@ -131,79 +121,71 @@
 
   .dark {
     /* ========================================
-     * 다크 모드 컬러
+     * OKLCH Palette — Dark Mode
+     * light=500 → dark=400 페어링 (체감 동일 색상)
      * ======================================== */
 
-    /* Tailwind v4 유틸리티 오버라이드 (bg-primary 등) */
-    --color-primary: hsl(166 70% 45%);
-    --color-primary-foreground: hsl(0 0% 100%);
-    --color-secondary: hsl(210 15% 15%);
-    --color-secondary-foreground: hsl(210 10% 90%);
-    --color-destructive: hsl(0 62% 50%);
-    --color-destructive-foreground: hsl(0 0% 98%);
-    --color-muted: hsl(210 15% 15%);
-    --color-muted-foreground: hsl(210 10% 60%);
-    --color-accent: hsl(234 89% 11%);
-    --color-accent-foreground: hsl(226 100% 94%);
-    --color-card: hsl(210 15% 9%);
-    --color-card-foreground: hsl(210 10% 95%);
-    --color-popover: hsl(210 15% 9%);
-    --color-popover-foreground: hsl(210 10% 95%);
-    --color-background: hsl(210 15% 6%);
-    --color-foreground: hsl(210 10% 95%);
-    --color-border: hsl(210 15% 18%);
-    --color-input: hsl(210 15% 18%);
-    --color-ring: hsl(166 70% 45%);
-
-    /* Semantic status colors (dark) */
-    --color-success: hsl(142 71% 55%);
-    --color-success-foreground: hsl(0 0% 100%);
-    --color-warning: hsl(48 96% 60%);
-    --color-warning-foreground: hsl(28 80% 10%);
-    --color-info: hsl(239 84% 74%);
-    --color-info-foreground: hsl(0 0% 100%);
-
-    /* 레거시 CSS vars (hsl(var(--*)) 패턴) */
-    --primary: 166 70% 45%;
-    --primary-foreground: 0 0% 100%;
-
-    /* 세컨더리 */
-    --secondary: 210 15% 15%;
-    --secondary-foreground: 210 10% 90%;
-
-    /* 악센트 - 인디고 (다크) */
-    --accent: 234 89% 11%; /* indigo-900 */
-    --accent-foreground: 226 100% 94%; /* indigo-100 */
-
-    /* 배경/전경 */
-    --background: 210 15% 6%;
-    --foreground: 210 10% 95%;
-
-    /* 카드 */
-    --card: 210 15% 9%;
-    --card-foreground: 210 10% 95%;
-
-    /* 팝오버 */
-    --popover: 210 15% 9%;
-    --popover-foreground: 210 10% 95%;
-
-    /* Muted */
-    --muted: 210 15% 15%;
-    --muted-foreground: 210 10% 60%;
-
-    /* 경고/에러 */
-    --destructive: 0 62% 50%;
-    --destructive-foreground: 0 0% 98%;
-
-    /* 보더/인풋 */
-    --border: 210 15% 18%;
-    --input: 210 15% 18%;
-    --ring: 166 70% 45%;
-
-    /* HUA 브랜드 확장 컬러 (다크) */
-    --hua-primary: 166 70% 45%;
-    --hua-secondary: 168 55% 50%;
-    --hua-accent: 187 80% 55%;
+    --color-primary: #4988f4;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #1e2b30;
+    --color-secondary-foreground: #eaf1f3;
+    --color-destructive: #ea4e3e;
+    --color-destructive-foreground: #ffffff;
+    --color-muted: #1e2b30;
+    --color-muted-foreground: #7c9096;
+    --color-accent: #010a1c;
+    --color-accent-foreground: #d1e1ff;
+    --color-card: #121418;
+    --color-card-foreground: #eaf1f3;
+    --color-popover: #121418;
+    --color-popover-foreground: #eaf1f3;
+    --color-background: #080a0e;
+    --color-foreground: #eaf1f3;
+    --color-border: #334247;
+    --color-input: #334247;
+    --color-ring: #4988f4;
+
+    /* Semantic status colors (dark — shade 400) */
+    --color-success: #0fa65f;
+    --color-success-foreground: #ffffff;
+    --color-warning: #da9838;
+    --color-warning-foreground: #0a161a;
+    --color-info: #0095d9;
+    --color-info-foreground: #ffffff;
+
+    /* Legacy CSS vars */
+    --primary: #4988f4;
+    --primary-foreground: #ffffff;
+
+    --secondary: #1e2b30;
+    --secondary-foreground: #eaf1f3;
+
+    --accent: #010a1c;
+    --accent-foreground: #d1e1ff;
+
+    --background: #080a0e;
+    --foreground: #eaf1f3;
+
+    --card: #121418;
+    --card-foreground: #eaf1f3;
+
+    --popover: #121418;
+    --popover-foreground: #eaf1f3;
+
+    --muted: #1e2b30;
+    --muted-foreground: #7c9096;
+
+    --destructive: #ea4e3e;
+    --destructive-foreground: #ffffff;
+
+    --border: #334247;
+    --input: #334247;
+    --ring: #4988f4;
+
+    /* HUA 브랜드 확장 (다크) */
+    --hua-primary: #4988f4;    /* indigo-400 */
+    --hua-secondary: #7c9096;  /* slate-400 */
+    --hua-accent: #0095d9;     /* blue-400 */
   }
 }