@atlaskit/primitives 7.0.0 → 7.0.2

package/scripts/border-codegen-template.tsx

@@ -4,64 +4,57 @@ import { shape as tokens } from '@atlaskit/tokens/tokens-raw';
 import { capitalize, constructTokenFunctionCall } from './utils';
 
 type Token = {
-  token: string;
-  fallback: string;
-  isDeprecated: boolean;
+	token: string;
+	fallback: string;
+	isDeprecated: boolean;
 };
 
 const tokenStyles = {
-  width: {
-    objectName: 'borderWidth',
-    filterPrefix: 'border.width',
-    cssProperty: 'borderWidth',
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.width.filterPrefix),
-  },
-  radius: {
-    objectName: 'borderRadius',
-    filterPrefix: 'border.radius',
-    cssProperty: 'borderRadius',
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.radius.filterPrefix),
-  },
+	width: {
+		objectName: 'borderWidth',
+		filterPrefix: 'border.width',
+		cssProperty: 'borderWidth',
+		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.width.filterPrefix),
+	},
+	radius: {
+		objectName: 'borderRadius',
+		filterPrefix: 'border.radius',
+		cssProperty: 'borderRadius',
+		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.radius.filterPrefix),
+	},
 } as const;
 
 const activeTokens = tokens
-  .filter(t => t.attributes.state !== 'deleted')
-  .map(
-    (t): Token => ({
-      token: t.cleanName,
-      fallback: t.value === '4px' ? '3px' : (t.value as string),
-      isDeprecated: t.attributes.state === 'deprecated',
-    }),
-  );
+	.filter((t) => t.attributes.state !== 'deleted')
+	.map(
+		(t): Token => ({
+			token: t.cleanName,
+			fallback: t.value === '4px' ? '3px' : (t.value as string),
+			isDeprecated: t.attributes.state === 'deprecated',
+		}),
+	);
 
