@atlaskit/tokens 11.0.2 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/tokens
 
+## 11.1.0
+
+### Minor Changes
+
+- [`07b8035be9593`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/07b8035be9593) -
+  Added an experimental set of motion design tokens.
+
 ## 11.0.2
 
 ### Patch Changes

package/dist/cjs/artifacts/palettes-raw/motion-palette.js

@@ -0,0 +1,527 @@
+"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::863c43667e050d7cdb209823990418e0>>
+ * @codegenCommand yarn build tokens
+ */
+
+var tokens = [{
+  "value": "cubic-bezier(0.32, 0, 0.67, 0)",
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "cubic-bezier(0.32, 0, 0.67, 0)",
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.curve.CubicEaseIn",
+  "path": ["motion", "curve", "CubicEaseIn"]
+}, {
+  "value": "cubic-bezier(0.66, 0, 0.34, 1)",
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "cubic-bezier(0.66, 0, 0.34, 1)",
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.curve.CubicEaseInOut",
+  "path": ["motion", "curve", "CubicEaseInOut"]
+}, {
+  "value": "cubic-bezier(0.33, 1, 0.68, 1)",
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": "cubic-bezier(0.33, 1, 0.68, 1)",
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.curve.CubicEaseOut",
+  "path": ["motion", "curve", "CubicEaseOut"]
+}, {
+  "value": 50,
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 50,
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.duration.Duration050",
+  "path": ["motion", "duration", "Duration050"]
+}, {
+  "value": 100,
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 100,
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.duration.Duration100",
+  "path": ["motion", "duration", "Duration100"]
+}, {
+  "value": 150,
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 150,
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.duration.Duration150",
+  "path": ["motion", "duration", "Duration150"]
+}, {
+  "value": 200,
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 200,
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.duration.Duration200",
+  "path": ["motion", "duration", "Duration200"]
+}, {
+  "value": 250,
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 250,
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.duration.Duration250",
+  "path": ["motion", "duration", "Duration250"]
+}, {
+  "value": 300,
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 300,
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.duration.Duration300",
+  "path": ["motion", "duration", "Duration300"]
+}, {
+  "value": 350,
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 350,
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.duration.Duration350",
+  "path": ["motion", "duration", "Duration350"]
+}, {
+  "value": 400,
+  "attributes": {
+    "group": "motion"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": 400,
+    "attributes": {
+      "group": "motion"
+    }
+  },
+  "name": "motion.duration.Duration400",
+  "path": ["motion", "duration", "Duration400"]
+}, {
+  "value": {
+    "0%": {
+      "opacity": 0
+    },
+    "100%": {
+      "opacity": 1
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "opacity": 0
+      },
+      "100%": {
+        "opacity": 1
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.FadeIn",
+  "path": ["motion", "keyframe", "FadeIn"]
+}, {
+  "value": {
+    "0%": {
+      "opacity": 1
+    },
+    "100%": {
+      "opacity": 0
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "opacity": 1
+      },
+      "100%": {
+        "opacity": 0
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.FadeOut",
+  "path": ["motion", "keyframe", "FadeOut"]
+}, {
+  "value": {
+    "0%": {
+      "transform": "rotate(0deg)"
+    },
+    "100%": {
+      "transform": "rotate(5deg)"
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "transform": "rotate(0deg)"
+      },
+      "100%": {
+        "transform": "rotate(5deg)"
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.RotateIn",
+  "path": ["motion", "keyframe", "RotateIn"]
+}, {
+  "value": {
+    "0%": {
+      "transform": "rotate(5deg)"
+    },
+    "100%": {
+      "transform": "rotate(0deg)"
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "transform": "rotate(5deg)"
+      },
+      "100%": {
+        "transform": "rotate(0deg)"
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.RotateOut",
+  "path": ["motion", "keyframe", "RotateOut"]
+}, {
+  "value": {
+    "0%": {
+      "transform": "scale(0.8)"
+    },
+    "100%": {
+      "transform": "scale(1)"
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "transform": "scale(0.8)"
+      },
+      "100%": {
+        "transform": "scale(1)"
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.ScaleIn80",
+  "path": ["motion", "keyframe", "ScaleIn80"]
+}, {
+  "value": {
+    "0%": {
+      "transform": "scale(0.85)"
+    },
+    "100%": {
+      "transform": "scale(1)"
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "transform": "scale(0.85)"
+      },
+      "100%": {
+        "transform": "scale(1)"
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.ScaleIn85",
+  "path": ["motion", "keyframe", "ScaleIn85"]
+}, {
+  "value": {
+    "0%": {
+      "transform": "scale(0.9)"
+    },
+    "100%": {
+      "transform": "scale(1)"
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "transform": "scale(0.9)"
+      },
+      "100%": {
+        "transform": "scale(1)"
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.ScaleIn90",
+  "path": ["motion", "keyframe", "ScaleIn90"]
+}, {
+  "value": {
+    "0%": {
+      "transform": "scale(0.95)"
+    },
+    "100%": {
+      "transform": "scale(1)"
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "transform": "scale(0.95)"
+      },
+      "100%": {
+        "transform": "scale(1)"
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.ScaleIn95",
+  "path": ["motion", "keyframe", "ScaleIn95"]
+}, {
+  "value": {
+    "0%": {
+      "transform": "scale(1)"
+    },
+    "100%": {
+      "transform": "scale(0.8)"
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "transform": "scale(1)"
+      },
+      "100%": {
+        "transform": "scale(0.8)"
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.ScaleOut80",
+  "path": ["motion", "keyframe", "ScaleOut80"]
+}, {
+  "value": {
+    "0%": {
+      "transform": "scale(1)"
+    },
+    "100%": {
+      "transform": "scale(0.85)"
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "transform": "scale(1)"
+      },
+      "100%": {
+        "transform": "scale(0.85)"
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.ScaleOut85",
+  "path": ["motion", "keyframe", "ScaleOut85"]
+}, {
+  "value": {
+    "0%": {
+      "transform": "scale(1)"
+    },
+    "100%": {
+      "transform": "scale(0.9)"
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "transform": "scale(1)"
+      },
+      "100%": {
+        "transform": "scale(0.9)"
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.ScaleOut90",
+  "path": ["motion", "keyframe", "ScaleOut90"]
+}, {
+  "value": {
+    "0%": {
+      "transform": "scale(1)"
+    },
+    "100%": {
+      "transform": "scale(0.95)"
+    }
+  },
+  "attributes": {
+    "group": "keyframe"
+  },
+  "filePath": "schema/palettes/motion-palette.tsx",
+  "isSource": true,
+  "original": {
+    "value": {
+      "0%": {
+        "transform": "scale(1)"
+      },
+      "100%": {
+        "transform": "scale(0.95)"
+      }
+    },
+    "attributes": {
+      "group": "keyframe"
+    }
+  },
+  "name": "motion.keyframe.ScaleOut95",
+  "path": ["motion", "keyframe", "ScaleOut95"]
+}];
+var _default = exports.default = tokens;

package/dist/cjs/artifacts/replacement-mapping.js

@@ -18,11 +18,35 @@ exports.default = void 0;
  * 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
  */
 
 var replacementMapper = [{
+  "path": "motion.content.enter.long",
+  "state": "experimental"
+}, {
+  "path": "motion.content.enter.medium",
+  "state": "experimental"
+}, {
+  "path": "motion.content.enter.short",
+  "state": "experimental"
+}, {
+  "path": "motion.content.exit.long",
+  "state": "experimental"
+}, {
+  "path": "motion.content.exit.medium",
+  "state": "experimental"
+}, {
+  "path": "motion.content.exit.short",
+  "state": "experimental"
+}, {
+  "path": "motion.dialog.enter",
+  "state": "experimental"
+}, {
+  "path": "motion.dialog.exit",
+  "state": "experimental"
+}, {
   "path": "font.body.UNSAFE_small",
   "state": "deprecated",
   "replacement": "font.body.small"

package/dist/cjs/artifacts/theme-import-map.js

@@ -15,7 +15,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * 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
  */
 
@@ -73,6 +73,12 @@ var themeImportsMap = {
       return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-shape" */
       './themes/atlassian-shape'));
     });
+  },
+  'motion': function motion() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-motion" */
+      './themes/atlassian-motion'));
+    });
   }
 };
 var _default = exports.default = themeImportsMap;

package/dist/cjs/artifacts/themes/atlassian-motion.js

@@ -0,0 +1,12 @@
+"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::d9cba7f2a25f65f78c6ad172ff6364ce>>
+ * @codegenCommand yarn build tokens
+ */
+var _default = exports.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";

package/dist/cjs/artifacts/token-default-values.js

@@ -13,10 +13,18 @@ exports.default = void 0;
  * 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
  */
 var defaultTokenValues = {
+  'motion.content.enter.long': '400ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn',
+  'motion.content.enter.medium': '200ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn',
+  'motion.content.enter.short': '100ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn',
+  'motion.content.exit.long': '200ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut',
+  'motion.content.exit.medium': '100ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut',
+  'motion.content.exit.short': '50ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut',
+  'motion.dialog.enter': '350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleIn80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn',
+  'motion.dialog.exit': '350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleOut80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut',
   'color.text': '#292A2E',
   'color.text.accent.lime': '#4C6B1F',
   'color.text.accent.lime.bolder': '#37471F',

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

@@ -6,10 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::71ab6af4453c6807be4d4249ca7614bc>>
+ * @codegen <<SignedSource::f76d5451a0ccdab4ce74bc3e952aec8c>>
  * @codegenCommand yarn build tokens
  */
 var 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',