@atlaskit/tokens 11.0.2 → 11.1.0

package/dist/types/index.d.ts

@@ -14,5 +14,5 @@ export { default as themeImportMap } from './artifacts/theme-import-map';
 export type { CSSToken } from './artifacts/token-names';
 export type { ActiveTokens } from './artifacts/types';
 export type { ThemeColorModes, ThemeContrastModes, Themes, ThemeFileNames, ThemeIds, ThemeOptionsSchema, ThemeState, ActiveThemeState, } from './theme-config';
-export type { FontFamilyToken, FontWeightToken, Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, TypographyToken, } from './types';
+export type { FontFamilyToken, FontWeightToken, Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, TypographyToken, MotionToken, } from './types';
 export { COLOR_MODE_ATTRIBUTE, CURRENT_SURFACE_CSS_VAR, SUBTREE_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE, } from './constants';

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

@@ -8,6 +8,7 @@ import { type ThemeIdsWithOverrides, type ThemeState } from './theme-config';
  * @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.

package/dist/types/theme-config.d.ts

@@ -6,7 +6,7 @@
  * These ids are what the actual theme files/folders are called.
  * style-dictionary will attempt to locate these in the file-system.
  */
-export type Themes = 'atlassian-light' | 'atlassian-light-future' | 'atlassian-light-increased-contrast' | 'atlassian-dark' | 'atlassian-dark-future' | 'atlassian-dark-increased-contrast' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography';
+export type Themes = 'atlassian-light' | 'atlassian-light-future' | 'atlassian-light-increased-contrast' | 'atlassian-dark' | 'atlassian-dark-future' | 'atlassian-dark-increased-contrast' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography' | 'atlassian-motion';
 export type ThemeFileNames = Themes;
 /**
  * ThemeOverrides: The internal identifier of a theme override. Which are themes that contain
@@ -20,7 +20,7 @@ export type ThemeOverrides = Themes;
  * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
  * In the future other types may be introduced such as typography.
  */
-type ThemeKinds = 'color' | 'spacing' | 'typography' | 'shape';
+type ThemeKinds = 'color' | 'spacing' | 'typography' | 'shape' | 'motion';
 /**
  * Theme modes: The general purpose of a theme.
  * This attr is used to apply the appropriate system-preference option
@@ -42,7 +42,7 @@ export type DataContrastModes = 'more' | 'no-preference' | 'auto';
  *
  * These ids must be kebab case
  */
-export declare const themeIds: readonly ["light-increased-contrast", "light", "light-future", "dark", "dark-future", "dark-increased-contrast", "spacing", "shape", "typography"];
+export declare const themeIds: readonly ["light-increased-contrast", "light", "light-future", "dark", "dark-future", "dark-increased-contrast", "spacing", "shape", "typography", "motion"];
 export type ThemeIds = (typeof themeIds)[number];
 /**
  * Theme override ids: the equivalent of themeIds for theme overrides.
@@ -59,7 +59,8 @@ export declare const themeIdsWithOverrides: readonly [
     'dark-increased-contrast',
     'spacing',
     'shape',
-    'typography'
+    'typography',
+    'motion'
 ];
 export type ThemeIdsWithOverrides = (typeof themeIdsWithOverrides)[number];
 /**
@@ -73,7 +74,7 @@ type ExtensionThemeId = ThemeIds;
  * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
  * previous color set.
  */
-export type Palettes = 'defaultPalette' | 'spacingScale' | 'shapePalette' | 'typographyPalette';
+export type Palettes = 'defaultPalette' | 'spacingScale' | 'shapePalette' | 'typographyPalette' | 'motionPalette';
 /**
  * ThemeConfig: the source of truth for all theme meta-data.
  * This object should be used whenever interfacing with themes.
@@ -86,7 +87,7 @@ interface ThemeConfig {
         type: 'color';
         mode: DataColorModes;
     } | {
-        type: Extract<ThemeKinds, 'spacing' | 'typography' | 'shape'>;
+        type: Extract<ThemeKinds, 'spacing' | 'typography' | 'shape' | 'motion'>;
     }) & {
         /**
          * @deprecated Use top-level `extends` property instead
@@ -132,14 +133,16 @@ export interface ThemeState {
     shape?: Extract<ThemeIds, 'shape'>;
     spacing: Extract<ThemeIds, 'spacing'>;
     typography: Extract<ThemeIds, 'typography'>;
+    motion?: Extract<ThemeIds, 'motion'>;
     UNSAFE_themeOptions?: ThemeOptionsSchema;
 }
 /**
  * Can't evaluate typography feature flags at the module level,
  * it will always resolve to false when server side rendered or when flags are loaded async.
  */
