@atlaskit/tokens 11.1.1 → 11.3.0

package/dist/esm/utils/token-usage-guidelines.js

@@ -0,0 +1,111 @@
+export var getTokenUsageGuidelines = function getTokenUsageGuidelines(tokenId) {
+  var tokenTypes = Object.keys(usageMappings);
+  var foundType = tokenTypes.find(function (type) {
+    return tokenId.startsWith(type);
+  });
+  if (foundType && usageMappings[foundType]) {
+    return usageMappings[foundType];
+  }
+  return {
+    usage: '',
+    cssProperties: []
+  }; // Fallback if tokenId doesn't match any token type
+};
+var usageMappings = {
+  'color.text': {
+    usage: 'The color for standard text. Use for primary, readable text in most user interface situations (e.g. color.text, color.text.subtle)',
+    cssProperties: ['color']
+  },
+  'color.link': {
+    usage: 'The color for hyperlinks. Use for elements that are links to external resources or navigation (e.g. color.link)',
+    cssProperties: ['color']
+  },
+  'color.icon': {
+    usage: 'The color for icons. Use for graphical icon elements (e.g. color.icon.brand)',
+    cssProperties: ['color', 'fill', 'stroke']
+  },
+  'color.border': {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  },
+  'color.background': {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  },
+  'color.blanket': {
+    usage: 'The color for overlay "blankets" such as modals/dimmers/overlays (e.g. color.blanket)',
+    cssProperties: ['background-color']
+  },
+  'color.interaction': {
+    usage: 'Transparent interaction states for use over elements when their background color cannot change, such as images and avatars.',
+    cssProperties: ['background-color', 'border-color']
+  },
+  'color.skeleton': {
+    usage: 'The color for skeleton/loading placeholders (e.g. color.skeleton)',
+    cssProperties: ['background-color']
+  },
+  'color.chart': {
+    usage: 'The color for chart and data visualization elements (e.g. color.chart)',
+    cssProperties: ['fill', 'stroke', 'background-color', 'color']
+  },
+  'elevation.surface': {
+    usage: 'The base color for app and component surfaces. Raised and overlay surfaces should be used in concert with shadows (e.g. elevation.surface.raised should be used with elevation.shadow.raised)',
+    cssProperties: ['background-color']
+  },
+  'elevation.shadow': {
+    usage: 'Shadows for showing depth and elevation (e.g. elevation.shadow.raised, elevation.shadow.overlay). Use via the box-shadow property to indicate layer hierarchy',
+    cssProperties: ['box-shadow']
+  },
+  opacity: {
+    usage: 'Controls the transparency of an element (e.g. opacity.disabled, opacity.loading). Used for communication of loading and disabled states',
+    cssProperties: ['opacity']
+  },
+  utility: {
+    usage: 'Code-specific tokens to aid with migration or enable features such as automatic elevation detection',
+    cssProperties: []
+  },
+  space: {
+    usage: 'Spacing tokens define the distance, alignment, and layout positioning (e.g. space.100, space.200, space.050). Use for margin, padding, gap, and layout positioning such as top, left, etc',
+    cssProperties: ['padding', 'margin', 'gap', 'top', 'left', 'right', 'bottom', 'inset']
+  },
+  'font.heading': {
+    usage: 'A composite token that applies complete font-related properties for headings (e.g. font.heading.xlarge). Includes font size, weight, line height, and family',
+    cssProperties: ['font']
+  },
+  'font.body': {
+    usage: 'A composite token that applies all font properties for standard body text (e.g. font.body)',
+    cssProperties: ['font']
+  },
+  'font.metric': {
+    usage: 'Font settings for displaying numbers or metrics, ensuring legibility and alignment (e.g. font.metric)',
+    cssProperties: ['font']
+  },
+  'font.code': {
+    usage: 'Font settings for inline code and code blocks, enforcing monospace font and sizing (e.g. font.code)',
+    cssProperties: ['font', 'font-family', 'font-size', 'font-weight', 'line-height']
+  },
+  'font.weight': {
+    usage: 'Granular control of font weight (e.g. font.weight.regular, font.weight.semibold). Use only to override the default font tokens for custom typography components beyond what’s supported by Text, MetricText and Heading',
+    cssProperties: ['font-weight']
+  },
+  'font.family': {
+    usage: 'Granular control of font family (e.g. font.family.body). Use only when overriding the default in composites',
+    cssProperties: ['font-family']
+  },
+  'font.lineHeight': {
+    usage: 'Granular control of font line height (e.g. font.lineHeight.100). Use only when overriding the default in composites',
+    cssProperties: ['line-height']
+  },
+  radius: {
+    usage: 'Controls the rounding of element corners, often for containers (e.g. radius.medium, radius.circle)',
+    cssProperties: ['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius']
+  },
+  'border.width': {
+    usage: 'Controls the thickness of borders/dividers (e.g. border.width, border.width.selected). Use to standardize border widths throughout UI',
+    cssProperties: ['border-width']
+  }
+};
+
+/**
+ * Types of tokens. Using path.subpath notation.
+ */

