@atlaskit/tokens 11.0.2 → 11.1.0

package/dist/esm/artifacts/tokens-raw/atlassian-motion.js

@@ -0,0 +1,248 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::2a5ddbfd4356a65a3955ab62d7341a46>>
+ * @codegenCommand yarn build tokens
+ */
+
+var tokens = [{
+  "attributes": {
+    "group": "motion",
+    "state": "experimental",
+    "introduced": "11.1.0",
+    "description": ""
+  },
+  "value": {
+    "duration": 400,
+    "curve": "cubic-bezier(0.66, 0, 0.34, 1)",
+    "keyframes": ["FadeIn"]
+  },
+  "filePath": "schema/themes/atlassian-motion/motion.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "motion",
+      "state": "experimental",
+      "introduced": "11.1.0",
+      "description": ""
+    },
+    "value": {
+      "duration": "Duration400",
+      "curve": "CubicEaseInOut",
+      "keyframes": ["FadeIn"]
+    }
+  },
+  "name": "motion.content.enter.long",
+  "path": ["motion", "content", "enter", "long"],
+  "cleanName": "motion.content.enter.long"
+}, {
+  "attributes": {
+    "group": "motion",
+    "state": "experimental",
+    "introduced": "11.1.0",
+    "description": ""
+  },
+  "value": {
+    "duration": 200,
+    "curve": "cubic-bezier(0.66, 0, 0.34, 1)",
+    "keyframes": ["FadeIn"]
+  },
+  "filePath": "schema/themes/atlassian-motion/motion.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "motion",
+      "state": "experimental",
+      "introduced": "11.1.0",
+      "description": ""
+    },
+    "value": {
+      "duration": "Duration200",
+      "curve": "CubicEaseInOut",
+      "keyframes": ["FadeIn"]
+    }
+  },
+  "name": "motion.content.enter.medium",
+  "path": ["motion", "content", "enter", "medium"],
+  "cleanName": "motion.content.enter.medium"
+}, {
+  "attributes": {
+    "group": "motion",
+    "state": "experimental",
+    "introduced": "11.1.0",
+    "description": ""
+  },
+  "value": {
+    "duration": 100,
+    "curve": "cubic-bezier(0.66, 0, 0.34, 1)",
+    "keyframes": ["FadeIn"]
+  },
+  "filePath": "schema/themes/atlassian-motion/motion.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "motion",
+      "state": "experimental",
+      "introduced": "11.1.0",
+      "description": ""
+    },
+    "value": {
+      "duration": "Duration100",
+      "curve": "CubicEaseInOut",
+      "keyframes": ["FadeIn"]
+    }
+  },
+  "name": "motion.content.enter.short",
+  "path": ["motion", "content", "enter", "short"],
+  "cleanName": "motion.content.enter.short"
+}, {
+  "attributes": {
+    "group": "motion",
+    "state": "experimental",
+    "introduced": "11.1.0",
+    "description": ""
+  },
+  "value": {
+    "duration": 200,
+    "curve": "cubic-bezier(0.66, 0, 0.34, 1)",
+    "keyframes": ["FadeOut"]
+  },
+  "filePath": "schema/themes/atlassian-motion/motion.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "motion",
+      "state": "experimental",
+      "introduced": "11.1.0",
+      "description": ""
+    },
+    "value": {
+      "duration": "Duration200",
+      "curve": "CubicEaseInOut",
+      "keyframes": ["FadeOut"]
+    }
+  },
+  "name": "motion.content.exit.long",
+  "path": ["motion", "content", "exit", "long"],
+  "cleanName": "motion.content.exit.long"
+}, {
+  "attributes": {
+    "group": "motion",
+    "state": "experimental",
+    "introduced": "11.1.0",
+    "description": ""
+  },
+  "value": {
+    "duration": 100,
+    "curve": "cubic-bezier(0.66, 0, 0.34, 1)",
+    "keyframes": ["FadeOut"]
+  },
+  "filePath": "schema/themes/atlassian-motion/motion.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "motion",
+      "state": "experimental",
+      "introduced": "11.1.0",
+      "description": ""
+    },
+    "value": {
+      "duration": "Duration100",
+      "curve": "CubicEaseInOut",
+      "keyframes": ["FadeOut"]
+    }
+  },
+  "name": "motion.content.exit.medium",
+  "path": ["motion", "content", "exit", "medium"],
+  "cleanName": "motion.content.exit.medium"
+}, {
+  "attributes": {
+    "group": "motion",
+    "state": "experimental",
+    "introduced": "11.1.0",
+    "description": ""
+  },
+  "value": {
+    "duration": 50,
+    "curve": "cubic-bezier(0.66, 0, 0.34, 1)",
+    "keyframes": ["FadeOut"]
+  },
+  "filePath": "schema/themes/atlassian-motion/motion.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "motion",
+      "state": "experimental",
+      "introduced": "11.1.0",
+      "description": ""
+    },
+    "value": {
+      "duration": "Duration050",
+      "curve": "CubicEaseInOut",
+      "keyframes": ["FadeOut"]
+    }
+  },
+  "name": "motion.content.exit.short",
+  "path": ["motion", "content", "exit", "short"],
+  "cleanName": "motion.content.exit.short"
+}, {
+  "attributes": {
+    "group": "motion",
+    "state": "experimental",
+    "introduced": "11.1.0",
+    "description": ""
+  },
+  "value": {
+    "duration": 350,
+    "curve": "cubic-bezier(0.66, 0, 0.34, 1)",
+    "keyframes": ["ScaleIn80", "FadeIn"]
+  },
+  "filePath": "schema/themes/atlassian-motion/motion.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "motion",
+      "state": "experimental",
+      "introduced": "11.1.0",
+      "description": ""
+    },
+    "value": {
+      "duration": "Duration350",
+      "curve": "CubicEaseInOut",
+      "keyframes": ["ScaleIn80", "FadeIn"]
+    }
+  },
+  "name": "motion.dialog.enter",
+  "path": ["motion", "dialog", "enter"],
+  "cleanName": "motion.dialog.enter"
+}, {
+  "attributes": {
+    "group": "motion",
+    "state": "experimental",
+    "introduced": "11.1.0",
+    "description": ""
+  },
+  "value": {
+    "duration": 350,
+    "curve": "cubic-bezier(0.66, 0, 0.34, 1)",
+    "keyframes": ["ScaleOut80", "FadeOut"]
+  },
+  "filePath": "schema/themes/atlassian-motion/motion.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "motion",
+      "state": "experimental",
+      "introduced": "11.1.0",
+      "description": ""
+    },
+    "value": {
+      "duration": "Duration350",
+      "curve": "CubicEaseInOut",
+      "keyframes": ["ScaleOut80", "FadeOut"]
+    }
+  },
+  "name": "motion.dialog.exit",
+  "path": ["motion", "dialog", "exit"],
+  "cleanName": "motion.dialog.exit"
+}];
+export default tokens;

