@workday/canvas-kit-labs-react 7.0.0-alpha.0-next.6 → 7.0.0-alpha.0-next.7

package/common/index.ts

@@ -1,11 +1,3 @@
-export * from './lib/Box';
 export * from './lib/theming';
-export {BorderStyleProps} from './lib/utils/border';
-export {ColorStyleProps} from './lib/utils/color';
-export {DepthStyleProps} from './lib/utils/depth';
-export {FlexItemStyleProps} from './lib/utils/flexItem';
-export {LayoutStyleProps} from './lib/utils/layout';
-export {PositionStyleProps} from './lib/utils/position';
-export {SpaceStyleProps} from './lib/utils/space';
 export {ComponentStatesTable} from './lib/storybook-utils/ComponentStatesTable';
 export {permutateProps} from './lib/storybook-utils/permutateProps';

package/dist/commonjs/common/index.d.ts

@@ -1,12 +1,4 @@
-export * from './lib/Box';
 export * from './lib/theming';
-export { BorderStyleProps } from './lib/utils/border';
-export { ColorStyleProps } from './lib/utils/color';
-export { DepthStyleProps } from './lib/utils/depth';
-export { FlexItemStyleProps } from './lib/utils/flexItem';
-export { LayoutStyleProps } from './lib/utils/layout';
-export { PositionStyleProps } from './lib/utils/position';
-export { SpaceStyleProps } from './lib/utils/space';
 export { ComponentStatesTable } from './lib/storybook-utils/ComponentStatesTable';
 export { permutateProps } from './lib/storybook-utils/permutateProps';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,oBAAoB,EAAC,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,oBAAoB,EAAC,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC"}

package/dist/commonjs/common/index.js

@@ -11,7 +11,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.permutateProps = exports.ComponentStatesTable = void 0;
-__exportStar(require("./lib/Box"), exports);
 __exportStar(require("./lib/theming"), exports);
 var ComponentStatesTable_1 = require("./lib/storybook-utils/ComponentStatesTable");
 Object.defineProperty(exports, "ComponentStatesTable", { enumerable: true, get: function () { return ComponentStatesTable_1.ComponentStatesTable; } });

package/dist/commonjs/index.d.ts

@@ -1,6 +1,5 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './layout';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}

package/dist/commonjs/index.js

@@ -13,5 +13,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./combobox"), exports);
 __exportStar(require("./common"), exports);
 __exportStar(require("./drawer"), exports);
-__exportStar(require("./layout"), exports);
 __exportStar(require("./search-form"), exports);

package/dist/es6/common/index.d.ts

@@ -1,12 +1,4 @@
-export * from './lib/Box';
 export * from './lib/theming';
-export { BorderStyleProps } from './lib/utils/border';
-export { ColorStyleProps } from './lib/utils/color';
-export { DepthStyleProps } from './lib/utils/depth';
-export { FlexItemStyleProps } from './lib/utils/flexItem';
-export { LayoutStyleProps } from './lib/utils/layout';
-export { PositionStyleProps } from './lib/utils/position';
-export { SpaceStyleProps } from './lib/utils/space';
 export { ComponentStatesTable } from './lib/storybook-utils/ComponentStatesTable';
 export { permutateProps } from './lib/storybook-utils/permutateProps';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,oBAAoB,EAAC,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,oBAAoB,EAAC,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC"}

package/dist/es6/common/index.js

@@ -1,4 +1,3 @@
-export * from './lib/Box';
 export * from './lib/theming';
 export { ComponentStatesTable } from './lib/storybook-utils/ComponentStatesTable';
 export { permutateProps } from './lib/storybook-utils/permutateProps';

package/dist/es6/index.d.ts

@@ -1,6 +1,5 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './layout';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}

package/dist/es6/index.js

@@ -1,5 +1,4 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './layout';
 export * from './search-form';

package/index.ts

@@ -1,5 +1,4 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './layout';
 export * from './search-form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "7.0.0-alpha.0-next.6+54a4c8c1",
+  "version": "7.0.0-alpha.0-next.7+23568685",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,19 +52,17 @@
     "react": "^16.8 || ^17.0"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.1.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.6+54a4c8c1",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.6+54a4c8c1",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.7+23568685",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.7+23568685",
     "@workday/canvas-system-icons-web": "1.0.41",
     "chroma-js": "^2.1.0",
