@atlaskit/primitives 0.1.0 → 0.2.0

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

@@ -2,6 +2,129 @@
 
 exports[`@atlaskit/primitives bg styles are generated correctly 1`] = `
 "const backgroundColorMap = {
+  'accent.red.subtlest': css({
+    backgroundColor: token('color.background.accent.red.subtlest', '#FF8F73'),
+  }),
+  'accent.red.subtler': css({
+    backgroundColor: token('color.background.accent.red.subtler', '#FF7452'),
+  }),
+  'accent.red.subtle': css({
+    backgroundColor: token('color.background.accent.red.subtle', '#DE350B'),
+  }),
+  'accent.red.bolder': css({
+    backgroundColor: token('color.background.accent.red.bolder', '#DE350B'),
+  }),
+  'accent.orange.subtlest': css({
+    backgroundColor: token(
+      'color.background.accent.orange.subtlest',
+      '#F18D13',
+    ),
+  }),
+  'accent.orange.subtler': css({
+    backgroundColor: token('color.background.accent.orange.subtler', '#B65C02'),
+  }),
+  'accent.orange.subtle': css({
+    backgroundColor: token('color.background.accent.orange.subtle', '#5F3811'),
+  }),
+  'accent.orange.bolder': css({
+    backgroundColor: token('color.background.accent.orange.bolder', '#43290F'),
+  }),
+  'accent.yellow.subtlest': css({
+    backgroundColor: token(
+      'color.background.accent.yellow.subtlest',
+      '#FFE380',
+    ),
+  }),
+  'accent.yellow.subtler': css({
+    backgroundColor: token('color.background.accent.yellow.subtler', '#FFC400'),
+  }),
+  'accent.yellow.subtle': css({
+    backgroundColor: token('color.background.accent.yellow.subtle', '#FF991F'),
+  }),
+  'accent.yellow.bolder': css({
+    backgroundColor: token('color.background.accent.yellow.bolder', '#FF991F'),
+  }),
+  'accent.green.subtlest': css({
+    backgroundColor: token('color.background.accent.green.subtlest', '#79F2C0'),
+  }),
+  'accent.green.subtler': css({
+    backgroundColor: token('color.background.accent.green.subtler', '#57D9A3'),
+  }),
+  'accent.green.subtle': css({
+    backgroundColor: token('color.background.accent.green.subtle', '#00875A'),
+  }),
+  'accent.green.bolder': css({
+    backgroundColor: token('color.background.accent.green.bolder', '#00875A'),
+  }),
+  'accent.teal.subtlest': css({
+    backgroundColor: token('color.background.accent.teal.subtlest', '#79E2F2'),
+  }),
+  'accent.teal.subtler': css({
+    backgroundColor: token('color.background.accent.teal.subtler', '#00C7E6'),
+  }),
+  'accent.teal.subtle': css({
+    backgroundColor: token('color.background.accent.teal.subtle', '#00A3BF'),
+  }),
+  'accent.teal.bolder': css({
+    backgroundColor: token('color.background.accent.teal.bolder', '#00A3BF'),
+  }),
+  'accent.blue.subtlest': css({
+    backgroundColor: token('color.background.accent.blue.subtlest', '#4C9AFF'),
+  }),
+  'accent.blue.subtler': css({
+    backgroundColor: token('color.background.accent.blue.subtler', '#2684FF'),
+  }),
+  'accent.blue.subtle': css({
+    backgroundColor: token('color.background.accent.blue.subtle', '#0052CC'),
+  }),
+  'accent.blue.bolder': css({
+    backgroundColor: token('color.background.accent.blue.bolder', '#0052CC'),
+  }),
+  'accent.purple.subtlest': css({
+    backgroundColor: token(
+      'color.background.accent.purple.subtlest',
+      '#998DD9',
+    ),
+  }),
+  'accent.purple.subtler': css({
+    backgroundColor: token('color.background.accent.purple.subtler', '#8777D9'),
+  }),
+  'accent.purple.subtle': css({
+    backgroundColor: token('color.background.accent.purple.subtle', '#5243AA'),
+  }),
+  'accent.purple.bolder': css({
+    backgroundColor: token('color.background.accent.purple.bolder', '#5243AA'),
+  }),
+  'accent.magenta.subtlest': css({
+    backgroundColor: token(
+      'color.background.accent.magenta.subtlest',
+      '#E774BB',
+    ),
+  }),
+  'accent.magenta.subtler': css({
+    backgroundColor: token(
+      'color.background.accent.magenta.subtler',
+      '#E774BB',
+    ),
+  }),
+  'accent.magenta.subtle': css({
+    backgroundColor: token('color.background.accent.magenta.subtle', '#E774BB'),
+  }),
+  'accent.magenta.bolder': css({
+    backgroundColor: token('color.background.accent.magenta.bolder', '#E774BB'),
+  }),
+  'accent.gray.subtlest': css({
+    backgroundColor: token('color.background.accent.gray.subtlest', '#6B778C'),
+  }),
+  'accent.gray.subtler': css({
+    backgroundColor: token('color.background.accent.gray.subtler', '#5E6C84'),
+  }),
+  'accent.gray.subtle': css({
+    backgroundColor: token('color.background.accent.gray.subtle', '#42526E'),
+  }),
+  'accent.gray.bolder': css({
+    backgroundColor: token('color.background.accent.gray.bolder', '#505F79'),
+  }),
   disabled: css({
     backgroundColor: token('color.background.disabled', '#091e4289'),
   }),
@@ -91,6 +214,33 @@ exports[`@atlaskit/primitives border styles are generated correctly 1`] = `
   'color.border': css({
     borderColor: token('color.border', '#091e4221'),
   }),
