@atlaskit/ds-explorations 0.0.3 → 0.1.2

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

@@ -3,158 +3,352 @@
 exports[`@atlaskit/design-system-explorations bg styles are generated correctly 1`] = `
 "const backgroundColorMap = {
   disabled: css({
-    backgroundColor: token('color.background.disabled', '#091E4208'),
+    backgroundColor: token('color.background.disabled', 'var(--ds-bg-fb)'),
   }),
   'inverse.subtle': css({
-    backgroundColor: token('color.background.inverse.subtle', '#00000029'),
+    backgroundColor: token(
+      'color.background.inverse.subtle',
+      'var(--ds-bg-fb)',
+    ),
   }),
   input: css({
-    backgroundColor: token('color.background.input', '#FFFFFF'),
+    backgroundColor: token('color.background.input', 'var(--ds-bg-fb)'),
   }),
   neutral: css({
-    backgroundColor: token('color.background.neutral', '#091E420F'),
+    backgroundColor: token('color.background.neutral', 'var(--ds-bg-fb)'),
   }),
   'neutral.subtle': css({
-    backgroundColor: token('color.background.neutral.subtle', '#00000000'),
+    backgroundColor: token(
+      'color.background.neutral.subtle',
+      'var(--ds-bg-fb)',
+    ),
   }),
   'neutral.bold': css({
-    backgroundColor: token('color.background.neutral.bold', '#44546F'),
+    backgroundColor: token('color.background.neutral.bold', 'var(--ds-bg-fb)'),
   }),
   'brand.bold': css({
-    backgroundColor: token('color.background.brand.bold', '#0C66E4'),
+    backgroundColor: token('color.background.brand.bold', 'var(--ds-bg-fb)'),
   }),
   selected: css({
-    backgroundColor: token('color.background.selected', '#E9F2FF'),
+    backgroundColor: token('color.background.selected', 'var(--ds-bg-fb)'),
   }),
   'selected.bold': css({
-    backgroundColor: token('color.background.selected.bold', '#0C66E4'),
+    backgroundColor: token('color.background.selected.bold', 'var(--ds-bg-fb)'),
   }),
   danger: css({
-    backgroundColor: token('color.background.danger', '#FFEDEB'),
+    backgroundColor: token('color.background.danger', 'var(--ds-bg-fb)'),
   }),
   'danger.bold': css({
-    backgroundColor: token('color.background.danger.bold', '#CA3521'),
+    backgroundColor: token('color.background.danger.bold', 'var(--ds-bg-fb)'),
   }),
   warning: css({
-    backgroundColor: token('color.background.warning', '#FFF7D6'),
+    backgroundColor: token('color.background.warning', 'var(--ds-bg-fb)'),
   }),
   'warning.bold': css({
-    backgroundColor: token('color.background.warning.bold', '#E2B203'),
+    backgroundColor: token('color.background.warning.bold', 'var(--ds-bg-fb)'),
   }),
   success: css({
-    backgroundColor: token('color.background.success', '#DFFCF0'),
+    backgroundColor: token('color.background.success', 'var(--ds-bg-fb)'),
   }),
   'success.bold': css({
-    backgroundColor: token('color.background.success.bold', '#1F845A'),
+    backgroundColor: token('color.background.success.bold', 'var(--ds-bg-fb)'),
   }),
   discovery: css({
-    backgroundColor: token('color.background.discovery', '#F3F0FF'),
+    backgroundColor: token('color.background.discovery', 'var(--ds-bg-fb)'),
   }),
   'discovery.bold': css({
-    backgroundColor: token('color.background.discovery.bold', '#6E5DC6'),
+    backgroundColor: token(
+      'color.background.discovery.bold',
+      'var(--ds-bg-fb)',
+    ),
   }),
   information: css({
-    backgroundColor: token('color.background.information', '#E9F2FF'),
+    backgroundColor: token('color.background.information', 'var(--ds-bg-fb)'),
   }),
   'information.bold': css({
-    backgroundColor: token('color.background.information.bold', '#0C66E4'),
+    backgroundColor: token(
+      'color.background.information.bold',
+      'var(--ds-bg-fb)',
+    ),
+  }),
+  'color.blanket': css({
+    backgroundColor: token('color.blanket', 'var(--ds-bg-fb)'),
+  }),
+  'color.blanket.selected': css({
+    backgroundColor: token('color.blanket.selected', 'var(--ds-bg-fb)'),
+  }),
+  'color.blanket.danger': css({
+    backgroundColor: token('color.blanket.danger', 'var(--ds-bg-fb)'),
+  }),
+  'elevation.surface': css({
+    backgroundColor: token('elevation.surface', 'var(--ds-bg-fb)'),
+  }),
+  'elevation.surface.sunken': css({
+    backgroundColor: token('elevation.surface.sunken', 'var(--ds-bg-fb)'),
+  }),
+  'elevation.surface.raised': css({
+    backgroundColor: token('elevation.surface.raised', 'var(--ds-bg-fb)'),
+  }),
+  'elevation.surface.overlay': css({
+    backgroundColor: token('elevation.surface.overlay', 'var(--ds-bg-fb)'),
   }),
 };
 
-type BackgroundColor = keyof typeof backgroundColorMap;
+export type BackgroundColor = keyof typeof backgroundColorMap;
 "
 `;
 
 exports[`@atlaskit/design-system-explorations border styles are generated correctly 1`] = `
 "const borderColorMap = {
-  default: css({
-    borderColor: token('color.border', '#091E4224'),
+  'color.border': css({
+    borderColor: token('color.border', 'var(--ds-bo-fb)'),
   }),
   bold: css({
-    borderColor: token('color.border.bold', '#758195'),
+    borderColor: token('color.border.bold', 'var(--ds-bo-fb)'),
   }),
   inverse: css({
-    borderColor: token('color.border.inverse', '#FFFFFF'),
+    borderColor: token('color.border.inverse', 'var(--ds-bo-fb)'),
   }),
   focused: css({
-    borderColor: token('color.border.focused', '#388BFF'),
+    borderColor: token('color.border.focused', 'var(--ds-bo-fb)'),
   }),
   input: css({
-    borderColor: token('color.border.input', '#091E4224'),
+    borderColor: token('color.border.input', 'var(--ds-bo-fb)'),
   }),
   disabled: css({
-    borderColor: token('color.border.disabled', '#091E420F'),
+    borderColor: token('color.border.disabled', 'var(--ds-bo-fb)'),
   }),
   brand: css({
-    borderColor: token('color.border.brand', '#0C66E4'),
+    borderColor: token('color.border.brand', 'var(--ds-bo-fb)'),
+  }),
+  selected: css({
+    borderColor: token('color.border.selected', 'var(--ds-bo-fb)'),
+  }),
+  danger: css({
+    borderColor: token('color.border.danger', 'var(--ds-bo-fb)'),
+  }),
+  warning: css({
+    borderColor: token('color.border.warning', 'var(--ds-bo-fb)'),
+  }),
+  success: css({
+    borderColor: token('color.border.success', 'var(--ds-bo-fb)'),
+  }),
+  discovery: css({
+    borderColor: token('color.border.discovery', 'var(--ds-bo-fb)'),
+  }),
+  information: css({
+    borderColor: token('color.border.information', 'var(--ds-bo-fb)'),
+  }),
+};
+
+export type BorderColor = keyof typeof borderColorMap;
+"
+`;
+
+exports[`@atlaskit/design-system-explorations border styles are generated correctly 2`] = `
+"const backgroundActiveColorMap = {
+  'inverse.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.inverse.subtle.pressed'),
+    },
+  }),
+  input: css({
+    ':active': { backgroundColor: token('color.background.input.pressed') },
+  }),
+  neutral: css({
+    ':active': { backgroundColor: token('color.background.neutral.pressed') },
+  }),
+  'neutral.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.neutral.subtle.pressed'),
+    },
+  }),
+  'neutral.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.neutral.bold.pressed'),
+    },
+  }),
+  'brand.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.brand.bold.pressed'),
+    },
+  }),
+  selected: css({
+    ':active': { backgroundColor: token('color.background.selected.pressed') },
+  }),
+  'selected.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.selected.bold.pressed'),
+    },
+  }),
+  danger: css({
+    ':active': { backgroundColor: token('color.background.danger.pressed') },
+  }),
+  'danger.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.danger.bold.pressed'),
+    },
+  }),
+  warning: css({
+    ':active': { backgroundColor: token('color.background.warning.pressed') },
+  }),
+  'warning.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.warning.bold.pressed'),
+    },
+  }),
+  success: css({
+    ':active': { backgroundColor: token('color.background.success.pressed') },
+  }),
+  'success.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.success.bold.pressed'),
+    },
+  }),
+  discovery: css({
+    ':active': { backgroundColor: token('color.background.discovery.pressed') },
+  }),
+  'discovery.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.discovery.bold.pressed'),
+    },
+  }),
+  information: css({
+    ':active': {
+      backgroundColor: token('color.background.information.pressed'),
+    },
+  }),
+  'information.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.information.bold.pressed'),
+    },
+  }),
+};
+
+const backgroundHoverColorMap = {
+  'inverse.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.inverse.subtle.hovered'),
+    },
+  }),
+  input: css({
+    ':hover': { backgroundColor: token('color.background.input.hovered') },
+  }),
+  neutral: css({
+    ':hover': { backgroundColor: token('color.background.neutral.hovered') },
+  }),
+  'neutral.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.neutral.subtle.hovered'),
+    },
+  }),
+  'neutral.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.neutral.bold.hovered'),
+    },
+  }),
+  'brand.bold': css({
+    ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
   }),
   selected: css({
-    borderColor: token('color.border.selected', '#0C66E4'),
+    ':hover': { backgroundColor: token('color.background.selected.hovered') },
+  }),
+  'selected.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.selected.bold.hovered'),
+    },
   }),
   danger: css({
-    borderColor: token('color.border.danger', '#E34935'),
+    ':hover': { backgroundColor: token('color.background.danger.hovered') },
+  }),
+  'danger.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.danger.bold.hovered'),
+    },
   }),
   warning: css({
-    borderColor: token('color.border.warning', '#D97008'),
+    ':hover': { backgroundColor: token('color.background.warning.hovered') },
+  }),
+  'warning.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.warning.bold.hovered'),
+    },
   }),
   success: css({
-    borderColor: token('color.border.success', '#22A06B'),
+    ':hover': { backgroundColor: token('color.background.success.hovered') },
+  }),
+  'success.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.success.bold.hovered'),
+    },
   }),
   discovery: css({
-    borderColor: token('color.border.discovery', '#8270DB'),
+    ':hover': { backgroundColor: token('color.background.discovery.hovered') },
+  }),
+  'discovery.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.discovery.bold.hovered'),
+    },
   }),
   information: css({
-    borderColor: token('color.border.information', '#1D7AFC'),
+    ':hover': {
+      backgroundColor: token('color.background.information.hovered'),
+    },
+  }),
+  'information.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.information.bold.hovered'),
+    },
   }),
 };
 
-type BorderColor = keyof typeof borderColorMap;
+type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
 "
 `;
 
 exports[`@atlaskit/design-system-explorations text styles are generated correctly 1`] = `
 "const textColorMap = {
-  default: css({
-    color: token('color.text', '#172B4D'),
+  'color.text': css({
+    color: token('color.text', 'var(--ds-co-fb)'),
   }),
   subtle: css({
-    color: token('color.text.subtle', '#44546F'),
+    color: token('color.text.subtle', 'var(--ds-co-fb)'),
   }),
   subtlest: css({
-    color: token('color.text.subtlest', '#626F86'),
+    color: token('color.text.subtlest', 'var(--ds-co-fb)'),
   }),
   disabled: css({
-    color: token('color.text.disabled', '#091E424F'),
+    color: token('color.text.disabled', 'var(--ds-co-fb)'),
   }),
   inverse: css({
-    color: token('color.text.inverse', '#FFFFFF'),
+    color: token('color.text.inverse', 'var(--ds-co-fb)'),
   }),
   brand: css({
-    color: token('color.text.brand', '#0C66E4'),
+    color: token('color.text.brand', 'var(--ds-co-fb)'),
   }),
   selected: css({
-    color: token('color.text.selected', '#0C66E4'),
+    color: token('color.text.selected', 'var(--ds-co-fb)'),
   }),
   danger: css({
-    color: token('color.text.danger', '#AE2A19'),
+    color: token('color.text.danger', 'var(--ds-co-fb)'),
   }),
   warning: css({
-    color: token('color.text.warning', '#974F0C'),
+    color: token('color.text.warning', 'var(--ds-co-fb)'),
   }),
   'warning.inverse': css({
-    color: token('color.text.warning.inverse', '#172B4D'),
+    color: token('color.text.warning.inverse', 'var(--ds-co-fb)'),
   }),
   success: css({
-    color: token('color.text.success', '#216E4E'),
+    color: token('color.text.success', 'var(--ds-co-fb)'),
   }),
   discovery: css({
-    color: token('color.text.discovery', '#5E4DB2'),
+    color: token('color.text.discovery', 'var(--ds-co-fb)'),
   }),
   information: css({
-    color: token('color.text.information', '#0055CC'),
+    color: token('color.text.information', 'var(--ds-co-fb)'),
   }),
 };
 
-type TextColor = keyof typeof textColorMap;
+export type TextColor = keyof typeof textColorMap;
 "
 `;

