@atlaskit/primitives 0.0.1

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@atlaskit/primitives bg styles are generated correctly 1`] = `
+"const backgroundColorMap = {
+  disabled: css({
+    backgroundColor: token('color.background.disabled', '#091e4289'),
+  }),
+  input: css({
+    backgroundColor: token('color.background.input', '#FAFBFC'),
+  }),
+  'inverse.subtle': css({
+    backgroundColor: token('color.background.inverse.subtle', '#00000029'),
+  }),
+  neutral: css({
+    backgroundColor: token('color.background.neutral', '#DFE1E6'),
+  }),
+  'neutral.subtle': css({
+    backgroundColor: token('color.background.neutral.subtle', 'transparent'),
+  }),
+  'neutral.bold': css({
+    backgroundColor: token('color.background.neutral.bold', '#42526E'),
+  }),
+  selected: css({
+    backgroundColor: token('color.background.selected', '#DEEBFF'),
+  }),
+  'selected.bold': css({
+    backgroundColor: token('color.background.selected.bold', '#0052CC'),
+  }),
+  'brand.bold': css({
+    backgroundColor: token('color.background.brand.bold', '#0052CC'),
+  }),
+  danger: css({
+    backgroundColor: token('color.background.danger', '#FFEBE6'),
+  }),
+  'danger.bold': css({
+    backgroundColor: token('color.background.danger.bold', '#DE350B'),
+  }),
+  warning: css({
+    backgroundColor: token('color.background.warning', '#FFFAE6'),
+  }),
+  'warning.bold': css({
+    backgroundColor: token('color.background.warning.bold', '#FFAB00'),
+  }),
+  success: css({
+    backgroundColor: token('color.background.success', '#E3FCEF'),
+  }),
+  'success.bold': css({
+    backgroundColor: token('color.background.success.bold', '#00875A'),
+  }),
+  discovery: css({
+    backgroundColor: token('color.background.discovery', '#EAE6FF'),
+  }),
+  'discovery.bold': css({
+    backgroundColor: token('color.background.discovery.bold', '#5243AA'),
+  }),
+  information: css({
+    backgroundColor: token('color.background.information', '#DEEBFF'),
+  }),
+  'information.bold': css({
+    backgroundColor: token('color.background.information.bold', '#0052CC'),
+  }),
+  'color.blanket': css({
+    backgroundColor: token('color.blanket', '#091e4289'),
+  }),
+  'color.blanket.selected': css({
+    backgroundColor: token('color.blanket.selected', '#388BFF14'),
+  }),
+  'color.blanket.danger': css({
+    backgroundColor: token('color.blanket.danger', '#EF5C4814'),
+  }),
+  'elevation.surface': css({
+    backgroundColor: token('elevation.surface', '#FFFFFF'),
+  }),
+  'elevation.surface.overlay': css({
+    backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
+  }),
+  'elevation.surface.raised': css({
+    backgroundColor: token('elevation.surface.raised', '#FFFFFF'),
+  }),
+  'elevation.surface.sunken': css({
+    backgroundColor: token('elevation.surface.sunken', '#F4F5F7'),
+  }),
+} as const;
+
+export type BackgroundColor = keyof typeof backgroundColorMap;
+"
+`;
+
+exports[`@atlaskit/primitives border styles are generated correctly 1`] = `
+"const borderColorMap = {
+  'color.border': css({
+    borderColor: token('color.border', '#091e4221'),
+  }),
+  disabled: css({
+    borderColor: token('color.border.disabled', '#FAFBFC'),
+  }),
+  focused: css({
+    borderColor: token('color.border.focused', '#4C9AFF'),
+  }),
+  input: css({
+    borderColor: token('color.border.input', '#FAFBFC'),
+  }),
+  inverse: css({
+    borderColor: token('color.border.inverse', '#FFFFFF'),
+  }),
+  selected: css({
+    borderColor: token('color.border.selected', '#0052CC'),
+  }),
+  brand: css({
+    borderColor: token('color.border.brand', '#0052CC'),
+  }),
+  danger: css({
+    borderColor: token('color.border.danger', '#FF5630'),
+  }),
+  warning: css({
+    borderColor: token('color.border.warning', '#FFC400'),
+  }),
+  success: css({
+    borderColor: token('color.border.success', '#00875A'),
+  }),
+  discovery: css({
+    borderColor: token('color.border.discovery', '#998DD9'),
+  }),
+  information: css({
+    borderColor: token('color.border.information', '#0065FF'),
+  }),
+  bold: css({
+    borderColor: token('color.border.bold', '#344563'),
+  }),
+} as const;
+
+export type BorderColor = keyof typeof borderColorMap;
+"
+`;
+
+exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
+"const textColorMap = {
+  'color.text': css({
+    color: token('color.text', '#172B4D'),
+  }),
+  disabled: css({
+    color: token('color.text.disabled', '#A5ADBA'),
+  }),
+  inverse: css({
+    color: token('color.text.inverse', '#FFFFFF'),
+  }),
+  selected: css({
+    color: token('color.text.selected', '#0052CC'),
+  }),
+  brand: css({
+    color: token('color.text.brand', '#0065FF'),
+  }),
+  danger: css({
+    color: token('color.text.danger', '#DE350B'),
+  }),
+  warning: css({
+    color: token('color.text.warning', '#974F0C'),
+  }),
+  'warning.inverse': css({
+    color: token('color.text.warning.inverse', '#172B4D'),
+  }),
+  success: css({
+    color: token('color.text.success', '#006644'),
+  }),
+  discovery: css({
+    color: token('color.text.discovery', '#403294'),
+  }),
+  information: css({
+    color: token('color.text.information', '#0052CC'),
+  }),
+  subtlest: css({
+    color: token('color.text.subtlest', '#7A869A'),
+  }),
+  subtle: css({
+    color: token('color.text.subtle', '#42526E'),
+  }),
+} as const;
+
+export type TextColor = keyof typeof textColorMap;
+"
+`;

