@workday/canvas-kit-react 7.0.0-alpha.129-next.3 → 7.0.0-alpha.256-next.2

package/dist/es6/layout/lib/utils/border/radius.d.ts

@@ -0,0 +1,33 @@
+import { StyleFnConfig } from '../buildStyleFns';
+import { SystemPropValues } from '../systemProps';
+/** style props to set CSS border radius properties */
+export declare type BorderRadiusStyleProps = {
+    /**
+     * - sets [CSS border-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
+     * - system tokens: `shape`
+     * */
+    borderRadius?: SystemPropValues['shape'];
+    /**
+     * - sets [CSS border-top-left-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius)
+     * - system tokens: `shape`
+     * */
+    borderTopLeftRadius?: SystemPropValues['shape'];
+    /**
+     * - sets [CSS border-top-right-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius)
+     * - system tokens: `shape`
+     * */
+    borderTopRightRadius?: SystemPropValues['shape'];
+    /**
+     * - sets [CSS border-bottom-left-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius)
+     * - system tokens: `shape`
+     * */
+    borderBottomLeftRadius?: SystemPropValues['shape'];
+    /**
+     * - sets [CSS border-bottom-right-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius)
+     * - system tokens: `shape`
+     * */
+    borderBottomRightRadius?: SystemPropValues['shape'];
+};
+export declare const borderRadiusStyleFnConfigs: StyleFnConfig[];
+export declare const borderRadiusFns: import("../buildStyleFns").StyleFns;
+//# sourceMappingURL=radius.d.ts.map

package/dist/es6/layout/lib/utils/border/radius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.d.ts","sourceRoot":"","sources":["../../../../../../layout/lib/utils/border/radius.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAEhD,sDAAsD;AACtD,oBAAY,sBAAsB,GAAG;IACnC;;;SAGK;IACL,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACzC;;;SAGK;IACL,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAChD;;;SAGK;IACL,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjD;;;SAGK;IACL,sBAAsB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnD;;;SAGK;IACL,uBAAuB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,aAAa,EA0BrD,CAAC;AAEF,eAAO,MAAM,eAAe,qCAA4C,CAAC"}

package/dist/es6/layout/lib/utils/border/radius.js

@@ -0,0 +1,29 @@
+import { buildStyleFns } from '../buildStyleFns';
+export var borderRadiusStyleFnConfigs = [
+    {
+        name: 'borderRadius',
+        properties: ['borderRadius'],
+        system: 'shape',
+    },
+    {
+        name: 'borderTopLeftRadius',
+        properties: ['borderTopLeftRadius'],
+        system: 'shape',
+    },
+    {
+        name: 'borderTopRightRadius',
+        properties: ['borderTopRightRadius'],
+        system: 'shape',
+    },
+    {
+        name: 'borderBottomLeftRadius',
+        properties: ['borderBottomLeftRadius'],
+        system: 'shape',
+    },
+    {
+        name: 'borderBottomRightRadius',
+        properties: ['borderBottomRightRadius'],
+        system: 'shape',
+    },
+];
+export var borderRadiusFns = buildStyleFns(borderRadiusStyleFnConfigs);

package/dist/es6/layout/lib/utils/border/shorthand.d.ts

@@ -0,0 +1,34 @@
+import { Property } from 'csstype';
+import { StyleFnConfig } from '../buildStyleFns';
+/** style props to set CSS border properties */
+export declare type BorderShorthandStyleProps = {
+    /** sets [CSS border property](https://developer.mozilla.org/en-US/docs/Web/CSS/border) */
+    border?: Property.Border;
+    /** sets [CSS border-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) */
+    borderTop?: Property.BorderTop;
+    /**
+     * - sets [CSS border-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right)
+     * - no bidirectional support
+     * */
+    borderRight?: Property.BorderRight;
+    /** sets [CSS border-bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) */
+    borderBottom?: Property.BorderBottom;
+    /**
+     * - sets [CSS border-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left)
+     * - no bidirectional support
+     * */
+    borderLeft?: Property.BorderLeft;
+    /**
+     * - sets [CSS border-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start)
+     * - bidirectional support
+     * */
+    borderInlineStart?: Property.BorderInlineStart;
+    /**
+     * - sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end)
+     * - bidirectional support
+     * */
+    borderInlineEnd?: Property.BorderInlineEnd;
+};
+export declare const borderShorthandStyleFnConfigs: StyleFnConfig[];
+export declare const borderShorthandFns: import("../buildStyleFns").StyleFns;
+//# sourceMappingURL=shorthand.d.ts.map

