@atlaskit/tokens 11.4.2 → 12.0.0

package/dist/types-ts4.5/artifacts/token-default-values.d.ts

@@ -7,34 +7,59 @@
  * Token names mapped to their value in the default Atlassian themes ('light').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::c8dea3807fda6392faffb7299b6ecb9a>>
+ * @codegen <<SignedSource::0fbc9a08bd94ff0842a2dd504e6a9ce6>>
  * @codegenCommand yarn build tokens
  */
 declare const defaultTokenValues: {
-    readonly 'motion.avatar.enter': "150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn";
-    readonly 'motion.avatar.exit': "100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut";
-    readonly 'motion.avatar.hovered': "transform 100ms cubic-bezier(0.32, 0, 0.67, 0)";
-    readonly 'motion.content.enter.long': "400ms cubic-bezier(0.4, 0, 0, 1) FadeIn";
-    readonly 'motion.content.enter.medium': "200ms cubic-bezier(0.4, 0, 0, 1) FadeIn";
-    readonly 'motion.content.enter.short': "100ms cubic-bezier(0.4, 0, 0, 1) FadeIn";
-    readonly 'motion.content.exit.long': "200ms cubic-bezier(0.4, 0, 0, 1) FadeOut";
-    readonly 'motion.content.exit.medium': "100ms cubic-bezier(0.4, 0, 0, 1) FadeOut";
-    readonly 'motion.content.exit.short': "50ms cubic-bezier(0.4, 0, 0, 1) FadeOut";
-    readonly 'motion.flag.enter': "250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn";
-    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) FadeOut";
-    readonly 'motion.flag.reposition': "transform 300ms cubic-bezier(0.4, 0, 0, 1)";
-    readonly 'motion.modal.enter': "200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn";
-    readonly 'motion.modal.exit': "200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut";
-    readonly 'motion.popup.enter.bottom': "150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn";
-    readonly 'motion.popup.enter.left': "150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn";
-    readonly 'motion.popup.enter.right': "150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn";
-    readonly 'motion.popup.enter.top': "150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn";
-    readonly 'motion.popup.exit.bottom': "100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut";
-    readonly 'motion.popup.exit.left': "100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut";
-    readonly 'motion.popup.exit.right': "100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut";
-    readonly 'motion.popup.exit.top': "100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut";
-    readonly 'motion.spotlight.enter': "250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn";
-    readonly 'motion.spotlight.exit': "200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut";
+    readonly 'motion.avatar.enter': "150ms cubic-bezier(0.4, 1, 0.6, 1) ScaleIn80to100, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100";
+    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";
+    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)";
+    readonly 'motion.blanket.enter': "250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100";
+    readonly 'motion.blanket.exit': "200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0";
+    readonly 'motion.duration.instant': "0ms";
+    readonly 'motion.duration.long': "250ms";
+    readonly 'motion.duration.medium': "200ms";
+    readonly 'motion.duration.short': "150ms";
+    readonly 'motion.duration.xlong': "400ms";
+    readonly 'motion.duration.xshort': "100ms";
+    readonly 'motion.duration.xxlong': "600ms";
+    readonly 'motion.duration.xxshort': "50ms";
+    readonly 'motion.easing.in.practical': "cubic-bezier(0.6, 0, 0.8, 0.6)";
+    readonly 'motion.easing.inout.bold': "cubic-bezier(0.4, 0, 0, 1)";
+    readonly 'motion.easing.out.practical': "cubic-bezier(0.4, 1, 0.6, 1)";
+    readonly 'motion.easing.out.bold': "cubic-bezier(0, 0.4, 0, 1)";
+    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)";
+    readonly 'motion.flag.enter': "250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100";
+    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";
+    readonly 'motion.flag.reposition': "transform 250ms cubic-bezier(0.4, 0, 0, 1)";
+    readonly 'motion.keyframe.fade.in': "FadeIn0to100";
+    readonly 'motion.keyframe.fade.out': "FadeOut100to0";
+    readonly 'motion.keyframe.scale.in.medium': "ScaleIn80to100";
+    readonly 'motion.keyframe.scale.in.small': "ScaleIn95to100";
+    readonly 'motion.keyframe.scale.out.medium': "ScaleOut100to80";
+    readonly 'motion.keyframe.scale.out.small': "ScaleOut100to95";
+    readonly 'motion.keyframe.slide.in.bottom.short': "SlideInBottom8px";
+    readonly 'motion.keyframe.slide.in.left.half': "SlideIn50PercentLeft";
+    readonly 'motion.keyframe.slide.in.left.short': "SlideInLeft8px";
+    readonly 'motion.keyframe.slide.in.right.short': "SlideInRight8px";
+    readonly 'motion.keyframe.slide.in.top.short': "SlideInTop8px";
+    readonly 'motion.keyframe.slide.out.bottom.short': "SlideOutBottom8px";
+    readonly 'motion.keyframe.slide.out.left.half': "SlideOut15PercentLeft";
+    readonly 'motion.keyframe.slide.out.left.short': "SlideOutLeft8px";
+    readonly 'motion.keyframe.slide.out.right.short': "SlideOutRight8px";
+    readonly 'motion.keyframe.slide.out.top.short': "SlideOutTop8px";
+    readonly 'motion.modal.enter': "250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100";
+    readonly 'motion.modal.exit': "200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95";
+    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";
+    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";
+    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";
+    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";
+    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";
+    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";
+    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";
+    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";
+    readonly 'motion.spotlight.enter': "250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100";
+    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";
     readonly 'color.text': "#292A2E";
     readonly 'color.text.accent.lime': "#4C6B1F";
     readonly 'color.text.accent.lime.bolder': "#37471F";

