@bigtablet/design-system 1.6.1 → 1.6.3

package/dist/index.d.ts

@@ -31,23 +31,6 @@ declare const useAlert: () => AlertContextValue;
 declare const AlertProvider: React.FC<{
     children: React.ReactNode;
 }>;
-interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-    variant?: AlertVariant;
-    title?: React.ReactNode;
-    icon?: React.ReactNode;
-    closable?: boolean;
-    onClose?: () => void;
-    showActions?: boolean;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    confirmText?: string;
-    cancelText?: string;
-    actionsAlign?: AlertActionsAlign;
-}
-/**
- * @deprecated Use useAlert hook with AlertProvider instead
- */
-declare const Alert: ({ variant, title, icon, closable, onClose, showActions, onConfirm, onCancel, confirmText, cancelText, actionsAlign, className, children, ...props }: AlertProps) => react_jsx_runtime.JSX.Element;
 
 interface LoadingProps {
     size?: number;
@@ -156,4 +139,4 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
 }
 declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
-export { Alert, AlertProvider, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, type SelectOption, Switch, TextField, ToastProvider, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, type SelectOption, Switch, TextField, ToastProvider, useAlert, useToast };

package/dist/index.js

@@ -125,85 +125,6 @@ var AlertModal = ({
     }
   ) });
 };
