@atlaskit/tokens 11.4.2 → 12.0.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/CHANGELOG.md +66 -0
- package/dist/cjs/artifacts/palettes-raw/motion-palette.js +123 -305
- package/dist/cjs/artifacts/replacement-mapping.js +82 -7
- package/dist/cjs/artifacts/themes/atlassian-motion.js +2 -2
- package/dist/cjs/artifacts/token-default-values.js +50 -25
- package/dist/cjs/artifacts/token-names.js +32 -7
- package/dist/cjs/artifacts/tokens-raw/atlassian-motion.js +653 -135
- package/dist/es2019/artifacts/palettes-raw/motion-palette.js +123 -305
- package/dist/es2019/artifacts/replacement-mapping.js +82 -7
- package/dist/es2019/artifacts/themes/atlassian-motion.js +64 -91
- package/dist/es2019/artifacts/token-default-values.js +50 -25
- package/dist/es2019/artifacts/token-names.js +32 -7
- package/dist/es2019/artifacts/tokens-raw/atlassian-motion.js +653 -135
- package/dist/esm/artifacts/palettes-raw/motion-palette.js +123 -305
- package/dist/esm/artifacts/replacement-mapping.js +82 -7
- package/dist/esm/artifacts/themes/atlassian-motion.js +2 -2
- package/dist/esm/artifacts/token-default-values.js +50 -25
- package/dist/esm/artifacts/token-names.js +32 -7
- package/dist/esm/artifacts/tokens-raw/atlassian-motion.js +653 -135
- package/dist/types/artifacts/palettes-raw/motion-palette.d.ts +3 -15
- package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
- package/dist/types/artifacts/themes/atlassian-motion.d.ts +2 -2
- package/dist/types/artifacts/token-default-values.d.ts +50 -25
- package/dist/types/artifacts/token-names.d.ts +63 -13
- package/dist/types/artifacts/tokens-raw/atlassian-motion.d.ts +5 -5
- package/dist/types/entry-points/css-type-schema.codegen.d.ts +5 -2
- package/dist/types/types.d.ts +93 -14
- package/dist/types-ts4.5/artifacts/palettes-raw/motion-palette.d.ts +3 -15
- package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts +1 -1
- package/dist/types-ts4.5/artifacts/themes/atlassian-motion.d.ts +2 -2
- package/dist/types-ts4.5/artifacts/token-default-values.d.ts +50 -25
- package/dist/types-ts4.5/artifacts/token-names.d.ts +63 -13
- package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-motion.d.ts +5 -5
- package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +5 -2
- package/dist/types-ts4.5/types.d.ts +93 -14
- package/package.json +18 -10
|
@@ -1,22 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::61e5f6306081ee114d542ad7b43b7e1c>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
|
-
type TokenValue = string | number |
|
|
7
|
-
|
|
8
|
-
curve: string;
|
|
9
|
-
keyframes?: string[];
|
|
10
|
-
properties?: string[];
|
|
11
|
-
delay?: number;
|
|
12
|
-
} | Record<string, any>;
|
|
13
|
-
type TokenValueOriginal = string | number | {
|
|
14
|
-
duration: string;
|
|
15
|
-
curve: string;
|
|
16
|
-
keyframes?: string[];
|
|
17
|
-
properties?: string[];
|
|
18
|
-
delay?: string;
|
|
19
|
-
} | Record<string, any>;
|
|
6
|
+
type TokenValue = string | number | Record<string, any>;
|
|
7
|
+
type TokenValueOriginal = string | number | Record<string, any>;
|
|
20
8
|
type TokenAttributes = {
|
|
21
9
|
group: string;
|
|
22
10
|
};
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* These changes will then be picked up by our tooling which will attempt to
|
|
13
13
|
* migrate as many of these renames as possible.
|
|
14
14
|
*
|
|
15
|
-
* @codegen <<SignedSource::
|
|
15
|
+
* @codegen <<SignedSource::26489b868b6a67a598f0fa4a421cae65>>
|
|
16
16
|
* @codegenCommand yarn build tokens
|
|
17
17
|
*/
|
|
18
18
|
import type tokens from './token-names';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::e2c90de3fa6bd9d4da20a85c310b97e2>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
|
-
declare const _default: "\n@keyframes
|
|
6
|
+
declare const _default: "\n@keyframes SlideInTop8px {\n 0% {\n transform: translateY(8px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n@keyframes SlideInBottom8px {\n 0% {\n transform: translateY(-8px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n@keyframes SlideInLeft8px {\n 0% {\n transform: translateX(8px);\n }\n 100% {\n transform: translateX(0px);\n }\n}\n@keyframes SlideInRight8px {\n 0% {\n transform: translateX(-8px);\n }\n 100% {\n transform: translateX(0px);\n }\n}\n@keyframes SlideOutTop8px {\n 0% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(4px);\n }\n}\n@keyframes SlideOutBottom8px {\n 0% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(-4px);\n }\n}\n@keyframes SlideOutLeft8px {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(4px);\n }\n}\n@keyframes SlideOutRight8px {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(-4px);\n }\n}\n@keyframes ScaleIn80to100 {\n 0% {\n transform: scale(0.8);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes ScaleIn95to100 {\n 0% {\n transform: scale(0.95);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes ScaleOut100to80 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.8);\n }\n}\n@keyframes ScaleOut100to95 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.95);\n }\n}\n@keyframes FadeIn0to100 {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes FadeOut100to0 {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes SlideOut15PercentLeft {\n 0% {\n transform: translateX(0px);\n transform-origin: left;\n }\n 100% {\n transform: translateX(-15%);\n transform-origin: left;\n }\n}\n@keyframes SlideIn50PercentLeft {\n 0% {\n transform: translateX(-50%);\n transform-origin: left;\n }\n 100% {\n transform: translateX(0px);\n transform-origin: left;\n }\n}\nhtml[data-theme~=\"motion:motion\"], [data-subtree-theme][data-theme~=\"motion:motion\"] {\n --ds-avatar-enter: 150ms cubic-bezier(0.4, 1, 0.6, 1) ScaleIn80to100, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;\n --ds-avatar-exit: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to80, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-avatar-hovered: transform 250ms linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1);\n --ds-blanket-enter: 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100;\n --ds-blanket-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-duration-instant: 0ms;\n --ds-duration-long: 250ms;\n --ds-duration-medium: 200ms;\n --ds-duration-short: 150ms;\n --ds-duration-xlong: 400ms;\n --ds-duration-xshort: 100ms;\n --ds-duration-xxlong: 600ms;\n --ds-duration-xxshort: 50ms;\n --ds-easing-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6);\n --ds-easing-inout-bold: cubic-bezier(0.4, 0, 0, 1);\n --ds-easing-out-practical: cubic-bezier(0.4, 1, 0.6, 1);\n --ds-easing-out-bold: cubic-bezier(0, 0.4, 0, 1);\n --ds-easing-spring: linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1);\n --ds-flag-enter: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100;\n --ds-flag-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-flag-reposition: transform 250ms cubic-bezier(0.4, 0, 0, 1);\n --ds-keyframe-fade-in: FadeIn0to100;\n --ds-keyframe-fade-out: FadeOut100to0;\n --ds-keyframe-scale-in-medium: ScaleIn80to100;\n --ds-keyframe-scale-in-small: ScaleIn95to100;\n --ds-keyframe-scale-out-medium: ScaleOut100to80;\n --ds-keyframe-scale-out-small: ScaleOut100to95;\n --ds-keyframe-slide-in-bottom-short: SlideInBottom8px;\n --ds-keyframe-slide-in-left-half: SlideIn50PercentLeft;\n --ds-keyframe-slide-in-left-short: SlideInLeft8px;\n --ds-keyframe-slide-in-right-short: SlideInRight8px;\n --ds-keyframe-slide-in-top-short: SlideInTop8px;\n --ds-keyframe-slide-out-bottom-short: SlideOutBottom8px;\n --ds-keyframe-slide-out-left-half: SlideOut15PercentLeft;\n --ds-keyframe-slide-out-left-short: SlideOutLeft8px;\n --ds-keyframe-slide-out-right-short: SlideOutRight8px;\n --ds-keyframe-slide-out-top-short: SlideOutTop8px;\n --ds-modal-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100;\n --ds-modal-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95;\n --ds-popup-enter-bottom: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;\n --ds-popup-enter-left: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;\n --ds-popup-enter-right: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;\n --ds-popup-enter-top: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;\n --ds-popup-exit-bottom: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-popup-exit-left: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-popup-exit-right: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-popup-exit-top: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-spotlight-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100;\n --ds-spotlight-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n}\n";
|
|
7
7
|
export default _default;
|
|
@@ -7,34 +7,59 @@
|
|
|
7
7
|
* Token names mapped to their value in the default Atlassian themes ('light').
|
|
8
8
|
* These default values are used by the Babel plugin to optionally provide automatic fallbacks.
|
|
9
9
|
*
|
|
10
|
-
* @codegen <<SignedSource::
|
|
10
|
+
* @codegen <<SignedSource::0fbc9a08bd94ff0842a2dd504e6a9ce6>>
|
|
11
11
|
* @codegenCommand yarn build tokens
|
|
12
12
|
*/
|
|
13
13
|
declare const defaultTokenValues: {
|
|
14
|
-
readonly 'motion.avatar.enter': "150ms cubic-bezier(0.
|
|
15
|
-
readonly 'motion.avatar.exit': "100ms cubic-bezier(0.
|
|
16
|
-
readonly 'motion.avatar.hovered': "transform
|
|
17
|
-
readonly 'motion.
|
|
18
|
-
readonly 'motion.
|
|
19
|
-
readonly 'motion.
|
|
20
|
-
readonly 'motion.
|
|
21
|
-
readonly 'motion.
|
|
22
|
-
readonly 'motion.
|
|
23
|
-
readonly 'motion.
|
|
24
|
-
readonly 'motion.
|
|
25
|
-
readonly 'motion.
|
|
26
|
-
readonly 'motion.
|
|
27
|
-
readonly 'motion.
|
|
28
|
-
readonly 'motion.
|
|
29
|
-
readonly 'motion.
|
|
30
|
-
readonly 'motion.
|
|
31
|
-
readonly 'motion.
|
|
32
|
-
readonly 'motion.
|
|
33
|
-
readonly 'motion.
|
|
34
|
-
readonly 'motion.
|
|
35
|
-
readonly 'motion.
|
|
36
|
-
readonly 'motion.
|
|
37
|
-
readonly 'motion.
|
|
14
|
+
readonly 'motion.avatar.enter': "150ms cubic-bezier(0.4, 1, 0.6, 1) ScaleIn80to100, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100";
|
|
15
|
+
readonly 'motion.avatar.exit': "100ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to80, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0";
|
|
16
|
+
readonly 'motion.avatar.hovered': "transform 250ms linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1)";
|
|
17
|
+
readonly 'motion.blanket.enter': "250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100";
|
|
18
|
+
readonly 'motion.blanket.exit': "200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0";
|
|
19
|
+
readonly 'motion.duration.instant': "0ms";
|
|
20
|
+
readonly 'motion.duration.long': "250ms";
|
|
21
|
+
readonly 'motion.duration.medium': "200ms";
|
|
22
|
+
readonly 'motion.duration.short': "150ms";
|
|
23
|
+
readonly 'motion.duration.xlong': "400ms";
|
|
24
|
+
readonly 'motion.duration.xshort': "100ms";
|
|
25
|
+
readonly 'motion.duration.xxlong': "600ms";
|
|
26
|
+
readonly 'motion.duration.xxshort': "50ms";
|
|
27
|
+
readonly 'motion.easing.in.practical': "cubic-bezier(0.6, 0, 0.8, 0.6)";
|
|
28
|
+
readonly 'motion.easing.inout.bold': "cubic-bezier(0.4, 0, 0, 1)";
|
|
29
|
+
readonly 'motion.easing.out.practical': "cubic-bezier(0.4, 1, 0.6, 1)";
|
|
30
|
+
readonly 'motion.easing.out.bold': "cubic-bezier(0, 0.4, 0, 1)";
|
|
31
|
+
readonly 'motion.easing.spring': "linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1)";
|
|
32
|
+
readonly 'motion.flag.enter': "250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100";
|
|
33
|
+
readonly 'motion.flag.exit': "200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0";
|
|
34
|
+
readonly 'motion.flag.reposition': "transform 250ms cubic-bezier(0.4, 0, 0, 1)";
|
|
35
|
+
readonly 'motion.keyframe.fade.in': "FadeIn0to100";
|
|
36
|
+
readonly 'motion.keyframe.fade.out': "FadeOut100to0";
|
|
37
|
+
readonly 'motion.keyframe.scale.in.medium': "ScaleIn80to100";
|
|
38
|
+
readonly 'motion.keyframe.scale.in.small': "ScaleIn95to100";
|
|
39
|
+
readonly 'motion.keyframe.scale.out.medium': "ScaleOut100to80";
|
|
40
|
+
readonly 'motion.keyframe.scale.out.small': "ScaleOut100to95";
|
|
41
|
+
readonly 'motion.keyframe.slide.in.bottom.short': "SlideInBottom8px";
|
|
42
|
+
readonly 'motion.keyframe.slide.in.left.half': "SlideIn50PercentLeft";
|
|
43
|
+
readonly 'motion.keyframe.slide.in.left.short': "SlideInLeft8px";
|
|
44
|
+
readonly 'motion.keyframe.slide.in.right.short': "SlideInRight8px";
|
|
45
|
+
readonly 'motion.keyframe.slide.in.top.short': "SlideInTop8px";
|
|
46
|
+
readonly 'motion.keyframe.slide.out.bottom.short': "SlideOutBottom8px";
|
|
47
|
+
readonly 'motion.keyframe.slide.out.left.half': "SlideOut15PercentLeft";
|
|
48
|
+
readonly 'motion.keyframe.slide.out.left.short': "SlideOutLeft8px";
|
|
49
|
+
readonly 'motion.keyframe.slide.out.right.short': "SlideOutRight8px";
|
|
50
|
+
readonly 'motion.keyframe.slide.out.top.short': "SlideOutTop8px";
|
|
51
|
+
readonly 'motion.modal.enter': "250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100";
|
|
52
|
+
readonly 'motion.modal.exit': "200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95";
|
|
53
|
+
readonly 'motion.popup.enter.bottom': "150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100";
|
|
54
|
+
readonly 'motion.popup.enter.left': "150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100";
|
|
55
|
+
readonly 'motion.popup.enter.right': "150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100";
|
|
56
|
+
readonly 'motion.popup.enter.top': "150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100";
|
|
57
|
+
readonly 'motion.popup.exit.bottom': "100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0";
|
|
58
|
+
readonly 'motion.popup.exit.left': "100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0";
|
|
59
|
+
readonly 'motion.popup.exit.right': "100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0";
|
|
60
|
+
readonly 'motion.popup.exit.top': "100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0";
|
|
61
|
+
readonly 'motion.spotlight.enter': "250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100";
|
|
62
|
+
readonly 'motion.spotlight.exit': "200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0";
|
|
38
63
|
readonly 'color.text': "#292A2E";
|
|
39
64
|
readonly 'color.text.accent.lime': "#4C6B1F";
|
|
40
65
|
readonly 'color.text.accent.lime.bolder': "#37471F";
|
|
@@ -1,21 +1,46 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::c7da53f7a9d4a33334530aad043ae18b>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
declare const tokens: {
|
|
7
7
|
readonly 'motion.avatar.enter': "--ds-avatar-enter";
|
|
8
8
|
readonly 'motion.avatar.exit': "--ds-avatar-exit";
|
|
9
9
|
readonly 'motion.avatar.hovered': "--ds-avatar-hovered";
|
|
10
|
-
readonly 'motion.
|
|
11
|
-
readonly 'motion.
|
|
12
|
-
readonly 'motion.
|
|
13
|
-
readonly 'motion.
|
|
14
|
-
readonly 'motion.
|
|
15
|
-
readonly 'motion.
|
|
10
|
+
readonly 'motion.blanket.enter': "--ds-blanket-enter";
|
|
11
|
+
readonly 'motion.blanket.exit': "--ds-blanket-exit";
|
|
12
|
+
readonly 'motion.duration.instant': "--ds-duration-instant";
|
|
13
|
+
readonly 'motion.duration.long': "--ds-duration-long";
|
|
14
|
+
readonly 'motion.duration.medium': "--ds-duration-medium";
|
|
15
|
+
readonly 'motion.duration.short': "--ds-duration-short";
|
|
16
|
+
readonly 'motion.duration.xlong': "--ds-duration-xlong";
|
|
17
|
+
readonly 'motion.duration.xshort': "--ds-duration-xshort";
|
|
18
|
+
readonly 'motion.duration.xxlong': "--ds-duration-xxlong";
|
|
19
|
+
readonly 'motion.duration.xxshort': "--ds-duration-xxshort";
|
|
20
|
+
readonly 'motion.easing.in.practical': "--ds-easing-in-practical";
|
|
21
|
+
readonly 'motion.easing.inout.bold': "--ds-easing-inout-bold";
|
|
22
|
+
readonly 'motion.easing.out.practical': "--ds-easing-out-practical";
|
|
23
|
+
readonly 'motion.easing.out.bold': "--ds-easing-out-bold";
|
|
24
|
+
readonly 'motion.easing.spring': "--ds-easing-spring";
|
|
16
25
|
readonly 'motion.flag.enter': "--ds-flag-enter";
|
|
17
26
|
readonly 'motion.flag.exit': "--ds-flag-exit";
|
|
18
27
|
readonly 'motion.flag.reposition': "--ds-flag-reposition";
|
|
28
|
+
readonly 'motion.keyframe.fade.in': "--ds-keyframe-fade-in";
|
|
29
|
+
readonly 'motion.keyframe.fade.out': "--ds-keyframe-fade-out";
|
|
30
|
+
readonly 'motion.keyframe.scale.in.medium': "--ds-keyframe-scale-in-medium";
|
|
31
|
+
readonly 'motion.keyframe.scale.in.small': "--ds-keyframe-scale-in-small";
|
|
32
|
+
readonly 'motion.keyframe.scale.out.medium': "--ds-keyframe-scale-out-medium";
|
|
33
|
+
readonly 'motion.keyframe.scale.out.small': "--ds-keyframe-scale-out-small";
|
|
34
|
+
readonly 'motion.keyframe.slide.in.bottom.short': "--ds-keyframe-slide-in-bottom-short";
|
|
35
|
+
readonly 'motion.keyframe.slide.in.left.half': "--ds-keyframe-slide-in-left-half";
|
|
36
|
+
readonly 'motion.keyframe.slide.in.left.short': "--ds-keyframe-slide-in-left-short";
|
|
37
|
+
readonly 'motion.keyframe.slide.in.right.short': "--ds-keyframe-slide-in-right-short";
|
|
38
|
+
readonly 'motion.keyframe.slide.in.top.short': "--ds-keyframe-slide-in-top-short";
|
|
39
|
+
readonly 'motion.keyframe.slide.out.bottom.short': "--ds-keyframe-slide-out-bottom-short";
|
|
40
|
+
readonly 'motion.keyframe.slide.out.left.half': "--ds-keyframe-slide-out-left-half";
|
|
41
|
+
readonly 'motion.keyframe.slide.out.left.short': "--ds-keyframe-slide-out-left-short";
|
|
42
|
+
readonly 'motion.keyframe.slide.out.right.short': "--ds-keyframe-slide-out-right-short";
|
|
43
|
+
readonly 'motion.keyframe.slide.out.top.short': "--ds-keyframe-slide-out-top-short";
|
|
19
44
|
readonly 'motion.modal.enter': "--ds-modal-enter";
|
|
20
45
|
readonly 'motion.modal.exit': "--ds-modal-exit";
|
|
21
46
|
readonly 'motion.popup.enter.bottom': "--ds-popup-enter-bottom";
|
|
@@ -501,15 +526,40 @@ export type CSSTokenMap = {
|
|
|
501
526
|
'motion.avatar.enter': 'var(--ds-avatar-enter)';
|
|
502
527
|
'motion.avatar.exit': 'var(--ds-avatar-exit)';
|
|
503
528
|
'motion.avatar.hovered': 'var(--ds-avatar-hovered)';
|
|
504
|
-
'motion.
|
|
505
|
-
'motion.
|
|
506
|
-
'motion.
|
|
507
|
-
'motion.
|
|
508
|
-
'motion.
|
|
509
|
-
'motion.
|
|
529
|
+
'motion.blanket.enter': 'var(--ds-blanket-enter)';
|
|
530
|
+
'motion.blanket.exit': 'var(--ds-blanket-exit)';
|
|
531
|
+
'motion.duration.instant': 'var(--ds-duration-instant)';
|
|
532
|
+
'motion.duration.long': 'var(--ds-duration-long)';
|
|
533
|
+
'motion.duration.medium': 'var(--ds-duration-medium)';
|
|
534
|
+
'motion.duration.short': 'var(--ds-duration-short)';
|
|
535
|
+
'motion.duration.xlong': 'var(--ds-duration-xlong)';
|
|
536
|
+
'motion.duration.xshort': 'var(--ds-duration-xshort)';
|
|
537
|
+
'motion.duration.xxlong': 'var(--ds-duration-xxlong)';
|
|
538
|
+
'motion.duration.xxshort': 'var(--ds-duration-xxshort)';
|
|
539
|
+
'motion.easing.in.practical': 'var(--ds-easing-in-practical)';
|
|
540
|
+
'motion.easing.inout.bold': 'var(--ds-easing-inout-bold)';
|
|
541
|
+
'motion.easing.out.practical': 'var(--ds-easing-out-practical)';
|
|
542
|
+
'motion.easing.out.bold': 'var(--ds-easing-out-bold)';
|
|
543
|
+
'motion.easing.spring': 'var(--ds-easing-spring)';
|
|
510
544
|
'motion.flag.enter': 'var(--ds-flag-enter)';
|
|
511
545
|
'motion.flag.exit': 'var(--ds-flag-exit)';
|
|
512
546
|
'motion.flag.reposition': 'var(--ds-flag-reposition)';
|
|
547
|
+
'motion.keyframe.fade.in': 'var(--ds-keyframe-fade-in)';
|
|
548
|
+
'motion.keyframe.fade.out': 'var(--ds-keyframe-fade-out)';
|
|
549
|
+
'motion.keyframe.scale.in.medium': 'var(--ds-keyframe-scale-in-medium)';
|
|
550
|
+
'motion.keyframe.scale.in.small': 'var(--ds-keyframe-scale-in-small)';
|
|
551
|
+
'motion.keyframe.scale.out.medium': 'var(--ds-keyframe-scale-out-medium)';
|
|
552
|
+
'motion.keyframe.scale.out.small': 'var(--ds-keyframe-scale-out-small)';
|
|
553
|
+
'motion.keyframe.slide.in.bottom.short': 'var(--ds-keyframe-slide-in-bottom-short)';
|
|
554
|
+
'motion.keyframe.slide.in.left.half': 'var(--ds-keyframe-slide-in-left-half)';
|
|
555
|
+
'motion.keyframe.slide.in.left.short': 'var(--ds-keyframe-slide-in-left-short)';
|
|
556
|
+
'motion.keyframe.slide.in.right.short': 'var(--ds-keyframe-slide-in-right-short)';
|
|
557
|
+
'motion.keyframe.slide.in.top.short': 'var(--ds-keyframe-slide-in-top-short)';
|
|
558
|
+
'motion.keyframe.slide.out.bottom.short': 'var(--ds-keyframe-slide-out-bottom-short)';
|
|
559
|
+
'motion.keyframe.slide.out.left.half': 'var(--ds-keyframe-slide-out-left-half)';
|
|
560
|
+
'motion.keyframe.slide.out.left.short': 'var(--ds-keyframe-slide-out-left-short)';
|
|
561
|
+
'motion.keyframe.slide.out.right.short': 'var(--ds-keyframe-slide-out-right-short)';
|
|
562
|
+
'motion.keyframe.slide.out.top.short': 'var(--ds-keyframe-slide-out-top-short)';
|
|
513
563
|
'motion.modal.enter': 'var(--ds-modal-enter)';
|
|
514
564
|
'motion.modal.exit': 'var(--ds-modal-exit)';
|
|
515
565
|
'motion.popup.enter.bottom': 'var(--ds-popup-enter-bottom)';
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::148f2f6a72e79c38e027eeed3b58d3ac>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
|
-
type TokenValue = {
|
|
6
|
+
type TokenValue = string | {
|
|
7
7
|
duration: number;
|
|
8
8
|
curve: string;
|
|
9
9
|
keyframes?: string[];
|
|
10
10
|
properties?: string[];
|
|
11
11
|
delay?: number;
|
|
12
|
-
}
|
|
13
|
-
type TokenValueOriginal = {
|
|
12
|
+
} | Record<string, any>;
|
|
13
|
+
type TokenValueOriginal = string | {
|
|
14
14
|
duration: string;
|
|
15
15
|
curve: string;
|
|
16
16
|
keyframes?: string[];
|
|
17
17
|
properties?: string[];
|
|
18
18
|
delay?: string;
|
|
19
|
-
}
|
|
19
|
+
} | Record<string, any>;
|
|
20
20
|
type TokenAttributes = {
|
|
21
21
|
group: string;
|
|
22
22
|
state: string;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Strict design token based typedef representing a subset of safe CSS properties.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::f1569c36646168ca5c04a848525f2421>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
9
|
export type BackgroundColorHovered = 'var(--ds-background-accent-lime-subtlest-hovered)' | 'var(--ds-background-accent-lime-subtler-hovered)' | 'var(--ds-background-accent-lime-subtle-hovered)' | 'var(--ds-background-accent-lime-bolder-hovered)' | 'var(--ds-background-accent-red-subtlest-hovered)' | 'var(--ds-background-accent-red-subtler-hovered)' | 'var(--ds-background-accent-red-subtle-hovered)' | 'var(--ds-background-accent-red-bolder-hovered)' | 'var(--ds-background-accent-orange-subtlest-hovered)' | 'var(--ds-background-accent-orange-subtler-hovered)' | 'var(--ds-background-accent-orange-subtle-hovered)' | 'var(--ds-background-accent-orange-bolder-hovered)' | 'var(--ds-background-accent-yellow-subtlest-hovered)' | 'var(--ds-background-accent-yellow-subtler-hovered)' | 'var(--ds-background-accent-yellow-subtle-hovered)' | 'var(--ds-background-accent-yellow-bolder-hovered)' | 'var(--ds-background-accent-green-subtlest-hovered)' | 'var(--ds-background-accent-green-subtler-hovered)' | 'var(--ds-background-accent-green-subtle-hovered)' | 'var(--ds-background-accent-green-bolder-hovered)' | 'var(--ds-background-accent-teal-subtlest-hovered)' | 'var(--ds-background-accent-teal-subtler-hovered)' | 'var(--ds-background-accent-teal-subtle-hovered)' | 'var(--ds-background-accent-teal-bolder-hovered)' | 'var(--ds-background-accent-blue-subtlest-hovered)' | 'var(--ds-background-accent-blue-subtler-hovered)' | 'var(--ds-background-accent-blue-subtle-hovered)' | 'var(--ds-background-accent-blue-bolder-hovered)' | 'var(--ds-background-accent-purple-subtlest-hovered)' | 'var(--ds-background-accent-purple-subtler-hovered)' | 'var(--ds-background-accent-purple-subtle-hovered)' | 'var(--ds-background-accent-purple-bolder-hovered)' | 'var(--ds-background-accent-magenta-subtlest-hovered)' | 'var(--ds-background-accent-magenta-subtler-hovered)' | 'var(--ds-background-accent-magenta-subtle-hovered)' | 'var(--ds-background-accent-magenta-bolder-hovered)' | 'var(--ds-background-accent-gray-subtlest-hovered)' | 'var(--ds-background-accent-gray-subtler-hovered)' | 'var(--ds-background-accent-gray-subtle-hovered)' | 'var(--ds-background-accent-gray-bolder-hovered)' | 'var(--ds-background-input-hovered)' | 'var(--ds-background-inverse-subtle-hovered)' | 'var(--ds-background-neutral-hovered)' | 'var(--ds-background-neutral-subtle-hovered)' | 'var(--ds-background-neutral-bold-hovered)' | 'var(--ds-background-selected-hovered)' | 'var(--ds-background-selected-bold-hovered)' | 'var(--ds-background-brand-subtlest-hovered)' | 'var(--ds-background-brand-bold-hovered)' | 'var(--ds-background-brand-boldest-hovered)' | 'var(--ds-background-danger-hovered)' | 'var(--ds-background-danger-subtler-hovered)' | 'var(--ds-background-danger-bold-hovered)' | 'var(--ds-background-warning-hovered)' | 'var(--ds-background-warning-subtler-hovered)' | 'var(--ds-background-warning-bold-hovered)' | 'var(--ds-background-success-hovered)' | 'var(--ds-background-success-subtler-hovered)' | 'var(--ds-background-success-bold-hovered)' | 'var(--ds-background-discovery-hovered)' | 'var(--ds-background-discovery-subtler-hovered)' | 'var(--ds-background-discovery-bold-hovered)' | 'var(--ds-background-information-hovered)' | 'var(--ds-background-information-subtler-hovered)' | 'var(--ds-background-information-bold-hovered)' | 'var(--ds-surface-hovered)' | 'var(--ds-surface-overlay-hovered)' | 'var(--ds-surface-raised-hovered)';
|
|
@@ -27,7 +27,10 @@ export type TextColor = 'transparent' | TextColorPressed | 'var(--ds-text)' | 'v
|
|
|
27
27
|
export type Opacity = 'var(--ds-opacity-disabled)' | 'var(--ds-opacity-loading)' | 0 | 1 | '0' | '1';
|
|
28
28
|
export type FontWeight = 'var(--ds-font-weight-regular)' | 'var(--ds-font-weight-medium)' | 'var(--ds-font-weight-semibold)' | 'var(--ds-font-weight-bold)' | 'inherit' | 'initial' | 'unset';
|
|
29
29
|
export type FontFamily = 'var(--ds-font-family-heading)' | 'var(--ds-font-family-body)' | 'var(--ds-font-family-code)' | 'var(--ds-font-family-brand-heading)' | 'var(--ds-font-family-brand-body)';
|
|
30
|
-
export type
|
|
30
|
+
export type MotionDuration = 'var(--ds-duration-instant)' | 'var(--ds-duration-long)' | 'var(--ds-duration-medium)' | 'var(--ds-duration-short)' | 'var(--ds-duration-xlong)' | 'var(--ds-duration-xshort)' | 'var(--ds-duration-xxlong)' | 'var(--ds-duration-xxshort)';
|
|
31
|
+
export type MotionEasing = 'var(--ds-easing-in-practical)' | 'var(--ds-easing-inout-bold)' | 'var(--ds-easing-out-practical)' | 'var(--ds-easing-out-bold)' | 'var(--ds-easing-spring)';
|
|
32
|
+
export type MotionKeyframes = 'var(--ds-keyframe-fade-in)' | 'var(--ds-keyframe-fade-out)' | 'var(--ds-keyframe-scale-in-medium)' | 'var(--ds-keyframe-scale-in-small)' | 'var(--ds-keyframe-scale-out-medium)' | 'var(--ds-keyframe-scale-out-small)' | 'var(--ds-keyframe-slide-in-bottom-short)' | 'var(--ds-keyframe-slide-in-left-half)' | 'var(--ds-keyframe-slide-in-left-short)' | 'var(--ds-keyframe-slide-in-right-short)' | 'var(--ds-keyframe-slide-in-top-short)' | 'var(--ds-keyframe-slide-out-bottom-short)' | 'var(--ds-keyframe-slide-out-left-half)' | 'var(--ds-keyframe-slide-out-left-short)' | 'var(--ds-keyframe-slide-out-right-short)' | 'var(--ds-keyframe-slide-out-top-short)';
|
|
33
|
+
export type Motion = 'var(--ds-avatar-enter)' | 'var(--ds-avatar-exit)' | 'var(--ds-avatar-hovered)' | 'var(--ds-blanket-enter)' | 'var(--ds-blanket-exit)' | 'var(--ds-flag-enter)' | 'var(--ds-flag-exit)' | 'var(--ds-flag-reposition)' | 'var(--ds-modal-enter)' | 'var(--ds-modal-exit)' | 'var(--ds-popup-enter-bottom)' | 'var(--ds-popup-enter-left)' | 'var(--ds-popup-enter-right)' | 'var(--ds-popup-enter-top)' | 'var(--ds-popup-exit-bottom)' | 'var(--ds-popup-exit-left)' | 'var(--ds-popup-exit-right)' | 'var(--ds-popup-exit-top)' | 'var(--ds-spotlight-enter)' | 'var(--ds-spotlight-exit)';
|
|
31
34
|
export interface CSSPropertiesHovered {
|
|
32
35
|
backgroundColor: BackgroundColorHovered;
|
|
33
36
|
}
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { InternalTokenIds } from './artifacts/types-internal';
|
|
2
|
-
export type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'shape' | 'typography' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing' | 'motion' | '
|
|
2
|
+
export type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'shape' | 'typography' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing' | 'motion' | 'motionDuration' | 'motionEasing' | 'motionKeyframe' | 'motionProperty';
|
|
3
3
|
type ActiveTokenState = 'active';
|
|
4
4
|
type DeprecatedTokenState = 'deprecated';
|
|
5
5
|
type DeletedTokenState = 'deleted';
|
|
@@ -108,6 +108,10 @@ export type ShapeToken<BaseToken> = DesignToken<BaseToken, 'shape'>;
|
|
|
108
108
|
export type FontWeightToken<BaseToken> = DesignToken<BaseToken, 'fontWeight'>;
|
|
109
109
|
export type FontFamilyToken<BaseToken> = DesignToken<BaseToken, 'fontFamily'>;
|
|
110
110
|
export type MotionToken<BaseToken> = DesignToken<BaseToken, 'motion'>;
|
|
111
|
+
export type MotionDurationToken<BaseToken> = DesignToken<BaseToken, 'motionDuration'>;
|
|
112
|
+
export type MotionEasingToken<BaseToken> = DesignToken<BaseToken, 'motionEasing'>;
|
|
113
|
+
export type MotionKeyframeToken<BaseToken> = DesignToken<BaseToken, 'motionKeyframe'>;
|
|
114
|
+
export type MotionPropertyToken<BaseToken> = DesignToken<BaseToken, 'motionProperty'>;
|
|
111
115
|
export type DeprecatedTypographyToken<BaseToken> = DesignToken<BaseToken, 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing'>;
|
|
112
116
|
export type RawToken = DesignToken<string, 'raw'>;
|
|
113
117
|
export interface PaletteColorTokenSchema<PaletteValues extends string> {
|
|
@@ -133,10 +137,10 @@ export interface ShapeScaleTokenSchema<RadiusScaleValues extends string, SizeSca
|
|
|
133
137
|
radius: Record<RadiusScaleValues, ShapeSchemaValue>;
|
|
134
138
|
}
|
|
135
139
|
export interface MotionScaleTokenSchema<DurationScaleValues extends string, BezierCurveScaleValues extends string, KeyframeScaleValues extends string, TransitionPropertyScaleValues extends string> {
|
|
136
|
-
duration: Record<DurationScaleValues, BaseToken<number, '
|
|
137
|
-
curve: Record<BezierCurveScaleValues, BaseToken<string, '
|
|
138
|
-
keyframe: Record<KeyframeScaleValues, BaseToken<Record<string, object>, '
|
|
139
|
-
properties: Record<TransitionPropertyScaleValues, BaseToken<string, '
|
|
140
|
+
duration: Record<DurationScaleValues, BaseToken<number, 'motionDuration'>>;
|
|
141
|
+
curve: Record<BezierCurveScaleValues, BaseToken<string, 'motionEasing'>>;
|
|
142
|
+
keyframe: Record<KeyframeScaleValues, BaseToken<Record<string, object>, 'motionKeyframe'>>;
|
|
143
|
+
properties: Record<TransitionPropertyScaleValues, BaseToken<string, 'motionProperty'>>;
|
|
140
144
|
}
|
|
141
145
|
export interface FontSizeScaleTokenSchema<ScaleValues extends string> {
|
|
142
146
|
fontSize: Record<ScaleValues, BaseToken<string | number, 'fontSize'>>;
|
|
@@ -1133,6 +1137,10 @@ export interface MotionTokenSchema<BaseToken> {
|
|
|
1133
1137
|
exit: MotionToken<BaseToken>;
|
|
1134
1138
|
hovered: MotionToken<BaseToken>;
|
|
1135
1139
|
};
|
|
1140
|
+
blanket: {
|
|
1141
|
+
enter: MotionToken<BaseToken>;
|
|
1142
|
+
exit: MotionToken<BaseToken>;
|
|
1143
|
+
};
|
|
1136
1144
|
flag: {
|
|
1137
1145
|
enter: MotionToken<BaseToken>;
|
|
1138
1146
|
exit: MotionToken<BaseToken>;
|
|
@@ -1160,16 +1168,87 @@ export interface MotionTokenSchema<BaseToken> {
|
|
|
1160
1168
|
enter: MotionToken<BaseToken>;
|
|
1161
1169
|
exit: MotionToken<BaseToken>;
|
|
1162
1170
|
};
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1171
|
+
};
|
|
1172
|
+
}
|
|
1173
|
+
export interface MotionDurationTokenSchema<BaseToken> {
|
|
1174
|
+
motion: {
|
|
1175
|
+
duration: {
|
|
1176
|
+
instant: MotionDurationToken<BaseToken>;
|
|
1177
|
+
xxshort: MotionDurationToken<BaseToken>;
|
|
1178
|
+
xshort: MotionDurationToken<BaseToken>;
|
|
1179
|
+
short: MotionDurationToken<BaseToken>;
|
|
1180
|
+
medium: MotionDurationToken<BaseToken>;
|
|
1181
|
+
long: MotionDurationToken<BaseToken>;
|
|
1182
|
+
xlong: MotionDurationToken<BaseToken>;
|
|
1183
|
+
xxlong: MotionDurationToken<BaseToken>;
|
|
1184
|
+
};
|
|
1185
|
+
};
|
|
1186
|
+
}
|
|
1187
|
+
export interface MotionEasingTokenSchema<BaseToken> {
|
|
1188
|
+
motion: {
|
|
1189
|
+
easing: {
|
|
1190
|
+
out: {
|
|
1191
|
+
bold: MotionEasingToken<BaseToken>;
|
|
1192
|
+
practical: MotionEasingToken<BaseToken>;
|
|
1168
1193
|
};
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1194
|
+
in: {
|
|
1195
|
+
practical: MotionEasingToken<BaseToken>;
|
|
1196
|
+
};
|
|
1197
|
+
inout: {
|
|
1198
|
+
bold: MotionEasingToken<BaseToken>;
|
|
1199
|
+
};
|
|
1200
|
+
spring: MotionEasingToken<BaseToken>;
|
|
1201
|
+
};
|
|
1202
|
+
};
|
|
1203
|
+
}
|
|
1204
|
+
export interface MotionKeyframeTokenSchema<BaseToken> {
|
|
1205
|
+
motion: {
|
|
1206
|
+
keyframe: {
|
|
1207
|
+
scale: {
|
|
1208
|
+
in: {
|
|
1209
|
+
small: MotionKeyframeToken<BaseToken>;
|
|
1210
|
+
medium: MotionKeyframeToken<BaseToken>;
|
|
1211
|
+
};
|
|
1212
|
+
out: {
|
|
1213
|
+
small: MotionKeyframeToken<BaseToken>;
|
|
1214
|
+
medium: MotionKeyframeToken<BaseToken>;
|
|
1215
|
+
};
|
|
1216
|
+
};
|
|
1217
|
+
fade: {
|
|
1218
|
+
in: MotionKeyframeToken<BaseToken>;
|
|
1219
|
+
out: MotionKeyframeToken<BaseToken>;
|
|
1220
|
+
};
|
|
1221
|
+
slide: {
|
|
1222
|
+
in: {
|
|
1223
|
+
top: {
|
|
1224
|
+
short: MotionKeyframeToken<BaseToken>;
|
|
1225
|
+
};
|
|
1226
|
+
bottom: {
|
|
1227
|
+
short: MotionKeyframeToken<BaseToken>;
|
|
1228
|
+
};
|
|
1229
|
+
left: {
|
|
1230
|
+
short: MotionKeyframeToken<BaseToken>;
|
|
1231
|
+
half: MotionKeyframeToken<BaseToken>;
|
|
1232
|
+
};
|
|
1233
|
+
right: {
|
|
1234
|
+
short: MotionKeyframeToken<BaseToken>;
|
|
1235
|
+
};
|
|
1236
|
+
};
|
|
1237
|
+
out: {
|
|
1238
|
+
top: {
|
|
1239
|
+
short: MotionKeyframeToken<BaseToken>;
|
|
1240
|
+
};
|
|
1241
|
+
bottom: {
|
|
1242
|
+
short: MotionKeyframeToken<BaseToken>;
|
|
1243
|
+
};
|
|
1244
|
+
left: {
|
|
1245
|
+
short: MotionKeyframeToken<BaseToken>;
|
|
1246
|
+
half: MotionKeyframeToken<BaseToken>;
|
|
1247
|
+
};
|
|
1248
|
+
right: {
|
|
1249
|
+
short: MotionKeyframeToken<BaseToken>;
|
|
1250
|
+
};
|
|
1251
|
+
};
|
|
1173
1252
|
};
|
|
1174
1253
|
};
|
|
1175
1254
|
};
|
|
@@ -1,22 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::61e5f6306081ee114d542ad7b43b7e1c>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
|
-
type TokenValue = string | number |
|
|
7
|
-
|
|
8
|
-
curve: string;
|
|
9
|
-
keyframes?: string[];
|
|
10
|
-
properties?: string[];
|
|
11
|
-
delay?: number;
|
|
12
|
-
} | Record<string, any>;
|
|
13
|
-
type TokenValueOriginal = string | number | {
|
|
14
|
-
duration: string;
|
|
15
|
-
curve: string;
|
|
16
|
-
keyframes?: string[];
|
|
17
|
-
properties?: string[];
|
|
18
|
-
delay?: string;
|
|
19
|
-
} | Record<string, any>;
|
|
6
|
+
type TokenValue = string | number | Record<string, any>;
|
|
7
|
+
type TokenValueOriginal = string | number | Record<string, any>;
|
|
20
8
|
type TokenAttributes = {
|
|
21
9
|
group: string;
|
|
22
10
|
};
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* These changes will then be picked up by our tooling which will attempt to
|
|
13
13
|
* migrate as many of these renames as possible.
|
|
14
14
|
*
|
|
15
|
-
* @codegen <<SignedSource::
|
|
15
|
+
* @codegen <<SignedSource::26489b868b6a67a598f0fa4a421cae65>>
|
|
16
16
|
* @codegenCommand yarn build tokens
|
|
17
17
|
*/
|
|
18
18
|
import type tokens from './token-names';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::e2c90de3fa6bd9d4da20a85c310b97e2>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
|
-
declare const _default: "\n@keyframes
|
|
6
|
+
declare const _default: "\n@keyframes SlideInTop8px {\n 0% {\n transform: translateY(8px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n@keyframes SlideInBottom8px {\n 0% {\n transform: translateY(-8px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n@keyframes SlideInLeft8px {\n 0% {\n transform: translateX(8px);\n }\n 100% {\n transform: translateX(0px);\n }\n}\n@keyframes SlideInRight8px {\n 0% {\n transform: translateX(-8px);\n }\n 100% {\n transform: translateX(0px);\n }\n}\n@keyframes SlideOutTop8px {\n 0% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(4px);\n }\n}\n@keyframes SlideOutBottom8px {\n 0% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(-4px);\n }\n}\n@keyframes SlideOutLeft8px {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(4px);\n }\n}\n@keyframes SlideOutRight8px {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(-4px);\n }\n}\n@keyframes ScaleIn80to100 {\n 0% {\n transform: scale(0.8);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes ScaleIn95to100 {\n 0% {\n transform: scale(0.95);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes ScaleOut100to80 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.8);\n }\n}\n@keyframes ScaleOut100to95 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.95);\n }\n}\n@keyframes FadeIn0to100 {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes FadeOut100to0 {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes SlideOut15PercentLeft {\n 0% {\n transform: translateX(0px);\n transform-origin: left;\n }\n 100% {\n transform: translateX(-15%);\n transform-origin: left;\n }\n}\n@keyframes SlideIn50PercentLeft {\n 0% {\n transform: translateX(-50%);\n transform-origin: left;\n }\n 100% {\n transform: translateX(0px);\n transform-origin: left;\n }\n}\nhtml[data-theme~=\"motion:motion\"], [data-subtree-theme][data-theme~=\"motion:motion\"] {\n --ds-avatar-enter: 150ms cubic-bezier(0.4, 1, 0.6, 1) ScaleIn80to100, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;\n --ds-avatar-exit: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to80, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-avatar-hovered: transform 250ms linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1);\n --ds-blanket-enter: 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100;\n --ds-blanket-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-duration-instant: 0ms;\n --ds-duration-long: 250ms;\n --ds-duration-medium: 200ms;\n --ds-duration-short: 150ms;\n --ds-duration-xlong: 400ms;\n --ds-duration-xshort: 100ms;\n --ds-duration-xxlong: 600ms;\n --ds-duration-xxshort: 50ms;\n --ds-easing-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6);\n --ds-easing-inout-bold: cubic-bezier(0.4, 0, 0, 1);\n --ds-easing-out-practical: cubic-bezier(0.4, 1, 0.6, 1);\n --ds-easing-out-bold: cubic-bezier(0, 0.4, 0, 1);\n --ds-easing-spring: linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1);\n --ds-flag-enter: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100;\n --ds-flag-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-flag-reposition: transform 250ms cubic-bezier(0.4, 0, 0, 1);\n --ds-keyframe-fade-in: FadeIn0to100;\n --ds-keyframe-fade-out: FadeOut100to0;\n --ds-keyframe-scale-in-medium: ScaleIn80to100;\n --ds-keyframe-scale-in-small: ScaleIn95to100;\n --ds-keyframe-scale-out-medium: ScaleOut100to80;\n --ds-keyframe-scale-out-small: ScaleOut100to95;\n --ds-keyframe-slide-in-bottom-short: SlideInBottom8px;\n --ds-keyframe-slide-in-left-half: SlideIn50PercentLeft;\n --ds-keyframe-slide-in-left-short: SlideInLeft8px;\n --ds-keyframe-slide-in-right-short: SlideInRight8px;\n --ds-keyframe-slide-in-top-short: SlideInTop8px;\n --ds-keyframe-slide-out-bottom-short: SlideOutBottom8px;\n --ds-keyframe-slide-out-left-half: SlideOut15PercentLeft;\n --ds-keyframe-slide-out-left-short: SlideOutLeft8px;\n --ds-keyframe-slide-out-right-short: SlideOutRight8px;\n --ds-keyframe-slide-out-top-short: SlideOutTop8px;\n --ds-modal-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100;\n --ds-modal-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95;\n --ds-popup-enter-bottom: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;\n --ds-popup-enter-left: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;\n --ds-popup-enter-right: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;\n --ds-popup-enter-top: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;\n --ds-popup-exit-bottom: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-popup-exit-left: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-popup-exit-right: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-popup-exit-top: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n --ds-spotlight-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100;\n --ds-spotlight-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;\n}\n";
|
|
7
7
|
export default _default;
|