@udi-organization/udi-package 1.0.60 → 1.0.62
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/package.json +4 -2
- package/dist/index.cjs +0 -24362
- package/dist/index.cjs.map +0 -1
- package/dist/styles/_theme.scss +0 -561
- package/dist/styles/_variables.scss +0 -180
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// Design Variables - 設計變數集中管理
|
|
3
|
-
// =============================================================================
|
|
4
|
-
|
|
5
|
-
// -----------------------------------------------------------------------------
|
|
6
|
-
// 1. 顏色變數 (Colors) - 使用 CSS 變數支援 Dark Mode
|
|
7
|
-
// -----------------------------------------------------------------------------
|
|
8
|
-
|
|
9
|
-
// 主色調
|
|
10
|
-
$color-primary: var(--color-primary);
|
|
11
|
-
$color-primary-dark: var(--color-primary-dark);
|
|
12
|
-
$color-primary-light: var(--color-primary-light);
|
|
13
|
-
|
|
14
|
-
// 灰階
|
|
15
|
-
$color-gray-50: var(--color-gray-50);
|
|
16
|
-
$color-gray-100: var(--color-gray-100);
|
|
17
|
-
$color-gray-200: var(--color-gray-200);
|
|
18
|
-
$color-gray-300: var(--color-gray-300);
|
|
19
|
-
$color-gray-400: var(--color-gray-400);
|
|
20
|
-
$color-gray-500: var(--color-gray-500);
|
|
21
|
-
$color-gray-600: var(--color-gray-600);
|
|
22
|
-
$color-gray-700: var(--color-gray-700);
|
|
23
|
-
$color-gray-800: var(--color-gray-800);
|
|
24
|
-
$color-gray-900: var(--color-gray-900);
|
|
25
|
-
|
|
26
|
-
// 語義顏色
|
|
27
|
-
$color-success: var(--color-success);
|
|
28
|
-
$color-warning: var(--color-warning);
|
|
29
|
-
$color-error: var(--color-error);
|
|
30
|
-
$color-info: var(--color-info);
|
|
31
|
-
|
|
32
|
-
// 背景與前景
|
|
33
|
-
$color-background: var(--color-background);
|
|
34
|
-
$color-surface: var(--color-surface);
|
|
35
|
-
$color-text-primary: var(--color-text-primary);
|
|
36
|
-
$color-text-secondary: var(--color-text-secondary);
|
|
37
|
-
$color-text-disabled: var(--color-text-disabled);
|
|
38
|
-
$color-border: var(--color-border);
|
|
39
|
-
|
|
40
|
-
// 固定顏色（不隨主題變化）
|
|
41
|
-
$color-white: #ffffff;
|
|
42
|
-
$color-black: #000000;
|
|
43
|
-
|
|
44
|
-
// -----------------------------------------------------------------------------
|
|
45
|
-
// 2. 間距系統 (Spacing) - 基於 8px 網格
|
|
46
|
-
// -----------------------------------------------------------------------------
|
|
47
|
-
|
|
48
|
-
$spacing-xs: 4px;
|
|
49
|
-
$spacing-sm: 8px;
|
|
50
|
-
$spacing-md: 12px;
|
|
51
|
-
$spacing-lg: 16px;
|
|
52
|
-
$spacing-xl: 24px;
|
|
53
|
-
$spacing-2xl: 32px;
|
|
54
|
-
$spacing-3xl: 48px;
|
|
55
|
-
$spacing-4xl: 64px;
|
|
56
|
-
|
|
57
|
-
// 常用間距 Map（可用於 @each 迴圈）
|
|
58
|
-
$spacings: (
|
|
59
|
-
'xs': $spacing-xs,
|
|
60
|
-
'sm': $spacing-sm,
|
|
61
|
-
'md': $spacing-md,
|
|
62
|
-
'lg': $spacing-lg,
|
|
63
|
-
'xl': $spacing-xl,
|
|
64
|
-
'2xl': $spacing-2xl,
|
|
65
|
-
'3xl': $spacing-3xl,
|
|
66
|
-
'4xl': $spacing-4xl
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
// -----------------------------------------------------------------------------
|
|
70
|
-
// 3. 字型系統 (Typography)
|
|
71
|
-
// -----------------------------------------------------------------------------
|
|
72
|
-
|
|
73
|
-
$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
74
|
-
'Helvetica Neue', Arial, 'Noto Sans TC', sans-serif;
|
|
75
|
-
$font-family-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
76
|
-
|
|
77
|
-
$font-size-xs: 12px;
|
|
78
|
-
$font-size-sm: 14px;
|
|
79
|
-
$font-size-base: 16px;
|
|
80
|
-
$font-size-lg: 18px;
|
|
81
|
-
$font-size-xl: 20px;
|
|
82
|
-
$font-size-2xl: 24px;
|
|
83
|
-
$font-size-3xl: 30px;
|
|
84
|
-
$font-size-4xl: 36px;
|
|
85
|
-
|
|
86
|
-
$font-weight-light: 300;
|
|
87
|
-
$font-weight-normal: 400;
|
|
88
|
-
$font-weight-medium: 500;
|
|
89
|
-
$font-weight-semibold: 600;
|
|
90
|
-
$font-weight-bold: 700;
|
|
91
|
-
|
|
92
|
-
$line-height-tight: 1.25;
|
|
93
|
-
$line-height-normal: 1.5;
|
|
94
|
-
$line-height-relaxed: 1.75;
|
|
95
|
-
|
|
96
|
-
// -----------------------------------------------------------------------------
|
|
97
|
-
// 4. 圓角 (Border Radius)
|
|
98
|
-
// -----------------------------------------------------------------------------
|
|
99
|
-
|
|
100
|
-
$radius-none: 0;
|
|
101
|
-
$radius-sm: 4px;
|
|
102
|
-
$radius-md: 8px;
|
|
103
|
-
$radius-lg: 12px;
|
|
104
|
-
$radius-xl: 16px;
|
|
105
|
-
$radius-2xl: 24px;
|
|
106
|
-
$radius-full: 9999px;
|
|
107
|
-
$radius-round: 50%;
|
|
108
|
-
|
|
109
|
-
// -----------------------------------------------------------------------------
|
|
110
|
-
// 5. 陰影 (Shadows)
|
|
111
|
-
// -----------------------------------------------------------------------------
|
|
112
|
-
|
|
113
|
-
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
114
|
-
$shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
115
|
-
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
116
|
-
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
117
|
-
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
118
|
-
|
|
119
|
-
// -----------------------------------------------------------------------------
|
|
120
|
-
// 6. 過渡動畫 (Transitions)
|
|
121
|
-
// -----------------------------------------------------------------------------
|
|
122
|
-
|
|
123
|
-
$transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
124
|
-
$transition-base: 200ms ease;
|
|
125
|
-
$transition-slow: 300ms ease;
|
|
126
|
-
|
|
127
|
-
// -----------------------------------------------------------------------------
|
|
128
|
-
// 7. Z-Index 層級
|
|
129
|
-
// -----------------------------------------------------------------------------
|
|
130
|
-
|
|
131
|
-
$z-base: 0;
|
|
132
|
-
$z-dropdown: 1000;
|
|
133
|
-
$z-sticky: 1020;
|
|
134
|
-
$z-fixed: 1030;
|
|
135
|
-
$z-backdrop: 1040;
|
|
136
|
-
$z-modal: 1050;
|
|
137
|
-
$z-popover: 1060;
|
|
138
|
-
$z-tooltip: 1070;
|
|
139
|
-
|
|
140
|
-
// -----------------------------------------------------------------------------
|
|
141
|
-
// 8. 斷點 (Breakpoints)
|
|
142
|
-
// -----------------------------------------------------------------------------
|
|
143
|
-
|
|
144
|
-
$breakpoint-xs: 0;
|
|
145
|
-
$breakpoint-sm: 750px;
|
|
146
|
-
$breakpoint-md: 1100px;
|
|
147
|
-
$breakpoint-lg: 1460px;
|
|
148
|
-
|
|
149
|
-
// 斷點 Mixin
|
|
150
|
-
@mixin sm-up {
|
|
151
|
-
@media (min-width: $breakpoint-sm) { @content; }
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
@mixin md-up {
|
|
155
|
-
@media (min-width: $breakpoint-md) { @content; }
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
@mixin lg-up {
|
|
159
|
-
@media (min-width: $breakpoint-lg) { @content; }
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
// -----------------------------------------------------------------------------
|
|
163
|
-
// 9. 組件專用變數
|
|
164
|
-
// -----------------------------------------------------------------------------
|
|
165
|
-
|
|
166
|
-
// Input
|
|
167
|
-
$input-padding: 15px 10px;
|
|
168
|
-
$input-border-radius: $radius-sm;
|
|
169
|
-
|
|
170
|
-
// Button
|
|
171
|
-
$button-padding-sm: 2px 8px;
|
|
172
|
-
$button-padding-md: 4px 12px;
|
|
173
|
-
$button-padding-lg: 8px 16px;
|
|
174
|
-
$button-border-radius: $radius-lg;
|
|
175
|
-
|
|
176
|
-
// Card
|
|
177
|
-
$card-padding: $spacing-lg;
|
|
178
|
-
$card-border-radius: $radius-lg;
|
|
179
|
-
$card-shadow: $shadow-md;
|
|
180
|
-
|