-var Alert = ({
-  variant = "info",
-  title,
-  icon,
-  closable,
-  onClose,
-  showActions = false,
-  onConfirm,
-  onCancel,
-  confirmText = "\uD655\uC778",
-  cancelText = "\uCDE8\uC18C",
-  actionsAlign = "left",
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: ["alert", `alert--${variant}`, closable && "alert--closable", className].filter(Boolean).join(" "),
-      role: "alert",
-      "aria-live": "polite",
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "alert__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsxs("div", { className: "alert__content", children: [
-          title && /* @__PURE__ */ jsx("div", { className: "alert__title", children: title }),
-          children && /* @__PURE__ */ jsx("div", { className: "alert__desc", children }),
-          showActions && /* @__PURE__ */ jsxs("div", { className: `alert__actions alert__actions--${actionsAlign}`, children: [
-            onCancel && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "alert__button alert__button--cancel",
-                onClick: onCancel,
-                children: cancelText
-              }
-            ),
-            onConfirm && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "alert__button alert__button--confirm",
-                onClick: onConfirm,
-                children: confirmText
-              }
-            )
-          ] })
-        ] }),
-        closable && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "alert__close",
-            "aria-label": "\uB2EB\uAE30",
-            onClick: onClose,
-            children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: [
-                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
 var Loading = ({ size = 24 }) => {
   return /* @__PURE__ */ jsx(
     "span",
@@ -711,4 +632,4 @@ var Modal = ({
   );
 };
 
-export { Alert, AlertProvider, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, Switch, TextField, ToastProvider, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, Switch, TextField, ToastProvider, useAlert, useToast };

package/dist/styles/scss/_a11y.scss

@@ -0,0 +1,7 @@
+@use "colors" as colors;
+
+$focus_ring: 0 0 0 3px rgba(colors.$color_primary, 0.15);
+$focus_ring_error: 0 0 0 3px rgba(colors.$color_error, 0.15);
+$focus_ring_success: 0 0 0 3px rgba(colors.$color_success, 0.15);
+
+$tap_min_size: 44px;

package/dist/styles/scss/_breakpoints.scss

@@ -0,0 +1,28 @@
+$breakpoint_mobile: 360px;
+$breakpoint_tablet: 768px;
+$breakpoint_laptop: 1024px;
+$breakpoint_desktop: 1280px;
+
+@mixin mobile {
+  @media (max-width: #{$breakpoint_tablet - 1}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: $breakpoint_tablet) and (max-width: #{$breakpoint_laptop - 1}) {
+    @content;
+  }
+}
+
+@mixin laptop {
+  @media (min-width: $breakpoint_laptop) and (max-width: #{$breakpoint_desktop - 1}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: $breakpoint_desktop) {
+    @content;
+  }
+}

package/dist/styles/scss/_colors.scss

@@ -0,0 +1,25 @@
+$color_primary: #000000;
+$color_primary_hover: #333333;
+
+$color_background: #ffffff;
+$color_background_secondary: #fafafa;
+
+$color_text_primary: #1a1a1a;
+$color_text_secondary: #666666;
+$color_text_tertiary: #999999;
+
+$color_border: #e5e5e5;
+$color_border_light: rgba(0, 0, 0, 0.08);
+
+$color_success: #10b981;
+$color_error: #ef4444;
+$color_warning: #f59e0b;
+$color_info: #3b82f6;
+
+$color_overlay: rgba(0, 0, 0, 0.5);
+
+$text_strong: #1f2937;
+$text_normal: #3b3b3b;
+$text_subtle: #6b7280;
+$text_disabled: #9ca3af;
+$text_inverse: #ffffff;

package/dist/styles/scss/_layout.scss

@@ -0,0 +1,8 @@
+@mixin flex_center { display: flex; align-items: center; justify-content: center; }
+@mixin flex_left { display: flex; align-items: center; justify-content: flex-start; }
+@mixin flex_right { display: flex; align-items: center; justify-content: flex-end; }
+@mixin flex_between { display: flex; align-items: center; justify-content: space-between; }
+
+@mixin flex_column { display: flex; flex-direction: column; }
+@mixin flex_column_center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
+@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }

package/dist/styles/scss/_motion.scss

@@ -0,0 +1,4 @@
+$transition_fast: 0.1s ease-out;
+$transition_base: 0.2s ease-out;
+$transition_slow: 0.3s ease-out;
+$transition_bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

package/dist/styles/scss/_radius.scss

@@ -0,0 +1,5 @@
+$radius_sm: 6px;
+$radius_md: 8px;
+$radius_lg: 12px;
+$radius_xl: 16px;
+$radius_full: 9999px;

package/dist/styles/scss/_shadows.scss

@@ -0,0 +1,4 @@
+$shadow_sm: 0 2px 4px rgba(0, 0, 0, 0.04);
+$shadow_md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+$shadow_lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
+$shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

package/dist/styles/scss/_spacing.scss

@@ -0,0 +1,7 @@
+$spacing_xs: 0.25rem;
+$spacing_sm: 0.5rem;
+$spacing_md: 0.75rem;
+$spacing_lg: 1rem;
+$spacing_xl: 1.25rem;
+$spacing_2xl: 1.5rem;
+$spacing_3xl: 2rem;

package/dist/styles/scss/_typography.scss

@@ -0,0 +1,77 @@
+$font_family_primary: "Pretendard", sans-serif;
+
+$font_size_xs: 0.75rem;
+$font_size_sm: 0.875rem;
+$font_size_base: 0.9375rem;
+$font_size_md: 1rem;
+$font_size_lg: 1.125rem;
+$font_size_xl: 1.25rem;
+$font_size_2xl: 1.5rem;
+$font_size_3xl: 2rem;
+$font_size_4xl: 2.5rem;
+
+$font_weight_thin: 100;
+$font_weight_extralight: 200;
+$font_weight_light: 300;
+$font_weight_regular: 400;
+$font_weight_medium: 500;
+$font_weight_semibold: 600;
+$font_weight_bold: 700;
+$font_weight_extrabold: 800;
+$font_weight_black: 900;
+
+$line_height_tight: 1.25;
+$line_height_snug: 1.3;
+$line_height_normal: 1.5;
+$line_height_relaxed: 1.75;
+
+$letter_spacing_tight: -0.02em;
+$letter_spacing_normal: 0;
+$letter_spacing_wide: 0.02em;
+
+@mixin text_xs { font-size: $font_size_xs; line-height: $line_height_normal; }
+@mixin text_sm { font-size: $font_size_sm; line-height: $line_height_normal; }
+@mixin text_base { font-size: $font_size_base; line-height: $line_height_normal; }
+@mixin text_md { font-size: $font_size_md; line-height: $line_height_normal; }
+@mixin text_lg { font-size: $font_size_lg; line-height: $line_height_normal; }
+@mixin text_xl { font-size: $font_size_xl; line-height: $line_height_snug; }
+@mixin text_2xl { font-size: $font_size_2xl; line-height: $line_height_snug; }
+@mixin text_3xl { font-size: $font_size_3xl; line-height: $line_height_tight; }
+
+@mixin heading_1 {
+  font-size: $font_size_3xl;
+  font-weight: $font_weight_bold;
+  line-height: $line_height_tight;
+  letter-spacing: $letter_spacing_tight;
+}
+
+@mixin heading_2 {
+  font-size: $font_size_2xl;
+  font-weight: $font_weight_semibold;
+  line-height: $line_height_snug;
+  letter-spacing: $letter_spacing_tight;
+}
+
+@mixin heading_3 {
+  font-size: $font_size_xl;
+  font-weight: $font_weight_semibold;
+  line-height: $line_height_snug;
+}
+
+@mixin body_regular {
+  font-size: $font_size_base;
+  font-weight: $font_weight_regular;
+  line-height: $line_height_normal;
+}
+
+@mixin body_medium {
+  font-size: $font_size_base;
+  font-weight: $font_weight_medium;
+  line-height: $line_height_normal;
+}
+
+@mixin caption {
+  font-size: $font_size_sm;
+  font-weight: $font_weight_regular;
+  line-height: $line_height_normal;
+}

package/dist/styles/scss/_variables.scss

@@ -0,0 +1,59 @@
+// colors
+$color-primary: #000000;
+$color-primary-hover: #333333;
+
+$color-background: #ffffff;
+$color-background-secondary: #fafafa;
+
+$color-text-primary: #1a1a1a;
+$color-text-secondary: #666666;
+$color-text-tertiary: #999999;
+
+$color-border: #e5e5e5;
+$color-border-light: rgba(0, 0, 0, 0.08);
+
+$color-success: #10b981;
+$color-error: #ef4444;
+$color-warning: #f59e0b;
+$color-info: #3b82f6;
+
+$color-overlay: rgba(0, 0, 0, 0.5);
+
+$text-strong: #1F2937;
+$text-normal: #3B3B3B;
+$text-subtle: #6B7280;
+$text-disabled: #9CA3AF;
+$text-inverse: #FFFFFF;
+
+// shadow
+$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
+$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+$shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+// spacing
+$spacing-xs: 0.25rem;   // 4px
+$spacing-sm: 0.5rem;    // 8px
+$spacing-md: 0.75rem;   // 12px
+$spacing-lg: 1rem;      // 16px
+$spacing-xl: 1.25rem;   // 20px
+$spacing-2xl: 1.5rem;   // 24px
+$spacing-3xl: 2rem;     // 32px
+
+// radius
+$radius-sm: 6px;
+$radius-md: 8px;
+$radius-lg: 12px;
+$radius-xl: 16px;
+$radius-full: 9999px;
+
+// z-index
+$z-modal: 10000;
+$z-toast: 10001;
+$z-loading: 9999;
+
+// transition
+$transition-fast: 0.1s ease-out;
+$transition-base: 0.2s ease-out;
+$transition-slow: 0.3s ease-out;
+$transition-bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

package/dist/styles/scss/_z-index.scss

@@ -0,0 +1,3 @@
+$z_modal: 10000;
+$z_toast: 10001;
+$z_loading: 9999;

package/dist/styles/scss/token.scss

@@ -0,0 +1,9 @@
+@forward "colors";
+@forward "spacing";
+@forward "radius";
+@forward "shadows";
+@forward "z-index";
+@forward "motion";
+@forward "typography";
+@forward "layout";
+@forward "a11y";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -14,10 +14,12 @@
       "types": "./dist/next.d.ts",
       "import": "./dist/next.js"
     },
-    "./style.css": "./dist/index.css"
+    "./style.css": "./dist/index.css",
+    "./scss/token": "./dist/styles/scss/token.scss"
   },
   "files": [
     "dist",
+    "src/styles/scss",
     "README.md",
     "LICENSE"
   ],
