@atlaskit/tokens 11.0.0 → 11.0.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/tokens
 
+## 11.0.2
+
+### Patch Changes
+
+- [`18a6ca6a0c98c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/18a6ca6a0c98c) -
+  Widen React peer dependency from ^18.2.0 to ^18.2.0 || ^19.0.0 to support React 19
+- Updated dependencies
+
+## 11.0.1
+
+### Patch Changes
+
+- [`5db9e3f21a52f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5db9e3f21a52f) -
+  Internal refactoring
+
 ## 11.0.0
 
 ### Major Changes

package/codemods/css-to-design-tokens/lib/colors.tsx

@@ -48,22 +48,22 @@ const REGEXES = {
 		/^\s*(#([0-9a-f]{3}){1,2}|(rgba|hsla)\(\s*\d{1,3}%?\s*(,\s*\d{1,3}%?\s*){2},\s*-?\d*\.?\d+\s*\)|(rgb|hsl)\(\s*\d{1,3}%?\s*(,\s*\d{1,3}%?\s*){2}\)\s*|(lab|lch)\(\s*\d{1,3}%?\s+\d{1,3}%?\s+\d{1,3}%?\s*\)|hwb\(\s*\d{1,3}\s+\d{1,3}%?\s+\d{1,3}%?\s*\))\s*$/i,
 };
 
-export function isKnownCssVariable(value: string) {
+export function isKnownCssVariable(value: string): boolean {
 	return value in knownVariables;
 }
-export function isRawColor(value: string) {
+export function isRawColor(value: string): boolean {
 	return REGEXES.RAW_COLOR.test(value);
 }
-export function isNamedColor(value: string) {
+export function isNamedColor(value: string): boolean {
 	return NAMED_COLORS.includes(value);
 }
-export function isGradient(value: string) {
+export function isGradient(value: string): boolean {
 	return GRADIENT_TYPES.some((gradient) => value.startsWith(`${gradient}-gradient(`));
 }
-export function extractBetweenParentheses(value: string) {
+export function extractBetweenParentheses(value: string): string {
 	const match = value.match(/\((.*?)\)/);
 	return match ? match[1] : '';
 }
-export function isLessFunction(value: string) {
+export function isLessFunction(value: string): boolean {
 	return LESS_COLOR_FUNCTIONS.some((func) => value.startsWith(`${func}(`));
 }

package/codemods/css-to-design-tokens/lib/declaration.tsx

@@ -21,23 +21,23 @@ const COLOR_PROPERTIES = [
 	'text-stroke',
 ] as const;
 
-export function isColorRelatedProperty(prop: string) {
+export function isColorRelatedProperty(prop: string): boolean {
 	return COLOR_PROPERTIES.some((property) => property === prop);
 }
 
-export function isCssDeclaration(prop: string) {
+export function isCssDeclaration(prop: string): boolean {
 	return prop.startsWith('--');
 }
 
-export function extractCssVarName(prop: string) {
+export function extractCssVarName(prop: string): string {
 	return prop.substring(prop.indexOf('(') + 1).split(/\,|\)/)[0];
 }
 
-export function extractLessVarName(prop: string) {
+export function extractLessVarName(prop: string): string {
 	return prop.substring(1);
 }
 
-export function splitCssValue(value: string) {
+export function splitCssValue(value: string): RegExpMatchArray | null {
 	const regex = /(?:[^\s()]+|\((?:[^()]+|\([^()]*\))*\))+/g;
 	return value.match(regex);
 }

package/codemods/css-to-design-tokens/lib/meta.tsx

@@ -65,7 +65,7 @@ const ADDITIONAL_META: Record<string, string> = {
 	red: 'danger',
 };
 
-export function cleanMeta(meta: string[]) {
+export function cleanMeta(meta: string[]): string[] {
 	const cleanMeta = meta
 		.reduce(
 			(accum: string[], val: string) => [
@@ -141,7 +141,7 @@ function getParentSelectors(node: Node): string {
 	return '';
 }
 
-export function getCssVarMeta(cssVariable: string) {
+export function getCssVarMeta(cssVariable: string): string[] {
 	const tokenName = extractCssVarName(cssVariable);
 	const meta = knownVariables[tokenName];
 
@@ -152,7 +152,7 @@ export function getCssVarMeta(cssVariable: string) {
 	return meta;
 }
 
-export function getRawColorMeta(rawColor: string) {
+export function getRawColorMeta(rawColor: string): string[] {
 	let cleanColor = rawColor.toLowerCase();
 
 	if (cleanColor.length === 4) {
@@ -162,6 +162,6 @@ export function getRawColorMeta(rawColor: string) {
 	return knownRawColors[cleanColor] ?? [];
 }
 
-export function getNamedColorMeta(namedColor: string) {
+export function getNamedColorMeta(namedColor: string): string[] {
 	return knownNamedColors[namedColor] ?? [];
 }

package/codemods/css-to-design-tokens/lib/tokens.tsx

@@ -31,7 +31,7 @@ function tokenToVar(token: string) {
 	return `--ds-${token.replace(/\./g, '-').replace('color-', '').replace('elevation-', '')}`;
 }
 
-export default function findToken(meta: string[]) {
+export default function findToken(meta: string[]): string {
 	const filteredTokens = filterTokens(meta);
 	const tokenFuzzySearch = Search(filteredTokens, false);
 	const cleanSearchTerms = cleanMeta(meta).join(' ');

package/codemods/css-to-design-tokens/transform.tsx

@@ -87,7 +87,7 @@ const plugin = (): Plugin => {
 	};
 };
 
-export default async function transformer(file: FileInfo | string) {
+export default async function transformer(file: FileInfo | string): Promise<string> {
 	const processor = postcss([plugin()]);
 	const src = typeof file === 'string' ? file : file.source;
 	const { css } = await processor.process(src, POSTCSS_OPTIONS);

package/codemods/hypermod.config.tsx

@@ -2,7 +2,13 @@ import cssToDesignTokens from './css-to-design-tokens/transform';
 import removeFallbacksColor from './remove-fallbacks-color/transform';
 import themeToDesignTokens from './theme-to-design-tokens/transform';
 
-const config = {
+const config: {
+	presets: {
+		'theme-to-design-tokens': typeof themeToDesignTokens;
+		'css-to-design-tokens': typeof cssToDesignTokens;
+		'remove-fallbacks-color': typeof removeFallbacksColor;
+	};
+} = {
 	presets: {
 		'theme-to-design-tokens': themeToDesignTokens,
 		'css-to-design-tokens': cssToDesignTokens,

package/codemods/remove-fallbacks-color/transform.tsx

@@ -1,7 +1,7 @@
 import { hasImportDeclaration } from '@hypermod/utils';
 import type { API, FileInfo } from 'jscodeshift';
 
-export default async function transformer(file: FileInfo, api: API) {
+export default async function transformer(file: FileInfo, api: API): Promise<string> {
 	const j = api.jscodeshift;
 	const source = j(file.source);
 

package/codemods/theme-to-design-tokens/transform.tsx

@@ -239,8 +239,11 @@ function parseCSSPropertyName(cssString: string) {
 	};
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default async function transformer(file: FileInfo, api: API, debug = false) {
+export default async function transformer(
+	file: FileInfo,
+	api: API,
+	_debug = false,
+): Promise<string> {
 	const j = api.jscodeshift;
 	const source = j(file.source);
 	let transformed = false;

package/codemods/theme-to-design-tokens/utils/ast-meta.tsx

@@ -88,7 +88,7 @@ export function getMetaFromAncestors(
 	return meta;
 }
 
-export function cleanMeta(meta: string[]) {
+export function cleanMeta(meta: string[]): string[] {
 	return meta
 		.reduce<string[]>(
 			(accum, val) => [

package/codemods/theme-to-design-tokens/utils/ast.tsx

@@ -26,7 +26,7 @@ export function isParentOfToken(j: JSCodeshift, path: any): boolean {
 	return j(path).find(j.CallExpression, { callee: { name: 'token' } }).length > 0;
 }
 
-export function getClosestDecendantOfType(j: JSCodeshift, path: ASTPath<any>, type: any) {
+export function getClosestDecendantOfType(j: JSCodeshift, path: ASTPath<any>, type: any): any {
 	if (!isDecendantOfType(j, path, type)) {
 		return;
 	}

package/codemods/theme-to-design-tokens/utils/color.tsx

@@ -1,14 +1,16 @@
 import { legacyColorMixins, legacyColors } from './legacy-colors';
 import { namedColors } from './named-colors';
 
-export const isLegacyColor = (value: string) => legacyColors.includes(value);
+export const isLegacyColor: (value: string) => boolean = (value: string) =>
+	legacyColors.includes(value);
 
-export const isLegacyNamedColor = (value: string) => legacyColorMixins.includes(value);
+export const isLegacyNamedColor: (value: string) => boolean = (value: string) =>
+	legacyColorMixins.includes(value);
 
 const colorRegexp =
 	/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|(?:rgb|rgba|hsl|hsla|lch|lab|color)\([^\)]*\)/;
 
-export const includesHardCodedColor = (raw: string) => {
+export const includesHardCodedColor: (raw: string) => boolean = (raw: string) => {
 	const value = raw.toLowerCase();
 	if (colorRegexp.exec(value)) {
 		return true;
@@ -23,7 +25,7 @@ export const includesHardCodedColor = (raw: string) => {
 	return false;
 };
 
-export const isHardCodedColor = (raw: string) => {
+export const isHardCodedColor: (raw: string) => boolean = (raw: string) => {
 	const value = raw.toLowerCase();
 
 	if (namedColors.includes(value)) {
@@ -38,7 +40,7 @@ export const isHardCodedColor = (raw: string) => {
 	return false;
 };
 
-export function isBoldColor(color: string) {
+export function isBoldColor(color: string): boolean {
 	const number = parseInt(color.replace(/^./, ''), 10);
 	return number > 300;
 }

package/codemods/theme-to-design-tokens/utils/css-utils.tsx

@@ -1,6 +1,6 @@
 import { isColorRelatedProperty } from '../../css-to-design-tokens/lib/declaration';
 
-export function containsReplaceableCSSDeclarations(input: string) {
+export function containsReplaceableCSSDeclarations(input: string): boolean {
 	const cssPattern = /(\S+)\s*:/g;
 
 	let match;

package/codemods/theme-to-design-tokens/utils/fuzzy-search.tsx

@@ -3,7 +3,12 @@
 /**
  * Fuzzy search ripped from the internet.
  */
-const FuzzySet = function (
+const FuzzySet: (
+	arr?: string[],
+	useLevenshtein?: boolean,
+	gramSizeLower?: number,
+	gramSizeUpper?: number,
+) => any = function (
 	arr: string[] = [],
 	useLevenshtein?: boolean,
 	gramSizeLower: number = 2,

package/codemods/theme-to-design-tokens/utils/legacy-colors.tsx

@@ -1,4 +1,4 @@
-export const legacyColors = [
+export const legacyColors: string[] = [
 	'R50',
 	'R75',
 	'R100',
@@ -115,7 +115,7 @@ export const legacyColors = [
 	'DN10A',
 ];
 
-export const legacyColorMixins = [
+export const legacyColorMixins: string[] = [
 	'background',
 	'backgroundActive',
 	'backgroundHover',

package/codemods/theme-to-design-tokens/utils/named-colors.tsx

@@ -1,4 +1,4 @@
-export const namedColors = [
+export const namedColors: string[] = [
 	'black',
 	'silver',
 	'gray',

package/codemods/theme-to-design-tokens/utils/string-utils.tsx

@@ -1,4 +1,4 @@
-export const kebabize = (str: string) =>
+export const kebabize: (str: string) => string = (str: string) =>
 	str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
 
 export function findFirstNonspaceIndexAfter(text: string, index: number): number {

package/codemods/utils/tokens.tsx

@@ -1,4 +1,4 @@
-export const activeTokens = [
+export const activeTokens: string[] = [
 	'color.text',
 	'color.text.accent.lime',
 	'color.text.accent.lime.bolder',
@@ -283,7 +283,7 @@ export const activeTokens = [
 	'utility.elevation.surface.current',
 ];
 
-export const uniqueWordsFromTokens = [
+export const uniqueWordsFromTokens: string[] = [
 	'color',
 	'text',
 	'accent',

package/dist/types/constants.d.ts

@@ -5,5 +5,5 @@ export declare const CONTRAST_MODE_ATTRIBUTE = "data-contrast-mode";
 export declare const CUSTOM_THEME_ATTRIBUTE = "data-custom-theme";
 export declare const CSS_PREFIX = "ds";
 export declare const CSS_VAR_FULL: string[];
-export declare const TOKEN_NOT_FOUND_CSS_VAR = "--ds-token-not-found";
-export declare const CURRENT_SURFACE_CSS_VAR: "--ds-elevation-surface-current";
+export declare const TOKEN_NOT_FOUND_CSS_VAR: '--ds-token-not-found';
+export declare const CURRENT_SURFACE_CSS_VAR: '--ds-elevation-surface-current';

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

@@ -50,7 +50,17 @@ export type ThemeIds = (typeof themeIds)[number];
  */
 declare const themeOverrideIds: readonly [];
 export type ThemeOverrideIds = (typeof themeOverrideIds)[number];
-export declare const themeIdsWithOverrides: readonly ["light-increased-contrast", "light", "light-future", "dark", "dark-future", "dark-increased-contrast", "spacing", "shape", "typography"];
+export declare const themeIdsWithOverrides: readonly [
+    'light-increased-contrast',
+    'light',
+    'light-future',
+    'dark',
+    'dark-future',
+    'dark-increased-contrast',
+    'spacing',
+    'shape',
+    'typography'
+];
 export type ThemeIdsWithOverrides = (typeof themeIdsWithOverrides)[number];
 /**
  * Theme to use a base. This will create the theme as

package/dist/types/utils/color-mode-listeners.d.ts

@@ -1,7 +1,7 @@
 import { type UnbindFn } from 'bind-event-listener';
 declare class ColorModeObserver {
     unbindThemeChangeListener: UnbindFn | null;
-    getColorMode(): "light" | "dark";
+    getColorMode(): 'dark' | 'light';
     bind(): void;
     unbind(): void;
 }

package/dist/types/utils/contrast-mode-listeners.d.ts

@@ -1,7 +1,7 @@
 import { type UnbindFn } from 'bind-event-listener';
 declare class ContrastModeObserver {
     unbindContrastChangeListener: UnbindFn | null;
-    getContrastMode(): "more" | "no-preference";
+    getContrastMode(): 'more' | 'no-preference';
     bind(): void;
     unbind(): void;
 }

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

@@ -5,5 +5,5 @@ export declare const CONTRAST_MODE_ATTRIBUTE = "data-contrast-mode";
 export declare const CUSTOM_THEME_ATTRIBUTE = "data-custom-theme";
 export declare const CSS_PREFIX = "ds";
 export declare const CSS_VAR_FULL: string[];
-export declare const TOKEN_NOT_FOUND_CSS_VAR = "--ds-token-not-found";
-export declare const CURRENT_SURFACE_CSS_VAR: "--ds-elevation-surface-current";
+export declare const TOKEN_NOT_FOUND_CSS_VAR: '--ds-token-not-found';
+export declare const CURRENT_SURFACE_CSS_VAR: '--ds-elevation-surface-current';

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

@@ -70,15 +70,15 @@ declare const themeOverrideIds: readonly [
 ];
 export type ThemeOverrideIds = (typeof themeOverrideIds)[number];
 export declare const themeIdsWithOverrides: readonly [
-    "light-increased-contrast",
-    "light",
-    "light-future",
-    "dark",
-    "dark-future",
-    "dark-increased-contrast",
-    "spacing",
-    "shape",
-    "typography"
+    'light-increased-contrast',
+    'light',
+    'light-future',
+    'dark',
+    'dark-future',
+    'dark-increased-contrast',
+    'spacing',
+    'shape',
+    'typography'
 ];
 export type ThemeIdsWithOverrides = (typeof themeIdsWithOverrides)[number];
 /**

package/dist/types-ts4.5/utils/color-mode-listeners.d.ts

@@ -1,7 +1,7 @@
 import { type UnbindFn } from 'bind-event-listener';
 declare class ColorModeObserver {
     unbindThemeChangeListener: UnbindFn | null;
-    getColorMode(): "light" | "dark";
+    getColorMode(): 'dark' | 'light';
     bind(): void;
     unbind(): void;
 }

package/dist/types-ts4.5/utils/contrast-mode-listeners.d.ts

@@ -1,7 +1,7 @@
 import { type UnbindFn } from 'bind-event-listener';
 declare class ContrastModeObserver {
     unbindContrastChangeListener: UnbindFn | null;
-    getContrastMode(): "more" | "no-preference";
+    getContrastMode(): 'more' | 'no-preference';
     bind(): void;
     unbind(): void;
 }

package/offerings.json

@@ -8,7 +8,19 @@
 			"type": "named"
 		},
 		"type": "function",
-		"keywords": ["token", "design", "system", "color", "spacing", "typography", "radius", "theme", "css", "style", "variable"],
+		"keywords": [
+			"token",
+			"design",
+			"system",
+			"color",
+			"spacing",
+			"typography",
+			"radius",
+			"theme",
+			"css",
+			"style",
+			"variable"
+		],
 		"categories": ["tokens"],
 		"shortDescription": "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",
@@ -18,8 +30,8 @@
 			"Use semantic color names (success, warning, danger) for better meaning"
 		],
 		"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 inline styles or CSS-in-JS",
+			"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"
 		],
 		"generativeInstructions": [
@@ -27,6 +39,6 @@
 			"./docs/ai/spacing-instructions.md",
 			"./docs/ai/border-radius-instructions.md"
 		],
-		"examples": ["./examples/ai/prototyping-no-compiled.tsx"]
+		"examples": ["./examples/ai/basic.tsx"]
 	}
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "11.0.0",
+	"version": "11.0.2",
 	"description": "Design tokens are the single source of truth to name and store design decisions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,33 +38,33 @@
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"react": "^18.2.0"
+		"react": "^18.2.0 || ^19.0.0"
 	},
 	"devDependencies": {
 		"@af/formatting": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/avatar": "^25.7.0",
+		"@atlaskit/avatar": "^25.8.0",
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/calendar": "^17.2.0",
 		"@atlaskit/checkbox": "^17.3.0",
 		"@atlaskit/code": "^17.4.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/docs": "^11.3.0",
-		"@atlaskit/dropdown-menu": "^16.4.0",
+		"@atlaskit/docs": "^11.5.0",
+		"@atlaskit/dropdown-menu": "^16.5.0",
 		"@atlaskit/dynamic-table": "^18.3.0",
 		"@atlaskit/form": "^15.3.0",
 		"@atlaskit/grid": "^0.18.0",
-		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^30.0.0",
+		"@atlaskit/heading": "^5.3.0",
+		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/inline-message": "^15.5.0",
 		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/lozenge": "^13.3.0",
+		"@atlaskit/lozenge": "^13.4.0",
 		"@atlaskit/popup": "^4.13.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/radio": "^8.4.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/select": "^21.7.0",
-		"@atlaskit/tag": "^14.3.0",
+		"@atlaskit/tag": "^14.5.0",
 		"@atlaskit/textarea": "^8.2.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
@@ -122,9 +122,6 @@
 		"platform_increased-contrast-themes": {
 			"type": "boolean"
 		},
-		"should-render-to-parent-should-be-true-design-syst": {
-			"type": "boolean"
-		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
 		},