@workday/canvas-kit-styling 10.1.3 → 10.2.0-628-next.0

package/dist/commonjs/index.d.ts

@@ -1,4 +1,6 @@
+export * from './lib/calc';
 export * from './lib/cs';
+export * from './lib/px2rem';
 export * from './lib/slugify';
 export * from './lib/uniqueId';
 //# 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,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/commonjs/index.js

@@ -10,6 +10,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/calc"), exports);
 __exportStar(require("./lib/cs"), exports);
+__exportStar(require("./lib/px2rem"), exports);
 __exportStar(require("./lib/slugify"), exports);
 __exportStar(require("./lib/uniqueId"), exports);

package/dist/commonjs/lib/calc.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Function that returns a CSS `calc()` addition string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) + 0.125rem)'
+ *   padding: calc.add("--cnvs-sys-space-x1", '0.125rem'),
+ * }
+ * ```
+ *
+ * @param augend
+ * The base value. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @param addend
+ * The value being added to the base. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @returns 'calc(augend + addend)'
+ */
+declare function add(augend: string, addend: string): string;
+/**
+ * Function that returns a CSS `calc()` subtraction string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) - 0.125rem)'
+ *   padding: calc.subtract("--cnvs-sys-space-x1", '0.125rem'),
+ * }
+ * ```
+ *
+ * @param minuend
+ * The base value. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @param subtrahend
+ * The value being subtracted from the base. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @returns 'calc(minuend - subtrahend)'
+ */
+declare function subtract(minuend: string, subtrahend: string): string;
+/**
+ * Function that returns a CSS `calc()` multiplication string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) * 3)'
+ *   padding: calc.multiply("--cnvs-sys-space-x1", 3),
+ * }
+ * ```
+ *
+ * @param multiplicand
+ * The base value being multiplied. E.g. '1rem' or '--cnvs-sys-space-x1'
+ *
+ * @param multiplier
+ * The value being multiplied to the base. E.g. 2 or '--cnvs-sys-space-x1'
+ *
+ * @returns 'calc(multiplicand * multiplier)'
+ */
+declare function multiply(multiplicand: string, multiplier?: string | number): string;
+/**
+ * Function that returns a CSS `calc()` division string
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) / 2)'
+ *   padding: calc.divide("--cnvs-sys-space-x1", 2),
+ * }
+ * ```
+ *
+ * @param dividend
+ * The base value being divided.  E.g. '1rem' or '--cnvs-sys-space-x1'
+ *
+ * @param divisor
+ * The divisor of the base value. E.g. 2 or '--cnvs-sys-space-x1'
+ *
+ * @returns 'calc(dividend / divisor)'
+ */
+declare function divide(dividend: string, divisor?: string | number): string;
+/**
+ * Function that negates the value of a CSS variable or value.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x4) * -1)'
+ *   padding: negate('--cnvs-sys-space-x4');
+ * }
+ * ```
+ *
+ * @param value
+ * The value being negated. E.g. '--cnvs-sys-space-x1' or '1rem'
+ *
+ * @param fallback
+ * An optional fallback value for a CSS variable. E.g. '1rem'
+ *
+ * @returns 'calc(var(value) * -1)'
+ */
+declare function negate(value: string, fallback?: string): string;
+export declare const calc: {
+    add: typeof add;
+    divide: typeof divide;
+    multiply: typeof multiply;
+    negate: typeof negate;
+    subtract: typeof subtract;
+};
+export {};
+//# sourceMappingURL=calc.d.ts.map

package/dist/commonjs/lib/calc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calc.d.ts","sourceRoot":"","sources":["../../../lib/calc.ts"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAE1C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAEpD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,YAAY,EAAE,MAAM,EAAE,UAAU,GAAE,MAAM,GAAG,MAAU,UAItE;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,MAAM,GAAG,MAAU,UAI7D;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,UAI/C;AAED,eAAO,MAAM,IAAI;;;;;;CAMhB,CAAC"}