@@ -27,7 +29,8 @@
     "./dist/next.css"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && pnpm run copy:scss",
+    "copy:scss": "node scripts/copy-scss.mjs",
     "dev": "tsup --watch",
     "storybook": "storybook dev -p 6006",
     "build:sb": "storybook build",

package/src/styles/scss/_a11y.scss

@@ -0,0 +1,7 @@
+@use "colors" as colors;
+
+$focus_ring: 0 0 0 3px rgba(colors.$color_primary, 0.15);
+$focus_ring_error: 0 0 0 3px rgba(colors.$color_error, 0.15);
+$focus_ring_success: 0 0 0 3px rgba(colors.$color_success, 0.15);
+
+$tap_min_size: 44px;

package/src/styles/scss/_breakpoints.scss

@@ -0,0 +1,28 @@
+$breakpoint_mobile: 360px;
+$breakpoint_tablet: 768px;
+$breakpoint_laptop: 1024px;
+$breakpoint_desktop: 1280px;
+
+@mixin mobile {
+  @media (max-width: #{$breakpoint_tablet - 1}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: $breakpoint_tablet) and (max-width: #{$breakpoint_laptop - 1}) {
+    @content;
+  }
+}
+
+@mixin laptop {
+  @media (min-width: $breakpoint_laptop) and (max-width: #{$breakpoint_desktop - 1}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: $breakpoint_desktop) {
+    @content;
+  }
+}

