@vellira-ui/tokens 2.44.3 → 2.44.4
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/css/tokens.css +24 -15
- package/dist/dark/components/modal.d.ts +7 -2
- package/dist/dark/components/modal.d.ts.map +1 -1
- package/dist/dark/components/select.d.ts.map +1 -1
- package/dist/dark/components/select.js +1 -0
- package/dist/factories/createModalTokens.d.ts +7 -2
- package/dist/factories/createModalTokens.d.ts.map +1 -1
- package/dist/factories/createModalTokens.js +8 -3
- package/dist/generated/token-types.d.ts +4 -4
- package/dist/generated/token-types.d.ts.map +1 -1
- package/dist/generated/token-types.js +12 -0
- package/dist/highContrast/components/modal.d.ts +7 -2
- package/dist/highContrast/components/modal.d.ts.map +1 -1
- package/dist/light/components/modal.d.ts +7 -2
- package/dist/light/components/modal.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/css/tokens.css
CHANGED
|
@@ -1245,7 +1245,7 @@
|
|
|
1245
1245
|
--input-spinner-fg: #958CB0;
|
|
1246
1246
|
--modal-overlay-bg: rgba(24, 21, 33, 0.52);
|
|
1247
1247
|
--modal-overlay-blur: 4px;
|
|
1248
|
-
--modal-overlay-animation-duration:
|
|
1248
|
+
--modal-overlay-animation-duration: 180ms;
|
|
1249
1249
|
--modal-content-bg: #FFFFFF;
|
|
1250
1250
|
--modal-content-fg: #3D3754;
|
|
1251
1251
|
--modal-content-border: #E4DDF4;
|
|
@@ -1260,7 +1260,7 @@
|
|
|
1260
1260
|
--modal-content-viewport-margin: 32px;
|
|
1261
1261
|
--modal-content-top-offset: 40px;
|
|
1262
1262
|
--modal-content-z-index-offset: 1;
|
|
1263
|
-
--modal-content-animation-duration:
|
|
1263
|
+
--modal-content-animation-duration: 180ms;
|
|
1264
1264
|
--modal-content-size-sm: 400px;
|
|
1265
1265
|
--modal-content-size-md: 560px;
|
|
1266
1266
|
--modal-content-size-lg: 720px;
|
|
@@ -1292,6 +1292,9 @@
|
|
|
1292
1292
|
--modal-close-button-disabled-bg: transparent;
|
|
1293
1293
|
--modal-close-button-disabled-fg: #958CB0;
|
|
1294
1294
|
--modal-close-button-disabled-border: transparent;
|
|
1295
|
+
--modal-motion-close-duration: 150ms;
|
|
1296
|
+
--modal-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
|
|
1297
|
+
--modal-motion-open-duration: 180ms;
|
|
1295
1298
|
--radio-default-bg: #FFFFFF;
|
|
1296
1299
|
--radio-default-fg: #3D3754;
|
|
1297
1300
|
--radio-default-border: #BBB2D2;
|
|
@@ -3451,7 +3454,7 @@
|
|
|
3451
3454
|
--input-spinner-fg: #958CB0;
|
|
3452
3455
|
--modal-overlay-bg: rgba(0, 0, 0, 0.72);
|
|
3453
3456
|
--modal-overlay-blur: 4px;
|
|
3454
|
-
--modal-overlay-animation-duration:
|
|
3457
|
+
--modal-overlay-animation-duration: 180ms;
|
|
3455
3458
|
--modal-content-bg: #242034;
|
|
3456
3459
|
--modal-content-fg: #F4F1FB;
|
|
3457
3460
|
--modal-content-border: #3D3754;
|
|
@@ -3466,7 +3469,7 @@
|
|
|
3466
3469
|
--modal-content-viewport-margin: 32px;
|
|
3467
3470
|
--modal-content-top-offset: 40px;
|
|
3468
3471
|
--modal-content-z-index-offset: 1;
|
|
3469
|
-
--modal-content-animation-duration:
|
|
3472
|
+
--modal-content-animation-duration: 180ms;
|
|
3470
3473
|
--modal-content-size-sm: 400px;
|
|
3471
3474
|
--modal-content-size-md: 560px;
|
|
3472
3475
|
--modal-content-size-lg: 720px;
|
|
@@ -3498,6 +3501,9 @@
|
|
|
3498
3501
|
--modal-close-button-disabled-bg: transparent;
|
|
3499
3502
|
--modal-close-button-disabled-fg: #6B6386;
|
|
3500
3503
|
--modal-close-button-disabled-border: transparent;
|
|
3504
|
+
--modal-motion-close-duration: 150ms;
|
|
3505
|
+
--modal-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
|
|
3506
|
+
--modal-motion-open-duration: 180ms;
|
|
3501
3507
|
--radio-default-bg: #2F2A42;
|
|
3502
3508
|
--radio-default-fg: #F4F1FB;
|
|
3503
3509
|
--radio-default-border: #4F4867;
|
|
@@ -3985,17 +3991,17 @@
|
|
|
3985
3991
|
--select-warning-outline-default-bg: transparent;
|
|
3986
3992
|
--select-warning-outline-default-fg: #F4F1FB;
|
|
3987
3993
|
--select-warning-outline-default-border: #FBBF24;
|
|
3988
|
-
--select-warning-outline-default-placeholder: #
|
|
3994
|
+
--select-warning-outline-default-placeholder: #F4F1FB;
|
|
3989
3995
|
--select-warning-outline-default-icon: #FBBF24;
|
|
3990
3996
|
--select-warning-outline-hover-bg: #451A03;
|
|
3991
3997
|
--select-warning-outline-hover-fg: #F4F1FB;
|
|
3992
3998
|
--select-warning-outline-hover-border: #F59E0B;
|
|
3993
|
-
--select-warning-outline-hover-placeholder: #
|
|
3999
|
+
--select-warning-outline-hover-placeholder: #F4F1FB;
|
|
3994
4000
|
--select-warning-outline-hover-icon: #F59E0B;
|
|
3995
4001
|
--select-warning-outline-focus-bg: transparent;
|
|
3996
4002
|
--select-warning-outline-focus-fg: #F4F1FB;
|
|
3997
4003
|
--select-warning-outline-focus-border: #F59E0B;
|
|
3998
|
-
--select-warning-outline-focus-placeholder: #
|
|
4004
|
+
--select-warning-outline-focus-placeholder: #F4F1FB;
|
|
3999
4005
|
--select-warning-outline-focus-icon: #F59E0B;
|
|
4000
4006
|
--select-warning-outline-dropdown-border: transparent;
|
|
4001
4007
|
--select-warning-outline-dropdown-ring: #F59E0B;
|
|
@@ -4028,17 +4034,17 @@
|
|
|
4028
4034
|
--select-warning-filled-default-bg: #451A03;
|
|
4029
4035
|
--select-warning-filled-default-fg: #F4F1FB;
|
|
4030
4036
|
--select-warning-filled-default-border: transparent;
|
|
4031
|
-
--select-warning-filled-default-placeholder: #
|
|
4037
|
+
--select-warning-filled-default-placeholder: #F4F1FB;
|
|
4032
4038
|
--select-warning-filled-default-icon: #FBBF24;
|
|
4033
4039
|
--select-warning-filled-hover-bg: #78350F;
|
|
4034
4040
|
--select-warning-filled-hover-fg: #F4F1FB;
|
|
4035
4041
|
--select-warning-filled-hover-border: #FBBF24;
|
|
4036
|
-
--select-warning-filled-hover-placeholder: #
|
|
4042
|
+
--select-warning-filled-hover-placeholder: #F4F1FB;
|
|
4037
4043
|
--select-warning-filled-hover-icon: #F59E0B;
|
|
4038
4044
|
--select-warning-filled-focus-bg: #242034;
|
|
4039
4045
|
--select-warning-filled-focus-fg: #F4F1FB;
|
|
4040
4046
|
--select-warning-filled-focus-border: #F59E0B;
|
|
4041
|
-
--select-warning-filled-focus-placeholder: #
|
|
4047
|
+
--select-warning-filled-focus-placeholder: #F4F1FB;
|
|
4042
4048
|
--select-warning-filled-focus-icon: #F59E0B;
|
|
4043
4049
|
--select-warning-filled-dropdown-border: transparent;
|
|
4044
4050
|
--select-warning-filled-dropdown-ring: #F59E0B;
|
|
@@ -4071,17 +4077,17 @@
|
|
|
4071
4077
|
--select-warning-soft-default-bg: #78350F;
|
|
4072
4078
|
--select-warning-soft-default-fg: #F4F1FB;
|
|
4073
4079
|
--select-warning-soft-default-border: transparent;
|
|
4074
|
-
--select-warning-soft-default-placeholder: #
|
|
4080
|
+
--select-warning-soft-default-placeholder: #F4F1FB;
|
|
4075
4081
|
--select-warning-soft-default-icon: #FBBF24;
|
|
4076
4082
|
--select-warning-soft-hover-bg: #78350F;
|
|
4077
4083
|
--select-warning-soft-hover-fg: #F4F1FB;
|
|
4078
4084
|
--select-warning-soft-hover-border: #FBBF24;
|
|
4079
|
-
--select-warning-soft-hover-placeholder: #
|
|
4085
|
+
--select-warning-soft-hover-placeholder: #F4F1FB;
|
|
4080
4086
|
--select-warning-soft-hover-icon: #F59E0B;
|
|
4081
4087
|
--select-warning-soft-focus-bg: #78350F;
|
|
4082
4088
|
--select-warning-soft-focus-fg: #F4F1FB;
|
|
4083
4089
|
--select-warning-soft-focus-border: #F59E0B;
|
|
4084
|
-
--select-warning-soft-focus-placeholder: #
|
|
4090
|
+
--select-warning-soft-focus-placeholder: #F4F1FB;
|
|
4085
4091
|
--select-warning-soft-focus-icon: #F59E0B;
|
|
4086
4092
|
--select-warning-soft-dropdown-border: transparent;
|
|
4087
4093
|
--select-warning-soft-dropdown-ring: #F59E0B;
|
|
@@ -5668,7 +5674,7 @@
|
|
|
5668
5674
|
--input-spinner-fg: #9CA3AF;
|
|
5669
5675
|
--modal-overlay-bg: rgba(0, 0, 0, 0.82);
|
|
5670
5676
|
--modal-overlay-blur: 4px;
|
|
5671
|
-
--modal-overlay-animation-duration:
|
|
5677
|
+
--modal-overlay-animation-duration: 180ms;
|
|
5672
5678
|
--modal-content-bg: #111827;
|
|
5673
5679
|
--modal-content-fg: #FFFFFF;
|
|
5674
5680
|
--modal-content-border: #9CA3AF;
|
|
@@ -5683,7 +5689,7 @@
|
|
|
5683
5689
|
--modal-content-viewport-margin: 32px;
|
|
5684
5690
|
--modal-content-top-offset: 40px;
|
|
5685
5691
|
--modal-content-z-index-offset: 1;
|
|
5686
|
-
--modal-content-animation-duration:
|
|
5692
|
+
--modal-content-animation-duration: 180ms;
|
|
5687
5693
|
--modal-content-size-sm: 400px;
|
|
5688
5694
|
--modal-content-size-md: 560px;
|
|
5689
5695
|
--modal-content-size-lg: 720px;
|
|
@@ -5715,6 +5721,9 @@
|
|
|
5715
5721
|
--modal-close-button-disabled-bg: transparent;
|
|
5716
5722
|
--modal-close-button-disabled-fg: #6B7280;
|
|
5717
5723
|
--modal-close-button-disabled-border: transparent;
|
|
5724
|
+
--modal-motion-close-duration: 150ms;
|
|
5725
|
+
--modal-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
|
|
5726
|
+
--modal-motion-open-duration: 180ms;
|
|
5718
5727
|
--radio-default-bg: #000000;
|
|
5719
5728
|
--radio-default-fg: #FFFFFF;
|
|
5720
5729
|
--radio-default-border: #9CA3AF;
|
|
@@ -2,7 +2,7 @@ export declare const modal: {
|
|
|
2
2
|
readonly overlay: {
|
|
3
3
|
readonly bg: string;
|
|
4
4
|
readonly blur: 4;
|
|
5
|
-
readonly animationDuration: "
|
|
5
|
+
readonly animationDuration: "180ms";
|
|
6
6
|
};
|
|
7
7
|
readonly content: {
|
|
8
8
|
readonly bg: string;
|
|
@@ -19,7 +19,7 @@ export declare const modal: {
|
|
|
19
19
|
readonly viewportMargin: number;
|
|
20
20
|
readonly topOffset: number;
|
|
21
21
|
readonly zIndexOffset: "1";
|
|
22
|
-
readonly animationDuration: "
|
|
22
|
+
readonly animationDuration: "180ms";
|
|
23
23
|
readonly size: {
|
|
24
24
|
readonly sm: 400;
|
|
25
25
|
readonly md: 560;
|
|
@@ -78,5 +78,10 @@ export declare const modal: {
|
|
|
78
78
|
readonly border: "transparent";
|
|
79
79
|
};
|
|
80
80
|
};
|
|
81
|
+
readonly motion: {
|
|
82
|
+
readonly closeDuration: "150ms";
|
|
83
|
+
readonly easing: "cubic-bezier(0.22, 1, 0.36, 1)";
|
|
84
|
+
readonly openDuration: "180ms";
|
|
85
|
+
};
|
|
81
86
|
};
|
|
82
87
|
//# sourceMappingURL=modal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/dark/components/modal.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,KAAK
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/dark/components/modal.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBhB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/dark/components/select.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/dark/components/select.ts"],"names":[],"mappings":"AA2EA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoOT,CAAC"}
|
|
@@ -31,7 +31,7 @@ export declare const createModalTokens: (config: ModalTokensConfig) => {
|
|
|
31
31
|
readonly overlay: {
|
|
32
32
|
readonly bg: string;
|
|
33
33
|
readonly blur: 4;
|
|
34
|
-
readonly animationDuration: "
|
|
34
|
+
readonly animationDuration: "180ms";
|
|
35
35
|
};
|
|
36
36
|
readonly content: {
|
|
37
37
|
readonly bg: string;
|
|
@@ -48,7 +48,7 @@ export declare const createModalTokens: (config: ModalTokensConfig) => {
|
|
|
48
48
|
readonly viewportMargin: number;
|
|
49
49
|
readonly topOffset: number;
|
|
50
50
|
readonly zIndexOffset: "1";
|
|
51
|
-
readonly animationDuration: "
|
|
51
|
+
readonly animationDuration: "180ms";
|
|
52
52
|
readonly size: {
|
|
53
53
|
readonly sm: 400;
|
|
54
54
|
readonly md: 560;
|
|
@@ -102,6 +102,11 @@ export declare const createModalTokens: (config: ModalTokensConfig) => {
|
|
|
102
102
|
readonly border: "transparent";
|
|
103
103
|
};
|
|
104
104
|
};
|
|
105
|
+
readonly motion: {
|
|
106
|
+
readonly closeDuration: "150ms";
|
|
107
|
+
readonly easing: "cubic-bezier(0.22, 1, 0.36, 1)";
|
|
108
|
+
readonly openDuration: "180ms";
|
|
109
|
+
};
|
|
105
110
|
};
|
|
106
111
|
export {};
|
|
107
112
|
//# sourceMappingURL=createModalTokens.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createModalTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createModalTokens.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,oBAAoB,EAAE,cAAc,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;
|
|
1
|
+
{"version":3,"file":"createModalTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createModalTokens.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,oBAAoB,EAAE,cAAc,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAcF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2F9C,CAAC"}
|
|
@@ -2,13 +2,17 @@ const modalLayout = {
|
|
|
2
2
|
maxHeight: '90vh',
|
|
3
3
|
nativeMaxHeight: '90%',
|
|
4
4
|
zIndexOffset: '1',
|
|
5
|
-
|
|
5
|
+
};
|
|
6
|
+
const modalMotion = {
|
|
7
|
+
closeDuration: '150ms',
|
|
8
|
+
easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
|
|
9
|
+
openDuration: '180ms',
|
|
6
10
|
};
|
|
7
11
|
export const createModalTokens = (config) => ({
|
|
8
12
|
overlay: {
|
|
9
13
|
bg: config.overlayBg,
|
|
10
14
|
blur: 4,
|
|
11
|
-
animationDuration:
|
|
15
|
+
animationDuration: modalMotion.openDuration,
|
|
12
16
|
},
|
|
13
17
|
content: {
|
|
14
18
|
bg: config.contentBg,
|
|
@@ -25,7 +29,7 @@ export const createModalTokens = (config) => ({
|
|
|
25
29
|
viewportMargin: config.spacing8,
|
|
26
30
|
topOffset: config.spacing10,
|
|
27
31
|
zIndexOffset: modalLayout.zIndexOffset,
|
|
28
|
-
animationDuration:
|
|
32
|
+
animationDuration: modalMotion.openDuration,
|
|
29
33
|
size: {
|
|
30
34
|
sm: 400,
|
|
31
35
|
md: 560,
|
|
@@ -79,4 +83,5 @@ export const createModalTokens = (config) => ({
|
|
|
79
83
|
border: 'transparent',
|
|
80
84
|
},
|
|
81
85
|
},
|
|
86
|
+
motion: modalMotion,
|
|
82
87
|
});
|