package/dist/types/artifacts/palettes-raw/motion-palette.d.ts

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

package/dist/types/artifacts/replacement-mapping.d.ts

@@ -12,7 +12,7 @@
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::71a61fb83f1440f2c7e0c2b84375593c>>
+ * @codegen <<SignedSource::e46353a7329c8e87640e1586a2ec2ce7>>
  * @codegenCommand yarn build tokens
  */
 import type tokens from './token-names';

package/dist/types/artifacts/themes/atlassian-motion.d.ts

@@ -1,7 +1,7 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d9cba7f2a25f65f78c6ad172ff6364ce>>
+ * @codegen <<SignedSource::335cdc677cad1d4b1fd602ac8f261e85>>
  * @codegenCommand yarn build tokens
  */
-declare const _default: "\n@keyframes ScaleIn80 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn85 {\n  0% {\n    transform: scale(0.85);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn90 {\n  0% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn95 {\n  0% {\n    transform: scale(0.95);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleOut80 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.8);\n  }\n}\n@keyframes ScaleOut85 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.85);\n  }\n}\n@keyframes ScaleOut90 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.9);\n  }\n}\n@keyframes ScaleOut95 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.95);\n  }\n}\n@keyframes FadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes FadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes RotateIn {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(5deg);\n  }\n}\n@keyframes RotateOut {\n  0% {\n    transform: rotate(5deg);\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n}\nhtml[data-theme~=\"motion:motion\"], [data-subtree-theme][data-theme~=\"motion:motion\"] {\n  --ds-content-enter-long: 400ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;\n  --ds-content-enter-medium: 200ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;\n  --ds-content-enter-short: 100ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;\n  --ds-content-exit-long: 200ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;\n  --ds-content-exit-medium: 100ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;\n  --ds-content-exit-short: 50ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;\n  --ds-dialog-enter: 350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleIn80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;\n  --ds-dialog-exit: 350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleOut80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;\n}\n";
+declare const _default: "\n@keyframes SlideInTop {\n  0% {\n    transform: translateY(8px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n@keyframes SlideInBottom {\n  0% {\n    transform: translateY(-8px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n@keyframes SlideInLeft {\n  0% {\n    transform: translateX(8px);\n  }\n  100% {\n    transform: translateX(0px);\n  }\n}\n@keyframes SlideInRight {\n  0% {\n    transform: translateX(-8px);\n  }\n  100% {\n    transform: translateX(0px);\n  }\n}\n@keyframes SlideOutTop {\n  0% {\n    transform: translateY(0px);\n  }\n  100% {\n    transform: translateY(4px);\n  }\n}\n@keyframes SlideOutBottom {\n  0% {\n    transform: translateY(0px);\n  }\n  100% {\n    transform: translateY(-4px);\n  }\n}\n@keyframes SlideOutLeft {\n  0% {\n    transform: translateX(0px);\n  }\n  100% {\n    transform: translateX(4px);\n  }\n}\n@keyframes SlideOutRight {\n  0% {\n    transform: translateX(0px);\n  }\n  100% {\n    transform: translateX(-4px);\n  }\n}\n@keyframes ScaleIn80 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn85 {\n  0% {\n    transform: scale(0.85);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn90 {\n  0% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn95 {\n  0% {\n    transform: scale(0.95);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleOut80 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.8);\n  }\n}\n@keyframes ScaleOut85 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.85);\n  }\n}\n@keyframes ScaleOut90 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.9);\n  }\n}\n@keyframes ScaleOut95 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.95);\n  }\n}\n@keyframes FadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes FadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes SlideIn15PercentLeft {\n  0% {\n    transform: translateX(-15%);\n    transform-origin: left;\n  }\n  100% {\n    transform: translateX(0px);\n    transform-origin: left;\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}\n@keyframes SlideOut50PercentLeft {\n  0% {\n    transform: translateX(0px);\n    transform-origin: left;\n  }\n  100% {\n    transform: translateX(-50%);\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.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn;\n  --ds-avatar-exit: 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut;\n  --ds-avatar-hovered: transform 100ms cubic-bezier(0.32, 0, 0.67, 0);\n  --ds-content-enter-long: 400ms cubic-bezier(0.4, 0, 0, 1) FadeIn;\n  --ds-content-enter-medium: 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn;\n  --ds-content-enter-short: 100ms cubic-bezier(0.4, 0, 0, 1) FadeIn;\n  --ds-content-exit-long: 200ms cubic-bezier(0.4, 0, 0, 1) FadeOut;\n  --ds-content-exit-medium: 100ms cubic-bezier(0.4, 0, 0, 1) FadeOut;\n  --ds-content-exit-short: 50ms cubic-bezier(0.4, 0, 0, 1) FadeOut;\n  --ds-flag-enter: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn;\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) FadeOut;\n  --ds-flag-reposition: transform 300ms cubic-bezier(0.4, 0, 0, 1);\n  --ds-modal-enter: 200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn;\n  --ds-modal-exit: 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut;\n  --ds-popup-enter-bottom: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;\n  --ds-popup-enter-left: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;\n  --ds-popup-enter-right: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;\n  --ds-popup-enter-top: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;\n  --ds-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;\n  --ds-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;\n  --ds-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;\n  --ds-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;\n  --ds-spotlight-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn;\n  --ds-spotlight-exit: 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut;\n}\n";
 export default _default;

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