-    "csstype": "^2.6.17",
     "lodash.flatten": "^4.4.0",
     "rtl-css-js": "^1.14.1"
   },
   "devDependencies": {
     "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "54a4c8c15a1863d7560dc5a1397028c0e6d72236"
+  "gitHead": "23568685fec785046d37cb320289d8ab9e74e283"
 }

package/ts3.5/dist/commonjs/common/index.d.ts

@@ -1,12 +1,4 @@
-export * from './lib/Box';
 export * from './lib/theming';
-export { BorderStyleProps } from './lib/utils/border';
-export { ColorStyleProps } from './lib/utils/color';
-export { DepthStyleProps } from './lib/utils/depth';
-export { FlexItemStyleProps } from './lib/utils/flexItem';
-export { LayoutStyleProps } from './lib/utils/layout';
-export { PositionStyleProps } from './lib/utils/position';
-export { SpaceStyleProps } from './lib/utils/space';
 export { ComponentStatesTable } from './lib/storybook-utils/ComponentStatesTable';
 export { permutateProps } from './lib/storybook-utils/permutateProps';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/index.d.ts

@@ -1,6 +1,5 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './layout';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/common/index.d.ts

@@ -1,12 +1,4 @@
-export * from './lib/Box';
 export * from './lib/theming';
-export { BorderStyleProps } from './lib/utils/border';
-export { ColorStyleProps } from './lib/utils/color';
-export { DepthStyleProps } from './lib/utils/depth';
-export { FlexItemStyleProps } from './lib/utils/flexItem';
-export { LayoutStyleProps } from './lib/utils/layout';
-export { PositionStyleProps } from './lib/utils/position';
-export { SpaceStyleProps } from './lib/utils/space';
 export { ComponentStatesTable } from './lib/storybook-utils/ComponentStatesTable';
 export { permutateProps } from './lib/storybook-utils/permutateProps';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/index.d.ts

@@ -1,6 +1,5 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './layout';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/common/lib/Box.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
-import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
-
-// style props
-import {border, BorderStyleProps} from './utils/border';
-import {color, ColorStyleProps} from './utils/color';
-import {depth, DepthStyleProps} from './utils/depth';
-import {flexItem, FlexItemStyleProps} from './utils/flexItem';
-import {layout, LayoutStyleProps} from './utils/layout';
-import {other, OtherStyleProps} from './utils/other';
-import {position, PositionStyleProps} from './utils/position';
-import {space, SpaceStyleProps} from './utils/space';
-
-export type BoxProps = BorderStyleProps &
-  ColorStyleProps &
-  DepthStyleProps &
-  FlexItemStyleProps &
-  LayoutStyleProps &
-  OtherStyleProps &
-  PositionStyleProps &
-  SpaceStyleProps & {
-    children?: React.ReactNode;
-  };
-
-const omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
-
-const shouldForwardProp = (prop: string) => {
-  return isPropValid(prop) && !omittedProps.includes(prop);
-};
-
-// Meant to be used with elements. The `shouldForwardProps` will remove all style props
-const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
-  {
-    boxSizing: 'border-box',
-  },
-  border,
-  color,
-  depth,
-  flexItem,
-  layout,
-  position,
-  space
-);
-
-// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
-const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
-  {
-    boxSizing: 'border-box',
-  },
-  border,
-  color,
-  depth,
-  flexItem,
-  layout,
-  other,
-  position,
-  space
-);
-
-/**
- * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
- * It is highly flexible, and its primary purpose is to build other components.
- *
- * @example
- * import { Box, BoxProps } from '@workday/canvas-kit-labs-react/common';
- *
- * interface CardProps extends BoxProps {
- *   // card-specific props
- * }
- *
- * // `Card`'s default values are set using `BoxProps`
- * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
- * );
- *
- */
-export const Box = createComponent('div')({
-  displayName: 'Box',
-  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
-    const BoxComponent = useConstant(() =>
-      typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
-    );
-
-    return (
-      <BoxComponent as={Element} ref={ref} {...elemProps}>
-        {children}
-      </BoxComponent>
-    );
-  },
-});