-export const createBorderStylesFromTemplate = (
-  property: keyof typeof tokenStyles,
-) => {
-  if (!tokenStyles[property]) {
-    throw new Error(`[codegen] Unknown option found "${property}"`);
-  }
+export const createBorderStylesFromTemplate = (property: keyof typeof tokenStyles) => {
+	if (!tokenStyles[property]) {
+		throw new Error(`[codegen] Unknown option found "${property}"`);
+	}
 
-  const { filterFn, objectName } = tokenStyles[property];
+	const { filterFn, objectName } = tokenStyles[property];
 
-  return (format(
-      `
+	return (
+		format(
+			`
 export const ${objectName}Map = {
   ${activeTokens
-    .filter(filterFn)
-    .map(t => {
-      return `
+		.filter(filterFn)
+		.map((t) => {
+			return `
         ${t.isDeprecated ? '// @deprecated' : ''}
-        '${t.token}': ${constructTokenFunctionCall(
-        t.token,
-        t.fallback,
-      )}`.trim();
-    })
-    .join(',\n\t')}
+        '${t.token}': ${constructTokenFunctionCall(t.token, t.fallback)}`.trim();
+		})
+		.join(',\n\t')}
 } as const;`,
-      'typescript',
-    ) +
-    `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
-  );
+			'typescript',
+		) + `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
+	);
 };

package/scripts/codegen-file-templates/dimensions.tsx

@@ -1,11 +1,11 @@
 export const dimensionMap = {
-  '100%': '100%',
-  'size.100': '1rem',
-  'size.200': '1.5rem',
-  'size.300': '2rem',
-  'size.400': '2.5rem',
-  'size.500': '3rem',
-  'size.600': '6rem',
-  'size.1000': '12rem',
+	'100%': '100%',
+	'size.100': '1rem',
+	'size.200': '1.5rem',
+	'size.300': '2rem',
+	'size.400': '2.5rem',
+	'size.500': '3rem',
+	'size.600': '6rem',
+	'size.1000': '12rem',
 } as const;
 export type Dimension = keyof typeof dimensionMap;

package/scripts/codegen-file-templates/layer.tsx

@@ -1,13 +1,13 @@
 export const layerMap = {
-  card: 100,
-  navigation: 200,
-  dialog: 300,
-  layer: 400,
-  blanket: 500,
-  modal: 510,
-  flag: 600,
-  spotlight: 700,
-  tooltip: 800,
+	card: 100,
+	navigation: 200,
+	dialog: 300,
+	layer: 400,
+	blanket: 500,
+	modal: 510,
+	flag: 600,
+	spotlight: 700,
+	tooltip: 800,
 } as const;
 
 export type Layer = keyof typeof layerMap;

package/scripts/codegen-styles.tsx

@@ -13,122 +13,116 @@ import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
 import { createTypographyStylesFromTemplate } from './typography-codegen-template';
 
 const colorTokensDependencyPath = require.resolve(
-  '../../tokens/src/artifacts/tokens-raw/atlassian-light',
+	'../../tokens/src/artifacts/tokens-raw/atlassian-light',
 );
 const spacingTokensDependencyPath = require.resolve(
-  '../../tokens/src/artifacts/tokens-raw/atlassian-spacing',
+	'../../tokens/src/artifacts/tokens-raw/atlassian-spacing',
 );
 const shapeTokensDependencyPath = require.resolve(
-  '../../tokens/src/artifacts/tokens-raw/atlassian-shape',
+	'../../tokens/src/artifacts/tokens-raw/atlassian-shape',
 );
 
 const templateFiles = readdirSync(join(__dirname, 'codegen-file-templates'), {
-  withFileTypes: true,
+	withFileTypes: true,
 })
-  .filter(item => !item.isDirectory())
-  .map(item => join(__dirname, 'codegen-file-templates', item.name));
+	.filter((item) => !item.isDirectory())
+	.map((item) => join(__dirname, 'codegen-file-templates', item.name));
 
-const targetPath = join(
-  __dirname,
-  '../',
-  'src',
-  'xcss',
-  'style-maps.partial.tsx',
-);
+const targetPath = join(__dirname, '../', 'src', 'xcss', 'style-maps.partial.tsx');
 
 const sourceFns = [
-  // width, height, minWidth, maxWidth, minHeight, maxHeight
-  () =>
-    createPartialSignedArtifact(
-      options => options.map(createStylesFromFileTemplate).join('\n'),
-      'yarn workspace @atlaskit/primitives codegen-styles',
-      {
-        id: 'dimensions',
-        absoluteFilePath: targetPath,
-        dependencies: templateFiles.filter(v => v.includes('dimensions')),
-      },
-    ),
-  // padding*, gap*, inset*
-  () =>
-    createPartialSignedArtifact(
-      createSpacingStylesFromTemplate,
-      'yarn workspace @atlaskit/primitives codegen-styles',
-      {
-        id: 'spacing',
-        absoluteFilePath: targetPath,
-        dependencies: [spacingTokensDependencyPath],
-      },
-    ),
-  // text color, background-color, border-color
-  () =>
-    createPartialSignedArtifact(
-      options => options.map(createColorStylesFromTemplate).join('\n'),
-      'yarn workspace @atlaskit/primitives codegen-styles',
-      {
-        id: 'colors',
-        absoluteFilePath: targetPath,
-        dependencies: [colorTokensDependencyPath],
-      },
-    ),
-  // inverse color map
-  () =>
-    createPartialSignedArtifact(
-      createInverseColorMapTemplate,
-      'yarn workspace @atlaskit/primitives codegen-styles',
-      {
-        id: 'inverse-colors',
-        absoluteFilePath: targetPath,
-        dependencies: [colorTokensDependencyPath],
-      },
-    ),
-  // elevation (opacity, shadow, surface)
-  () =>
-    createPartialSignedArtifact(
-      options => options.map(createElevationStylesFromTemplate).join('\n'),
-      'yarn workspace @atlaskit/primitives codegen-styles',
-      {
-        id: 'elevation',
-        absoluteFilePath: targetPath,
-        dependencies: [colorTokensDependencyPath],
-      },
-    ),
-  // border-width, border-radius
-  () =>
-    createPartialSignedArtifact(
-      options => options.map(createBorderStylesFromTemplate).join('\n'),
-      'yarn workspace @atlaskit/primitives codegen-styles',
-      {
-        id: 'border',
-        absoluteFilePath: targetPath,
-        dependencies: [shapeTokensDependencyPath],
-      },
-    ),
-  // border-color, border-radius, border-width, layer',
-  () =>
-    createPartialSignedArtifact(
-      options => options.map(createStylesFromFileTemplate).join('\n'),
-      'yarn workspace @atlaskit/primitives codegen-styles',
-      {
-        id: 'misc',
-        absoluteFilePath: targetPath,
-        dependencies: templateFiles,
-      },
-    ),
-  // font*, lineheight
-  () =>
-    createPartialSignedArtifact(
-      createTypographyStylesFromTemplate,
-      'yarn workspace @atlaskit/primitives codegen-styles',
-      {
-        id: 'typography',
-        absoluteFilePath: targetPath,
-        dependencies: templateFiles,
-      },
-    ),
+	// width, height, minWidth, maxWidth, minHeight, maxHeight
+	() =>
+		createPartialSignedArtifact(
+			(options) => options.map(createStylesFromFileTemplate).join('\n'),
+			'yarn workspace @atlaskit/primitives codegen-styles',
+			{
+				id: 'dimensions',
+				absoluteFilePath: targetPath,
+				dependencies: templateFiles.filter((v) => v.includes('dimensions')),
+			},
+		),
+	// padding*, gap*, inset*
+	() =>
+		createPartialSignedArtifact(
+			createSpacingStylesFromTemplate,
+			'yarn workspace @atlaskit/primitives codegen-styles',
+			{
+				id: 'spacing',
+				absoluteFilePath: targetPath,
+				dependencies: [spacingTokensDependencyPath],
+			},
+		),
+	// text color, background-color, border-color
+	() =>
+		createPartialSignedArtifact(
+			(options) => options.map(createColorStylesFromTemplate).join('\n'),
+			'yarn workspace @atlaskit/primitives codegen-styles',
+			{
+				id: 'colors',
+				absoluteFilePath: targetPath,
+				dependencies: [colorTokensDependencyPath],
+			},
+		),
+	// inverse color map
+	() =>
+		createPartialSignedArtifact(
+			createInverseColorMapTemplate,
+			'yarn workspace @atlaskit/primitives codegen-styles',
+			{
+				id: 'inverse-colors',
+				absoluteFilePath: targetPath,
+				dependencies: [colorTokensDependencyPath],
+			},
+		),
+	// elevation (opacity, shadow, surface)
+	() =>
+		createPartialSignedArtifact(
+			(options) => options.map(createElevationStylesFromTemplate).join('\n'),
+			'yarn workspace @atlaskit/primitives codegen-styles',
+			{
+				id: 'elevation',
+				absoluteFilePath: targetPath,
+				dependencies: [colorTokensDependencyPath],
+			},
+		),
+	// border-width, border-radius
+	() =>
+		createPartialSignedArtifact(
+			(options) => options.map(createBorderStylesFromTemplate).join('\n'),
+			'yarn workspace @atlaskit/primitives codegen-styles',
+			{
+				id: 'border',
+				absoluteFilePath: targetPath,
+				dependencies: [shapeTokensDependencyPath],
+			},
+		),
+	// border-color, border-radius, border-width, layer',
+	() =>
+		createPartialSignedArtifact(
+			(options) => options.map(createStylesFromFileTemplate).join('\n'),
+			'yarn workspace @atlaskit/primitives codegen-styles',
+			{
+				id: 'misc',
+				absoluteFilePath: targetPath,
+				dependencies: templateFiles,
+			},
+		),
+	// font*, lineheight
+	() =>
+		createPartialSignedArtifact(
+			createTypographyStylesFromTemplate,
+			'yarn workspace @atlaskit/primitives codegen-styles',
+			{
+				id: 'typography',
+				absoluteFilePath: targetPath,
+				dependencies: templateFiles,
+			},
+		),
 ];
 
-sourceFns.forEach(sourceFn => {
-  writeFileSync(targetPath, sourceFn());
+sourceFns.forEach((sourceFn) => {
+	writeFileSync(targetPath, sourceFn());
 });
 
 console.log(`${targetPath} written!`);

package/scripts/color-codegen-template.tsx

@@ -1,96 +1,84 @@
 import format from '@af/formatting/sync';
-import {
-  legacyLightTokens as legacyTokens,
-  light as tokens,
-} from '@atlaskit/tokens/tokens-raw';
+import { legacyLightTokens as legacyTokens, light as tokens } from '@atlaskit/tokens/tokens-raw';
 
-import {
-  capitalize,
-  constructTokenFunctionCall,
-  type ShadowDefinition,
-} from './utils';
+import { capitalize, constructTokenFunctionCall, type ShadowDefinition } from './utils';
 
 type Token = {
-  token: string;
-  fallback: string | ShadowDefinition;
-  isDeprecated: boolean;
+	token: string;
+	fallback: string | ShadowDefinition;
+	isDeprecated: boolean;
 };
 
 // NB: Fallback CSS variables can be deleted when tokens are no longer behind a feature flag
 const tokenStyles = {
-  text: {
-    objectName: 'textColor',
-    prefix: 'color.text.',
-    cssProperty: 'color',
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.text.prefix) ||
-      t.token.startsWith('color.link'),
-  },
-  background: {
-    objectName: 'backgroundColor',
-    prefix: 'color.background.',
-    cssProperty: 'backgroundColor',
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.background.prefix) ||
-      t.token.startsWith('elevation.surface') ||
-      t.token.startsWith('utility.elevation.surface') ||
-      t.token.startsWith('color.blanket'),
-  },
-  border: {
-    objectName: 'borderColor',
-    prefix: 'color.border.',
-    cssProperty: 'borderColor',
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.border.prefix),
-  },
-  fill: {
-    objectName: 'fill',
-    prefix: 'color.icon.',
-    cssProperty: 'fill',
-    filterFn: <T extends Token>(t: T) =>
-      t.token.startsWith(tokenStyles.fill.prefix),
-  },
+	text: {
+		objectName: 'textColor',
+		prefix: 'color.text.',
+		cssProperty: 'color',
+		filterFn: <T extends Token>(t: T) =>
+			t.token.startsWith(tokenStyles.text.prefix) || t.token.startsWith('color.link'),
+	},
+	background: {
+		objectName: 'backgroundColor',
+		prefix: 'color.background.',
+		cssProperty: 'backgroundColor',
+		filterFn: <T extends Token>(t: T) =>
+			t.token.startsWith(tokenStyles.background.prefix) ||
+			t.token.startsWith('elevation.surface') ||
+			t.token.startsWith('utility.elevation.surface') ||
+			t.token.startsWith('color.blanket'),
+	},
+	border: {
+		objectName: 'borderColor',
+		prefix: 'color.border.',
+		cssProperty: 'borderColor',
+		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.border.prefix),
+	},
+	fill: {
+		objectName: 'fill',
+		prefix: 'color.icon.',
+		cssProperty: 'fill',
+		filterFn: <T extends Token>(t: T) => t.token.startsWith(tokenStyles.fill.prefix),
+	},
 } as const;
 
 const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);
 
 const activeTokens = bothTokens
-  .filter(([t]) => t.attributes.state !== 'deleted')
-  .map(t => t)
-  .map(
-    ([t, legacy]): Token => ({
-      token: t.name,
-      fallback: legacy.value as string | ShadowDefinition,
-      isDeprecated: t.attributes.state === 'deprecated',
-    }),
-  );
+	.filter(([t]) => t.attributes.state !== 'deleted')
+	.map((t) => t)
+	.map(
+		([t, legacy]): Token => ({
+			token: t.name,
+			fallback: legacy.value as string | ShadowDefinition,
+			isDeprecated: t.attributes.state === 'deprecated',
+		}),
+	);
 
-export const createColorStylesFromTemplate = (
-  colorProperty: keyof typeof tokenStyles,
-) => {
-  if (!tokenStyles[colorProperty]) {
-    throw new Error(`[codegen] Unknown option found "${colorProperty}"`);
-  }
+export const createColorStylesFromTemplate = (colorProperty: keyof typeof tokenStyles) => {
+	if (!tokenStyles[colorProperty]) {
+		throw new Error(`[codegen] Unknown option found "${colorProperty}"`);
+	}
 
-  const { filterFn, objectName } = tokenStyles[colorProperty];
+	const { filterFn, objectName } = tokenStyles[colorProperty];
 
-  return (format(
-      `
+	return (
+		format(
+			`
 export const ${objectName}Map = {
   ${activeTokens
-    .filter(filterFn)
-    // @ts-ignore
-    .map(t => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
-    .map(t => {
-      return `
+		.filter(filterFn)
+		// @ts-ignore
+		.map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
+		.map((t) => {
+			return `
         ${t.isDeprecated ? '// @deprecated' : ''}
         '${t.token}': ${constructTokenFunctionCall(t.token, t.fallback)}
       `.trim();
-    })
-    .join(',\n\t')}
+		})
+		.join(',\n\t')}
 } as const;`,
-      'typescript',
-    ) +
-    `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
-  );
+			'typescript',
+		) + `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
+	);
 };