-interface ThemeStateDefaults extends Omit<ThemeState, 'shape'> {
+interface ThemeStateDefaults extends Omit<ThemeState, 'shape' | 'motion'> {
     shape: () => ThemeState['shape'];
+    motion: () => ThemeState['motion'];
 }
 /**
  * themeStateDefaults: the default values for ThemeState used by theming utilities

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import type { InternalTokenIds } from './artifacts/types-internal';
-export type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'shape' | 'typography' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing';
+export type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'shape' | 'typography' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing' | 'motion' | 'keyframe';
 type ActiveTokenState = 'active';
 type DeprecatedTokenState = 'deprecated';
 type DeletedTokenState = 'deleted';
@@ -107,6 +107,7 @@ export type SpacingToken<BaseToken> = DesignToken<BaseToken, 'spacing'>;
 export type ShapeToken<BaseToken> = DesignToken<BaseToken, 'shape'>;
 export type FontWeightToken<BaseToken> = DesignToken<BaseToken, 'fontWeight'>;
 export type FontFamilyToken<BaseToken> = DesignToken<BaseToken, 'fontFamily'>;
+export type MotionToken<BaseToken> = DesignToken<BaseToken, 'motion'>;
 export type DeprecatedTypographyToken<BaseToken> = DesignToken<BaseToken, 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing'>;
 export type RawToken = DesignToken<string, 'raw'>;
 export interface PaletteColorTokenSchema<PaletteValues extends string> {
@@ -131,6 +132,11 @@ export interface ShapeScaleTokenSchema<RadiusScaleValues extends string, SizeSca
     };
     radius: Record<RadiusScaleValues, ShapeSchemaValue>;
 }
+export interface MotionScaleTokenSchema<DurationScaleValues extends string, BezierCurveScaleValues extends string, KeyframeScaleValues extends string> {
+    duration: Record<DurationScaleValues, BaseToken<number, 'motion'>>;
+    curve: Record<BezierCurveScaleValues, BaseToken<string, 'motion'>>;
+    keyframe: Record<KeyframeScaleValues, BaseToken<Record<string, object>, 'keyframe'>>;
+}
 export interface FontSizeScaleTokenSchema<ScaleValues extends string> {
     fontSize: Record<ScaleValues, BaseToken<string | number, 'fontSize'>>;
 }
@@ -1116,4 +1122,27 @@ export interface FontFamilyTokenSchema<BaseToken> {
         };
     };
 }
+/**
+ * The semantic interface for motion tokens
+ */
+export interface MotionTokenSchema<BaseToken> {
+    motion: {
+        dialog: {
+            enter: MotionToken<BaseToken>;
+            exit: MotionToken<BaseToken>;
+        };
+        content: {
+            enter: {
+                short: MotionToken<BaseToken>;
+                medium: MotionToken<BaseToken>;
+                long: MotionToken<BaseToken>;
+            };
+            exit: {
+                short: MotionToken<BaseToken>;
+                medium: MotionToken<BaseToken>;
+                long: MotionToken<BaseToken>;
+            };
+        };
+    };
+}
 export {};

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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.

package/dist/types-ts4.5/index.d.ts

@@ -14,5 +14,5 @@ export { default as themeImportMap } from './artifacts/theme-import-map';
 export type { CSSToken } from './artifacts/token-names';
 export type { ActiveTokens } from './artifacts/types';
 export type { ThemeColorModes, ThemeContrastModes, Themes, ThemeFileNames, ThemeIds, ThemeOptionsSchema, ThemeState, ActiveThemeState, } from './theme-config';
-export type { FontFamilyToken, FontWeightToken, Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, TypographyToken, } from './types';
+export type { FontFamilyToken, FontWeightToken, Groups, OpacityToken, PaintToken, RawToken, ShadowToken, SpacingToken, ShapeToken, TypographyToken, MotionToken, } from './types';
 export { COLOR_MODE_ATTRIBUTE, CURRENT_SURFACE_CSS_VAR, SUBTREE_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE, } from './constants';

package/dist/types-ts4.5/set-global-theme.d.ts

@@ -8,6 +8,7 @@ import { type ThemeIdsWithOverrides, type ThemeState } from './theme-config';
  * @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.

package/dist/types-ts4.5/theme-config.d.ts

@@ -6,7 +6,7 @@
  * These ids are what the actual theme files/folders are called.
  * style-dictionary will attempt to locate these in the file-system.
  */
-export type Themes = 'atlassian-light' | 'atlassian-light-future' | 'atlassian-light-increased-contrast' | 'atlassian-dark' | 'atlassian-dark-future' | 'atlassian-dark-increased-contrast' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography';
+export type Themes = 'atlassian-light' | 'atlassian-light-future' | 'atlassian-light-increased-contrast' | 'atlassian-dark' | 'atlassian-dark-future' | 'atlassian-dark-increased-contrast' | 'atlassian-shape' | 'atlassian-spacing' | 'atlassian-typography' | 'atlassian-motion';
 export type ThemeFileNames = Themes;
 /**
  * ThemeOverrides: The internal identifier of a theme override. Which are themes that contain
@@ -20,7 +20,7 @@ export type ThemeOverrides = Themes;
  * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
  * In the future other types may be introduced such as typography.
  */
-type ThemeKinds = 'color' | 'spacing' | 'typography' | 'shape';
+type ThemeKinds = 'color' | 'spacing' | 'typography' | 'shape' | 'motion';
 /**
  * Theme modes: The general purpose of a theme.
  * This attr is used to apply the appropriate system-preference option
@@ -59,7 +59,8 @@ export declare const themeIds: readonly [
     "dark-increased-contrast",
     "spacing",
     "shape",
-    "typography"
+    "typography",
+    "motion"
 ];
 export type ThemeIds = (typeof themeIds)[number];
 /**
@@ -78,7 +79,8 @@ export declare const themeIdsWithOverrides: readonly [
     'dark-increased-contrast',
     'spacing',
     'shape',
-    'typography'
+    'typography',
+    'motion'
 ];
 export type ThemeIdsWithOverrides = (typeof themeIdsWithOverrides)[number];
 /**
@@ -92,7 +94,7 @@ type ExtensionThemeId = ThemeIds;
  * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
  * previous color set.
  */
-export type Palettes = 'defaultPalette' | 'spacingScale' | 'shapePalette' | 'typographyPalette';
+export type Palettes = 'defaultPalette' | 'spacingScale' | 'shapePalette' | 'typographyPalette' | 'motionPalette';
 /**
  * ThemeConfig: the source of truth for all theme meta-data.
  * This object should be used whenever interfacing with themes.
@@ -105,7 +107,7 @@ interface ThemeConfig {
         type: 'color';
         mode: DataColorModes;
     } | {
-        type: Extract<ThemeKinds, 'spacing' | 'typography' | 'shape'>;
+        type: Extract<ThemeKinds, 'spacing' | 'typography' | 'shape' | 'motion'>;
     }) & {
         /**
          * @deprecated Use top-level `extends` property instead
@@ -151,14 +153,16 @@ export interface ThemeState {
     shape?: Extract<ThemeIds, 'shape'>;
     spacing: Extract<ThemeIds, 'spacing'>;
     typography: Extract<ThemeIds, 'typography'>;
+    motion?: Extract<ThemeIds, 'motion'>;
     UNSAFE_themeOptions?: ThemeOptionsSchema;
 }
 /**
  * Can't evaluate typography feature flags at the module level,
  * it will always resolve to false when server side rendered or when flags are loaded async.
  */
-interface ThemeStateDefaults extends Omit<ThemeState, 'shape'> {
+interface ThemeStateDefaults extends Omit<ThemeState, 'shape' | 'motion'> {
     shape: () => ThemeState['shape'];
+    motion: () => ThemeState['motion'];
 }
 /**
  * themeStateDefaults: the default values for ThemeState used by theming utilities

package/dist/types-ts4.5/types.d.ts

@@ -1,5 +1,5 @@
 import type { InternalTokenIds } from './artifacts/types-internal';
-export type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'shape' | 'typography' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing';
+export type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'shape' | 'typography' | 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing' | 'motion' | 'keyframe';
 type ActiveTokenState = 'active';
 type DeprecatedTokenState = 'deprecated';
 type DeletedTokenState = 'deleted';
@@ -107,6 +107,7 @@ export type SpacingToken<BaseToken> = DesignToken<BaseToken, 'spacing'>;
 export type ShapeToken<BaseToken> = DesignToken<BaseToken, 'shape'>;
 export type FontWeightToken<BaseToken> = DesignToken<BaseToken, 'fontWeight'>;
 export type FontFamilyToken<BaseToken> = DesignToken<BaseToken, 'fontFamily'>;
+export type MotionToken<BaseToken> = DesignToken<BaseToken, 'motion'>;
 export type DeprecatedTypographyToken<BaseToken> = DesignToken<BaseToken, 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing'>;
 export type RawToken = DesignToken<string, 'raw'>;
 export interface PaletteColorTokenSchema<PaletteValues extends string> {
@@ -131,6 +132,11 @@ export interface ShapeScaleTokenSchema<RadiusScaleValues extends string, SizeSca
     };
     radius: Record<RadiusScaleValues, ShapeSchemaValue>;
 }
+export interface MotionScaleTokenSchema<DurationScaleValues extends string, BezierCurveScaleValues extends string, KeyframeScaleValues extends string> {
+    duration: Record<DurationScaleValues, BaseToken<number, 'motion'>>;
+    curve: Record<BezierCurveScaleValues, BaseToken<string, 'motion'>>;
+    keyframe: Record<KeyframeScaleValues, BaseToken<Record<string, object>, 'keyframe'>>;
+}
 export interface FontSizeScaleTokenSchema<ScaleValues extends string> {
     fontSize: Record<ScaleValues, BaseToken<string | number, 'fontSize'>>;
 }
@@ -1116,4 +1122,27 @@ export interface FontFamilyTokenSchema<BaseToken> {
         };
     };
 }
+/**
+ * The semantic interface for motion tokens
+ */
+export interface MotionTokenSchema<BaseToken> {
+    motion: {
+        dialog: {
+            enter: MotionToken<BaseToken>;
+            exit: MotionToken<BaseToken>;
+        };
+        content: {
+            enter: {
+                short: MotionToken<BaseToken>;
+                medium: MotionToken<BaseToken>;
+                long: MotionToken<BaseToken>;
+            };
+            exit: {
+                short: MotionToken<BaseToken>;
+                medium: MotionToken<BaseToken>;
+                long: MotionToken<BaseToken>;
+            };
+        };
+    };
+}
 export {};

package/figma/atlassian-motion.json

@@ -0,0 +1,5 @@
+{
+  "name": "Motion",
+  "tokens": {},
+  "renameMap": {}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "11.0.2",
+	"version": "11.1.0",
 	"description": "Design tokens are the single source of truth to name and store design decisions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,15 +44,15 @@
 		"@af/formatting": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/avatar": "^25.8.0",
-		"@atlaskit/button": "^23.9.0",
+		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/calendar": "^17.2.0",
 		"@atlaskit/checkbox": "^17.3.0",
 		"@atlaskit/code": "^17.4.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/docs": "^11.5.0",
+		"@atlaskit/docs": "^11.6.0",
 		"@atlaskit/dropdown-menu": "^16.5.0",
 		"@atlaskit/dynamic-table": "^18.3.0",
-		"@atlaskit/form": "^15.3.0",
+		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/grid": "^0.18.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/icon": "^32.0.0",
@@ -67,13 +67,13 @@
 		"@atlaskit/tag": "^14.5.0",
 		"@atlaskit/textarea": "^8.2.0",
 		"@atlaskit/textfield": "^8.2.0",
-		"@atlaskit/theme": "^21.0.0",
+		"@atlaskit/theme": "^22.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlassian/codegen": "^0.1.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ts-loader": "^0.1.0",
 		"@babel/core": "7.24.9",
-		"@compiled/react": "^0.18.6",
+		"@compiled/react": "^0.20.0",
 		"@hypermod/utils": "^0.4.2",
 		"@testing-library/react": "^16.3.0",
 		"color-blend": "^4.0.0",
@@ -127,6 +127,9 @@
 		},
 		"platform_dst_subtree_theming": {
 			"type": "boolean"
+		},
+		"platform-dst-motion-theme-default": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/tokens"