@atlaskit/tokens 13.1.0 → 13.1.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/tokens
 
+## 13.1.1
+
+### Patch Changes
+
+- [`e92deb020eae0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e92deb020eae0) -
+  Add `Neutral1200` and `DarkNeutral1200` base palette tokens and update generated raw palette
+  artifacts.
+
 ## 13.1.0
 
 ### Minor Changes

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

@@ -1,4 +1,4 @@
-import { knownNamedColors, knownVariables } from './legacy-colors';
+import { knownNamedColors } from './known-named-colors';
 
 const NAMED_COLORS = Object.keys(knownNamedColors);
 const GRADIENT_TYPES = ['linear', 'radial', 'conic'] as const;
@@ -48,9 +48,6 @@ 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): boolean {
-	return value in knownVariables;
-}
 export function isRawColor(value: string): boolean {
 	return REGEXES.RAW_COLOR.test(value);
 }
@@ -60,10 +57,8 @@ export function isNamedColor(value: string): boolean {
 export function isGradient(value: string): boolean {
 	return GRADIENT_TYPES.some((gradient) => value.startsWith(`${gradient}-gradient(`));
 }
-export function extractBetweenParentheses(value: string): string {
-	const match = value.match(/\((.*?)\)/);
-	return match ? match[1] : '';
-}
 export function isLessFunction(value: string): boolean {
 	return LESS_COLOR_FUNCTIONS.some((func) => value.startsWith(`${func}(`));
 }
+export { isKnownCssVariable } from './is-known-css-variable';
+export { extractBetweenParentheses } from './extract-between-parentheses';

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

@@ -25,19 +25,9 @@ export function isColorRelatedProperty(prop: string): boolean {
 	return COLOR_PROPERTIES.some((property) => property === prop);
 }
 
-export function isCssDeclaration(prop: string): boolean {
-	return prop.startsWith('--');
-}
-
 export function extractCssVarName(prop: string): string {
 	return prop.substring(prop.indexOf('(') + 1).split(/\,|\)/)[0];
 }
-
-export function extractLessVarName(prop: string): string {
-	return prop.substring(1);
-}
-
-export function splitCssValue(value: string): RegExpMatchArray | null {
-	const regex = /(?:[^\s()]+|\((?:[^()]+|\([^()]*\))*\))+/g;
-	return value.match(regex);
-}
+export { isCssDeclaration } from './is-css-declaration';
+export { extractLessVarName } from './extract-less-var-name';
+export { splitCssValue } from './split-css-value';

package/codemods/css-to-design-tokens/lib/extract-between-parentheses.tsx

@@ -0,0 +1,4 @@
+export function extractBetweenParentheses(value: string): string {
+	const match = value.match(/\((.*?)\)/);
+	return match ? match[1] : '';
+}

package/codemods/css-to-design-tokens/lib/extract-less-var-name.tsx

@@ -0,0 +1,3 @@
+export function extractLessVarName(prop: string): string {
+	return prop.substring(1);
+}

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

@@ -0,0 +1,13 @@
+import { extractCssVarName } from './declaration';
+import { knownVariables } from './known-variables';
+
+export function getCssVarMeta(cssVariable: string): string[] {
+	const tokenName = extractCssVarName(cssVariable);
+	const meta = knownVariables[tokenName];
+
+	if (!meta || meta.length === 0) {
+		return tokenName.split('-');
+	}
+
+	return meta;
+}

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

@@ -0,0 +1,5 @@
+import { knownNamedColors } from './known-named-colors';
+
+export function getNamedColorMeta(namedColor: string): string[] {
+	return knownNamedColors[namedColor] ?? [];
+}

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

@@ -0,0 +1,11 @@
+import { knownRawColors } from './known-raw-colors';
+
+export function getRawColorMeta(rawColor: string): string[] {
+	let cleanColor = rawColor.toLowerCase();
+
+	if (cleanColor.length === 4) {
+		cleanColor = cleanColor + cleanColor.substring(cleanColor.indexOf('#') + 1);
+	}
+
+	return knownRawColors[cleanColor] ?? [];
+}

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

@@ -0,0 +1,3 @@
+export function isCssDeclaration(prop: string): boolean {
+	return prop.startsWith('--');
+}

package/codemods/css-to-design-tokens/lib/is-known-css-variable.tsx

@@ -0,0 +1,5 @@
+import { knownVariables } from './known-variables';
+
+export function isKnownCssVariable(value: string): boolean {
+	return value in knownVariables;
+}

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

@@ -0,0 +1,150 @@
+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'],
+};

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

@@ -0,0 +1,17 @@
+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/known-variables.tsx

@@ -0,0 +1,167 @@
+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'],
+};