@atlaskit/tokens 1.49.1 → 1.51.0

package/README.md

@@ -16,12 +16,14 @@ yarn add @atlaskit/tokens
 
 A babel plugin to optimise performance and support fallbacks for Design System tokens.
 
-It replaces any calls to the `@atlaskit/tokens` token() function with the CSS value the function would return (i.e. var(--token-name) or
-variations with fallbacks).
+It replaces any calls to the `@atlaskit/tokens` token() function with the CSS value the function
+would return (i.e. var(--token-name) or variations with fallbacks).
 
-If there’s no fallback, the plugin (optionally) finds the token’s value from the default Atlassian theme, and sets it as the fallback.
+If there’s no fallback, the plugin (optionally) finds the token’s value from the default Atlassian
+theme, and sets it as the fallback.
 
-If there is a fallback defined in code, it’s inserted into the style (expressions are inserted using template strings).
+If there is a fallback defined in code, it’s inserted into the style (expressions are inserted using
+template strings).
 
 ## Usage
 
@@ -29,13 +31,17 @@ Add the plugin to your babel configuration:
 
 ```
 {
-  "plugins": ["@atlaskit/tokens/babel-plugin"]
+  "plugins": [
+    ["@atlaskit/tokens/babel-plugin", { "shouldUseAutoFallback": true }]
+  ]
 }
 ```
 
 ### Options
 
-Currently the plugin supports one option, `shouldUseAutoFallback`. When enabled, the plugin will fetch the token's value in the default
-Atlassian theme (currently `atlassian-light`) and use it as the fallback value.
+Currently the plugin supports one option, `shouldUseAutoFallback`. When enabled, the plugin will
+fetch the token's value in the default Atlassian theme (currently `atlassian-light`) and use it as
+the fallback value.
 
-This is useful for cases where tokens are in use, but token definitions aren't present in the top-level page CSS.
+This is useful for cases where tokens are in use, but token definitions aren't guaranteed to be
+present in the top-level page CSS.

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

@@ -3,69 +3,67 @@ import { knownNamedColors, knownVariables } from './legacy-colors';
 const NAMED_COLORS = Object.keys(knownNamedColors);
 const GRADIENT_TYPES = ['linear', 'radial', 'conic'] as const;
 const LESS_COLOR_FUNCTIONS = [
-  'lighten',
-  'darken',
-  'saturate',
-  'desaturate',
-  'fadein',
-  'fadeout',
-  'fade',
-  'spin',
-  'mix',
-  'greyscale',
-  'contrast',
-  'multiply',
-  'screen',
-  'overlay',
-  'softlight',
-  'hardlight',
-  'difference',
-  'exclusion',
-  'average',
-  'negation',
-  'tint',
-  'shade',
-  'luma',
-  'hue',
-  'saturation',
-  'lightness',
-  'alpha',
-  'red',
-  'green',
-  'blue',
+	'lighten',
+	'darken',
+	'saturate',
+	'desaturate',
+	'fadein',
+	'fadeout',
+	'fade',
+	'spin',
+	'mix',
+	'greyscale',
+	'contrast',
+	'multiply',
+	'screen',
+	'overlay',
+	'softlight',
+	'hardlight',
+	'difference',
+	'exclusion',
+	'average',
+	'negation',
+	'tint',
+	'shade',
+	'luma',
+	'hue',
+	'saturation',
+	'lightness',
+	'alpha',
+	'red',
+	'green',
+	'blue',
 ];
 
 const REGEXES = {
-  // The CSS regular expression matches CSS variable declarations.
-  // It looks for the string "var(" followed by any characters except a closing parenthesis, and ending with a closing parenthesis.
-  CSS: /var\([^\)]+\)/g,
-  // The RAW_COLOR regular expression matches various CSS color formats including hexadecimal, RGB(A), HSL(A), LAB, LCH, and HWB.
-  // It allows for optional leading and trailing white spaces.
-  // For RGBA and HSLA, it allows any number (including negative numbers and numbers greater than 1) for the alpha channel.
-  // For RGB, HSL, LAB, LCH, and HWB, it expects three comma-separated values.
-  // It also allows optional white spaces around the commas and the values.
-  RAW_COLOR:
-    /^\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,
+	// The CSS regular expression matches CSS variable declarations.
+	// It looks for the string "var(" followed by any characters except a closing parenthesis, and ending with a closing parenthesis.
+	CSS: /var\([^\)]+\)/g,
+	// The RAW_COLOR regular expression matches various CSS color formats including hexadecimal, RGB(A), HSL(A), LAB, LCH, and HWB.
+	// It allows for optional leading and trailing white spaces.
+	// For RGBA and HSLA, it allows any number (including negative numbers and numbers greater than 1) for the alpha channel.
+	// For RGB, HSL, LAB, LCH, and HWB, it expects three comma-separated values.
+	// It also allows optional white spaces around the commas and the values.
+	RAW_COLOR:
+		/^\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) {
-  return value in knownVariables;
+	return value in knownVariables;
 }
 export function isRawColor(value: string) {
-  return REGEXES.RAW_COLOR.test(value);
+	return REGEXES.RAW_COLOR.test(value);
 }
 export function isNamedColor(value: string) {
-  return NAMED_COLORS.includes(value);
+	return NAMED_COLORS.includes(value);
 }
 export function isGradient(value: string) {
-  return GRADIENT_TYPES.some((gradient) =>
-    value.startsWith(`${gradient}-gradient(`),
-  );
+	return GRADIENT_TYPES.some((gradient) => value.startsWith(`${gradient}-gradient(`));
 }
 export function extractBetweenParentheses(value: string) {
-  const match = value.match(/\((.*?)\)/);
-  return match ? match[1] : '';
+	const match = value.match(/\((.*?)\)/);
+	return match ? match[1] : '';
 }
 export function isLessFunction(value: string) {
-  return LESS_COLOR_FUNCTIONS.some((func) => value.startsWith(`${func}(`));
+	return LESS_COLOR_FUNCTIONS.some((func) => value.startsWith(`${func}(`));
 }

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

