@atlaskit/tokens 1.49.1 → 1.50.0

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

@@ -3,171 +3,165 @@ import type { Declaration, Node, Rule } from 'postcss';
 import { uniqueWordsFromTokens } from '../../utils/tokens';
 
 import { extractCssVarName } from './declaration';
-import {
-  knownNamedColors,
-  knownRawColors,
-  knownVariables,
-} from './legacy-colors';
+import { knownNamedColors, knownRawColors, knownVariables } from './legacy-colors';
 
 function filterDuplicateFoundations(meta: string[]) {
-  const foundations = ['text', 'background', 'shadow', 'border'];
-  let hasFoundation = false;
+	const foundations = ['text', 'background', 'shadow', 'border'];
+	let hasFoundation = false;
 
-  return meta.filter((val) => {
-    if (!hasFoundation && foundations.includes(val)) {
-      hasFoundation = true;
-      return true;
-    }
+	return meta.filter((val) => {
+		if (!hasFoundation && foundations.includes(val)) {
+			hasFoundation = true;
+			return true;
+		}
 
-    if (hasFoundation && foundations.includes(val)) {
-      return false;
-    }
+		if (hasFoundation && foundations.includes(val)) {
+			return false;
+		}
 
-    return true;
-  });
+		return true;
+	});
 }
 
 const REPLACEMENTS: Record<string, string> = {
-  ':': '',
-  ',': '',
-  texts: 'text',
-  error: 'danger',
-  invalid: 'danger',
-  removed: 'danger',
-  removal: 'danger',
-  remove: 'danger',
-  focus: 'focused',
-  valid: 'success',
-  successful: 'success',
-  risk: 'warning',
-  caution: 'warning',
-  warn: 'warning',
-  primary: 'bold',
-  info: 'bold',
-  secondary: 'subtle',
-  hyperlink: 'link',
-  anchor: 'link',
-  active: 'pressed',
-  hover: 'hovered',
-  dragged: 'overlay',
-  dragging: 'overlay',
-  drag: 'overlay',
-  'background-color': 'background',
-  color: 'text',
-  icons: 'icon',
-  arrow: 'icon',
-  glyph: 'icon',
-  stroke: 'border',
-  'border-left': 'border',
-  'border-right': 'border',
-  'border-top': 'border',
-  'border-bottom': 'border',
-  'box-shadow': 'shadow',
+	':': '',
+	',': '',
+	texts: 'text',
+	error: 'danger',
+	invalid: 'danger',
+	removed: 'danger',
+	removal: 'danger',
+	remove: 'danger',
+	focus: 'focused',
+	valid: 'success',
+	successful: 'success',
+	risk: 'warning',
+	caution: 'warning',
+	warn: 'warning',
+	primary: 'bold',
+	info: 'bold',
+	secondary: 'subtle',
+	hyperlink: 'link',
+	anchor: 'link',
+	active: 'pressed',
+	hover: 'hovered',
+	dragged: 'overlay',
+	dragging: 'overlay',
+	drag: 'overlay',
+	'background-color': 'background',
+	color: 'text',
+	icons: 'icon',
+	arrow: 'icon',
+	glyph: 'icon',
+	stroke: 'border',
+	'border-left': 'border',
+	'border-right': 'border',
+	'border-top': 'border',
+	'border-bottom': 'border',
+	'box-shadow': 'shadow',
 };
 const ADDITIONAL_META: Record<string, string> = {
-  grey: 'neutral',
-  red: 'danger',
+	grey: 'neutral',
+	red: 'danger',
 };
 
 export function cleanMeta(meta: string[]) {
-  const cleanMeta = meta
-    .reduce(
-      (accum: string[], val: string) => [
-        ...accum,
-        ...(typeof val === 'string'
-          ? val.split(/(?=[A-Z])/g).map((e) => e.toLowerCase())
-          : []),
-      ],
-      [],
-    )
-    .reduce((accum: string[], val: string) => {
-      if (val in ADDITIONAL_META) {
-        accum.push(val, ADDITIONAL_META[val]);
-      } else {
-        accum.push(val);
-      }
-      accum.push(val in REPLACEMENTS ? REPLACEMENTS[val] : val);
-
-      return accum;
-    }, [])
-    .filter((val: string) => uniqueWordsFromTokens.includes(val))
-    .reduce((accum: string[], val: string) => {
-      if (!accum.includes(val)) {
-        accum.push(val);
-      }
-
-      return accum;
-    }, []);
-
-  return filterDuplicateFoundations(cleanMeta);
+	const cleanMeta = meta
+		.reduce(
+			(accum: string[], val: string) => [
+				...accum,
+				...(typeof val === 'string' ? val.split(/(?=[A-Z])/g).map((e) => e.toLowerCase()) : []),
+			],
+			[],
+		)
+		.reduce((accum: string[], val: string) => {
+			if (val in ADDITIONAL_META) {
+				accum.push(val, ADDITIONAL_META[val]);
+			} else {
+				accum.push(val);
+			}
+			accum.push(val in REPLACEMENTS ? REPLACEMENTS[val] : val);
+
+			return accum;
+		}, [])
+		.filter((val: string) => uniqueWordsFromTokens.includes(val))
+		.reduce((accum: string[], val: string) => {
+			if (!accum.includes(val)) {
+				accum.push(val);
+			}
+
+			return accum;
+		}, []);
+
+	return filterDuplicateFoundations(cleanMeta);
 }
 
 export function getBaseDeclarationMeta(decl: Declaration): string[] {
-  const parentSelectors = getParentSelectors(decl)
-    .split(/\-|\.|\,|\ |\:|\&/)
-    .filter(Boolean);
+	const parentSelectors = getParentSelectors(decl)
+		.split(/\-|\.|\,|\ |\:|\&/)
+		.filter(Boolean);
 
-  return [getPropertyMeta(decl.prop), ...parentSelectors];
+	return [getPropertyMeta(decl.prop), ...parentSelectors];
 }
 
 function getPropertyMeta(prop: string) {
-  if (prop === 'color') {
-    return 'text';
-  }
+	if (prop === 'color') {
+		return 'text';
+	}
 
-  if (prop.startsWith('background')) {
-    return 'background';
-  }
+	if (prop.startsWith('background')) {
+		return 'background';
+	}
 
-  if (prop.includes('shadow')) {
-    return 'shadow';
-  }
+	if (prop.includes('shadow')) {
+		return 'shadow';
+	}
 
-  if (prop.includes('border')) {
-    return 'border';
-  }
+	if (prop.includes('border')) {
+		return 'border';
+	}
 
-  return '';
+	return '';
 }
 
 function isRule(node: Node): node is Rule {
-  return node.type === 'rule';
+	return node.type === 'rule';
 }
 
 function getParentSelectors(node: Node): string {
-  if (isRule(node)) {
-    // @ts-expect-error
-    return getParentSelectors(node.parent) + ' ' + node.selector;
-  }
+	if (isRule(node)) {
+		// @ts-expect-error
+		return getParentSelectors(node.parent) + ' ' + node.selector;
+	}
 
-  if (node.parent) {
-    return getParentSelectors(node.parent);
-  }
+	if (node.parent) {
+		return getParentSelectors(node.parent);
+	}
 
-  return '';
+	return '';
 }
 
 export function getCssVarMeta(cssVariable: string) {
-  const tokenName = extractCssVarName(cssVariable);
-  const meta = knownVariables[tokenName];
+	const tokenName = extractCssVarName(cssVariable);
+	const meta = knownVariables[tokenName];
 
-  if (!meta || meta.length === 0) {
-    return tokenName.split('-');
-  }
+	if (!meta || meta.length === 0) {
+		return tokenName.split('-');
+	}
 
-  return meta;
+	return meta;
 }
 
 export function getRawColorMeta(rawColor: string) {
-  let cleanColor = rawColor.toLowerCase();
+	let cleanColor = rawColor.toLowerCase();
 
-  if (cleanColor.length === 4) {
-    cleanColor = cleanColor + cleanColor.substring(cleanColor.indexOf('#') + 1);
-  }
+	if (cleanColor.length === 4) {
+		cleanColor = cleanColor + cleanColor.substring(cleanColor.indexOf('#') + 1);
+	}
 
-  return knownRawColors[cleanColor] ?? [];
+	return knownRawColors[cleanColor] ?? [];
 }
 
 export function getNamedColorMeta(namedColor: string) {
-  return knownNamedColors[namedColor] ?? [];
+	return knownNamedColors[namedColor] ?? [];
 }

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