+  'accent.red': css({
+    borderColor: token('color.border.accent.red', '#FF5630'),
+  }),
+  'accent.orange': css({
+    borderColor: token('color.border.accent.orange', '#D94008'),
+  }),
+  'accent.yellow': css({
+    borderColor: token('color.border.accent.yellow', '#FFAB00'),
+  }),
+  'accent.green': css({
+    borderColor: token('color.border.accent.green', '#36B37E'),
+  }),
+  'accent.teal': css({
+    borderColor: token('color.border.accent.teal', '#00B8D9'),
+  }),
+  'accent.blue': css({
+    borderColor: token('color.border.accent.blue', '#0065FF'),
+  }),
+  'accent.purple': css({
+    borderColor: token('color.border.accent.purple', '#6554C0'),
+  }),
+  'accent.magenta': css({
+    borderColor: token('color.border.accent.magenta', '#CD519D'),
+  }),
+  'accent.gray': css({
+    borderColor: token('color.border.accent.gray', '#5E6C84'),
+  }),
   disabled: css({
     borderColor: token('color.border.disabled', '#FAFBFC'),
   }),
@@ -138,6 +288,60 @@ exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
   'color.text': css({
     color: token('color.text', '#172B4D'),
   }),
+  'accent.red': css({
+    color: token('color.text.accent.red', '#DE350B'),
+  }),
+  'accent.red.bolder': css({
+    color: token('color.text.accent.red.bolder', '#BF2600'),
+  }),
+  'accent.orange': css({
+    color: token('color.text.accent.orange', '#F18D13'),
+  }),
+  'accent.orange.bolder': css({
+    color: token('color.text.accent.orange.bolder', '#B65C02'),
+  }),
+  'accent.yellow': css({
+    color: token('color.text.accent.yellow', '#FF991F'),
+  }),
+  'accent.yellow.bolder': css({
+    color: token('color.text.accent.yellow.bolder', '#FF8B00'),
+  }),
+  'accent.green': css({
+    color: token('color.text.accent.green', '#00875A'),
+  }),
+  'accent.green.bolder': css({
+    color: token('color.text.accent.green.bolder', '#006644'),
+  }),
+  'accent.teal': css({
+    color: token('color.text.accent.teal', '#00A3BF'),
+  }),
+  'accent.teal.bolder': css({
+    color: token('color.text.accent.teal.bolder', '#008DA6'),
+  }),
+  'accent.blue': css({
+    color: token('color.text.accent.blue', '#0052CC'),
+  }),
+  'accent.blue.bolder': css({
+    color: token('color.text.accent.blue.bolder', '#0747A6'),
+  }),
+  'accent.purple': css({
+    color: token('color.text.accent.purple', '#5243AA'),
+  }),
+  'accent.purple.bolder': css({
+    color: token('color.text.accent.purple.bolder', '#403294'),
+  }),
+  'accent.magenta': css({
+    color: token('color.text.accent.magenta', '#E774BB'),
+  }),
+  'accent.magenta.bolder': css({
+    color: token('color.text.accent.magenta.bolder', '#DA62AC'),
+  }),
+  'accent.gray': css({
+    color: token('color.text.accent.gray', '#505F79'),
+  }),
+  'accent.gray.bolder': css({
+    color: token('color.text.accent.gray.bolder', '#172B4D'),
+  }),
   disabled: css({
     color: token('color.text.disabled', '#A5ADBA'),
   }),