@@ -1,43 +1,43 @@
 const COLOR_PROPERTIES = [
-  'color',
-  'background',
-  'background-color',
-  'box-shadow',
-  'border',
-  'border-left',
-  'border-right',
-  'border-top',
-  'border-bottom',
-  'border-color',
-  'border-left-color',
-  'border-right-color',
-  'border-top-color',
-  'border-bottom-color',
-  'outline',
-  'outline-color',
-  'accent-color',
-  'caret-color',
-  'scrollbar-color',
-  'text-stroke',
+	'color',
+	'background',
+	'background-color',
+	'box-shadow',
+	'border',
+	'border-left',
+	'border-right',
+	'border-top',
+	'border-bottom',
+	'border-color',
+	'border-left-color',
+	'border-right-color',
+	'border-top-color',
+	'border-bottom-color',
+	'outline',
+	'outline-color',
+	'accent-color',
+	'caret-color',
+	'scrollbar-color',
+	'text-stroke',
 ] as const;
 
 export function isColorRelatedProperty(prop: string) {
-  return COLOR_PROPERTIES.some((property) => property === prop);
+	return COLOR_PROPERTIES.some((property) => property === prop);
 }
 
 export function isCssDeclaration(prop: string) {
-  return prop.startsWith('--');
+	return prop.startsWith('--');
 }
 
 export function extractCssVarName(prop: string) {
-  return prop.substring(prop.indexOf('(') + 1).split(/\,|\)/)[0];
+	return prop.substring(prop.indexOf('(') + 1).split(/\,|\)/)[0];
 }
 
 export function extractLessVarName(prop: string) {
-  return prop.substring(1);
+	return prop.substring(1);
 }
 
 export function splitCssValue(value: string) {
-  const regex = /(?:[^\s()]+|\((?:[^()]+|\([^()]*\))*\))+/g;
-  return value.match(regex);
+	const regex = /(?:[^\s()]+|\((?:[^()]+|\([^()]*\))*\))+/g;
+	return value.match(regex);
 }