@@ -4,51 +4,44 @@ import { activeTokens } from '../../utils/tokens';
 import { cleanMeta } from './meta';
 
 const COLOR_TOKEN_SEARCH_TYPES = [
-  'text',
-  'link',
-  'icon',
-  'border',
-  'background',
-  'blanket',
-  'skeleton',
-  'chart',
-  'surface',
-  'shadow',
+	'text',
+	'link',
+	'icon',
+	'border',
+	'background',
+	'blanket',
+	'skeleton',
+	'chart',
+	'surface',
+	'shadow',
 ];
 
 function filterTokens(meta: string[]) {
-  const commonSearchTypes = COLOR_TOKEN_SEARCH_TYPES.filter((type) =>
-    meta.includes(type),
-  );
-  return commonSearchTypes.length !== 0
-    ? activeTokens.filter((token) =>
-        commonSearchTypes.some(
-          (type) =>
-            token.startsWith(`color.${type}`) ||
-            token.startsWith(`elevation.${type}`),
-        ),
-      )
-    : activeTokens;
+	const commonSearchTypes = COLOR_TOKEN_SEARCH_TYPES.filter((type) => meta.includes(type));
+	return commonSearchTypes.length !== 0
+		? activeTokens.filter((token) =>
+				commonSearchTypes.some(
+					(type) => token.startsWith(`color.${type}`) || token.startsWith(`elevation.${type}`),
+				),
+			)
+		: activeTokens;
 }
 
 function tokenToVar(token: string) {
-  return `--ds-${token
-    .replace(/\./g, '-')
-    .replace('color-', '')
-    .replace('elevation-', '')}`;
+	return `--ds-${token.replace(/\./g, '-').replace('color-', '').replace('elevation-', '')}`;
 }
 
 export default function findToken(meta: string[]) {
-  const filteredTokens = filterTokens(meta);
-  const tokenFuzzySearch = Search(filteredTokens, false);
-  const cleanSearchTerms = cleanMeta(meta).join(' ');
-  const results: string[] = tokenFuzzySearch.get(cleanSearchTerms);
+	const filteredTokens = filterTokens(meta);
+	const tokenFuzzySearch = Search(filteredTokens, false);
+	const cleanSearchTerms = cleanMeta(meta).join(' ');
+	const results: string[] = tokenFuzzySearch.get(cleanSearchTerms);
 
-  if (!results || results.length === 0) {
-    return 'MISSING_TOKEN';
-  }
+	if (!results || results.length === 0) {
+		return 'MISSING_TOKEN';
+	}
 
-  const candidates = results.map((result) => result[1]);
+	const candidates = results.map((result) => result[1]);
 
-  return tokenToVar(candidates[0]);
+	return tokenToVar(candidates[0]);
 }

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

