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

package/layout/lib/utils/border/lineStyle.ts

@@ -0,0 +1,87 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+
+/** style props to set CSS border style properties */
+export type BorderLineStyleProps = {
+  /** sets [CSS border-collapse property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse) */
+  borderCollapse?: Property.BorderCollapse;
+  /** sets [CSS border-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing) */
+  borderSpacing?: Property.BorderSpacing;
+  /** sets [CSS border-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) */
+  borderStyle?: Property.Border;
+  /** sets [CSS border-top-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style) */
+  borderTopStyle?: Property.Border;
+  /**
+   * - sets [CSS border-right-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style)
+   * - no bidirectional support
+   */
+  borderRightStyle?: Property.Border;
+  /** sets [CSS border-bottom-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style) */
+  borderBottomStyle?: Property.Border;
+  /**
+   * - sets [CSS border-left-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style)
+   * - no bidirectional support
+   */
+  borderLeftStyle?: Property.Border;
+  /**
+   * - sets [CSS border-inline-start-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style)
+   * - bidirectional support
+   */
+  borderInlineStartStyle?: Property.Border;
+  /**
+   * - sets [CSS border-inline-end-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style)
+   * - bidirectional support
+   */
+  borderInlineEndStyle?: Property.Border;
+};
+
+export const borderLineStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'borderCollapse',
+    properties: ['borderCollapse'],
+    system: 'none',
+  },
+  {
+    name: 'borderSpacing',
+    properties: ['borderSpacing'],
+    system: 'none',
+  },
+  {
+    name: 'borderStyle',
+    properties: ['borderStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderTopStyle',
+    properties: ['borderTopStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderRightStyle',
+    properties: ['borderRightStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderBottomStyle',
+    properties: ['borderBottomStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderLeftStyle',
+    properties: ['borderLeftStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineStartStyle',
+    properties: ['borderInlineStartStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineEndStyle',
+    properties: ['borderInlineEndStyle'],
+    system: 'none',
+  },
+];
+
+export const borderLineStyleFns = buildStyleFns(borderLineStyleFnConfigs);

package/layout/lib/utils/border/radius.ts

@@ -0,0 +1,61 @@
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+import {SystemPropValues} from '../systemProps';
+
+/** style props to set CSS border radius properties */
+export 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 const borderRadiusStyleFnConfigs: StyleFnConfig[] = [
+  {
+    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 const borderRadiusFns = buildStyleFns(borderRadiusStyleFnConfigs);

package/layout/lib/utils/border/shorthand.ts

@@ -0,0 +1,73 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+
+/** style props to set CSS border properties */
+export 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 const borderShorthandStyleFnConfigs: StyleFnConfig[] = [
+  {
+    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 const borderShorthandFns = buildStyleFns(borderShorthandStyleFnConfigs);

package/layout/lib/utils/border/width.ts

@@ -0,0 +1,73 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+
+/** style props to set CSS border width properties */
+export 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 const borderWidthStyleFnConfigs: StyleFnConfig[] = [
+  {
+    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 const borderWidthFns = buildStyleFns(borderWidthStyleFnConfigs);

package/layout/lib/utils/buildStyleFns.ts

@@ -0,0 +1,117 @@
+import {
+  borderRadius as borderRadiusTokens,
+  colors as colorTokens,
+  depth as depthTokens,
+  space as spaceTokens,
+  type as typeTokens,
+} from '@workday/canvas-kit-react/tokens';
+
+import {CanvasSystemPropValues, SystemPropNames, SystemPropValues} from './systemProps';
+
+export type StyleFnConfig = {
+  name: string;
+  properties: string[];
+  system: SystemPropNames | 'none';
+};
+
+export type StyleFns = {
+  [key: string]: (value: unknown) => {};
+};
+
+const getColor = (value: SystemPropValues['color']) => {
+  return colorTokens[value] || value;
+};
+
+const getDepth = (value: SystemPropValues['depth']) => {
+  return depthTokens[value];
+};
+
+const getShape = (value: SystemPropValues['shape']) => {
+  return borderRadiusTokens[value as CanvasSystemPropValues['shape']] || value;
+};
+
+const getSpace = (value: SystemPropValues['space']) => {
+  return spaceTokens[value as CanvasSystemPropValues['space']] || value;
+};
+
+const getFont = (value: SystemPropValues['font']) => {
+  return typeTokens.properties.fontFamilies[value as CanvasSystemPropValues['font']] || value;
+};
+
+const getFontSize = (value: SystemPropValues['fontSize'] | string) => {
+  return typeTokens.properties.fontSizes[value as CanvasSystemPropValues['fontSize']] || value;
+};
+
+const getFontWeight = (value: SystemPropValues['fontWeight'] | string) => {
+  return typeTokens.properties.fontWeights[value as CanvasSystemPropValues['fontWeight']] || value;
+};
+
+export function buildStyleFns(styleFnConfigs: StyleFnConfig[]): StyleFns {
+  return styleFnConfigs.reduce((styleFns = {}, styleFnConfig) => {
+    const styleFn = (value: unknown) => {
+      return styleFnConfig.properties.reduce((styles = {}, property: string) => {
+        if (styleFnConfig.system === 'color') {
+          return {...styles, [property]: getColor(value as SystemPropValues['color'])};
+        }
+
+        if (styleFnConfig.system === 'depth') {
+          // Depth tokens return the style property (box-shadow) and the value
+          const depthStyle = getDepth(value as SystemPropValues['depth']);
+          return {...styles, ...depthStyle};
+        }
+
+        if (styleFnConfig.system === 'font') {
+          return {
+            ...styles,
+            [property]: getFont(value as SystemPropValues['font']),
+          };
+        }
+
+        if (styleFnConfig.system === 'fontSize') {
+          return {
+            ...styles,
+            [property]: getFontSize(value as SystemPropValues['fontSize']),
+          };
+        }
+
+        if (styleFnConfig.system === 'fontWeight') {
+          return {
+            ...styles,
+            [property]: getFontWeight(value as SystemPropValues['fontWeight']),
+          };
+        }
+
+        if (styleFnConfig.system === 'shape') {
+          return {
+            ...styles,
+            [property]: getShape(value as SystemPropValues['shape']),
+          };
+        }
+
+        if (styleFnConfig.system === 'space') {
+          return {...styles, [property]: getSpace(value as SystemPropValues['space'])};
+        }
+
+        return {...styles, [property]: value};
+      }, {});
+    };
+
+    return {...styleFns, [styleFnConfig.name]: styleFn};
+  }, {});
+}
+
+export function buildStylePropFn<P extends {}>(styleFns: StyleFns) {
+  return (props: P) => {
+    let styles = {};
+    for (const key in props) {
+      if (key in props && key in styleFns) {
+        const styleFn = styleFns[key];
+        const value = props[key];
+        const style = styleFn(value);
+        styles = {...styles, ...style};
+        continue;
+      }
+    }
+    return styles;
+  };
+}

package/layout/lib/utils/color.ts

@@ -1,62 +1,52 @@
-import {colors as colorTokens, CanvasColor} from '@workday/canvas-kit-react/tokens';
+import {Property} from 'csstype';
 
-export type ColorTokens = typeof colorTokens;
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
 
-/** style props to for color properties */
+/** style props to set CSS 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,
+  /**
+   * - 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 const colorStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'backgroundColor',
+    properties: ['backgroundColor'],
+    system: 'color',
+  },
+  {
+    name: 'color',
+    properties: ['color'],
+    system: 'color',
+  },
+  {
+    name: 'opacity',
+    properties: ['opacity'],
+    system: 'none',
+  },
+];
+
+export const 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<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;
-}
+export const color = buildStylePropFn<ColorStyleProps>(colorFns);

package/layout/lib/utils/depth.ts

@@ -1,37 +1,41 @@
-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];
+import {Property} from 'csstype';
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
 
 /** style props to for depth styles */
 export 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'];
 };
 
-const depthProps = {
-  depth: (token: DepthTokenKeys) => depthTokens[token],
-};
+export const depthStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'boxShadow',
+    properties: ['boxShadow'],
+    system: 'none',
+  },
+  {
+    name: 'depth',
+    properties: ['boxShadow'],
+    system: 'depth',
+  },
+];
 
+export const 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<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;
-}
+export const depth = buildStylePropFn<DepthStyleProps>(depthStyleFns);