@atlaskit/ds-explorations 0.1.5 → 1.1.0

package/examples/03-stack.tsx

@@ -7,7 +7,7 @@ import {
   UNSAFE_Inline as Inline,
   UNSAFE_Stack as Stack,
 } from '../src';
-import { GlobalSpacingToken, SPACING_SCALE } from '../src/constants';
+import { spacingScale } from '../src/internal/spacing-scale';
 
 const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
 const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
@@ -18,56 +18,38 @@ const flexWrap = ['wrap'];
  */
 export default () => {
   return (
-    <Stack gap="sp-300">
-      <Stack gap="sp-300" testId="stack-spacing">
+    <Stack gap="scale.300">
+      <Stack gap="scale.300" testId="stack-spacing">
         <Heading level="h700">Spacing</Heading>
-        <Inline gap="sp-400">
-          {Object.keys(SPACING_SCALE).map((space) => (
-            <Stack key={space} gap="sp-300">
+        <Inline gap="scale.400">
+          {spacingScale.map((space) => (
+            <Stack key={space} gap="scale.300">
               <Heading level="h500">{space}</Heading>
 
-              <Box backgroundColor={['neutral', 'grey']}>
-                <Stack gap={space as GlobalSpacingToken} alignItems="center">
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
+              <Box backgroundColor="neutral">
+                <Stack 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" />
                 </Stack>
               </Box>
             </Stack>
           ))}
         </Inline>
       </Stack>
-      <Stack gap="sp-300" testId="stack-alignment">
+      <Stack gap="scale.300" testId="stack-alignment">
         <Heading level="h700">Alignment</Heading>
         <Heading level="h600">alignItems</Heading>
-        <Inline gap="sp-400">
+        <Inline gap="scale.400">
           {flexAlignItems.map((alignItemsValue) => (
-            <Stack key={alignItemsValue} gap="sp-300">
+            <Stack key={alignItemsValue} gap="scale.300">
               <Heading level="h500">{alignItemsValue}</Heading>
 
-              <Box backgroundColor={['neutral', 'grey']} display="block">
-                <Stack gap="sp-200" alignItems={alignItemsValue as any}>
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
+              <Box backgroundColor="neutral" display="block">
+                <Stack gap="scale.200" alignItems={alignItemsValue as any}>
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
                 </Stack>
               </Box>
             </Stack>
@@ -75,28 +57,19 @@ export default () => {
         </Inline>
 
         <Heading level="h600">justifyContent</Heading>
-        <Inline gap="sp-400">
+        <Inline gap="scale.400">
           {flexJustifyContent.map((justifyContentValue) => (
-            <Stack key={justifyContentValue} gap="sp-300">
+            <Stack key={justifyContentValue} gap="scale.300">
               <Heading level="h500">{justifyContentValue}</Heading>
 
-              <Box
-                backgroundColor={['neutral', 'grey']}
-                UNSAFE_style={{ height: '200px' }}
-              >
-                <Stack gap="sp-200" justifyContent={justifyContentValue as any}>
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
+              <Box backgroundColor="neutral" UNSAFE_style={{ height: '200px' }}>
+                <Stack
+                  gap="scale.200"
+                  justifyContent={justifyContentValue as any}
+                >
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
                 </Stack>
               </Box>
             </Stack>
@@ -105,28 +78,16 @@ export default () => {
 
         <Heading level="h700">Overflow</Heading>
         <Heading level="h600">flexWrap</Heading>
-        <Inline gap="sp-400">
+        <Inline gap="scale.400">
           {flexWrap.map((flexWrapValue) => (
-            <Stack key={flexWrapValue} gap="sp-300">
+            <Stack key={flexWrapValue} gap="scale.300">
               <Heading level="h500">{flexWrapValue}</Heading>
 
-              <Box
-                backgroundColor={['neutral', 'grey']}
-                UNSAFE_style={{ height: '50px' }}
-              >
-                <Stack gap="sp-200" flexWrap={flexWrapValue as any}>
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
+              <Box backgroundColor="neutral" UNSAFE_style={{ height: '50px' }}>
+                <Stack 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" />
                 </Stack>
               </Box>
             </Stack>

package/examples/04-inline.tsx

@@ -7,7 +7,7 @@ import {
   UNSAFE_Inline as Inline,
   UNSAFE_Stack as Stack,
 } from '../src';
-import { GlobalSpacingToken, SPACING_SCALE } from '../src/constants';
+import { spacingScale } from '../src/internal/spacing-scale';
 
 const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
 const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
@@ -18,61 +18,40 @@ const flexWrap = ['wrap'];
  */
 export default () => {
   return (
-    <Stack gap="sp-300">
-      <Stack gap="sp-300" testId="inline-spacing">
+    <Stack gap="scale.300">
+      <Stack gap="scale.300" testId="inline-spacing">
         <Heading level="h700">Spacing</Heading>
-        <Stack gap="sp-400">
-          {Object.keys(SPACING_SCALE).map((space) => (
-            <Inline key={space} gap="sp-300">
-              <Box width="sp-800">
+        <Stack gap="scale.400">
+          {spacingScale.map((space) => (
+            <Inline key={space} gap="scale.300">
+              <Box UNSAFE_style={{ width: 140 }}>
                 <Heading level="h500">{space}</Heading>
               </Box>
 
-              <Box backgroundColor={['neutral', 'grey']}>
-                <Inline gap={space as GlobalSpacingToken} alignItems="center">
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
+              <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" />
                 </Inline>
               </Box>
             </Inline>
           ))}
         </Stack>
       </Stack>
-      <Stack gap="sp-300" testId="inline-alignment">
+      <Stack gap="scale.300" testId="inline-alignment">
         <Heading level="h700">Alignment</Heading>
         <Heading level="h600">alignItems</Heading>
-        <Inline gap="sp-400">
+        <Inline gap="scale.400">
           {flexAlignItems.map((alignItemsValue) => (
-            <Stack key={alignItemsValue} gap="sp-300">
+            <Stack key={alignItemsValue} gap="scale.300">
               <Heading level="h500">{alignItemsValue}</Heading>
 
-              <Box
-                backgroundColor={['neutral', 'grey']}
-                UNSAFE_style={{ height: '100px' }}
-              >
-                <Inline gap="sp-200" alignItems={alignItemsValue as any}>
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
+              <Box backgroundColor="neutral" UNSAFE_style={{ height: '100px' }}>
+                <Inline gap="scale.200" alignItems={alignItemsValue as any}>
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
                 </Inline>
               </Box>
             </Stack>
@@ -80,32 +59,23 @@ export default () => {
         </Inline>
 
         <Heading level="h600">justifyContent</Heading>
-        <Inline gap="sp-400">
+        <Inline gap="scale.400">
           {flexJustifyContent.map((justifyContentValue) => (
-            <Stack key={justifyContentValue} gap="sp-300">
+            <Stack key={justifyContentValue} gap="scale.300">
               <Heading level="h500">{justifyContentValue}</Heading>
 
               <Box
                 display="block"
-                backgroundColor={['neutral', 'grey']}
+                backgroundColor="neutral"
                 UNSAFE_style={{ width: '140px' }}
               >
                 <Inline
-                  gap="sp-200"
+                  gap="scale.200"
                   justifyContent={justifyContentValue as any}
                 >
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
                 </Inline>
               </Box>
             </Stack>
@@ -114,28 +84,16 @@ export default () => {
 
         <Heading level="h700">Overflow</Heading>
         <Heading level="h600">flexWrap</Heading>
-        <Inline gap="sp-400">
+        <Inline gap="scale.400">
           {flexWrap.map((flexWrapValue) => (
-            <Stack key={flexWrapValue} gap="sp-300">
+            <Stack key={flexWrapValue} gap="scale.300">
               <Heading level="h500">{flexWrapValue}</Heading>
 
-              <Box
-                backgroundColor={['neutral', 'grey']}
-                UNSAFE_style={{ width: '50px' }}
-              >
-                <Inline gap="sp-200" flexWrap={flexWrapValue as any}>
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
-                  <Box
-                    padding="sp-100"
-                    backgroundColor={['success.bold', 'green']}
-                  />
+              <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>
               </Box>
             </Stack>

package/examples/05-badge.tsx

@@ -11,9 +11,9 @@ export default () => {
       <Badge>{8}</Badge>
       <Box
         borderRadius="badge"
-        backgroundColor={['neutral', 'white']}
+        backgroundColor="neutral"
         display="inlineFlex"
-        paddingInline="sp-75"
+        paddingInline="scale.075"
         UNSAFE_style={{ lineHeight: '16px' }}
       >
         <Text fontSize="12px">8</Text>

package/examples/06-section-message.tsx

@@ -18,18 +18,18 @@ import Text from '../src/components/text.partial';
 
 export default () => {
   return (
-    <Stack gap="sp-100">
+    <Stack gap="scale.100">
       <Box
-        paddingBlock="sp-200"
-        paddingInline="sp-200"
-        backgroundColor={['information', 'purple']}
+        paddingBlock="scale.200"
+        paddingInline="scale.200"
+        backgroundColor="information"
       >
-        <Inline gap="sp-200">
+        <Inline gap="scale.200">
           <InfoIcon
             primaryColor={token('color.icon.information')}
             label="info"
           />
-          <Stack gap="sp-100">
+          <Stack gap="scale.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="sp-75">
+            <Inline divider="·" gap="scale.075">
               <Button
                 appearance="link"
                 spacing="none"

package/examples/07-comment.tsx

@@ -17,9 +17,7 @@ const Date = ({ children }: any) => {
 };
 
 const EditIndicator = ({ hasBeenEdited }: any) => {
-  return hasBeenEdited ? (
-    <Text color={['subtlest', '#555']}>Edited</Text>
-  ) : null;
+  return hasBeenEdited ? <Text color="subtlest">Edited</Text> : null;
 };
 
 const CommentAction = ({ children }: any) => {
@@ -29,8 +27,8 @@ const CommentAction = ({ children }: any) => {
 export default () => {
   return (
     <Box>
-      <Stack gap="sp-50">
-        <Inline gap="sp-100" alignItems="center">
+      <Stack gap="scale.050">
+        <Inline gap="scale.100" alignItems="center">
           <Author>Jane Citizen</Author>
           <Lozenge>Author</Lozenge>
           <Date>Jun 15, 2022</Date>
@@ -43,7 +41,7 @@ export default () => {
           aliquip ex ea commodo consequat.
         </Text>
         <Box color="subtle">
-          <Inline gap="sp-100" divider="·">
+          <Inline gap="scale.100" divider="·">
             <CommentAction>Reply</CommentAction>
             <CommentAction>Edit</CommentAction>
             <CommentAction>Like</CommentAction>

package/examples/08-lozenge.tsx

@@ -11,16 +11,20 @@ import {
 
 export default () => {
   return (
-    <Inline gap="sp-200">
+    <Inline gap="scale.200">
       <Lozenge>Default</Lozenge>
       <Box
-        backgroundColor={['neutral', 'grey']}
+        backgroundColor="neutral"
         borderRadius="normal"
         as="span"
-        paddingInline="sp-50"
+        paddingInline="scale.050"
       >
-        {/* textTransform: uppercase, font-weight: 700 */}
-        <Text fontSize="11px" color={['color.text', 'grey']}>
+        <Text
+          color="color.text"
+          fontSize="11px"
+          fontWeight="700"
+          textTransform="uppercase"
+        >
           Default
         </Text>
       </Box>

package/examples/99-interactions.tsx

@@ -35,10 +35,10 @@ const fieldsetStyles = css({
 
 export default () => {
   return (
-    <Box width="sp-800" padding="sp-100" testId="all">
-      <Stack gap="sp-200">
+    <Box width="scale.600" padding="scale.100" testId="all">
+      <Stack gap="scale.200">
         <Heading level="h400">Current ADS Buttons</Heading>
-        <Inline gap="sp-200">
+        <Inline gap="scale.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="sp-200" testId="buttons">
+        <Inline gap="scale.200" testId="buttons">
           {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
             <FocusRing key={app}>
               <Box
@@ -54,8 +54,8 @@ export default () => {
                 onClick={() => console.log('hello')}
                 borderRadius="normal"
                 position="relative"
-                paddingInline="sp-150"
-                backgroundColor={[app, '']}
+                paddingInline="scale.150"
+                backgroundColor={app}
               >
                 <InteractionSurface>
                   <Text
@@ -74,15 +74,15 @@ export default () => {
         <Heading level="h400">
           Icon Buttons with <Code>InteractionSurface</Code>
         </Heading>
-        <Inline gap="sp-200" testId="icon-buttons">
+        <Inline gap="scale.200" testId="icon-buttons">
           <FocusRing>
             <Box
               as="button"
-              backgroundColor={['brand.bold', 'pink']}
+              backgroundColor="brand.bold"
               onClick={() => console.log('hello')}
               borderRadius="normal"
               position="relative"
-              padding="sp-50"
+              padding="scale.050"
             >
               <InteractionSurface>
                 <WarningIcon
@@ -96,11 +96,11 @@ export default () => {
           <FocusRing>
             <Box
               as="button"
-              backgroundColor={['neutral', 'pink']}
+              backgroundColor="neutral"
               onClick={() => console.log('hello')}
               borderRadius="normal"
               position="relative"
-              padding="sp-50"
+              padding="scale.050"
             >
               <InteractionSurface>
                 <WarningIcon label="icon button" />
@@ -110,11 +110,11 @@ export default () => {
           <FocusRing>
             <Box
               as="button"
-              backgroundColor={['warning.bold', 'pink']}
+              backgroundColor="warning.bold"
               onClick={() => console.log('hello')}
               borderRadius="normal"
               position="relative"
-              padding="sp-50"
+              padding="scale.050"
             >
               <InteractionSurface>
                 <WarningIcon
@@ -129,17 +129,17 @@ export default () => {
         <Heading level="h400">
           Progress Indicator with <Code>InteractionSurface</Code>
         </Heading>
-        <Inline gap="sp-200" testId="progress-indicators">
+        <Inline gap="scale.200" testId="progress-indicators">
           {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
             <FocusRing>
               <Box
                 key={app}
                 as="button"
-                backgroundColor={[app, 'pink']}
+                backgroundColor={app}
                 onClick={() => console.log('hello')}
                 borderRadius="rounded"
                 position="relative"
-                padding="sp-50"
+                padding="scale.050"
               >
                 <InteractionSurface>
                   <Fragment />
@@ -149,17 +149,17 @@ export default () => {
           ))}
         </Inline>
         <Heading level="h400">Textfield / input spikes</Heading>
-        <Inline gap="sp-200">
+        <Inline gap="scale.200">
           <Textfield />
           <Box
             as="fieldset"
             borderRadius="normal"
             borderStyle="solid"
             borderWidth="2px"
-            padding="sp-100"
+            padding="scale.100"
             tabIndex={-1}
-            borderColor={['color.border', '#ddd']}
-            backgroundColor={['input', '#eee']}
+            borderColor="color.border"
+            backgroundColor="input"
             css={fieldsetStyles}
           >
             <input

package/examples/config.jsonc

@@ -6,5 +6,16 @@
 {
   "testExamples": [
     "00-basic.tsx"
+  ],
+  "exampleDependencies": [
+    "@atlaskit/badge",
+    "@atlaskit/button",
+    "@atlaskit/code",
+    "@atlaskit/focus-ring",
+    "@atlaskit/heading",
+    "@atlaskit/icon",
+    "@atlaskit/lozenge",
+    "@atlaskit/section-message",
+    "@atlaskit/textfield"
   ]
 }

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "0.1.5",
+  "version": "1.1.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "inPublicMirror": false,
     "releaseModel": "continuous"
@@ -31,7 +32,9 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "af:exports": {
-    ".": "./src/index.tsx"
+    ".": "./src/index.tsx",
+    "./box": "./src/components/box.partial.tsx",
+    "./text": "./src/components/text.partial.tsx"
   },
   "dependencies": {
     "@atlaskit/tokens": "^0.10.3",