package/scripts/codegen-styles.tsx

@@ -18,6 +18,13 @@ const spacingTokensDependencyPath = require.resolve(
   '../../tokens/src/artifacts/tokens-raw/atlassian-spacing',
 );
 
+const primitivesFileNames = {
+  'internal-box': 'base-box.partial.tsx',
+  box: 'box.tsx',
+  inline: 'inline.partial.tsx',
+  stack: 'stack.partial.tsx',
+};
+
 writeFile(
   join(colorMapOutputFolder, 'color-map.tsx'),
   createSignedArtifact(createColorMapTemplate(), 'yarn codegen-styles', {
@@ -30,7 +37,7 @@ writeFile(
 
 // generate colors
 Promise.all(
-  [{ target: 'box.partial.tsx' }].map(({ target }) => {
+  [{ target: primitivesFileNames['internal-box'] }].map(({ target }) => {
     const targetPath = join(
       __dirname,
       '../',
@@ -59,9 +66,9 @@ Promise.all(
     // generate spacing values
     return Promise.all(
       [
-        { path: ['internal', 'box.partial.tsx'] },
-        { path: ['inline.partial.tsx'] },
-        { path: ['stack.partial.tsx'] },
+        { path: ['internal', primitivesFileNames['internal-box']] },
+        { path: [primitivesFileNames.inline] },
+        { path: [primitivesFileNames.stack] },
       ].map(({ path }) => {
         const targetPath = join(__dirname, '../', 'src', 'components', ...path);
 
@@ -84,19 +91,27 @@ Promise.all(
   .then(() => {
     // generate other values
     return Promise.all(
-      [{ path: ['internal', 'box.partial.tsx'] }].map(({ path }) => {
-        const targetPath = join(__dirname, '../', 'src', 'components', ...path);
+      [{ path: ['internal', primitivesFileNames['internal-box']] }].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 },
-        );
+          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!`),
-        );
-      }),
+          return writeFile(targetPath, source).then(() =>
+            console.log(`${targetPath} written!`),
+          );
+        },
+      ),
     );
   })
   .then(() => {
@@ -106,7 +121,7 @@ Promise.all(
       'src',
       'components',
       'internal',
-      'box.partial.tsx',
+      primitivesFileNames['internal-box'],
     );
 
     const source = createPartialSignedArtifact(

package/scripts/color-codegen-template.tsx

@@ -9,7 +9,6 @@ import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
 import {
   capitalize,
   compose,
-  isAccent,
   isHovered,
   isPressed,
   not,
@@ -21,6 +20,7 @@ import {
 type Token = {
   token: string;
   fallback: string | ShadowDefintion;
+  isDeprecated: boolean;
 };
 
 // NB: Fallback CSS variables can be deleted when tokens are no longer behind a feature flag
@@ -60,17 +60,17 @@ const tokenStyles = {
 const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);
 
 const activeTokens = bothTokens
-  .filter(
-    ([t]) =>
-      t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated',
-  )
+  .filter(([t]) => t.attributes.state !== 'deleted')
+  .map(t => {
+    return t;
+  })
   .map(
     ([t, legacy]): Token => ({
       token: t.name,
       fallback: legacy.value as string | ShadowDefintion,
+      isDeprecated: t.attributes.state === 'deprecated',
     }),
   )
-  .filter(compose(pick('token'), not(isAccent)))
   .filter(compose(pick('token'), not(isPressed)))
   .filter(compose(pick('token'), not(isHovered)));
 
@@ -95,7 +95,10 @@ const ${objectName}Map = {
     .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)}`;
+      return `
+        ${t.isDeprecated ? '// @deprecated' : ''}
+        '${propName}': ${tokenToStyle(cssProperty, t.token, t.fallback)}
+      `.trim();
     })
     .join(',\n\t')}
 } as const;`,

package/scripts/dimension-codegen-template.tsx

@@ -10,6 +10,18 @@ const dimensionProperties = {
   height: {
     cssProperty: 'height',
   },
+  minWidth: {
+    cssProperty: 'minWidth',
+  },
+  maxWidth: {
+    cssProperty: 'maxWidth',
+  },
+  minHeight: {
+    cssProperty: 'minHeight',
+  },
+  maxHeight: {
+    cssProperty: 'maxHeight',
+  },
 } as const;
 
 // placeholder adapted from packages/design-system/avatar/src/constants.ts
@@ -43,12 +55,12 @@ export const createDimensionStylesFromTemplate = (
       `
 const ${spacingProperty}Map = {
   ${activeTokens
-    .sort((a, b) => (a.name < b.name ? -1 : 1))
+    .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
     .map(token => {
       return `'${token.name}': css({ ${cssProperty}: '${token.value}' })`;
     })
     .join(',\n\t')}
-};`,
+} as const;`,
       {
         singleQuote: true,
         trailingComma: 'all',

package/scripts/misc-codegen-template.tsx

@@ -32,7 +32,7 @@ const ${property}Map = {
       return `'${key}': css({ zIndex: LAYERS['${key}'] })`;
     })
     .join(',\n\t')}
-};`,
+} as const;`,
     {
       singleQuote: true,
       trailingComma: 'all',

package/scripts/spacing-codegen-template.tsx

@@ -7,37 +7,27 @@ 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',
+    cssProperties: [
+      'padding',
+      'paddingBlock',
+      'paddingBlockStart',
+      'paddingBlockEnd',
+      'paddingInline',
+      'paddingInlineStart',
+      'paddingInlineEnd',
+    ],
   },
   gap: {
-    cssProperty: 'gap',
+    cssProperties: ['gap'],
   },
   space: {
-    cssProperty: 'gap',
+    cssProperties: ['gap'],
   },
   columnGap: {
-    cssProperty: 'columnGap',
+    cssProperties: ['columnGap'],
   },
   rowGap: {
-    cssProperty: 'rowGap',
+    cssProperties: ['rowGap'],
   },
 } as const;
 
@@ -58,27 +48,32 @@ export const createSpacingStylesFromTemplate = (
     throw new Error(`[codegen] Unknown option found "${spacingProperty}"`);
   }
 
-  const { cssProperty } = spacingProperties[spacingProperty];
+  const { cssProperties } = spacingProperties[spacingProperty];
 
   return (
     prettier.format(
       `
-const ${spacingProperty}Map = {
+const ${spacingProperty}Map = Object.fromEntries(
+  [
+    '${cssProperties.join("','")}',
+  ].map((property: string) => [
+    property,
+    {
   ${activeTokens
-    .sort((a, b) => (a.name < b.name ? -1 : 1))
+    .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
     .map(token => {
       const propName =
         spacingProperty === 'space'
           ? token.name.replace(spacingTokenPrefix, '')
           : token.name;
       return `'${propName}': ${tokenToStyle(
-        cssProperty,
+        '[property]' as any,
         token.name,
         token.fallback,
       )}`;
-    })
-    .join(',\n\t')}
-};`,
+    })}
+  } as const,
+]));`,
       {
         singleQuote: true,
         trailingComma: 'all',
@@ -86,8 +81,17 @@ const ${spacingProperty}Map = {
         plugins: [parserTypeScript],
       },
     ) +
-    `\nexport type ${capitalize(
-      spacingProperty,
-    )} = keyof typeof ${spacingProperty}Map;\n`
+    (cssProperties.length === 1
+      ? `\nexport type ${capitalize(
+          spacingProperty,
+        )} = keyof typeof ${spacingProperty}Map.${cssProperties[0]};\n`
+      : cssProperties
+          .map(
+            cssProperty =>
+              `\nexport type ${capitalize(
+                cssProperty,
+              )} = keyof typeof ${spacingProperty}Map.${cssProperty};`,
+          )
+          .join('') + '\n')
   );
 };