package/dist/es6/layout/lib/utils/border/shorthand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shorthand.d.ts","sourceRoot":"","sources":["../../../../../../layout/lib/utils/border/shorthand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAgB,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAE9D,+CAA+C;AAC/C,oBAAY,yBAAyB,GAAG;IACtC,0FAA0F;IAC1F,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzB,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;;SAGK;IACL,WAAW,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;IACnC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC;;;SAGK;IACL,iBAAiB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC;IAC/C;;;SAGK;IACL,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,aAAa,EAoCxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,qCAA+C,CAAC"}

package/dist/es6/layout/lib/utils/border/shorthand.js

@@ -0,0 +1,39 @@
+import { buildStyleFns } from '../buildStyleFns';
+export var borderShorthandStyleFnConfigs = [
+    {
+        name: 'border',
+        properties: ['border'],
+        system: 'none',
+    },
+    {
+        name: 'borderTop',
+        properties: ['borderTop'],
+        system: 'none',
+    },
+    {
+        name: 'borderRight',
+        properties: ['borderRight'],
+        system: 'none',
+    },
+    {
+        name: 'borderBottom',
+        properties: ['borderBottom'],
+        system: 'none',
+    },
+    {
+        name: 'borderLeft',
+        properties: ['borderLeft'],
+        system: 'none',
+    },
+    {
+        name: 'borderInlineStart',
+        properties: ['borderInlineStart'],
+        system: 'none',
+    },
+    {
+        name: 'borderInlineEnd',
+        properties: ['borderInlineEnd'],
+        system: 'none',
+    },
+];
+export var borderShorthandFns = buildStyleFns(borderShorthandStyleFnConfigs);

package/dist/es6/layout/lib/utils/border/width.d.ts

@@ -0,0 +1,34 @@
+import { Property } from 'csstype';
+import { StyleFnConfig } from '../buildStyleFns';
+/** style props to set CSS border width properties */
+export declare type BorderWidthStyleProps = {
+    /** sets [CSS border-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) */
+    borderWidth?: Property.BorderWidth | number;
+    /** sets [CSS border-top-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) */
+    borderTopWidth?: Property.BorderTopWidth | number;
+    /**
+     * - sets [CSS border-right-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width)
+     * - no bidirectional support
+     * */
+    borderRightWidth?: Property.BorderRightWidth | number;
+    /** sets [CSS border-bottom-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) */
+    borderBottomWidth?: Property.BorderBottomWidth | number;
+    /**
+     * - sets [CSS border-left-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width)
+     * - no bidirectional support
+     * */
+    borderLeftWidth?: Property.BorderLeftWidth | number;
+    /**
+     * - sets [CSS border-inline-start-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width)
+     * - bidirectional support
+     * */
+    borderInlineStartWidth?: Property.BorderInlineStartWidth | number;
+    /**
+     * - sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end)
+     * - bidirectional support
+     * */
+    borderInlineEndWidth?: Property.BorderInlineEndWidth | number;
+};
+export declare const borderWidthStyleFnConfigs: StyleFnConfig[];
+export declare const borderWidthFns: import("../buildStyleFns").StyleFns;
+//# sourceMappingURL=width.d.ts.map

