@likelion-design/ui 1.0.28-beta.0 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likelion-design/ui",
-  "version": "1.0.28-beta.0",
+  "version": "1.0.29",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -13,14 +13,16 @@
     },
     "./tailwind-preset": "./dist/tailwind-preset.js",
     "./styles.css": "./dist/index.css",
-    "./colors.css": "./dist/colors.css"
+    "./colors.css": "./dist/colors.css",
+    "./theme.css": "./tailwind.theme.css"
   },
   "sideEffects": [
     "**/*.css"
   ],
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "tailwind.theme.css"
   ],
   "scripts": {
     "build": "npm run build:tokens && tsup",
@@ -35,6 +37,7 @@
     "mcp:build": "cd mcp-server && npm run build:publish",
     "publish:all": "npm run build && npm publish --access public && npm run mcp:sync-version && npm run mcp:build && cd mcp-server && npm publish --access public",
     "publish:beta": "npm run build && npm publish --access public --tag beta && npm run mcp:sync-version && npm run mcp:build && cd mcp-server && npm publish --access public --tag beta",
+    "version": "npm run mcp:sync-version && git add mcp-server/package.json",
     "postversion": "npm run mcp:sync-version"
   },
   "engines": {

package/tailwind.theme.css

@@ -0,0 +1,635 @@
+/**
+ * ⚠️ 이 파일은 자동 생성됩니다. 직접 수정하지 마세요.
+ * 생성 스크립트: tokens/scripts/generate-tailwind-preset.mjs
+ * 실행: npm run build:tokens
+ *
+ * Tailwind v4 소비자 프로젝트에서 사용:
+ *   @import "tailwindcss";
+ *   @import "@likelion-design/ui/styles.css";
+ *   @import "@likelion-design/ui/theme.css";
+ */
+
+@theme {
+  /* colors → text-{name}, bg-{name}, border-{name} */
+  --color-basic-white: var(--color-basic-white);
+  --color-basic-black: var(--color-basic-black);
+  --color-basic-opacity-neutral-light-0: var(--color-basic-opacity-neutral-light-0);
+  --color-basic-opacity-neutral-light-2: var(--color-basic-opacity-neutral-light-2);
+  --color-basic-opacity-neutral-light-4: var(--color-basic-opacity-neutral-light-4);
+  --color-basic-opacity-neutral-light-6: var(--color-basic-opacity-neutral-light-6);
+  --color-basic-opacity-neutral-light-8: var(--color-basic-opacity-neutral-light-8);
+  --color-basic-opacity-neutral-light-16: var(--color-basic-opacity-neutral-light-16);
+  --color-basic-opacity-neutral-light-24: var(--color-basic-opacity-neutral-light-24);
+  --color-basic-opacity-neutral-light-48: var(--color-basic-opacity-neutral-light-48);
+  --color-basic-opacity-neutral-light-56: var(--color-basic-opacity-neutral-light-56);
+  --color-basic-opacity-neutral-light-72: var(--color-basic-opacity-neutral-light-72);
+  --color-basic-opacity-neutral-light-80: var(--color-basic-opacity-neutral-light-80);
+  --color-basic-opacity-neutral-light-90: var(--color-basic-opacity-neutral-light-90);
+  --color-basic-opacity-neutral-dark-0: var(--color-basic-opacity-neutral-dark-0);
+  --color-basic-opacity-neutral-dark-2: var(--color-basic-opacity-neutral-dark-2);
+  --color-basic-opacity-neutral-dark-4: var(--color-basic-opacity-neutral-dark-4);
+  --color-basic-opacity-neutral-dark-6: var(--color-basic-opacity-neutral-dark-6);
+  --color-basic-opacity-neutral-dark-8: var(--color-basic-opacity-neutral-dark-8);
+  --color-basic-opacity-neutral-dark-16: var(--color-basic-opacity-neutral-dark-16);
+  --color-basic-opacity-neutral-dark-24: var(--color-basic-opacity-neutral-dark-24);
+  --color-basic-opacity-neutral-dark-48: var(--color-basic-opacity-neutral-dark-48);
+  --color-basic-opacity-neutral-dark-56: var(--color-basic-opacity-neutral-dark-56);
+  --color-basic-opacity-neutral-dark-72: var(--color-basic-opacity-neutral-dark-72);
+  --color-basic-opacity-neutral-dark-80: var(--color-basic-opacity-neutral-dark-80);
+  --color-basic-opacity-neutral-dark-90: var(--color-basic-opacity-neutral-dark-90);
+  --color-basic-opacity-primary-0: var(--color-basic-opacity-primary-0);
+  --color-basic-opacity-primary-2: var(--color-basic-opacity-primary-2);
+  --color-basic-opacity-primary-4: var(--color-basic-opacity-primary-4);
+  --color-basic-opacity-primary-6: var(--color-basic-opacity-primary-6);
+  --color-basic-opacity-primary-8: var(--color-basic-opacity-primary-8);
+  --color-basic-opacity-primary-16: var(--color-basic-opacity-primary-16);
+  --color-basic-opacity-primary-24: var(--color-basic-opacity-primary-24);
+  --color-basic-opacity-primary-48: var(--color-basic-opacity-primary-48);
+  --color-basic-opacity-primary-56: var(--color-basic-opacity-primary-56);
+  --color-basic-opacity-primary-72: var(--color-basic-opacity-primary-72);
+  --color-basic-opacity-primary-80: var(--color-basic-opacity-primary-80);
+  --color-basic-opacity-primary-90: var(--color-basic-opacity-primary-90);
+  --color-red-50: var(--color-red-50);
+  --color-red-100: var(--color-red-100);
+  --color-red-200: var(--color-red-200);
+  --color-red-300: var(--color-red-300);
+  --color-red-400: var(--color-red-400);
+  --color-red-500: var(--color-red-500);
+  --color-red-600: var(--color-red-600);
+  --color-red-700: var(--color-red-700);
+  --color-red-800: var(--color-red-800);
+  --color-red-900: var(--color-red-900);
+  --color-pink-50: var(--color-pink-50);
+  --color-pink-100: var(--color-pink-100);
+  --color-pink-200: var(--color-pink-200);
+  --color-pink-300: var(--color-pink-300);
+  --color-pink-400: var(--color-pink-400);
+  --color-pink-500: var(--color-pink-500);
+  --color-pink-600: var(--color-pink-600);
+  --color-pink-700: var(--color-pink-700);
+  --color-pink-800: var(--color-pink-800);
+  --color-pink-900: var(--color-pink-900);
+  --color-blue-50: var(--color-blue-50);
+  --color-blue-100: var(--color-blue-100);
+  --color-blue-200: var(--color-blue-200);
+  --color-blue-300: var(--color-blue-300);
+  --color-blue-400: var(--color-blue-400);
+  --color-blue-500: var(--color-blue-500);
+  --color-blue-600: var(--color-blue-600);
+  --color-blue-700: var(--color-blue-700);
+  --color-blue-800: var(--color-blue-800);
+  --color-blue-900: var(--color-blue-900);
+  --color-yellow-50: var(--color-yellow-50);
+  --color-yellow-100: var(--color-yellow-100);
+  --color-yellow-200: var(--color-yellow-200);
+  --color-yellow-300: var(--color-yellow-300);
+  --color-yellow-400: var(--color-yellow-400);
+  --color-yellow-500: var(--color-yellow-500);
+  --color-yellow-600: var(--color-yellow-600);
+  --color-yellow-700: var(--color-yellow-700);
+  --color-yellow-800: var(--color-yellow-800);
+  --color-yellow-900: var(--color-yellow-900);
+  --color-green-50: var(--color-green-50);
+  --color-green-100: var(--color-green-100);
+  --color-green-200: var(--color-green-200);
+  --color-green-300: var(--color-green-300);
+  --color-green-400: var(--color-green-400);
+  --color-green-500: var(--color-green-500);
+  --color-green-600: var(--color-green-600);
+  --color-green-700: var(--color-green-700);
+  --color-green-800: var(--color-green-800);
+  --color-green-900: var(--color-green-900);
+  --color-light-green-50: var(--color-light-green-50);
+  --color-light-green-100: var(--color-light-green-100);
+  --color-light-green-200: var(--color-light-green-200);
+  --color-light-green-300: var(--color-light-green-300);
+  --color-light-green-400: var(--color-light-green-400);
+  --color-light-green-500: var(--color-light-green-500);
+  --color-light-green-600: var(--color-light-green-600);
+  --color-light-green-700: var(--color-light-green-700);
+  --color-light-green-800: var(--color-light-green-800);
+  --color-light-green-900: var(--color-light-green-900);
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-850: var(--color-gray-850);
+  --color-gray-900: var(--color-gray-900);
+  --color-gray-950: var(--color-gray-950);
+  --color-purple-50: var(--color-purple-50);
+  --color-purple-100: var(--color-purple-100);
+  --color-purple-200: var(--color-purple-200);
+  --color-purple-300: var(--color-purple-300);
+  --color-purple-400: var(--color-purple-400);
+  --color-purple-500: var(--color-purple-500);
+  --color-purple-600: var(--color-purple-600);
+  --color-purple-700: var(--color-purple-700);
+  --color-purple-800: var(--color-purple-800);
+  --color-purple-900: var(--color-purple-900);
+  --color-primary-50: var(--color-primary-50);
+  --color-primary-100: var(--color-primary-100);
+  --color-primary-200: var(--color-primary-200);
+  --color-primary-300: var(--color-primary-300);
+  --color-primary-400: var(--color-primary-400);
+  --color-primary-500: var(--color-primary-500);
+  --color-primary-600: var(--color-primary-600);
+  --color-primary-700: var(--color-primary-700);
+  --color-primary-800: var(--color-primary-800);
+  --color-primary-900: var(--color-primary-900);
+  --color-static-black: var(--color-static-black);
+  --color-static-white: var(--color-static-white);
+  --color-fg-primary: var(--color-semantic-fg-primary);
+  --color-fg-pressed: var(--color-semantic-fg-pressed);
+  --color-fg-primary-inverted: var(--color-semantic-fg-primary-inverted);
+  --color-fg-strong: var(--color-semantic-fg-strong);
+  --color-fg-normal: var(--color-semantic-fg-normal);
+  --color-fg-neutral: var(--color-semantic-fg-neutral);
+  --color-fg-alternative: var(--color-semantic-fg-alternative);
+  --color-fg-assistive: var(--color-semantic-fg-assistive);
+  --color-fg-disabled: var(--color-semantic-fg-disabled);
+  --color-fg-yellow: var(--color-semantic-fg-yellow);
+  --color-fg-lightgreen: var(--color-semantic-fg-lightgreen);
+  --color-fg-green: var(--color-semantic-fg-green);
+  --color-fg-blue: var(--color-semantic-fg-blue);
+  --color-fg-purple: var(--color-semantic-fg-purple);
+  --color-fg-pink: var(--color-semantic-fg-pink);
+  --color-fg-red: var(--color-semantic-fg-red);
+  --color-fg-white: var(--color-semantic-fg-white);
+  --color-fg-black: var(--color-semantic-fg-black);
+  --color-info-negative: var(--color-semantic-info-negative);
+  --color-info-positive: var(--color-semantic-info-positive);
+  --color-info-white: var(--color-semantic-info-white);
+  --color-info-black: var(--color-semantic-info-black);
+  --color-style-gradation-primary: var(--color-semantic-style-gradation-primary);
+  --color-style-gradation-dark: var(--color-semantic-style-gradation-dark);
+  --color-style-gradation-black: var(--color-semantic-style-gradation-black);
+  --color-style-gradation-white: var(--color-semantic-style-gradation-white);
+  --color-style-dim: var(--color-semantic-style-dim);
+
+  /* spacing → p-{name}, m-{name}, gap-{name}, w-{name} 등 */
+  --spacing-1: var(--spacing-primitive-1);
+  --spacing-2: var(--spacing-primitive-2);
+  --spacing-3: var(--spacing-primitive-3);
+  --spacing-4: var(--spacing-primitive-4);
+  --spacing-5: var(--spacing-primitive-5);
+  --spacing-6: var(--spacing-primitive-6);
+  --spacing-8: var(--spacing-primitive-8);
+  --spacing-10: var(--spacing-primitive-10);
+  --spacing-12: var(--spacing-primitive-12);
+  --spacing-16: var(--spacing-primitive-16);
+  --spacing-20: var(--spacing-primitive-20);
+  --spacing-25: var(--spacing-primitive-25);
+  --spacing-0_5: var(--spacing-primitive-0_5);
+  --spacing-2_5: var(--spacing-primitive-2_5);
+
+  /* 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 {
+  background-color: var(--color-semantic-bg-normal);
+}
+
+@utility bg-normal-hovered {
+  background-color: var(--color-semantic-bg-normal-hovered);
+}
+
+@utility bg-normal-alternative {
+  background-color: var(--color-semantic-bg-normal-alternative);
+}
+
+@utility bg-normal-assistive {
+  background-color: var(--color-semantic-bg-normal-assistive);
+}
+
+@utility bg-disabled {
+  background-color: var(--color-semantic-bg-disabled);
+}
+
+@utility bg-disabled-dark {
+  background-color: var(--color-semantic-bg-disabled-dark);
+}
+
+@utility bg-inverted {
+  background-color: var(--color-semantic-bg-inverted);
+}
+
+@utility bg-inverted-hovered {
+  background-color: var(--color-semantic-bg-inverted-hovered);
+}
+
+@utility bg-primary {
+  background-color: var(--color-semantic-bg-primary);
+}
+
+@utility bg-primary-hovered {
+  background-color: var(--color-semantic-bg-primary-hovered);
+}
+
+@utility bg-primary-disabled {
+  background-color: var(--color-semantic-bg-primary-disabled);
+}
+
+@utility bg-primary-weak {
+  background-color: var(--color-semantic-bg-primary-weak);
+}
+
+@utility bg-lightgreen {
+  background-color: var(--color-semantic-bg-lightgreen);
+}
+
+@utility bg-yellow {
+  background-color: var(--color-semantic-bg-yellow);
+}
+
+@utility bg-green {
+  background-color: var(--color-semantic-bg-green);
+}
+
+@utility bg-blue {
+  background-color: var(--color-semantic-bg-blue);
+}
+
+@utility bg-purple {
+  background-color: var(--color-semantic-bg-purple);
+}
+
+@utility bg-pink {
+  background-color: var(--color-semantic-bg-pink);
+}
+
+@utility bg-red {
+  background-color: var(--color-semantic-bg-red);
+}
+
+@utility bg-white {
+  background-color: var(--color-semantic-bg-white);
+}
+
+@utility bg-black {
+  background-color: var(--color-semantic-bg-black);
+}
+
+@utility bg-weak-primary {
+  background-color: var(--color-semantic-bg-weak-primary);
+}
+
+@utility bg-weak-primary-hovered {
+  background-color: var(--color-semantic-bg-weak-primary-hovered);
+}
+
+@utility bg-weak-neutral-light {
+  background-color: var(--color-semantic-bg-weak-neutral-light);
+}
+
+@utility bg-weak-neutral-light-hovered {
+  background-color: var(--color-semantic-bg-weak-neutral-light-hovered);
+}
+
+@utility bg-weak-neutral-dark {
+  background-color: var(--color-semantic-bg-weak-neutral-dark);
+}
+
+@utility bg-weak-neutral-dark-hovered {
+  background-color: var(--color-semantic-bg-weak-neutral-dark-hovered);
+}
+
+/* ── Border Color 유틸리티 (v3 borderColor 키와 동일) ── */
+
+@utility border-primary {
+  border-color: var(--color-semantic-border-primary);
+}
+
+@utility border-strong {
+  border-color: var(--color-semantic-border-strong);
+}
+
+@utility border-normal {
+  border-color: var(--color-semantic-border-normal);
+}
+
+@utility border-weak {
+  border-color: var(--color-semantic-border-weak);
+}
+
+@utility border-white {
+  border-color: var(--color-semantic-border-white);
+}
+
+@utility border-black {
+  border-color: var(--color-semantic-border-black);
+}
+
+@utility border-inverted {
+  border-color: var(--color-semantic-border-inverted);
+}
+
+@utility border-inverted-strong {
+  border-color: var(--color-semantic-border-inverted-strong);
+}
+
+/* ── Typography 복합 유틸리티 ── */
+/* display-d1~d4, heading-h1~h6, subtitle-p1~p3, body-p1~p5 */
+
+@utility display-d1 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-display-d1);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility display-d2 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-display-d2);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility display-d3 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-display-d3);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility display-d4 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-display-d4);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility heading-h1 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-heading-h1);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility heading-h2 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-heading-h2);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility heading-h3 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-heading-h3);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility heading-h4 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-heading-h4);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility heading-h5 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-heading-h5);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility heading-h6 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-heading-h6);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-normal);
+}
+
+@utility body-p1 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-body-p1);
+  font-weight: 400;
+  line-height: 1.6;
+  letter-spacing: var(--font-primitive-letter-spacing-tight);
+}
+
+@utility body-p2 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-body-p2);
+  font-weight: 400;
+  line-height: 1.6;
+  letter-spacing: var(--font-primitive-letter-spacing-tight);
+}
+
+@utility body-p3 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-body-p3);
+  font-weight: 400;
+  line-height: 1.6;
+  letter-spacing: var(--font-primitive-letter-spacing-tight);
+}
+
+@utility body-p4 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-body-p4);
+  font-weight: 400;
+  line-height: 1.6;
+  letter-spacing: var(--font-primitive-letter-spacing-tight);
+}
+
+@utility body-p5 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-body-p5);
+  font-weight: 400;
+  line-height: 1.6;
+  letter-spacing: var(--font-primitive-letter-spacing-tight);
+}
+
+@utility subtitle-p1 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-body-p1);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-tight);
+}
+
+@utility subtitle-p2 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-body-p2);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: var(--font-primitive-letter-spacing-tight);
+}
+
+@utility subtitle-p3 {
+  font-family: var(--font-primitive-familly-font-familly), "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-size: var(--font-primitive-size-body-p3);
+  font-weight: 600;
+  line-height: 1.6;
+  letter-spacing: var(--font-primitive-letter-spacing-tight);
+}