@atlaskit/primitives 17.1.1 → 18.0.1

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

@@ -2,7 +2,8 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ElementType, type ReactNode } from 'react';
+import { type ElementType, type ForwardRefExoticComponent, type MemoExoticComponent, type ReactNode, type RefAttributes } from 'react';
+import { type SerializedStyles } from '@emotion/react';
 import { type Space } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 export type GridProps<T extends ElementType = 'div'> = {
@@ -74,42 +75,42 @@ type JustifyItems = keyof typeof justifyItemsMap;
 type AlignItems = keyof typeof alignItemsMap;
 type AlignContent = keyof typeof alignContentMap;
 declare const justifyContentMap: {
-    readonly start: import("@emotion/react").SerializedStyles;
-    readonly center: import("@emotion/react").SerializedStyles;
-    readonly end: import("@emotion/react").SerializedStyles;
-    readonly 'space-between': import("@emotion/react").SerializedStyles;
-    readonly 'space-around': import("@emotion/react").SerializedStyles;
-    readonly 'space-evenly': import("@emotion/react").SerializedStyles;
-    readonly stretch: import("@emotion/react").SerializedStyles;
+    readonly start: SerializedStyles;
+    readonly center: SerializedStyles;
+    readonly end: SerializedStyles;
+    readonly 'space-between': SerializedStyles;
+    readonly 'space-around': SerializedStyles;
+    readonly 'space-evenly': SerializedStyles;
+    readonly stretch: SerializedStyles;
 };
 declare const justifyItemsMap: {
-    readonly start: import("@emotion/react").SerializedStyles;
-    readonly center: import("@emotion/react").SerializedStyles;
-    readonly end: import("@emotion/react").SerializedStyles;
-    readonly stretch: import("@emotion/react").SerializedStyles;
+    readonly start: SerializedStyles;
+    readonly center: SerializedStyles;
+    readonly end: SerializedStyles;
+    readonly stretch: SerializedStyles;
 };
 declare const alignContentMap: {
-    readonly start: import("@emotion/react").SerializedStyles;
-    readonly center: import("@emotion/react").SerializedStyles;
-    readonly end: import("@emotion/react").SerializedStyles;
-    readonly 'space-between': import("@emotion/react").SerializedStyles;
-    readonly 'space-around': import("@emotion/react").SerializedStyles;
-    readonly 'space-evenly': import("@emotion/react").SerializedStyles;
-    readonly stretch: import("@emotion/react").SerializedStyles;
+    readonly start: SerializedStyles;
+    readonly center: SerializedStyles;
+    readonly end: SerializedStyles;
+    readonly 'space-between': SerializedStyles;
+    readonly 'space-around': SerializedStyles;
+    readonly 'space-evenly': SerializedStyles;
+    readonly stretch: SerializedStyles;
 };
 declare const alignItemsMap: {
-    readonly start: import("@emotion/react").SerializedStyles;
-    readonly center: import("@emotion/react").SerializedStyles;
-    readonly baseline: import("@emotion/react").SerializedStyles;
-    readonly end: import("@emotion/react").SerializedStyles;
+    readonly start: SerializedStyles;
+    readonly center: SerializedStyles;
+    readonly baseline: SerializedStyles;
+    readonly end: SerializedStyles;
 };
 type AutoFlow = keyof typeof gridAutoFlowMap;
 declare const gridAutoFlowMap: {
-    readonly row: import("@emotion/react").SerializedStyles;
-    readonly column: import("@emotion/react").SerializedStyles;
-    readonly dense: import("@emotion/react").SerializedStyles;
-    readonly 'row dense': import("@emotion/react").SerializedStyles;
-    readonly 'column dense': import("@emotion/react").SerializedStyles;
+    readonly row: SerializedStyles;
+    readonly column: SerializedStyles;
+    readonly dense: SerializedStyles;
+    readonly 'row dense': SerializedStyles;
+    readonly 'column dense': SerializedStyles;
 };
 /**
  * __Grid__
@@ -132,5 +133,5 @@ declare const gridAutoFlowMap: {
  * )
  * ```
  */
-declare const Grid: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<GridProps<ElementType>, "ref"> & import("react").RefAttributes<any>>>;
+declare const Grid: MemoExoticComponent<ForwardRefExoticComponent<Omit<GridProps<ElementType>, 'ref'> & RefAttributes<any>>>;
 export default Grid;

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

@@ -70,5 +70,5 @@ export type InlineProps<T extends ElementType = 'div'> = {
  * ```
  *
  */
-declare const Inline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<InlineProps<React.ElementType>, "ref"> & React.RefAttributes<any>>>;
+declare const Inline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<InlineProps<React.ElementType>, 'ref'> & React.RefAttributes<any>>>;
 export default Inline;

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ElementType, type ReactNode } from 'react';
+import { type ElementType, type ForwardRefExoticComponent, type MemoExoticComponent, type ReactNode, type RefAttributes } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
 import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
 export type StackProps<T extends ElementType = 'div'> = {
@@ -57,5 +57,5 @@ export type StackProps<T extends ElementType = 'div'> = {
  * ```
  *
  */
-declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<StackProps<ElementType>, "ref"> & import("react").RefAttributes<any>>>;
+declare const Stack: MemoExoticComponent<ForwardRefExoticComponent<Omit<StackProps<ElementType>, 'ref'> & RefAttributes<any>>>;
 export default Stack;

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

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
+import { type SerializedStyles } from '@emotion/react';
 import { type TextColor, type TextSize, type TextWeight } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly [
@@ -57,9 +58,9 @@ type TextPropsBase<T extends ElementType = 'span'> = {
 export type TextProps<T extends ElementType = 'span'> = TextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
 type TextAlign = keyof typeof textAlignMap;
 declare const textAlignMap: {
-    center: import("@emotion/react").SerializedStyles;
-    end: import("@emotion/react").SerializedStyles;
-    start: import("@emotion/react").SerializedStyles;
+    center: SerializedStyles;
+    end: SerializedStyles;
+    start: SerializedStyles;
 };
 /**
  * __Text__

package/dist/types-ts4.5/responsive/build-media-query-css.d.ts

@@ -1,4 +1,4 @@
-import { type CSSObject } from '@emotion/react';
+import { type CSSObject, type SerializedStyles } from '@emotion/react';
 import type { Breakpoint } from './types';
 /**
  * Build a map of breakpoints to css with media queries and nested styles.
@@ -30,7 +30,7 @@ export declare const UNSAFE_buildAboveMediaQueryCSS: (
  * The desired CSS to place inside of the media query.
  * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
  */
-input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;
+input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, SerializedStyles>>>;
 /**
  * Build a map of breakpoints to css with media queries and nested styles.
  *
@@ -60,4 +60,4 @@ export declare const UNSAFE_buildBelowMediaQueryCSS: (
  * The desired CSS to place inside of the media query.
  * This can either be a css object directly or functional with `breakpoint` as the arg to return a css object.
  */
-input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, import("@emotion/react").SerializedStyles>>>;
+input: CSSObject | ((breakpoint: Breakpoint) => CSSObject)) => Required<Partial<Record<Breakpoint, SerializedStyles>>>;

package/dist/types-ts4.5/responsive/media-helper.d.ts

@@ -38,26 +38,26 @@ export declare const media: {
  */
 export declare const UNSAFE_media: {
     above: {
-        readonly xxs: "@media all";
-        readonly xs: "@media (min-width: 30rem)";
-        readonly sm: "@media (min-width: 48rem)";
-        readonly md: "@media (min-width: 64rem)";
-        readonly lg: "@media (min-width: 90rem)";
-        readonly xl: "@media (min-width: 110.5rem)";
+        readonly xxs: '@media all';
+        readonly xs: '@media (min-width: 30rem)';
+        readonly sm: '@media (min-width: 48rem)';
+        readonly md: '@media (min-width: 64rem)';
+        readonly lg: '@media (min-width: 90rem)';
+        readonly xl: '@media (min-width: 110.5rem)';
     };
     only: {
-        readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
-        readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
-        readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
-        readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
-        readonly lg: "@media (min-width: 90rem) and (max-width: 110.49rem)";
-        readonly xl: "@media (min-width: 110.5rem)";
+        readonly xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)';
+        readonly xs: '@media (min-width: 30rem) and (max-width: 47.99rem)';
+        readonly sm: '@media (min-width: 48rem) and (max-width: 63.99rem)';
+        readonly md: '@media (min-width: 64rem) and (max-width: 89.99rem)';
+        readonly lg: '@media (min-width: 90rem) and (max-width: 110.49rem)';
+        readonly xl: '@media (min-width: 110.5rem)';
     };
     below: {
-        readonly xs: "@media not all and (min-width: 30rem)";
-        readonly sm: "@media not all and (min-width: 48rem)";
-        readonly md: "@media not all and (min-width: 64rem)";
-        readonly lg: "@media not all and (min-width: 90rem)";
-        readonly xl: "@media not all and (min-width: 110.5rem)";
+        readonly xs: '@media not all and (min-width: 30rem)';
+        readonly sm: '@media not all and (min-width: 48rem)';
+        readonly md: '@media not all and (min-width: 64rem)';
+        readonly lg: '@media not all and (min-width: 90rem)';
+        readonly xl: '@media not all and (min-width: 110.5rem)';
     };
 };

package/dist/types-ts4.5/utils/has-text-ancestor-context.d.ts

@@ -1,3 +1,4 @@
+import { type Provider } from 'react';
 /**
  * @internal
  */
@@ -5,4 +6,4 @@ export declare const useHasTextAncestor: () => boolean;
 /**
  * @internal
  */
-export declare const HasTextAncestorProvider: import("react").Provider<boolean>;
+export declare const HasTextAncestorProvider: Provider<boolean>;

package/dist/types-ts4.5/utils/surface-provider.d.ts

@@ -1,10 +1,11 @@
+import { type Context } from 'react';
 import type { BackgroundColorToken } from './types';
 /**
  * __Surface context__
  *
  * A surface context provides context information on the current background (if set).
  */
-export declare const SurfaceContext: import("react").Context<BackgroundColorToken>;
+export declare const SurfaceContext: Context<BackgroundColorToken>;
 /**
  * __useSurface__
  *

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -25,10 +25,10 @@ export type Dimension = keyof typeof dimensionMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::513f6a7e264ea3f9fe56eda322a28f64>>
+ * @codegen <<SignedSource::c9b68acdd57654884efd2f5087890624>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::07b9c29f8d9f95e43d59a7b7ad4ce7a2>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::535518e7add48ef24f526d0904f70060>>
  */
 export declare const positiveSpaceMap: {
     'space.0': 'var(--ds-space-0)';
@@ -90,10 +90,10 @@ export type AllSpace = keyof typeof allSpaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ee66de6d864a28baee9a085f01a27db6>>
+ * @codegen <<SignedSource::cefa2c59e15e6a3749ef38fa86c6adea>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 export declare const inverseColorMap: {
     'color.background.neutral.bold': 'color.text.inverse';
@@ -129,11 +129,11 @@ export declare const inverseColorMap: {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9532ccca897f438d49bda552ccfad635>>
+ * @codegen <<SignedSource::c673d53a0a31524e65f1c7051579eae5>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 export declare const opacityMap: {
     'opacity.disabled': 'var(--ds-opacity-disabled)';
@@ -166,11 +166,11 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5a98ba062e79517dbd51ee8599abebac>>
+ * @codegen <<SignedSource::fa88ed1ec5a817750b0348ca36dbb5f1>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::6ba535fc3d46f6c8a7b6384ed59ec8d6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::38a7d4716f6999a6bdda9e4fe2bca6a1>>
  */
 export declare const borderColorMap: {
     'color.border': 'var(--ds-border)';
@@ -514,11 +514,11 @@ export type Layer = keyof typeof layerMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2db762824a4c50f25f7829537dee1f49>>
+ * @codegen <<SignedSource::6ab2b394dd5a830d6966e333e20b1473>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::6683952932c4ad145144ebc086a2548e>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::8817f4073995e5dc9c2bb766316632d6>>
  */
 export declare const borderWidthMap: {
     'border.width': 'var(--ds-border-width)';
@@ -542,7 +542,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f81d01fb664f365972ac87a2be86aba6>>
+ * @codegen <<SignedSource::64331f0b8b5e2f090a3aad153d92deb6>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "17.1.1",
+	"version": "18.0.1",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -133,11 +133,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/app-provider": "^3.3.0",
+		"@atlaskit/app-provider": "^4.1.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/interaction-context": "^3.1.0",
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -154,21 +154,21 @@
 		"@af/formatting": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/avatar": "^25.7.0",
+		"@atlaskit/avatar": "^25.8.0",
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/checkbox": "^17.3.0",
 		"@atlaskit/code": "^17.4.0",
-		"@atlaskit/docs": "^11.3.0",
+		"@atlaskit/docs": "^11.4.0",
 		"@atlaskit/dropdown-menu": "^16.4.0",
 		"@atlaskit/flag": "^17.8.0",
 		"@atlaskit/form": "^15.3.0",
-		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^29.4.0",
+		"@atlaskit/heading": "^5.3.0",
+		"@atlaskit/icon": "^31.0.0",
 		"@atlaskit/icon-object": "^7.4.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/logo": "^19.10.0",
-		"@atlaskit/lozenge": "^13.3.0",
+		"@atlaskit/lozenge": "^13.4.0",
 		"@atlaskit/motion": "^5.3.0",
 		"@atlaskit/range": "^9.3.0",
 		"@atlaskit/section-message": "^8.12.0",

package/scripts/codegen-styles.tsx

@@ -13,15 +13,12 @@ import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
 import { createTextStylesFromTemplate } from './text-codegen-template';
 import { createTypographyStylesFromTemplate } from './typography-codegen-template';
 
-const colorTokensDependencyPath = require.resolve(
-	'../../tokens/src/artifacts/tokens-raw/atlassian-light',
-);
-const spacingTokensDependencyPath = require.resolve(
-	'../../tokens/src/artifacts/tokens-raw/atlassian-spacing',
-);
-const shapeTokensDependencyPath = require.resolve(
-	'../../tokens/src/artifacts/tokens-raw/atlassian-shape',
-);
+const colorTokensDependencyPath =
+	require.resolve('../../tokens/src/artifacts/tokens-raw/atlassian-light');
+const spacingTokensDependencyPath =
+	require.resolve('../../tokens/src/artifacts/tokens-raw/atlassian-spacing');
+const shapeTokensDependencyPath =
+	require.resolve('../../tokens/src/artifacts/tokens-raw/atlassian-shape');
 
 const templateFiles = readdirSync(join(__dirname, 'codegen-file-templates'), {
 	withFileTypes: true,

package/scripts/color-codegen-template.tsx

@@ -1,5 +1,5 @@
 import format from '@af/formatting/sync';
-import { legacyLightTokens as legacyTokens, light as tokens } from '@atlaskit/tokens/tokens-raw';
+import { light as tokens } from '@atlaskit/tokens/tokens-raw';
 
 import {
 	capitalize,
@@ -48,20 +48,19 @@ const tokenStyles = {
 	},
 } as const;
 
-const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);
-
-const activeTokens = bothTokens
-	.filter(([t]) => t.attributes.state !== 'deleted')
-	.map((t) => t)
+const activeTokens = tokens
+	.filter((t) => t.attributes.state !== 'deleted')
 	.map(
-		([t, legacy]): Token => ({
+		(t): Token => ({
 			token: t.name,
-			fallback: legacy.value as string | ShadowDefinition,
+			fallback: t.value as string | ShadowDefinition,
 			isDeprecated: t.attributes.state === 'deprecated',
 		}),
 	);
 
-export const createColorStylesFromTemplate = (colorProperty: keyof typeof tokenStyles) => {
+export const createColorStylesFromTemplate: (colorProperty: keyof typeof tokenStyles) => string = (
+	colorProperty: keyof typeof tokenStyles,
+) => {
 	if (!tokenStyles[colorProperty]) {
 		throw new Error(`[codegen] Unknown option found "${colorProperty}"`);
 	}

package/scripts/elevation-codegen-template.tsx

@@ -1,6 +1,6 @@
 import format from '@af/formatting/sync';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
-import { legacyLightTokens as legacyTokens, light as tokens } from '@atlaskit/tokens/tokens-raw';
+import { light as tokens } from '@atlaskit/tokens/tokens-raw';
 
 import {
 	capitalize,
@@ -37,20 +37,19 @@ const tokenStyles = {
 	},
 } as const;
 
-const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);
-
-const activeTokens = bothTokens
-	.filter(([t]) => t.attributes.state !== 'deleted')
-	.map((t) => t)
+const activeTokens = tokens
+	.filter((t) => t.attributes.state !== 'deleted')
 	.map(
-		([t, legacy]): Token => ({
+		(t): Token => ({
 			token: t.name,
-			fallback: legacy.value as string | ShadowDefinition,
+			fallback: t.value as string | ShadowDefinition,
 			isDeprecated: t.attributes.state === 'deprecated',
 		}),
 	);
 
-export const createElevationStylesFromTemplate = (property: keyof typeof tokenStyles) => {
+export const createElevationStylesFromTemplate: (property: keyof typeof tokenStyles) => string = (
+	property: keyof typeof tokenStyles,
+) => {
 	if (!tokenStyles[property]) {
 		throw new Error(`[codegen] Unknown option found "${property}"`);
 	}

package/scripts/inverse-color-map-template.tsx

@@ -22,7 +22,7 @@ const activeTokens = tokens
 	// @ts-ignore
 	.map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }));
 
-export const createInverseColorMapTemplate = () => {
+export const createInverseColorMapTemplate: () => string = () => {
 	const propMap = activeTokens.map((t) => {
 		// handle the default case eg color.border or color.text
 		const propName = t.token;

package/scripts/misc-codegen-template.tsx

@@ -1,7 +1,9 @@
 import { readFileSync } from 'fs';
 import { join } from 'path';
 
-export const createStylesFromFileTemplate = (
+export const createStylesFromFileTemplate: (
+	property: 'border-color' | 'border-radius' | 'border-width' | 'dimensions' | 'layer',
+) => NonSharedBuffer = (
 	property: 'border-color' | 'border-radius' | 'border-width' | 'dimensions' | 'layer',
 ) => {
 	const path = join(__dirname, './codegen-file-templates', `${property}.tsx`);

package/scripts/shape-codegen-template.tsx

@@ -35,7 +35,9 @@ const activeTokens = shapeTokens
 		}),
 	);
 
-export const createShapeStylesFromTemplate = (property: keyof typeof tokenStyles): string => {
+export const createShapeStylesFromTemplate: (property: keyof typeof tokenStyles) => string = (
+	property: keyof typeof tokenStyles,
+): string => {
 	if (!tokenStyles[property]) {
 		throw new Error(`[codegen] Unknown option found "${property}"`);
 	}

package/scripts/spacing-codegen-template.tsx

@@ -21,7 +21,7 @@ const negativeSpaceTokens = tokens
 		fallback: t.value,
 	}));
 
-export const createSpacingStylesFromTemplate = () => {
+export const createSpacingStylesFromTemplate: () => string = () => {
 	const output = [
 		`export const positiveSpaceMap: {
 			${generateTypeDefs(positiveSpaceTokens.map((t) => t.name))}

package/scripts/text-codegen-template.tsx

@@ -9,7 +9,7 @@ type Token = {
 };
 
 const activeTokens: Token[] = tokens
-	.filter((t) => t.attributes.state === 'active')
+	.filter((t) => t.attributes.state !== 'deleted')
 	.map((t) => ({
 		name: t.name,
 		fallback: t.value,
@@ -62,7 +62,7 @@ const removeVerbosity = (name: string): string => {
 	return name;
 };
 
-export const createTextStylesFromTemplate = () => {
+export const createTextStylesFromTemplate: () => string = () => {
 	return textProperties
 		.map((textProperty) => {
 			const { filterFn, objectName } = textProperty;

package/scripts/typography-codegen-template.tsx

@@ -6,13 +6,15 @@ import { capitalize, constructTokenFunctionCall, generateTypeDefs } from './util
 type Token = {
 	name: string;
 	fallback: string;
+	isDeprecated: boolean;
 };
 
 const activeTokens: Token[] = tokens
-	.filter((t) => t.attributes.state === 'active')
+	.filter((t) => t.attributes.state !== 'deleted')
 	.map((t) => ({
 		name: t.name,
 		fallback: t.value,
+		isDeprecated: t.attributes.state === 'deprecated',
 	}));
 
 const typographyProperties = [
@@ -40,7 +42,7 @@ const typographyProperties = [
 	},
 ] as const;
 
-export const createTypographyStylesFromTemplate = () => {
+export const createTypographyStylesFromTemplate: () => string = () => {
 	return typographyProperties
 		.map((typographyProperty) => {
 			const { filterFn, objectName } = typographyProperty;
@@ -62,8 +64,9 @@ ${activeTokens
 	.sort((a, b) => (a.name < b.name ? -1 : 1))
 	.map((token) => {
 		return `
-      '${token.name}': ${constructTokenFunctionCall(token.name, token.fallback)}
-    `.trim();
+			${token.isDeprecated ? '// @deprecated' : ''}
+			'${token.name}': ${constructTokenFunctionCall(token.name, token.fallback)}
+		`.trim();
 	})
 	.join(',\n\t')}
 };`,

package/scripts/utils.tsx

@@ -1,6 +1,9 @@
 import tokens from '@atlaskit/tokens/token-names';
 
-export const constructTokenFunctionCall = (token: string, fallback: string | ShadowDefinition) => {
+export const constructTokenFunctionCall: (
+	token: string,
+	fallback: string | ShadowDefinition,
+) => string = (token: string, fallback: string | ShadowDefinition) => {
 	if (Array.isArray(fallback)) {
 		fallback = constructShadow(fallback);
 	}
@@ -26,28 +29,32 @@ const constructShadow = (shadowObject: ShadowDefinition) => {
 
 type BooleanCallback<T> = (args: T) => boolean;
 
-export const compose =
+export const compose: (...fns: ((...any: any[]) => any)[]) => (x: any) => any =
 	(...fns: ((...any: any[]) => any)[]) =>
 	(x: any) =>
 		fns.reduce((res, fn) => fn(res), x);
-export const pick =
+export const pick: <T extends any>(key: keyof T) => (obj: T) => T[keyof T] =
 	<T extends any>(key: keyof T) =>
 	(obj: T) =>
 		obj[key];
-export const isAccent = (str: string) => str.includes('accent');
-export const isPressed = (str: string) => str.includes('pressed');
-export const isHovered = (str: string) => str.includes('hovered');
-export const not =
+export const isAccent: (str: string) => boolean = (str: string) => str.includes('accent');
+export const isPressed: (str: string) => boolean = (str: string) => str.includes('pressed');
+export const isHovered: (str: string) => boolean = (str: string) => str.includes('hovered');
+export const not: <T extends any>(cb: BooleanCallback<T>) => (val: T) => boolean =
 	<T extends any>(cb: BooleanCallback<T>) =>
 	(val: T) =>
 		!cb(val);
-export const or =
+export const or: <T extends any>(...fns: BooleanCallback<T>[]) => (val: T) => boolean =
 	<T extends any>(...fns: BooleanCallback<T>[]) =>
 	(val: T) =>
 		fns.some((fn) => fn(val));
-export const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+export const capitalize: (str: string) => string = (str: string) =>
+	str.charAt(0).toUpperCase() + str.slice(1);
 
-export const generateTypeDefs = (typedTokens: string[], tokenNames?: string[]) => {
+export const generateTypeDefs: (typedTokens: string[], tokenNames?: string[]) => string = (
+	typedTokens: string[],
+	tokenNames?: string[],
+) => {
 	return typedTokens
 		.map((t, i) => {
 			return `'${Array.isArray(tokenNames) ? tokenNames[i] : t}': 'var(${tokens[t as keyof typeof tokens]})'`;