@atlaskit/tokens 13.0.3 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/tokens
 
+## 13.1.0
+
+### Minor Changes
+
+- [`6ae1bed1867c5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6ae1bed1867c5) -
+  [ux] Updated `color.background.disabled` to use a stronger neutral palette value (`Neutral200A` in
+  light themes, `DarkNeutral300A` in dark themes).
+
+## 13.0.4
+
+### Patch Changes
+
+- [`591568c487e99`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/591568c487e99) -
+  Moved "motion.easing.spring" token into experimental state
+
 ## 13.0.3
 
 ### Patch Changes

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

@@ -1,6 +1,6 @@
 import type { Declaration, Node, Rule } from 'postcss';
 
-import { uniqueWordsFromTokens } from '../../utils/tokens';
+import { uniqueWordsFromTokens } from '../../utils/unique-words-from-tokens';
 
 import { extractCssVarName } from './declaration';
 import { knownNamedColors, knownRawColors, knownVariables } from './legacy-colors';

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

@@ -1,5 +1,5 @@
 import Search from '../../theme-to-design-tokens/utils/fuzzy-search';
-import { activeTokens } from '../../utils/tokens';
+import { activeTokens } from '../../utils/active-tokens';
 
 import { cleanMeta } from './meta';
 

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

@@ -3,21 +3,23 @@ import { hasImportDeclaration, isDecendantOfType } from '@hypermod/utils';
 import type { API, Collection, FileInfo, JSCodeshift, TemplateElement } from 'jscodeshift';
 
 import CSSTransformer from '../css-to-design-tokens/transform';
-import { activeTokens } from '../utils/tokens';
-
-import { isDecendantOfToken, isParentOfToken } from './utils/ast';
-import { cleanMeta, getMetaFromAncestors } from './utils/ast-meta';
-import {
-	includesHardCodedColor,
-	isBoldColor,
-	isHardCodedColor,
-	isLegacyColor,
-	isLegacyNamedColor,
-} from './utils/color';
-import { containsReplaceableCSSDeclarations, findEndIndexOfCSSExpression } from './utils/css-utils';
+import { activeTokens } from '../utils/active-tokens';
+
+import { cleanMeta } from './utils/clean-meta';
+import { includesHardCodedColor, isHardCodedColor } from './utils/color';
+import { containsReplaceableCSSDeclarations } from './utils/contains-replaceable-css-declarations';
+import { findEndIndexOfCSSExpression } from './utils/find-end-index-of-css-expression';
+import { findFirstNonspaceIndexAfter } from './utils/find-first-nonspace-index-after';
 import Search from './utils/fuzzy-search';
-import { legacyColorMetaMap } from './utils/legacy-colors';
-import { findFirstNonspaceIndexAfter, kebabize, splitAtIndex } from './utils/string-utils';
+import { getMetaFromAncestors } from './utils/get-meta-from-ancestors';
+import { isBoldColor } from './utils/is-bold-color';
+import { isDecendantOfToken } from './utils/is-decendant-of-token';
+import { isLegacyColor } from './utils/is-legacy-color';
+import { isLegacyNamedColor } from './utils/is-legacy-named-color';
+import { isParentOfToken } from './utils/is-parent-of-token';
+import { kebabize } from './utils/kebabize';
+import { legacyColorMetaMap } from './utils/legacy-color-meta-map';
+import { splitAtIndex } from './utils/split-at-index';
 
 function insertTokenImport(j: JSCodeshift, source: Collection<any>) {
 	if (hasImportDeclaration(j, source, '@atlaskit/tokens')) {

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

@@ -1,151 +1,2 @@
-import type core from 'jscodeshift';
-
-import { uniqueWordsFromTokens } from '../../utils/tokens';
-
-import { getClosestDecendantOfType } from './ast';
-
-export function getMetaFromAncestors(
-	j: core.JSCodeshift,
-	path: any,
-	meta: string[] = [],
-): string[] {
-	const parent = path.parentPath;
-	const grandParent = parent && parent.parentPath;
-
-	if (parent && parent.value.type === 'ObjectProperty') {
-		let value = '';
-
-		if (
-			parent.value.key.type === 'Literal' ||
-			parent.value.key.type === 'StringLiteral' ||
-			parent.value.key.type === 'NumericLiteral'
-		) {
-			value = parent.value.key.value.toString();
-		} else {
-			value = parent.value.key.name;
-		}
-
-		meta.push(value);
-	}
-
-	if (parent && grandParent && grandParent.value.type === 'TemplateLiteral') {
-		const expressionIndex = grandParent.value.expressions.findIndex(
-			(exp: any) => exp.name === path.value.name,
-		);
-		const quasi = grandParent.value.quasis[expressionIndex];
-		const propertyName = (quasi.value.cooked || quasi.value.raw || '')
-			.replace(/\n/g, '')
-			.split(/;|{|}/)
-			.filter((el: string) => !el.match(/\.|\@|\(|\)/))
-			.pop()
-			.split(/:/g)[0]
-			.trim();
-
-		grandParent.value.quasis
-			.slice(0, expressionIndex + 1)
-			.map((q: any) => q.value.cooked)
-			// We reverse so the most nested one is first which we're more likely than not interested in
-			.reverse()
-			.some((str: string) => {
-				const result = /(hover|active|disabled|focus)/.exec(str.toLowerCase());
-
-				if (result) {
-					meta.push(result[0]);
-					return true;
-				}
-			});
-
-		meta.push(propertyName);
-	}
-
-	if (parent && parent.value.type === 'JSXAttribute') {
-		if (
-			!['css', 'styles', 'style', 'fill', 'stopColor', 'startColor'].includes(
-				parent.value.name.name,
-			)
-		) {
-			meta.push(parent.value.name.name);
-		}
-	}
-
-	const closestJSXElement = getClosestDecendantOfType(j, path, j.JSXOpeningElement);
-
-	if (closestJSXElement) {
-		const jsxElementName = closestJSXElement.value.name.name;
-		const nameComponents = jsxElementName.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ');
-
-		meta.push(...nameComponents);
-	}
-
-	if (parent && parent.value.type === 'VariableDeclarator') {
-		meta.push(parent.value.id.name);
-	}
-
-	if (parent) {
-		return getMetaFromAncestors(j, parent, meta);
-	}
-
-	return meta;
-}
-
-export function cleanMeta(meta: string[]): string[] {
-	return meta
-		.reduce<string[]>(
-			(accum, val) => [
-				...accum,
-				...(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map((e) => e.toLowerCase()) : []),
-			],
-			[],
-		)
-		.reduce<string[]>((accum, val) => {
-			const cleanVal = val
-				.replace(/:/g, '')
-				.replace(/,/g, '')
-				.replace('grey', 'neutral')
-				.replace('skeleton', 'neutral')
-				.replace('texts', 'text')
-				.replace('red', 'danger')
-				.replace('error', 'danger')
-				.replace('invalid', 'danger')
-				.replace('removed', 'danger')
-				.replace('removal', 'danger')
-				.replace('remove', 'danger')
-				.replace('focus', 'focused')
-				.replace('valid', 'success')
-				.replace('successful', 'success')
-				.replace('risk', 'warning')
-				.replace('caution', 'warning')
-				.replace('primary', 'bold')
-				.replace('secondary', 'subtle')
-				.replace('hyperlink', 'link')
-				.replace('anchor', 'link')
-				.replace('active', 'pressed')
-				.replace('hover', 'hovered')
-				.replace('card', 'raised')
-				.replace('dragged', 'surface overlay')
-				.replace('dragging', 'surface overlay')
-				.replace('drag', 'surface overlay')
-				.replace('background-color', 'background')
-				.replace('color', 'text')
-				.replace('icons', 'icon')
-				.replace('glyph', 'icon')
-				.replace('stroke', 'border')
-				.replace('border-left', 'border')
-				.replace('border-right', 'border')
-				.replace('border-top', 'border')
-				.replace('border-bottom', 'border')
-				.replace('box-shadow', 'shadow');
-
-			accum.push(...cleanVal.split(' '));
-
-			return accum;
-		}, [])
-		.filter((val) => uniqueWordsFromTokens.includes(val))
-		.reduce<string[]>((accum, val) => {
-			if (!accum.includes(val)) {
-				accum.push(val);
-			}
-
-			return accum;
-		}, []);
-}
+export { getMetaFromAncestors } from './get-meta-from-ancestors';
+export { cleanMeta } from './clean-meta';

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

@@ -1,35 +1,3 @@
-import { isDecendantOfType } from '@hypermod/utils';
-import type { ASTNode, ASTPath, JSCodeshift } from 'jscodeshift';
-
-export function isDecendantOfToken(j: JSCodeshift, path: ASTPath | ASTNode): boolean {
-	if (
-		'type' in path &&
-		path.type === 'CallExpression' &&
-		path.callee.type === 'Identifier' &&
-		path.callee.name === 'token'
-	) {
-		return true;
-	}
-
-	return j(path).closest(j.CallExpression, { callee: { name: 'token' } }).length > 0;
-}
-
-export function isParentOfToken(j: JSCodeshift, path: any): boolean {
-	if (
-		path.type === 'CallExpression' &&
-		path.callee.type === 'Identifier' &&
-		path.callee.name === 'token'
-	) {
-		return true;
-	}
-
-	return j(path).find(j.CallExpression, { callee: { name: 'token' } }).length > 0;
-}
-
-export function getClosestDecendantOfType(j: JSCodeshift, path: ASTPath<any>, type: any): any {
-	if (!isDecendantOfType(j, path, type)) {
-		return;
-	}
-
-	return j(path).closest(type).get();
-}
+export { isDecendantOfToken } from './is-decendant-of-token';
+export { isParentOfToken } from './is-parent-of-token';
+export { getClosestDecendantOfType } from './get-closest-decendant-of-type';

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

@@ -0,0 +1,63 @@
+import { uniqueWordsFromTokens } from '../../utils/unique-words-from-tokens';
+
+export function cleanMeta(meta: string[]): string[] {
+	return meta
+		.reduce<string[]>(
+			(accum, val) => [
+				...accum,
+				...(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map((e) => e.toLowerCase()) : []),
+			],
+			[],
+		)
+		.reduce<string[]>((accum, val) => {
+			const cleanVal = val
+				.replace(/:/g, '')
+				.replace(/,/g, '')
+				.replace('grey', 'neutral')
+				.replace('skeleton', 'neutral')
+				.replace('texts', 'text')
+				.replace('red', 'danger')
+				.replace('error', 'danger')
+				.replace('invalid', 'danger')
+				.replace('removed', 'danger')
+				.replace('removal', 'danger')
+				.replace('remove', 'danger')
+				.replace('focus', 'focused')
+				.replace('valid', 'success')
+				.replace('successful', 'success')
+				.replace('risk', 'warning')
+				.replace('caution', 'warning')
+				.replace('primary', 'bold')
+				.replace('secondary', 'subtle')
+				.replace('hyperlink', 'link')
+				.replace('anchor', 'link')
+				.replace('active', 'pressed')
+				.replace('hover', 'hovered')
+				.replace('card', 'raised')
+				.replace('dragged', 'surface overlay')
+				.replace('dragging', 'surface overlay')
+				.replace('drag', 'surface overlay')
+				.replace('background-color', 'background')
+				.replace('color', 'text')
+				.replace('icons', 'icon')
+				.replace('glyph', 'icon')
+				.replace('stroke', 'border')
+				.replace('border-left', 'border')
+				.replace('border-right', 'border')
+				.replace('border-top', 'border')
+				.replace('border-bottom', 'border')
+				.replace('box-shadow', 'shadow');
+
+			accum.push(...cleanVal.split(' '));
+
+			return accum;
+		}, [])
+		.filter((val) => uniqueWordsFromTokens.includes(val))
+		.reduce<string[]>((accum, val) => {
+			if (!accum.includes(val)) {
+				accum.push(val);
+			}
+
+			return accum;
+		}, []);
+}

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

@@ -1,12 +1,5 @@
-import { legacyColorMixins, legacyColors } from './legacy-colors';
 import { namedColors } from './named-colors';
 
-export const isLegacyColor: (value: string) => boolean = (value: string) =>
-	legacyColors.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)\([^\)]*\)/;
 
@@ -40,7 +33,6 @@ export const isHardCodedColor: (raw: string) => boolean = (raw: string) => {
 	return false;
 };
 
-export function isBoldColor(color: string): boolean {
-	const number = parseInt(color.replace(/^./, ''), 10);
-	return number > 300;
-}
+export { isLegacyColor } from './is-legacy-color';
+export { isLegacyNamedColor } from './is-legacy-named-color';
+export { isBoldColor } from './is-bold-color';

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

@@ -0,0 +1,13 @@
+import { isColorRelatedProperty } from '../../css-to-design-tokens/lib/declaration';
+
+export function containsReplaceableCSSDeclarations(input: string): boolean {
+	const cssPattern = /(\S+)\s*:/g;
+
+	let match;
+	while ((match = cssPattern.exec(input)) !== null) {
+		if (isColorRelatedProperty(match[1])) {
+			return true;
+		}
+	}
+	return false;
+}

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

@@ -1,35 +1,2 @@
-import { isColorRelatedProperty } from '../../css-to-design-tokens/lib/declaration';
-
-export function containsReplaceableCSSDeclarations(input: string): boolean {
-	const cssPattern = /(\S+)\s*:/g;
-
-	let match;
-	while ((match = cssPattern.exec(input)) !== null) {
-		if (isColorRelatedProperty(match[1])) {
-			return true;
-		}
-	}
-	return false;
-}
-
-export function findEndIndexOfCSSExpression(text: string, isAtEndOfInput: boolean): number | null {
-	// CSS expression can end *on* a semicolon or *before* a brace. In either
-	// case we treat the remaining part of the value to cover one character
-	// before that symbol.
-	const semicolonIndex = text.indexOf(';');
-	const braceIndex = text.indexOf('}');
-
-	if (semicolonIndex === -1 && braceIndex === -1) {
-		if (isAtEndOfInput) {
-			return text.length;
-		} else {
-			return null;
-		}
-	} else if (semicolonIndex === -1) {
-		return braceIndex - 1;
-	} else if (braceIndex === -1) {
-		return semicolonIndex - 1;
-	} else {
-		return Math.min(semicolonIndex, braceIndex) - 1;
-	}
-}
+export { containsReplaceableCSSDeclarations } from './contains-replaceable-css-declarations';
+export { findEndIndexOfCSSExpression } from './find-end-index-of-css-expression';

package/codemods/theme-to-design-tokens/utils/find-end-index-of-css-expression.tsx

@@ -0,0 +1,21 @@
+export function findEndIndexOfCSSExpression(text: string, isAtEndOfInput: boolean): number | null {
+	// CSS expression can end *on* a semicolon or *before* a brace. In either
+	// case we treat the remaining part of the value to cover one character
+	// before that symbol.
+	const semicolonIndex = text.indexOf(';');
+	const braceIndex = text.indexOf('}');
+
+	if (semicolonIndex === -1 && braceIndex === -1) {
+		if (isAtEndOfInput) {
+			return text.length;
+		} else {
+			return null;
+		}
+	} else if (semicolonIndex === -1) {
+		return braceIndex - 1;
+	} else if (braceIndex === -1) {
+		return semicolonIndex - 1;
+	} else {
+		return Math.min(semicolonIndex, braceIndex) - 1;
+	}
+}

package/codemods/theme-to-design-tokens/utils/find-first-nonspace-index-after.tsx

@@ -0,0 +1,9 @@
+export function findFirstNonspaceIndexAfter(text: string, index: number): number {
+	const rest = text.slice(index + 1);
+	const indexInRest = rest.search(/\S/);
+	if (indexInRest === -1) {
+		return text.length;
+	} else {
+		return index + 1 + indexInRest;
+	}
+}

package/codemods/theme-to-design-tokens/utils/get-closest-decendant-of-type.tsx

@@ -0,0 +1,10 @@
+import { isDecendantOfType } from '@hypermod/utils';
+import type { ASTPath, JSCodeshift } from 'jscodeshift';
+
+export function getClosestDecendantOfType(j: JSCodeshift, path: ASTPath<any>, type: any): any {
+	if (!isDecendantOfType(j, path, type)) {
+		return;
+	}
+
+	return j(path).closest(type).get();
+}

package/codemods/theme-to-design-tokens/utils/get-meta-from-ancestors.tsx

@@ -0,0 +1,87 @@
+import type core from 'jscodeshift';
+
+import { getClosestDecendantOfType } from './get-closest-decendant-of-type';
+
+export function getMetaFromAncestors(
+	j: core.JSCodeshift,
+	path: any,
+	meta: string[] = [],
+): string[] {
+	const parent = path.parentPath;
+	const grandParent = parent && parent.parentPath;
+
+	if (parent && parent.value.type === 'ObjectProperty') {
+		let value = '';
+
+		if (
+			parent.value.key.type === 'Literal' ||
+			parent.value.key.type === 'StringLiteral' ||
+			parent.value.key.type === 'NumericLiteral'
+		) {
+			value = parent.value.key.value.toString();
+		} else {
+			value = parent.value.key.name;
+		}
+
+		meta.push(value);
+	}
+
+	if (parent && grandParent && grandParent.value.type === 'TemplateLiteral') {
+		const expressionIndex = grandParent.value.expressions.findIndex(
+			(exp: any) => exp.name === path.value.name,
+		);
+		const quasi = grandParent.value.quasis[expressionIndex];
+		const propertyName = (quasi.value.cooked || quasi.value.raw || '')
+			.replace(/\n/g, '')
+			.split(/;|{|}/)
+			.filter((el: string) => !el.match(/\.|\@|\(|\)/))
+			.pop()
+			.split(/:/g)[0]
+			.trim();
+
+		grandParent.value.quasis
+			.slice(0, expressionIndex + 1)
+			.map((q: any) => q.value.cooked)
+			// We reverse so the most nested one is first which we're more likely than not interested in
+			.reverse()
+			.some((str: string) => {
+				const result = /(hover|active|disabled|focus)/.exec(str.toLowerCase());
+
+				if (result) {
+					meta.push(result[0]);
+					return true;
+				}
+			});
+
+		meta.push(propertyName);
+	}
+
+	if (parent && parent.value.type === 'JSXAttribute') {
+		if (
+			!['css', 'styles', 'style', 'fill', 'stopColor', 'startColor'].includes(
+				parent.value.name.name,
+			)
+		) {
+			meta.push(parent.value.name.name);
+		}
+	}
+
+	const closestJSXElement = getClosestDecendantOfType(j, path, j.JSXOpeningElement);
+
+	if (closestJSXElement) {
+		const jsxElementName = closestJSXElement.value.name.name;
+		const nameComponents = jsxElementName.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ');
+
+		meta.push(...nameComponents);
+	}
+
+	if (parent && parent.value.type === 'VariableDeclarator') {
+		meta.push(parent.value.id.name);
+	}
+
+	if (parent) {
+		return getMetaFromAncestors(j, parent, meta);
+	}
+
+	return meta;
+}

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

@@ -0,0 +1,4 @@
+export function isBoldColor(color: string): boolean {
+	const number = parseInt(color.replace(/^./, ''), 10);
+	return number > 300;
+}

package/codemods/theme-to-design-tokens/utils/is-decendant-of-token.tsx

@@ -0,0 +1,14 @@
+import type { ASTNode, ASTPath, JSCodeshift } from 'jscodeshift';
+
+export function isDecendantOfToken(j: JSCodeshift, path: ASTPath | ASTNode): boolean {
+	if (
+		'type' in path &&
+		path.type === 'CallExpression' &&
+		path.callee.type === 'Identifier' &&
+		path.callee.name === 'token'
+	) {
+		return true;
+	}
+
+	return j(path).closest(j.CallExpression, { callee: { name: 'token' } }).length > 0;
+}

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

@@ -0,0 +1,4 @@
+import { legacyColors } from './legacy-colors';
+
+export const isLegacyColor: (value: string) => boolean = (value: string) =>
+	legacyColors.includes(value);

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

@@ -0,0 +1,4 @@
+import { legacyColorMixins } from './legacy-color-mixins';
+
+export const isLegacyNamedColor: (value: string) => boolean = (value: string) =>
+	legacyColorMixins.includes(value);

package/codemods/theme-to-design-tokens/utils/is-parent-of-token.tsx

@@ -0,0 +1,13 @@
+import type { JSCodeshift } from 'jscodeshift';
+
+export function isParentOfToken(j: JSCodeshift, path: any): boolean {
+	if (
+		path.type === 'CallExpression' &&
+		path.callee.type === 'Identifier' &&
+		path.callee.name === 'token'
+	) {
+		return true;
+	}
+
+	return j(path).find(j.CallExpression, { callee: { name: 'token' } }).length > 0;
+}

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

@@ -0,0 +1,2 @@
+export const kebabize: (str: string) => string = (str: string) =>
+	str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());