package/dist/es6/layout/lib/utils/border/width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"width.d.ts","sourceRoot":"","sources":["../../../../../../layout/lib/utils/border/width.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAgB,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAE9D,qDAAqD;AACrD,oBAAY,qBAAqB,GAAG;IAClC,sGAAsG;IACtG,WAAW,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,MAAM,CAAC;IAC5C,8GAA8G;IAC9G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,GAAG,MAAM,CAAC;IAClD;;;SAGK;IACL,gBAAgB,CAAC,EAAE,QAAQ,CAAC,gBAAgB,GAAG,MAAM,CAAC;IACtD,oHAAoH;IACpH,iBAAiB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,GAAG,MAAM,CAAC;IACxD;;;SAGK;IACL,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,GAAG,MAAM,CAAC;IACpD;;;SAGK;IACL,sBAAsB,CAAC,EAAE,QAAQ,CAAC,sBAAsB,GAAG,MAAM,CAAC;IAClE;;;SAGK;IACL,oBAAoB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,GAAG,MAAM,CAAC;CAC/D,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,aAAa,EAoCpD,CAAC;AAEF,eAAO,MAAM,cAAc,qCAA2C,CAAC"}

package/dist/es6/layout/lib/utils/border/width.js

@@ -0,0 +1,39 @@
+import { buildStyleFns } from '../buildStyleFns';
+export var borderWidthStyleFnConfigs = [
+    {
+        name: 'borderWidth',
+        properties: ['borderWidth'],
+        system: 'none',
+    },
+    {
+        name: 'borderTopWidth',
+        properties: ['borderTopWidth'],
+        system: 'none',
+    },
+    {
+        name: 'borderRightWidth',
+        properties: ['borderRightWidth'],
+        system: 'none',
+    },
+    {
+        name: 'borderBottomWidth',
+        properties: ['borderBottomWidth'],
+        system: 'none',
+    },
+    {
+        name: 'borderLeftWidth',
+        properties: ['borderLeftWidth'],
+        system: 'none',
+    },
+    {
+        name: 'borderInlineStartWidth',
+        properties: ['borderInlineStartWidth'],
+        system: 'none',
+    },
+    {
+        name: 'borderInlineEndWidth',
+        properties: ['borderInlineEndWidth'],
+        system: 'none',
+    },
+];
+export var borderWidthFns = buildStyleFns(borderWidthStyleFnConfigs);

package/dist/es6/layout/lib/utils/buildStyleFns.d.ts

@@ -0,0 +1,12 @@
+import { SystemPropNames } from './systemProps';
+export declare type StyleFnConfig = {
+    name: string;
+    properties: string[];
+    system: SystemPropNames | 'none';
+};
+export declare type StyleFns = {
+    [key: string]: (value: unknown) => {};
+};
+export declare function buildStyleFns(styleFnConfigs: StyleFnConfig[]): StyleFns;
+export declare function buildStylePropFn<P extends {}>(styleFns: StyleFns): (props: P) => {};
+//# sourceMappingURL=buildStyleFns.d.ts.map

package/dist/es6/layout/lib/utils/buildStyleFns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildStyleFns.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/buildStyleFns.ts"],"names":[],"mappings":"AAQA,OAAO,EAAyB,eAAe,EAAmB,MAAM,eAAe,CAAC;AAExF,oBAAY,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,eAAe,GAAG,MAAM,CAAC;CAClC,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,EAAE,CAAC;CACvC,CAAC;AA8BF,wBAAgB,aAAa,CAAC,cAAc,EAAE,aAAa,EAAE,GAAG,QAAQ,CAoDvE;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,WAChD,CAAC,QAajB"}

package/dist/es6/layout/lib/utils/buildStyleFns.js