package/scripts/__tests__/codegen.test.tsx

@@ -0,0 +1,20 @@
+import { createColorStylesFromTemplate } from '../color-codegen-template';
+describe('@atlaskit/primitives', () => {
+  test('text styles are generated correctly', () => {
+    expect(createColorStylesFromTemplate('text')).toMatchSnapshot();
+  });
+
+  test('bg styles are generated correctly', () => {
+    expect(createColorStylesFromTemplate('background')).toMatchSnapshot();
+  });
+
+  test('border styles are generated correctly', () => {
+    expect(createColorStylesFromTemplate('border')).toMatchSnapshot();
+  });
+
+  test('incorrect config throws', () => {
+    expect(() =>
+      createColorStylesFromTemplate('fizzbuzz' as any),
+    ).toThrowError();
+  });
+});

package/scripts/codegen-styles.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable no-console */
+import { writeFile } from 'fs/promises';
+import { join } from 'path';
+
+import { createPartialSignedArtifact, createSignedArtifact } from '@af/codegen';
+
+import { createColorStylesFromTemplate } from './color-codegen-template';
+import { createColorMapTemplate } from './color-map-template';
+import { createDimensionStylesFromTemplate } from './dimension-codegen-template';
+import { createStylesFromTemplate } from './misc-codegen-template';
+import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
+
+const colorMapOutputFolder = join(__dirname, '../', 'src', 'internal');
+const colorTokensDependencyPath = require.resolve(
+  '../../tokens/src/artifacts/tokens-raw/atlassian-light',
+);
+const spacingTokensDependencyPath = require.resolve(
+  '../../tokens/src/artifacts/tokens-raw/atlassian-spacing',
+);
+
+writeFile(
+  join(colorMapOutputFolder, 'color-map.tsx'),
+  createSignedArtifact(createColorMapTemplate(), 'yarn codegen-styles', {
+    description:
+      'The color map is used to map a background color token to a matching text color that will meet contrast.',
+    dependencies: [colorTokensDependencyPath],
+    outputFolder: colorMapOutputFolder,
+  }),
+).then(() => console.log(join(colorMapOutputFolder, 'color-map.tsx')));
+
+// generate colors
+Promise.all(
+  [{ target: 'box.partial.tsx' }].map(({ target }) => {
+    const targetPath = join(
+      __dirname,
+      '../',
+      'src',
+      'components',
+      'internal',
+      target,
+    );
+
+    const source = createPartialSignedArtifact(
+      options => options.map(createColorStylesFromTemplate).join('\n'),
+      'yarn codegen-styles',
+      {
+        id: 'colors',
+        absoluteFilePath: targetPath,
+        dependencies: [colorTokensDependencyPath],
+      },
+    );
+
+    return writeFile(targetPath, source).then(() =>
+      console.log(`${targetPath} written!`),
+    );
+  }),
+)
+  .then(() => {
+    // generate spacing values
+    return Promise.all(
+      [
+        { path: ['internal', 'box.partial.tsx'] },
+        // { target: 'stack.partial.tsx' },
+        // { target: 'inline.partial.tsx' },
+      ].map(({ path }) => {
+        const targetPath = join(__dirname, '../', 'src', 'components', ...path);
+
+        const source = createPartialSignedArtifact(
+          options => options.map(createSpacingStylesFromTemplate).join('\n'),
+          'yarn codegen-styles',
+          {
+            id: 'spacing',
+            absoluteFilePath: targetPath,
+            dependencies: [spacingTokensDependencyPath],
+          },
+        );
+
+        return writeFile(targetPath, source).then(() =>
+          console.log(`${targetPath} written!`),
+        );
+      }),
+    );
+  })
+  .then(() => {
+    // generate other values
+    return Promise.all(
+      [{ path: ['internal', 'box.partial.tsx'] }].map(({ path }) => {
+        const targetPath = join(__dirname, '../', 'src', 'components', ...path);
+
+        const source = createPartialSignedArtifact(
+          options => options.map(createStylesFromTemplate).join('\n'),
+          'yarn codegen-styles',
+          { id: 'misc', absoluteFilePath: targetPath },
+        );
+
+        return writeFile(targetPath, source).then(() =>
+          console.log(`${targetPath} written!`),
+        );
+      }),
+    );
+  })
+  .then(() => {
+    const targetPath = join(
+      __dirname,
+      '../',
+      'src',
+      'components',
+      'internal',
+      'box.partial.tsx',
+    );
+
+    const source = createPartialSignedArtifact(
+      options => options.map(createDimensionStylesFromTemplate).join('\n'),
+      'yarn codegen-styles',
+      {
+        id: 'dimensions',
+        absoluteFilePath: targetPath,
+      },
+    );
+
+    return writeFile(targetPath, source).then(() =>
+      console.log(`${targetPath} written!`),
+    );
+  });