@@ -7,18 +7,34 @@
  * 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::a18a0cf6bb63fbd882dcfe06ef046047>>
+ * @codegen <<SignedSource::c8dea3807fda6392faffb7299b6ecb9a>>
  * @codegenCommand yarn build tokens
  */
 declare const defaultTokenValues: {
-    readonly 'motion.content.enter.long': "400ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn";
-    readonly 'motion.content.enter.medium': "200ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn";
-    readonly 'motion.content.enter.short': "100ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn";
-    readonly 'motion.content.exit.long': "200ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut";
-    readonly 'motion.content.exit.medium': "100ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut";
-    readonly 'motion.content.exit.short': "50ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut";
-    readonly 'motion.dialog.enter': "350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleIn80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn";
-    readonly 'motion.dialog.exit': "350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleOut80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut";
+    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 'color.text': "#292A2E";
     readonly 'color.text.accent.lime': "#4C6B1F";
     readonly 'color.text.accent.lime.bolder': "#37471F";

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

@@ -1,17 +1,33 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f76d5451a0ccdab4ce74bc3e952aec8c>>
+ * @codegen <<SignedSource::921c184d9a6e3b52bd2ab053939ce9ad>>
  * @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.dialog.enter': "--ds-dialog-enter";
-    readonly 'motion.dialog.exit': "--ds-dialog-exit";
+    readonly 'motion.flag.enter': "--ds-flag-enter";
+    readonly 'motion.flag.exit': "--ds-flag-exit";
+    readonly 'motion.flag.reposition': "--ds-flag-reposition";
+    readonly 'motion.modal.enter': "--ds-modal-enter";
+    readonly 'motion.modal.exit': "--ds-modal-exit";
+    readonly 'motion.popup.enter.bottom': "--ds-popup-enter-bottom";
+    readonly 'motion.popup.enter.left': "--ds-popup-enter-left";
+    readonly 'motion.popup.enter.right': "--ds-popup-enter-right";
+    readonly 'motion.popup.enter.top': "--ds-popup-enter-top";
+    readonly 'motion.popup.exit.bottom': "--ds-popup-exit-bottom";
+    readonly 'motion.popup.exit.left': "--ds-popup-exit-left";
+    readonly 'motion.popup.exit.right': "--ds-popup-exit-right";
+    readonly 'motion.popup.exit.top': "--ds-popup-exit-top";
+    readonly 'motion.spotlight.enter': "--ds-spotlight-enter";
+    readonly 'motion.spotlight.exit': "--ds-spotlight-exit";
     readonly 'color.text': "--ds-text";
     readonly 'color.text.accent.lime': "--ds-text-accent-lime";
     readonly 'color.text.accent.lime.bolder': "--ds-text-accent-lime-bolder";
@@ -482,14 +498,30 @@ declare const tokens: {
     readonly 'border.width.focused': "--ds-border-width-focused";
 };
 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.dialog.enter': 'var(--ds-dialog-enter)';
-    'motion.dialog.exit': 'var(--ds-dialog-exit)';
+    'motion.flag.enter': 'var(--ds-flag-enter)';
+    'motion.flag.exit': 'var(--ds-flag-exit)';
+    'motion.flag.reposition': 'var(--ds-flag-reposition)';
+    'motion.modal.enter': 'var(--ds-modal-enter)';
+    'motion.modal.exit': 'var(--ds-modal-exit)';
+    'motion.popup.enter.bottom': 'var(--ds-popup-enter-bottom)';
+    'motion.popup.enter.left': 'var(--ds-popup-enter-left)';
+    'motion.popup.enter.right': 'var(--ds-popup-enter-right)';
+    'motion.popup.enter.top': 'var(--ds-popup-enter-top)';
+    'motion.popup.exit.bottom': 'var(--ds-popup-exit-bottom)';
+    'motion.popup.exit.left': 'var(--ds-popup-exit-left)';
+    'motion.popup.exit.right': 'var(--ds-popup-exit-right)';
+    'motion.popup.exit.top': 'var(--ds-popup-exit-top)';
+    'motion.spotlight.enter': 'var(--ds-spotlight-enter)';
+    'motion.spotlight.exit': 'var(--ds-spotlight-exit)';
     'color.text': 'var(--ds-text)';
     'color.text.accent.lime': 'var(--ds-text-accent-lime)';
     'color.text.accent.lime.bolder': 'var(--ds-text-accent-lime-bolder)';

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

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

package/dist/types/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::a329b54d1bff55f1079838f935d27b43>>
+ * @codegen <<SignedSource::08c6f944d8c913dff7bdf4becc44b834>>
  * @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,7 @@ 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-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-dialog-enter)' | 'var(--ds-dialog-exit)';