@@ -0,0 +1,85 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { borderRadius as borderRadiusTokens, colors as colorTokens, depth as depthTokens, space as spaceTokens, type as typeTokens, } from '@workday/canvas-kit-react/tokens';
+var getColor = function (value) {
+    return colorTokens[value] || value;
+};
+var getDepth = function (value) {
+    return depthTokens[value];
+};
+var getShape = function (value) {
+    return borderRadiusTokens[value] || value;
+};
+var getSpace = function (value) {
+    return spaceTokens[value] || value;
+};
+var getFont = function (value) {
+    return typeTokens.properties.fontFamilies[value] || value;
+};
+var getFontSize = function (value) {
+    return typeTokens.properties.fontSizes[value] || value;
+};
+var getFontWeight = function (value) {
+    return typeTokens.properties.fontWeights[value] || value;
+};
+export function buildStyleFns(styleFnConfigs) {
+    return styleFnConfigs.reduce(function (styleFns, styleFnConfig) {
+        var _a;
+        if (styleFns === void 0) { styleFns = {}; }
+        var styleFn = function (value) {
+            return styleFnConfig.properties.reduce(function (styles, property) {
+                var _a, _b, _c, _d, _e, _f, _g;
+                if (styles === void 0) { styles = {}; }
+                if (styleFnConfig.system === 'color') {
+                    return __assign(__assign({}, styles), (_a = {}, _a[property] = getColor(value), _a));
+                }
+                if (styleFnConfig.system === 'depth') {
+                    // Depth tokens return the style property (box-shadow) and the value
+                    var depthStyle = getDepth(value);
+                    return __assign(__assign({}, styles), depthStyle);
+                }
+                if (styleFnConfig.system === 'font') {
+                    return __assign(__assign({}, styles), (_b = {}, _b[property] = getFont(value), _b));
+                }
+                if (styleFnConfig.system === 'fontSize') {
+                    return __assign(__assign({}, styles), (_c = {}, _c[property] = getFontSize(value), _c));
+                }
+                if (styleFnConfig.system === 'fontWeight') {
+                    return __assign(__assign({}, styles), (_d = {}, _d[property] = getFontWeight(value), _d));
+                }
+                if (styleFnConfig.system === 'shape') {
+                    return __assign(__assign({}, styles), (_e = {}, _e[property] = getShape(value), _e));
+                }
+                if (styleFnConfig.system === 'space') {
+                    return __assign(__assign({}, styles), (_f = {}, _f[property] = getSpace(value), _f));
+                }
+                return __assign(__assign({}, styles), (_g = {}, _g[property] = value, _g));
+            }, {});
+        };
+        return __assign(__assign({}, styleFns), (_a = {}, _a[styleFnConfig.name] = styleFn, _a));
+    }, {});
+}
+export function buildStylePropFn(styleFns) {
+    return function (props) {
+        var styles = {};
+        for (var key in props) {
+            if (key in props && key in styleFns) {
+                var styleFn = styleFns[key];
+                var value = props[key];
+                var style = styleFn(value);
+                styles = __assign(__assign({}, styles), style);
+                continue;
+            }
+        }
+        return styles;
+    };
+}

package/dist/es6/layout/lib/utils/color.d.ts

@@ -1,26 +1,33 @@
-import { colors as colorTokens, CanvasColor } from '@workday/canvas-kit-react/tokens';
-export declare type ColorTokens = typeof colorTokens;
-/** style props to for color properties */
+import { Property } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
+/** style props to set CSS color properties */
 export declare 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 & {});
+    /**
+     * - sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
+     * - system tokens: `color`
+     * */
+    backgroundColor?: SystemPropValues['color'];
+    /**
+     * - sets [CSS color property](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
+     * - system tokens: `color`
+     * */
+    color?: SystemPropValues['color'];
+    /** sets [CSS opacity property](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) */
+    opacity?: Property.Opacity;
 };
+export declare const colorStyleFnConfigs: StyleFnConfig[];
+export declare const colorFns: import("./buildStyleFns").StyleFns;
 /**
- * A style prop function that takes components props and returns color styles from canvas token values.
+ * A style prop function that takes component 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
+ * ```tsx
  * const BoxExample = () => (
- *   <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
+ *   <Box color="frenchVanilla100" opacity={0.6}>Hello, colors!</Box>
  * );
- *
+ * ```
  */
-export declare function color<P extends ColorStyleProps>(props: P): {};
+export declare const color: (props: ColorStyleProps) => {};
 //# sourceMappingURL=color.d.ts.map

package/dist/es6/layout/lib/utils/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,IAAI,WAAW,EAAE,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAEpF,oBAAY,WAAW,GAAG,OAAO,WAAW,CAAC;AAE7C,0CAA0C;AAC1C,oBAAY,eAAe,GAAG;IAC5B,iCAAiC;IACjC,UAAU,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzC,uCAAuC;IACvC,eAAe,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACrC,CAAC;AAyBF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MAWxD"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,8CAA8C;AAC9C,oBAAY,eAAe,GAAG;IAC5B;;;SAGK;IACL,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C;;;SAGK;IACL,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,4FAA4F;IAC5F,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAAa,EAgB9C,CAAC;AAEF,eAAO,MAAM,QAAQ,oCAAqC,CAAC;AAC3D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,gCAA8C,CAAC"}

