@likelion-design/ui 1.0.28 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likelion-design/ui",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/tailwind.theme.css

@@ -10,38 +10,6 @@
  */
 
 @theme {
-  /* fontSize → text-{name} */
-  --font-size-display-d1: var(--font-primitive-size-display-d1);
-  --font-size-display-d2: var(--font-primitive-size-display-d2);
-  --font-size-display-d3: var(--font-primitive-size-display-d3);
-  --font-size-display-d4: var(--font-primitive-size-display-d4);
-  --font-size-heading-h1: var(--font-primitive-size-heading-h1);
-  --font-size-heading-h2: var(--font-primitive-size-heading-h2);
-  --font-size-heading-h3: var(--font-primitive-size-heading-h3);
-  --font-size-heading-h4: var(--font-primitive-size-heading-h4);
-  --font-size-heading-h5: var(--font-primitive-size-heading-h5);
-  --font-size-heading-h6: var(--font-primitive-size-heading-h6);
-  --font-size-body-p1: var(--font-primitive-size-body-p1);
-  --font-size-body-p2: var(--font-primitive-size-body-p2);
-  --font-size-body-p3: var(--font-primitive-size-body-p3);
-  --font-size-body-p4: var(--font-primitive-size-body-p4);
-  --font-size-body-p5: var(--font-primitive-size-body-p5);
-
-  /* fontWeight → font-{name} */
-  --font-weight-extrabold: var(--font-primitive-weight-extrabold);
-  --font-weight-bold: var(--font-primitive-weight-bold);
-  --font-weight-semibold: var(--font-primitive-weight-semibold);
-  --font-weight-medium: var(--font-primitive-weight-medium);
-  --font-weight-regular: var(--font-primitive-weight-regular);
-
-  /* fontFamily → font-{name} */
-  --font-family-font-familly: var(--font-primitive-familly-font-familly);
-
-  /* letterSpacing → tracking-{name} */
-  --letter-spacing-tight: var(--font-primitive-letter-spacing-tight);
-  --letter-spacing-normal: var(--font-primitive-letter-spacing-normal);
-  --letter-spacing-loose: var(--font-primitive-letter-spacing-loose);
-
   /* colors → text-{name}, bg-{name}, border-{name} */
   --color-basic-white: var(--color-basic-white);
   --color-basic-black: var(--color-basic-black);
@@ -219,25 +187,162 @@
   --spacing-0_5: var(--spacing-primitive-0_5);
   --spacing-2_5: var(--spacing-primitive-2_5);
 
-  /* borderRadius → rounded-{name} */
-  --radius-1: var(--radius-primitive-1);
-  --radius-2: var(--radius-primitive-2);
-  --radius-3: var(--radius-primitive-3);
-  --radius-4: var(--radius-primitive-4);
-  --radius-5: var(--radius-primitive-5);
-  --radius-6: var(--radius-primitive-6);
-  --radius-0_5: var(--radius-primitive-0_5);
-  --radius-1_5: var(--radius-primitive-1_5);
-  --radius-2_5: var(--radius-primitive-2_5);
-  --radius-3_5: var(--radius-primitive-3_5);
-  --radius-full: var(--radius-primitive-full);
-
   /* breakpoints → 반응형 prefix (mo:, tb:, pc:) */
   --breakpoint-mo: 375px;
   --breakpoint-tb: 744px;
   --breakpoint-pc: 1280px;
 }
 
+/* ── fontSize → text-{name} ── */
+
+@utility text-display-d1 {
+  font-size: var(--font-primitive-size-display-d1);
+}
+
+@utility text-display-d2 {
+  font-size: var(--font-primitive-size-display-d2);
+}
+
+@utility text-display-d3 {
+  font-size: var(--font-primitive-size-display-d3);
+}
+
+@utility text-display-d4 {
+  font-size: var(--font-primitive-size-display-d4);
+}
+
+@utility text-heading-h1 {
+  font-size: var(--font-primitive-size-heading-h1);
+}
+
+@utility text-heading-h2 {
+  font-size: var(--font-primitive-size-heading-h2);
+}
+
+@utility text-heading-h3 {
+  font-size: var(--font-primitive-size-heading-h3);
+}
+
+@utility text-heading-h4 {
+  font-size: var(--font-primitive-size-heading-h4);
+}
+
+@utility text-heading-h5 {
+  font-size: var(--font-primitive-size-heading-h5);
+}
+
+@utility text-heading-h6 {
+  font-size: var(--font-primitive-size-heading-h6);
+}
+
+@utility text-body-p1 {
+  font-size: var(--font-primitive-size-body-p1);
+}
+
+@utility text-body-p2 {
+  font-size: var(--font-primitive-size-body-p2);
+}
+
+@utility text-body-p3 {
+  font-size: var(--font-primitive-size-body-p3);
+}
+
+@utility text-body-p4 {
+  font-size: var(--font-primitive-size-body-p4);
+}
+
+@utility text-body-p5 {
+  font-size: var(--font-primitive-size-body-p5);
+}
+
+/* ── fontWeight → font-{name} ── */
+
+@utility font-extrabold {
+  font-weight: var(--font-primitive-weight-extrabold);
+}
+
+@utility font-bold {
+  font-weight: var(--font-primitive-weight-bold);
+}
+
+@utility font-semibold {
+  font-weight: var(--font-primitive-weight-semibold);
+}
+
+@utility font-medium {
+  font-weight: var(--font-primitive-weight-medium);
+}
+
+@utility font-regular {
+  font-weight: var(--font-primitive-weight-regular);
+}
+
+/* ── fontFamily → font-{name} ── */
+
+@utility font-font-familly {
+  font-family: var(--font-primitive-familly-font-familly);
+}
+
+/* ── letterSpacing → tracking-{name} ── */
+
+@utility tracking-tight {
+  letter-spacing: var(--font-primitive-letter-spacing-tight);
+}
+
+@utility tracking-normal {
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility tracking-loose {
+  letter-spacing: var(--font-primitive-letter-spacing-loose);
+}
+
+/* ── borderRadius → rounded-{name} ── */
+
+@utility rounded-1 {
+  border-radius: var(--radius-primitive-1);
+}
+
+@utility rounded-2 {
+  border-radius: var(--radius-primitive-2);
+}
+
+@utility rounded-3 {
+  border-radius: var(--radius-primitive-3);
+}
+
+@utility rounded-4 {
+  border-radius: var(--radius-primitive-4);
+}
+
+@utility rounded-5 {
+  border-radius: var(--radius-primitive-5);
+}
+
+@utility rounded-6 {
+  border-radius: var(--radius-primitive-6);
+}
+
+@utility rounded-0_5 {
+  border-radius: var(--radius-primitive-0_5);
+}
+
+@utility rounded-1_5 {
+  border-radius: var(--radius-primitive-1_5);
+}
+
+@utility rounded-2_5 {
+  border-radius: var(--radius-primitive-2_5);
+}
+
+@utility rounded-3_5 {
+  border-radius: var(--radius-primitive-3_5);
+}
+
+@utility rounded-full {
+  border-radius: var(--radius-primitive-full);
+}
+
 /* ── Background Color 유틸리티 (v3 backgroundColor 키와 동일) ── */
 
 @utility bg-normal {