package/dist/commonjs/lib/calc.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calc = void 0;
+const cs_1 = require("./cs");
+/**
+ * Function to conditionally wrap CSS vars if they are not already wrapped with `var()`.
+ * Only intended for internal use in these functions.
+ */
+function wrapCSSVar(value, fallback) {
+    if (typeof value === 'string' && value.startsWith('--')) {
+        return cs_1.cssVar(value, fallback);
+    }
+    else {
+        return value;
+    }
+}
+/**
+ * Function that returns a CSS `calc()` addition string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) + 0.125rem)'
+ *   padding: calc.add("--cnvs-sys-space-x1", '0.125rem'),
+ * }
+ * ```
+ *
+ * @param augend
+ * The base value. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @param addend
+ * The value being added to the base. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @returns 'calc(augend + addend)'
+ */
+function add(augend, addend) {
+    return `calc(${wrapCSSVar(augend)} + ${wrapCSSVar(addend)})`;
+}
+/**
+ * Function that returns a CSS `calc()` subtraction string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) - 0.125rem)'
+ *   padding: calc.subtract("--cnvs-sys-space-x1", '0.125rem'),
+ * }
+ * ```
+ *
+ * @param minuend
+ * The base value. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @param subtrahend
+ * The value being subtracted from the base. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @returns 'calc(minuend - subtrahend)'
+ */
+function subtract(minuend, subtrahend) {
+    return `calc(${wrapCSSVar(minuend)} - ${wrapCSSVar(subtrahend)})`;
+}
+/**
+ * Function that returns a CSS `calc()` multiplication string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) * 3)'
+ *   padding: calc.multiply("--cnvs-sys-space-x1", 3),
+ * }
+ * ```
+ *
+ * @param multiplicand
+ * The base value being multiplied. E.g. '1rem' or '--cnvs-sys-space-x1'
+ *
+ * @param multiplier
+ * The value being multiplied to the base. E.g. 2 or '--cnvs-sys-space-x1'
+ *
+ * @returns 'calc(multiplicand * multiplier)'
+ */
+function multiply(multiplicand, multiplier = 1) {
+    const formattedMultiplier = typeof multiplier === 'string' ? wrapCSSVar(multiplier) : multiplier;
+    return `calc(${wrapCSSVar(multiplicand)} * ${formattedMultiplier})`;
+}
+/**
+ * Function that returns a CSS `calc()` division string
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) / 2)'
+ *   padding: calc.divide("--cnvs-sys-space-x1", 2),
+ * }
+ * ```
+ *
+ * @param dividend
+ * The base value being divided.  E.g. '1rem' or '--cnvs-sys-space-x1'
+ *
+ * @param divisor
+ * The divisor of the base value. E.g. 2 or '--cnvs-sys-space-x1'
+ *
+ * @returns 'calc(dividend / divisor)'
+ */
+function divide(dividend, divisor = 1) {
+    const formattedDivisor = typeof divisor === 'string' ? wrapCSSVar(divisor) : divisor;
+    return `calc(${wrapCSSVar(dividend)} / ${formattedDivisor})`;
+}
+/**
+ * Function that negates the value of a CSS variable or value.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x4) * -1)'
+ *   padding: negate('--cnvs-sys-space-x4');
+ * }
+ * ```
+ *
+ * @param value
+ * The value being negated. E.g. '--cnvs-sys-space-x1' or '1rem'
+ *
+ * @param fallback
+ * An optional fallback value for a CSS variable. E.g. '1rem'
+ *
+ * @returns 'calc(var(value) * -1)'
+ */
+function negate(value, fallback) {
+    const multiplicand = wrapCSSVar(value, fallback);
+    return multiply(multiplicand, -1);
+}
+exports.calc = {
+    add,
+    divide,
+    multiply,
+    negate,
+    subtract,
+};

package/dist/commonjs/lib/px2rem.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Function that converts a `px` value (number) to `rem` (string).
+ * @example
+ * ```ts
+ * margin: px2rem(2);
+ * // returns '0.125rem'
+ * ```
+ */
+export declare function px2rem(px: number, base?: number): string;
+//# sourceMappingURL=px2rem.d.ts.map

package/dist/commonjs/lib/px2rem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"px2rem.d.ts","sourceRoot":"","sources":["../../../lib/px2rem.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,SAAK,UAE3C"}

package/dist/commonjs/lib/px2rem.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.px2rem = void 0;
+/**
+ * Function that converts a `px` value (number) to `rem` (string).
+ * @example
+ * ```ts
+ * margin: px2rem(2);
+ * // returns '0.125rem'
+ * ```
+ */
+function px2rem(px, base = 16) {
+    return `${px / base}rem`;
+}
+exports.px2rem = px2rem;

package/dist/es6/index.d.ts

@@ -1,4 +1,6 @@
+export * from './lib/calc';
 export * from './lib/cs';
+export * from './lib/px2rem';
 export * from './lib/slugify';
 export * from './lib/uniqueId';
 //# 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,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/es6/index.js

@@ -1,3 +1,5 @@
+export * from './lib/calc';
 export * from './lib/cs';
+export * from './lib/px2rem';
 export * from './lib/slugify';
 export * from './lib/uniqueId';