package/scripts/__tests__/codegen.test.tsx

@@ -1,4 +1,5 @@
 import { createColorStylesFromTemplate } from '../color-codegen-template';
+import { createInteractionStylesFromTemplate } from '../interaction-codegen';
 describe('@atlaskit/design-system-explorations', () => {
   test('text styles are generated correctly', () => {
     expect(createColorStylesFromTemplate('text')).toMatchSnapshot();
@@ -12,6 +13,10 @@ describe('@atlaskit/design-system-explorations', () => {
     expect(createColorStylesFromTemplate('border')).toMatchSnapshot();
   });
 
+  test('border styles are generated correctly', () => {
+    expect(createInteractionStylesFromTemplate('background')).toMatchSnapshot();
+  });
+
   test('incorrect config throws', () => {
     expect(() =>
       createColorStylesFromTemplate('fizzbuzz' as any),

package/scripts/codegen-styles.tsx

@@ -1,13 +1,23 @@
 /* eslint-disable no-console */
+import { writeFile } from 'fs/promises';
 import { join } from 'path';
 
-import { writeFile } from 'fs-extra';
-
-import { createPartialSignedArtifact } from '@af/codegen';
+import { createPartialSignedArtifact, createSignedArtifact } from '@af/codegen';
 
 import { createColorStylesFromTemplate } from './color-codegen-template';
+import { createColorMapTemplate } from './color-map-template';
+import { createInteractionStylesFromTemplate } from './interaction-codegen';
 import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
 
+writeFile(
+  join(__dirname, '../', 'src', 'internal', 'color-map.tsx'),
+  createSignedArtifact(
+    createColorMapTemplate(),
+    'yarn codegen-styles',
+    'Some artifact',
+  ),
+).then(() => console.log('color-map.tsx written!'));
+
 // generate colors
 Promise.all(
   [{ target: 'text.partial.tsx' }, { target: 'box.partial.tsx' }].map(
@@ -25,19 +35,45 @@ Promise.all(
       );
     },
   ),
-).then(() => {
-  // generate spacing values
-  [{ target: 'box.partial.tsx' }].forEach(({ target }) => {
-    const targetPath = join(__dirname, '../', 'src', 'components', target);
+)
+  .then(() => {
+    // generate spacing values
+    return Promise.all(
+      [
+        { target: 'box.partial.tsx' },
+        { target: 'stack.partial.tsx' },
+        { target: 'inline.partial.tsx' },
+      ].map(({ target }) => {
+        const targetPath = join(__dirname, '../', 'src', 'components', target);
+
+        const source = createPartialSignedArtifact(
+          (options) => options.map(createSpacingStylesFromTemplate).join('\n'),
+          'yarn codegen-styles',
+          { id: 'spacing', absoluteFilePath: targetPath },
+        );
+
+        return writeFile(targetPath, source).then(() =>
+          console.log(`${targetPath} written!`),
+        );
+      }),
+    );
+  })
+  .then(() => {
+    const targetPath = join(
+      __dirname,
+      '../',
+      'src',
+      'components',
+      'interaction-surface.partial.tsx',
+    );
 
     const source = createPartialSignedArtifact(
-      (options) => options.map(createSpacingStylesFromTemplate).join('\n'),
+      (options) => options.map(createInteractionStylesFromTemplate).join('\n'),
       'yarn codegen-styles',
-      { id: 'spacing', absoluteFilePath: targetPath },
+      { id: 'interactions', absoluteFilePath: targetPath },
     );
 
     return writeFile(targetPath, source).then(() =>
       console.log(`${targetPath} written!`),
     );
   });
-});

package/scripts/color-codegen-template.tsx

@@ -15,18 +15,34 @@ import {
   tokenToStyle,
 } from './utils';
 
+type Token = {
+  token: string;
+  fallback: string;
+};
+
+// NB: Fallback CSS variables can be deleted when tokens are no longer behind a feature flag
 const colors = {
   text: {
     prefix: 'color.text.',
     cssProperty: 'color',
+    legacyFallbackCSSProperty: '--ds-co-fb',
+    filterFn: <T extends Token>(t: T) => t.token.startsWith(colors.text.prefix),
   },
   background: {
     prefix: 'color.background.',
     cssProperty: 'backgroundColor',
+    legacyFallbackCSSProperty: '--ds-bg-fb',
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(colors.background.prefix) ||
+      t.token.startsWith('elevation.surface') ||
+      t.token.startsWith('color.blanket'),
   },
   border: {
     prefix: 'color.border.',
     cssProperty: 'borderColor',
+    legacyFallbackCSSProperty: '--ds-bo-fb',
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(colors.border.prefix),
   },
 } as const;
 
@@ -35,12 +51,12 @@ const activeTokens = tokens
     (t) =>
       t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated',
   )
-  .map((t) => {
-    return {
+  .map(
+    (t): Token => ({
       token: t.name,
-      fallback: t.value,
-    };
-  })
+      fallback: t.value as string,
+    }),
+  )
   .filter(compose(pick('token'), not(isAccent)))
   .filter(compose(pick('token'), not(isPressed)))
   .filter(compose(pick('token'), not(isHovered)));
@@ -52,31 +68,37 @@ export const createColorStylesFromTemplate = (
     throw new Error(`[codegen] Unknown option found "${colorProperty}"`);
   }
 
-  const { prefix, cssProperty } = colors[colorProperty];
+  const { prefix, cssProperty, filterFn, legacyFallbackCSSProperty } = colors[
+    colorProperty
+  ];
 
   return (
     prettier.format(
       `
 const ${colorProperty}ColorMap = {
   ${activeTokens
-    .filter(({ token }) => token.includes(prefix))
+    .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 replacedProp = t.token.replace(prefix, '');
-      const propName = !t.token.startsWith(prefix) ? 'default' : replacedProp;
+      const propName = t.token.replace(prefix, '');
       return `'${propName}': ${tokenToStyle(
         cssProperty,
         t.token,
-        t.fallback as string,
+        `"var(${legacyFallbackCSSProperty})"`,
       )}`;
     })
     .join(',\n\t')}
 };`,
-      { singleQuote: true, parser: 'typescript', plugins: [parserTypeScript] },
+      {
+        singleQuote: true,
+        parser: 'typescript',
+        trailingComma: 'all',
+        plugins: [parserTypeScript],
+      },
     ) +
-    `\ntype ${capitalize(
+    `\nexport type ${capitalize(
       colorProperty,
     )}Color = keyof typeof ${colorProperty}ColorMap;\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 const colorMap = {
+  ${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],
+    },
+  );
+};