package/dist/es6/layout/lib/utils/color.js

@@ -1,53 +1,31 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { colors as colorTokens } from '@workday/canvas-kit-react/tokens';
-var getBackground = function (value) { return ({
-    background: colorTokens[value] || value,
-}); };
-var getBackgroundColor = function (value) { return ({
-    backgroundColor: colorTokens[value] || value,
-}); };
-var getBackgroundImage = function (value) { return ({
-    backgroundImage: value,
-}); };
-var getColor = function (value) { return ({
-    color: colorTokens[value] || value,
-}); };
-var colorProps = {
-    background: getBackground,
-    backgroundColor: getBackgroundColor,
-    backgroundImage: getBackgroundImage,
-    color: getColor,
-};
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var colorStyleFnConfigs = [
+    {
+        name: 'backgroundColor',
+        properties: ['backgroundColor'],
+        system: 'color',
+    },
+    {
+        name: 'color',
+        properties: ['color'],
+        system: 'color',
+    },
+    {
+        name: 'opacity',
+        properties: ['opacity'],
+        system: 'none',
+    },
+];
+export var colorFns = buildStyleFns(colorStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns color styles from canvas token values.
+ * A style prop function that takes component 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
+ * ```tsx
  * const BoxExample = () => (
- *   <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
+ *   <Box color="frenchVanilla100" opacity={0.6}>Hello, colors!</Box>
  * );
- *
+ * ```
  */
-export function color(props) {
-    var styles = {};
-    for (var key in props) {
-        if (key in colorProps) {
-            var value = props[key];
-            var colorFn = colorProps[key];
-            var style = colorFn(value);
-            styles = __assign(__assign({}, styles), style);
-        }
-    }
-    return styles;
-}
+export var color = buildStylePropFn(colorFns);

package/dist/es6/layout/lib/utils/depth.d.ts

@@ -1,22 +1,28 @@
-import { depth as depthTokens } from '@workday/canvas-kit-react/tokens';
-export declare type DepthTokens = typeof depthTokens;
-export declare type DepthTokenKeys = keyof DepthTokens;
-export declare type DepthTokenValues = DepthTokens[keyof DepthTokens];
+import { Property } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
 /** style props to for depth styles */
 export declare type DepthStyleProps = {
-    /** sets depth styles (box-shadow & border) */
-    depth?: DepthTokenKeys;
+    /** sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) */
+    boxShadow?: Property.BoxShadow;
+    /**
+     * - sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
+     * - system tokens: `depth`
+     * */
+    depth?: SystemPropValues['depth'];
 };
+export declare const depthStyleFnConfigs: StyleFnConfig[];
+export declare const depthStyleFns: import("./buildStyleFns").StyleFns;
 /**
- * A style prop function that takes components props and returns depth styles from canvas token values.
+ * A style prop function that takes component 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 = () => (
+ * ```tsx
+ * const DepthExample = () => (
  *   <Box depth={3}>Hello, box shadows!</Box>
  * );
- *
+ * ```
  */
-export declare function depth<P extends DepthStyleProps>(props: P): DepthTokenValues;
+export declare const depth: (props: DepthStyleProps) => {};
 //# sourceMappingURL=depth.d.ts.map

package/dist/es6/layout/lib/utils/depth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/depth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,IAAI,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAEtE,oBAAY,WAAW,GAAG,OAAO,WAAW,CAAC;AAC7C,oBAAY,cAAc,GAAG,MAAM,WAAW,CAAC;AAC/C,oBAAY,gBAAgB,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,CAAC;AAE9D,sCAAsC;AACtC,oBAAY,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAMF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,GAAG,gBAAgB,CAS3E"}
+{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/depth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACjC,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,sCAAsC;AACtC,oBAAY,eAAe,GAAG;IAC5B,gGAAgG;IAChG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;;SAGK;IACL,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAAa,EAW9C,CAAC;AAEF,eAAO,MAAM,aAAa,oCAAqC,CAAC;AAChE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,gCAAmD,CAAC"}

package/dist/es6/layout/lib/utils/depth.js

@@ -1,25 +1,26 @@
-import { depth as depthTokens } from '@workday/canvas-kit-react/tokens';
-var depthProps = {
-    depth: function (token) { return depthTokens[token]; },
-};
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export var depthStyleFnConfigs = [
+    {
+        name: 'boxShadow',
+        properties: ['boxShadow'],
+        system: 'none',
+    },
+    {
+        name: 'depth',
+        properties: ['boxShadow'],
+        system: 'depth',
+    },
+];
+export var depthStyleFns = buildStyleFns(depthStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns depth styles from canvas token values.
+ * A style prop function that takes component 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 = () => (
+ * ```tsx
+ * const DepthExample = () => (
  *   <Box depth={3}>Hello, box shadows!</Box>
  * );
- *
+ * ```
  */
-export function depth(props) {
-    for (var key in props) {
-        if (key in depthProps) {
-            var token = props[key];
-            var depthFn = depthProps[key];
-            return depthFn(token);
-        }
-    }
-    return {};
-}
+export var depth = buildStylePropFn(depthStyleFns);

package/dist/es6/layout/lib/utils/flex.d.ts

@@ -1,36 +1,55 @@
-import { Property } from 'csstype';
-/** style props to for flexbox container properties */
+import { Property, Globals } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
+/** style props to for CSS flexbox container properties */
 export declare type FlexStyleProps = {
-    /** sets `align-items` property */
+    /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) */
     alignItems?: Property.AlignItems;
-    /** sets `align-content` property */
+    /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) */
     alignContent?: Property.AlignContent;
     /**
-     * sets `display` property
-     * @default 'flex'
+     * - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+     * - @default 'flex'
      * */
-    display?: 'flex' | 'inline-flex';
-    /** sets `justify-items` property */
+    display?: 'flex' | 'inline-flex' | 'none' | Globals | (string & {});
+    /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) */
     justifyItems?: Property.JustifyItems;
-    /** sets `justify-content` property */
+    /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
     justifyContent?: Property.JustifyContent;
-    /** sets `flex-wrap` property */
+    /** sets [CSS flex-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) */
     flexWrap?: Property.FlexWrap;
-    /** sets `flex-direction` property */
+    /** sets [CSS flex-direction property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) */
     flexDirection?: Property.FlexDirection;
+    /**
+     * - sets [CSS gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+     * - system tokens: `space`
+     * */
+    gap?: SystemPropValues['space'];
+    /**
+     * - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)
+     * - system tokens: `space`
+     * */
+    columnGap?: SystemPropValues['space'];
+    /**
+     * - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)
+     * - system tokens: `space`
+     * */
+    rowGap?: SystemPropValues['space'];
 };
+export declare const flexStyleFnConfigs: StyleFnConfig[];
+export declare const flexStyleFns: import("./buildStyleFns").StyleFns;
 /**
  * A style prop function that takes component props and returns flexbox styles.
  * If no `FlexStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `flex` with low-level, styled components
+ * ```tsx
  * const FlexExample = () => (
  *   <Flex justifyContent="center" alignItems="center">
  *     Hello, flex!
  *   </Flex>
  * );
- *
+ * ```
  */
-export declare function flex<P extends FlexStyleProps>(props: P): {};
+export declare const flex: (props: FlexStyleProps) => {};
 //# sourceMappingURL=flex.d.ts.map

package/dist/es6/layout/lib/utils/flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/flex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,sDAAsD;AACtD,oBAAY,cAAc,GAAG;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,sCAAsC;IACtC,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,qCAAqC;IACrC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;CACxC,CAAC;AAYF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,CAAC,MAWtD"}
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/flex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,0DAA0D;AAC1D,oBAAY,cAAc,GAAG;IAC3B,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpE,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,gGAAgG;IAChG,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,0GAA0G;IAC1G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC;;;SAGK;IACL,GAAG,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAChC;;;SAGK;IACL,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC;;;SAGK;IACL,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,EAmD7C,CAAC;AAEF,eAAO,MAAM,YAAY,oCAAoC,CAAC;AAC9D;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI,+BAAiD,CAAC"}