package/dist/types-ts4.5/artifacts/token-names.d.ts

@@ -1,21 +1,46 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::921c184d9a6e3b52bd2ab053939ce9ad>>
+ * @codegen <<SignedSource::c7da53f7a9d4a33334530aad043ae18b>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: {
     readonly 'motion.avatar.enter': "--ds-avatar-enter";
     readonly 'motion.avatar.exit': "--ds-avatar-exit";
     readonly 'motion.avatar.hovered': "--ds-avatar-hovered";
-    readonly 'motion.content.enter.long': "--ds-content-enter-long";
-    readonly 'motion.content.enter.medium': "--ds-content-enter-medium";
-    readonly 'motion.content.enter.short': "--ds-content-enter-short";
-    readonly 'motion.content.exit.long': "--ds-content-exit-long";
-    readonly 'motion.content.exit.medium': "--ds-content-exit-medium";
-    readonly 'motion.content.exit.short': "--ds-content-exit-short";
+    readonly 'motion.blanket.enter': "--ds-blanket-enter";
+    readonly 'motion.blanket.exit': "--ds-blanket-exit";
+    readonly 'motion.duration.instant': "--ds-duration-instant";
+    readonly 'motion.duration.long': "--ds-duration-long";
+    readonly 'motion.duration.medium': "--ds-duration-medium";
+    readonly 'motion.duration.short': "--ds-duration-short";
+    readonly 'motion.duration.xlong': "--ds-duration-xlong";
+    readonly 'motion.duration.xshort': "--ds-duration-xshort";
+    readonly 'motion.duration.xxlong': "--ds-duration-xxlong";
+    readonly 'motion.duration.xxshort': "--ds-duration-xxshort";
+    readonly 'motion.easing.in.practical': "--ds-easing-in-practical";
+    readonly 'motion.easing.inout.bold': "--ds-easing-inout-bold";
+    readonly 'motion.easing.out.practical': "--ds-easing-out-practical";
+    readonly 'motion.easing.out.bold': "--ds-easing-out-bold";
+    readonly 'motion.easing.spring': "--ds-easing-spring";
     readonly 'motion.flag.enter': "--ds-flag-enter";
     readonly 'motion.flag.exit': "--ds-flag-exit";
     readonly 'motion.flag.reposition': "--ds-flag-reposition";
+    readonly 'motion.keyframe.fade.in': "--ds-keyframe-fade-in";
+    readonly 'motion.keyframe.fade.out': "--ds-keyframe-fade-out";
+    readonly 'motion.keyframe.scale.in.medium': "--ds-keyframe-scale-in-medium";
+    readonly 'motion.keyframe.scale.in.small': "--ds-keyframe-scale-in-small";
+    readonly 'motion.keyframe.scale.out.medium': "--ds-keyframe-scale-out-medium";
+    readonly 'motion.keyframe.scale.out.small': "--ds-keyframe-scale-out-small";
+    readonly 'motion.keyframe.slide.in.bottom.short': "--ds-keyframe-slide-in-bottom-short";
+    readonly 'motion.keyframe.slide.in.left.half': "--ds-keyframe-slide-in-left-half";
+    readonly 'motion.keyframe.slide.in.left.short': "--ds-keyframe-slide-in-left-short";
+    readonly 'motion.keyframe.slide.in.right.short': "--ds-keyframe-slide-in-right-short";
+    readonly 'motion.keyframe.slide.in.top.short': "--ds-keyframe-slide-in-top-short";
+    readonly 'motion.keyframe.slide.out.bottom.short': "--ds-keyframe-slide-out-bottom-short";
+    readonly 'motion.keyframe.slide.out.left.half': "--ds-keyframe-slide-out-left-half";
+    readonly 'motion.keyframe.slide.out.left.short': "--ds-keyframe-slide-out-left-short";
+    readonly 'motion.keyframe.slide.out.right.short': "--ds-keyframe-slide-out-right-short";
+    readonly 'motion.keyframe.slide.out.top.short': "--ds-keyframe-slide-out-top-short";
     readonly 'motion.modal.enter': "--ds-modal-enter";
     readonly 'motion.modal.exit': "--ds-modal-exit";
     readonly 'motion.popup.enter.bottom': "--ds-popup-enter-bottom";
@@ -501,15 +526,40 @@ export type CSSTokenMap = {
     'motion.avatar.enter': 'var(--ds-avatar-enter)';
     'motion.avatar.exit': 'var(--ds-avatar-exit)';
     'motion.avatar.hovered': 'var(--ds-avatar-hovered)';
-    'motion.content.enter.long': 'var(--ds-content-enter-long)';
-    'motion.content.enter.medium': 'var(--ds-content-enter-medium)';
-    'motion.content.enter.short': 'var(--ds-content-enter-short)';
-    'motion.content.exit.long': 'var(--ds-content-exit-long)';
-    'motion.content.exit.medium': 'var(--ds-content-exit-medium)';
-    'motion.content.exit.short': 'var(--ds-content-exit-short)';
+    'motion.blanket.enter': 'var(--ds-blanket-enter)';
+    'motion.blanket.exit': 'var(--ds-blanket-exit)';
+    'motion.duration.instant': 'var(--ds-duration-instant)';
+    'motion.duration.long': 'var(--ds-duration-long)';
+    'motion.duration.medium': 'var(--ds-duration-medium)';
+    'motion.duration.short': 'var(--ds-duration-short)';
+    'motion.duration.xlong': 'var(--ds-duration-xlong)';
+    'motion.duration.xshort': 'var(--ds-duration-xshort)';
+    'motion.duration.xxlong': 'var(--ds-duration-xxlong)';
+    'motion.duration.xxshort': 'var(--ds-duration-xxshort)';
+    'motion.easing.in.practical': 'var(--ds-easing-in-practical)';
+    'motion.easing.inout.bold': 'var(--ds-easing-inout-bold)';
+    'motion.easing.out.practical': 'var(--ds-easing-out-practical)';
+    'motion.easing.out.bold': 'var(--ds-easing-out-bold)';
+    'motion.easing.spring': 'var(--ds-easing-spring)';
     'motion.flag.enter': 'var(--ds-flag-enter)';
     'motion.flag.exit': 'var(--ds-flag-exit)';
     'motion.flag.reposition': 'var(--ds-flag-reposition)';
+    'motion.keyframe.fade.in': 'var(--ds-keyframe-fade-in)';
+    'motion.keyframe.fade.out': 'var(--ds-keyframe-fade-out)';
+    'motion.keyframe.scale.in.medium': 'var(--ds-keyframe-scale-in-medium)';
+    'motion.keyframe.scale.in.small': 'var(--ds-keyframe-scale-in-small)';
+    'motion.keyframe.scale.out.medium': 'var(--ds-keyframe-scale-out-medium)';
+    'motion.keyframe.scale.out.small': 'var(--ds-keyframe-scale-out-small)';
+    'motion.keyframe.slide.in.bottom.short': 'var(--ds-keyframe-slide-in-bottom-short)';
+    'motion.keyframe.slide.in.left.half': 'var(--ds-keyframe-slide-in-left-half)';
+    'motion.keyframe.slide.in.left.short': 'var(--ds-keyframe-slide-in-left-short)';
+    'motion.keyframe.slide.in.right.short': 'var(--ds-keyframe-slide-in-right-short)';
+    'motion.keyframe.slide.in.top.short': 'var(--ds-keyframe-slide-in-top-short)';
+    'motion.keyframe.slide.out.bottom.short': 'var(--ds-keyframe-slide-out-bottom-short)';
+    'motion.keyframe.slide.out.left.half': 'var(--ds-keyframe-slide-out-left-half)';
+    'motion.keyframe.slide.out.left.short': 'var(--ds-keyframe-slide-out-left-short)';
+    'motion.keyframe.slide.out.right.short': 'var(--ds-keyframe-slide-out-right-short)';
+    'motion.keyframe.slide.out.top.short': 'var(--ds-keyframe-slide-out-top-short)';
     'motion.modal.enter': 'var(--ds-modal-enter)';
     'motion.modal.exit': 'var(--ds-modal-exit)';
     'motion.popup.enter.bottom': 'var(--ds-popup-enter-bottom)';

package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-motion.d.ts

@@ -1,22 +1,22 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a05c62bc089a075de35d08a2570d9421>>
+ * @codegen <<SignedSource::148f2f6a72e79c38e027eeed3b58d3ac>>
  * @codegenCommand yarn build tokens
  */
-type TokenValue = {
+type TokenValue = string | {
     duration: number;
     curve: string;
     keyframes?: string[];
     properties?: string[];
     delay?: number;
-};
-type TokenValueOriginal = {
+} | Record<string, any>;
+type TokenValueOriginal = string | {
     duration: string;
     curve: string;
     keyframes?: string[];
     properties?: string[];
     delay?: string;
-};
+} | Record<string, any>;
 type TokenAttributes = {
     group: string;
     state: string;

package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts

@@ -3,7 +3,7 @@
  *
  * Strict design token based typedef representing a subset of safe CSS properties.
  *
- * @codegen <<SignedSource::08c6f944d8c913dff7bdf4becc44b834>>
+ * @codegen <<SignedSource::f1569c36646168ca5c04a848525f2421>>
  * @codegenCommand yarn build tokens
  */
 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
 export type Opacity = 'var(--ds-opacity-disabled)' | 'var(--ds-opacity-loading)' | 0 | 1 | '0' | '1';
 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';
 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)';
-export type Motion = 'var(--ds-avatar-enter)' | 'var(--ds-avatar-exit)' | 'var(--ds-avatar-hovered)' | 'var(--ds-content-enter-long)' | 'var(--ds-content-enter-medium)' | 'var(--ds-content-enter-short)' | 'var(--ds-content-exit-long)' | 'var(--ds-content-exit-medium)' | 'var(--ds-content-exit-short)' | '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)';
+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)';
+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)';
+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)';
+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)';
 export interface CSSPropertiesHovered {
     backgroundColor: BackgroundColorHovered;
 }

