@atlaskit/tokens 11.1.0 → 11.2.0

package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-motion.d.ts

@@ -1,18 +1,20 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2a5ddbfd4356a65a3955ab62d7341a46>>
+ * @codegen <<SignedSource::a05c62bc089a075de35d08a2570d9421>>
  * @codegenCommand yarn build tokens
  */
 type TokenValue = {
     duration: number;
     curve: string;
-    keyframes: string[];
+    keyframes?: string[];
+    properties?: string[];
     delay?: number;
 };
 type TokenValueOriginal = {
     duration: string;
     curve: string;
-    keyframes: string[];
+    keyframes?: string[];
+    properties?: string[];
     delay?: string;
 };
 type TokenAttributes = {

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::a329b54d1bff55f1079838f935d27b43>>
+ * @codegen <<SignedSource::08c6f944d8c913dff7bdf4becc44b834>>
  * @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,7 +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 type Motion = 'var(--ds-avatar-enter)' | 'var(--ds-avatar-exit)' | 'var(--ds-avatar-hovered)' | '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-flag-enter)' | 'var(--ds-flag-exit)' | 'var(--ds-flag-reposition)' | 'var(--ds-modal-enter)' | 'var(--ds-modal-exit)' | 'var(--ds-popup-enter-bottom)' | 'var(--ds-popup-enter-left)' | 'var(--ds-popup-enter-right)' | 'var(--ds-popup-enter-top)' | 'var(--ds-popup-exit-bottom)' | 'var(--ds-popup-exit-left)' | 'var(--ds-popup-exit-right)' | 'var(--ds-popup-exit-top)' | 'var(--ds-spotlight-enter)' | 'var(--ds-spotlight-exit)';
 export interface CSSPropertiesHovered {
     backgroundColor: BackgroundColorHovered;
 }

package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Metadata for generation of of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
+ * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::6c61f13b08f7f4a5c5fb8d55f8ef5c14>>
+ * @codegen <<SignedSource::c219f53298a002dc5340fcc003a56953>>
  * @codegenCommand yarn build tokens
  */
 export interface Token {
@@ -11,5 +11,9 @@ export interface Token {
     path: string[];
     description: string;
     exampleValue?: string | number;
+    usageGuidelines: {
+        usage: string;
+        cssProperties: string[];
+    };
 }
 export declare const tokens: Token[];

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

@@ -132,10 +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> {
+export interface MotionScaleTokenSchema<DurationScaleValues extends string, BezierCurveScaleValues extends string, KeyframeScaleValues extends string, TransitionPropertyScaleValues extends string> {
     duration: Record<DurationScaleValues, BaseToken<number, 'motion'>>;
     curve: Record<BezierCurveScaleValues, BaseToken<string, 'motion'>>;
     keyframe: Record<KeyframeScaleValues, BaseToken<Record<string, object>, 'keyframe'>>;
+    properties: Record<TransitionPropertyScaleValues, BaseToken<string, 'motion'>>;
 }
 export interface FontSizeScaleTokenSchema<ScaleValues extends string> {
     fontSize: Record<ScaleValues, BaseToken<string | number, 'fontSize'>>;
@@ -1127,7 +1128,35 @@ export interface FontFamilyTokenSchema<BaseToken> {
  */
 export interface MotionTokenSchema<BaseToken> {
     motion: {
-        dialog: {
+        avatar: {
+            enter: MotionToken<BaseToken>;
+            exit: MotionToken<BaseToken>;
+            hovered: MotionToken<BaseToken>;
+        };
+        flag: {
+            enter: MotionToken<BaseToken>;
+            exit: MotionToken<BaseToken>;
+            reposition: MotionToken<BaseToken>;
+        };
+        modal: {
+            enter: MotionToken<BaseToken>;
+            exit: MotionToken<BaseToken>;
+        };
+        popup: {
+            enter: {
+                top: MotionToken<BaseToken>;
+                bottom: MotionToken<BaseToken>;
+                left: MotionToken<BaseToken>;
+                right: MotionToken<BaseToken>;
+            };
+            exit: {
+                top: MotionToken<BaseToken>;
+                bottom: MotionToken<BaseToken>;
+                left: MotionToken<BaseToken>;
+                right: MotionToken<BaseToken>;
+            };
+        };
+        spotlight: {
             enter: MotionToken<BaseToken>;
             exit: MotionToken<BaseToken>;
         };

package/dist/types-ts4.5/utils/token-usage-guidelines.d.ts

@@ -0,0 +1,8 @@
+export declare const getTokenUsageGuidelines: (tokenId: string) => {
+    usage: string;
+    cssProperties: string[];
+};
+/**
+ * Types of tokens. Using path.subpath notation.
+ */
+export type TokenCategory = 'color.text' | 'color.link' | 'color.icon' | 'color.border' | 'color.background' | 'color.blanket' | 'color.interaction' | 'color.skeleton' | 'color.chart' | 'elevation.surface' | 'elevation.shadow' | 'opacity' | 'utility' | 'space' | 'font.heading' | 'font.body' | 'font.metric' | 'font.code' | 'font.weight' | 'font.family' | 'font.lineHeight' | 'radius' | 'border.width';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "11.1.0",
+	"version": "11.2.0",
 	"description": "Design tokens are the single source of truth to name and store design decisions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"codegen-tokens": "run-ts ./scripts/style-dictionary/build.tsx && run-ts ./scripts/style-dictionary/build-plugin-token-map.tsx && cd $(npx repo-root)/packages/design-system/primitives && yarn codegen-styles && cd $(npx repo-root)/packages/design-system/ds-explorations && yarn codegen-styles"
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^5.3.0",
+		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@babel/traverse": "^7.23.2",
@@ -43,34 +43,35 @@
 	"devDependencies": {
 		"@af/formatting": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/avatar": "^25.8.0",
+		"@atlaskit/avatar": "^25.10.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.6.0",
-		"@atlaskit/dropdown-menu": "^16.5.0",
+		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/dropdown-menu": "^16.7.0",
 		"@atlaskit/dynamic-table": "^18.3.0",
 		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/grid": "^0.18.0",
 		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/icon": "^32.0.0",
-		"@atlaskit/inline-message": "^15.5.0",
+		"@atlaskit/icon": "^33.0.0",
+		"@atlaskit/inline-message": "^15.6.0",
 		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/lozenge": "^13.4.0",
-		"@atlaskit/popup": "^4.13.0",
+		"@atlaskit/lozenge": "^13.5.0",
+		"@atlaskit/popup": "^4.14.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/radio": "^8.4.0",
 		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/select": "^21.7.0",
+		"@atlaskit/select": "^21.8.0",
 		"@atlaskit/tag": "^14.5.0",
 		"@atlaskit/textarea": "^8.2.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tooltip": "^20.14.0",
+		"@atlaskit/tooltip": "^21.0.0",
 		"@atlassian/codegen": "^0.1.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@atlassian/ts-loader": "^0.1.0",
 		"@babel/core": "7.24.9",
 		"@compiled/react": "^0.20.0",

package/tokens.docs.tsx

@@ -0,0 +1,52 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'token',
+		description:
+			'Design tokens provide consistent, semantic values for colors, spacing, typography, and other design properties across the Atlassian Design System. Use tokens instead of hardcoded values to ensure consistency and proper theming.',
+		status: 'general-availability',
+		import: {
+			name: 'token',
+			package: '@atlaskit/tokens',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'AVOID hardcoding any CSS values where a token exists for that type; in many cases you may be forced to use a token',
+			'Use the `token()` function with CSS-in-JS',
+			'Use semantic token names for better maintainability',
+		],
+		accessibilityGuidelines: [
+			'Use color tokens to ensure proper contrast ratios',
+			'Test color combinations for accessibility compliance',
+			'Use semantic color names (success, warning, danger) for better meaning',
+		],
+		examples: [
+			{
+				name: 'Basic',
+				description: 'Basic example',
+				source: path.resolve(__dirname, './examples/ai/basic.tsx'),
+			},
+		],
+		keywords: [
+			'token',
+			'design',
+			'system',
+			'color',
+			'spacing',
+			'typography',
+			'radius',
+			'theme',
+			'css',
+			'style',
+			'variable',
+		],
+		categories: ['tokens'],
+	},
+];
+
+export default documentation;