+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 interface CSSPropertiesHovered {
     backgroundColor: BackgroundColorHovered;
 }

package/dist/types/entry-points/token-metadata.codegen.d.ts

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
+ * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::6c61f13b08f7f4a5c5fb8d55f8ef5c14>>
+ * @codegen <<SignedSource::c219f53298a002dc5340fcc003a56953>>
  * @codegenCommand yarn build tokens
  */
 export interface Token {
@@ -11,5 +11,9 @@ export interface Token {
     path: string[];
     description: string;
     exampleValue?: string | number;
+    usageGuidelines: {
+        usage: string;
+        cssProperties: string[];
+    };
 }
 export declare const tokens: Token[];

package/dist/types/types.d.ts

@@ -132,10 +132,11 @@ export interface ShapeScaleTokenSchema<RadiusScaleValues extends string, SizeSca
     };
     radius: Record<RadiusScaleValues, ShapeSchemaValue>;
 }
-export interface MotionScaleTokenSchema<DurationScaleValues extends string, BezierCurveScaleValues extends string, KeyframeScaleValues extends string> {
+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'>>;
 }
 export interface FontSizeScaleTokenSchema<ScaleValues extends string> {
     fontSize: Record<ScaleValues, BaseToken<string | number, 'fontSize'>>;
@@ -1127,7 +1128,35 @@ export interface FontFamilyTokenSchema<BaseToken> {
  */
 export interface MotionTokenSchema<BaseToken> {
     motion: {
-        dialog: {
+        avatar: {
+            enter: MotionToken<BaseToken>;
+            exit: MotionToken<BaseToken>;
+            hovered: MotionToken<BaseToken>;
+        };
+        flag: {
+            enter: MotionToken<BaseToken>;
+            exit: MotionToken<BaseToken>;
+            reposition: MotionToken<BaseToken>;
+        };
+        modal: {
+            enter: MotionToken<BaseToken>;
+            exit: MotionToken<BaseToken>;
+        };
+        popup: {
+            enter: {
+                top: MotionToken<BaseToken>;
+                bottom: MotionToken<BaseToken>;
+                left: MotionToken<BaseToken>;
+                right: MotionToken<BaseToken>;
+            };
+            exit: {
+                top: MotionToken<BaseToken>;
+                bottom: MotionToken<BaseToken>;
+                left: MotionToken<BaseToken>;
+                right: MotionToken<BaseToken>;
+            };
+        };
+        spotlight: {
             enter: MotionToken<BaseToken>;
             exit: MotionToken<BaseToken>;
         };

package/dist/types/utils/token-usage-guidelines.d.ts

@@ -0,0 +1,8 @@
+export declare const getTokenUsageGuidelines: (tokenId: string) => {
+    usage: string;
+    cssProperties: string[];
+};
+/**
+ * Types of tokens. Using path.subpath notation.
+ */
+export type TokenCategory = 'color.text' | 'color.link' | 'color.icon' | 'color.border' | 'color.background' | 'color.blanket' | 'color.interaction' | 'color.skeleton' | 'color.chart' | 'elevation.surface' | 'elevation.shadow' | 'opacity' | 'utility' | 'space' | 'font.heading' | 'font.body' | 'font.metric' | 'font.code' | 'font.weight' | 'font.family' | 'font.lineHeight' | 'radius' | 'border.width';

package/dist/types-ts4.5/artifacts/palettes-raw/motion-palette.d.ts

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

package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts

@@ -12,7 +12,7 @@
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::71a61fb83f1440f2c7e0c2b84375593c>>
+ * @codegen <<SignedSource::e46353a7329c8e87640e1586a2ec2ce7>>
  * @codegenCommand yarn build tokens
  */
 import type tokens from './token-names';

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

@@ -1,7 +1,7 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d9cba7f2a25f65f78c6ad172ff6364ce>>
+ * @codegen <<SignedSource::335cdc677cad1d4b1fd602ac8f261e85>>
  * @codegenCommand yarn build tokens
  */
-declare const _default: "\n@keyframes ScaleIn80 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn85 {\n  0% {\n    transform: scale(0.85);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn90 {\n  0% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn95 {\n  0% {\n    transform: scale(0.95);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleOut80 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.8);\n  }\n}\n@keyframes ScaleOut85 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.85);\n  }\n}\n@keyframes ScaleOut90 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.9);\n  }\n}\n@keyframes ScaleOut95 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.95);\n  }\n}\n@keyframes FadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes FadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes RotateIn {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(5deg);\n  }\n}\n@keyframes RotateOut {\n  0% {\n    transform: rotate(5deg);\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n}\nhtml[data-theme~=\"motion:motion\"], [data-subtree-theme][data-theme~=\"motion:motion\"] {\n  --ds-content-enter-long: 400ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;\n  --ds-content-enter-medium: 200ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;\n  --ds-content-enter-short: 100ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;\n  --ds-content-exit-long: 200ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;\n  --ds-content-exit-medium: 100ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;\n  --ds-content-exit-short: 50ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;\n  --ds-dialog-enter: 350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleIn80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;\n  --ds-dialog-exit: 350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleOut80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;\n}\n";
+declare const _default: "\n@keyframes SlideInTop {\n  0% {\n    transform: translateY(8px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n@keyframes SlideInBottom {\n  0% {\n    transform: translateY(-8px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n@keyframes SlideInLeft {\n  0% {\n    transform: translateX(8px);\n  }\n  100% {\n    transform: translateX(0px);\n  }\n}\n@keyframes SlideInRight {\n  0% {\n    transform: translateX(-8px);\n  }\n  100% {\n    transform: translateX(0px);\n  }\n}\n@keyframes SlideOutTop {\n  0% {\n    transform: translateY(0px);\n  }\n  100% {\n    transform: translateY(4px);\n  }\n}\n@keyframes SlideOutBottom {\n  0% {\n    transform: translateY(0px);\n  }\n  100% {\n    transform: translateY(-4px);\n  }\n}\n@keyframes SlideOutLeft {\n  0% {\n    transform: translateX(0px);\n  }\n  100% {\n    transform: translateX(4px);\n  }\n}\n@keyframes SlideOutRight {\n  0% {\n    transform: translateX(0px);\n  }\n  100% {\n    transform: translateX(-4px);\n  }\n}\n@keyframes ScaleIn80 {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn85 {\n  0% {\n    transform: scale(0.85);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn90 {\n  0% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleIn95 {\n  0% {\n    transform: scale(0.95);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes ScaleOut80 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.8);\n  }\n}\n@keyframes ScaleOut85 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.85);\n  }\n}\n@keyframes ScaleOut90 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.9);\n  }\n}\n@keyframes ScaleOut95 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.95);\n  }\n}\n@keyframes FadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes FadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes SlideIn15PercentLeft {\n  0% {\n    transform: translateX(-15%);\n    transform-origin: left;\n  }\n  100% {\n    transform: translateX(0px);\n    transform-origin: left;\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}\n@keyframes SlideOut50PercentLeft {\n  0% {\n    transform: translateX(0px);\n    transform-origin: left;\n  }\n  100% {\n    transform: translateX(-50%);\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.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn;\n  --ds-avatar-exit: 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut;\n  --ds-avatar-hovered: transform 100ms cubic-bezier(0.32, 0, 0.67, 0);\n  --ds-content-enter-long: 400ms cubic-bezier(0.4, 0, 0, 1) FadeIn;\n  --ds-content-enter-medium: 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn;\n  --ds-content-enter-short: 100ms cubic-bezier(0.4, 0, 0, 1) FadeIn;\n  --ds-content-exit-long: 200ms cubic-bezier(0.4, 0, 0, 1) FadeOut;\n  --ds-content-exit-medium: 100ms cubic-bezier(0.4, 0, 0, 1) FadeOut;\n  --ds-content-exit-short: 50ms cubic-bezier(0.4, 0, 0, 1) FadeOut;\n  --ds-flag-enter: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn;\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) FadeOut;\n  --ds-flag-reposition: transform 300ms cubic-bezier(0.4, 0, 0, 1);\n  --ds-modal-enter: 200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn;\n  --ds-modal-exit: 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut;\n  --ds-popup-enter-bottom: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;\n  --ds-popup-enter-left: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;\n  --ds-popup-enter-right: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;\n  --ds-popup-enter-top: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;\n  --ds-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;\n  --ds-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;\n  --ds-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;\n  --ds-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;\n  --ds-spotlight-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn;\n  --ds-spotlight-exit: 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut;\n}\n";
 export default _default;

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

@@ -7,18 +7,34 @@
  * 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::a18a0cf6bb63fbd882dcfe06ef046047>>
+ * @codegen <<SignedSource::c8dea3807fda6392faffb7299b6ecb9a>>
  * @codegenCommand yarn build tokens
  */
 declare const defaultTokenValues: {
-    readonly 'motion.content.enter.long': "400ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn";
-    readonly 'motion.content.enter.medium': "200ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn";
-    readonly 'motion.content.enter.short': "100ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn";
-    readonly 'motion.content.exit.long': "200ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut";
-    readonly 'motion.content.exit.medium': "100ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut";
-    readonly 'motion.content.exit.short': "50ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut";
-    readonly 'motion.dialog.enter': "350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleIn80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn";
-    readonly 'motion.dialog.exit': "350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleOut80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut";
+    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 '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,17 +1,33 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f76d5451a0ccdab4ce74bc3e952aec8c>>
+ * @codegen <<SignedSource::921c184d9a6e3b52bd2ab053939ce9ad>>
  * @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.dialog.enter': "--ds-dialog-enter";
-    readonly 'motion.dialog.exit': "--ds-dialog-exit";
+    readonly 'motion.flag.enter': "--ds-flag-enter";
+    readonly 'motion.flag.exit': "--ds-flag-exit";
+    readonly 'motion.flag.reposition': "--ds-flag-reposition";
+    readonly 'motion.modal.enter': "--ds-modal-enter";
+    readonly 'motion.modal.exit': "--ds-modal-exit";
+    readonly 'motion.popup.enter.bottom': "--ds-popup-enter-bottom";
+    readonly 'motion.popup.enter.left': "--ds-popup-enter-left";
+    readonly 'motion.popup.enter.right': "--ds-popup-enter-right";
+    readonly 'motion.popup.enter.top': "--ds-popup-enter-top";
+    readonly 'motion.popup.exit.bottom': "--ds-popup-exit-bottom";
+    readonly 'motion.popup.exit.left': "--ds-popup-exit-left";
+    readonly 'motion.popup.exit.right': "--ds-popup-exit-right";
+    readonly 'motion.popup.exit.top': "--ds-popup-exit-top";
+    readonly 'motion.spotlight.enter': "--ds-spotlight-enter";
+    readonly 'motion.spotlight.exit': "--ds-spotlight-exit";
     readonly 'color.text': "--ds-text";
     readonly 'color.text.accent.lime': "--ds-text-accent-lime";
     readonly 'color.text.accent.lime.bolder': "--ds-text-accent-lime-bolder";
@@ -482,14 +498,30 @@ declare const tokens: {
     readonly 'border.width.focused': "--ds-border-width-focused";
 };
 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.dialog.enter': 'var(--ds-dialog-enter)';
-    'motion.dialog.exit': 'var(--ds-dialog-exit)';
+    'motion.flag.enter': 'var(--ds-flag-enter)';
+    'motion.flag.exit': 'var(--ds-flag-exit)';
+    'motion.flag.reposition': 'var(--ds-flag-reposition)';
+    'motion.modal.enter': 'var(--ds-modal-enter)';
+    'motion.modal.exit': 'var(--ds-modal-exit)';
+    'motion.popup.enter.bottom': 'var(--ds-popup-enter-bottom)';
+    'motion.popup.enter.left': 'var(--ds-popup-enter-left)';
+    'motion.popup.enter.right': 'var(--ds-popup-enter-right)';
+    'motion.popup.enter.top': 'var(--ds-popup-enter-top)';
+    'motion.popup.exit.bottom': 'var(--ds-popup-exit-bottom)';
+    'motion.popup.exit.left': 'var(--ds-popup-exit-left)';
+    'motion.popup.exit.right': 'var(--ds-popup-exit-right)';
+    'motion.popup.exit.top': 'var(--ds-popup-exit-top)';
+    'motion.spotlight.enter': 'var(--ds-spotlight-enter)';
+    'motion.spotlight.exit': 'var(--ds-spotlight-exit)';
     'color.text': 'var(--ds-text)';
     'color.text.accent.lime': 'var(--ds-text-accent-lime)';
     'color.text.accent.lime.bolder': 'var(--ds-text-accent-lime-bolder)';