@atlaskit/ds-explorations 1.7.0 → 2.0.0

package/examples/04-inline.tsx

@@ -18,48 +18,48 @@ const flexWrap = ['wrap'] as const;
  */
 export default () => {
   return (
-    <Stack gap="scale.300">
-      <Stack gap="scale.300" testId="inline-spacing">
+    <Stack gap="space.300">
+      <Stack gap="space.300" testId="inline-spacing">
         <Heading level="h700">Spacing</Heading>
-        <Stack gap="scale.400">
+        <Stack gap="space.400">
           {spacingScale.map((space) => (
-            <Inline key={space} gap="scale.300">
+            <Inline key={space} gap="space.300">
               <Box UNSAFE_style={{ width: 140 }}>
                 <Heading level="h500">{space}</Heading>
               </Box>
 
               <Box backgroundColor="neutral">
                 <Inline gap={space} alignItems="center">
-                  <Box padding="scale.100" backgroundColor="success.bold" />
-                  <Box padding="scale.100" backgroundColor="success.bold" />
-                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
                 </Inline>
               </Box>
             </Inline>
           ))}
         </Stack>
       </Stack>
-      <Stack gap="scale.300" testId="inline-alignment">
+      <Stack gap="space.300" testId="inline-alignment">
         <Heading level="h700">Alignment</Heading>
         <Heading level="h600">alignItems</Heading>
-        <Inline gap="scale.400">
+        <Inline gap="space.400">
           {flexAlignItems.map((alignItemsValue) => (
-            <Stack key={alignItemsValue} gap="scale.300">
+            <Stack key={alignItemsValue} gap="space.300">
               <Heading level="h500">{alignItemsValue}</Heading>
               <Box backgroundColor="neutral" UNSAFE_style={{ height: '100px' }}>
-                <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" />
+                <Inline gap="space.200" alignItems={alignItemsValue}>
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
                 </Inline>
               </Box>
             </Stack>
           ))}
         </Inline>
         <Heading level="h600">justifyContent</Heading>
-        <Inline gap="scale.400">
+        <Inline gap="space.400">
           {flexJustifyContent.map((justifyContentValue) => (
-            <Stack key={justifyContentValue} gap="scale.300">
+            <Stack key={justifyContentValue} gap="space.300">
               <Heading level="h500">{justifyContentValue}</Heading>
 
               <Box
@@ -67,10 +67,10 @@ export default () => {
                 backgroundColor="neutral"
                 UNSAFE_style={{ width: '140px' }}
               >
-                <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" />
+                <Inline gap="space.200" justifyContent={justifyContentValue}>
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
                 </Inline>
               </Box>
             </Stack>
@@ -79,15 +79,15 @@ export default () => {
 
         <Heading level="h700">Overflow</Heading>
         <Heading level="h600">flexWrap</Heading>
-        <Inline gap="scale.400">
+        <Inline gap="space.400">
           {flexWrap.map((flexWrapValue) => (
-            <Stack key={flexWrapValue} gap="scale.300">
+            <Stack key={flexWrapValue} gap="space.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" />
-                  <Box padding="scale.100" backgroundColor="success.bold" />
-                  <Box padding="scale.100" backgroundColor="success.bold" />
+                <Inline gap="space.200" flexWrap={flexWrapValue as any}>
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
+                  <Box padding="space.100" backgroundColor="success.bold" />
                 </Inline>
               </Box>
             </Stack>

package/examples/05-badge.tsx

@@ -13,10 +13,10 @@ export default () => {
         borderRadius="badge"
         backgroundColor="neutral"
         display="inlineFlex"
-        paddingInline="scale.075"
+        paddingInline="space.075"
         UNSAFE_style={{ lineHeight: '16px' }}
       >
-        <Text fontSize="12px">8</Text>
+        <Text fontSize="size.075">8</Text>
       </Box>
     </>
   );

package/examples/06-section-message.tsx

@@ -18,18 +18,18 @@ import Text from '../src/components/text.partial';
 
 export default () => {
   return (
-    <Stack gap="scale.100">
+    <Stack gap="space.100">
       <Box
-        paddingBlock="scale.200"
-        paddingInline="scale.200"
+        paddingBlock="space.200"
+        paddingInline="space.200"
         backgroundColor="information"
       >
-        <Inline gap="scale.200">
+        <Inline gap="space.200">
           <InfoIcon
             primaryColor={token('color.icon.information')}
             label="info"
           />
-          <Stack gap="scale.100">
+          <Stack gap="space.100">
             <Heading as="h1" level="h500">
               The Modern Prometheus
             </Heading>
@@ -40,7 +40,7 @@ export default () => {
               to assure my dear sister of my welfare and increasing confidence
               in the success of my undertaking.
             </Text>
-            <Inline divider="·" gap="scale.075">
+            <Inline divider="·" gap="space.075">
               <Button
                 appearance="link"
                 spacing="none"

package/examples/07-comment.tsx

@@ -9,7 +9,7 @@ import Stack from '../src/components/stack.partial';
 import Text from '../src/components/text.partial';
 
 const Author = ({ children }: any) => {
-  return <Text fontWeight="500">{children}</Text>;
+  return <Text fontWeight="medium">{children}</Text>;
 };
 
 const Date = ({ children }: any) => {
@@ -21,14 +21,14 @@ const EditIndicator = ({ hasBeenEdited }: any) => {
 };
 
 const CommentAction = ({ children }: any) => {
-  return <Text fontWeight="500">{children}</Text>;
+  return <Text fontWeight="medium">{children}</Text>;
 };
 
 export default () => {
   return (
     <Box>
-      <Stack gap="scale.050">
-        <Inline gap="scale.100" alignItems="center">
+      <Stack gap="space.050">
+        <Inline gap="space.100" alignItems="center">
           <Author>Jane Citizen</Author>
           <Lozenge>Author</Lozenge>
           <Date>Jun 15, 2022</Date>
@@ -41,7 +41,7 @@ export default () => {
           aliquip ex ea commodo consequat.
         </Text>
         <Box color="subtle">
-          <Inline gap="scale.100" divider="·">
+          <Inline gap="space.100" divider="·">
             <CommentAction>Reply</CommentAction>
             <CommentAction>Edit</CommentAction>
             <CommentAction>Like</CommentAction>

package/examples/08-lozenge.tsx

@@ -11,18 +11,18 @@ import {
 
 export default () => {
   return (
-    <Inline gap="scale.200">
+    <Inline gap="space.200">
       <Lozenge>Default</Lozenge>
       <Box
         backgroundColor="neutral"
         borderRadius="normal"
         as="span"
-        paddingInline="scale.050"
+        paddingInline="space.050"
       >
         <Text
           color="color.text"
-          fontSize="11px"
-          fontWeight="700"
+          fontSize="size.050"
+          fontWeight="bold"
           textTransform="uppercase"
         >
           Default

package/examples/99-interactions.tsx

@@ -35,10 +35,10 @@ const fieldsetStyles = css({
 
 export default () => {
   return (
-    <Box width="size.500" padding="scale.100" testId="all">
-      <Stack gap="scale.200">
+    <Box width="size.500" padding="space.100" testId="all">
+      <Stack gap="space.200">
         <Heading level="h400">Current ADS Buttons</Heading>
-        <Inline gap="scale.200">
+        <Inline gap="space.200">
           <Button appearance="primary">brand.bold</Button>
           <Button appearance="default">neutral</Button>
           <Button appearance="warning">warning.bold</Button>
@@ -46,7 +46,7 @@ export default () => {
         <Heading level="h400">
           Buttons with <Code>InteractionSurface</Code>
         </Heading>
-        <Inline gap="scale.200" testId="buttons">
+        <Inline gap="space.200" testId="buttons">
           {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
             <FocusRing key={app}>
               <Box
@@ -54,15 +54,15 @@ export default () => {
                 onClick={() => console.log('hello')}
                 borderRadius="normal"
                 position="relative"
-                paddingInline="scale.150"
+                paddingInline="space.150"
                 backgroundColor={app}
               >
                 <InteractionSurface>
                   <Text
                     textAlign="center"
-                    fontSize="14px"
-                    lineHeight="32px"
-                    fontWeight="500"
+                    fontSize="size.100"
+                    lineHeight="lineHeight.500"
+                    fontWeight="medium"
                   >
                     {app}
                   </Text>
@@ -74,7 +74,7 @@ export default () => {
         <Heading level="h400">
           Icon Buttons with <Code>InteractionSurface</Code>
         </Heading>
-        <Inline gap="scale.200" testId="icon-buttons">
+        <Inline gap="space.200" testId="icon-buttons">
           <FocusRing>
             <Box
               as="button"
@@ -82,7 +82,7 @@ export default () => {
               onClick={() => console.log('hello')}
               borderRadius="normal"
               position="relative"
-              padding="scale.050"
+              padding="space.050"
             >
               <InteractionSurface>
                 <WarningIcon
@@ -100,7 +100,7 @@ export default () => {
               onClick={() => console.log('hello')}
               borderRadius="normal"
               position="relative"
-              padding="scale.050"
+              padding="space.050"
             >
               <InteractionSurface>
                 <WarningIcon label="icon button" />
@@ -114,7 +114,7 @@ export default () => {
               onClick={() => console.log('hello')}
               borderRadius="normal"
               position="relative"
-              padding="scale.050"
+              padding="space.050"
             >
               <InteractionSurface>
                 <WarningIcon
@@ -129,7 +129,7 @@ export default () => {
         <Heading level="h400">
           Progress Indicator with <Code>InteractionSurface</Code>
         </Heading>
-        <Inline gap="scale.200" testId="progress-indicators">
+        <Inline gap="space.200" testId="progress-indicators">
           {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
             <FocusRing>
               <Box
@@ -139,7 +139,7 @@ export default () => {
                 onClick={() => console.log('hello')}
                 borderRadius="rounded"
                 position="relative"
-                padding="scale.050"
+                padding="space.050"
               >
                 <InteractionSurface>
                   <Fragment />
@@ -149,14 +149,14 @@ export default () => {
           ))}
         </Inline>
         <Heading level="h400">Textfield / input spikes</Heading>
-        <Inline gap="scale.200">
+        <Inline gap="space.200">
           <Textfield />
           <Box
             as="fieldset"
             borderRadius="normal"
             borderStyle="solid"
             borderWidth="2px"
-            padding="scale.100"
+            padding="space.100"
             tabIndex={-1}
             borderColor="color.border"
             backgroundColor="input"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "1.7.0",
+  "version": "2.0.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {

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)
@@ -322,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)
@@ -334,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)
@@ -387,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)
@@ -413,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)
@@ -434,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)
@@ -484,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(