@uniai-fe/uds-primitives 0.0.21 → 0.1.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/styles.css +251 -268
- package/package.json +2 -2
- package/src/components/alternate/styles/index.scss +0 -1
- package/src/components/badge/styles/index.scss +0 -1
- package/src/components/button/styles/button.scss +2 -1
- package/src/components/calendar/styles/index.scss +0 -1
- package/src/components/divider/styles/divider.scss +2 -1
- package/src/components/dropdown/styles/index.scss +0 -1
- package/src/components/label/styles/index.scss +0 -1
- package/src/components/scrollbar/styles/index.scss +0 -1
- package/src/components/select/styles/index.scss +0 -1
- package/src/components/spinner/styles/index.scss +0 -1
- package/src/components/table/styles/index.scss +0 -1
- package/src/index.scss +0 -2
package/dist/styles.css
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
/* 모든 primitives component SCSS를 한 번에 노출해 서비스 import 부담을 줄인다.
|
|
3
|
-
※ foundation CSS(`@uniai-fe/uds-foundation/css`)는 소비자가 별도로 한 번만 로드해야 한다. */
|
|
4
|
-
/* TODO(alternate): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
5
|
-
/* Badge 토큰을 foundation 변수에 맞춰 한 번 더 래핑해 override 여지를 둔다. */
|
|
6
2
|
.uds-theme-root {
|
|
7
3
|
--theme-badge-height-xsmall: var(--theme-size-small-1, 20px);
|
|
8
4
|
--theme-badge-height-small: var(--theme-size-small-2, 24px);
|
|
@@ -15,6 +11,247 @@
|
|
|
15
11
|
--theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
|
|
16
12
|
--theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
|
|
17
13
|
--theme-badge-dot-size: var(--spacing-gap-3, 8px);
|
|
14
|
+
/* spacing */
|
|
15
|
+
--theme-button-gap-1: var(--spacing-gap-1);
|
|
16
|
+
--theme-button-gap-2: var(--spacing-gap-2);
|
|
17
|
+
--theme-button-gap-3: var(--spacing-gap-3);
|
|
18
|
+
--theme-button-padding-1: var(--spacing-padding-1);
|
|
19
|
+
--theme-button-padding-2: var(--spacing-padding-2);
|
|
20
|
+
--theme-button-padding-3: var(--spacing-padding-3);
|
|
21
|
+
--theme-button-padding-4: var(--spacing-padding-4);
|
|
22
|
+
--theme-button-padding-5: var(--spacing-padding-5);
|
|
23
|
+
--theme-button-padding-6: var(--spacing-padding-6);
|
|
24
|
+
--theme-button-padding-7: var(--spacing-padding-7);
|
|
25
|
+
--theme-button-padding-9: var(--spacing-padding-9);
|
|
26
|
+
--theme-button-min-width: var(--theme-size-small-2);
|
|
27
|
+
--theme-button-text-padding-block: var(--spacing-padding-4, 8px);
|
|
28
|
+
--theme-button-text-padding-inline-small: var(--spacing-padding-4, 8px);
|
|
29
|
+
--theme-button-text-padding-inline-medium: var(--spacing-padding-5, 12px);
|
|
30
|
+
--theme-button-text-padding-inline-large: var(--spacing-padding-5, 12px);
|
|
31
|
+
--theme-button-text-min-height-small: var(--theme-size-small-1, 20px);
|
|
32
|
+
--theme-button-text-min-height-medium: var(--theme-size-small-2, 24px);
|
|
33
|
+
--theme-button-text-min-height-large: var(--theme-size-small-3, 32px);
|
|
34
|
+
--theme-button-text-radius: var(--theme-radius-small, 4px);
|
|
35
|
+
--theme-button-round-padding-inline-small: var(--spacing-padding-5, 12px);
|
|
36
|
+
--theme-button-round-padding-inline-medium: var(--spacing-padding-6, 16px);
|
|
37
|
+
--theme-button-round-padding-inline-large: var(--spacing-padding-7, 20px);
|
|
38
|
+
--theme-button-round-padding-block: var(--spacing-padding-2, 4px);
|
|
39
|
+
--theme-button-round-min-height-small: var(--theme-size-small-2, 24px);
|
|
40
|
+
--theme-button-round-min-height-medium: var(--theme-size-small-3, 32px);
|
|
41
|
+
--theme-button-round-min-height-large: var(--theme-size-medium-1, 40px);
|
|
42
|
+
--theme-button-round-radius-small: var(--theme-radius-xlarge-2, 16px);
|
|
43
|
+
--theme-button-round-radius-medium: var(--theme-radius-xlarge-2, 16px);
|
|
44
|
+
--theme-button-round-radius-large: 30px;
|
|
45
|
+
/* size/radius */
|
|
46
|
+
--theme-button-size-small-1: var(--theme-size-small-1);
|
|
47
|
+
--theme-button-size-small-2: var(--theme-size-small-2);
|
|
48
|
+
--theme-button-size-small-3: var(--theme-size-small-3);
|
|
49
|
+
--theme-button-size-medium-1: var(--theme-size-medium-1);
|
|
50
|
+
--theme-button-size-medium-2: var(--theme-size-medium-2);
|
|
51
|
+
--theme-button-size-medium-3: var(--theme-size-medium-3);
|
|
52
|
+
--theme-button-radius-medium-1: var(--theme-radius-medium-1);
|
|
53
|
+
--theme-button-radius-medium-3: var(--theme-radius-medium-3);
|
|
54
|
+
--theme-button-radius-large-1: var(--theme-radius-large-1);
|
|
55
|
+
--theme-button-radius-large-2: var(--theme-radius-large-2);
|
|
56
|
+
--theme-button-radius-small: var(--theme-radius-small);
|
|
57
|
+
--theme-button-radius-xlarge: var(--theme-radius-xlarge);
|
|
58
|
+
/* typography */
|
|
59
|
+
--theme-button-font-body-medium-family: var(--font-body-medium-family);
|
|
60
|
+
--theme-button-font-body-medium-size: var(--font-body-medium-size);
|
|
61
|
+
--theme-button-font-body-medium-weight: var(--font-body-medium-weight);
|
|
62
|
+
--theme-button-font-body-medium-line-height: var(
|
|
63
|
+
--font-body-medium-line-height
|
|
64
|
+
);
|
|
65
|
+
--theme-button-font-body-medium-letter-spacing: var(
|
|
66
|
+
--font-body-medium-letter-spacing
|
|
67
|
+
);
|
|
68
|
+
--theme-button-font-label-medium-size: var(--font-label-medium-size);
|
|
69
|
+
--theme-button-font-label-medium-weight: var(--font-label-medium-weight);
|
|
70
|
+
--theme-button-font-label-medium-line-height: var(
|
|
71
|
+
--font-label-medium-line-height
|
|
72
|
+
);
|
|
73
|
+
--theme-button-font-label-medium-letter-spacing: var(
|
|
74
|
+
--font-label-medium-letter-spacing
|
|
75
|
+
);
|
|
76
|
+
--theme-button-font-label-large-size: var(--font-label-large-size);
|
|
77
|
+
--theme-button-font-label-large-weight: var(--font-label-large-weight);
|
|
78
|
+
--theme-button-font-label-large-line-height: var(
|
|
79
|
+
--font-label-large-line-height
|
|
80
|
+
);
|
|
81
|
+
--theme-button-font-label-large-letter-spacing: var(
|
|
82
|
+
--font-label-large-letter-spacing
|
|
83
|
+
);
|
|
84
|
+
--theme-button-font-body-large-size: var(--font-body-large-size);
|
|
85
|
+
--theme-button-font-body-large-weight: var(--font-body-large-weight);
|
|
86
|
+
--theme-button-font-body-large-line-height: var(
|
|
87
|
+
--font-body-large-line-height
|
|
88
|
+
);
|
|
89
|
+
--theme-button-font-body-large-letter-spacing: var(
|
|
90
|
+
--font-body-large-letter-spacing
|
|
91
|
+
);
|
|
92
|
+
--theme-button-font-weight: 400;
|
|
93
|
+
/* colors */
|
|
94
|
+
--theme-button-color-neutral-base: var(--color-neutral-20);
|
|
95
|
+
--theme-button-color-common-100: var(--color-common-100);
|
|
96
|
+
--theme-button-color-primary-default: var(--color-primary-default);
|
|
97
|
+
--theme-button-color-primary-strong: var(--color-primary-strong);
|
|
98
|
+
--theme-button-color-primary-heavy: var(--color-primary-heavy);
|
|
99
|
+
--theme-button-color-secondary-default: var(--color-secondary-default);
|
|
100
|
+
--theme-button-color-secondary-strong: var(--color-secondary-strong);
|
|
101
|
+
--theme-button-color-secondary-heavy: var(--color-secondary-heavy);
|
|
102
|
+
--theme-button-color-tertiary-default: var(--color-tertiary-default);
|
|
103
|
+
--theme-button-color-tertiary-strong: var(--color-tertiary-strong);
|
|
104
|
+
--theme-button-color-tertiary-heavy: var(--color-tertiary-heavy);
|
|
105
|
+
--theme-button-color-blue-90: var(--color-blue-90);
|
|
106
|
+
--theme-button-color-blue-50: var(--color-blue-50);
|
|
107
|
+
--theme-button-color-blue-45: var(--color-blue-45);
|
|
108
|
+
--theme-button-overlay-solid-tertiary-bg: var(--color-bg-surface-strong);
|
|
109
|
+
/* Confirm dialog cancel 버튼을 위한 solid tertiary 색상 정의 */
|
|
110
|
+
--theme-button-tertiary-solid-bg: var(--color-bg-surface-neutral);
|
|
111
|
+
--theme-button-tertiary-solid-hover-bg: var(--color-bg-surface-strong);
|
|
112
|
+
--theme-button-tertiary-solid-pressed-bg: var(--color-bg-surface-strong);
|
|
113
|
+
--theme-button-tertiary-solid-foreground: var(--color-label-neutral);
|
|
114
|
+
--theme-button-secondary-solid-bg: var(--color-blue-95, #e5eeff);
|
|
115
|
+
--theme-button-secondary-solid-hover-bg: #dbe9ff;
|
|
116
|
+
--theme-button-secondary-solid-pressed-bg: #ccdeff;
|
|
117
|
+
--theme-button-color-cool-gray-90: var(--color-cool-gray-90);
|
|
118
|
+
--theme-button-color-cool-gray-95: var(--color-cool-gray-95);
|
|
119
|
+
--theme-button-color-cool-gray-10: var(--color-cool-gray-10);
|
|
120
|
+
--theme-button-color-bg-surface-standard: var(--color-bg-surface-standard);
|
|
121
|
+
--theme-button-color-bg-alternative-cool-gray: var(
|
|
122
|
+
--color-bg-alternative-cool-gray
|
|
123
|
+
);
|
|
124
|
+
--theme-button-color-bg-surface-strong: var(--color-bg-surface-strong);
|
|
125
|
+
--theme-button-color-label-disabled: var(--color-label-disabled);
|
|
126
|
+
/* overlays */
|
|
127
|
+
--theme-button-overlay-solid-secondary-bg: var(--color-blue-90);
|
|
128
|
+
--theme-button-overlay-outlined-primary-bg: var(--color-blue-90);
|
|
129
|
+
--theme-button-overlay-outlined-secondary-bg: var(--color-cool-gray-95);
|
|
130
|
+
--theme-button-overlay-outlined-tertiary-bg: var(--color-cool-gray-95);
|
|
131
|
+
--theme-checkbox-frame-size-medium: 20px;
|
|
132
|
+
--theme-checkbox-frame-size-large: 24px;
|
|
133
|
+
--theme-checkbox-indicator-size-medium: 16px;
|
|
134
|
+
--theme-checkbox-indicator-size-large: 20px;
|
|
135
|
+
--theme-checkbox-control-radius-medium: var(--theme-radius-xsmall-3, 3px);
|
|
136
|
+
--theme-checkbox-control-radius-large: var(--theme-radius-small-1, 4px);
|
|
137
|
+
--theme-checkbox-border-width: 1.4px;
|
|
138
|
+
--theme-checkbox-border-color: var(--color-border-standard-assistive);
|
|
139
|
+
--theme-checkbox-border-selected: var(--color-primary-default);
|
|
140
|
+
--theme-checkbox-surface: var(--color-common-100);
|
|
141
|
+
--theme-checkbox-surface-selected: var(--color-primary-default);
|
|
142
|
+
--theme-checkbox-surface-disabled: var(--color-neutral-95);
|
|
143
|
+
--theme-checkbox-surface-selected-disabled: rgba(26, 106, 255, 0.28);
|
|
144
|
+
--theme-checkbox-label-color: var(--color-label-strong);
|
|
145
|
+
--theme-checkbox-label-disabled: var(--color-label-disabled);
|
|
146
|
+
--theme-checkbox-helper-color: var(--color-label-neutral);
|
|
147
|
+
--theme-checkbox-helper-disabled: var(--color-label-disabled);
|
|
148
|
+
--theme-checkbox-icon-default: transparent;
|
|
149
|
+
--theme-checkbox-icon-selected: var(--color-common-100);
|
|
150
|
+
--theme-checkbox-icon-disabled-selected: var(--color-common-100);
|
|
151
|
+
--theme-checkbox-focus-ring: rgba(2, 84, 255, 0.32);
|
|
152
|
+
--theme-chip-height: var(--theme-size-small-3, 32px);
|
|
153
|
+
--theme-chip-padding-inline: var(--spacing-padding-5, 12px);
|
|
154
|
+
--theme-chip-radius: var(--theme-radius-medium-3, 8px);
|
|
155
|
+
--theme-chip-rounded-radius: var(--theme-radius-large-2, 16px);
|
|
156
|
+
--theme-chip-font-family: var(--font-body-medium-family, "Pretendard");
|
|
157
|
+
--theme-chip-font-size: var(--font-body-xsmall-size, 13px);
|
|
158
|
+
--theme-chip-font-weight: var(--font-body-xsmall-weight, 400);
|
|
159
|
+
--drawer-overlay-bg: rgba(0, 0, 0, 0.44);
|
|
160
|
+
--drawer-surface-bg: var(--color-bg-surface-static-white);
|
|
161
|
+
--drawer-radius-large: var(--theme-radius-large-2);
|
|
162
|
+
--drawer-radius-medium: var(--theme-radius-large-1);
|
|
163
|
+
--drawer-body-color: var(--color-label-standard);
|
|
164
|
+
--drawer-title-color: var(--color-label-strong);
|
|
165
|
+
--drawer-gap: calc(var(--spacing-gap-9, 28px) + 2px);
|
|
166
|
+
--drawer-padding-x: calc(var(--spacing-padding-10, 32px) - 2px);
|
|
167
|
+
--drawer-padding-top: var(--spacing-padding-7, 20px);
|
|
168
|
+
--drawer-padding-bottom: calc(
|
|
169
|
+
var(--spacing-padding-11, 40px) + var(--spacing-padding-7, 20px)
|
|
170
|
+
);
|
|
171
|
+
--drawer-footer-gap: var(--spacing-gap-6, 16px);
|
|
172
|
+
--drawer-section-gap: var(--spacing-gap-6, 16px);
|
|
173
|
+
--drawer-handle-width: calc(
|
|
174
|
+
var(--spacing-padding-11, 40px) + var(--spacing-padding-7, 20px)
|
|
175
|
+
);
|
|
176
|
+
--drawer-handle-height: var(--spacing-padding-2, 4px);
|
|
177
|
+
--drawer-handle-bg: var(--color-border-standard-cool-gray);
|
|
178
|
+
--drawer-close-size: 36px;
|
|
179
|
+
--drawer-drag-offset: 0px;
|
|
180
|
+
--theme-input-height-small: var(--theme-size-medium-1);
|
|
181
|
+
--theme-input-height-medium: var(--theme-size-medium-2);
|
|
182
|
+
--theme-input-height-large: var(--theme-size-medium-3);
|
|
183
|
+
--theme-input-height-tertiary: calc(var(--theme-size-medium-2) + 24px);
|
|
184
|
+
--theme-input-padding-x: var(--spacing-padding-6);
|
|
185
|
+
--theme-input-padding-y: var(--spacing-padding-4);
|
|
186
|
+
--theme-input-gap: var(--spacing-gap-4);
|
|
187
|
+
--theme-input-radius-default: var(--theme-radius-large-1);
|
|
188
|
+
--theme-input-radius-tertiary: var(--theme-radius-large-2);
|
|
189
|
+
--theme-input-label-color: var(--color-label-standard);
|
|
190
|
+
--theme-input-helper-color: var(--color-label-neutral);
|
|
191
|
+
--theme-input-helper-success-color: var(--color-success);
|
|
192
|
+
--theme-input-helper-error-color: var(--color-error);
|
|
193
|
+
--theme-input-helper-disabled-color: var(--color-label-disabled);
|
|
194
|
+
--theme-input-label-accent-color: var(--color-primary-default);
|
|
195
|
+
--theme-input-label-error-color: var(--color-error);
|
|
196
|
+
--theme-input-placeholder-color: var(--color-label-alternative);
|
|
197
|
+
--theme-input-text-color: var(--color-label-strong);
|
|
198
|
+
--theme-input-border-color: var(--color-border-standard-cool-gray);
|
|
199
|
+
--theme-input-border-width-default: 1px;
|
|
200
|
+
--theme-input-border-width-emphasis: 1.4px;
|
|
201
|
+
--theme-input-border-active: #99bdff;
|
|
202
|
+
--theme-input-border-success: #99bdff;
|
|
203
|
+
--theme-input-border-error: rgba(218, 29, 11, 0.44);
|
|
204
|
+
--theme-input-border-disabled: var(--color-border-standard-cool-gray);
|
|
205
|
+
--theme-input-border-underline-disabled: var(
|
|
206
|
+
--color-border-standard-assistive
|
|
207
|
+
);
|
|
208
|
+
--theme-input-surface: var(--color-common-100);
|
|
209
|
+
--theme-input-surface-muted: var(--color-neutral-99);
|
|
210
|
+
--theme-input-surface-disabled: var(--color-neutral-95);
|
|
211
|
+
--theme-navigation-height: 86px;
|
|
212
|
+
--theme-navigation-padding-inline: 32px;
|
|
213
|
+
--theme-navigation-padding-block-start: 8px;
|
|
214
|
+
--theme-navigation-padding-block-end: 20px;
|
|
215
|
+
--theme-navigation-item-gap: 2px;
|
|
216
|
+
--theme-navigation-icon-size: 24px;
|
|
217
|
+
--theme-navigation-label-font-size: 12px;
|
|
218
|
+
--theme-navigation-label-line-height: 1.4;
|
|
219
|
+
--theme-navigation-label-font-weight: 500;
|
|
220
|
+
--theme-navigation-label-letter-spacing: -0.12px;
|
|
221
|
+
--theme-navigation-bg: var(--color-common-100, #ffffff);
|
|
222
|
+
--theme-navigation-border: var(--color-border-standard-assistive, #e4e5e7);
|
|
223
|
+
--theme-navigation-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
|
|
224
|
+
--theme-navigation-color: var(--color-label-strong, #3d3f43);
|
|
225
|
+
--theme-navigation-color-active: var(--color-primary-default, #0061ff);
|
|
226
|
+
--theme-navigation-color-disabled: var(--color-label-disabled, #c5c6cc);
|
|
227
|
+
--theme-radio-frame-size-medium: 20px;
|
|
228
|
+
--theme-radio-frame-size-large: 24px;
|
|
229
|
+
--theme-radio-indicator-size-medium: 16px;
|
|
230
|
+
--theme-radio-indicator-size-large: 20px;
|
|
231
|
+
--theme-radio-indicator-border-width: 1.4px;
|
|
232
|
+
--theme-radio-indicator-border-width-selected-medium: 4px;
|
|
233
|
+
--theme-radio-indicator-border-width-selected-large: 6px;
|
|
234
|
+
--theme-radio-border-color: var(--color-border-standard-assistive);
|
|
235
|
+
--theme-radio-border-selected: var(--color-primary-default);
|
|
236
|
+
--theme-radio-surface-selected: var(--color-primary-default);
|
|
237
|
+
--theme-radio-surface-disabled: var(--color-border-standard-assistive);
|
|
238
|
+
--theme-radio-border-disabled: var(--color-border-standard-assistive);
|
|
239
|
+
--theme-radio-disabled-selected-fill: var(--color-primary-default);
|
|
240
|
+
--theme-radio-label-color: var(--color-label-strong);
|
|
241
|
+
--theme-radio-label-disabled: var(--color-label-disabled);
|
|
242
|
+
--theme-radio-helper-color: var(--color-label-neutral);
|
|
243
|
+
--theme-radio-helper-disabled: var(--color-label-disabled);
|
|
244
|
+
--theme-radio-card-background: var(--color-common-100);
|
|
245
|
+
--theme-radio-card-title-color: var(--color-label-strong);
|
|
246
|
+
--theme-radio-card-description-color: var(--color-label-neutral);
|
|
247
|
+
--theme-radio-card-badge-background: var(--color-bg-surface-static-blue);
|
|
248
|
+
--theme-radio-card-badge-color: var(--color-primary-default);
|
|
249
|
+
--theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
|
|
250
|
+
--theme-radio-disabled-selected-opacity: 0.28;
|
|
251
|
+
--divider-width: 1px;
|
|
252
|
+
--divider-height: 12px;
|
|
253
|
+
--divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
|
|
254
|
+
--divider-margin: var(--spacing-gap-4, 8px);
|
|
18
255
|
}
|
|
19
256
|
|
|
20
257
|
.badge {
|
|
@@ -190,125 +427,8 @@
|
|
|
190
427
|
--badge-dot-color: var(--color-red-55, #f43625);
|
|
191
428
|
}
|
|
192
429
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
--theme-button-gap-1: var(--spacing-gap-1);
|
|
196
|
-
--theme-button-gap-2: var(--spacing-gap-2);
|
|
197
|
-
--theme-button-gap-3: var(--spacing-gap-3);
|
|
198
|
-
--theme-button-padding-1: var(--spacing-padding-1);
|
|
199
|
-
--theme-button-padding-2: var(--spacing-padding-2);
|
|
200
|
-
--theme-button-padding-3: var(--spacing-padding-3);
|
|
201
|
-
--theme-button-padding-4: var(--spacing-padding-4);
|
|
202
|
-
--theme-button-padding-5: var(--spacing-padding-5);
|
|
203
|
-
--theme-button-padding-6: var(--spacing-padding-6);
|
|
204
|
-
--theme-button-padding-7: var(--spacing-padding-7);
|
|
205
|
-
--theme-button-padding-9: var(--spacing-padding-9);
|
|
206
|
-
--theme-button-min-width: var(--theme-size-small-2);
|
|
207
|
-
--theme-button-text-padding-block: var(--spacing-padding-4, 8px);
|
|
208
|
-
--theme-button-text-padding-inline-small: var(--spacing-padding-4, 8px);
|
|
209
|
-
--theme-button-text-padding-inline-medium: var(--spacing-padding-5, 12px);
|
|
210
|
-
--theme-button-text-padding-inline-large: var(--spacing-padding-5, 12px);
|
|
211
|
-
--theme-button-text-min-height-small: var(--theme-size-small-1, 20px);
|
|
212
|
-
--theme-button-text-min-height-medium: var(--theme-size-small-2, 24px);
|
|
213
|
-
--theme-button-text-min-height-large: var(--theme-size-small-3, 32px);
|
|
214
|
-
--theme-button-text-radius: var(--theme-radius-small, 4px);
|
|
215
|
-
--theme-button-round-padding-inline-small: var(--spacing-padding-5, 12px);
|
|
216
|
-
--theme-button-round-padding-inline-medium: var(--spacing-padding-6, 16px);
|
|
217
|
-
--theme-button-round-padding-inline-large: var(--spacing-padding-7, 20px);
|
|
218
|
-
--theme-button-round-padding-block: var(--spacing-padding-2, 4px);
|
|
219
|
-
--theme-button-round-min-height-small: var(--theme-size-small-2, 24px);
|
|
220
|
-
--theme-button-round-min-height-medium: var(--theme-size-small-3, 32px);
|
|
221
|
-
--theme-button-round-min-height-large: var(--theme-size-medium-1, 40px);
|
|
222
|
-
--theme-button-round-radius-small: var(--theme-radius-xlarge-2, 16px);
|
|
223
|
-
--theme-button-round-radius-medium: var(--theme-radius-xlarge-2, 16px);
|
|
224
|
-
--theme-button-round-radius-large: 30px;
|
|
225
|
-
/* size/radius */
|
|
226
|
-
--theme-button-size-small-1: var(--theme-size-small-1);
|
|
227
|
-
--theme-button-size-small-2: var(--theme-size-small-2);
|
|
228
|
-
--theme-button-size-small-3: var(--theme-size-small-3);
|
|
229
|
-
--theme-button-size-medium-1: var(--theme-size-medium-1);
|
|
230
|
-
--theme-button-size-medium-2: var(--theme-size-medium-2);
|
|
231
|
-
--theme-button-size-medium-3: var(--theme-size-medium-3);
|
|
232
|
-
--theme-button-radius-medium-1: var(--theme-radius-medium-1);
|
|
233
|
-
--theme-button-radius-medium-3: var(--theme-radius-medium-3);
|
|
234
|
-
--theme-button-radius-large-1: var(--theme-radius-large-1);
|
|
235
|
-
--theme-button-radius-large-2: var(--theme-radius-large-2);
|
|
236
|
-
--theme-button-radius-small: var(--theme-radius-small);
|
|
237
|
-
--theme-button-radius-xlarge: var(--theme-radius-xlarge);
|
|
238
|
-
/* typography */
|
|
239
|
-
--theme-button-font-body-medium-family: var(--font-body-medium-family);
|
|
240
|
-
--theme-button-font-body-medium-size: var(--font-body-medium-size);
|
|
241
|
-
--theme-button-font-body-medium-weight: var(--font-body-medium-weight);
|
|
242
|
-
--theme-button-font-body-medium-line-height: var(
|
|
243
|
-
--font-body-medium-line-height
|
|
244
|
-
);
|
|
245
|
-
--theme-button-font-body-medium-letter-spacing: var(
|
|
246
|
-
--font-body-medium-letter-spacing
|
|
247
|
-
);
|
|
248
|
-
--theme-button-font-label-medium-size: var(--font-label-medium-size);
|
|
249
|
-
--theme-button-font-label-medium-weight: var(--font-label-medium-weight);
|
|
250
|
-
--theme-button-font-label-medium-line-height: var(
|
|
251
|
-
--font-label-medium-line-height
|
|
252
|
-
);
|
|
253
|
-
--theme-button-font-label-medium-letter-spacing: var(
|
|
254
|
-
--font-label-medium-letter-spacing
|
|
255
|
-
);
|
|
256
|
-
--theme-button-font-label-large-size: var(--font-label-large-size);
|
|
257
|
-
--theme-button-font-label-large-weight: var(--font-label-large-weight);
|
|
258
|
-
--theme-button-font-label-large-line-height: var(
|
|
259
|
-
--font-label-large-line-height
|
|
260
|
-
);
|
|
261
|
-
--theme-button-font-label-large-letter-spacing: var(
|
|
262
|
-
--font-label-large-letter-spacing
|
|
263
|
-
);
|
|
264
|
-
--theme-button-font-body-large-size: var(--font-body-large-size);
|
|
265
|
-
--theme-button-font-body-large-weight: var(--font-body-large-weight);
|
|
266
|
-
--theme-button-font-body-large-line-height: var(
|
|
267
|
-
--font-body-large-line-height
|
|
268
|
-
);
|
|
269
|
-
--theme-button-font-body-large-letter-spacing: var(
|
|
270
|
-
--font-body-large-letter-spacing
|
|
271
|
-
);
|
|
272
|
-
--theme-button-font-weight: 400;
|
|
273
|
-
/* colors */
|
|
274
|
-
--theme-button-color-neutral-base: var(--color-neutral-20);
|
|
275
|
-
--theme-button-color-common-100: var(--color-common-100);
|
|
276
|
-
--theme-button-color-primary-default: var(--color-primary-default);
|
|
277
|
-
--theme-button-color-primary-strong: var(--color-primary-strong);
|
|
278
|
-
--theme-button-color-primary-heavy: var(--color-primary-heavy);
|
|
279
|
-
--theme-button-color-secondary-default: var(--color-secondary-default);
|
|
280
|
-
--theme-button-color-secondary-strong: var(--color-secondary-strong);
|
|
281
|
-
--theme-button-color-secondary-heavy: var(--color-secondary-heavy);
|
|
282
|
-
--theme-button-color-tertiary-default: var(--color-tertiary-default);
|
|
283
|
-
--theme-button-color-tertiary-strong: var(--color-tertiary-strong);
|
|
284
|
-
--theme-button-color-tertiary-heavy: var(--color-tertiary-heavy);
|
|
285
|
-
--theme-button-color-blue-90: var(--color-blue-90);
|
|
286
|
-
--theme-button-color-blue-50: var(--color-blue-50);
|
|
287
|
-
--theme-button-color-blue-45: var(--color-blue-45);
|
|
288
|
-
--theme-button-overlay-solid-tertiary-bg: var(--color-bg-surface-strong);
|
|
289
|
-
/* Confirm dialog cancel 버튼을 위한 solid tertiary 색상 정의 */
|
|
290
|
-
--theme-button-tertiary-solid-bg: var(--color-bg-surface-neutral);
|
|
291
|
-
--theme-button-tertiary-solid-hover-bg: var(--color-bg-surface-strong);
|
|
292
|
-
--theme-button-tertiary-solid-pressed-bg: var(--color-bg-surface-strong);
|
|
293
|
-
--theme-button-tertiary-solid-foreground: var(--color-label-neutral);
|
|
294
|
-
--theme-button-secondary-solid-bg: var(--color-blue-95, #e5eeff);
|
|
295
|
-
--theme-button-secondary-solid-hover-bg: #dbe9ff;
|
|
296
|
-
--theme-button-secondary-solid-pressed-bg: #ccdeff;
|
|
297
|
-
--theme-button-color-cool-gray-90: var(--color-cool-gray-90);
|
|
298
|
-
--theme-button-color-cool-gray-95: var(--color-cool-gray-95);
|
|
299
|
-
--theme-button-color-cool-gray-10: var(--color-cool-gray-10);
|
|
300
|
-
--theme-button-color-bg-surface-standard: var(--color-bg-surface-standard);
|
|
301
|
-
--theme-button-color-bg-alternative-cool-gray: var(
|
|
302
|
-
--color-bg-alternative-cool-gray
|
|
303
|
-
);
|
|
304
|
-
--theme-button-color-bg-surface-strong: var(--color-bg-surface-strong);
|
|
305
|
-
--theme-button-color-label-disabled: var(--color-label-disabled);
|
|
306
|
-
/* overlays */
|
|
307
|
-
--theme-button-overlay-solid-secondary-bg: var(--color-blue-90);
|
|
308
|
-
--theme-button-overlay-outlined-primary-bg: var(--color-blue-90);
|
|
309
|
-
--theme-button-overlay-outlined-secondary-bg: var(--color-cool-gray-95);
|
|
310
|
-
--theme-button-overlay-outlined-tertiary-bg: var(--color-cool-gray-95);
|
|
311
|
-
}
|
|
430
|
+
/* 버튼 전용 토큰은 theme root에서 한 번만 정의한다. */
|
|
431
|
+
|
|
312
432
|
|
|
313
433
|
/* Primitives 버튼 공통 스타일 */
|
|
314
434
|
.button {
|
|
@@ -685,30 +805,7 @@
|
|
|
685
805
|
border-radius: var(--theme-button-round-radius-large, 30px);
|
|
686
806
|
}
|
|
687
807
|
|
|
688
|
-
|
|
689
|
-
.uds-theme-root {
|
|
690
|
-
--theme-checkbox-frame-size-medium: 20px;
|
|
691
|
-
--theme-checkbox-frame-size-large: 24px;
|
|
692
|
-
--theme-checkbox-indicator-size-medium: 16px;
|
|
693
|
-
--theme-checkbox-indicator-size-large: 20px;
|
|
694
|
-
--theme-checkbox-control-radius-medium: var(--theme-radius-xsmall-3, 3px);
|
|
695
|
-
--theme-checkbox-control-radius-large: var(--theme-radius-small-1, 4px);
|
|
696
|
-
--theme-checkbox-border-width: 1.4px;
|
|
697
|
-
--theme-checkbox-border-color: var(--color-border-standard-assistive);
|
|
698
|
-
--theme-checkbox-border-selected: var(--color-primary-default);
|
|
699
|
-
--theme-checkbox-surface: var(--color-common-100);
|
|
700
|
-
--theme-checkbox-surface-selected: var(--color-primary-default);
|
|
701
|
-
--theme-checkbox-surface-disabled: var(--color-neutral-95);
|
|
702
|
-
--theme-checkbox-surface-selected-disabled: rgba(26, 106, 255, 0.28);
|
|
703
|
-
--theme-checkbox-label-color: var(--color-label-strong);
|
|
704
|
-
--theme-checkbox-label-disabled: var(--color-label-disabled);
|
|
705
|
-
--theme-checkbox-helper-color: var(--color-label-neutral);
|
|
706
|
-
--theme-checkbox-helper-disabled: var(--color-label-disabled);
|
|
707
|
-
--theme-checkbox-icon-default: transparent;
|
|
708
|
-
--theme-checkbox-icon-selected: var(--color-common-100);
|
|
709
|
-
--theme-checkbox-icon-disabled-selected: var(--color-common-100);
|
|
710
|
-
--theme-checkbox-focus-ring: rgba(2, 84, 255, 0.32);
|
|
711
|
-
}
|
|
808
|
+
|
|
712
809
|
|
|
713
810
|
.checkbox {
|
|
714
811
|
display: inline-flex;
|
|
@@ -850,15 +947,7 @@
|
|
|
850
947
|
}
|
|
851
948
|
|
|
852
949
|
/* Chip 기본 토큰 래핑 */
|
|
853
|
-
|
|
854
|
-
--theme-chip-height: var(--theme-size-small-3, 32px);
|
|
855
|
-
--theme-chip-padding-inline: var(--spacing-padding-5, 12px);
|
|
856
|
-
--theme-chip-radius: var(--theme-radius-medium-3, 8px);
|
|
857
|
-
--theme-chip-rounded-radius: var(--theme-radius-large-2, 16px);
|
|
858
|
-
--theme-chip-font-family: var(--font-body-medium-family, "Pretendard");
|
|
859
|
-
--theme-chip-font-size: var(--font-body-xsmall-size, 13px);
|
|
860
|
-
--theme-chip-font-weight: var(--font-body-xsmall-weight, 400);
|
|
861
|
-
}
|
|
950
|
+
|
|
862
951
|
|
|
863
952
|
.chip {
|
|
864
953
|
--chip-gap: var(--spacing-gap-1, 4px);
|
|
@@ -984,29 +1073,7 @@ figure.chip {
|
|
|
984
1073
|
height: 100%;
|
|
985
1074
|
}
|
|
986
1075
|
|
|
987
|
-
|
|
988
|
-
--drawer-overlay-bg: rgba(0, 0, 0, 0.44);
|
|
989
|
-
--drawer-surface-bg: var(--color-bg-surface-static-white);
|
|
990
|
-
--drawer-radius-large: var(--theme-radius-large-2);
|
|
991
|
-
--drawer-radius-medium: var(--theme-radius-large-1);
|
|
992
|
-
--drawer-body-color: var(--color-label-standard);
|
|
993
|
-
--drawer-title-color: var(--color-label-strong);
|
|
994
|
-
--drawer-gap: calc(var(--spacing-gap-9, 28px) + 2px);
|
|
995
|
-
--drawer-padding-x: calc(var(--spacing-padding-10, 32px) - 2px);
|
|
996
|
-
--drawer-padding-top: var(--spacing-padding-7, 20px);
|
|
997
|
-
--drawer-padding-bottom: calc(
|
|
998
|
-
var(--spacing-padding-11, 40px) + var(--spacing-padding-7, 20px)
|
|
999
|
-
);
|
|
1000
|
-
--drawer-footer-gap: var(--spacing-gap-6, 16px);
|
|
1001
|
-
--drawer-section-gap: var(--spacing-gap-6, 16px);
|
|
1002
|
-
--drawer-handle-width: calc(
|
|
1003
|
-
var(--spacing-padding-11, 40px) + var(--spacing-padding-7, 20px)
|
|
1004
|
-
);
|
|
1005
|
-
--drawer-handle-height: var(--spacing-padding-2, 4px);
|
|
1006
|
-
--drawer-handle-bg: var(--color-border-standard-cool-gray);
|
|
1007
|
-
--drawer-close-size: 36px;
|
|
1008
|
-
--drawer-drag-offset: 0px;
|
|
1009
|
-
}
|
|
1076
|
+
|
|
1010
1077
|
|
|
1011
1078
|
.drawer-overlay {
|
|
1012
1079
|
position: fixed;
|
|
@@ -1204,40 +1271,7 @@ figure.chip {
|
|
|
1204
1271
|
display: none;
|
|
1205
1272
|
}
|
|
1206
1273
|
|
|
1207
|
-
|
|
1208
|
-
.uds-theme-root {
|
|
1209
|
-
--theme-input-height-small: var(--theme-size-medium-1);
|
|
1210
|
-
--theme-input-height-medium: var(--theme-size-medium-2);
|
|
1211
|
-
--theme-input-height-large: var(--theme-size-medium-3);
|
|
1212
|
-
--theme-input-height-tertiary: calc(var(--theme-size-medium-2) + 24px);
|
|
1213
|
-
--theme-input-padding-x: var(--spacing-padding-6);
|
|
1214
|
-
--theme-input-padding-y: var(--spacing-padding-4);
|
|
1215
|
-
--theme-input-gap: var(--spacing-gap-4);
|
|
1216
|
-
--theme-input-radius-default: var(--theme-radius-large-1);
|
|
1217
|
-
--theme-input-radius-tertiary: var(--theme-radius-large-2);
|
|
1218
|
-
--theme-input-label-color: var(--color-label-standard);
|
|
1219
|
-
--theme-input-helper-color: var(--color-label-neutral);
|
|
1220
|
-
--theme-input-helper-success-color: var(--color-success);
|
|
1221
|
-
--theme-input-helper-error-color: var(--color-error);
|
|
1222
|
-
--theme-input-helper-disabled-color: var(--color-label-disabled);
|
|
1223
|
-
--theme-input-label-accent-color: var(--color-primary-default);
|
|
1224
|
-
--theme-input-label-error-color: var(--color-error);
|
|
1225
|
-
--theme-input-placeholder-color: var(--color-label-alternative);
|
|
1226
|
-
--theme-input-text-color: var(--color-label-strong);
|
|
1227
|
-
--theme-input-border-color: var(--color-border-standard-cool-gray);
|
|
1228
|
-
--theme-input-border-width-default: 1px;
|
|
1229
|
-
--theme-input-border-width-emphasis: 1.4px;
|
|
1230
|
-
--theme-input-border-active: #99bdff;
|
|
1231
|
-
--theme-input-border-success: #99bdff;
|
|
1232
|
-
--theme-input-border-error: rgba(218, 29, 11, 0.44);
|
|
1233
|
-
--theme-input-border-disabled: var(--color-border-standard-cool-gray);
|
|
1234
|
-
--theme-input-border-underline-disabled: var(
|
|
1235
|
-
--color-border-standard-assistive
|
|
1236
|
-
);
|
|
1237
|
-
--theme-input-surface: var(--color-common-100);
|
|
1238
|
-
--theme-input-surface-muted: var(--color-neutral-99);
|
|
1239
|
-
--theme-input-surface-disabled: var(--color-neutral-95);
|
|
1240
|
-
}
|
|
1274
|
+
|
|
1241
1275
|
|
|
1242
1276
|
.input {
|
|
1243
1277
|
display: flex;
|
|
@@ -1617,25 +1651,7 @@ figure.chip {
|
|
|
1617
1651
|
font-weight: var(--font-body-xxsmall-weight);
|
|
1618
1652
|
}
|
|
1619
1653
|
|
|
1620
|
-
|
|
1621
|
-
.uds-theme-root {
|
|
1622
|
-
--theme-navigation-height: 86px;
|
|
1623
|
-
--theme-navigation-padding-inline: 32px;
|
|
1624
|
-
--theme-navigation-padding-block-start: 8px;
|
|
1625
|
-
--theme-navigation-padding-block-end: 20px;
|
|
1626
|
-
--theme-navigation-item-gap: 2px;
|
|
1627
|
-
--theme-navigation-icon-size: 24px;
|
|
1628
|
-
--theme-navigation-label-font-size: 12px;
|
|
1629
|
-
--theme-navigation-label-line-height: 1.4;
|
|
1630
|
-
--theme-navigation-label-font-weight: 500;
|
|
1631
|
-
--theme-navigation-label-letter-spacing: -0.12px;
|
|
1632
|
-
--theme-navigation-bg: var(--color-common-100, #ffffff);
|
|
1633
|
-
--theme-navigation-border: var(--color-border-standard-assistive, #e4e5e7);
|
|
1634
|
-
--theme-navigation-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
|
|
1635
|
-
--theme-navigation-color: var(--color-label-strong, #3d3f43);
|
|
1636
|
-
--theme-navigation-color-active: var(--color-primary-default, #0061ff);
|
|
1637
|
-
--theme-navigation-color-disabled: var(--color-label-disabled, #c5c6cc);
|
|
1638
|
-
}
|
|
1654
|
+
|
|
1639
1655
|
|
|
1640
1656
|
.bottom-navigation {
|
|
1641
1657
|
width: 100%;
|
|
@@ -1900,32 +1916,7 @@ figure.chip {
|
|
|
1900
1916
|
color: var(--pagination-count-total);
|
|
1901
1917
|
}
|
|
1902
1918
|
|
|
1903
|
-
|
|
1904
|
-
--theme-radio-frame-size-medium: 20px;
|
|
1905
|
-
--theme-radio-frame-size-large: 24px;
|
|
1906
|
-
--theme-radio-indicator-size-medium: 16px;
|
|
1907
|
-
--theme-radio-indicator-size-large: 20px;
|
|
1908
|
-
--theme-radio-indicator-border-width: 1.4px;
|
|
1909
|
-
--theme-radio-indicator-border-width-selected-medium: 4px;
|
|
1910
|
-
--theme-radio-indicator-border-width-selected-large: 6px;
|
|
1911
|
-
--theme-radio-border-color: var(--color-border-standard-assistive);
|
|
1912
|
-
--theme-radio-border-selected: var(--color-primary-default);
|
|
1913
|
-
--theme-radio-surface-selected: var(--color-primary-default);
|
|
1914
|
-
--theme-radio-surface-disabled: var(--color-border-standard-assistive);
|
|
1915
|
-
--theme-radio-border-disabled: var(--color-border-standard-assistive);
|
|
1916
|
-
--theme-radio-disabled-selected-fill: var(--color-primary-default);
|
|
1917
|
-
--theme-radio-label-color: var(--color-label-strong);
|
|
1918
|
-
--theme-radio-label-disabled: var(--color-label-disabled);
|
|
1919
|
-
--theme-radio-helper-color: var(--color-label-neutral);
|
|
1920
|
-
--theme-radio-helper-disabled: var(--color-label-disabled);
|
|
1921
|
-
--theme-radio-card-background: var(--color-common-100);
|
|
1922
|
-
--theme-radio-card-title-color: var(--color-label-strong);
|
|
1923
|
-
--theme-radio-card-description-color: var(--color-label-neutral);
|
|
1924
|
-
--theme-radio-card-badge-background: var(--color-bg-surface-static-blue);
|
|
1925
|
-
--theme-radio-card-badge-color: var(--color-primary-default);
|
|
1926
|
-
--theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
|
|
1927
|
-
--theme-radio-disabled-selected-opacity: 0.28;
|
|
1928
|
-
}
|
|
1919
|
+
|
|
1929
1920
|
|
|
1930
1921
|
.radio {
|
|
1931
1922
|
display: inline-flex;
|
|
@@ -2138,7 +2129,6 @@ figure.chip {
|
|
|
2138
2129
|
border-width: var(--theme-radio-indicator-border-width-selected-large);
|
|
2139
2130
|
}
|
|
2140
2131
|
|
|
2141
|
-
/* TODO(scrollbar): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
2142
2132
|
.segmented-control {
|
|
2143
2133
|
--segmented-height: 34px;
|
|
2144
2134
|
--segmented-padding: 2px;
|
|
@@ -2250,8 +2240,6 @@ figure.chip {
|
|
|
2250
2240
|
color: var(--segmented-label-active-color);
|
|
2251
2241
|
}
|
|
2252
2242
|
|
|
2253
|
-
/* TODO(select): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
2254
|
-
/* TODO(spinner): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
2255
2243
|
.tab-root {
|
|
2256
2244
|
/* Figma node 694:4619 측정값을 CSS 변수로 고정해 Storybook과 실 서비스 간 시각 편차를 줄인다. */
|
|
2257
2245
|
--tab-label-font-size: var(--font-heading-xsmall-size, 17px);
|
|
@@ -2442,13 +2430,8 @@ figure.chip {
|
|
|
2442
2430
|
padding: var(--spacing-padding-6) 0;
|
|
2443
2431
|
}
|
|
2444
2432
|
|
|
2445
|
-
/*
|
|
2446
|
-
|
|
2447
|
-
--divider-width: 1px;
|
|
2448
|
-
--divider-height: 12px;
|
|
2449
|
-
--divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
|
|
2450
|
-
--divider-margin: var(--spacing-gap-4, 8px);
|
|
2451
|
-
}
|
|
2433
|
+
/* Divider 토큰도 theme root에 통합한다. */
|
|
2434
|
+
|
|
2452
2435
|
|
|
2453
2436
|
.divider {
|
|
2454
2437
|
width: var(--divider-width);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniai-fe/uds-primitives",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "UNIAI Design System; Primitives Components Package",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"lint": "eslint . --max-warnings=0",
|
|
45
45
|
"typecheck": "tsc --project tsconfig.build.json --noEmit",
|
|
46
46
|
"build": "pnpm format && pnpm typecheck && pnpm css:build",
|
|
47
|
-
"css:build": "sass --load-path=node_modules src/index.scss dist/styles.css --style=expanded --no-source-map",
|
|
47
|
+
"css:build": "sass --load-path=node_modules src/index.scss dist/styles.css --style=expanded --no-source-map && node ./scripts/merge-theme-root.mjs dist/styles.css --selector=.uds-theme-root",
|
|
48
48
|
"dev": "tsc --project tsconfig.build.json --watch --noEmit",
|
|
49
49
|
"module:lint": "pnpm lint",
|
|
50
50
|
"module:typecheck": "pnpm typecheck",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/* TODO(alternate): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/* TODO(calendar): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/* TODO(dropdown): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/* TODO(label): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/* TODO(scrollbar): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/* TODO(select): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/* TODO(spinner): 스타일을 SOT 토큰 값으로 정의한다. */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/* TODO(table): 스타일을 SOT 토큰 값으로 정의한다. */
|