package/dist/esm/enable-global-theme.js

@@ -10,6 +10,7 @@ import { getThemePreferences } from './utils/get-theme-preferences';
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.motion The motion theme to be applied.
  * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
@@ -33,6 +34,8 @@ var enableGlobalTheme = function enableGlobalTheme() {
     dark = _ref$dark === void 0 ? themeStateDefaults['dark'] : _ref$dark,
     _ref$light = _ref.light,
     light = _ref$light === void 0 ? themeStateDefaults['light'] : _ref$light,
+    _ref$motion = _ref.motion,
+    motion = _ref$motion === void 0 ? themeStateDefaults['motion']() : _ref$motion,
     _ref$shape = _ref.shape,
     shape = _ref$shape === void 0 ? themeStateDefaults['shape']() : _ref$shape,
     _ref$spacing = _ref.spacing,
@@ -47,6 +50,7 @@ var enableGlobalTheme = function enableGlobalTheme() {
     contrastMode: contrastMode,
     dark: dark,
     light: light,
+    motion: motion,
     shape: shape,
     spacing: spacing,
     typography: typography,

package/dist/esm/get-theme-html-attrs.js

@@ -18,6 +18,7 @@ var defaultContrastMode = 'no-preference';
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.motion The motion theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
  * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
@@ -34,6 +35,8 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     light = _ref$light === void 0 ? themeStateDefaults['light'] : _ref$light,
     _ref$contrastMode = _ref.contrastMode,
     contrastMode = _ref$contrastMode === void 0 ? themeStateDefaults['contrastMode'] : _ref$contrastMode,
+    _ref$motion = _ref.motion,
+    motion = _ref$motion === void 0 ? themeStateDefaults['motion']() : _ref$motion,
     _ref$shape = _ref.shape,
     shape = _ref$shape === void 0 ? themeStateDefaults['shape']() : _ref$shape,
     _ref$spacing = _ref.spacing,
@@ -45,6 +48,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
   var themeAttribute = themeObjectToString({
     dark: dark,
     light: light,
+    motion: motion,
     shape: shape,
     spacing: spacing,
     typography: typography

package/dist/esm/get-theme-styles.js

@@ -14,6 +14,7 @@ import { loadThemeCss } from './utils/theme-loading';
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.motion The motion theme to be applied.
  * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
@@ -44,6 +45,7 @@ var getThemeStyles = /*#__PURE__*/function () {
               contrastMode: (preferences === null || preferences === void 0 ? void 0 : preferences.contrastMode) || themeStateDefaults['contrastMode'],
               dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || themeStateDefaults['dark'],
               light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
+              motion: (preferences === null || preferences === void 0 ? void 0 : preferences.motion) || themeStateDefaults['motion'](),
               shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'](),
               spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
               typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']

package/dist/esm/set-global-theme.js

@@ -23,6 +23,7 @@ import { loadAndAppendThemeCss } from './utils/theme-loading';
  * @param {string} themeState.contrastMode The contrast mode theme to be applied. If set to `auto`, the theme applied will be determined by the OS setting.set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.motion The motion theme to be applied.
  * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
@@ -55,6 +56,8 @@ var setGlobalTheme = /*#__PURE__*/function () {
       spacing,
       _ref2$typography,
       typography,
+      _ref2$motion,
+      motion,
       _ref2$UNSAFE_themeOpt,
       UNSAFE_themeOptions,
       themeState,
@@ -76,8 +79,9 @@ var setGlobalTheme = /*#__PURE__*/function () {
           themeLoader = _args3.length > 1 ? _args3[1] : undefined;
           _ref2 = typeof nextThemeState === 'function' ? nextThemeState(_objectSpread(_objectSpread({}, themeStateDefaults), {}, {
             typography: themeStateDefaults['typography'],
-            shape: themeStateDefaults['shape']()
-          }, getGlobalTheme())) : nextThemeState, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape']() : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt; // CLEANUP: Remove. This blocks application of increased contrast themes
+            shape: themeStateDefaults['shape'](),
+            motion: themeStateDefaults['motion']()
+          }, getGlobalTheme())) : nextThemeState, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape']() : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography, _ref2$motion = _ref2.motion, motion = _ref2$motion === void 0 ? themeStateDefaults['motion']() : _ref2$motion, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt; // CLEANUP: Remove. This blocks application of increased contrast themes
           // without the feature flag enabled.
           if (!fg('platform_increased-contrast-themes')) {
             if (light === 'light-increased-contrast') {
@@ -95,6 +99,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
             shape: shape,
             spacing: spacing,
             typography: typography,
+            motion: motion,
             UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
           }; // Determine what to load and loading strategy
           themePreferences = getThemePreferences(themeState);

package/dist/esm/theme-config.js

@@ -40,7 +40,7 @@ var themeContrastModes = ['more', 'no-preference', 'auto'];
  *
  * These ids must be kebab case
  */
-export var themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'spacing', 'shape', 'typography'];
+export var themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'spacing', 'shape', 'typography', 'motion'];
 /**
  * Theme override ids: the equivalent of themeIds for theme overrides.
  * Theme overrides are temporary and there may not be any defined at times.
@@ -149,6 +149,14 @@ var themeConfig = {
     attributes: {
       type: 'shape'
     }
+  },
+  'atlassian-motion': {
+    id: 'motion',
+    displayName: 'Motion',
+    palette: 'motionPalette',
+    attributes: {
+      type: 'motion'
+    }
   }
 };
 
@@ -181,6 +189,12 @@ export var themeStateDefaults = {
   },
   spacing: 'spacing',
   typography: 'typography',
+  motion: function motion() {
+    if (fg('platform-dst-motion-theme-default')) {
+      return 'motion';
+    }
+    return undefined;
+  },
   UNSAFE_themeOptions: undefined
 };
 

package/dist/esm/theme-state-transformer.js

@@ -1,7 +1,7 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { themeIds } from './theme-config';
-var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
+var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape', 'motion'];
 var customThemeOptions = 'UNSAFE_themeOptions';
 var isThemeKind = function isThemeKind(themeKind) {
   return themeKinds.find(function (kind) {

package/dist/esm/utils/get-theme-preferences.js

@@ -8,7 +8,8 @@ export var getThemePreferences = function getThemePreferences(themeState) {
     light = themeState.light,
     shape = themeState.shape,
     spacing = themeState.spacing,
-    typography = themeState.typography;
+    typography = themeState.typography,
+    motion = themeState.motion;
   var autoColorModeThemes = [light, dark];
   var themePreferences = [];
   if (colorMode === 'auto') {
@@ -30,7 +31,7 @@ export var getThemePreferences = function getThemePreferences(themeState) {
       }
     }
   }
-  [shape, spacing, typography].forEach(function (themeId) {
+  [shape, spacing, typography, motion].forEach(function (themeId) {
     if (themeId) {
       themePreferences.push(themeId);
     }

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

@@ -0,0 +1,34 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::863c43667e050d7cdb209823990418e0>>
+ * @codegenCommand yarn build tokens
+ */
+type TokenValue = string | number | {
+    duration: number;
+    curve: string;
+    keyframes: string[];
+    delay?: number;
+} | Record<string, any>;
+type TokenValueOriginal = string | number | {
+    duration: string;
+    curve: string;
+    keyframes: string[];
+    delay?: string;
+} | Record<string, any>;
+type TokenAttributes = {
+    group: string;
+};
+type Token = {
+    value: TokenValue;
+    filePath: string;
+    isSource: boolean;
+    attributes: TokenAttributes;
+    original: {
+        value: TokenValueOriginal;
+        attributes: TokenAttributes;
+    };
+    name: string;
+    path: string[];
+};
+declare const tokens: Token[];
+export default tokens;

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::400f0ecf8657b2dcb96d24d2f0aed049>>
+ * @codegen <<SignedSource::71a61fb83f1440f2c7e0c2b84375593c>>
  * @codegenCommand yarn build tokens
  */
 import type tokens from './token-names';

package/dist/types/artifacts/theme-import-map.d.ts

@@ -6,7 +6,7 @@
  * This allows users to compose their themes and only use the tokens that are requested.
  * When a new theme is created, the import should automatically be added to the map
  *
- * @codegen <<SignedSource::c1144182e959da59d17686bccb9fac30>>
+ * @codegen <<SignedSource::a20c72d683b08b594c5be4160eec5f78>>
  * @codegenCommand yarn build tokens
  */
 import { type ThemeIds, type ThemeOverrideIds } from '../theme-config';

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

@@ -0,0 +1,7 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::d9cba7f2a25f65f78c6ad172ff6364ce>>
+ * @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";
+export default _default;

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

@@ -7,10 +7,18 @@
  * 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::e6225c65d5d4ce72381110479f6b4968>>
+ * @codegen <<SignedSource::a18a0cf6bb63fbd882dcfe06ef046047>>
  * @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 '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,9 +1,17 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::71ab6af4453c6807be4d4249ca7614bc>>
+ * @codegen <<SignedSource::f76d5451a0ccdab4ce74bc3e952aec8c>>
  * @codegenCommand yarn build tokens
  */
 declare const tokens: {
+    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 'color.text': "--ds-text";
     readonly 'color.text.accent.lime': "--ds-text-accent-lime";
     readonly 'color.text.accent.lime.bolder': "--ds-text-accent-lime-bolder";
@@ -474,6 +482,14 @@ declare const tokens: {
     readonly 'border.width.focused': "--ds-border-width-focused";
 };
 export type CSSTokenMap = {
+    '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)';
     '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

@@ -0,0 +1,41 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::2a5ddbfd4356a65a3955ab62d7341a46>>
+ * @codegenCommand yarn build tokens
+ */
+type TokenValue = {
+    duration: number;
+    curve: string;
+    keyframes: string[];
+    delay?: number;
+};
+type TokenValueOriginal = {
+    duration: string;
+    curve: string;
+    keyframes: string[];
+    delay?: string;
+};
+type TokenAttributes = {
+    group: string;
+    state: string;
+    introduced: string;
+    description: string;
+    suggest?: string[];
+    deprecated?: string;
+    replacement?: string;
+};
+type Token = {
+    value: TokenValue;
+    filePath: string;
+    isSource: boolean;
+    attributes: TokenAttributes;
+    original: {
+        value: TokenValueOriginal;
+        attributes: TokenAttributes;
+    };
+    name: string;
+    path: string[];
+    cleanName: string;
+};
+declare const tokens: Token[];
+export default tokens;

package/dist/types/enable-global-theme.d.ts

@@ -8,6 +8,7 @@ import { type ThemeIdsWithOverrides, type ThemeState } from './theme-config';
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.motion The motion theme to be applied.
  * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
@@ -21,5 +22,5 @@ import { type ThemeIdsWithOverrides, type ThemeState } from './theme-config';
  * enableGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
  * ```
  */
-declare const enableGlobalTheme: ({ colorMode, contrastMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: (id: ThemeIdsWithOverrides) => void) => UnbindFn;
+declare const enableGlobalTheme: ({ colorMode, contrastMode, dark, light, motion, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: (id: ThemeIdsWithOverrides) => void) => UnbindFn;
 export default enableGlobalTheme;

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::1a2d573fb8c14220f04597b1b0376420>>
+ * @codegen <<SignedSource::a329b54d1bff55f1079838f935d27b43>>
  * @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,6 +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 interface CSSPropertiesHovered {
     backgroundColor: BackgroundColorHovered;
 }

package/dist/types/get-theme-html-attrs.d.ts

@@ -7,11 +7,12 @@ import { type ThemeState } from './theme-config';
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.motion The motion theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
  * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
  *
  * @returns {Object} Object of HTML attributes to be applied to the document root
  */
-declare const getThemeHtmlAttrs: ({ colorMode, dark, light, contrastMode, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
+declare const getThemeHtmlAttrs: ({ colorMode, dark, light, contrastMode, motion, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
 export default getThemeHtmlAttrs;

package/dist/types/get-theme-styles.d.ts

@@ -12,6 +12,7 @@ export interface ThemeStyles {
  * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
  * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.motion The motion theme to be applied.
  * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.