package/src/styles/scss/_colors.scss

@@ -0,0 +1,25 @@
+$color_primary: #000000;
+$color_primary_hover: #333333;
+
+$color_background: #ffffff;
+$color_background_secondary: #fafafa;
+
+$color_text_primary: #1a1a1a;
+$color_text_secondary: #666666;
+$color_text_tertiary: #999999;
+
+$color_border: #e5e5e5;
+$color_border_light: rgba(0, 0, 0, 0.08);
+
+$color_success: #10b981;
+$color_error: #ef4444;
+$color_warning: #f59e0b;
+$color_info: #3b82f6;
+
+$color_overlay: rgba(0, 0, 0, 0.5);
+
+$text_strong: #1f2937;
+$text_normal: #3b3b3b;
+$text_subtle: #6b7280;
+$text_disabled: #9ca3af;
+$text_inverse: #ffffff;

package/src/styles/scss/_layout.scss

@@ -0,0 +1,8 @@
+@mixin flex_center { display: flex; align-items: center; justify-content: center; }
+@mixin flex_left { display: flex; align-items: center; justify-content: flex-start; }
+@mixin flex_right { display: flex; align-items: center; justify-content: flex-end; }
+@mixin flex_between { display: flex; align-items: center; justify-content: space-between; }
+
+@mixin flex_column { display: flex; flex-direction: column; }
+@mixin flex_column_center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
+@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }

package/src/styles/scss/_motion.scss

@@ -0,0 +1,4 @@
+$transition_fast: 0.1s ease-out;
+$transition_base: 0.2s ease-out;
+$transition_slow: 0.3s ease-out;
+$transition_bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

package/src/styles/scss/_radius.scss

@@ -0,0 +1,5 @@
+$radius_sm: 6px;
+$radius_md: 8px;
+$radius_lg: 12px;
+$radius_xl: 16px;
+$radius_full: 9999px;

package/src/styles/scss/_shadows.scss

@@ -0,0 +1,4 @@
+$shadow_sm: 0 2px 4px rgba(0, 0, 0, 0.04);
+$shadow_md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+$shadow_lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
+$shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

package/src/styles/scss/_spacing.scss

@@ -0,0 +1,7 @@
+$spacing_xs: 0.25rem;
+$spacing_sm: 0.5rem;
+$spacing_md: 0.75rem;
+$spacing_lg: 1rem;
+$spacing_xl: 1.25rem;
+$spacing_2xl: 1.5rem;
+$spacing_3xl: 2rem;

package/src/styles/scss/_typography.scss

