@bigtablet/design-system 1.6.0 → 1.6.2

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.0",
+  "version": "1.6.2",
   "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";