@atlaskit/ds-explorations 1.2.1 → 1.3.0

package/dist/types/components/box.partial.d.ts

@@ -46,14 +46,17 @@ declare type BoxPropsBase<T extends ElementType> = {
     borderRadius?: BorderRadius;
     /**
      * Defines the main axis direction.
+     * @deprecated
      */
     flexDirection?: FlexDirection;
     /**
      * Used to align children along the cross axis.
+     * @deprecated
      */
     alignItems?: FlexAlignItems;
     /**
      * Used to align children along the main axis.
+     * @deprecated
      */
     justifyContent?: FlexJustifyContent;
     /**
@@ -77,10 +80,12 @@ declare type BoxPropsBase<T extends ElementType> = {
     paddingInline?: PaddingInline;
     /**
      * Token representing width.
+     * @experimental The existing tokens will be replaced to better reflect dimensions.
      */
     width?: Width;
     /**
      * Token representing height.
+     * @experimental The existing tokens will be replaced to better reflect dimensions.
      */
     height?: Height;
     /**
@@ -124,11 +129,17 @@ declare const borderRadiusMap: {
     rounded: import("@emotion/react").SerializedStyles;
     badge: import("@emotion/react").SerializedStyles;
 };
+/**
+ * @experimental - this is likely to be removed
+ */
 declare type FlexDirection = keyof typeof flexDirectionMap;
 declare const flexDirectionMap: {
     column: import("@emotion/react").SerializedStyles;
     row: import("@emotion/react").SerializedStyles;
 };
+/**
+ * @experimental - this is likely to be removed
+ */
 declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
 declare const flexAlignItemsMap: {
     center: import("@emotion/react").SerializedStyles;
@@ -136,6 +147,9 @@ declare const flexAlignItemsMap: {
     flexStart: import("@emotion/react").SerializedStyles;
     flexEnd: import("@emotion/react").SerializedStyles;
 };
+/**
+ * @experimental - this is likely to be removed
+ */
 declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
 declare const flexJustifyContentMap: {
     center: import("@emotion/react").SerializedStyles;
@@ -161,10 +175,42 @@ declare const overflowMap: {
 };
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
+ * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
+ * @codegenId dimensions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["width", "height"]
+ */
+declare const widthMap: {
+    '100%': import("@emotion/react").SerializedStyles;
+    'size.100': import("@emotion/react").SerializedStyles;
+    'size.1000': import("@emotion/react").SerializedStyles;
+    'size.200': import("@emotion/react").SerializedStyles;
+    'size.300': import("@emotion/react").SerializedStyles;
+    'size.400': import("@emotion/react").SerializedStyles;
+    'size.500': import("@emotion/react").SerializedStyles;
+    'size.600': import("@emotion/react").SerializedStyles;
+};
+export declare type Width = keyof typeof widthMap;
+declare const heightMap: {
+    '100%': import("@emotion/react").SerializedStyles;
+    'size.100': import("@emotion/react").SerializedStyles;
+    'size.1000': import("@emotion/react").SerializedStyles;
+    'size.200': import("@emotion/react").SerializedStyles;
+    'size.300': import("@emotion/react").SerializedStyles;
+    'size.400': import("@emotion/react").SerializedStyles;
+    'size.500': import("@emotion/react").SerializedStyles;
+    'size.600': import("@emotion/react").SerializedStyles;
+};
+export declare type Height = keyof typeof heightMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::41980a62e387c13a99802814a0f33d26>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
+ * @codegenParams ["padding", "paddingBlock", "paddingInline"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const paddingMap: {
@@ -173,6 +219,7 @@ declare const paddingMap: {
     'scale.050': import("@emotion/react").SerializedStyles;
     'scale.075': import("@emotion/react").SerializedStyles;
     'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.1000': import("@emotion/react").SerializedStyles;
     'scale.150': import("@emotion/react").SerializedStyles;
     'scale.200': import("@emotion/react").SerializedStyles;
     'scale.250': import("@emotion/react").SerializedStyles;
@@ -180,6 +227,7 @@ declare const paddingMap: {
     'scale.400': import("@emotion/react").SerializedStyles;
     'scale.500': import("@emotion/react").SerializedStyles;
     'scale.600': import("@emotion/react").SerializedStyles;
+    'scale.800': import("@emotion/react").SerializedStyles;
 };
 export declare type Padding = keyof typeof paddingMap;
 declare const paddingBlockMap: {
@@ -188,6 +236,7 @@ declare const paddingBlockMap: {
     'scale.050': import("@emotion/react").SerializedStyles;
     'scale.075': import("@emotion/react").SerializedStyles;
     'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.1000': import("@emotion/react").SerializedStyles;
     'scale.150': import("@emotion/react").SerializedStyles;
     'scale.200': import("@emotion/react").SerializedStyles;
     'scale.250': import("@emotion/react").SerializedStyles;
@@ -195,6 +244,7 @@ declare const paddingBlockMap: {
     'scale.400': import("@emotion/react").SerializedStyles;
     'scale.500': import("@emotion/react").SerializedStyles;
     'scale.600': import("@emotion/react").SerializedStyles;
+    'scale.800': import("@emotion/react").SerializedStyles;
 };
 export declare type PaddingBlock = keyof typeof paddingBlockMap;
 declare const paddingInlineMap: {
@@ -203,6 +253,7 @@ declare const paddingInlineMap: {
     'scale.050': import("@emotion/react").SerializedStyles;
     'scale.075': import("@emotion/react").SerializedStyles;
     'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.1000': import("@emotion/react").SerializedStyles;
     'scale.150': import("@emotion/react").SerializedStyles;
     'scale.200': import("@emotion/react").SerializedStyles;
     'scale.250': import("@emotion/react").SerializedStyles;
@@ -210,38 +261,9 @@ declare const paddingInlineMap: {
     'scale.400': import("@emotion/react").SerializedStyles;
     'scale.500': import("@emotion/react").SerializedStyles;
     'scale.600': import("@emotion/react").SerializedStyles;
+    'scale.800': import("@emotion/react").SerializedStyles;
 };
 export declare type PaddingInline = keyof typeof paddingInlineMap;
-declare const widthMap: {
-    'scale.0': import("@emotion/react").SerializedStyles;
-    'scale.025': import("@emotion/react").SerializedStyles;
-    'scale.050': import("@emotion/react").SerializedStyles;
-    'scale.075': import("@emotion/react").SerializedStyles;
-    'scale.100': import("@emotion/react").SerializedStyles;
-    'scale.150': import("@emotion/react").SerializedStyles;
-    'scale.200': import("@emotion/react").SerializedStyles;
-    'scale.250': import("@emotion/react").SerializedStyles;
-    'scale.300': import("@emotion/react").SerializedStyles;
-    'scale.400': import("@emotion/react").SerializedStyles;
-    'scale.500': import("@emotion/react").SerializedStyles;
-    'scale.600': import("@emotion/react").SerializedStyles;
-};
-export declare type Width = keyof typeof widthMap;
-declare const heightMap: {
-    'scale.0': import("@emotion/react").SerializedStyles;
-    'scale.025': import("@emotion/react").SerializedStyles;
-    'scale.050': import("@emotion/react").SerializedStyles;
-    'scale.075': import("@emotion/react").SerializedStyles;
-    'scale.100': import("@emotion/react").SerializedStyles;
-    'scale.150': import("@emotion/react").SerializedStyles;
-    'scale.200': import("@emotion/react").SerializedStyles;
-    'scale.250': import("@emotion/react").SerializedStyles;
-    'scale.300': import("@emotion/react").SerializedStyles;
-    'scale.400': import("@emotion/react").SerializedStyles;
-    'scale.500': import("@emotion/react").SerializedStyles;
-    'scale.600': import("@emotion/react").SerializedStyles;
-};
-export declare type Height = keyof typeof heightMap;
 /**
  * @codegenEnd
  */

package/dist/types/components/inline.partial.d.ts

@@ -69,7 +69,7 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
+ * @codegen <<SignedSource::76168a57c8f10c9f325865d2189aa0ff>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
@@ -81,6 +81,7 @@ declare const columnGapMap: {
     'scale.050': import("@emotion/react").SerializedStyles;
     'scale.075': import("@emotion/react").SerializedStyles;
     'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.1000': import("@emotion/react").SerializedStyles;
     'scale.150': import("@emotion/react").SerializedStyles;
     'scale.200': import("@emotion/react").SerializedStyles;
     'scale.250': import("@emotion/react").SerializedStyles;
@@ -88,6 +89,7 @@ declare const columnGapMap: {
     'scale.400': import("@emotion/react").SerializedStyles;
     'scale.500': import("@emotion/react").SerializedStyles;
     'scale.600': import("@emotion/react").SerializedStyles;
+    'scale.800': import("@emotion/react").SerializedStyles;
 };
 export declare type ColumnGap = keyof typeof columnGapMap;
 /**

package/dist/types/components/stack.partial.d.ts

@@ -55,7 +55,7 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
+ * @codegen <<SignedSource::2b10240c217de584b627a7e2f56d11a0>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
@@ -67,6 +67,7 @@ declare const rowGapMap: {
     'scale.050': import("@emotion/react").SerializedStyles;
     'scale.075': import("@emotion/react").SerializedStyles;
     'scale.100': import("@emotion/react").SerializedStyles;
+    'scale.1000': import("@emotion/react").SerializedStyles;
     'scale.150': import("@emotion/react").SerializedStyles;
     'scale.200': import("@emotion/react").SerializedStyles;
     'scale.250': import("@emotion/react").SerializedStyles;
@@ -74,6 +75,7 @@ declare const rowGapMap: {
     'scale.400': import("@emotion/react").SerializedStyles;
     'scale.500': import("@emotion/react").SerializedStyles;
     'scale.600': import("@emotion/react").SerializedStyles;
+    'scale.800': import("@emotion/react").SerializedStyles;
 };
 export declare type RowGap = keyof typeof rowGapMap;
 /**

package/dist/types/internal/spacing-scale.d.ts

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Some artifact
+ * Internal codegen of the spacing scale values. Only used for internal examples.
  *
- * @codegen <<SignedSource::caecb926afa82b027fba396074de5c2c>>
+ * @codegen <<SignedSource::d351e41acd06f256fb46554409694f31>>
  * @codegenCommand yarn codegen-styles
  */
-export declare const spacingScale: readonly ["scale.0", "scale.025", "scale.050", "scale.075", "scale.100", "scale.150", "scale.200", "scale.250", "scale.300", "scale.400", "scale.500", "scale.600"];
+export declare const spacingScale: readonly ["scale.0", "scale.025", "scale.050", "scale.075", "scale.100", "scale.150", "scale.200", "scale.250", "scale.300", "scale.400", "scale.500", "scale.600", "scale.800", "scale.1000"];

package/examples/04-inline.tsx

@@ -9,9 +9,9 @@ import {
 } from '../src';
 import { spacingScale } from '../src/internal/spacing-scale';
 
-const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
-const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
-const flexWrap = ['wrap'];
+const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'] as const;
+const flexJustifyContent = ['center', 'flexStart', 'flexEnd'] as const;
+const flexWrap = ['wrap'] as const;
 
 /**
  * Inline permutations
@@ -46,9 +46,8 @@ export default () => {
           {flexAlignItems.map((alignItemsValue) => (
             <Stack key={alignItemsValue} gap="scale.300">
               <Heading level="h500">{alignItemsValue}</Heading>
-
               <Box backgroundColor="neutral" UNSAFE_style={{ height: '100px' }}>
-                <Inline gap="scale.200" alignItems={alignItemsValue as any}>
+                <Inline gap="scale.200" alignItems={alignItemsValue}>
                   <Box padding="scale.100" backgroundColor="success.bold" />
                   <Box padding="scale.100" backgroundColor="success.bold" />
                   <Box padding="scale.100" backgroundColor="success.bold" />
@@ -57,7 +56,6 @@ export default () => {
             </Stack>
           ))}
         </Inline>
-
         <Heading level="h600">justifyContent</Heading>
         <Inline gap="scale.400">
           {flexJustifyContent.map((justifyContentValue) => (
@@ -69,10 +67,7 @@ export default () => {
                 backgroundColor="neutral"
                 UNSAFE_style={{ width: '140px' }}
               >
-                <Inline
-                  gap="scale.200"
-                  justifyContent={justifyContentValue as any}
-                >
+                <Inline gap="scale.200" justifyContent={justifyContentValue}>
                   <Box padding="scale.100" backgroundColor="success.bold" />
                   <Box padding="scale.100" backgroundColor="success.bold" />
                   <Box padding="scale.100" backgroundColor="success.bold" />
@@ -88,7 +83,6 @@ export default () => {
           {flexWrap.map((flexWrapValue) => (
             <Stack key={flexWrapValue} gap="scale.300">
               <Heading level="h500">{flexWrapValue}</Heading>
-
               <Box backgroundColor="neutral" UNSAFE_style={{ width: '50px' }}>
                 <Inline gap="scale.200" flexWrap={flexWrapValue as any}>
                   <Box padding="scale.100" backgroundColor="success.bold" />

package/examples/99-interactions.tsx

@@ -35,7 +35,7 @@ const fieldsetStyles = css({
 
 export default () => {
   return (
-    <Box width="scale.600" padding="scale.100" testId="all">
+    <Box width="size.500" padding="scale.100" testId="all">
       <Stack gap="scale.200">
         <Heading level="h400">Current ADS Buttons</Heading>
         <Inline gap="scale.200">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
@@ -14,7 +14,7 @@
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "scripts": {
-    "ak-postbuild": "cd ../../../ && yarn build @af/codegen && cd packages/design-system/ds-explorations && yarn codegen-styles",
+    "ak-postbuild": "cd ../../../ && yarn build @af/codegen && yarn build @atlaskit/tokens && cd packages/design-system/ds-explorations && yarn codegen-styles",
     "codegen-styles": "ts-node --project ../../../tsconfig.node.json ./scripts/codegen-styles",
     "prepare": "yarn ak-postbuild"
   },

package/report.api.md

@@ -191,6 +191,7 @@ const columnGapMap: {
   'scale.050': SerializedStyles;
   'scale.075': SerializedStyles;
   'scale.100': SerializedStyles;
+  'scale.1000': SerializedStyles;
   'scale.150': SerializedStyles;
   'scale.200': SerializedStyles;
   'scale.250': SerializedStyles;
@@ -198,6 +199,7 @@ const columnGapMap: {
   'scale.400': SerializedStyles;
   'scale.500': SerializedStyles;
   'scale.600': SerializedStyles;
+  'scale.800': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -211,7 +213,7 @@ const displayMap: {
   inlineFlex: SerializedStyles;
 };
 
-// @public (undocumented)
+// @public
 type FlexAlignItems = keyof typeof flexAlignItemsMap;
 
 // @public (undocumented)
@@ -248,7 +250,7 @@ const flexAlignItemsMap_3: {
   end: SerializedStyles;
 };
 
-// @public (undocumented)
+// @public
 type FlexDirection = keyof typeof flexDirectionMap;
 
 // @public (undocumented)
@@ -257,7 +259,7 @@ const flexDirectionMap: {
   row: SerializedStyles;
 };
 
-// @public (undocumented)
+// @public
 type FlexJustifyContent = keyof typeof flexJustifyContentMap;
 
 // @public (undocumented)
@@ -333,18 +335,14 @@ type Height = keyof typeof heightMap;
 
 // @public (undocumented)
 const heightMap: {
-  'scale.0': SerializedStyles;
-  'scale.025': SerializedStyles;
-  'scale.050': SerializedStyles;
-  'scale.075': SerializedStyles;
-  'scale.100': SerializedStyles;
-  'scale.150': SerializedStyles;
-  'scale.200': SerializedStyles;
-  'scale.250': SerializedStyles;
-  'scale.300': SerializedStyles;
-  'scale.400': SerializedStyles;
-  'scale.500': SerializedStyles;
-  'scale.600': SerializedStyles;
+  '100%': SerializedStyles;
+  'size.100': SerializedStyles;
+  'size.1000': SerializedStyles;
+  'size.200': SerializedStyles;
+  'size.300': SerializedStyles;
+  'size.400': SerializedStyles;
+  'size.500': SerializedStyles;
+  'size.600': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -403,6 +401,7 @@ const paddingBlockMap: {
   'scale.050': SerializedStyles;
   'scale.075': SerializedStyles;
   'scale.100': SerializedStyles;
+  'scale.1000': SerializedStyles;
   'scale.150': SerializedStyles;
   'scale.200': SerializedStyles;
   'scale.250': SerializedStyles;
@@ -410,6 +409,7 @@ const paddingBlockMap: {
   'scale.400': SerializedStyles;
   'scale.500': SerializedStyles;
   'scale.600': SerializedStyles;
+  'scale.800': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -422,6 +422,7 @@ const paddingInlineMap: {
   'scale.050': SerializedStyles;
   'scale.075': SerializedStyles;
   'scale.100': SerializedStyles;
+  'scale.1000': SerializedStyles;
   'scale.150': SerializedStyles;
   'scale.200': SerializedStyles;
   'scale.250': SerializedStyles;
@@ -429,6 +430,7 @@ const paddingInlineMap: {
   'scale.400': SerializedStyles;
   'scale.500': SerializedStyles;
   'scale.600': SerializedStyles;
+  'scale.800': SerializedStyles;
 };
 
 // @public
@@ -438,6 +440,7 @@ const paddingMap: {
   'scale.050': SerializedStyles;
   'scale.075': SerializedStyles;
   'scale.100': SerializedStyles;
+  'scale.1000': SerializedStyles;
   'scale.150': SerializedStyles;
   'scale.200': SerializedStyles;
   'scale.250': SerializedStyles;
@@ -445,6 +448,7 @@ const paddingMap: {
   'scale.400': SerializedStyles;
   'scale.500': SerializedStyles;
   'scale.600': SerializedStyles;
+  'scale.800': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -470,6 +474,7 @@ const rowGapMap: {
   'scale.050': SerializedStyles;
   'scale.075': SerializedStyles;
   'scale.100': SerializedStyles;
+  'scale.1000': SerializedStyles;
   'scale.150': SerializedStyles;
   'scale.200': SerializedStyles;
   'scale.250': SerializedStyles;
@@ -477,6 +482,7 @@ const rowGapMap: {
   'scale.400': SerializedStyles;
   'scale.500': SerializedStyles;
   'scale.600': SerializedStyles;
+  'scale.800': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -587,20 +593,16 @@ const verticalAlignMap: {
 // @public (undocumented)
 type Width = keyof typeof widthMap;
 
-// @public (undocumented)
+// @public
 const widthMap: {
-  'scale.0': SerializedStyles;
-  'scale.025': SerializedStyles;
-  'scale.050': SerializedStyles;
-  'scale.075': SerializedStyles;
-  'scale.100': SerializedStyles;
-  'scale.150': SerializedStyles;
-  'scale.200': SerializedStyles;
-  'scale.250': SerializedStyles;
-  'scale.300': SerializedStyles;
-  'scale.400': SerializedStyles;
-  'scale.500': SerializedStyles;
-  'scale.600': SerializedStyles;
+  '100%': SerializedStyles;
+  'size.100': SerializedStyles;
+  'size.1000': SerializedStyles;
+  'size.200': SerializedStyles;
+  'size.300': SerializedStyles;
+  'size.400': SerializedStyles;
+  'size.500': SerializedStyles;
+  'size.600': SerializedStyles;
 };
 
 // (No @packageDocumentation comment for this package)

package/scripts/codegen-styles.tsx

@@ -6,6 +6,7 @@ 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 { createInteractionStylesFromTemplate } from './interaction-codegen';
 import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
 import { createSpacingScaleTemplate } from './spacing-scale-template';
@@ -30,7 +31,7 @@ writeFile(
   createSignedArtifact(
     createSpacingScaleTemplate(),
     'yarn codegen-styles',
-    'Some artifact',
+    'Internal codegen of the spacing scale values. Only used for internal examples.',
   ),
 ).then(() => console.log('spacing-scale.tsx written!'));
 
@@ -101,6 +102,28 @@ Promise.all(
       },
     );
 
+    return writeFile(targetPath, source).then(() =>
+      console.log(`${targetPath} written!`),
+    );
+  })
+  .then(() => {
+    const targetPath = join(
+      __dirname,
+      '../',
+      'src',
+      'components',
+      '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/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/spacing-codegen-template.tsx

@@ -1,18 +1,11 @@
 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-spacing';
+import tokens from '@atlaskit/tokens/spacing-raw';
 
 import { capitalize, tokenToStyle } from './utils';
 
 const spacingProperties = {
-  width: {
-    cssProperty: 'width',
-  },
-  height: {
-    cssProperty: 'height',
-  },
   padding: {
     cssProperty: 'padding',
   },
@@ -33,21 +26,14 @@ const spacingProperties = {
   },
 } as const;
 
-type Token = {
-  name: string;
-  fallback: string;
-};
-
 const onlyScaleTokens = tokens.filter((token) =>
-  token.name.startsWith('spacing.scale.'),
+  token.name.startsWith('space.'),
 );
 
-const activeTokens = onlyScaleTokens.map(
-  (t): Token => ({
-    name: t.name,
-    fallback: t.value,
-  }),
-);
+const activeTokens = onlyScaleTokens.map((t) => ({
+  name: t.name,
+  fallback: t.attributes.pixelValue!,
+}));
 
 export const createSpacingStylesFromTemplate = (
   spacingProperty: keyof typeof spacingProperties,
@@ -65,7 +51,8 @@ const ${spacingProperty}Map = {
   ${activeTokens
     .sort((a, b) => (a.name < b.name ? -1 : 1))
     .map((token) => {
-      const propName = token.name.replace('spacing.', '');
+      // TODO change this when we want to cut a major on the package
+      const propName = token.name.replace('space.', 'scale.');
       return `'${propName}': ${tokenToStyle(
         cssProperty,
         token.name,