@petnow/ui 3.0.3 → 4.0.0

package/petnow-design-system-v1.css

@@ -569,312 +569,255 @@
   --color-text-base-neutral-3: var(--text-base-neutral-3);
   --color-text-base-neutral-4: var(--text-base-neutral-4);
   --color-text-base-neutral-5: var(--text-base-neutral-5);
-
-  /* ===== TYPOGRAPHY TOKENS (Tailwind utilities string) =====
-  Tainwind Intellisense 자동완성을 위한 부분
-   */
-  --text-display-96-bold: "text-[96px] leading-normal tracking-[0] font-bold";
-  --text-display-96-medium: "text-[96px] leading-normal tracking-[0] font-medium";
-
-  --text-display-72-bold: "text-[72px] leading-normal tracking-[0] font-bold";
-  --text-display-72-medium: "text-[72px] leading-normal tracking-[0] font-medium";
-
-  --text-display-60-bold: "text-[60px] leading-normal tracking-[0] font-bold";
-  --text-display-60-medium: "text-[60px] leading-normal tracking-[0] font-medium";
-
-  --text-headline-48-bold: "text-[48px] leading-normal tracking-[0] font-bold";
-  --text-headline-48-medium: "text-[48px] leading-normal tracking-[0] font-medium";
-  --text-headline-48-regular: "text-[48px] leading-normal tracking-[0] font-normal";
-
-  --text-headline-42-bold: "text-[42px] leading-normal tracking-[0] font-bold";
-  --text-headline-42-medium: "text-[42px] leading-normal tracking-[0] font-medium";
-  --text-headline-42-regular: "text-[42px] leading-normal tracking-[0] font-normal";
-
-  --text-headline-36-bold: "text-[36px] leading-normal tracking-[0] font-bold";
-  --text-headline-36-medium: "text-[36px] leading-normal tracking-[0] font-medium";
-  --text-headline-36-regular: "text-[36px] leading-normal tracking-[0] font-normal";
-
-  --text-title-28-bold: "text-[28px] leading-normal tracking-[0] font-bold";
-  --text-title-28-medium: "text-[28px] leading-normal tracking-[0] font-medium";
-  --text-title-28-regular: "text-[28px] leading-normal tracking-[0] font-normal";
-
-  --text-title-24-bold: "text-[24px] leading-normal tracking-[0] font-bold";
-  --text-title-24-medium: "text-[24px] leading-normal tracking-[0] font-medium";
-  --text-title-24-regular: "text-[24px] leading-normal tracking-[0] font-normal";
-
-  --text-title-20-bold: "text-[20px] leading-normal tracking-[0] font-bold";
-  --text-title-20-medium: "text-[20px] leading-normal tracking-[0] font-medium";
-  --text-title-20-regular: "text-[20px] leading-normal tracking-[0] font-normal";
-
-  --text-title-18-bold: "text-[18px] leading-normal tracking-[0] font-bold";
-  --text-title-18-medium: "text-[18px] leading-normal tracking-[0] font-medium";
-  --text-title-18-regular: "text-[18px] leading-normal tracking-[0] font-normal";
-
-  --text-title-16-bold: "text-[16px] leading-normal tracking-[0] font-bold";
-  --text-title-14-bold: "text-[14px] leading-normal tracking-[0] font-bold";
-
-  --text-body-16-medium: "text-[16px] leading-normal tracking-[0] font-medium";
-  --text-body-16-regular: "text-[16px] leading-normal tracking-[0] font-normal";
-  --text-body-14-medium: "text-[14px] leading-normal tracking-[0] font-medium";
-  --text-body-14-regular: "text-[14px] leading-normal tracking-[0] font-normal";
-  --text-body-12-bold: "text-[12px] leading-normal tracking-[0] font-bold";
-
-  --text-caption-12-bold: "text-[12px] leading-normal tracking-[0] font-bold";
-  --text-caption-12-medium: "text-[12px] leading-normal tracking-[0] font-medium";
-  --text-caption-12-regular: "text-[12px] leading-normal tracking-[0] font-normal";
-  --text-caption-11-medium: "text-[11px] leading-normal tracking-[0] font-medium";
-  --text-caption-10-bold: "text-[10px] leading-normal tracking-[0] font-bold";
 }
 
