@atlaskit/tokens 1.36.0 → 1.37.1

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

@@ -0,0 +1,71 @@
+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',
+];
+
+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,
+};
+
+export function isKnownCssVariable(value: string) {
+  return value in knownVariables;
+}
+export function isRawColor(value: string) {
+  return REGEXES.RAW_COLOR.test(value);
+}
+export function isNamedColor(value: string) {
+  return NAMED_COLORS.includes(value);
+}
+export function isGradient(value: string) {
+  return GRADIENT_TYPES.some((gradient) =>
+    value.startsWith(`${gradient}-gradient(`),
+  );
+}
+export function extractBetweenParentheses(value: string) {
+  const match = value.match(/\((.*?)\)/);
+  return match ? match[1] : '';
+}
+export function isLessFunction(value: string) {
+  return LESS_COLOR_FUNCTIONS.some((func) => value.startsWith(`${func}(`));
+}

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

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

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

@@ -0,0 +1,336 @@
+export const knownVariables: Record<string, string[]> = {
+  '--adg3-color-R50': ['danger'],
+  '--adg3-color-R75': ['danger'],
+  '--adg3-color-R100': ['danger'],
+  '--adg3-color-R200': ['danger'],
+  '--adg3-color-R300': ['danger'],
+  '--adg3-color-R400': ['danger'],
+  '--adg3-color-R500': ['danger'],
+  '--adg3-color-Y50': ['warning'],
+  '--adg3-color-Y75': ['warning'],
+  '--adg3-color-Y100': ['warning'],
+  '--adg3-color-Y200': ['warning'],
+  '--adg3-color-Y300': ['warning'],
+  '--adg3-color-Y400': ['warning'],
+  '--adg3-color-Y500': ['warning'],
+  '--adg3-color-G50': ['success'],
+  '--adg3-color-G75': ['success'],
+  '--adg3-color-G100': ['success'],
+  '--adg3-color-G200': ['success'],
+  '--adg3-color-G300': ['success'],
+  '--adg3-color-G400': ['success'],
+  '--adg3-color-G500': ['success'],
+  '--adg3-color-B50': ['brand'],
+  '--adg3-color-B75': ['brand'],
+  '--adg3-color-B100': ['brand'],
+  '--adg3-color-B200': ['brand'],
+  '--adg3-color-B300': ['brand'],
+  '--adg3-color-B400': ['brand'],
+  '--adg3-color-B500': ['brand'],
+  '--adg3-color-P50': ['discovery'],
+  '--adg3-color-P75': ['discovery'],
+  '--adg3-color-P100': ['discovery'],
+  '--adg3-color-P200': ['discovery'],
+  '--adg3-color-P300': ['discovery'],
+  '--adg3-color-P400': ['discovery'],
+  '--adg3-color-P500': ['discovery'],
+  '--adg3-color-T50': ['accent', 'teal'],
+  '--adg3-color-T75': ['accent', 'teal'],
+  '--adg3-color-T100': ['accent', 'teal'],
+  '--adg3-color-T200': ['accent', 'teal'],
+  '--adg3-color-T300': ['accent', 'teal'],
+  '--adg3-color-T400': ['accent', 'teal'],
+  '--adg3-color-T500': ['accent', 'teal'],
+  '--adg3-color-N0': ['inverse'],
+  '--adg3-color-N10': [],
+  '--adg3-color-N20': [],
+  '--adg3-color-N30': [],
+  '--adg3-color-N40': [],
+  '--adg3-color-N50': [],
+  '--adg3-color-N60': [],
+  '--adg3-color-N70': [],
+  '--adg3-color-N80': [],
+  '--adg3-color-N90': [],
+  '--adg3-color-N100': [],
+  '--adg3-color-N200': ['text', 'subtlest'],
+  '--adg3-color-N300': [],
+  '--adg3-color-N400': ['text', 'subtle'],
+  '--adg3-color-N500': [],
+  '--adg3-color-N600': [],
+  '--adg3-color-N700': ['text'],
+  '--adg3-color-N800': ['text'],
+  '--adg3-color-N900': ['text'],
+  '--adg3-color-N10A': [],
+  '--adg3-color-N20A': [],
+  '--adg3-color-N30A': [],
+  '--adg3-color-N40A': [],
+  '--adg3-color-N50A': [],
+  '--adg3-color-N60A': [],
+  '--adg3-color-N70A': [],
+  '--adg3-color-N80A': [],
+  '--adg3-color-N90A': [],
+  '--adg3-color-N100A': [],
+  '--adg3-color-N200A': [],
+  '--adg3-color-N300A': [],
+  '--adg3-color-N400A': [],
+  '--adg3-color-N500A': [],
+  '--adg3-color-N600A': [],
+  '--adg3-color-N700A': [],
+  '--adg3-color-N800A': [],
+  '--adg3-color-DN900': [],
+  '--adg3-color-DN800': [],
+  '--adg3-color-DN700': [],
+  '--adg3-color-DN600': [],
+  '--adg3-color-DN500': [],
+  '--adg3-color-DN400': [],
+  '--adg3-color-DN300': [],
+  '--adg3-color-DN200': [],
+  '--adg3-color-DN100': [],
+  '--adg3-color-DN90': [],
+  '--adg3-color-DN80': [],
+  '--adg3-color-DN70': [],
+  '--adg3-color-DN60': [],
+  '--adg3-color-DN50': [],
+  '--adg3-color-DN40': [],
+  '--adg3-color-DN30': [],
+  '--adg3-color-DN20': [],
+  '--adg3-color-DN10': [],
+  '--adg3-color-DN0': [],
+  '--adg3-color-DN800A': [],
+  '--adg3-color-DN700A': [],
+  '--adg3-color-DN600A': [],
+  '--adg3-color-DN500A': [],
+  '--adg3-color-DN400A': [],
+  '--adg3-color-DN300A': [],
+  '--adg3-color-DN200A': [],
+  '--adg3-color-DN100A': [],
+  '--adg3-color-DN90A': [],
+  '--adg3-color-DN80A': [],
+  '--adg3-color-DN70A': [],
+  '--adg3-color-DN60A': [],
+  '--adg3-color-DN50A': [],
+  '--adg3-color-DN40A': [],
+  '--adg3-color-DN30A': [],
+  '--adg3-color-DN20A': [],
+  '--adg3-color-DN10A': [],
+
+  '--adg3-color-background-light': ['elevation', 'surface'],
+  '--adg3-color-background-dark': ['elevation', 'surface'],
+  '--adg3-color-text-light': ['text'],
+  '--adg3-color-text-dark': ['text'],
+  '--adg3-color-subtleText-light': ['text', 'subtle'],
+  '--adg3-color-subtleText-dark': ['text', 'subtle'],
+  '--adg3-color-placeholderText-light': ['text', 'subtlest'],
+  '--adg3-color-placeholderText-dark': ['text', 'subtlest'],
+  '--adg3-color-heading-light': ['text'],
+  '--adg3-color-heading-dark': ['text'],
+  '--adg3-color-subtleHeading-light': ['text', 'subtle'],
+  '--adg3-color-subtleHeading-dark': ['text', 'subtle'],
+  '--adg3-color-codeBlock-light': ['elevation', 'surface', 'sunken'],
+  '--adg3-color-codeBlock-dark': ['elevation', 'surface', 'sunken'],
+  '--adg3-color-link-light': ['link'],
+  '--adg3-color-link-dark': ['link'],
+  '--adg3-color-linkHover-light': ['link'],
+  '--adg3-color-linkHover-dark': ['link'],
+  '--adg3-color-linkActive-light': ['link', 'pressed'],
+  '--adg3-color-linkActive-dark': ['link', 'pressed'],
+  '--adg3-color-linkOutline-light': ['link', 'focused'],
+  '--adg3-color-linkOutline-dark': ['link', 'focused'],
+  '--adg3-color-primary-light': ['brand'],
+  '--adg3-color-primary-dark': ['brand'],
+  '--adg3-color-blue-light': ['accent', 'subtler', 'blue'],
+  '--adg3-color-blue-dark': ['accent', 'bolder', 'blue'],
+  '--adg3-color-teal-light': ['accent', 'subtler', 'teal'],
+  '--adg3-color-teal-dark': ['accent', 'bolder', 'teal'],
+  '--adg3-color-purple-light': ['accent', 'subtler', 'purple'],
+  '--adg3-color-purple-dark': ['accent', 'bolder', 'purple'],
+  '--adg3-color-red-light': ['accent', 'subtler', 'red'],
+  '--adg3-color-red-dark': ['accent', 'bolder', 'red'],
+  '--adg3-color-yellow-light': ['accent', 'subtler', 'yellow'],
+  '--adg3-color-yellow-dark': ['accent', 'bolder', 'yellow'],
+  '--adg3-color-green-light': ['accent', 'subtler', 'green'],
+  '--adg3-color-green-dark': ['accent', 'bolder', 'green'],
+  '--adg3-color-N20-transparent': [],
+
+  /* Alias variables */
+  '--jpo-theme-color': ['brand'],
+  '--jpo-text-default-color': ['text'],
+  '--jpo-text-secondary-color': ['text', 'subtle'],
+  '--jpo-text-muted-color': ['text', 'disabled'],
+  '--jpo-text-error-color': ['text', 'danger'],
+  '--jpo-bg-default-color': ['elevation', 'surface'],
+  '--jpo-bg-reverse-color': ['background', 'inverse'],
+  '--jpo-bg-warning-color': ['background', 'warning', 'subtle'],
+  '--jpo-bg-dark-color': ['background', 'netural', 'bold'],
+  '--jpo-border-default-color': ['border'],
+  '--jpo-border-secondary-color': ['border', 'subtle'],
+};
+
+export const knownNamedColors: Record<string, string[]> = {
+  aliceblue: ['blue'],
+  antiquewhite: [],
+  aqua: ['teal'],
+  aquamarine: ['teal'],
+  azure: ['teal', 'subtlest'],
+  beige: [],
+  bisque: [],
+  black: [],
+  blanchedalmond: [],
+  blue: ['blue'],
+  blueviolet: ['blue'],
+  brown: [],
+  burlywood: [],
+  cadetblue: ['blue'],
+  chartreuse: [],
+  chocolate: [],
+  coral: [],
+  cornflowerblue: ['blue'],
+  cornsilk: [],
+  crimson: ['red'],
+  cyan: ['accent', 'teal', 'subtle'],
+  darkblue: ['accent', 'blue', 'bold'],
+  darkcyan: ['accent', 'teal', 'bold'],
+  darkgoldenrod: [],
+  darkgray: [],
+  darkgrey: [],
+  darkgreen: ['green'],
+  darkkhaki: [],
+  darkmagenta: ['magenta', 'bold'],
+  darkolivegreen: ['green'],
+  darkorange: [],
+  darkorchid: [],
+  darkred: ['accent', 'red', 'bold'],
+  darksalmon: [],
+  darkseagreen: ['green'],
+  darkslateblue: [],
+  darkslategray: [],
+  darkslategrey: [],
+  darkturquoise: ['teal', 'bold'],
+  darkviolet: ['purple', 'bold'],
+  deeppink: ['magenta'],
+  deepskyblue: ['blue'],
+  dimgray: [],
+  dimgrey: [],
+  dodgerblue: [],
+  firebrick: ['red', 'bold'],
+  floralwhite: [],
+  forestgreen: ['green'],
+  fuchsia: ['magenta', 'subtle'],
+  gainsboro: [],
+  ghostwhite: [],
+  gold: ['yellow'],
+  goldenrod: [],
+  gray: [],
+  grey: [],
+  green: ['green'],
+  greenyellow: [],
+  honeydew: [],
+  hotpink: ['magenta'],
+  indianred: [],
+  indigo: ['purple'],
+  ivory: [],
+  khaki: [],
+  lavender: ['purple'],
+  lavenderblush: ['purple'],
+  lawngreen: ['green'],
+  lemonchiffon: [],
+  lightblue: [],
+  lightcoral: [],
+  lightcyan: [],
+  lightgoldenrodyellow: [],
+  lightgray: [],
+  lightgrey: [],
+  lightgreen: ['green', 'accent'],
+  lightpink: ['magenta'],
+  lightsalmon: ['pink', 'subtler'],
+  lightseagreen: ['green'],
+  lightskyblue: ['blue', 'accent'],
+  lightslategray: [],
+  lightslategrey: [],
+  lightsteelblue: ['blue'],
+  lightyellow: [],
+  lime: ['green', 'subtler'],
+  limegreen: ['green'],
+  linen: [],
+  magenta: ['magenta'],
+  maroon: [],
+  mediumaquamarine: [],
+  mediumblue: [],
+  mediumorchid: [],
+  mediumpurple: [],
+  mediumseagreen: ['green'],
+  mediumslateblue: [],
+  mediumspringgreen: ['green'],
+  mediumturquoise: [],
+  mediumvioletred: [],
+  midnightblue: [],
+  mintcream: [],
+  mistyrose: [],
+  moccasin: [],
+  navajowhite: [],
+  navy: ['blue', 'bold'],
+  oldlace: [],
+  olive: [],
+  olivedrab: [],
+  orange: [],
+  orangered: [],
+  orchid: ['purple'],
+  palegoldenrod: [],
+  palegreen: ['green'],
+  paleturquoise: [],
+  palevioletred: [],
+  papayawhip: [],
+  peachpuff: [],
+  peru: [],
+  pink: ['magenta'],
+  plum: [],
+  powderblue: ['blue', 'subtle'],
+  purple: ['purple'],
+  rebeccapurple: ['purple', 'accent'],
+  red: ['red', 'accent'],
+  rosybrown: [],
+  royalblue: [],
+  saddlebrown: [],
+  salmon: [],
+  sandybrown: [],
+  seagreen: ['green'],
+  seashell: [],
+  sienna: [],
+  silver: [],
+  skyblue: ['blue', 'subtlest'],
+  slateblue: [],
+  slategray: [],
+  slategrey: [],
+  snow: [],
+  springgreen: ['green'],
+  steelblue: ['blue'],
+  tan: [],
+  teal: ['accent', 'teal'],
+  thistle: [],
+  tomato: ['red'],
+  turquoise: [],
+  violet: ['purple'],
+  wheat: [],
+  white: ['elevation', 'surface'],
+  whitesmoke: [],
+  yellow: ['yellow'],
+  yellowgreen: ['yellow'],
+};
+
+export const knownRawColors: Record<string, string[]> = {
+  '#cccccc': ['gray'],
+  '#aaaaaa': ['gray', 'subtlest'],
+  '#bbbbbb': ['gray', 'subtle'],
+  '#ffffff': ['elevation', 'surface'],
+  '#f0f0f0': ['elevation', 'surface'],
+  '#eeeeee': ['elevation', 'surface', 'sunken'],
+  '#ff0000': ['danger'],
+  '#d04437': ['danger'],
+  '#c00c00': ['danger'],
+  '#5243aa': ['discovery'],
+  '#ffc712': ['warning'],
+  '#00f00f': ['brand'],
+  '#3b73af': ['brand'],
+  '#326ca6': ['brand'],
+  '#0052cc': ['brand'],
+};

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