package/dist/types-ts4.5/types.d.ts

@@ -1,5 +1,5 @@
 import type { InternalTokenIds } from './artifacts/types-internal';
-export type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'shape' | 'typography' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing' | 'motion' | 'keyframe';
+export type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'shape' | 'typography' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing' | 'motion' | 'motionDuration' | 'motionEasing' | 'motionKeyframe' | 'motionProperty';
 type ActiveTokenState = 'active';
 type DeprecatedTokenState = 'deprecated';
 type DeletedTokenState = 'deleted';
@@ -108,6 +108,10 @@ export type ShapeToken<BaseToken> = DesignToken<BaseToken, 'shape'>;
 export type FontWeightToken<BaseToken> = DesignToken<BaseToken, 'fontWeight'>;
 export type FontFamilyToken<BaseToken> = DesignToken<BaseToken, 'fontFamily'>;
 export type MotionToken<BaseToken> = DesignToken<BaseToken, 'motion'>;
+export type MotionDurationToken<BaseToken> = DesignToken<BaseToken, 'motionDuration'>;
+export type MotionEasingToken<BaseToken> = DesignToken<BaseToken, 'motionEasing'>;
+export type MotionKeyframeToken<BaseToken> = DesignToken<BaseToken, 'motionKeyframe'>;
+export type MotionPropertyToken<BaseToken> = DesignToken<BaseToken, 'motionProperty'>;
 export type DeprecatedTypographyToken<BaseToken> = DesignToken<BaseToken, 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing'>;
 export type RawToken = DesignToken<string, 'raw'>;
 export interface PaletteColorTokenSchema<PaletteValues extends string> {
@@ -133,10 +137,10 @@ export interface ShapeScaleTokenSchema<RadiusScaleValues extends string, SizeSca
     radius: Record<RadiusScaleValues, ShapeSchemaValue>;
 }
 export interface MotionScaleTokenSchema<DurationScaleValues extends string, BezierCurveScaleValues extends string, KeyframeScaleValues extends string, TransitionPropertyScaleValues extends string> {
-    duration: Record<DurationScaleValues, BaseToken<number, 'motion'>>;
-    curve: Record<BezierCurveScaleValues, BaseToken<string, 'motion'>>;
-    keyframe: Record<KeyframeScaleValues, BaseToken<Record<string, object>, 'keyframe'>>;
-    properties: Record<TransitionPropertyScaleValues, BaseToken<string, 'motion'>>;
+    duration: Record<DurationScaleValues, BaseToken<number, 'motionDuration'>>;
+    curve: Record<BezierCurveScaleValues, BaseToken<string, 'motionEasing'>>;
+    keyframe: Record<KeyframeScaleValues, BaseToken<Record<string, object>, 'motionKeyframe'>>;
+    properties: Record<TransitionPropertyScaleValues, BaseToken<string, 'motionProperty'>>;
 }
 export interface FontSizeScaleTokenSchema<ScaleValues extends string> {
     fontSize: Record<ScaleValues, BaseToken<string | number, 'fontSize'>>;
@@ -1133,6 +1137,10 @@ export interface MotionTokenSchema<BaseToken> {
             exit: MotionToken<BaseToken>;
             hovered: MotionToken<BaseToken>;
         };
+        blanket: {
+            enter: MotionToken<BaseToken>;
+            exit: MotionToken<BaseToken>;
+        };
         flag: {
             enter: MotionToken<BaseToken>;
             exit: MotionToken<BaseToken>;
@@ -1160,16 +1168,87 @@ export interface MotionTokenSchema<BaseToken> {
             enter: MotionToken<BaseToken>;
             exit: MotionToken<BaseToken>;
         };
-        content: {
-            enter: {
-                short: MotionToken<BaseToken>;
-                medium: MotionToken<BaseToken>;
-                long: MotionToken<BaseToken>;
+    };
+}
+export interface MotionDurationTokenSchema<BaseToken> {
+    motion: {
+        duration: {
+            instant: MotionDurationToken<BaseToken>;
+            xxshort: MotionDurationToken<BaseToken>;
+            xshort: MotionDurationToken<BaseToken>;
+            short: MotionDurationToken<BaseToken>;
+            medium: MotionDurationToken<BaseToken>;
+            long: MotionDurationToken<BaseToken>;
+            xlong: MotionDurationToken<BaseToken>;
+            xxlong: MotionDurationToken<BaseToken>;
+        };
+    };
+}
+export interface MotionEasingTokenSchema<BaseToken> {
+    motion: {
+        easing: {
+            out: {
+                bold: MotionEasingToken<BaseToken>;
+                practical: MotionEasingToken<BaseToken>;
             };
-            exit: {
-                short: MotionToken<BaseToken>;
-                medium: MotionToken<BaseToken>;
-                long: MotionToken<BaseToken>;
+            in: {
+                practical: MotionEasingToken<BaseToken>;
+            };
+            inout: {
+                bold: MotionEasingToken<BaseToken>;
+            };
+            spring: MotionEasingToken<BaseToken>;
+        };
+    };
+}
+export interface MotionKeyframeTokenSchema<BaseToken> {
+    motion: {
+        keyframe: {
+            scale: {
+                in: {
+                    small: MotionKeyframeToken<BaseToken>;
+                    medium: MotionKeyframeToken<BaseToken>;
+                };
+                out: {
+                    small: MotionKeyframeToken<BaseToken>;
+                    medium: MotionKeyframeToken<BaseToken>;
+                };
+            };
+            fade: {
+                in: MotionKeyframeToken<BaseToken>;
+                out: MotionKeyframeToken<BaseToken>;
+            };
+            slide: {
+                in: {
+                    top: {
+                        short: MotionKeyframeToken<BaseToken>;
+                    };
+                    bottom: {
+                        short: MotionKeyframeToken<BaseToken>;
+                    };
+                    left: {
+                        short: MotionKeyframeToken<BaseToken>;
+                        half: MotionKeyframeToken<BaseToken>;
+                    };
+                    right: {
+                        short: MotionKeyframeToken<BaseToken>;
+                    };
+                };
+                out: {
+                    top: {
+                        short: MotionKeyframeToken<BaseToken>;
+                    };
+                    bottom: {
+                        short: MotionKeyframeToken<BaseToken>;
+                    };
+                    left: {
+                        short: MotionKeyframeToken<BaseToken>;
+                        half: MotionKeyframeToken<BaseToken>;
+                    };
+                    right: {
+                        short: MotionKeyframeToken<BaseToken>;
+                    };
+                };
             };
         };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "11.4.2",
+	"version": "12.0.0",
 	"description": "Design tokens are the single source of truth to name and store design decisions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -17,6 +17,13 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
+		"react-compiler": {
+			"enabled": true,
+			"gating": {
+				"source": "@atlassian/react-compiler-gating",
+				"importSpecifierName": "isReactCompilerActivePlatform"
+			}
+		},
 		"team": "Design System Team",
 		"website": {
 			"name": "Design tokens",
@@ -30,7 +37,7 @@
 		"codegen-tokens": "run-ts ./scripts/style-dictionary/build.tsx && run-ts ./scripts/style-dictionary/build-plugin-token-map.tsx && cd $(npx repo-root)/packages/design-system/primitives && yarn codegen-styles && cd $(npx repo-root)/packages/design-system/ds-explorations && yarn codegen-styles"
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^6.0.0",
+		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@babel/traverse": "^7.23.2",
@@ -44,7 +51,7 @@
 		"@af/formatting": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/avatar": "^25.11.0",
-		"@atlaskit/button": "^23.10.0",
+		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/calendar": "^17.2.0",
 		"@atlaskit/checkbox": "^17.3.0",
 		"@atlaskit/code": "^17.4.0",
@@ -54,23 +61,24 @@
 		"@atlaskit/dynamic-table": "^18.3.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/grid": "^0.18.0",
-		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/icon": "^33.1.0",
+		"@atlaskit/heading": "^5.4.0",
+		"@atlaskit/icon": "^34.0.0",
 		"@atlaskit/inline-message": "^15.6.0",
-		"@atlaskit/link": "^3.3.0",
+		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/lozenge": "^13.5.0",
 		"@atlaskit/popup": "^4.16.0",
 		"@atlaskit/primitives": "^18.1.0",
-		"@atlaskit/radio": "^8.4.0",
+		"@atlaskit/radio": "^8.5.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/select": "^21.10.0",
-		"@atlaskit/tag": "^14.6.0",
+		"@atlaskit/tag": "^14.7.0",
 		"@atlaskit/textarea": "^8.2.0",
-		"@atlaskit/textfield": "^8.2.0",
-		"@atlaskit/theme": "^22.0.0",
+		"@atlaskit/textfield": "^8.3.0",
+		"@atlaskit/theme": "^23.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@atlassian/codegen": "^0.1.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@atlassian/ts-loader": "^0.1.0",
 		"@babel/core": "7.24.9",