package/scripts/color-codegen-template.tsx

@@ -0,0 +1,111 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import legacyTokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-legacy-light';
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
+
+import {
+  capitalize,
+  compose,
+  isAccent,
+  isHovered,
+  isPressed,
+  not,
+  pick,
+  ShadowDefintion,
+  tokenToStyle,
+} from './utils';
+
+type Token = {
+  token: string;
+  fallback: string | ShadowDefintion;
+};
+
+// 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),
+  },
+  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('color.blanket'),
+  },
+  border: {
+    objectName: 'borderColor',
+    prefix: 'color.border.',
+    cssProperty: 'borderColor',
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(tokenStyles.border.prefix),
+  },
+  shadow: {
+    objectName: 'shadow',
+    prefix: 'elevation.shadow.',
+    cssProperty: 'boxShadow',
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(tokenStyles.shadow.prefix),
+  },
+} as const;
+
+const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);
+
+const activeTokens = bothTokens
+  .filter(
+    ([t]) =>
+      t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated',
+  )
+  .map(
+    ([t, legacy]): Token => ({
+      token: t.name,
+      fallback: legacy.value as string | ShadowDefintion,
+    }),
+  )
+  .filter(compose(pick('token'), not(isAccent)))
+  .filter(compose(pick('token'), not(isPressed)))
+  .filter(compose(pick('token'), not(isHovered)));
+
+export const createColorStylesFromTemplate = (
+  colorProperty: keyof typeof tokenStyles,
+) => {
+  if (!tokenStyles[colorProperty]) {
+    throw new Error(`[codegen] Unknown option found "${colorProperty}"`);
+  }
+
+  const { prefix, cssProperty, filterFn, objectName } =
+    tokenStyles[colorProperty];
+
+  return (
+    prettier.format(
+      `
+const ${objectName}Map = {
+  ${activeTokens
+    .filter(filterFn)
+    // @ts-ignore
+    .map(t => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
+    .map(t => {
+      // handle the default case eg color.border or color.text
+      const propName = t.token.replace(prefix, '');
+      return `'${propName}': ${tokenToStyle(cssProperty, t.token, t.fallback)}`;
+    })
+    .join(',\n\t')}
+} as const;`,
+      {
+        singleQuote: true,
+        parser: 'typescript',
+        trailingComma: 'all',
+        plugins: [parserTypeScript],
+      },
+    ) +
+    `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
+  );
+};

package/scripts/color-map-template.tsx

@@ -0,0 +1,52 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
+
+import { compose, isAccent, not, pick } from './utils';
+
+type Token = {
+  token: string;
+  fallback: string;
+};
+
+const activeTokens = tokens
+  .filter(
+    t =>
+      t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated',
+  )
+  .map(
+    (t): Token => ({
+      token: t.name,
+      fallback: t.value as string,
+    }),
+  )
+  .filter(compose(pick('token'), not(isAccent)))
+  .filter(t => t.token.includes('background'))
+  .filter(t => t.token.includes('bold'))
+  // @ts-ignore
+  .map(t => ({ ...t, token: t.token.replaceAll('.[default]', '') }));
+
+export const createColorMapTemplate = () => {
+  return prettier.format(
+    `
+export default {
+  ${activeTokens
+    .map(t => {
+      // handle the default case eg color.border or color.text
+      const propName = t.token.replace('color.background.', '');
+      return `'${propName}': '${
+        propName.includes('warning') ? 'warning.inverse' : 'inverse'
+      }'`;
+    })
+    .join(',\n\t')}
+} as const;`,
+    {
+      singleQuote: true,
+      parser: 'typescript',
+      trailingComma: 'all',
+      plugins: [parserTypeScript],
+    },
+  );
+};

package/scripts/dimension-codegen-template.tsx

@@ -0,0 +1,63 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+import { capitalize } from './utils';
+
+const dimensionProperties = {
+  width: {
+    cssProperty: 'width',
+  },
+  height: {
+    cssProperty: 'height',
+  },
+} as const;
+
+// placeholder adapted from packages/design-system/avatar/src/constants.ts
+const dimensions = {
+  'size.100': '16px',
+  'size.200': '24px',
+  'size.300': '32px',
+  'size.400': '40px',
+  'size.500': '48px',
+  'size.600': '96px',
+  'size.1000': '192px',
+  '100%': '100%',
+} as const;
+
+const activeTokens = Object.entries(dimensions).map(([name, value]) => ({
+  name,
+  value,
+}));
+
+export const createDimensionStylesFromTemplate = (
+  spacingProperty: keyof typeof dimensionProperties,
+) => {
+  if (!dimensionProperties[spacingProperty]) {
+    throw new Error(`[codegen] Unknown option found "${spacingProperty}"`);
+  }
+
+  const { cssProperty } = dimensionProperties[spacingProperty];
+
+  return (
+    prettier.format(
+      `
+const ${spacingProperty}Map = {
+  ${activeTokens
+    .sort((a, b) => (a.name < b.name ? -1 : 1))
+    .map(token => {
+      return `'${token.name}': css({ ${cssProperty}: '${token.value}' })`;
+    })
+    .join(',\n\t')}
+};`,
+      {
+        singleQuote: true,
+        trailingComma: 'all',
+        parser: 'typescript',
+        plugins: [parserTypeScript],
+      },
+    ) +
+    `\nexport type ${capitalize(
+      spacingProperty,
+    )} = keyof typeof ${spacingProperty}Map;\n`
+  );
+};

package/scripts/misc-codegen-template.tsx

@@ -0,0 +1,43 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+import { Layer } from '../src/constants';
+
+const styleProperties: Record<'layer', Record<Layer, number>> = {
+  layer: {
+    card: 100,
+    navigation: 200,
+    dialog: 300,
+    layer: 400,
+    blanket: 500,
+    modal: 510,
+    flag: 600,
+    spotlight: 700,
+    tooltip: 800,
+  },
+};
+
+export const createStylesFromTemplate = (
+  property: keyof typeof styleProperties,
+) => {
+  if (!styleProperties[property]) {
+    throw new Error(`[codegen] Unknown option found "${property}"`);
+  }
+
+  return prettier.format(
+    `
+const ${property}Map = {
+  ${Object.keys(styleProperties[property])
+    .map(key => {
+      return `'${key}': css({ zIndex: LAYERS['${key}'] })`;
+    })
+    .join(',\n\t')}
+};`,
+    {
+      singleQuote: true,
+      trailingComma: 'all',
+      parser: 'typescript',
+      plugins: [parserTypeScript],
+    },
+  );
+};

package/scripts/spacing-codegen-template.tsx

@@ -0,0 +1,84 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+import { spacing as tokens } from '@atlaskit/tokens/tokens-raw';
+
+import { capitalize, tokenToStyle } from './utils';
+
+const spacingProperties = {
+  padding: {
+    cssProperty: 'padding',
+  },
+  paddingBlock: {
+    cssProperty: 'paddingBlock',
+  },
+  paddingBlockStart: {
+    cssProperty: 'paddingBlockStart',
+  },
+  paddingBlockEnd: {
+    cssProperty: 'paddingBlockEnd',
+  },
+  paddingInline: {
+    cssProperty: 'paddingInline',
+  },
+  paddingInlineStart: {
+    cssProperty: 'paddingInlineStart',
+  },
+  paddingInlineEnd: {
+    cssProperty: 'paddingInlineEnd',
+  },
+  gap: {
+    cssProperty: 'gap',
+  },
+  columnGap: {
+    cssProperty: 'columnGap',
+  },
+  rowGap: {
+    cssProperty: 'rowGap',
+  },
+} as const;
+
+const onlySpaceTokens = tokens.filter(token => token.name.startsWith('space.'));
+
+const activeTokens = onlySpaceTokens.map(t => ({
+  name: t.name,
+  fallback: t.attributes.pixelValue!,
+}));
+
+export const createSpacingStylesFromTemplate = (
+  spacingProperty: keyof typeof spacingProperties,
+) => {
+  if (!spacingProperties[spacingProperty]) {
+    throw new Error(`[codegen] Unknown option found "${spacingProperty}"`);
+  }
+
+  const { cssProperty } = spacingProperties[spacingProperty];
+
+  return (
+    prettier.format(
+      `
+const ${spacingProperty}Map = {
+  ${activeTokens
+    .sort((a, b) => (a.name < b.name ? -1 : 1))
+    .map(token => {
+      const propName = token.name;
+      return `'${propName}': ${tokenToStyle(
+        cssProperty,
+        token.name,
+        token.fallback,
+      )}`;
+    })
+    .join(',\n\t')}
+};`,
+      {
+        singleQuote: true,
+        trailingComma: 'all',
+        parser: 'typescript',
+        plugins: [parserTypeScript],
+      },
+    ) +
+    `\nexport type ${capitalize(
+      spacingProperty,
+    )} = keyof typeof ${spacingProperty}Map;\n`
+  );
+};