@atlaskit/tokens 11.0.2 → 11.1.0

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

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * 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"
+}];
+var _default = exports.default = tokens;

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

@@ -16,6 +16,7 @@ var _getThemePreferences = require("./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.
@@ -39,6 +40,8 @@ var enableGlobalTheme = function enableGlobalTheme() {
     dark = _ref$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref$dark,
     _ref$light = _ref.light,
     light = _ref$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref$light,
+    _ref$motion = _ref.motion,
+    motion = _ref$motion === void 0 ? _themeConfig.themeStateDefaults['motion']() : _ref$motion,
     _ref$shape = _ref.shape,
     shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape']() : _ref$shape,
     _ref$spacing = _ref.spacing,
@@ -53,6 +56,7 @@ var enableGlobalTheme = function enableGlobalTheme() {
     contrastMode: contrastMode,
     dark: dark,
     light: light,
+    motion: motion,
     shape: shape,
     spacing: spacing,
     typography: typography,

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

@@ -25,6 +25,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
@@ -41,6 +42,8 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     light = _ref$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref$light,
     _ref$contrastMode = _ref.contrastMode,
     contrastMode = _ref$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref$contrastMode,
+    _ref$motion = _ref.motion,
+    motion = _ref$motion === void 0 ? _themeConfig.themeStateDefaults['motion']() : _ref$motion,
     _ref$shape = _ref.shape,
     shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape']() : _ref$shape,
     _ref$spacing = _ref.spacing,
@@ -52,6 +55,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
   var themeAttribute = (0, _themeStateTransformer.themeObjectToString)({
     dark: dark,
     light: light,
+    motion: motion,
     shape: shape,
     spacing: spacing,
     typography: typography

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

@@ -23,6 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * @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.
@@ -53,6 +54,7 @@ var getThemeStyles = /*#__PURE__*/function () {
               contrastMode: (preferences === null || preferences === void 0 ? void 0 : preferences.contrastMode) || _themeConfig.themeStateDefaults['contrastMode'],
               dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || _themeConfig.themeStateDefaults['dark'],
               light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || _themeConfig.themeStateDefaults['light'],
+              motion: (preferences === null || preferences === void 0 ? void 0 : preferences.motion) || _themeConfig.themeStateDefaults['motion'](),
               shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || _themeConfig.themeStateDefaults['shape'](),
               spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || _themeConfig.themeStateDefaults['spacing'],
               typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || _themeConfig.themeStateDefaults['typography']

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

@@ -31,6 +31,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @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.
@@ -63,6 +64,8 @@ var setGlobalTheme = /*#__PURE__*/function () {
       spacing,
       _ref2$typography,
       typography,
+      _ref2$motion,
+      motion,
       _ref2$UNSAFE_themeOpt,
       UNSAFE_themeOptions,
       themeState,
@@ -84,8 +87,9 @@ var setGlobalTheme = /*#__PURE__*/function () {
           themeLoader = _args3.length > 1 ? _args3[1] : undefined;
           _ref2 = typeof nextThemeState === 'function' ? nextThemeState(_objectSpread(_objectSpread({}, _themeConfig.themeStateDefaults), {}, {
             typography: _themeConfig.themeStateDefaults['typography'],
-            shape: _themeConfig.themeStateDefaults['shape']()
-          }, (0, _getGlobalTheme.default)())) : nextThemeState, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? _themeConfig.themeStateDefaults['shape']() : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? _themeConfig.themeStateDefaults['typography'] : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt; // CLEANUP: Remove. This blocks application of increased contrast themes
+            shape: _themeConfig.themeStateDefaults['shape'](),
+            motion: _themeConfig.themeStateDefaults['motion']()
+          }, (0, _getGlobalTheme.default)())) : nextThemeState, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$contrastMode = _ref2.contrastMode, contrastMode = _ref2$contrastMode === void 0 ? _themeConfig.themeStateDefaults['contrastMode'] : _ref2$contrastMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? _themeConfig.themeStateDefaults['shape']() : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? _themeConfig.themeStateDefaults['typography'] : _ref2$typography, _ref2$motion = _ref2.motion, motion = _ref2$motion === void 0 ? _themeConfig.themeStateDefaults['motion']() : _ref2$motion, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt; // CLEANUP: Remove. This blocks application of increased contrast themes
           // without the feature flag enabled.
           if (!(0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
             if (light === 'light-increased-contrast') {
@@ -103,6 +107,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 = (0, _getThemePreferences.getThemePreferences)(themeState);

package/dist/cjs/theme-config.js

@@ -45,7 +45,7 @@ var themeContrastModes = ['more', 'no-preference', 'auto'];
  *
  * These ids must be kebab case
  */
-var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'spacing', 'shape', 'typography'];
+var themeIds = exports.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.
@@ -154,6 +154,14 @@ var themeConfig = {
     attributes: {
       type: 'shape'
     }
+  },
+  'atlassian-motion': {
+    id: 'motion',
+    displayName: 'Motion',
+    palette: 'motionPalette',
+    attributes: {
+      type: 'motion'
+    }
   }
 };
 
@@ -186,6 +194,12 @@ var themeStateDefaults = exports.themeStateDefaults = {
   },
   spacing: 'spacing',
   typography: 'typography',
+  motion: function motion() {
+    if ((0, _platformFeatureFlags.fg)('platform-dst-motion-theme-default')) {
+      return 'motion';
+    }
+    return undefined;
+  },
   UNSAFE_themeOptions: undefined
 };
 

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

@@ -8,7 +8,7 @@ exports.themeStringToObject = exports.themeObjectToString = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _themeConfig = require("./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/cjs/utils/get-theme-preferences.js

@@ -15,7 +15,8 @@ var getThemePreferences = exports.getThemePreferences = function getThemePrefere
     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') {
@@ -37,7 +38,7 @@ var getThemePreferences = exports.getThemePreferences = function getThemePrefere
       }
     }
   }
-  [shape, spacing, typography].forEach(function (themeId) {
+  [shape, spacing, typography, motion].forEach(function (themeId) {
     if (themeId) {
       themePreferences.push(themeId);
     }