@atlaskit/ds-explorations 1.6.4 → 2.0.0

package/report.api.md

@@ -189,20 +189,20 @@ type ColumnGap = keyof typeof columnGapMap;
 
 // @public
 const columnGapMap: {
-  'scale.0': SerializedStyles;
-  'scale.025': SerializedStyles;
-  'scale.050': SerializedStyles;
-  'scale.075': SerializedStyles;
-  'scale.100': SerializedStyles;
-  'scale.1000': SerializedStyles;
-  'scale.150': SerializedStyles;
-  'scale.200': SerializedStyles;
-  'scale.250': SerializedStyles;
-  'scale.300': SerializedStyles;
-  'scale.400': SerializedStyles;
-  'scale.500': SerializedStyles;
-  'scale.600': SerializedStyles;
-  'scale.800': SerializedStyles;
+  'space.0': SerializedStyles;
+  'space.025': SerializedStyles;
+  'space.050': SerializedStyles;
+  'space.075': SerializedStyles;
+  'space.100': SerializedStyles;
+  'space.1000': SerializedStyles;
+  'space.150': SerializedStyles;
+  'space.200': SerializedStyles;
+  'space.250': SerializedStyles;
+  'space.300': SerializedStyles;
+  'space.400': SerializedStyles;
+  'space.500': SerializedStyles;
+  'space.600': SerializedStyles;
+  'space.800': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -214,6 +214,7 @@ const displayMap: {
   inline: SerializedStyles;
   flex: SerializedStyles;
   inlineFlex: SerializedStyles;
+  inlineBlock: SerializedStyles;
 };
 
 // @public
@@ -321,11 +322,16 @@ const flexWrapMap_2: {
 // @public (undocumented)
 type FontSize = keyof typeof fontSizeMap;
 
-// @public (undocumented)
+// @public
 const fontSizeMap: {
-  '11px': SerializedStyles;
-  '12px': SerializedStyles;
-  '14px': SerializedStyles;
+  'size.050': SerializedStyles;
+  'size.075': SerializedStyles;
+  'size.100': SerializedStyles;
+  'size.200': SerializedStyles;
+  'size.300': SerializedStyles;
+  'size.400': SerializedStyles;
+  'size.500': SerializedStyles;
+  'size.600': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -333,10 +339,10 @@ type FontWeight = keyof typeof fontWeightMap;
 
 // @public (undocumented)
 const fontWeightMap: {
-  '400': SerializedStyles;
-  '500': SerializedStyles;
-  '600': SerializedStyles;
-  '700': SerializedStyles;
+  bold: SerializedStyles;
+  medium: SerializedStyles;
+  regular: SerializedStyles;
+  semibold: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -386,13 +392,12 @@ type LineHeight = keyof typeof lineHeightMap;
 
 // @public (undocumented)
 const lineHeightMap: {
-  '12px': SerializedStyles;
-  '16px': SerializedStyles;
-  '20px': SerializedStyles;
-  '24px': SerializedStyles;
-  '28px': SerializedStyles;
-  '32px': SerializedStyles;
-  '40px': SerializedStyles;
+  'lineHeight.100': SerializedStyles;
+  'lineHeight.200': SerializedStyles;
+  'lineHeight.300': SerializedStyles;
+  'lineHeight.400': SerializedStyles;
+  'lineHeight.500': SerializedStyles;
+  'lineHeight.600': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -412,20 +417,20 @@ type PaddingBlock = keyof typeof paddingBlockMap;
 
 // @public (undocumented)
 const paddingBlockMap: {
-  'scale.0': SerializedStyles;
-  'scale.025': SerializedStyles;
-  'scale.050': SerializedStyles;
-  'scale.075': SerializedStyles;
-  'scale.100': SerializedStyles;
-  'scale.1000': SerializedStyles;
-  'scale.150': SerializedStyles;
-  'scale.200': SerializedStyles;
-  'scale.250': SerializedStyles;
-  'scale.300': SerializedStyles;
-  'scale.400': SerializedStyles;
-  'scale.500': SerializedStyles;
-  'scale.600': SerializedStyles;
-  'scale.800': SerializedStyles;
+  'space.0': SerializedStyles;
+  'space.025': SerializedStyles;
+  'space.050': SerializedStyles;
+  'space.075': SerializedStyles;
+  'space.100': SerializedStyles;
+  'space.1000': SerializedStyles;
+  'space.150': SerializedStyles;
+  'space.200': SerializedStyles;
+  'space.250': SerializedStyles;
+  'space.300': SerializedStyles;
+  'space.400': SerializedStyles;
+  'space.500': SerializedStyles;
+  'space.600': SerializedStyles;
+  'space.800': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -433,38 +438,38 @@ type PaddingInline = keyof typeof paddingInlineMap;
 
 // @public (undocumented)
 const paddingInlineMap: {
-  'scale.0': SerializedStyles;
-  'scale.025': SerializedStyles;
-  'scale.050': SerializedStyles;
-  'scale.075': SerializedStyles;
-  'scale.100': SerializedStyles;
-  'scale.1000': SerializedStyles;
-  'scale.150': SerializedStyles;
-  'scale.200': SerializedStyles;
-  'scale.250': SerializedStyles;
-  'scale.300': SerializedStyles;
-  'scale.400': SerializedStyles;
-  'scale.500': SerializedStyles;
-  'scale.600': SerializedStyles;
-  'scale.800': SerializedStyles;
+  'space.0': SerializedStyles;
+  'space.025': SerializedStyles;
+  'space.050': SerializedStyles;
+  'space.075': SerializedStyles;
+  'space.100': SerializedStyles;
+  'space.1000': SerializedStyles;
+  'space.150': SerializedStyles;
+  'space.200': SerializedStyles;
+  'space.250': SerializedStyles;
+  'space.300': SerializedStyles;
+  'space.400': SerializedStyles;
+  'space.500': SerializedStyles;
+  'space.600': SerializedStyles;
+  'space.800': SerializedStyles;
 };
 
 // @public
 const paddingMap: {
-  'scale.0': SerializedStyles;
-  'scale.025': SerializedStyles;
-  'scale.050': SerializedStyles;
-  'scale.075': SerializedStyles;
-  'scale.100': SerializedStyles;
-  'scale.1000': SerializedStyles;
-  'scale.150': SerializedStyles;
-  'scale.200': SerializedStyles;
-  'scale.250': SerializedStyles;
-  'scale.300': SerializedStyles;
-  'scale.400': SerializedStyles;
-  'scale.500': SerializedStyles;
-  'scale.600': SerializedStyles;
-  'scale.800': SerializedStyles;
+  'space.0': SerializedStyles;
+  'space.025': SerializedStyles;
+  'space.050': SerializedStyles;
+  'space.075': SerializedStyles;
+  'space.100': SerializedStyles;
+  'space.1000': SerializedStyles;
+  'space.150': SerializedStyles;
+  'space.200': SerializedStyles;
+  'space.250': SerializedStyles;
+  'space.300': SerializedStyles;
+  'space.400': SerializedStyles;
+  'space.500': SerializedStyles;
+  'space.600': SerializedStyles;
+  'space.800': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -483,20 +488,20 @@ type RowGap = keyof typeof rowGapMap;
 
 // @public
 const rowGapMap: {
-  'scale.0': SerializedStyles;
-  'scale.025': SerializedStyles;
-  'scale.050': SerializedStyles;
-  'scale.075': SerializedStyles;
-  'scale.100': SerializedStyles;
-  'scale.1000': SerializedStyles;
-  'scale.150': SerializedStyles;
-  'scale.200': SerializedStyles;
-  'scale.250': SerializedStyles;
-  'scale.300': SerializedStyles;
-  'scale.400': SerializedStyles;
-  'scale.500': SerializedStyles;
-  'scale.600': SerializedStyles;
-  'scale.800': SerializedStyles;
+  'space.0': SerializedStyles;
+  'space.025': SerializedStyles;
+  'space.050': SerializedStyles;
+  'space.075': SerializedStyles;
+  'space.100': SerializedStyles;
+  'space.1000': SerializedStyles;
+  'space.150': SerializedStyles;
+  'space.200': SerializedStyles;
+  'space.250': SerializedStyles;
+  'space.300': SerializedStyles;
+  'space.400': SerializedStyles;
+  'space.500': SerializedStyles;
+  'space.600': SerializedStyles;
+  'space.800': SerializedStyles;
 };
 
 // @public (undocumented)

package/scripts/codegen-styles.tsx

@@ -11,6 +11,7 @@ import { createInteractionStylesFromTemplate } from './interaction-codegen';
 import { createStylesFromTemplate } from './misc-codegen-template';
 import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
 import { createSpacingScaleTemplate } from './spacing-scale-template';
+import { createTypographyStylesFromTemplate } from './typography-codegen-template';
 
 const colorMapOutputFolder = join(__dirname, '../', 'src', 'internal');
 const colorTokensDependencyPath = require.resolve(
@@ -19,6 +20,9 @@ const colorTokensDependencyPath = require.resolve(
 const spacingTokensDependencyPath = require.resolve(
   '../../tokens/src/artifacts/tokens-raw/atlassian-spacing',
 );
+const typographyTokensDependencyPath = require.resolve(
+  '../../tokens/src/artifacts/tokens-raw/atlassian-typography',
+);
 
 writeFile(
   join(colorMapOutputFolder, 'color-map.tsx'),
@@ -87,6 +91,29 @@ Promise.all(
       }),
     );
   })
+  .then(() => {
+    // generate typography values
+    return Promise.all(
+      [{ target: 'text.partial.tsx' }].map(({ target }) => {
+        const targetPath = join(__dirname, '../', 'src', 'components', target);
+
+        const source = createPartialSignedArtifact(
+          (options) =>
+            options.map(createTypographyStylesFromTemplate).join('\n'),
+          'yarn codegen-styles',
+          {
+            id: 'typography',
+            absoluteFilePath: targetPath,
+            dependencies: [typographyTokensDependencyPath],
+          },
+        );
+
+        return writeFile(targetPath, source).then(() =>
+          console.log(`${targetPath} written!`),
+        );
+      }),
+    );
+  })
   .then(() => {
     // generate other values
     return Promise.all(

package/scripts/spacing-codegen-template.tsx

@@ -26,11 +26,11 @@ const spacingProperties = {
   },
 } as const;
 
-const onlyScaleTokens = tokens.filter((token) =>
+const onlySpaceTokens = tokens.filter((token) =>
   token.name.startsWith('space.'),
 );
 
-const activeTokens = onlyScaleTokens.map((t) => ({
+const activeTokens = onlySpaceTokens.map((t) => ({
   name: t.name,
   fallback: t.attributes.pixelValue!,
 }));
@@ -51,8 +51,7 @@ const ${spacingProperty}Map = {
   ${activeTokens
     .sort((a, b) => (a.name < b.name ? -1 : 1))
     .map((token) => {
-      // TODO change this when we want to cut a major on the package
-      const propName = token.name.replace('space.', 'scale.');
+      const propName = token.name;
       return `'${propName}': ${tokenToStyle(
         cssProperty,
         token.name,

package/scripts/spacing-scale-template.tsx

@@ -3,13 +3,11 @@ import parserTypeScript from 'prettier/parser-typescript';
 
 import { spacing as tokens } from '@atlaskit/tokens/tokens-raw';
 
-const onlyScaleTokens = tokens.filter((token) =>
-  token.name.startsWith('spacing.scale.'),
+const onlySpaceTokens = tokens.filter((token) =>
+  token.name.startsWith('space.'),
 );
 
-const activeTokens = onlyScaleTokens.map(
-  (t) => `'${t.name.replace('spacing.', '')}'`,
-);
+const activeTokens = onlySpaceTokens.map((t) => `'${t.name}'`);
 
 export const createSpacingScaleTemplate = () => {
   return prettier.format(

package/scripts/typography-codegen-template.tsx

@@ -0,0 +1,80 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+import { typography as tokens } from '@atlaskit/tokens/tokens-raw';
+
+import { capitalize, tokenToStyle } from './utils';
+
+type Token = {
+  name: string;
+  fallback: string;
+};
+
+const typographyProperties = {
+  fontSize: {
+    cssProperty: 'fontSize',
+    prefix: 'font.',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.size'),
+  },
+  fontWeight: {
+    cssProperty: 'fontWeight',
+    prefix: 'font.weight.',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.weight'),
+  },
+  fontFamily: {
+    cssProperty: 'fontFamily',
+    prefix: 'font.family.',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.family'),
+  },
+  lineHeight: {
+    cssProperty: 'lineHeight',
+    prefix: 'font.',
+    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.lineHeight'),
+  },
+} as const;
+
+const activeTokens: Token[] = tokens.map((t) => ({
+  name: t.name,
+  fallback: t.value,
+}));
+
+export const createTypographyStylesFromTemplate = (
+  typographyProperty: keyof typeof typographyProperties,
+) => {
+  if (!typographyProperties[typographyProperty]) {
+    throw new Error(`[codegen] Unknown option found "${typographyProperty}"`);
+  }
+
+  const { cssProperty, prefix, filterFn } =
+    typographyProperties[typographyProperty];
+
+  return (
+    prettier.format(
+      `
+const ${typographyProperty}Map = {
+  ${activeTokens
+    .filter(filterFn)
+    .sort((a, b) => (a.name < b.name ? -1 : 1))
+    .map((token) => {
+      const propName = token.name.replace(prefix, '');
+
+      return `'${propName}': ${tokenToStyle(
+        cssProperty,
+        token.name,
+        token.fallback,
+      )}`;
+    })
+    .join(',\n\t')}
+};`,
+      {
+        singleQuote: true,
+        trailingComma: 'all',
+        parser: 'typescript',
+        plugins: [parserTypeScript],
+      },
+    ) +
+    `\nexport type ${capitalize(
+      typographyProperty,
+    )} = keyof typeof ${typographyProperty}Map;\n`
+  );
+};

package/src/components/__tests__/unit/inline.test.tsx

@@ -9,7 +9,7 @@ describe('Inline component', () => {
 
   it('should render inline', () => {
     const { getByText } = render(
-      <Inline gap="scale.050">
+      <Inline gap="space.050">
         <Text>1</Text>
         <Text>2</Text>
       </Inline>,
@@ -20,7 +20,7 @@ describe('Inline component', () => {
 
   it('should render inline with dividers', () => {
     const { getByText } = render(
-      <Inline gap="scale.050" divider="/">
+      <Inline gap="space.050" divider="/">
         <Text>1</Text>
         <Text>2</Text>
       </Inline>,
@@ -32,7 +32,7 @@ describe('Inline component', () => {
 
   it('should render with a given test id', () => {
     const { getByTestId } = render(
-      <Inline gap="scale.050" testId={testId}>
+      <Inline gap="space.050" testId={testId}>
         <Text>1</Text>
         <Text>2</Text>
       </Inline>,

package/src/components/__tests__/unit/stack.test.tsx

@@ -9,7 +9,7 @@ describe('Stack component', () => {
 
   it('should render stack', () => {
     const { getByText } = render(
-      <Stack gap="scale.050">
+      <Stack gap="space.050">
         <Text>1</Text>
         <Text>2</Text>
       </Stack>,
@@ -20,7 +20,7 @@ describe('Stack component', () => {
 
   it('should render with a given test id', () => {
     const { getByTestId } = render(
-      <Stack gap="scale.050" testId={testId}>
+      <Stack gap="space.050" testId={testId}>
         <Text>1</Text>
         <Text>2</Text>
       </Stack>,

package/src/components/__tests__/unit/text.test.tsx

@@ -19,9 +19,9 @@ describe('Text component', () => {
     expect(getByTestId('test')).toMatchInlineSnapshot(`
       .emotion-0 {
         box-sizing: border-box;
-        margin: 0px;
-        padding: 0px;
-        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
+        margin: var(--ds-space-0, 0px);
+        padding: var(--ds-space-0, 0px);
+        font-family: var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
       }
 
       <span

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-block-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b334cf257241e9d363e5766654784144f199f517de15854538613938b10c0170
-size 11785
+oid sha256:a518ea28041c6ff6d45730720fd9846e52e172e3d7ffba049b54c835f55976e8
+size 12644

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-inline-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:03408bfaadb8361d2ae76af2f5b7df4b3ed05d620319820c977150a113e69ece
-size 23901
+oid sha256:67d9691cd6a9d27e6c88f813838067fbbe3d34359abe735b7248983af671dab9
+size 25854

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c8a8d044a2a68d47ada4fcf7979eed79b16ead8c56e2dda48a3686b768f04297
-size 12063
+oid sha256:79fb431bfe8f5bb4f4398c4f62bd2266cff4fc7573ba081fbb5fb7c28338f2a4
+size 13054

package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-spacing-example-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8e40b6523964f6547d9a5ce9cc870e98846b74eb7ee5bdb4173dcaa110635254
-size 35276
+oid sha256:3ec919ee45580a3e93dca991e3c80a0523a142c3096ad364e622ad4b1fdfad76
+size 37966

package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-spacing-example-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:773445bdd4fceab46cc30012359833933fb2438dee81c378e1316b93aff8e2a5
-size 12715
+oid sha256:7fc46772ba9b71f230f1bfe126adb00e478061bcc01315aeecb1d0634f0c7d85
+size 13156

package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-font-sizes-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8ec560d6acfc02bfcd334754d3d77aa5967861c50da704db4624429489bfca62
-size 4669
+oid sha256:7f58caf93b47b6d2f5061536f06d0a383c012beea2cc7cb350ed92883be1db42
+size 29887

package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-font-weights-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4acd1b4517c70c46c956a077485e56ae98848f260f15a1510d47a816269dda60
-size 2899
+oid sha256:da814bbbb450c5b431a6511a37135d4854f7176854ee6d28b1031136b690d608
+size 7636

package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-line-heights-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:82d6c565306b9c2ca2a101d805d01c90c431d910527ab8777b4bc5b9a8210d26
-size 6473
+oid sha256:06602fa880f4bc95e73b88298edce8993dc95680cb38367d32fb90f88b7c3a34
+size 6445