@workday/canvas-kit-react 15.0.0-alpha.1283-next.0 → 15.0.0-alpha.1285-next.0

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

@@ -1,42 +1,72 @@
 import { Property } from 'csstype';
 import { StyleFnConfig } from './buildStyleFns';
 import { SystemPropValues } from './systemProps';
-/** style props to for CSS font and text properties */
+/** style props to for CSS font and text properties
+ * @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs).
+ */
 export type TextStyleProps = {
     /**
      * - sets [CSS font-family property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
-     * - system tokens: `font` */
+     * - system tokens: `font`
+     * @deprecated
+     */
     fontFamily?: Property.FontFamily | SystemPropValues['font'];
     /**
      * - sets [CSS font-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
-     * - system tokens: `fontSize` */
+     * - system tokens: `fontSize`
+     * @deprecated
+     */
     fontSize?: Property.FontSize | SystemPropValues['fontSize'];
-    /** sets [CSS font-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) */
+    /** sets [CSS font-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)
+     * @deprecated
+     */
     fontStyle?: Property.FontStyle;
     /**
      * - sets [CSS font-weight property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
-     * - system tokens: `fontWeight` */
+     * - system tokens: `fontWeight`
+     * @deprecated
+     */
     fontWeight?: Property.FontWeight | SystemPropValues['fontWeight'];
-    /** sets [CSS line-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) */
+    /** sets [CSS line-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
+     * @deprecated
+     */
     lineHeight?: Property.LineHeight;
-    /** sets [CSS letter-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) */
+    /** sets [CSS letter-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)
+     * @deprecated
+     */
     letterSpacing?: Property.LetterSpacing;
-    /** sets [CSS text-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) */
+    /** sets [CSS text-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
+     * @deprecated
+     */
     textAlign?: Property.TextAlign;
-    /** sets [CSS text-decoration property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) */
+    /** sets [CSS text-decoration property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)
+     * @deprecated
+     */
     textDecoration?: Property.TextDecoration;
-    /** sets [CSS text-overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) */
+    /** sets [CSS text-overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
+     * @deprecated
+     */
     textOverflow?: Property.TextOverflow;
-    /** sets [CSS text-transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) */
+    /** sets [CSS text-transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)
+     * @deprecated
+     */
     textTransform?: Property.TextTransform;
-    /** sets [CSS text-shadow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) */
+    /** sets [CSS text-shadow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)
+     * @deprecated
+     */
     textShadow?: Property.TextShadow;
-    /** sets [CSS white-space property](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) */
+    /** sets [CSS white-space property](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
+     * @deprecated
+     */
     whiteSpace?: Property.WhiteSpace;
-    /** sets [CSS word-break property](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) */
+    /** sets [CSS word-break property](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
+     * @deprecated
+     */
     wordBreak?: Property.WordBreak;
 };
+/** @deprecated */
 export declare const textStyleFnConfigs: StyleFnConfig[];
+/** @deprecated */
 export declare const textStyleFns: import("./buildStyleFns").StyleFns;
 /**
  * A style prop function that takes component props and returns font and text styles.
@@ -48,6 +78,7 @@ export declare const textStyleFns: import("./buildStyleFns").StyleFns;
  *   <Box textAlign="center" fontWeight="medium">Hello, alignment!</Box>
  * );
  * ```
+ * @deprecated
  */
 export declare const text: (props: TextStyleProps) => {};
 //# sourceMappingURL=text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/text.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,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG;IAC3B;;iCAE6B;IAC7B,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC5D;;qCAEiC;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAC5D,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;uCAEmC;IACnC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAClE,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,0GAA0G;IAC1G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,wGAAwG;IACxG,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,0GAA0G;IAC1G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,oGAAoG;IACpG,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kGAAkG;IAClG,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,EAkE7C,CAAC;AAEF,eAAO,MAAM,YAAY,oCAAoC,CAAC;AAC9D;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,+BAAiD,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/text.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;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAC5D;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAClE;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC;;OAEG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,kBAAkB;AAClB,eAAO,MAAM,kBAAkB,EAAE,aAAa,EAkE7C,CAAC;AAEF,kBAAkB;AAClB,eAAO,MAAM,YAAY,oCAAoC,CAAC;AAC9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI,+BAAiD,CAAC"}

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

