@uniai-fe/uds-primitives 0.12.6 → 0.12.7
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 -838
- package/package.json +9 -9
- package/src/components/button/markup/Base.tsx +3 -2
- package/src/components/button/styles/button.scss +99 -326
- package/src/components/button/styles/round-button.scss +12 -39
- package/src/components/button/styles/text-button.scss +16 -52
- package/src/components/button/styles/variables.scss +33 -55
- package/src/components/button/types/options.ts +7 -4
- package/src/components/button/types/props.ts +11 -14
- package/src/components/button/utils/index.ts +14 -3
- package/src/components/input/markup/date/Template.tsx +33 -83
- package/src/components/input/markup/date/Trigger.tsx +12 -28
- package/src/components/input/markup/date/range/Template.tsx +35 -94
- package/src/components/input/markup/time/Template.tsx +5 -118
- package/src/components/input/markup/time/Trigger.tsx +2 -35
- package/src/components/input/styles/date.scss +1 -1
- package/src/components/input/styles/text.scss +1 -1
- package/src/components/input/types/date.ts +33 -176
- package/src/components/input/types/time.ts +4 -10
- package/src/components/time-picker/markup/Footer.tsx +5 -5
- package/src/components/time-picker/markup/HourSection.tsx +7 -7
- package/src/components/time-picker/markup/MinuteSection.tsx +5 -5
- package/src/components/time-picker/markup/Summary.tsx +2 -2
- package/src/components/time-picker/markup/Template.tsx +11 -11
- package/src/components/time-picker/types/time-picker.ts +0 -6
- package/src/components/time-picker/utils/time.ts +9 -21
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniai-fe/uds-primitives",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.7",
|
|
4
4
|
"description": "UNIAI Design System; Primitives Components Package",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"@radix-ui/react-tooltip": "^1.2.16",
|
|
72
72
|
"@radix-ui/react-visually-hidden": "^1.2.11",
|
|
73
73
|
"clsx": "^2.1.1",
|
|
74
|
-
"dayjs": "^1.11.
|
|
74
|
+
"dayjs": "^1.11.23",
|
|
75
75
|
"react-daum-postcode": "^4.0.0"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
@@ -81,17 +81,17 @@
|
|
|
81
81
|
"@svgr/webpack": "^8.1.0",
|
|
82
82
|
"@types/node": "^24.13.3",
|
|
83
83
|
"@types/react": "^19.2.18",
|
|
84
|
-
"@types/react-dom": "^19.2.
|
|
84
|
+
"@types/react-dom": "^19.2.5",
|
|
85
85
|
"eslint": "^9.39.5",
|
|
86
86
|
"prettier": "^3.9.6",
|
|
87
|
-
"react-hook-form": "^7.
|
|
88
|
-
"sass": "^1.
|
|
87
|
+
"react-hook-form": "^7.86.0",
|
|
88
|
+
"sass": "^1.102.0",
|
|
89
89
|
"typescript": "6.0.3",
|
|
90
|
-
"@uniai-fe/next-devkit": "0.4.
|
|
91
|
-
"@uniai-fe/eslint-config": "0.4.
|
|
92
|
-
"@uniai-fe/
|
|
90
|
+
"@uniai-fe/next-devkit": "0.4.1",
|
|
91
|
+
"@uniai-fe/eslint-config": "0.4.3",
|
|
92
|
+
"@uniai-fe/tsconfig": "0.2.0",
|
|
93
93
|
"@uniai-fe/util-functions": "0.4.3",
|
|
94
|
-
"@uniai-fe/
|
|
94
|
+
"@uniai-fe/uds-foundation": "0.6.0"
|
|
95
95
|
},
|
|
96
96
|
"scripts": {
|
|
97
97
|
"check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",
|
|
@@ -13,14 +13,15 @@ import {
|
|
|
13
13
|
/**
|
|
14
14
|
* Button Component; Default action button
|
|
15
15
|
* @component
|
|
16
|
+
* @desc 필수 fill/size/priority와 상태를 native 또는 custom element에 전달한다.
|
|
16
17
|
* @param {ButtonProps} props
|
|
17
18
|
* @param {ElementType} [props.as="button"] 렌더링할 요소.
|
|
18
19
|
* @param {React.ReactNode} [props.children] 문자열/숫자는 `.button-label`로 래핑하고, 그 외 ReactNode는 그대로 렌더링한다.
|
|
19
|
-
* @param {"solid-xlarge" | "solid-large" | "solid-medium" | "solid-small" | "outlined-xlarge" | "outlined-large" | "outlined-medium" | "outlined-small"} [props.scale]
|
|
20
|
+
* @param {"solid-xlarge" | "solid-large" | "solid-medium" | "solid-small" | "outlined-xlarge" | "outlined-large" | "outlined-medium" | "outlined-small"} [props.scale] deprecated 호환 식별자. Base는 값을 완전히 무시하며 fill/size fallback이 아니다.
|
|
20
21
|
* @param {"solid" | "outlined"} props.fill 채움 스타일.
|
|
21
22
|
* @param {"xlarge" | "large" | "medium" | "small" | "table"} props.size 버튼 크기. `table`은 Table 셀 액션용 compact 규격이다.
|
|
22
23
|
* @param {"primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray"} props.priority semantic color priority.
|
|
23
|
-
* @param {"default" | "readonly" | "disabled"} [props.state="default"] 내부 상태.
|
|
24
|
+
* @param {"default" | "readonly" | "disabled"} [props.state="default"] 내부 상태. 최종 값은 loading → disabled → state 우선순위로 계산된다.
|
|
24
25
|
* @param {boolean} [props.block=false] true면 폭을 100%로 확장한다.
|
|
25
26
|
* @param {"full" | "fit" | "fill" | "auto" | number | string} [props.width] Form.Field width preset 또는 custom width.
|
|
26
27
|
* @param {boolean} [props.loading=false] true면 readonly 상태와 `aria-busy`를 강제한다.
|
|
@@ -4,101 +4,41 @@
|
|
|
4
4
|
/* priority 토큰은 --button-default-{priority}-* 컬러 변수와 연결된다. */
|
|
5
5
|
$button-priorities: (
|
|
6
6
|
primary: (
|
|
7
|
-
solid-bg: var(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
),
|
|
15
|
-
solid-active: var(
|
|
16
|
-
--button-default-primary-solid-active-bg,
|
|
17
|
-
var(--color-blue-45)
|
|
18
|
-
),
|
|
19
|
-
solid-foreground: var(
|
|
20
|
-
--button-default-primary-solid-foreground,
|
|
21
|
-
var(--color-common-100)
|
|
22
|
-
),
|
|
23
|
-
outline-border: var(
|
|
24
|
-
--button-default-primary-outline-border,
|
|
25
|
-
var(--color-primary-default)
|
|
26
|
-
),
|
|
27
|
-
outline-foreground: var(
|
|
28
|
-
--button-default-primary-outline-foreground,
|
|
29
|
-
var(--color-primary-default)
|
|
30
|
-
),
|
|
31
|
-
outline-hover-bg: var(
|
|
32
|
-
--button-default-primary-outline-hover-bg,
|
|
33
|
-
var(--color-primary-default)
|
|
34
|
-
),
|
|
7
|
+
solid-bg: var(--button-default-primary-solid-bg),
|
|
8
|
+
solid-hover: var(--button-default-primary-solid-hover-bg),
|
|
9
|
+
solid-active: var(--button-default-primary-solid-active-bg),
|
|
10
|
+
solid-foreground: var(--button-default-primary-solid-foreground),
|
|
11
|
+
outline-border: var(--button-default-primary-outline-border),
|
|
12
|
+
outline-foreground: var(--button-default-primary-outline-foreground),
|
|
13
|
+
outline-hover-bg: var(--button-default-primary-outline-hover-bg),
|
|
35
14
|
outline-hover-foreground: var(
|
|
36
|
-
--button-default-primary-outline-hover-foreground
|
|
37
|
-
var(--color-common-100)
|
|
15
|
+
--button-default-primary-outline-hover-foreground
|
|
38
16
|
),
|
|
39
17
|
outline-active-bg: var(--button-default-primary-solid-bg),
|
|
40
18
|
),
|
|
41
19
|
secondary: (
|
|
42
|
-
solid-bg: var(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
--button-default-secondary-solid-foreground,
|
|
50
|
-
var(--color-primary-default)
|
|
51
|
-
),
|
|
52
|
-
outline-border: var(
|
|
53
|
-
--button-default-secondary-outline-border,
|
|
54
|
-
var(--color-cool-gray-90)
|
|
55
|
-
),
|
|
56
|
-
outline-foreground: var(
|
|
57
|
-
--button-default-secondary-outline-foreground,
|
|
58
|
-
var(--color-primary-default)
|
|
59
|
-
),
|
|
60
|
-
outline-hover-bg: var(
|
|
61
|
-
--button-default-secondary-outline-hover-bg,
|
|
62
|
-
var(--color-blue-90)
|
|
63
|
-
),
|
|
20
|
+
solid-bg: var(--button-default-secondary-solid-bg),
|
|
21
|
+
solid-hover: var(--button-default-secondary-solid-hover-bg),
|
|
22
|
+
solid-active: var(--button-default-secondary-solid-active-bg),
|
|
23
|
+
solid-foreground: var(--button-default-secondary-solid-foreground),
|
|
24
|
+
outline-border: var(--button-default-secondary-outline-border),
|
|
25
|
+
outline-foreground: var(--button-default-secondary-outline-foreground),
|
|
26
|
+
outline-hover-bg: var(--button-default-secondary-outline-hover-bg),
|
|
64
27
|
outline-hover-foreground: var(
|
|
65
|
-
--button-default-secondary-outline-hover-foreground
|
|
66
|
-
var(--color-primary-heavy)
|
|
28
|
+
--button-default-secondary-outline-hover-foreground
|
|
67
29
|
),
|
|
68
30
|
outline-active-bg: var(--button-default-secondary-solid-bg),
|
|
69
31
|
),
|
|
70
32
|
tertiary: (
|
|
71
|
-
solid-bg: var(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
),
|
|
79
|
-
solid-active: var(
|
|
80
|
-
--button-default-tertiary-solid-active-bg,
|
|
81
|
-
var(--color-surface-strong)
|
|
82
|
-
),
|
|
83
|
-
solid-foreground: var(
|
|
84
|
-
--button-default-tertiary-solid-foreground,
|
|
85
|
-
var(--color-label-neutral)
|
|
86
|
-
),
|
|
87
|
-
outline-border: var(
|
|
88
|
-
--button-default-tertiary-outline-border,
|
|
89
|
-
var(--color-cool-gray-90)
|
|
90
|
-
),
|
|
91
|
-
outline-foreground: var(
|
|
92
|
-
--button-default-tertiary-outline-foreground,
|
|
93
|
-
var(--color-cool-gray-10)
|
|
94
|
-
),
|
|
95
|
-
outline-hover-bg: var(
|
|
96
|
-
--button-default-tertiary-outline-hover-bg,
|
|
97
|
-
var(--color-cool-gray-95)
|
|
98
|
-
),
|
|
33
|
+
solid-bg: var(--button-default-tertiary-solid-bg),
|
|
34
|
+
solid-hover: var(--button-default-tertiary-solid-hover-bg),
|
|
35
|
+
solid-active: var(--button-default-tertiary-solid-active-bg),
|
|
36
|
+
solid-foreground: var(--button-default-tertiary-solid-foreground),
|
|
37
|
+
outline-border: var(--button-default-tertiary-outline-border),
|
|
38
|
+
outline-foreground: var(--button-default-tertiary-outline-foreground),
|
|
39
|
+
outline-hover-bg: var(--button-default-tertiary-outline-hover-bg),
|
|
99
40
|
outline-hover-foreground: var(
|
|
100
|
-
--button-default-tertiary-outline-hover-foreground
|
|
101
|
-
var(--color-neutral-20)
|
|
41
|
+
--button-default-tertiary-outline-hover-foreground
|
|
102
42
|
),
|
|
103
43
|
outline-active-bg: var(--button-default-tertiary-solid-bg),
|
|
104
44
|
),
|
|
@@ -232,63 +172,24 @@ $button-priorities: (
|
|
|
232
172
|
display: flex;
|
|
233
173
|
align-items: center;
|
|
234
174
|
justify-content: center;
|
|
235
|
-
gap: var(--button-default-gap-medium
|
|
175
|
+
gap: var(--button-default-gap-medium);
|
|
236
176
|
width: var(--button-width);
|
|
237
177
|
flex: var(--button-flex);
|
|
238
|
-
min-width: var(
|
|
239
|
-
--button-default-width-min-base,
|
|
240
|
-
var(--theme-size-small-2, 24px)
|
|
241
|
-
);
|
|
242
|
-
min-height: var(--button-min-height, auto);
|
|
243
|
-
padding-inline: var(
|
|
244
|
-
--button-padding-inline,
|
|
245
|
-
var(--button-default-padding-inline-base, var(--spacing-padding-4, 16px))
|
|
246
|
-
);
|
|
178
|
+
min-width: var(--button-default-width-min-base);
|
|
247
179
|
padding-block: 0;
|
|
248
|
-
border-radius: var(
|
|
249
|
-
--button-border-radius,
|
|
250
|
-
var(--button-default-radius-medium, var(--theme-radius-medium-1, 8px))
|
|
251
|
-
);
|
|
252
180
|
border: 1px solid transparent;
|
|
253
181
|
background-color: transparent;
|
|
254
|
-
color: var(--button-default-neutral-foreground
|
|
182
|
+
color: var(--button-default-neutral-foreground);
|
|
255
183
|
box-shadow: none;
|
|
256
184
|
filter: none;
|
|
257
185
|
cursor: pointer;
|
|
258
186
|
|
|
259
187
|
span {
|
|
260
|
-
font-family: var(
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
)
|
|
266
|
-
);
|
|
267
|
-
font-size: var(
|
|
268
|
-
--font-caption-medium-size,
|
|
269
|
-
var(
|
|
270
|
-
--button-default-font-body-medium-size,
|
|
271
|
-
var(--font-body-medium-size, 16px)
|
|
272
|
-
)
|
|
273
|
-
);
|
|
274
|
-
font-weight: var(
|
|
275
|
-
--font-caption-medium-weight,
|
|
276
|
-
var(--button-default-font-weight, 400)
|
|
277
|
-
);
|
|
278
|
-
line-height: var(
|
|
279
|
-
--font-caption-medium-line-height,
|
|
280
|
-
var(
|
|
281
|
-
--button-default-font-body-medium-line-height,
|
|
282
|
-
var(--font-body-medium-line-height, 24px)
|
|
283
|
-
)
|
|
284
|
-
);
|
|
285
|
-
letter-spacing: var(
|
|
286
|
-
--font-caption-medium-letter-spacing,
|
|
287
|
-
var(
|
|
288
|
-
--button-default-font-body-medium-letter-spacing,
|
|
289
|
-
var(--font-body-medium-letter-spacing, 0px)
|
|
290
|
-
)
|
|
291
|
-
);
|
|
188
|
+
font-family: var(--font-family-sans);
|
|
189
|
+
font-size: var(--font-caption-medium-size);
|
|
190
|
+
font-weight: var(--font-caption-medium-weight);
|
|
191
|
+
line-height: 1em;
|
|
192
|
+
letter-spacing: var(--font-caption-medium-letter-spacing);
|
|
292
193
|
}
|
|
293
194
|
|
|
294
195
|
.button-icon,
|
|
@@ -300,6 +201,12 @@ $button-priorities: (
|
|
|
300
201
|
justify-content: center;
|
|
301
202
|
}
|
|
302
203
|
|
|
204
|
+
&[data-width="full"],
|
|
205
|
+
&.button-block {
|
|
206
|
+
--button-width: 100%;
|
|
207
|
+
--button-flex: 0 0 100%;
|
|
208
|
+
}
|
|
209
|
+
|
|
303
210
|
&[data-width="auto"] {
|
|
304
211
|
--button-width: auto;
|
|
305
212
|
--button-flex: 0 1 auto;
|
|
@@ -310,12 +217,6 @@ $button-priorities: (
|
|
|
310
217
|
--button-flex: 1 1 0%;
|
|
311
218
|
}
|
|
312
219
|
|
|
313
|
-
&[data-width="full"],
|
|
314
|
-
&.button-block {
|
|
315
|
-
--button-width: 100%;
|
|
316
|
-
--button-flex: 0 0 100%;
|
|
317
|
-
}
|
|
318
|
-
|
|
319
220
|
&[data-width="fit"] {
|
|
320
221
|
--button-width: fit-content;
|
|
321
222
|
--button-flex: 0 0 auto;
|
|
@@ -354,18 +255,9 @@ $button-priorities: (
|
|
|
354
255
|
color: priority-token($priority, solid-foreground);
|
|
355
256
|
&:disabled,
|
|
356
257
|
&[aria-disabled="true"] {
|
|
357
|
-
background-color: var(
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
);
|
|
361
|
-
border-color: var(
|
|
362
|
-
--button-default-neutral-disabled-bg,
|
|
363
|
-
var(--color-surface-standard)
|
|
364
|
-
);
|
|
365
|
-
color: var(
|
|
366
|
-
--button-default-neutral-disabled-foreground,
|
|
367
|
-
var(--color-label-disabled)
|
|
368
|
-
);
|
|
258
|
+
background-color: var(--button-default-neutral-disabled-bg);
|
|
259
|
+
border-color: var(--button-default-neutral-disabled-bg);
|
|
260
|
+
color: var(--button-default-neutral-disabled-foreground);
|
|
369
261
|
}
|
|
370
262
|
|
|
371
263
|
&:hover:not(:disabled):not([aria-disabled="true"]),
|
|
@@ -382,24 +274,14 @@ $button-priorities: (
|
|
|
382
274
|
}
|
|
383
275
|
|
|
384
276
|
@include button-state-selector("outlined", $priority) {
|
|
385
|
-
background-color: transparent;
|
|
386
277
|
color: priority-token($priority, outline-foreground);
|
|
387
278
|
border-color: priority-token($priority, outline-border);
|
|
388
279
|
|
|
389
280
|
&:disabled,
|
|
390
281
|
&[aria-disabled="true"] {
|
|
391
|
-
background-color: var(
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
);
|
|
395
|
-
border-color: var(
|
|
396
|
-
--button-default-neutral-disabled-bg,
|
|
397
|
-
var(--color-surface-standard)
|
|
398
|
-
);
|
|
399
|
-
color: var(
|
|
400
|
-
--button-default-neutral-disabled-foreground,
|
|
401
|
-
var(--color-label-disabled)
|
|
402
|
-
);
|
|
282
|
+
background-color: var(--button-default-neutral-disabled-bg);
|
|
283
|
+
border-color: var(--button-default-neutral-disabled-bg);
|
|
284
|
+
color: var(--button-default-neutral-disabled-foreground);
|
|
403
285
|
}
|
|
404
286
|
|
|
405
287
|
&:hover:not(:disabled):not([aria-disabled="true"]),
|
|
@@ -418,152 +300,63 @@ $button-priorities: (
|
|
|
418
300
|
|
|
419
301
|
$button-size-map: (
|
|
420
302
|
small: (
|
|
421
|
-
padding-inline: var(
|
|
422
|
-
--button-default-padding-inline-small,
|
|
423
|
-
var(--spacing-padding-6, 24px)
|
|
424
|
-
),
|
|
303
|
+
padding-inline: var(--button-default-padding-inline-small),
|
|
425
304
|
padding-block: 0,
|
|
426
|
-
gap: var(--button-default-gap-medium
|
|
427
|
-
text-font-size: var(
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
),
|
|
431
|
-
text-font-weight: var(--button-default-font-weight, 400),
|
|
432
|
-
text-line-height: var(
|
|
433
|
-
--button-default-font-label-medium-line-height,
|
|
434
|
-
var(--font-label-medium-line-height, 1.5em)
|
|
435
|
-
),
|
|
305
|
+
gap: var(--button-default-gap-medium),
|
|
306
|
+
text-font-size: var(--button-default-font-label-medium-size),
|
|
307
|
+
text-font-weight: var(--button-default-font-weight),
|
|
308
|
+
text-line-height: var(--button-default-font-label-medium-line-height),
|
|
436
309
|
text-letter-spacing: var(
|
|
437
|
-
--button-default-font-label-medium-letter-spacing
|
|
438
|
-
var(--font-label-medium-letter-spacing, 0px)
|
|
439
|
-
),
|
|
440
|
-
min-height: var(
|
|
441
|
-
--button-default-height-small,
|
|
442
|
-
var(--theme-size-small-3, 32px)
|
|
443
|
-
),
|
|
444
|
-
radius: var(
|
|
445
|
-
--button-default-radius-small,
|
|
446
|
-
var(--theme-radius-medium-3, 8px)
|
|
310
|
+
--button-default-font-label-medium-letter-spacing
|
|
447
311
|
),
|
|
312
|
+
min-height: var(--button-default-height-small),
|
|
313
|
+
radius: var(--button-default-radius-small),
|
|
448
314
|
),
|
|
449
315
|
medium: (
|
|
450
|
-
padding-inline: var(
|
|
451
|
-
|
|
452
|
-
var(--spacing-padding-7, 20px)
|
|
453
|
-
),
|
|
454
|
-
gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px)),
|
|
316
|
+
padding-inline: var(--button-default-padding-inline-medium),
|
|
317
|
+
gap: var(--button-default-gap-medium),
|
|
455
318
|
padding-block: 0,
|
|
456
|
-
text-font-size: var(
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
--button-default-font-label-large-line-height,
|
|
463
|
-
var(--font-label-large-line-height, 1.5em)
|
|
464
|
-
),
|
|
465
|
-
text-letter-spacing: var(
|
|
466
|
-
--button-default-font-label-large-letter-spacing,
|
|
467
|
-
var(--font-label-large-letter-spacing, 0px)
|
|
468
|
-
),
|
|
469
|
-
min-height: var(
|
|
470
|
-
--button-default-height-medium,
|
|
471
|
-
var(--theme-size-medium-1, 40px)
|
|
472
|
-
),
|
|
473
|
-
radius: var(
|
|
474
|
-
--button-default-radius-small,
|
|
475
|
-
var(--theme-radius-medium-3, 8px)
|
|
476
|
-
),
|
|
319
|
+
text-font-size: var(--button-default-font-label-large-size),
|
|
320
|
+
text-font-weight: var(--button-default-font-weight),
|
|
321
|
+
text-line-height: var(--button-default-font-label-large-line-height),
|
|
322
|
+
text-letter-spacing: var(--button-default-font-label-large-letter-spacing),
|
|
323
|
+
min-height: var(--button-default-height-medium),
|
|
324
|
+
radius: var(--button-default-radius-small),
|
|
477
325
|
),
|
|
478
326
|
large: (
|
|
479
|
-
padding-inline: var(
|
|
480
|
-
|
|
481
|
-
var(--spacing-padding-9, 28px)
|
|
482
|
-
),
|
|
483
|
-
gap: var(--button-default-gap-large, var(--spacing-gap-3, 12px)),
|
|
327
|
+
padding-inline: var(--button-default-padding-inline-large),
|
|
328
|
+
gap: var(--button-default-gap-large),
|
|
484
329
|
padding-block: 0,
|
|
485
|
-
text-font-size: var(
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
--button-default-font-body-medium-line-height,
|
|
492
|
-
var(--font-body-medium-line-height, 1.5em)
|
|
493
|
-
),
|
|
494
|
-
text-letter-spacing: var(
|
|
495
|
-
--button-default-font-body-medium-letter-spacing,
|
|
496
|
-
var(--font-body-medium-letter-spacing, 0px)
|
|
497
|
-
),
|
|
498
|
-
min-height: var(
|
|
499
|
-
--button-default-height-large,
|
|
500
|
-
var(--theme-size-medium-2, 48px)
|
|
501
|
-
),
|
|
502
|
-
radius: var(
|
|
503
|
-
--button-default-radius-large,
|
|
504
|
-
var(--theme-radius-large-1, 12px)
|
|
505
|
-
),
|
|
330
|
+
text-font-size: var(--button-default-font-body-medium-size),
|
|
331
|
+
text-font-weight: var(--button-default-font-weight),
|
|
332
|
+
text-line-height: var(--button-default-font-body-medium-line-height),
|
|
333
|
+
text-letter-spacing: var(--button-default-font-body-medium-letter-spacing),
|
|
334
|
+
min-height: var(--button-default-height-large),
|
|
335
|
+
radius: var(--button-default-radius-large),
|
|
506
336
|
),
|
|
507
337
|
xlarge: (
|
|
508
|
-
padding-inline: var(
|
|
509
|
-
|
|
510
|
-
var(--spacing-padding-9, 28px)
|
|
511
|
-
),
|
|
512
|
-
gap: var(--button-default-gap-large, var(--spacing-gap-3, 12px)),
|
|
338
|
+
padding-inline: var(--button-default-padding-inline-large),
|
|
339
|
+
gap: var(--button-default-gap-large),
|
|
513
340
|
padding-block: 0,
|
|
514
|
-
text-font-size: var(
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
--button-default-font-body-large-line-height,
|
|
521
|
-
var(--font-body-large-line-height, 1.5em)
|
|
522
|
-
),
|
|
523
|
-
text-letter-spacing: var(
|
|
524
|
-
--button-default-font-body-large-letter-spacing,
|
|
525
|
-
var(--font-body-large-letter-spacing, 0px)
|
|
526
|
-
),
|
|
527
|
-
min-height: var(
|
|
528
|
-
--button-default-height-xlarge,
|
|
529
|
-
var(--theme-size-medium-3, 56px)
|
|
530
|
-
),
|
|
531
|
-
radius: var(
|
|
532
|
-
--button-default-radius-xlarge,
|
|
533
|
-
var(--theme-radius-large-2, 16px)
|
|
534
|
-
),
|
|
341
|
+
text-font-size: var(--button-default-font-body-large-size),
|
|
342
|
+
text-font-weight: var(--button-default-font-weight),
|
|
343
|
+
text-line-height: var(--button-default-font-body-large-line-height),
|
|
344
|
+
text-letter-spacing: var(--button-default-font-body-large-letter-spacing),
|
|
345
|
+
min-height: var(--button-default-height-xlarge),
|
|
346
|
+
radius: var(--button-default-radius-xlarge),
|
|
535
347
|
),
|
|
536
348
|
table: (
|
|
537
|
-
padding-inline: var(
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
text-font-size: var(
|
|
544
|
-
--button-default-font-caption-large-size,
|
|
545
|
-
var(--font-caption-large-size, 12px)
|
|
546
|
-
),
|
|
547
|
-
text-font-weight: var(
|
|
548
|
-
--button-default-font-caption-large-weight,
|
|
549
|
-
var(--button-default-font-weight, 400)
|
|
550
|
-
),
|
|
551
|
-
text-line-height: var(
|
|
552
|
-
--button-default-font-caption-large-line-height,
|
|
553
|
-
var(--font-caption-large-line-height, 1.5em)
|
|
554
|
-
),
|
|
349
|
+
padding-inline: var(--button-default-padding-inline-table),
|
|
350
|
+
gap: var(--button-default-gap-table),
|
|
351
|
+
padding-block: var(--button-default-padding-block-table),
|
|
352
|
+
text-font-size: var(--button-default-font-caption-large-size),
|
|
353
|
+
text-font-weight: var(--button-default-font-caption-large-weight),
|
|
354
|
+
text-line-height: var(--button-default-font-caption-large-line-height),
|
|
555
355
|
text-letter-spacing: var(
|
|
556
|
-
--button-default-font-caption-large-letter-spacing
|
|
557
|
-
var(--font-caption-large-letter-spacing, 0px)
|
|
558
|
-
),
|
|
559
|
-
min-height: var(
|
|
560
|
-
--button-default-height-table,
|
|
561
|
-
var(--theme-size-small-2, 24px)
|
|
562
|
-
),
|
|
563
|
-
radius: var(
|
|
564
|
-
--button-default-radius-table,
|
|
565
|
-
var(--theme-radius-medium-2, 6px)
|
|
356
|
+
--button-default-font-caption-large-letter-spacing
|
|
566
357
|
),
|
|
358
|
+
min-height: var(--button-default-height-table),
|
|
359
|
+
radius: var(--button-default-radius-table),
|
|
567
360
|
),
|
|
568
361
|
);
|
|
569
362
|
|
|
@@ -585,24 +378,22 @@ $button-priorities: (
|
|
|
585
378
|
}
|
|
586
379
|
|
|
587
380
|
&:where(.button-fill-outlined) {
|
|
381
|
+
background-color: var(--button-default-outline-bg);
|
|
588
382
|
box-shadow: none;
|
|
589
383
|
}
|
|
590
384
|
|
|
591
385
|
:where(.button-fill-solid.button-priority-secondary) {
|
|
592
386
|
&:hover:not(:disabled):not([aria-disabled="true"]),
|
|
593
387
|
&[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
|
|
594
|
-
background-color: var(--button-default-secondary-solid-hover-bg
|
|
595
|
-
border-color: var(--button-default-secondary-solid-hover-bg
|
|
388
|
+
background-color: var(--button-default-secondary-solid-hover-bg);
|
|
389
|
+
border-color: var(--button-default-secondary-solid-hover-bg);
|
|
596
390
|
box-shadow: none;
|
|
597
391
|
}
|
|
598
392
|
|
|
599
393
|
&:active:not(:disabled):not([aria-disabled="true"]),
|
|
600
394
|
&[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
|
|
601
|
-
background-color: var(
|
|
602
|
-
|
|
603
|
-
#ccdeff
|
|
604
|
-
);
|
|
605
|
-
border-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
|
|
395
|
+
background-color: var(--button-default-secondary-solid-active-bg);
|
|
396
|
+
border-color: var(--button-default-secondary-solid-active-bg);
|
|
606
397
|
box-shadow: none;
|
|
607
398
|
}
|
|
608
399
|
}
|
|
@@ -610,10 +401,7 @@ $button-priorities: (
|
|
|
610
401
|
@include button-overlay-state(
|
|
611
402
|
"solid",
|
|
612
403
|
"tertiary",
|
|
613
|
-
var(
|
|
614
|
-
--button-default-tertiary-overlay-solid-bg,
|
|
615
|
-
var(--color-surface-strong)
|
|
616
|
-
),
|
|
404
|
+
var(--button-default-tertiary-overlay-solid-bg),
|
|
617
405
|
0.68,
|
|
618
406
|
0.48,
|
|
619
407
|
priority-token(tertiary, solid-bg)
|
|
@@ -622,7 +410,7 @@ $button-priorities: (
|
|
|
622
410
|
@include button-overlay-state(
|
|
623
411
|
"outlined",
|
|
624
412
|
"primary",
|
|
625
|
-
var(--button-default-primary-overlay-outlined-bg
|
|
413
|
+
var(--button-default-primary-overlay-outlined-bg),
|
|
626
414
|
0.68,
|
|
627
415
|
0.28,
|
|
628
416
|
priority-token(primary, outline-border)
|
|
@@ -631,10 +419,7 @@ $button-priorities: (
|
|
|
631
419
|
@include button-overlay-state(
|
|
632
420
|
"outlined",
|
|
633
421
|
"secondary",
|
|
634
|
-
var(
|
|
635
|
-
--button-default-secondary-overlay-outlined-bg,
|
|
636
|
-
var(--color-cool-gray-95)
|
|
637
|
-
),
|
|
422
|
+
var(--button-default-secondary-overlay-outlined-bg),
|
|
638
423
|
0.68,
|
|
639
424
|
0.28,
|
|
640
425
|
priority-token(secondary, outline-border)
|
|
@@ -643,10 +428,7 @@ $button-priorities: (
|
|
|
643
428
|
@include button-overlay-state(
|
|
644
429
|
"outlined",
|
|
645
430
|
"tertiary",
|
|
646
|
-
var(
|
|
647
|
-
--button-default-tertiary-overlay-outlined-bg,
|
|
648
|
-
var(--color-cool-gray-95)
|
|
649
|
-
),
|
|
431
|
+
var(--button-default-tertiary-overlay-outlined-bg),
|
|
650
432
|
0.68,
|
|
651
433
|
0.28,
|
|
652
434
|
priority-token(tertiary, outline-border)
|
|
@@ -654,26 +436,17 @@ $button-priorities: (
|
|
|
654
436
|
|
|
655
437
|
&:where(:disabled),
|
|
656
438
|
&:where([aria-disabled="true"]) {
|
|
657
|
-
background-color: var(
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
);
|
|
661
|
-
border-color: var(
|
|
662
|
-
--button-default-neutral-disabled-bg,
|
|
663
|
-
var(--color-surface-standard)
|
|
664
|
-
);
|
|
665
|
-
color: var(
|
|
666
|
-
--button-default-neutral-disabled-foreground,
|
|
667
|
-
var(--color-label-disabled)
|
|
668
|
-
);
|
|
439
|
+
background-color: var(--button-default-neutral-disabled-bg);
|
|
440
|
+
border-color: var(--button-default-neutral-disabled-bg);
|
|
441
|
+
color: var(--button-default-neutral-disabled-foreground);
|
|
669
442
|
cursor: not-allowed;
|
|
670
443
|
}
|
|
671
444
|
|
|
672
445
|
&:where(.button-icon-left) .button-label {
|
|
673
|
-
margin-left: var(--button-default-gap-small
|
|
446
|
+
margin-left: var(--button-default-gap-small);
|
|
674
447
|
}
|
|
675
448
|
|
|
676
449
|
&:where(.button-icon-right) .button-label {
|
|
677
|
-
margin-right: var(--button-default-gap-small
|
|
450
|
+
margin-right: var(--button-default-gap-small);
|
|
678
451
|
}
|
|
679
452
|
}
|