@bigtablet/design-system 1.14.2 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +17 -0
- package/dist/styles/scss/_colors.scss +18 -1
- package/dist/styles/scss/_layout.scss +45 -1
- package/dist/styles/scss/_motion.scss +21 -5
- package/dist/styles/scss/_shadows.scss +17 -1
- package/package.json +1 -2
- package/src/styles/scss/_colors.scss +18 -1
- package/src/styles/scss/_layout.scss +45 -1
- package/src/styles/scss/_motion.scss +21 -5
- package/src/styles/scss/_shadows.scss +17 -1
package/dist/index.css
CHANGED
|
@@ -377,6 +377,23 @@
|
|
|
377
377
|
opacity: 0.6;
|
|
378
378
|
cursor: not-allowed;
|
|
379
379
|
}
|
|
380
|
+
.checkbox_input:disabled:not(:checked):not(:indeterminate) + .checkbox_box::before,
|
|
381
|
+
.checkbox_input:disabled:not(:checked):not(:indeterminate) + .checkbox_box::after {
|
|
382
|
+
content: "";
|
|
383
|
+
position: absolute;
|
|
384
|
+
left: 50%;
|
|
385
|
+
top: 50%;
|
|
386
|
+
width: 0.7rem;
|
|
387
|
+
height: 2px;
|
|
388
|
+
background: #9ca3af;
|
|
389
|
+
border-radius: 9999px;
|
|
390
|
+
}
|
|
391
|
+
.checkbox_input:disabled:not(:checked):not(:indeterminate) + .checkbox_box::before {
|
|
392
|
+
transform: translate(-50%, -50%) rotate(45deg);
|
|
393
|
+
}
|
|
394
|
+
.checkbox_input:disabled:not(:checked):not(:indeterminate) + .checkbox_box::after {
|
|
395
|
+
transform: translate(-50%, -50%) rotate(-45deg);
|
|
396
|
+
}
|
|
380
397
|
.checkbox_input:checked + .checkbox_box,
|
|
381
398
|
.checkbox_input:indeterminate + .checkbox_box {
|
|
382
399
|
background: #000000;
|
|
@@ -9,6 +9,11 @@ $color_background_neutral: #F3F3F3;
|
|
|
9
9
|
$color_background_muted: #f0f0f0;
|
|
10
10
|
$color_background_primary: #47555E;
|
|
11
11
|
|
|
12
|
+
/* Background - Dark Palette (for modern/tech sections) */
|
|
13
|
+
$color_background_dark: #1E293B;
|
|
14
|
+
$color_background_darker: #0F172A;
|
|
15
|
+
$color_background_darkest: #020617;
|
|
16
|
+
|
|
12
17
|
/* Text */
|
|
13
18
|
$color_text_primary: #1a1a1a;
|
|
14
19
|
$color_text_secondary: #666666;
|
|
@@ -30,5 +35,17 @@ $color_error: #ef4444;
|
|
|
30
35
|
$color_warning: #f59e0b;
|
|
31
36
|
$color_info: #3b82f6;
|
|
32
37
|
|
|
38
|
+
/* Accent - Tech Blue */
|
|
39
|
+
$color_accent: #3B82F6;
|
|
40
|
+
$color_accent_light: #60A5FA;
|
|
41
|
+
$color_accent_dark: #2563EB;
|
|
42
|
+
|
|
33
43
|
/* Overlay */
|
|
34
|
-
$color_overlay: rgba(0, 0, 0, 0.5);
|
|
44
|
+
$color_overlay: rgba(0, 0, 0, 0.5);
|
|
45
|
+
$color_overlay_light: rgba(0, 0, 0, 0.3);
|
|
46
|
+
$color_overlay_strong: rgba(0, 0, 0, 0.7);
|
|
47
|
+
|
|
48
|
+
/* Glass Effect */
|
|
49
|
+
$color_glass_light: rgba(255, 255, 255, 0.08);
|
|
50
|
+
$color_glass_border: rgba(255, 255, 255, 0.12);
|
|
51
|
+
$color_glass_dark: rgba(0, 0, 0, 0.4);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* Flex Utilities */
|
|
1
2
|
@mixin flex_center { display: flex; align-items: center; justify-content: center; }
|
|
2
3
|
@mixin flex_left { display: flex; align-items: center; justify-content: flex-start; }
|
|
3
4
|
@mixin flex_right { display: flex; align-items: center; justify-content: flex-end; }
|
|
@@ -5,4 +6,47 @@
|
|
|
5
6
|
|
|
6
7
|
@mixin flex_column { display: flex; flex-direction: column; }
|
|
7
8
|
@mixin flex_column_center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
8
|
-
@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
|
|
9
|
+
@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
|
|
10
|
+
|
|
11
|
+
/* Glass Effect Mixins */
|
|
12
|
+
@mixin glass_light {
|
|
13
|
+
background: rgba(255, 255, 255, 0.08);
|
|
14
|
+
backdrop-filter: blur(12px);
|
|
15
|
+
-webkit-backdrop-filter: blur(12px);
|
|
16
|
+
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin glass_dark {
|
|
20
|
+
background: rgba(0, 0, 0, 0.4);
|
|
21
|
+
backdrop-filter: blur(12px);
|
|
22
|
+
-webkit-backdrop-filter: blur(12px);
|
|
23
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@mixin glass_card {
|
|
27
|
+
background: rgba(255, 255, 255, 0.05);
|
|
28
|
+
backdrop-filter: blur(20px);
|
|
29
|
+
-webkit-backdrop-filter: blur(20px);
|
|
30
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
31
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Hover Lift Effect */
|
|
35
|
+
@mixin hover_lift($y: -4px, $shadow: 0 12px 24px rgba(0, 0, 0, 0.15)) {
|
|
36
|
+
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
|
|
37
|
+
box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
transform: translateY($y);
|
|
41
|
+
box-shadow: $shadow;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Glow on Hover */
|
|
46
|
+
@mixin hover_glow($color: rgba(59, 130, 246, 0.4)) {
|
|
47
|
+
transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
48
|
+
|
|
49
|
+
&:hover {
|
|
50
|
+
box-shadow: 0 0 30px $color;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -1,12 +1,28 @@
|
|
|
1
|
+
/* Base Transitions */
|
|
1
2
|
$transition_fast: 0.1s ease-in-out; // hover, icon
|
|
2
3
|
$transition_base: 0.2s ease-in-out; // 메뉴 열림
|
|
3
4
|
$transition_slow: 0.3s ease-in-out; // 레이아웃 변화
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
$
|
|
6
|
+
/* Easing Curves */
|
|
7
|
+
$ease_out_expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
8
|
+
$ease_out_quart: cubic-bezier(0.25, 1, 0.5, 1);
|
|
9
|
+
$ease_in_out_cubic: cubic-bezier(0.65, 0, 0.35, 1);
|
|
10
|
+
$ease_spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
7
11
|
|
|
8
|
-
|
|
9
|
-
$
|
|
12
|
+
/* Material / Emphasized */
|
|
13
|
+
$transition_emphasized: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14
|
+
$transition_bounce: 0.3s $ease_out_expo;
|
|
15
|
+
|
|
16
|
+
/* Specific Transitions */
|
|
17
|
+
$transition_fade: 0.15s ease-in-out;
|
|
18
|
+
$transition_slide: 0.25s $ease_out_expo;
|
|
10
19
|
$transition_scale: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
20
|
+
$transition_state: 0.18s ease-in-out;
|
|
21
|
+
|
|
22
|
+
/* Modern/Tech Transitions */
|
|
23
|
+
$transition_smooth: 0.4s $ease_out_expo;
|
|
24
|
+
$transition_spring: 0.5s $ease_spring;
|
|
25
|
+
$transition_dramatic: 0.6s $ease_out_quart;
|
|
11
26
|
|
|
12
|
-
|
|
27
|
+
/* Hover Lift */
|
|
28
|
+
$transition_lift: transform 0.25s $ease_out_expo, box-shadow 0.25s $ease_out_expo;
|
|
@@ -1,4 +1,20 @@
|
|
|
1
|
+
/* Standard Shadows */
|
|
1
2
|
$shadow_sm: 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
2
3
|
$shadow_md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
3
4
|
$shadow_lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
|
|
4
|
-
$shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
5
|
+
$shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
6
|
+
$shadow_2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
7
|
+
|
|
8
|
+
/* Elevated Shadows (for floating elements) */
|
|
9
|
+
$shadow_elevated: 0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
|
|
10
|
+
$shadow_float: 0 20px 60px -15px rgba(0, 0, 0, 0.3);
|
|
11
|
+
|
|
12
|
+
/* Glow Effects (for tech/accent elements) */
|
|
13
|
+
$glow_accent: 0 0 20px rgba(59, 130, 246, 0.35);
|
|
14
|
+
$glow_accent_strong: 0 0 40px rgba(59, 130, 246, 0.5), 0 0 80px rgba(59, 130, 246, 0.25);
|
|
15
|
+
$glow_white: 0 0 20px rgba(255, 255, 255, 0.15);
|
|
16
|
+
$glow_white_strong: 0 0 40px rgba(255, 255, 255, 0.25);
|
|
17
|
+
|
|
18
|
+
/* Inner Shadows */
|
|
19
|
+
$shadow_inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
20
|
+
$shadow_inner_lg: inset 0 4px 8px rgba(0, 0, 0, 0.1);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigtablet/design-system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.15.0",
|
|
4
4
|
"description": "Bigtablet Design System UI Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -94,7 +94,6 @@
|
|
|
94
94
|
},
|
|
95
95
|
"publishConfig": {
|
|
96
96
|
"access": "public",
|
|
97
|
-
"provenance": true,
|
|
98
97
|
"registry": "https://registry.npmjs.org/"
|
|
99
98
|
}
|
|
100
99
|
}
|
|
@@ -9,6 +9,11 @@ $color_background_neutral: #F3F3F3;
|
|
|
9
9
|
$color_background_muted: #f0f0f0;
|
|
10
10
|
$color_background_primary: #47555E;
|
|
11
11
|
|
|
12
|
+
/* Background - Dark Palette (for modern/tech sections) */
|
|
13
|
+
$color_background_dark: #1E293B;
|
|
14
|
+
$color_background_darker: #0F172A;
|
|
15
|
+
$color_background_darkest: #020617;
|
|
16
|
+
|
|
12
17
|
/* Text */
|
|
13
18
|
$color_text_primary: #1a1a1a;
|
|
14
19
|
$color_text_secondary: #666666;
|
|
@@ -30,5 +35,17 @@ $color_error: #ef4444;
|
|
|
30
35
|
$color_warning: #f59e0b;
|
|
31
36
|
$color_info: #3b82f6;
|
|
32
37
|
|
|
38
|
+
/* Accent - Tech Blue */
|
|
39
|
+
$color_accent: #3B82F6;
|
|
40
|
+
$color_accent_light: #60A5FA;
|
|
41
|
+
$color_accent_dark: #2563EB;
|
|
42
|
+
|
|
33
43
|
/* Overlay */
|
|
34
|
-
$color_overlay: rgba(0, 0, 0, 0.5);
|
|
44
|
+
$color_overlay: rgba(0, 0, 0, 0.5);
|
|
45
|
+
$color_overlay_light: rgba(0, 0, 0, 0.3);
|
|
46
|
+
$color_overlay_strong: rgba(0, 0, 0, 0.7);
|
|
47
|
+
|
|
48
|
+
/* Glass Effect */
|
|
49
|
+
$color_glass_light: rgba(255, 255, 255, 0.08);
|
|
50
|
+
$color_glass_border: rgba(255, 255, 255, 0.12);
|
|
51
|
+
$color_glass_dark: rgba(0, 0, 0, 0.4);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* Flex Utilities */
|
|
1
2
|
@mixin flex_center { display: flex; align-items: center; justify-content: center; }
|
|
2
3
|
@mixin flex_left { display: flex; align-items: center; justify-content: flex-start; }
|
|
3
4
|
@mixin flex_right { display: flex; align-items: center; justify-content: flex-end; }
|
|
@@ -5,4 +6,47 @@
|
|
|
5
6
|
|
|
6
7
|
@mixin flex_column { display: flex; flex-direction: column; }
|
|
7
8
|
@mixin flex_column_center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
8
|
-
@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
|
|
9
|
+
@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
|
|
10
|
+
|
|
11
|
+
/* Glass Effect Mixins */
|
|
12
|
+
@mixin glass_light {
|
|
13
|
+
background: rgba(255, 255, 255, 0.08);
|
|
14
|
+
backdrop-filter: blur(12px);
|
|
15
|
+
-webkit-backdrop-filter: blur(12px);
|
|
16
|
+
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin glass_dark {
|
|
20
|
+
background: rgba(0, 0, 0, 0.4);
|
|
21
|
+
backdrop-filter: blur(12px);
|
|
22
|
+
-webkit-backdrop-filter: blur(12px);
|
|
23
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@mixin glass_card {
|
|
27
|
+
background: rgba(255, 255, 255, 0.05);
|
|
28
|
+
backdrop-filter: blur(20px);
|
|
29
|
+
-webkit-backdrop-filter: blur(20px);
|
|
30
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
31
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Hover Lift Effect */
|
|
35
|
+
@mixin hover_lift($y: -4px, $shadow: 0 12px 24px rgba(0, 0, 0, 0.15)) {
|
|
36
|
+
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
|
|
37
|
+
box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
transform: translateY($y);
|
|
41
|
+
box-shadow: $shadow;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Glow on Hover */
|
|
46
|
+
@mixin hover_glow($color: rgba(59, 130, 246, 0.4)) {
|
|
47
|
+
transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
48
|
+
|
|
49
|
+
&:hover {
|
|
50
|
+
box-shadow: 0 0 30px $color;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -1,12 +1,28 @@
|
|
|
1
|
+
/* Base Transitions */
|
|
1
2
|
$transition_fast: 0.1s ease-in-out; // hover, icon
|
|
2
3
|
$transition_base: 0.2s ease-in-out; // 메뉴 열림
|
|
3
4
|
$transition_slow: 0.3s ease-in-out; // 레이아웃 변화
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
$
|
|
6
|
+
/* Easing Curves */
|
|
7
|
+
$ease_out_expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
8
|
+
$ease_out_quart: cubic-bezier(0.25, 1, 0.5, 1);
|
|
9
|
+
$ease_in_out_cubic: cubic-bezier(0.65, 0, 0.35, 1);
|
|
10
|
+
$ease_spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
7
11
|
|
|
8
|
-
|
|
9
|
-
$
|
|
12
|
+
/* Material / Emphasized */
|
|
13
|
+
$transition_emphasized: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
14
|
+
$transition_bounce: 0.3s $ease_out_expo;
|
|
15
|
+
|
|
16
|
+
/* Specific Transitions */
|
|
17
|
+
$transition_fade: 0.15s ease-in-out;
|
|
18
|
+
$transition_slide: 0.25s $ease_out_expo;
|
|
10
19
|
$transition_scale: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
20
|
+
$transition_state: 0.18s ease-in-out;
|
|
21
|
+
|
|
22
|
+
/* Modern/Tech Transitions */
|
|
23
|
+
$transition_smooth: 0.4s $ease_out_expo;
|
|
24
|
+
$transition_spring: 0.5s $ease_spring;
|
|
25
|
+
$transition_dramatic: 0.6s $ease_out_quart;
|
|
11
26
|
|
|
12
|
-
|
|
27
|
+
/* Hover Lift */
|
|
28
|
+
$transition_lift: transform 0.25s $ease_out_expo, box-shadow 0.25s $ease_out_expo;
|
|
@@ -1,4 +1,20 @@
|
|
|
1
|
+
/* Standard Shadows */
|
|
1
2
|
$shadow_sm: 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
2
3
|
$shadow_md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
3
4
|
$shadow_lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
|
|
4
|
-
$shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
5
|
+
$shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
6
|
+
$shadow_2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
7
|
+
|
|
8
|
+
/* Elevated Shadows (for floating elements) */
|
|
9
|
+
$shadow_elevated: 0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
|
|
10
|
+
$shadow_float: 0 20px 60px -15px rgba(0, 0, 0, 0.3);
|
|
11
|
+
|
|
12
|
+
/* Glow Effects (for tech/accent elements) */
|
|
13
|
+
$glow_accent: 0 0 20px rgba(59, 130, 246, 0.35);
|
|
14
|
+
$glow_accent_strong: 0 0 40px rgba(59, 130, 246, 0.5), 0 0 80px rgba(59, 130, 246, 0.25);
|
|
15
|
+
$glow_white: 0 0 20px rgba(255, 255, 255, 0.15);
|
|
16
|
+
$glow_white_strong: 0 0 40px rgba(255, 255, 255, 0.25);
|
|
17
|
+
|
|
18
|
+
/* Inner Shadows */
|
|
19
|
+
$shadow_inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
20
|
+
$shadow_inner_lg: inset 0 4px 8px rgba(0, 0, 0, 0.1);
|