package/dist/es6/lib/calc.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Function that returns a CSS `calc()` addition string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) + 0.125rem)'
+ *   padding: calc.add("--cnvs-sys-space-x1", '0.125rem'),
+ * }
+ * ```
+ *
+ * @param augend
+ * The base value. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @param addend
+ * The value being added to the base. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @returns 'calc(augend + addend)'
+ */
+declare function add(augend: string, addend: string): string;
+/**
+ * Function that returns a CSS `calc()` subtraction string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) - 0.125rem)'
+ *   padding: calc.subtract("--cnvs-sys-space-x1", '0.125rem'),
+ * }
+ * ```
+ *
+ * @param minuend
+ * The base value. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @param subtrahend
+ * The value being subtracted from the base. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @returns 'calc(minuend - subtrahend)'
+ */
+declare function subtract(minuend: string, subtrahend: string): string;
+/**
+ * Function that returns a CSS `calc()` multiplication string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) * 3)'
+ *   padding: calc.multiply("--cnvs-sys-space-x1", 3),
+ * }
+ * ```
+ *
+ * @param multiplicand
+ * The base value being multiplied. E.g. '1rem' or '--cnvs-sys-space-x1'
+ *
+ * @param multiplier
+ * The value being multiplied to the base. E.g. 2 or '--cnvs-sys-space-x1'
+ *
+ * @returns 'calc(multiplicand * multiplier)'
+ */
+declare function multiply(multiplicand: string, multiplier?: string | number): string;
+/**
+ * Function that returns a CSS `calc()` division string
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) / 2)'
+ *   padding: calc.divide("--cnvs-sys-space-x1", 2),
+ * }
+ * ```
+ *
+ * @param dividend
+ * The base value being divided.  E.g. '1rem' or '--cnvs-sys-space-x1'
+ *
+ * @param divisor
+ * The divisor of the base value. E.g. 2 or '--cnvs-sys-space-x1'
+ *
+ * @returns 'calc(dividend / divisor)'
+ */
+declare function divide(dividend: string, divisor?: string | number): string;
+/**
+ * Function that negates the value of a CSS variable or value.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x4) * -1)'
+ *   padding: negate('--cnvs-sys-space-x4');
+ * }
+ * ```
+ *
+ * @param value
+ * The value being negated. E.g. '--cnvs-sys-space-x1' or '1rem'
+ *
+ * @param fallback
+ * An optional fallback value for a CSS variable. E.g. '1rem'
+ *
+ * @returns 'calc(var(value) * -1)'
+ */
+declare function negate(value: string, fallback?: string): string;
+export declare const calc: {
+    add: typeof add;
+    divide: typeof divide;
+    multiply: typeof multiply;
+    negate: typeof negate;
+    subtract: typeof subtract;
+};
+export {};
+//# sourceMappingURL=calc.d.ts.map

package/dist/es6/lib/calc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calc.d.ts","sourceRoot":"","sources":["../../../lib/calc.ts"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAE1C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAEpD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,YAAY,EAAE,MAAM,EAAE,UAAU,GAAE,MAAM,GAAG,MAAU,UAItE;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,MAAM,GAAG,MAAU,UAI7D;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,UAI/C;AAED,eAAO,MAAM,IAAI;;;;;;CAMhB,CAAC"}

package/dist/es6/lib/calc.js

