@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

package/modal/lib/ModalHeading.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {
   createSubcomponent,
   ExtractProps,
-  getCanvasTheme,
+  getTheme,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
@@ -15,7 +15,7 @@ import {useModalHeading, useModalModel} from './hooks';
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
 const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => {
-  const canvasTheme = getCanvasTheme(theme);
+  const {canvas: canvasTheme} = getTheme(theme);
   return {
     [canvasTheme.breakpoints.down('s')]: {
       marginBottom: space.zero,

package/modal/lib/ModalOverlay.tsx

@@ -7,7 +7,7 @@ import {
   StyledType,
   useWindowSize,
   useForkRef,
-  getCanvasTheme,
+  getTheme,
 } from '@workday/canvas-kit-react/common';
 import {usePopupModel, usePopupStack} from '@workday/canvas-kit-react/popup';
 import {keyframes} from '@emotion/react';
@@ -46,7 +46,7 @@ const Container = styled(Box)<StyledType>({
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
 const ResponsiveContainer = styled('div')(({theme}) => {
-  const canvasTheme = getCanvasTheme(theme);
+  const {canvas: canvasTheme} = getTheme(theme);
   return {
     maxHeight: '100vh',
     display: 'flex',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "9.0.0-alpha.368-next.6+63a2bafb",
+  "version": "9.0.0-alpha.382-next.2+5edca312",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^9.0.0-alpha.368-next.6+63a2bafb",
+    "@workday/canvas-kit-popup-stack": "^9.0.0-alpha.382-next.2+5edca312",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "63a2bafbfbf34c1f98b6db4128c4079a358af453"
+  "gitHead": "5edca312f27bb6df43083e778e7c7eb06f34e655"
 }

package/tokens/index.ts

@@ -63,9 +63,6 @@ export {
   fontFamily,
   monoFontFamily,
   BrandingColor,
-  CanvasDepth,
-  CanvasDepthValues,
-  CSSProperties,
 };
 
 export type {
@@ -73,6 +70,8 @@ export type {
   CanvasBorderRadiusKeys,
   CanvasBorderRadiusValues,
   CanvasColor,
+  CanvasDepth,
+  CanvasDepthValues,
   CanvasSpace,
   CanvasSpaceKeys,
   CanvasSpaceValues,
@@ -82,4 +81,5 @@ export type {
   CanvasTypeProperties,
   CanvasTypeVariants,
   CanvasTypeHierarchy,
+  CSSProperties,
 }

package/common/lib/theming/getCanvasTheme.ts

@@ -1,40 +0,0 @@
-import {CanvasTheme} from '@workday/canvas-kit-react/common';
-import {Theme, useTheme} from '@emotion/react';
-import {getObjectProxy} from './getObjectProxy';
-import {defaultCanvasTheme} from './theme';
-
-/**
- * Use this function when you have access to `theme` in styled components.
- * This function ensures that a theme is defined via a proxy and allows access to properties on the theme object.
- * @param theme Any partial or full theme object.
- * @returns a theme object if it is defined, otherwise it will fall back on using defaultCanvasTheme
- * @example
- * const ResponsiveContainer = styled('div')(({theme}) => {
- * const canvas = getCanvasTheme(theme);
- *  return {
- *    maxHeight: '100vh',
- *    display: 'flex',
- *    position: 'absolute',
- *    left: 0,
- *    top: 0,
- *    justifyContent: 'center',
- *    alignItems: 'center',
- *    height: '100vh',
- *    [canvas.breakpoints.down('s')]: {
- *      alignItems: 'end',
- *    },
- *  };
- *});
- */
-export function getCanvasTheme(theme: any = {}): CanvasTheme {
-  // prettier-ignore
-  //@ts-ignore
-  const windowTheme = typeof window !== 'undefined' && window.workday && window.workday.canvas && window.workday.canvas.theme;
-  return getObjectProxy(theme.canvas || windowTheme || {}, defaultCanvasTheme);
-}
-
-export function useCanvasTheme(themeOverride?: Theme) {
-  const theme = useTheme();
-
-  return getCanvasTheme(themeOverride || theme);
-}

package/dist/commonjs/common/lib/theming/getCanvasTheme.d.ts

@@ -1,28 +0,0 @@
-import { CanvasTheme } from '@workday/canvas-kit-react/common';
-import { Theme } from '@emotion/react';
-/**
- * Use this function when you have access to `theme` in styled components.
- * This function ensures that a theme is defined via a proxy and allows access to properties on the theme object.
- * @param theme Any partial or full theme object.
- * @returns a theme object if it is defined, otherwise it will fall back on using defaultCanvasTheme
- * @example
- * const ResponsiveContainer = styled('div')(({theme}) => {
- * const canvas = getCanvasTheme(theme);
- *  return {
- *    maxHeight: '100vh',
- *    display: 'flex',
- *    position: 'absolute',
- *    left: 0,
- *    top: 0,
- *    justifyContent: 'center',
- *    alignItems: 'center',
- *    height: '100vh',
- *    [canvas.breakpoints.down('s')]: {
- *      alignItems: 'end',
- *    },
- *  };
- *});
- */
-export declare function getCanvasTheme(theme?: any): CanvasTheme;
-export declare function useCanvasTheme(themeOverride?: Theme): CanvasTheme;
-//# sourceMappingURL=getCanvasTheme.d.ts.map

package/dist/commonjs/common/lib/theming/getCanvasTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/getCanvasTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAC,KAAK,EAAW,MAAM,gBAAgB,CAAC;AAI/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,KAAK,GAAE,GAAQ,GAAG,WAAW,CAK3D;AAED,wBAAgB,cAAc,CAAC,aAAa,CAAC,EAAE,KAAK,eAInD"}

package/dist/commonjs/common/lib/theming/getCanvasTheme.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCanvasTheme = exports.getCanvasTheme = void 0;
-var react_1 = require("@emotion/react");
-var getObjectProxy_1 = require("./getObjectProxy");
-var theme_1 = require("./theme");
-/**
- * Use this function when you have access to `theme` in styled components.
- * This function ensures that a theme is defined via a proxy and allows access to properties on the theme object.
- * @param theme Any partial or full theme object.
- * @returns a theme object if it is defined, otherwise it will fall back on using defaultCanvasTheme
- * @example
- * const ResponsiveContainer = styled('div')(({theme}) => {
- * const canvas = getCanvasTheme(theme);
- *  return {
- *    maxHeight: '100vh',
- *    display: 'flex',
- *    position: 'absolute',
- *    left: 0,
- *    top: 0,
- *    justifyContent: 'center',
- *    alignItems: 'center',
- *    height: '100vh',
- *    [canvas.breakpoints.down('s')]: {
- *      alignItems: 'end',
- *    },
- *  };
- *});
- */
-function getCanvasTheme(theme) {
-    if (theme === void 0) { theme = {}; }
-    // prettier-ignore
-    //@ts-ignore
-    var windowTheme = typeof window !== 'undefined' && window.workday && window.workday.canvas && window.workday.canvas.theme;
-    return getObjectProxy_1.getObjectProxy(theme.canvas || windowTheme || {}, theme_1.defaultCanvasTheme);
-}
-exports.getCanvasTheme = getCanvasTheme;
-function useCanvasTheme(themeOverride) {
-    var theme = react_1.useTheme();
-    return getCanvasTheme(themeOverride || theme);
-}
-exports.useCanvasTheme = useCanvasTheme;

package/dist/es6/common/lib/theming/getCanvasTheme.d.ts

@@ -1,28 +0,0 @@
-import { CanvasTheme } from '@workday/canvas-kit-react/common';
-import { Theme } from '@emotion/react';
-/**
- * Use this function when you have access to `theme` in styled components.
- * This function ensures that a theme is defined via a proxy and allows access to properties on the theme object.
- * @param theme Any partial or full theme object.
- * @returns a theme object if it is defined, otherwise it will fall back on using defaultCanvasTheme
- * @example
- * const ResponsiveContainer = styled('div')(({theme}) => {
- * const canvas = getCanvasTheme(theme);
- *  return {
- *    maxHeight: '100vh',
- *    display: 'flex',
- *    position: 'absolute',
- *    left: 0,
- *    top: 0,
- *    justifyContent: 'center',
- *    alignItems: 'center',
- *    height: '100vh',
- *    [canvas.breakpoints.down('s')]: {
- *      alignItems: 'end',
- *    },
- *  };
- *});
- */
-export declare function getCanvasTheme(theme?: any): CanvasTheme;
-export declare function useCanvasTheme(themeOverride?: Theme): CanvasTheme;
-//# sourceMappingURL=getCanvasTheme.d.ts.map

package/dist/es6/common/lib/theming/getCanvasTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/getCanvasTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAC,KAAK,EAAW,MAAM,gBAAgB,CAAC;AAI/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,KAAK,GAAE,GAAQ,GAAG,WAAW,CAK3D;AAED,wBAAgB,cAAc,CAAC,aAAa,CAAC,EAAE,KAAK,eAInD"}

package/dist/es6/common/lib/theming/getCanvasTheme.js

@@ -1,37 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { getObjectProxy } from './getObjectProxy';
-import { defaultCanvasTheme } from './theme';
-/**
- * Use this function when you have access to `theme` in styled components.
- * This function ensures that a theme is defined via a proxy and allows access to properties on the theme object.
- * @param theme Any partial or full theme object.
- * @returns a theme object if it is defined, otherwise it will fall back on using defaultCanvasTheme
- * @example
- * const ResponsiveContainer = styled('div')(({theme}) => {
- * const canvas = getCanvasTheme(theme);
- *  return {
- *    maxHeight: '100vh',
- *    display: 'flex',
- *    position: 'absolute',
- *    left: 0,
- *    top: 0,
- *    justifyContent: 'center',
- *    alignItems: 'center',
- *    height: '100vh',
- *    [canvas.breakpoints.down('s')]: {
- *      alignItems: 'end',
- *    },
- *  };
- *});
- */
-export function getCanvasTheme(theme) {
-    if (theme === void 0) { theme = {}; }
-    // prettier-ignore
-    //@ts-ignore
-    var windowTheme = typeof window !== 'undefined' && window.workday && window.workday.canvas && window.workday.canvas.theme;
-    return getObjectProxy(theme.canvas || windowTheme || {}, defaultCanvasTheme);
-}
-export function useCanvasTheme(themeOverride) {
-    var theme = useTheme();
-    return getCanvasTheme(themeOverride || theme);
-}