@@ -1,4 +1,5 @@
 import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+/** @deprecated */
 export const textStyleFnConfigs = [
     {
         name: 'fontFamily',
@@ -66,6 +67,7 @@ export const textStyleFnConfigs = [
         system: 'none',
     },
 ];
+/** @deprecated */
 export const textStyleFns = buildStyleFns(textStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns font and text styles.
@@ -77,5 +79,6 @@ export const textStyleFns = buildStyleFns(textStyleFnConfigs);
  *   <Box textAlign="center" fontWeight="medium">Hello, alignment!</Box>
  * );
  * ```
+ * @deprecated
  */
 export const text = buildStylePropFn(textStyleFns);

package/dist/es6/text-input/lib/TextInput.js

@@ -7,15 +7,15 @@ export const textInputStencil = createStencil({
     vars: {
         width: '',
     },
-    base: { name: "18drvp", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1-half);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-696c53);min-width:var(--width-text-input-696c53, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-fg-disabled);&::placeholder{color:var(--cnvs-sys-color-fg-disabled);}}" },
+    base: { name: "3rj64e", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x1-half));height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-696c53);min-width:var(--width-text-input-696c53, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-fg-disabled);&::placeholder{color:var(--cnvs-sys-color-fg-disabled);}}" },
     modifiers: {
         grow: {
-            true: { name: "kxkr6", styles: "width:100%;resize:vertical;" },
-            false: { name: "3i5nz5", styles: "width:initial;" }
+            true: { name: "28pgp9", styles: "width:100%;resize:vertical;" },
+            false: { name: "3mn8t8", styles: "width:initial;" }
         },
         error: {
-            error: { name: "48d7tw", styles: "border-color:var(--cnvs-brand-common-error-inner);border-width:0.125rem;background-color:var(--cnvs-brand-error-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-error-inner);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
-            caution: { name: "anba1", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
+            error: { name: "20wgzr", styles: "border-color:var(--cnvs-brand-common-error-inner);border-width:0.125rem;background-color:var(--cnvs-brand-error-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-error-inner);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
+            caution: { name: "miahg", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
         }
     },
     defaultModifiers: {

package/layout/lib/Box.tsx

@@ -63,6 +63,7 @@ const omittedProps = [
   'wordBreak',
 ];
 
+/** @deprecated */
 const shouldForwardProp = (prop: string) => {
   return isPropValid(prop) && !omittedProps.includes(prop);
 };
@@ -84,6 +85,7 @@ const shouldForwardProp = (prop: string) => {
  *
  * <StyledHeader color='red'>Hello World</StyledHeader>
  * ```
+ * @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs).
  */
 export const boxStyleFn = <P extends BoxProps>(props: P) => {
   return [

package/layout/lib/utils/background.ts

@@ -3,30 +3,45 @@ import {Property} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to set CSS background properties */
+/** style props to set CSS background properties
+ * @deprecated
+ */
 export type BackgroundStyleProps = {
   /**
    * - sets [CSS background property](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
    * - system tokens: `color`
-   * */
+   * @deprecated Use `cs` prop with `system.color.bg.*` tokens
+   */
   background?: SystemPropValues['color'];
-  /** sets [CSS background-attachment property](https://developer.mozilla.org/en-US/docs/Web/CSS/) */
+  /** sets [CSS background-attachment property](https://developer.mozilla.org/en-US/docs/Web/CSS/)
+   * @deprecated
+   */
   backgroundAttachment?: Property.BackgroundAttachment;
   /**
    * - sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
    * - system tokens: `color`
-   * */
+   * @deprecated Use `cs` prop with `system.color.bg.*` tokens
+   */
   backgroundColor?: SystemPropValues['color'];
-  /** sets [CSS background-image property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) */
+  /** sets [CSS background-image property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)
+   * @deprecated
+   */
   backgroundImage?: Property.BackgroundImage;
-  /** sets [CSS background-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) */
+  /** sets [CSS background-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)
+   * @deprecated
+   */
   backgroundPosition?: Property.BackgroundPosition;
-  /** sets [CSS background-repeat property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) */
+  /** sets [CSS background-repeat property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)
+   * @deprecated
+   */
   backgroundRepeat?: Property.BackgroundRepeat;
-  /** sets [CSS background-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) */
+  /** sets [CSS background-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
+   * @deprecated
+   */
   backgroundSize?: Property.BackgroundSize;
 };
 
+/** @deprecated */
 export const backgroundStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'background',
@@ -65,6 +80,7 @@ export const backgroundStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const backgroundFns = buildStyleFns(backgroundStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns border styles.
@@ -79,5 +95,6 @@ export const backgroundFns = buildStyleFns(backgroundStyleFnConfigs);
  *   </Box>
  * );
  *```
+ @deprecated
  */
 export const background = buildStylePropFn<BackgroundStyleProps>(backgroundFns);

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

@@ -1,49 +1,59 @@
 import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
 import {SystemPropValues} from '../systemProps';
 
-/** style props to set CSS border color properties */
+/** style props to set CSS border color properties
+ * @deprecated
+ */
 export type BorderColorStyleProps = {
   /**
    * - sets [CSS border-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
    * - system tokens: `color`
+   * @deprecated Use `cs` prop with `system.color.border.*` tokens
    */
   borderColor?: SystemPropValues['color'];
   /**
    * - sets [CSS border-top-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
    * - system tokens: `color`
+   * @deprecated Use `cs` prop with `system.color.border.*` tokens
    */
   borderTopColor?: SystemPropValues['color'];
   /**
    * - sets [CSS border-right-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
    * - no bidirectional support
    * - system tokens: `color`
+   * @deprecated Use `cs` prop with `system.color.border.*` tokens
    */
   borderRightColor?: SystemPropValues['color'];
   /**
    * - sets [CSS border-bottom-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
    * - system tokens: `color`
+   * @deprecated Use `cs` prop with `system.color.border.*` tokens
    */
   borderBottomColor?: SystemPropValues['color'];
   /**
    * - sets [CSS border-left-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
    * - no bidirectional support
    * - system tokens: `color`
+   * @deprecated Use `cs` prop with `system.color.border.*` tokens
    */
   borderLeftColor?: SystemPropValues['color'];
   /**
    * - sets [CSS border-inline-start-color property ](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color)
    * - bidirectional support
    * - system tokens: `color`
+   * @deprecated Use `cs` prop with `system.color.border.*` tokens
    */
   borderInlineStartColor?: SystemPropValues['color'];
   /**
    * - sets [CSS border-inline-end-color property ](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color)
    * - bidirectional support
    * - system tokens: `color`
+   * @deprecated Use `cs` prop with `system.color.border.*` tokens
    */
   borderInlineEndColor?: SystemPropValues['color'];
 };
 
+/** @deprecated */
 export const borderColorStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'borderColor',
@@ -82,4 +92,5 @@ export const borderColorStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const borderColorFns = buildStyleFns(borderColorStyleFnConfigs);

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

@@ -9,6 +9,7 @@ import {
 } from './shorthand';
 import {BorderWidthStyleProps, borderWidthFns, borderWidthStyleFnConfigs} from './width';
 
+/** @deprecated */
 export type BorderStyleProps = BorderColorStyleProps &
   BorderLineStyleProps &
   BorderRadiusStyleProps &
@@ -31,6 +32,7 @@ export type BorderStyleProps = BorderColorStyleProps &
  *   </Box>
  * );
  *```
+ * @deprecated
  */
 export const border = buildStylePropFn<BorderStyleProps>({
   ...borderColorFns,
@@ -40,6 +42,7 @@ export const border = buildStylePropFn<BorderStyleProps>({
   ...borderWidthFns,
 });
 
+/** @deprecated */
 export const borderStyleFnConfigs = [
   ...borderColorStyleFnConfigs,
   ...borderLineStyleFnConfigs,

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

@@ -2,40 +2,57 @@ import {Property} from 'csstype';
 
 import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
 
-/** style props to set CSS border style properties */
+/** style props to set CSS border style properties
+ * @deprecated
+ */
 export type BorderLineStyleProps = {
-  /** sets [CSS border-collapse property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse) */
+  /** sets [CSS border-collapse property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse)
+   * @deprecated
+   */
   borderCollapse?: Property.BorderCollapse;
-  /** sets [CSS border-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing) */
+  /** sets [CSS border-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing)
+   * @deprecated
+   */
   borderSpacing?: Property.BorderSpacing;
-  /** sets [CSS border-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) */
+  /** sets [CSS border-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)
+   * @deprecated
+   */
   borderStyle?: Property.Border;
-  /** sets [CSS border-top-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style) */
+  /** sets [CSS border-top-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style)
+   * @deprecated
+   */
   borderTopStyle?: Property.Border;
   /**
    * - sets [CSS border-right-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style)
    * - no bidirectional support
+   * @deprecated
    */
   borderRightStyle?: Property.Border;
-  /** sets [CSS border-bottom-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style) */
+  /** sets [CSS border-bottom-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style)
+   * @deprecated
+   */
   borderBottomStyle?: Property.Border;
   /**
    * - sets [CSS border-left-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style)
    * - no bidirectional support
+   * @deprecated
    */
   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
+   * @deprecated
    */
   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
+   * @deprecated
    */
   borderInlineEndStyle?: Property.Border;
 };
 
+/** @deprecated */
 export const borderLineStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'borderCollapse',
@@ -84,4 +101,5 @@ export const borderLineStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const borderLineStyleFns = buildStyleFns(borderLineStyleFnConfigs);

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

@@ -1,35 +1,43 @@
 import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
 import {SystemPropValues} from '../systemProps';
 
-/** style props to set CSS border radius properties */
+/** style props to set CSS border radius properties
+ * @deprecated
+ */
 export type BorderRadiusStyleProps = {
   /**
    * - sets [CSS border-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
    * - system tokens: `shape`
-   * */
+   * @deprecated ⚠️ Please use the `cs` prop with `createStyles` and `createStencil` to apply styles to our components. For more information, view our [Styling docs](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs).
+   */
   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`
-   * */
+   * @deprecated
+   */
   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`
-   * */
+   * @deprecated
+   */
   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`
-   * */
+   * @deprecated
+   */
   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`
-   * */
+   * @deprecated
+   */
   borderBottomRightRadius?: SystemPropValues['shape'];
 };
 
+/** @deprecated */
 export const borderRadiusStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'borderRadius',
@@ -58,4 +66,5 @@ export const borderRadiusStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const borderRadiusFns = buildStyleFns(borderRadiusStyleFnConfigs);

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

@@ -2,36 +2,49 @@ import {Property} from 'csstype';
 
 import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
 
-/** style props to set CSS border properties */
+/** style props to set CSS border properties
+ * @deprecated
+ */
 export type BorderShorthandStyleProps = {
-  /** sets [CSS border property](https://developer.mozilla.org/en-US/docs/Web/CSS/border) */
+  /** sets [CSS border property](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
+   * @deprecated
+   */
   border?: Property.Border;
-  /** sets [CSS border-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) */
+  /** sets [CSS border-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top)
+   * @deprecated
+   */
   borderTop?: Property.BorderTop;
   /**
    * - sets [CSS border-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right)
    * - no bidirectional support
-   * */
+   * @deprecated
+   */
   borderRight?: Property.BorderRight;
-  /** sets [CSS border-bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) */
+  /** sets [CSS border-bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom)
+   * @deprecated
+   */
   borderBottom?: Property.BorderBottom;
   /**
    * - sets [CSS border-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left)
    * - no bidirectional support
-   * */
+   * @deprecated
+   */
   borderLeft?: Property.BorderLeft;
   /**
    * - sets [CSS border-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start)
    * - bidirectional support
-   * */
+   * @deprecated
+   */
   borderInlineStart?: Property.BorderInlineStart;
   /**
    * - sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end)
    * - bidirectional support
-   * */
+   * @deprecated
+   */
   borderInlineEnd?: Property.BorderInlineEnd;
 };
 
+/** @deprecated */
 export const borderShorthandStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'border',
@@ -70,4 +83,5 @@ export const borderShorthandStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const borderShorthandFns = buildStyleFns(borderShorthandStyleFnConfigs);

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

@@ -2,36 +2,49 @@ import {Property} from 'csstype';
 
 import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
 
-/** style props to set CSS border width properties */
+/** style props to set CSS border width properties
+ * @deprecated
+ */
 export type BorderWidthStyleProps = {
-  /** sets [CSS border-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) */
+  /** sets [CSS border-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)
+   * @deprecated
+   */
   borderWidth?: Property.BorderWidth | number;
-  /** sets [CSS border-top-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) */
+  /** sets [CSS border-top-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width)
+   * @deprecated
+   */
   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
+   * @deprecated
    * */
   borderRightWidth?: Property.BorderRightWidth | number;
-  /** sets [CSS border-bottom-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) */
+  /** sets [CSS border-bottom-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width)
+   * @deprecated
+   */
   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
+   * @deprecated
    * */
   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
+   * @deprecated
    * */
   borderInlineStartWidth?: Property.BorderInlineStartWidth | number;
   /**
    * - sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end)
    * - bidirectional support
+   * @deprecated
    * */
   borderInlineEndWidth?: Property.BorderInlineEndWidth | number;
 };
 
+/** @deprecated */
 export const borderWidthStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'borderWidth',
@@ -70,4 +83,5 @@ export const borderWidthStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const borderWidthFns = buildStyleFns(borderWidthStyleFnConfigs);

package/layout/lib/utils/buildStyleFns.ts

@@ -9,32 +9,39 @@ import {wrapProperty} from '@workday/canvas-kit-styling';
 
 import {CanvasSystemPropValues, SystemPropNames, SystemPropValues} from './systemProps';
 
+/** @deprecated */
 export type StyleFnConfig = {
   name: string;
   properties: string[];
   system: SystemPropNames | 'none';
 };
 
+/** @deprecated */
 export type StyleFns = {
   [key: string]: (value: unknown) => {};
 };
 
+/** @deprecated */
 const getColor = (value: SystemPropValues['color']) => {
   return colorTokens[value] || wrapProperty(value);
 };
 
+/** @deprecated */
 const getDepth = (value: SystemPropValues['depth']) => {
   return depthTokens[value];
 };
 
+/** @deprecated */
 const getShape = (value: SystemPropValues['shape']) => {
   return borderRadiusTokens[value as CanvasSystemPropValues['shape']] || wrapProperty(value);
 };
 
+/** @deprecated */
 const getSpace = (value: SystemPropValues['space']) => {
   return spaceTokens[value as CanvasSystemPropValues['space']] || wrapProperty(value);
 };
 
+/** @deprecated */
 const getFont = (value: SystemPropValues['font']) => {
   return (
     typeTokens.properties.fontFamilies[value as CanvasSystemPropValues['font']] ||
@@ -42,6 +49,7 @@ const getFont = (value: SystemPropValues['font']) => {
   );
 };
 
+/** @deprecated */
 const getFontSize = (value: SystemPropValues['fontSize'] | string) => {
   return (
     typeTokens.properties.fontSizes[value as CanvasSystemPropValues['fontSize']] ||
@@ -49,6 +57,7 @@ const getFontSize = (value: SystemPropValues['fontSize'] | string) => {
   );
 };
 
+/** @deprecated */
 const getFontWeight = (value: SystemPropValues['fontWeight'] | string) => {
   return (
     typeTokens.properties.fontWeights[value as CanvasSystemPropValues['fontWeight']] ||
@@ -56,6 +65,7 @@ const getFontWeight = (value: SystemPropValues['fontWeight'] | string) => {
   );
 };
 
+/** @deprecated */
 export function buildStyleFns(styleFnConfigs: StyleFnConfig[]): StyleFns {
   return styleFnConfigs.reduce((styleFns = {}, styleFnConfig) => {
     const styleFn = (value: unknown) => {
@@ -110,6 +120,7 @@ export function buildStyleFns(styleFnConfigs: StyleFnConfig[]): StyleFns {
   }, {});
 }
 
+/** @deprecated */
 export function buildStylePropFn<P extends {}>(styleFns: StyleFns) {
   return (props: P) => {
     let styles = {};