package/common/lib/utils/border.ts

@@ -1,263 +0,0 @@
-import {
-  borderRadius as borderRadiusTokens,
-  CanvasBorderRadiusKeys,
-  colors as colorTokens,
-  CanvasColor,
-} from '@workday/canvas-kit-react/tokens';
-import {
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
-
-import {PropertyBorder} from './types';
-
-/** style props to set the border properties */
-export type BorderShorthandStyleProps = {
-  /** sets `border` property */
-  border?: string;
-  /** sets `border-top` property */
-  borderTop?: string;
-  /** sets `border-right` property (no bidirectional support) */
-  borderRight?: string;
-  /** sets `border-bottom` property */
-  borderBottom?: string;
-  /** sets `border-left` property (no bidirectional support) */
-  borderLeft?: string;
-};
-
-/** style props to set the border color properties */
-export type BorderColorStyleProps = {
-  /** sets `border-color` property */
-  borderColor?: CanvasColor | (string & {});
-  /** sets `border-top-color` property */
-  borderTopColor?: CanvasColor | (string & {});
-  /** sets `border-right-color` property (no bidirectional support) */
-  borderRightColor?: CanvasColor | (string & {});
-  /** sets `border-bottom-color` property */
-  borderBottomColor?: CanvasColor | (string & {});
-  /** sets `border-left-color` property (no bidirectional support) */
-  borderLeftColor?: CanvasColor | (string & {});
-};
-
-/** style props to set the border radius properties */
-export type BorderRadiusStyleProps = {
-  /** sets `border-radius` property */
-  borderRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-top-left-radius` property */
-  borderTopLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-top-right-radius` property */
-  borderTopRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-bottom-left-radius` property */
-  borderBottomLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-bottom-right-radius` property */
-  borderBottomRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
-};
-
-/** style props to set the border style properties */
-export type BorderLineStyleProps = {
-  /** sets `border-style` property */
-  borderStyle?: PropertyBorder;
-  /** sets `border-top-style` property */
-  borderTopStyle?: PropertyBorder;
-  /** sets `border-right-style` property (no bidirectional support) */
-  borderRightStyle?: PropertyBorder;
-  /** sets `border-bottom-style` property */
-  borderBottomStyle?: PropertyBorder;
-  /** sets `border-left-style` property (no bidirectional support) */
-  borderLeftStyle?: PropertyBorder;
-};
-
-/** style props to set the border width properties */
-export type BorderWidthStyleProps = {
-  /** sets `border-width` property */
-  borderWidth?: string | number;
-  /** sets `border-top-width` property */
-  borderTopWidth?: string | number;
-  /** sets `border-right-width` property (no bidirectional support) */
-  borderRightWidth?: string | number;
-  /** sets `border-bottom-width` property */
-  borderBottomWidth?: string | number;
-  /** sets `border-left-width` property (no bidirectional support) */
-  borderLeftWidth?: string | number;
-};
-
-export type BorderLogicalStyleProps = {
-  /** sets `border-left` property (bidirectional support) */
-  borderInlineStart?: string;
-  /** sets `border-left-color` property (bidirectional support) */
-  borderInlineStartColor?: CanvasColor | (string & {});
-  /** sets `border-left-style` property (bidirectional support) */
-  borderInlineStartStyle?: PropertyBorder;
-  /** sets `border-left-width` property (bidirectional support) */
-  borderInlineStartWidth?: string | number;
-  /** sets `border-right` property (bidirectional support) */
-  borderInlineEnd?: string;
-  /** sets `border-right-color` property (bidirectional support) */
-  borderInlineEndColor?: CanvasColor | (string & {});
-  /** sets `border-right-style` property (bidirectional support) */
-  borderInlineEndStyle?: PropertyBorder;
-  /** sets `border-right-width` property (bidirectional support) */
-  borderInlineEndWidth?: string | number;
-};
-
-/** a collection style props for border properties */
-export type BorderStyleProps = BorderShorthandStyleProps &
-  BorderColorStyleProps &
-  BorderRadiusStyleProps &
-  BorderLineStyleProps &
-  BorderWidthStyleProps &
-  BorderLogicalStyleProps;
-
-// border logical prop handlers
-const borderInlineStart = (isRTL: boolean) => (isRTL ? 'borderRight' : 'borderLeft');
-const borderInlineEnd = (isRTL: boolean) => (isRTL ? 'borderLeft' : 'borderRight');
-const borderInlineStartColor = (isRTL: boolean) => (isRTL ? 'borderRightColor' : 'borderLeftColor');
-const borderInlineEndColor = (isRTL: boolean) => (isRTL ? 'borderLeftColor' : 'borderRightColor');
-const borderInlineStartStyle = (isRTL: boolean) => (isRTL ? 'borderRightStyle' : 'borderLeftStyle');
-const borderInlineEndStyle = (isRTL: boolean) => (isRTL ? 'borderLeftStyle' : 'borderRightStyle');
-const borderInlineStartWidth = (isRTL: boolean) => (isRTL ? 'borderRightWidth' : 'borderLeftWidth');
-const borderInlineEndWidth = (isRTL: boolean) => (isRTL ? 'borderLeftWidth' : 'borderRightWidth');
-
-const borderShorthandProps = {
-  border: 'border',
-  borderTop: 'borderTop',
-  borderRight: 'borderRight',
-  borderBottom: 'borderBottom',
-  borderLeft: 'borderLeft',
-  borderInlineStart,
-  borderInlineEnd,
-};
-
-const borderColors = {
-  borderColor: 'borderColor',
-  borderTopColor: 'borderTopColor',
-  borderRightColor: 'borderRightColor',
-  borderBottomColor: 'borderBottomColor',
-  borderLeftColor: 'borderLeftColor',
-  borderInlineStartColor,
-  borderInlineEndColor,
-};
-
-const borderRadii = {
-  borderRadius: 'borderRadius',
-  borderTopLeftRadius: 'borderTopLeftRadius',
-  borderTopRightRadius: 'borderTopRightRadius',
-  borderBottomLeftRadius: 'borderBottomLeftRadius',
-  borderBottomRightRadius: 'borderBottomRightRadius',
-};
-
-const borderStyles = {
-  borderStyle: 'borderStyle',
-  borderTopStyle: 'borderTopStyle',
-  borderRightStyle: 'borderRightStyle',
-  borderBottomStyle: 'borderBottomStyle',
-  borderLeftStyle: 'borderLeftStyle',
-  borderInlineStartStyle,
-  borderInlineEndStyle,
-};
-
-const borderWidths = {
-  borderWidth: 'borderWidth',
-  borderTopWidth: 'borderTopWidth',
-  borderRightWidth: 'borderRightWidth',
-  borderBottomWidth: 'borderBottomWidth',
-  borderLeftWidth: 'borderLeftWidth',
-  borderInlineStartWidth,
-  borderInlineEndWidth,
-};
-
-/**
- * A style prop function that takes components props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
- * If no `BorderStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `border` with low-level, styled components
- * const BoxExample = () => (
- *   <Box border={`solid 1px #333333 ${colors.blackPepper400}`}>Hello, border styles!</Box>
- * );
- *
- */
-export function border<P extends BorderStyleProps & {theme?: PartialEmotionCanvasTheme}>(props: P) {
-  // border will always be used within the context of a component, but eslint doesn't know that
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const {canvas} = useTheme(props.theme);
-  const isRTL = canvas.direction === ContentDirection.RTL;
-  const styles = {};
-  for (const key in props) {
-    if (props.hasOwnProperty(key)) {
-      if (key in borderShorthandProps) {
-        const value = props[key as keyof BorderShorthandStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStart') {
-          attr = borderInlineStart(isRTL);
-        } else if (key === 'borderInlineEnd') {
-          attr = borderInlineEnd(isRTL);
-        } else {
-          attr = borderShorthandProps[key as keyof BorderShorthandStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderColors) {
-        const propValue = props[key as keyof BorderColorStyleProps] as CanvasColor | string;
-        const value = colorTokens[propValue as CanvasColor] || propValue;
-        let attr: string;
-        if (key === 'borderInlineStartColor') {
-          attr = borderInlineStartColor(isRTL);
-        } else if (key === 'borderInlineEndColor') {
-          attr = borderInlineEndColor(isRTL);
-        } else {
-          attr = borderColors[key as keyof BorderColorStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderRadii) {
-        const propValue = props[key as keyof BorderRadiusStyleProps] as
-          | CanvasBorderRadiusKeys
-          | number
-          | string;
-        const value = borderRadiusTokens[propValue as CanvasBorderRadiusKeys] || propValue;
-        const attr = borderRadii[key as keyof BorderRadiusStyleProps];
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderStyles) {
-        const value = props[key as keyof BorderLineStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStartStyle') {
-          attr = borderInlineStartStyle(isRTL);
-        } else if (key === 'borderInlineEndStyle') {
-          attr = borderInlineEndStyle(isRTL);
-        } else {
-          attr = borderStyles[key as keyof BorderLineStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderWidths) {
-        const value = props[key as keyof BorderWidthStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStartWidth') {
-          attr = borderInlineStartWidth(isRTL);
-        } else if (key === 'borderInlineEndWidth') {
-          attr = borderInlineEndWidth(isRTL);
-        } else {
-          attr = borderWidths[key as keyof BorderWidthStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-      }
-    }
-  }
-  return styles;
-}

package/common/lib/utils/color.ts

@@ -1,62 +0,0 @@
-import {colors as colorTokens, CanvasColor} from '@workday/canvas-kit-react/tokens';
-
-export type ColorTokens = typeof colorTokens;
-
-/** style props to for color properties */
-export type ColorStyleProps = {
-  /** sets `background` property */
-  background?: CanvasColor | (string & {});
-  /** sets `background-color` property */
-  backgroundColor?: CanvasColor | (string & {});
-  /** sets `background-image` property */
-  backgroundImage?: string;
-  /** sets `color` property */
-  color?: CanvasColor | (string & {});
-};
-
-const getBackground = (value: CanvasColor | string) => ({
-  background: colorTokens[value] || value,
-});
-
-const getBackgroundColor = (value: CanvasColor | string) => ({
-  backgroundColor: colorTokens[value] || value,
-});
-
-const getBackgroundImage = (value: string) => ({
-  backgroundImage: value,
-});
-
-const getColor = (value: CanvasColor | string) => ({
-  color: colorTokens[value] || value,
-});
-
-const colorProps = {
-  background: getBackground,
-  backgroundColor: getBackgroundColor,
-  backgroundImage: getBackgroundImage,
-  color: getColor,
-};
-
-/**
- * A style prop function that takes components props and returns color styles from canvas token values.
- * If no `ColorStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `color` with low-level, styled components
- * const BoxExample = () => (
- *   <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
- * );
- *
- */
-export function color<P extends ColorStyleProps>(props: P) {
-  let styles = {};
-  for (const key in props) {
-    if (key in colorProps) {
-      const value = props[key as keyof ColorStyleProps] as CanvasColor | string;
-      const colorFn = colorProps[key as keyof ColorStyleProps];
-      const style = colorFn(value);
-      styles = {...styles, ...style};
-    }
-  }
-  return styles;
-}

package/common/lib/utils/depth.ts

@@ -1,37 +0,0 @@
-import {depth as depthTokens} from '@workday/canvas-kit-react/tokens';
-
-export type DepthTokens = typeof depthTokens;
-export type DepthTokenKeys = keyof DepthTokens;
-export type DepthTokenValues = DepthTokens[keyof DepthTokens];
-
-/** style props to for depth styles */
-export type DepthStyleProps = {
-  /** sets depth styles (box-shadow & border) */
-  depth?: DepthTokenKeys;
-};
-
-const depthProps = {
-  depth: (token: DepthTokenKeys) => depthTokens[token],
-};
-
-/**
- * A style prop function that takes components props and returns depth styles from canvas token values.
- * If no `DepthStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll mostly likely use `depth` with low-level, styled components
- * const BoxExample = () => (
- *   <Box depth={3}>Hello, box shadows!</Box>
- * );
- *
- */
-export function depth<P extends DepthStyleProps>(props: P): DepthTokenValues {
-  for (const key in props) {
-    if (key in depthProps) {
-      const token = props[key as keyof DepthStyleProps] as DepthTokenKeys;
-      const depthFn = depthProps[key as keyof DepthStyleProps];
-      return depthFn(token);
-    }
-  }
-  return {} as DepthTokenValues;
-}