@atlaskit/tokens 11.1.1 → 11.2.0

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

@@ -18,11 +18,20 @@ 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::71a61fb83f1440f2c7e0c2b84375593c>>
+ * @codegen <<SignedSource::e46353a7329c8e87640e1586a2ec2ce7>>
  * @codegenCommand yarn build tokens
  */
 
 var replacementMapper = [{
+  "path": "motion.avatar.enter",
+  "state": "experimental"
+}, {
+  "path": "motion.avatar.exit",
+  "state": "experimental"
+}, {
+  "path": "motion.avatar.hovered",
+  "state": "experimental"
+}, {
   "path": "motion.content.enter.long",
   "state": "experimental"
 }, {
@@ -41,10 +50,49 @@ var replacementMapper = [{
   "path": "motion.content.exit.short",
   "state": "experimental"
 }, {
-  "path": "motion.dialog.enter",
+  "path": "motion.flag.enter",
+  "state": "experimental"
+}, {
+  "path": "motion.flag.exit",
+  "state": "experimental"
+}, {
+  "path": "motion.flag.reposition",
+  "state": "experimental"
+}, {
+  "path": "motion.modal.enter",
+  "state": "experimental"
+}, {
+  "path": "motion.modal.exit",
+  "state": "experimental"
+}, {
+  "path": "motion.popup.enter.bottom",
+  "state": "experimental"
+}, {
+  "path": "motion.popup.enter.left",
+  "state": "experimental"
+}, {
+  "path": "motion.popup.enter.right",
+  "state": "experimental"
+}, {
+  "path": "motion.popup.enter.top",
+  "state": "experimental"
+}, {
+  "path": "motion.popup.exit.bottom",
+  "state": "experimental"
+}, {
+  "path": "motion.popup.exit.left",
+  "state": "experimental"
+}, {
+  "path": "motion.popup.exit.right",
+  "state": "experimental"
+}, {
+  "path": "motion.popup.exit.top",
+  "state": "experimental"
+}, {
+  "path": "motion.spotlight.enter",
   "state": "experimental"
 }, {
-  "path": "motion.dialog.exit",
+  "path": "motion.spotlight.exit",
   "state": "experimental"
 }, {
   "path": "font.body.UNSAFE_small",

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d9cba7f2a25f65f78c6ad172ff6364ce>>
+ * @codegen <<SignedSource::335cdc677cad1d4b1fd602ac8f261e85>>
  * @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";
+var _default = exports.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";

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

@@ -13,18 +13,34 @@ 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::a18a0cf6bb63fbd882dcfe06ef046047>>
+ * @codegen <<SignedSource::c8dea3807fda6392faffb7299b6ecb9a>>
  * @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',
+  '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',
+  'motion.avatar.exit': '100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut',
+  'motion.avatar.hovered': 'transform 100ms cubic-bezier(0.32, 0, 0.67, 0)',
+  'motion.content.enter.long': '400ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
+  'motion.content.enter.medium': '200ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
+  'motion.content.enter.short': '100ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
+  'motion.content.exit.long': '200ms cubic-bezier(0.4, 0, 0, 1) FadeOut',
+  'motion.content.exit.medium': '100ms cubic-bezier(0.4, 0, 0, 1) FadeOut',
+  'motion.content.exit.short': '50ms cubic-bezier(0.4, 0, 0, 1) FadeOut',
+  'motion.flag.enter': '250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn',
+  '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',
+  'motion.flag.reposition': 'transform 300ms cubic-bezier(0.4, 0, 0, 1)',
+  'motion.modal.enter': '200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
+  'motion.modal.exit': '200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut',
+  'motion.popup.enter.bottom': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
+  'motion.popup.enter.left': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
+  'motion.popup.enter.right': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
+  'motion.popup.enter.top': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
+  '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',
+  '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',
+  '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',
+  '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',
+  'motion.spotlight.enter': '250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
+  'motion.spotlight.exit': '200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut',
   'color.text': '#292A2E',
   'color.text.accent.lime': '#4C6B1F',
   'color.text.accent.lime.bolder': '#37471F',

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

@@ -6,18 +6,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f76d5451a0ccdab4ce74bc3e952aec8c>>
+ * @codegen <<SignedSource::921c184d9a6e3b52bd2ab053939ce9ad>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
+  'motion.avatar.enter': '--ds-avatar-enter',
+  'motion.avatar.exit': '--ds-avatar-exit',
+  'motion.avatar.hovered': '--ds-avatar-hovered',
   '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',
+  'motion.flag.enter': '--ds-flag-enter',
+  'motion.flag.exit': '--ds-flag-exit',
+  'motion.flag.reposition': '--ds-flag-reposition',
+  'motion.modal.enter': '--ds-modal-enter',
+  'motion.modal.exit': '--ds-modal-exit',
+  'motion.popup.enter.bottom': '--ds-popup-enter-bottom',
+  'motion.popup.enter.left': '--ds-popup-enter-left',
+  'motion.popup.enter.right': '--ds-popup-enter-right',
+  'motion.popup.enter.top': '--ds-popup-enter-top',
+  'motion.popup.exit.bottom': '--ds-popup-exit-bottom',
+  'motion.popup.exit.left': '--ds-popup-exit-left',
+  'motion.popup.exit.right': '--ds-popup-exit-right',
+  'motion.popup.exit.top': '--ds-popup-exit-top',
+  'motion.spotlight.enter': '--ds-spotlight-enter',
+  'motion.spotlight.exit': '--ds-spotlight-exit',
   'color.text': '--ds-text',
   'color.text.accent.lime': '--ds-text-accent-lime',
   'color.text.accent.lime.bolder': '--ds-text-accent-lime-bolder',