@@ -0,0 +1,173 @@
+import type { Declaration, Node, Rule } from 'postcss';
+
+import { uniqueWordsFromTokens } from '../../utils/tokens';
+
+import { extractCssVarName } from './declaration';
+import {
+  knownNamedColors,
+  knownRawColors,
+  knownVariables,
+} from './legacy-colors';
+
+function filterDuplicateFoundations(meta: string[]) {
+  const foundations = ['text', 'background', 'shadow', 'border'];
+  let hasFoundation = false;
+
+  return meta.filter((val) => {
+    if (!hasFoundation && foundations.includes(val)) {
+      hasFoundation = true;
+      return true;
+    }
+
+    if (hasFoundation && foundations.includes(val)) {
+      return false;
+    }
+
+    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',
+};
+const ADDITIONAL_META: Record<string, string> = {
+  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);
+}
+
+export function getBaseDeclarationMeta(decl: Declaration): string[] {
+  const parentSelectors = getParentSelectors(decl)
+    .split(/\-|\.|\,|\ |\:|\&/)
+    .filter(Boolean);
+
+  return [getPropertyMeta(decl.prop), ...parentSelectors];
+}
+
+function getPropertyMeta(prop: string) {
+  if (prop === 'color') {
+    return 'text';
+  }
+
+  if (prop.startsWith('background')) {
+    return 'background';
+  }
+
+  if (prop.includes('shadow')) {
+    return 'shadow';
+  }
+
+  if (prop.includes('border')) {
+    return 'border';
+  }
+
+  return '';
+}
+
+function isRule(node: Node): node is Rule {
+  return node.type === 'rule';
+}
+
+function getParentSelectors(node: Node): string {
+  if (isRule(node)) {
+    // @ts-expect-error
+    return getParentSelectors(node.parent) + ' ' + node.selector;
+  }
+
+  if (node.parent) {
+    return getParentSelectors(node.parent);
+  }
+
+  return '';
+}
+
+export function getCssVarMeta(cssVariable: string) {
+  const tokenName = extractCssVarName(cssVariable);
+  const meta = knownVariables[tokenName];
+
+  if (!meta || meta.length === 0) {
+    return tokenName.split('-');
+  }
+
+  return meta;
+}
+
+export function getRawColorMeta(rawColor: string) {
+  let cleanColor = rawColor.toLowerCase();
+
+  if (cleanColor.length === 4) {
+    cleanColor = cleanColor + cleanColor.substring(cleanColor.indexOf('#') + 1);
+  }
+
+  return knownRawColors[cleanColor] ?? [];
+}
+
+export function getNamedColorMeta(namedColor: string) {
+  return knownNamedColors[namedColor] ?? [];
+}

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

@@ -0,0 +1,54 @@
+import Search from '../../theme-to-design-tokens/utils/fuzzy-search';
+import { activeTokens } from '../../utils/tokens';
+
+import { cleanMeta } from './meta';
+
+const COLOR_TOKEN_SEARCH_TYPES = [
+  '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;
+}
+
+function tokenToVar(token: string) {
+  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);
+
+  if (!results || results.length === 0) {
+    return 'MISSING_TOKEN';
+  }
+
+  const candidates = results.map((result) => result[1]);
+
+  return tokenToVar(candidates[0]);
+}