@atlaskit/ds-explorations 1.6.0 → 1.6.2

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
+import { Layer } from '../constants';
 import type { BasePrimitiveProps } from './types';
-declare type PropsToOmit = 'as' | 'className' | 'style';
-export declare type BoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, PropsToOmit> & BasePrimitiveProps & BoxPropsBase<T>;
+export declare type BoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BoxPropsBase<T>;
 declare type BoxPropsBase<T extends ElementType> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.
@@ -28,6 +28,10 @@ declare type BoxPropsBase<T extends ElementType> = {
      * Token representing background color with a fallback.
      */
     backgroundColor?: BackgroundColor;
+    /**
+     * Token representing shadow with a fallback
+     */
+    shadow?: Shadow;
     /**
      * Defines border style.
      */
@@ -44,6 +48,10 @@ declare type BoxPropsBase<T extends ElementType> = {
      * Defines border radius.
      */
     borderRadius?: BorderRadius;
+    /**
+     * Used for providing a z-index.
+     */
+    layer?: Layer;
     /**
      * Defines the main axis direction.
      * @deprecated
@@ -146,6 +154,8 @@ declare const flexAlignItemsMap: {
     baseline: import("@emotion/react").SerializedStyles;
     flexStart: import("@emotion/react").SerializedStyles;
     flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
 };
 /**
  * @experimental - this is likely to be removed
@@ -155,6 +165,8 @@ declare const flexJustifyContentMap: {
     center: import("@emotion/react").SerializedStyles;
     flexStart: import("@emotion/react").SerializedStyles;
     flexEnd: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
 };
 declare type Display = keyof typeof displayMap;
 declare const displayMap: {
@@ -166,6 +178,7 @@ declare const displayMap: {
 declare type Position = keyof typeof positionMap;
 declare const positionMap: {
     absolute: import("@emotion/react").SerializedStyles;
+    fixed: import("@emotion/react").SerializedStyles;
     relative: import("@emotion/react").SerializedStyles;
     static: import("@emotion/react").SerializedStyles;
 };
@@ -270,57 +283,65 @@ export declare type PaddingInline = keyof typeof paddingInlineMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
+ * @codegen <<SignedSource::f8adab4246a66543cd1350e53abf9293>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background"]
+ * @codegenParams ["border", "background", "shadow"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const borderColorMap: {
-    'color.border': import("@emotion/react").SerializedStyles;
-    bold: import("@emotion/react").SerializedStyles;
-    inverse: import("@emotion/react").SerializedStyles;
-    focused: import("@emotion/react").SerializedStyles;
-    input: import("@emotion/react").SerializedStyles;
-    disabled: import("@emotion/react").SerializedStyles;
-    brand: import("@emotion/react").SerializedStyles;
-    selected: import("@emotion/react").SerializedStyles;
-    danger: import("@emotion/react").SerializedStyles;
-    warning: import("@emotion/react").SerializedStyles;
-    success: import("@emotion/react").SerializedStyles;
-    discovery: import("@emotion/react").SerializedStyles;
-    information: import("@emotion/react").SerializedStyles;
+    readonly 'color.border': import("@emotion/react").SerializedStyles;
+    readonly bold: import("@emotion/react").SerializedStyles;
+    readonly inverse: import("@emotion/react").SerializedStyles;
+    readonly focused: import("@emotion/react").SerializedStyles;
+    readonly input: import("@emotion/react").SerializedStyles;
+    readonly disabled: import("@emotion/react").SerializedStyles;
+    readonly brand: import("@emotion/react").SerializedStyles;
+    readonly selected: import("@emotion/react").SerializedStyles;
+    readonly danger: import("@emotion/react").SerializedStyles;
+    readonly warning: import("@emotion/react").SerializedStyles;
+    readonly success: import("@emotion/react").SerializedStyles;
+    readonly discovery: import("@emotion/react").SerializedStyles;
+    readonly information: import("@emotion/react").SerializedStyles;
 };
 export declare type BorderColor = keyof typeof borderColorMap;
 declare const backgroundColorMap: {
-    disabled: import("@emotion/react").SerializedStyles;
-    'inverse.subtle': import("@emotion/react").SerializedStyles;
-    input: import("@emotion/react").SerializedStyles;
-    neutral: import("@emotion/react").SerializedStyles;
-    'neutral.subtle': import("@emotion/react").SerializedStyles;
-    'neutral.bold': import("@emotion/react").SerializedStyles;
-    'brand.bold': import("@emotion/react").SerializedStyles;
-    selected: import("@emotion/react").SerializedStyles;
-    'selected.bold': import("@emotion/react").SerializedStyles;
-    danger: import("@emotion/react").SerializedStyles;
-    'danger.bold': import("@emotion/react").SerializedStyles;
-    warning: import("@emotion/react").SerializedStyles;
-    'warning.bold': import("@emotion/react").SerializedStyles;
-    success: import("@emotion/react").SerializedStyles;
-    'success.bold': import("@emotion/react").SerializedStyles;
-    discovery: import("@emotion/react").SerializedStyles;
-    'discovery.bold': import("@emotion/react").SerializedStyles;
-    information: import("@emotion/react").SerializedStyles;
-    'information.bold': import("@emotion/react").SerializedStyles;
-    'color.blanket': import("@emotion/react").SerializedStyles;
-    'color.blanket.selected': import("@emotion/react").SerializedStyles;
-    'color.blanket.danger': import("@emotion/react").SerializedStyles;
-    'elevation.surface': import("@emotion/react").SerializedStyles;
-    'elevation.surface.sunken': import("@emotion/react").SerializedStyles;
-    'elevation.surface.raised': import("@emotion/react").SerializedStyles;
-    'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
+    readonly disabled: import("@emotion/react").SerializedStyles;
+    readonly 'inverse.subtle': import("@emotion/react").SerializedStyles;
+    readonly input: import("@emotion/react").SerializedStyles;
+    readonly neutral: import("@emotion/react").SerializedStyles;
+    readonly 'neutral.subtle': import("@emotion/react").SerializedStyles;
+    readonly 'neutral.bold': import("@emotion/react").SerializedStyles;
+    readonly 'brand.bold': import("@emotion/react").SerializedStyles;
+    readonly selected: import("@emotion/react").SerializedStyles;
+    readonly 'selected.bold': import("@emotion/react").SerializedStyles;
+    readonly danger: import("@emotion/react").SerializedStyles;
+    readonly 'danger.bold': import("@emotion/react").SerializedStyles;
+    readonly warning: import("@emotion/react").SerializedStyles;
+    readonly 'warning.bold': import("@emotion/react").SerializedStyles;
+    readonly success: import("@emotion/react").SerializedStyles;
+    readonly 'success.bold': import("@emotion/react").SerializedStyles;
+    readonly discovery: import("@emotion/react").SerializedStyles;
+    readonly 'discovery.bold': import("@emotion/react").SerializedStyles;
+    readonly information: import("@emotion/react").SerializedStyles;
+    readonly 'information.bold': import("@emotion/react").SerializedStyles;
+    readonly 'color.blanket': import("@emotion/react").SerializedStyles;
+    readonly 'color.blanket.selected': import("@emotion/react").SerializedStyles;
+    readonly 'color.blanket.danger': import("@emotion/react").SerializedStyles;
+    readonly 'elevation.surface': import("@emotion/react").SerializedStyles;
+    readonly 'elevation.surface.sunken': import("@emotion/react").SerializedStyles;
+    readonly 'elevation.surface.raised': import("@emotion/react").SerializedStyles;
+    readonly 'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
 };
 export declare type BackgroundColor = keyof typeof backgroundColorMap;
+declare const shadowMap: {
+    readonly raised: import("@emotion/react").SerializedStyles;
+    readonly overflow: import("@emotion/react").SerializedStyles;
+    readonly 'overflow.spread': import("@emotion/react").SerializedStyles;
+    readonly 'overflow.perimeter': import("@emotion/react").SerializedStyles;
+    readonly overlay: import("@emotion/react").SerializedStyles;
+};
+export declare type Shadow = keyof typeof shadowMap;
 /**
  * @codegenEnd
  */

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

@@ -45,6 +45,7 @@ declare const flexJustifyContentMap: {
     flexEnd: import("@emotion/react").SerializedStyles;
     start: import("@emotion/react").SerializedStyles;
     end: import("@emotion/react").SerializedStyles;
+    spaceBetween: import("@emotion/react").SerializedStyles;
 };
 declare type FlexWrap = keyof typeof flexWrapMap;
 declare const flexWrapMap: {

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

@@ -104,26 +104,26 @@ declare const Text: FC<TextProps>;
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
+ * @codegen <<SignedSource::920426feace841166c6f4ffdc49ae26d>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 declare const textColorMap: {
-    'color.text': import("@emotion/react").SerializedStyles;
-    subtle: import("@emotion/react").SerializedStyles;
-    subtlest: import("@emotion/react").SerializedStyles;
-    disabled: import("@emotion/react").SerializedStyles;
-    inverse: import("@emotion/react").SerializedStyles;
-    brand: import("@emotion/react").SerializedStyles;
-    selected: import("@emotion/react").SerializedStyles;
-    danger: import("@emotion/react").SerializedStyles;
-    warning: import("@emotion/react").SerializedStyles;
-    'warning.inverse': import("@emotion/react").SerializedStyles;
-    success: import("@emotion/react").SerializedStyles;
-    discovery: import("@emotion/react").SerializedStyles;
-    information: import("@emotion/react").SerializedStyles;
+    readonly 'color.text': import("@emotion/react").SerializedStyles;
+    readonly subtle: import("@emotion/react").SerializedStyles;
+    readonly subtlest: import("@emotion/react").SerializedStyles;
+    readonly disabled: import("@emotion/react").SerializedStyles;
+    readonly inverse: import("@emotion/react").SerializedStyles;
+    readonly brand: import("@emotion/react").SerializedStyles;
+    readonly selected: import("@emotion/react").SerializedStyles;
+    readonly danger: import("@emotion/react").SerializedStyles;
+    readonly warning: import("@emotion/react").SerializedStyles;
+    readonly 'warning.inverse': import("@emotion/react").SerializedStyles;
+    readonly success: import("@emotion/react").SerializedStyles;
+    readonly discovery: import("@emotion/react").SerializedStyles;
+    readonly information: import("@emotion/react").SerializedStyles;
 };
 export declare type TextColor = keyof typeof textColorMap;
 /**

package/dist/types/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const LAYERS: {
+    readonly card: 100;
+    readonly navigation: 200;
+    readonly dialog: 300;
+    readonly layer: 400;
+    readonly blanket: 500;
+    readonly modal: 510;
+    readonly flag: 600;
+    readonly spotlight: 700;
+    readonly tooltip: 800;
+};
+export declare type Layer = keyof typeof LAYERS;

package/examples/01-box.tsx

@@ -113,6 +113,60 @@ export default () => {
           ))}
         </Inline>
       </Stack>
+
+      <Stack gap="scale.200" testId="box-with-shadow">
+        <Heading level="h600">shadow</Heading>
+        <Inline gap="scale.200" alignItems="center">
+          {(['raised', 'overflow', 'overlay'] as const).map((shadow) => (
+            <Box
+              key={shadow}
+              backgroundColor="elevation.surface"
+              shadow={shadow}
+              padding="scale.400"
+            >
+              <Box justifyContent="center">
+                <Text color="color.text">{shadow}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack gap="scale.200" testId="box-with-layer">
+        <Heading level="h600">layer</Heading>
+        <Box alignItems="center" UNSAFE_style={{ width: 800, height: 650 }}>
+          {(
+            [
+              'card',
+              'navigation',
+              'dialog',
+              'layer',
+              'blanket',
+              'modal',
+              'flag',
+              'spotlight',
+              'tooltip',
+            ] as const
+          ).map((layer, index) => (
+            <Box
+              key={layer}
+              backgroundColor="elevation.surface"
+              layer={layer}
+              shadow="overlay"
+              padding="scale.400"
+              position="absolute"
+              UNSAFE_style={{
+                top: index * 64,
+                left: index * 64,
+              }}
+            >
+              <Box justifyContent="center">
+                <Text color="color.text">{layer}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Stack>
     </Stack>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
@@ -39,7 +39,7 @@
     "./inline": "./src/components/inline.partial.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^0.11.0",
+    "@atlaskit/tokens": "^0.12.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "tiny-invariant": "^1.2.0"

package/report.api.md

@@ -39,32 +39,32 @@ type BackgroundColor = keyof typeof backgroundColorMap;
 
 // @public (undocumented)
 const backgroundColorMap: {
-  disabled: SerializedStyles;
-  'inverse.subtle': SerializedStyles;
-  input: SerializedStyles;
-  neutral: SerializedStyles;
-  'neutral.subtle': SerializedStyles;
-  'neutral.bold': SerializedStyles;
-  'brand.bold': SerializedStyles;
-  selected: SerializedStyles;
-  'selected.bold': SerializedStyles;
-  danger: SerializedStyles;
-  'danger.bold': SerializedStyles;
-  warning: SerializedStyles;
-  'warning.bold': SerializedStyles;
-  success: SerializedStyles;
-  'success.bold': SerializedStyles;
-  discovery: SerializedStyles;
-  'discovery.bold': SerializedStyles;
-  information: SerializedStyles;
-  'information.bold': SerializedStyles;
-  'color.blanket': SerializedStyles;
-  'color.blanket.selected': SerializedStyles;
-  'color.blanket.danger': SerializedStyles;
-  'elevation.surface': SerializedStyles;
-  'elevation.surface.sunken': SerializedStyles;
-  'elevation.surface.raised': SerializedStyles;
-  'elevation.surface.overlay': SerializedStyles;
+  readonly disabled: SerializedStyles;
+  readonly 'inverse.subtle': SerializedStyles;
+  readonly input: SerializedStyles;
+  readonly neutral: SerializedStyles;
+  readonly 'neutral.subtle': SerializedStyles;
+  readonly 'neutral.bold': SerializedStyles;
+  readonly 'brand.bold': SerializedStyles;
+  readonly selected: SerializedStyles;
+  readonly 'selected.bold': SerializedStyles;
+  readonly danger: SerializedStyles;
+  readonly 'danger.bold': SerializedStyles;
+  readonly warning: SerializedStyles;
+  readonly 'warning.bold': SerializedStyles;
+  readonly success: SerializedStyles;
+  readonly 'success.bold': SerializedStyles;
+  readonly discovery: SerializedStyles;
+  readonly 'discovery.bold': SerializedStyles;
+  readonly information: SerializedStyles;
+  readonly 'information.bold': SerializedStyles;
+  readonly 'color.blanket': SerializedStyles;
+  readonly 'color.blanket.selected': SerializedStyles;
+  readonly 'color.blanket.danger': SerializedStyles;
+  readonly 'elevation.surface': SerializedStyles;
+  readonly 'elevation.surface.sunken': SerializedStyles;
+  readonly 'elevation.surface.raised': SerializedStyles;
+  readonly 'elevation.surface.overlay': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -103,19 +103,19 @@ type BorderColor = keyof typeof borderColorMap;
 
 // @public
 const borderColorMap: {
-  'color.border': SerializedStyles;
-  bold: SerializedStyles;
-  inverse: SerializedStyles;
-  focused: SerializedStyles;
-  input: SerializedStyles;
-  disabled: SerializedStyles;
-  brand: SerializedStyles;
-  selected: SerializedStyles;
-  danger: SerializedStyles;
-  warning: SerializedStyles;
-  success: SerializedStyles;
-  discovery: SerializedStyles;
-  information: SerializedStyles;
+  readonly 'color.border': SerializedStyles;
+  readonly bold: SerializedStyles;
+  readonly inverse: SerializedStyles;
+  readonly focused: SerializedStyles;
+  readonly input: SerializedStyles;
+  readonly disabled: SerializedStyles;
+  readonly brand: SerializedStyles;
+  readonly selected: SerializedStyles;
+  readonly danger: SerializedStyles;
+  readonly warning: SerializedStyles;
+  readonly success: SerializedStyles;
+  readonly discovery: SerializedStyles;
+  readonly information: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -164,10 +164,12 @@ type BoxPropsBase<T extends ElementType> = {
   children?: ReactNode;
   className?: string;
   backgroundColor?: BackgroundColor;
+  shadow?: Shadow;
   borderStyle?: BorderStyle;
   borderWidth?: BorderWidth;
   borderColor?: BorderColor;
   borderRadius?: BorderRadius;
+  layer?: Layer;
   flexDirection?: FlexDirection;
   alignItems?: FlexAlignItems;
   justifyContent?: FlexJustifyContent;
@@ -229,6 +231,8 @@ const flexAlignItemsMap: {
   baseline: SerializedStyles;
   flexStart: SerializedStyles;
   flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -274,6 +278,8 @@ const flexJustifyContentMap: {
   center: SerializedStyles;
   flexStart: SerializedStyles;
   flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -284,6 +290,7 @@ const flexJustifyContentMap_2: {
   flexEnd: SerializedStyles;
   start: SerializedStyles;
   end: SerializedStyles;
+  spaceBetween: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -358,6 +365,22 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
   children: ReactNode;
 }
 
+// @public (undocumented)
+type Layer = keyof typeof LAYERS;
+
+// @public (undocumented)
+const LAYERS: {
+  readonly card: 100;
+  readonly navigation: 200;
+  readonly dialog: 300;
+  readonly layer: 400;
+  readonly blanket: 500;
+  readonly modal: 510;
+  readonly flag: 600;
+  readonly spotlight: 700;
+  readonly tooltip: 800;
+};
+
 // @public (undocumented)
 type LineHeight = keyof typeof lineHeightMap;
 
@@ -450,13 +473,11 @@ type Position = keyof typeof positionMap;
 // @public (undocumented)
 const positionMap: {
   absolute: SerializedStyles;
+  fixed: SerializedStyles;
   relative: SerializedStyles;
   static: SerializedStyles;
 };
 
-// @public (undocumented)
-type PropsToOmit = 'as' | 'className' | 'style';
-
 // @public (undocumented)
 type RowGap = keyof typeof rowGapMap;
 
@@ -478,6 +499,18 @@ const rowGapMap: {
   'scale.800': SerializedStyles;
 };
 
+// @public (undocumented)
+type Shadow = keyof typeof shadowMap;
+
+// @public (undocumented)
+const shadowMap: {
+  readonly raised: SerializedStyles;
+  readonly overflow: SerializedStyles;
+  readonly 'overflow.spread': SerializedStyles;
+  readonly 'overflow.perimeter': SerializedStyles;
+  readonly overlay: SerializedStyles;
+};
+
 // @public (undocumented)
 type TextAlign = keyof typeof textAlignMap;
 
@@ -493,19 +526,19 @@ type TextColor = keyof typeof textColorMap;
 
 // @public
 const textColorMap: {
-  'color.text': SerializedStyles;
-  subtle: SerializedStyles;
-  subtlest: SerializedStyles;
-  disabled: SerializedStyles;
-  inverse: SerializedStyles;
-  brand: SerializedStyles;
-  selected: SerializedStyles;
-  danger: SerializedStyles;
-  warning: SerializedStyles;
-  'warning.inverse': SerializedStyles;
-  success: SerializedStyles;
-  discovery: SerializedStyles;
-  information: SerializedStyles;
+  readonly 'color.text': SerializedStyles;
+  readonly subtle: SerializedStyles;
+  readonly subtlest: SerializedStyles;
+  readonly disabled: SerializedStyles;
+  readonly inverse: SerializedStyles;
+  readonly brand: SerializedStyles;
+  readonly selected: SerializedStyles;
+  readonly danger: SerializedStyles;
+  readonly warning: SerializedStyles;
+  readonly 'warning.inverse': SerializedStyles;
+  readonly success: SerializedStyles;
+  readonly discovery: SerializedStyles;
+  readonly information: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -524,7 +557,7 @@ export const UNSAFE_Box: BoxComponent;
 // @public (undocumented)
 export type UNSAFE_BoxProps<T extends ElementType = 'div'> = Omit<
   ComponentPropsWithoutRef<T>,
-  PropsToOmit
+  'as' | 'className' | 'style'
 > &
   BasePrimitiveProps &
   BoxPropsBase<T>;

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

@@ -80,7 +80,7 @@ exports[`@atlaskit/design-system-explorations bg styles are generated correctly
   'elevation.surface.overlay': css({
     backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
   }),
-};
+} as const;
 
 export type BackgroundColor = keyof typeof backgroundColorMap;
 "
@@ -127,7 +127,7 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
   information: css({
     borderColor: token('color.border.information', '#0065FF'),
   }),
-};
+} as const;
 
 export type BorderColor = keyof typeof borderColorMap;
 "
@@ -353,7 +353,7 @@ exports[`@atlaskit/design-system-explorations text styles are generated correctl
   information: css({
     color: token('color.text.information', '#0052CC'),
   }),
-};
+} as const;
 
 export type TextColor = keyof typeof textColorMap;
 "

package/scripts/codegen-styles.tsx

@@ -8,6 +8,7 @@ import { createColorStylesFromTemplate } from './color-codegen-template';
 import { createColorMapTemplate } from './color-map-template';
 import { createDimensionStylesFromTemplate } from './dimension-codegen-template';
 import { createInteractionStylesFromTemplate } from './interaction-codegen';
+import { createStylesFromTemplate } from './misc-codegen-template';
 import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
 import { createSpacingScaleTemplate } from './spacing-scale-template';
 
@@ -86,6 +87,24 @@ Promise.all(
       }),
     );
   })
+  .then(() => {
+    // generate other values
+    return Promise.all(
+      [{ target: 'box.partial.tsx' }].map(({ target }) => {
+        const targetPath = join(__dirname, '../', 'src', 'components', target);
+
+        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!`),
+        );
+      }),
+    );
+  })
   .then(() => {
     const targetPath = join(
       __dirname,