@@ -1,85 +1,83 @@
 import {
-  extractBetweenParentheses,
-  isGradient,
-  isKnownCssVariable,
-  isLessFunction,
-  isNamedColor,
-  isRawColor,
+	extractBetweenParentheses,
+	isGradient,
+	isKnownCssVariable,
+	isLessFunction,
+	isNamedColor,
+	isRawColor,
 } from './colors';
 import { extractCssVarName } from './declaration';
 import { getCssVarMeta, getNamedColorMeta, getRawColorMeta } from './meta';
 import findToken from './tokens';
 
 interface Value {
-  getReplacement: (additionalMeta?: string[]) => string;
-  getMeta: () => string[];
+	getReplacement: (additionalMeta?: string[]) => string;
+	getMeta: () => string[];
 }
 
 export default function parseValue(value: string): Value | null {
-  if (isLessFunction(value)) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Cannot parse - less function detected, would cause compilation error',
-    );
-    return null;
-  }
-  if (isGradient(value)) {
-    return {
-      getReplacement(additionalMeta = []) {
-        const gradientContent = extractBetweenParentheses(value);
-        const values = gradientContent.split(',');
-        const replacedValues = values.map((val) => {
-          const parsedValue = parseValue(val.trim());
-          return parsedValue ? parsedValue.getReplacement(additionalMeta) : val;
-        });
-        return value.replace(gradientContent, replacedValues.join(', '));
-      },
-      getMeta() {
-        const BASE_META: string[] = [];
-        const gradientContent = extractBetweenParentheses(value);
-        const values = gradientContent.split(',');
-        const metas = values.reduce((acc, val) => {
-          const parsedValue = parseValue(val.trim());
-          return parsedValue ? [...acc, ...parsedValue.getMeta()] : acc;
-        }, BASE_META);
-        return metas;
-      },
-    };
-  }
-  if (isKnownCssVariable(extractCssVarName(value))) {
-    return {
-      getReplacement(additionalMeta = []) {
-        const token = findToken([...additionalMeta, ...this.getMeta()]);
-        return `var(${token}, ${value})`;
-      },
-      getMeta() {
-        return getCssVarMeta(value);
-      },
-    };
-  }
-  if (isRawColor(value)) {
-    return {
-      getReplacement(additionalMeta = []) {
-        const token = findToken([...additionalMeta, ...this.getMeta()]);
-        return `var(${token}, ${value})`;
-      },
-      getMeta() {
-        return getRawColorMeta(value);
-      },
-    };
-  }
+	if (isLessFunction(value)) {
+		// eslint-disable-next-line no-console
+		console.warn('Cannot parse - less function detected, would cause compilation error');
+		return null;
+	}
+	if (isGradient(value)) {
+		return {
+			getReplacement(additionalMeta = []) {
+				const gradientContent = extractBetweenParentheses(value);
+				const values = gradientContent.split(',');
+				const replacedValues = values.map((val) => {
+					const parsedValue = parseValue(val.trim());
+					return parsedValue ? parsedValue.getReplacement(additionalMeta) : val;
+				});
+				return value.replace(gradientContent, replacedValues.join(', '));
+			},
+			getMeta() {
+				const BASE_META: string[] = [];
+				const gradientContent = extractBetweenParentheses(value);
+				const values = gradientContent.split(',');
+				const metas = values.reduce((acc, val) => {
+					const parsedValue = parseValue(val.trim());
+					return parsedValue ? [...acc, ...parsedValue.getMeta()] : acc;
+				}, BASE_META);
+				return metas;
+			},
+		};
+	}
+	if (isKnownCssVariable(extractCssVarName(value))) {
+		return {
+			getReplacement(additionalMeta = []) {
+				const token = findToken([...additionalMeta, ...this.getMeta()]);
+				return `var(${token}, ${value})`;
+			},
+			getMeta() {
+				return getCssVarMeta(value);
+			},
+		};
+	}
+	if (isRawColor(value)) {
+		return {
+			getReplacement(additionalMeta = []) {
+				const token = findToken([...additionalMeta, ...this.getMeta()]);
+				return `var(${token}, ${value})`;
+			},
+			getMeta() {
+				return getRawColorMeta(value);
+			},
+		};
+	}
 
-  if (isNamedColor(value)) {
-    return {
-      getReplacement(additionalMeta = []) {
-        const token = findToken([...additionalMeta, ...this.getMeta()]);
-        return `var(${token}, ${value})`;
-      },
-      getMeta() {
-        return getNamedColorMeta(value);
-      },
-    };
-  }
+	if (isNamedColor(value)) {
+		return {
+			getReplacement(additionalMeta = []) {
+				const token = findToken([...additionalMeta, ...this.getMeta()]);
+				return `var(${token}, ${value})`;
+			},
+			getMeta() {
+				return getNamedColorMeta(value);
+			},
+		};
+	}
 
-  return null;
+	return null;
 }