@atlaskit/tokens 11.0.2 → 11.1.0

package/dist/es2019/artifacts/token-names.js

@@ -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
  */
 const tokens = {
+  'motion.content.enter.long': '--ds-content-enter-long',
+  'motion.content.enter.medium': '--ds-content-enter-medium',
+  'motion.content.enter.short': '--ds-content-enter-short',
+  'motion.content.exit.long': '--ds-content-exit-long',
+  'motion.content.exit.medium': '--ds-content-exit-medium',
+  'motion.content.exit.short': '--ds-content-exit-short',
+  'motion.dialog.enter': '--ds-dialog-enter',
+  'motion.dialog.exit': '--ds-dialog-exit',
   'color.text': '--ds-text',
   'color.text.accent.lime': '--ds-text-accent-lime',
   'color.text.accent.lime.bolder': '--ds-text-accent-lime-bolder',

package/dist/es2019/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
+ */
+
+const 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/es2019/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.
@@ -28,6 +29,7 @@ const enableGlobalTheme = ({
   contrastMode = themeStateDefaults['contrastMode'],
   dark = themeStateDefaults['dark'],
   light = themeStateDefaults['light'],
+  motion = themeStateDefaults['motion'](),
   shape = themeStateDefaults['shape'](),
   spacing = themeStateDefaults['spacing'],
   typography = themeStateDefaults['typography'],
@@ -38,6 +40,7 @@ const enableGlobalTheme = ({
     contrastMode,
     dark,
     light,
+    motion,
     shape,
     spacing,
     typography,

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

@@ -15,6 +15,7 @@ const 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
@@ -26,6 +27,7 @@ const getThemeHtmlAttrs = ({
   dark = themeStateDefaults['dark'],
   light = themeStateDefaults['light'],
   contrastMode = themeStateDefaults['contrastMode'],
+  motion = themeStateDefaults['motion'](),
   shape = themeStateDefaults['shape'](),
   spacing = themeStateDefaults['spacing'],
   typography = themeStateDefaults['typography'],
@@ -34,6 +36,7 @@ const getThemeHtmlAttrs = ({
   const themeAttribute = themeObjectToString({
     dark,
     light,
+    motion,
     shape,
     spacing,
     typography

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

@@ -11,6 +11,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.
@@ -35,6 +36,7 @@ const getThemeStyles = async preferences => {
       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/es2019/set-global-theme.js

@@ -15,6 +15,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.
@@ -37,11 +38,13 @@ const setGlobalTheme = async (nextThemeState = {}, themeLoader) => {
     shape = themeStateDefaults['shape'](),
     spacing = themeStateDefaults['spacing'],
     typography = themeStateDefaults['typography'],
+    motion = themeStateDefaults['motion'](),
     UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
   } = typeof nextThemeState === 'function' ? nextThemeState({
     ...themeStateDefaults,
     typography: themeStateDefaults['typography'],
     shape: themeStateDefaults['shape'](),
+    motion: themeStateDefaults['motion'](),
     ...getGlobalTheme()
   }) : nextThemeState;
 
@@ -63,6 +66,7 @@ const setGlobalTheme = async (nextThemeState = {}, themeLoader) => {
     shape,
     spacing,
     typography,
+    motion,
     UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
   };
 

package/dist/es2019/theme-config.js

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

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

@@ -1,5 +1,5 @@
 import { themeIds } from './theme-config';
-const themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
+const themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape', 'motion'];
 const customThemeOptions = 'UNSAFE_themeOptions';
 const isThemeKind = themeKind => {
   return themeKinds.find(kind => kind === themeKind) !== undefined;

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

@@ -8,7 +8,8 @@ export const getThemePreferences = themeState => {
     light,
     shape,
     spacing,
-    typography
+    typography,
+    motion
   } = themeState;
   const autoColorModeThemes = [light, dark];
   const themePreferences = [];
@@ -31,7 +32,7 @@ export const getThemePreferences = themeState => {
       }
     }
   }
-  [shape, spacing, typography].forEach(themeId => {
+  [shape, spacing, typography, motion].forEach(themeId => {
     if (themeId) {
       themePreferences.push(themeId);
     }