@@ -0,0 +1,133 @@
+import { cssVar } from './cs';
+/**
+ * Function to conditionally wrap CSS vars if they are not already wrapped with `var()`.
+ * Only intended for internal use in these functions.
+ */
+function wrapCSSVar(value, fallback) {
+    if (typeof value === 'string' && value.startsWith('--')) {
+        return cssVar(value, fallback);
+    }
+    else {
+        return value;
+    }
+}
+/**
+ * Function that returns a CSS `calc()` addition string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) + 0.125rem)'
+ *   padding: calc.add("--cnvs-sys-space-x1", '0.125rem'),
+ * }
+ * ```
+ *
+ * @param augend
+ * The base value. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @param addend
+ * The value being added to the base. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @returns 'calc(augend + addend)'
+ */
+function add(augend, addend) {
+    return `calc(${wrapCSSVar(augend)} + ${wrapCSSVar(addend)})`;
+}
+/**
+ * Function that returns a CSS `calc()` subtraction string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) - 0.125rem)'
+ *   padding: calc.subtract("--cnvs-sys-space-x1", '0.125rem'),
+ * }
+ * ```
+ *
+ * @param minuend
+ * The base value. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @param subtrahend
+ * The value being subtracted from the base. E.g. '1rem' or '--cnvs-sys-space-x4'
+ *
+ * @returns 'calc(minuend - subtrahend)'
+ */
+function subtract(minuend, subtrahend) {
+    return `calc(${wrapCSSVar(minuend)} - ${wrapCSSVar(subtrahend)})`;
+}
+/**
+ * Function that returns a CSS `calc()` multiplication string.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) * 3)'
+ *   padding: calc.multiply("--cnvs-sys-space-x1", 3),
+ * }
+ * ```
+ *
+ * @param multiplicand
+ * The base value being multiplied. E.g. '1rem' or '--cnvs-sys-space-x1'
+ *
+ * @param multiplier
+ * The value being multiplied to the base. E.g. 2 or '--cnvs-sys-space-x1'
+ *
+ * @returns 'calc(multiplicand * multiplier)'
+ */
+function multiply(multiplicand, multiplier = 1) {
+    const formattedMultiplier = typeof multiplier === 'string' ? wrapCSSVar(multiplier) : multiplier;
+    return `calc(${wrapCSSVar(multiplicand)} * ${formattedMultiplier})`;
+}
+/**
+ * Function that returns a CSS `calc()` division string
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x1) / 2)'
+ *   padding: calc.divide("--cnvs-sys-space-x1", 2),
+ * }
+ * ```
+ *
+ * @param dividend
+ * The base value being divided.  E.g. '1rem' or '--cnvs-sys-space-x1'
+ *
+ * @param divisor
+ * The divisor of the base value. E.g. 2 or '--cnvs-sys-space-x1'
+ *
+ * @returns 'calc(dividend / divisor)'
+ */
+function divide(dividend, divisor = 1) {
+    const formattedDivisor = typeof divisor === 'string' ? wrapCSSVar(divisor) : divisor;
+    return `calc(${wrapCSSVar(dividend)} / ${formattedDivisor})`;
+}
+/**
+ * Function that negates the value of a CSS variable or value.
+ * CSS vars will be automatically wrapped in `var()` if provided.
+ *
+ * ```ts
+ * const styles = {
+ *   // returns 'calc(var(--cnvs-sys-space-x4) * -1)'
+ *   padding: negate('--cnvs-sys-space-x4');
+ * }
+ * ```
+ *
+ * @param value
+ * The value being negated. E.g. '--cnvs-sys-space-x1' or '1rem'
+ *
+ * @param fallback
+ * An optional fallback value for a CSS variable. E.g. '1rem'
+ *
+ * @returns 'calc(var(value) * -1)'
+ */
+function negate(value, fallback) {
+    const multiplicand = wrapCSSVar(value, fallback);
+    return multiply(multiplicand, -1);
+}
+export const calc = {
+    add,
+    divide,
+    multiply,
+    negate,
+    subtract,
+};

package/dist/es6/lib/px2rem.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Function that converts a `px` value (number) to `rem` (string).
+ * @example
+ * ```ts
+ * margin: px2rem(2);
+ * // returns '0.125rem'
+ * ```
+ */
+export declare function px2rem(px: number, base?: number): string;
+//# sourceMappingURL=px2rem.d.ts.map

package/dist/es6/lib/px2rem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"px2rem.d.ts","sourceRoot":"","sources":["../../../lib/px2rem.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,SAAK,UAE3C"}

package/dist/es6/lib/px2rem.js

@@ -0,0 +1,11 @@
+/**
+ * Function that converts a `px` value (number) to `rem` (string).
+ * @example
+ * ```ts
+ * margin: px2rem(2);
+ * // returns '0.125rem'
+ * ```
+ */
+export function px2rem(px, base = 16) {
+    return `${px / base}rem`;
+}

package/index.ts

@@ -1,3 +1,5 @@
+export * from './lib/calc';
 export * from './lib/cs';
+export * from './lib/px2rem';
 export * from './lib/slugify';
 export * from './lib/uniqueId';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling",
-  "version": "10.1.3",
+  "version": "10.2.0-628-next.0",
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -54,9 +54,9 @@
     "@emotion/serialize": "^1.0.2",
     "@emotion/styled": "^11.6.0",
     "@emotion/utils": "^1.0.0",
-    "@workday/canvas-kit-react": "^10.1.3",
+    "@workday/canvas-kit-react": "^10.2.0-628-next.0",
     "@workday/canvas-tokens-web": "^1.0.0",
     "typescript": "4.2"
   },
-  "gitHead": "2936b4918f4df739c86417d45700bbde98130fe9"
+  "gitHead": "e87d2573a126d186bd1e45e3eedef40a9e0dcc4f"
 }