-@layer utilities {
-  /* ===== FONT FAMILY utilities (match previous tailwind.config.js keys) ===== */
-  .font-pretendard-regular {
-    font-family: Pretendard-Regular;
-  }
-  .font-pretendard-medium {
-    font-family: Pretendard-Medium;
-  }
-  .font-pretendard-bold {
-    font-family: Pretendard-Bold;
-  }
+/* ===== FONT FAMILY utilities (match previous tailwind.config.js keys) ===== */
+@utility font-pretendard-regular {
+  font-family: Pretendard-Regular;
+}
+@utility font-pretendard-medium {
+  font-family: Pretendard-Medium;
+}
+@utility font-pretendard-bold {
+  font-family: Pretendard-Bold;
+}
 
-  /* ===== TYPOGRAPHY utilities (match previous fontSize keys) ===== */
-  .text-display-96-bold {
-    font-size: 96px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-display-96-medium {
-    font-size: 96px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-display-72-bold {
-    font-size: 72px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-display-72-medium {
-    font-size: 72px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-display-60-bold {
-    font-size: 60px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-display-60-medium {
-    font-size: 60px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
+/* ===== TYPOGRAPHY utilities (match previous fontSize keys) ===== */
+@utility text-display-96-bold {
+  font-size: 96px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-display-96-medium {
+  font-size: 96px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-display-72-bold {
+  font-size: 72px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-display-72-medium {
+  font-size: 72px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-display-60-bold {
+  font-size: 60px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-display-60-medium {
+  font-size: 60px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
 
-  .text-headline-48-bold {
-    font-size: 48px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-headline-48-medium {
-    font-size: 48px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-headline-48-regular {
-    font-size: 48px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-  .text-headline-42-bold {
-    font-size: 42px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-headline-42-medium {
-    font-size: 42px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-headline-42-regular {
-    font-size: 42px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-  .text-headline-36-bold {
-    font-size: 36px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-headline-36-medium {
-    font-size: 36px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-headline-36-regular {
-    font-size: 36px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
+@utility text-headline-48-bold {
+  font-size: 48px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-headline-48-medium {
+  font-size: 48px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-headline-48-regular {
+  font-size: 48px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+@utility text-headline-42-bold {
+  font-size: 42px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-headline-42-medium {
+  font-size: 42px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-headline-42-regular {
+  font-size: 42px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+@utility text-headline-36-bold {
+  font-size: 36px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-headline-36-medium {
+  font-size: 36px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-headline-36-regular {
+  font-size: 36px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 400;
+}
 
-  .text-title-28-bold {
-    font-size: 28px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-title-28-medium {
-    font-size: 28px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-title-28-regular {
-    font-size: 28px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-  .text-title-24-bold {
-    font-size: 24px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-title-24-medium {
-    font-size: 24px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-title-24-regular {
-    font-size: 24px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-  .text-title-20-bold {
-    font-size: 20px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-title-20-medium {
-    font-size: 20px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-title-20-regular {
-    font-size: 20px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-  .text-title-18-bold {
-    font-size: 18px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-title-18-medium {
-    font-size: 18px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-title-18-regular {
-    font-size: 18px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-  .text-title-16-bold {
-    font-size: 16px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-title-14-bold {
-    font-size: 14px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
+@utility text-title-28-bold {
+  font-size: 28px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-title-28-medium {
+  font-size: 28px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-title-28-regular {
+  font-size: 28px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+@utility text-title-24-bold {
+  font-size: 24px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-title-24-medium {
+  font-size: 24px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-title-24-regular {
+  font-size: 24px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+@utility text-title-20-bold {
+  font-size: 20px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-title-20-medium {
+  font-size: 20px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-title-20-regular {
+  font-size: 20px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+@utility text-title-18-bold {
+  font-size: 18px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-title-18-medium {
+  font-size: 18px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-title-18-regular {
+  font-size: 18px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+@utility text-title-16-bold {
+  font-size: 16px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-title-14-bold {
+  font-size: 14px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
 
-  .text-body-16-medium {
-    font-size: 16px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-body-16-regular {
-    font-size: 16px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-  .text-body-14-medium {
-    font-size: 14px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-body-14-regular {
-    font-size: 14px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-  .text-body-12-bold {
-    font-size: 12px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
+@utility text-body-16-medium {
+  font-size: 16px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-body-16-regular {
+  font-size: 16px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+@utility text-body-14-medium {
+  font-size: 14px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-body-14-regular {
+  font-size: 14px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+@utility text-body-12-bold {
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
 
-  .text-caption-12-bold {
-    font-size: 12px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
-  .text-caption-12-medium {
-    font-size: 12px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-caption-12-regular {
-    font-size: 12px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-  .text-caption-11-medium {
-    font-size: 11px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 500;
-  }
-  .text-caption-10-bold {
-    font-size: 10px;
-    line-height: normal;
-    letter-spacing: 0;
-    font-weight: 700;
-  }
+@utility text-caption-12-bold {
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
+}
+@utility text-caption-12-medium {
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-caption-12-regular {
+  font-size: 12px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+@utility text-caption-11-medium {
+  font-size: 11px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+@utility text-caption-10-bold {
+  font-size: 10px;
+  line-height: normal;
+  letter-spacing: 0;
+  font-weight: 700;
 }