@causw/core 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@causw/core",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Core components and utilities for CAUSW Design System - CAU Software Community Service",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -21,13 +21,17 @@
     "src/styles"
   ],
   "dependencies": {
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0",
-    "@causw/icons": "0.0.8",
-    "@causw/tokens": "0.0.9"
+    "@causw/icons": "0.0.9",
+    "@causw/tokens": "0.0.11"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "repository": {
     "type": "git",

package/src/styles/global.css

@@ -1,3 +1,157 @@
 @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
 @import 'tailwindcss';
-@config '@causw/tokens/config';
+@config '@causw/tokens/config';
+
+* {
+  letter-spacing: -0.02rem;
+}
+
+@layer utilities {
+  /* Caption variants */
+  .typo-caption-sm {
+    @apply text-2xs font-regular font-sans leading-normal;
+  }
+
+  .typo-caption-sm-point {
+    @apply text-2xs font-sans leading-normal font-semibold;
+  }
+
+  .typo-caption-md {
+    @apply font-sans text-xs leading-normal font-medium;
+  }
+
+  .typo-caption-md-point {
+    @apply font-sans text-xs leading-normal font-semibold;
+  }
+
+  /* Body2 variants */
+  .typo-body2-sm {
+    @apply font-regular font-sans text-xs leading-normal;
+  }
+
+  .typo-body2-sm-point {
+    @apply font-sans text-xs leading-normal font-semibold;
+  }
+
+  .typo-body2-md {
+    @apply font-sans text-base leading-normal font-medium;
+  }
+
+  .typo-body2-md-point {
+    @apply font-sans text-base leading-normal font-semibold;
+  }
+
+  /* Body variants */
+  .typo-body-sm {
+    @apply font-regular font-sans text-base leading-tight;
+  }
+
+  .typo-body-sm-point {
+    @apply font-sans text-base leading-normal font-bold;
+  }
+
+  .typo-body-md {
+    @apply font-sans text-lg leading-normal font-medium;
+  }
+
+  .typo-body-md-point {
+    @apply font-sans text-lg leading-normal font-bold;
+  }
+
+  /* Subtitle variants */
+  .typo-subtitle-sm {
+    @apply font-sans text-lg leading-normal font-medium;
+  }
+
+  .typo-subtitle-sm-point {
+    @apply font-sans text-lg leading-normal font-bold;
+  }
+
+  .typo-subtitle-md {
+    @apply font-sans text-xl leading-normal font-medium;
+  }
+
+  .typo-subtitle-md-point {
+    @apply font-sans text-xl leading-normal font-bold;
+  }
+
+  /* Title variants */
+  .typo-title-sm {
+    @apply font-sans text-2xl leading-normal font-bold;
+  }
+
+  .typo-title-md {
+    @apply font-sans text-5xl leading-normal font-bold;
+  }
+
+  /* Head variants */
+  .typo-head-sm {
+    @apply font-sans text-4xl leading-normal font-bold;
+  }
+
+  .typo-head-md {
+    @apply font-sans text-6xl leading-normal font-bold;
+  }
+
+  /* Fixed size variants */
+  .typo-fixed-12 {
+    @apply text-2xs font-sans leading-normal font-medium;
+  }
+
+  .typo-fixed-14 {
+    @apply font-sans text-xs leading-normal font-medium;
+  }
+
+  .typo-fixed-15 {
+    @apply font-sans text-sm leading-normal font-semibold;
+  }
+
+  .typo-fixed-16 {
+    @apply font-sans text-base leading-normal font-medium;
+  }
+
+  .typo-fixed-18 {
+    @apply font-sans text-lg leading-normal font-medium;
+  }
+
+  .typo-fixed-20 {
+    @apply font-sans text-xl leading-normal font-semibold;
+  }
+
+  .typo-fixed-24 {
+    @apply font-sans text-3xl leading-normal font-bold;
+  }
+}
+
+@theme {
+  --animate-toast-hide: toast-hide 100ms ease-in forwards;
+  --animate-toast-slide-in: toast-slide-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-toast-swipe-out: toast-swipe-out 100ms ease-out forwards;
+
+  @keyframes toast-hide {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes toast-slide-in {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes toast-swipe-out {
+    from {
+      transform: translateY(var(--radix-toast-swipe-end-y));
+    }
+    to {
+      transform: translateY(100%);
+    }
+  }
+}