@@ -0,0 +1,77 @@
+$font_family_primary: "Pretendard", sans-serif;
+
+$font_size_xs: 0.75rem;
+$font_size_sm: 0.875rem;
+$font_size_base: 0.9375rem;
+$font_size_md: 1rem;
+$font_size_lg: 1.125rem;
+$font_size_xl: 1.25rem;
+$font_size_2xl: 1.5rem;
+$font_size_3xl: 2rem;
+$font_size_4xl: 2.5rem;
+
+$font_weight_thin: 100;
+$font_weight_extralight: 200;
+$font_weight_light: 300;
+$font_weight_regular: 400;
+$font_weight_medium: 500;
+$font_weight_semibold: 600;
+$font_weight_bold: 700;
+$font_weight_extrabold: 800;
+$font_weight_black: 900;
+
+$line_height_tight: 1.25;
+$line_height_snug: 1.3;
+$line_height_normal: 1.5;
+$line_height_relaxed: 1.75;
+
+$letter_spacing_tight: -0.02em;
+$letter_spacing_normal: 0;
+$letter_spacing_wide: 0.02em;
+
+@mixin text_xs { font-size: $font_size_xs; line-height: $line_height_normal; }
+@mixin text_sm { font-size: $font_size_sm; line-height: $line_height_normal; }
+@mixin text_base { font-size: $font_size_base; line-height: $line_height_normal; }
+@mixin text_md { font-size: $font_size_md; line-height: $line_height_normal; }
+@mixin text_lg { font-size: $font_size_lg; line-height: $line_height_normal; }
+@mixin text_xl { font-size: $font_size_xl; line-height: $line_height_snug; }
+@mixin text_2xl { font-size: $font_size_2xl; line-height: $line_height_snug; }
+@mixin text_3xl { font-size: $font_size_3xl; line-height: $line_height_tight; }
+
+@mixin heading_1 {
+  font-size: $font_size_3xl;
+  font-weight: $font_weight_bold;
+  line-height: $line_height_tight;
+  letter-spacing: $letter_spacing_tight;
+}
+
+@mixin heading_2 {
+  font-size: $font_size_2xl;
+  font-weight: $font_weight_semibold;
+  line-height: $line_height_snug;
+  letter-spacing: $letter_spacing_tight;
+}
+
+@mixin heading_3 {
+  font-size: $font_size_xl;
+  font-weight: $font_weight_semibold;
+  line-height: $line_height_snug;
+}
+
+@mixin body_regular {
+  font-size: $font_size_base;
+  font-weight: $font_weight_regular;
+  line-height: $line_height_normal;
+}
+
+@mixin body_medium {
+  font-size: $font_size_base;
+  font-weight: $font_weight_medium;
+  line-height: $line_height_normal;
+}
+
+@mixin caption {
+  font-size: $font_size_sm;
+  font-weight: $font_weight_regular;
+  line-height: $line_height_normal;
+}

package/src/styles/scss/_variables.scss

@@ -0,0 +1,59 @@
+// colors
+$color-primary: #000000;
+$color-primary-hover: #333333;
+
+$color-background: #ffffff;
+$color-background-secondary: #fafafa;
+
+$color-text-primary: #1a1a1a;
+$color-text-secondary: #666666;
+$color-text-tertiary: #999999;
+
+$color-border: #e5e5e5;
+$color-border-light: rgba(0, 0, 0, 0.08);
+
+$color-success: #10b981;
+$color-error: #ef4444;
+$color-warning: #f59e0b;
+$color-info: #3b82f6;
+
+$color-overlay: rgba(0, 0, 0, 0.5);
+
+$text-strong: #1F2937;
+$text-normal: #3B3B3B;
+$text-subtle: #6B7280;
+$text-disabled: #9CA3AF;
+$text-inverse: #FFFFFF;
+
+// shadow
+$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
+$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+$shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+// spacing
+$spacing-xs: 0.25rem;   // 4px
+$spacing-sm: 0.5rem;    // 8px
+$spacing-md: 0.75rem;   // 12px
+$spacing-lg: 1rem;      // 16px
+$spacing-xl: 1.25rem;   // 20px
+$spacing-2xl: 1.5rem;   // 24px
+$spacing-3xl: 2rem;     // 32px
+
+// radius
+$radius-sm: 6px;
+$radius-md: 8px;
+$radius-lg: 12px;
+$radius-xl: 16px;
+$radius-full: 9999px;
+
+// z-index
+$z-modal: 10000;
+$z-toast: 10001;
+$z-loading: 9999;
+
+// transition
+$transition-fast: 0.1s ease-out;
+$transition-base: 0.2s ease-out;
+$transition-slow: 0.3s ease-out;
+$transition-bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

package/src/styles/scss/_z-index.scss

@@ -0,0 +1,3 @@
+$z_modal: 10000;
+$z_toast: 10001;
+$z_loading: 9999;

package/src/styles/scss/token.scss

@@ -0,0 +1,9 @@
+@forward "colors";
+@forward "spacing";
+@forward "radius";
+@forward "shadows";
+@forward "z-index";
+@forward "motion";
+@forward "typography";
+@forward "layout";
+@forward "a11y";