@workday/canvas-kit-react 12.0.0-alpha.841-next.0 → 12.0.0-alpha.846-next.0

package/dist/es6/toast/lib/ToastMessage.js

@@ -2,8 +2,14 @@ import React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { useToastModel } from './hooks/useToastModel';
 import { Subtext } from '@workday/canvas-kit-react/text';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { system } from '@workday/canvas-tokens-web';
+export const toastMessageStencil = createStencil({
+    base: { name: "d80f47", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
+}, "toast-message-759382");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,
 })(({ children, ...elemProps }, Element, model) => {
-    return (React.createElement(Subtext, Object.assign({ size: "large", wordBreak: "break-word", marginY: "zero", id: model.state.id, as: Element }, elemProps), children));
+    return (React.createElement(Subtext, Object.assign({ size: "large", id: model.state.id, as: Element }, mergeStyles(elemProps, toastMessageStencil())), children));
 });

package/icon/lib/SystemIcon.tsx

@@ -49,7 +49,8 @@ export interface SystemIconStyles {
   /**
    * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.
    * @default base.licorice200
-   * @deprecated `colorHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * @deprecated `colorHover` is deprecated and will be removed in a future version. We have removed the default hover styles on SystemIcon. Please
+   * use the following instead in your style overrides:
    * ```tsx
    * '&:hover': {
    *   [systemIconStencil.vars.color]: desiredColorHoverColor

package/modal/lib/ModalBody.tsx

@@ -1,32 +1,27 @@
 import * as React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  getTheme,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useModalModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ModalBodyProps extends ExtractProps<typeof Popup.Body, never> {}
 
-const ResponsiveModalBody = styled(Popup.Body)<ModalBodyProps & StyledType>(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    [canvasTheme.breakpoints.down('s')]: {
-      marginBottom: space.zero,
-      padding: `${space.xxxs} ${space.xxs} ${space.xxs} ${space.xxs}`,
+export const modalBodyStencil = createStencil({
+  base: {
+    '@media screen and (max-width: 768px)': {
+      marginBlockEnd: system.space.zero,
+      padding: `${system.space.x1} ${system.space.x2} ${system.space.x2}`,
     },
-  };
+  },
 });
 
 export const ModalBody = createSubcomponent('div')({
   displayName: 'Modal.Body',
   modelHook: useModalModel,
 })<ModalBodyProps>((elemProps, Element) => {
-  return <ResponsiveModalBody as={Element} {...elemProps} />;
+  return <Popup.Body as={Element} {...mergeStyles(elemProps, modalBodyStencil())} />;
 });

package/modal/lib/ModalCard.tsx

@@ -1,29 +1,27 @@
 import * as React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  StyledType,
-  styled,
-  getTheme,
-} from '@workday/canvas-kit-react/common';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
 
 import {useModalCard, useModalModel} from './hooks';
+import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
-const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    margin: space.xl,
-    [canvasTheme.breakpoints.down('s')]: {
-      margin: space.s, // 16px all around margin on smaller screen sizes
-      padding: space.s, // brings total padding between edge and content to 24px
-      borderRadius: space.m, // 24px border radius on smaller devices.
+export const modalCardStencil = createStencil({
+  base: {
+    margin: system.space.x10,
+    width: calc.add(calc.multiply(system.space.x20, 5), system.space.x10),
+    borderWidth: system.space.zero,
+    boxShadow: system.depth[6],
+    '@media screen and (max-width: 768px)': {
+      margin: system.space.x4, // 16px all around margin on smaller screen sizes
+      padding: system.space.x4, // brings total padding between edge and content to 24px
+      borderRadius: system.space.x6, // 24px border radius on smaller devices.
     },
-  };
+  },
 });
 
 export const ModalCard = createSubcomponent('div')({
@@ -31,5 +29,5 @@ export const ModalCard = createSubcomponent('div')({
   modelHook: useModalModel,
   elemPropsHook: useModalCard,
 })<ModalCardProps>((elemProps, Element) => {
-  return <ResponsiveModalCard as={Element} width={440} borderWidth={0} depth={6} {...elemProps} />;
+  return <Popup.Card as={Element} {...mergeStyles(elemProps, modalCardStencil())} />;
 });

package/modal/lib/ModalHeading.tsx

@@ -1,27 +1,22 @@
 import * as React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  getTheme,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useModalHeading, useModalModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
-const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => {
-  const {canvas: canvasTheme} = getTheme(theme);
-  return {
-    [canvasTheme.breakpoints.down('s')]: {
-      marginBottom: space.zero,
-      padding: `${space.xxs} ${space.xxs} ${space.xxxs} ${space.xxs}`,
+export const modalHeadingStencil = createStencil({
+  base: {
+    '@media screen and (max-width: 768px)': {
+      marginBlockEnd: system.space.zero,
+      padding: `${system.space.x2} ${system.space.x2} ${system.space.x1}`,
     },
-  };
+  },
 });
 
 export const ModalHeading = createSubcomponent('h2')({
@@ -29,5 +24,5 @@ export const ModalHeading = createSubcomponent('h2')({
   modelHook: useModalModel,
   elemPropsHook: useModalHeading,
 })<ModalHeadingProps>((elemProps, Element) => {
-  return <ResponsiveModalHeading as={Element} {...elemProps} />;
+  return <Popup.Heading as={Element} {...mergeStyles(elemProps, modalHeadingStencil())} />;
 });

package/modal/lib/ModalOverflowOverlay.tsx

@@ -1,18 +1,22 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 
 import {ModalOverlay} from './ModalOverlay';
-import styled from '@emotion/styled';
 import {useModalModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
-const StyledOverlay = styled(ModalOverlay)<StyledType>({
-  '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+export const modalOverflowOverlayStencil = createStencil({
+  base: {
+    '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+    overflow: 'hidden auto',
+  },
 });
 
 export const ModalOverflowOverlay = createSubcomponent('div')({
   displayName: 'Modal.OverflowOverlay',
   modelHook: useModalModel,
 })<ExtractProps<typeof ModalOverlay, never>>((elemProps, Element) => {
-  return <StyledOverlay as={Element} overflowX="hidden" overflowY="auto" {...elemProps} />;
+  return <ModalOverlay as={Element} {...mergeStyles(elemProps, modalOverflowOverlayStencil())} />;
 });

package/modal/lib/ModalOverlay.tsx

@@ -4,81 +4,62 @@ import ReactDOM from 'react-dom';
 import {
   createSubcomponent,
   createElemPropsHook,
-  StyledType,
   useWindowSize,
   useForkRef,
-  getTheme,
 } from '@workday/canvas-kit-react/common';
 import {usePopupModel, usePopupStack} from '@workday/canvas-kit-react/popup';
-import {keyframes} from '@emotion/react';
-import styled from '@emotion/styled';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {Box, BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {useModalModel} from './hooks';
+import {createStencil, cssVar, keyframes} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ModalOverlayProps extends BoxProps {}
 
-const fadeIn = keyframes`
-  from {
-    background: none;
-  }
-  to {
-    background: rgba(0,0,0,0.65);
-  }
-`;
+const fadeIn = keyframes({
+  '0%': {
+    background: 'none',
+  },
+  '100%': {
+    background: cssVar(system.color.bg.overlay),
+  },
+});
 
-const Container = styled(Box)<StyledType>(
-  {
+export const modalOverlayContainerStencil = createStencil({
+  vars: {
+    containerCenter: '',
+  },
+  base: ({containerCenter}) => ({
     position: 'fixed',
-    top: 0,
-    left: 0,
+    top: system.space.zero,
+    left: system.space.zero,
     width: '100vw',
     height: '100vh',
-    background: 'rgba(0,0,0,0.65)',
-    animationName: `${fadeIn}`,
+    background: system.color.bg.overlay,
     animationDuration: '0.3s',
+    animationName: fadeIn,
     // Allow overriding of animation in special cases
     '.wd-no-animation &': {
       animation: 'none',
     },
-  },
-  ({theme}) => {
-    const {canvas: canvasTheme} = getTheme(theme);
-    return {
-      [canvasTheme.breakpoints.down('s')]: {
-        height: '100%',
+    // Responsive Container
+    '& > div': {
+      maxHeight: '100%',
+      display: 'flex',
+      position: 'absolute',
+      left: system.space.zero,
+      top: system.space.zero,
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      width: containerCenter,
+    },
+    '@media screen and (max-width: 768px)': {
+      height: '100%',
+      '& > div': {
+        alignItems: 'end',
       },
-    };
-  }
-);
-
-// This centering container helps fix an issue with Chrome. Chrome doesn't normally do subpixel
-// positioning, but seems to when using flexbox centering. This messes up Popper calculations inside
-// 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 {canvas: canvasTheme} = getTheme(theme);
-  return {
-    maxHeight: '100%',
-    display: 'flex',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-    [canvasTheme.breakpoints.down('s')]: {
-      alignItems: 'end',
     },
-  };
-});
-
-export const ModalOverlay = createSubcomponent('div')({
-  displayName: 'Modal.Overlay',
-  modelHook: useModalModel,
-})<ModalOverlayProps>((elemProps, Element, model) => {
-  return model.state.visibility !== 'hidden' ? (
-    <OpenModalOverlay as={Element} model={model} {...elemProps} />
-  ) : null;
+  }),
 });
 
 export const useModalOverlay = createElemPropsHook(usePopupModel)(({state}, ref) => {
@@ -97,18 +78,20 @@ const OpenModalOverlay = createSubcomponent('div')({
   elemPropsHook: useModalOverlay,
 })<ModalOverlayProps>((elemProps, Element, model) => {
   const windowSize = useWindowSize();
+  const containerCenter = windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw';
   const content = (
-    <Container as={Element} {...elemProps}>
-      <ResponsiveContainer
-        // make sure the centering container is an even number of pixels to avoid sub-pixel
-        // inaccuracies due to centering
-        style={{
-          width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw',
-        }}
+    <Box {...mergeStyles(elemProps, modalOverlayContainerStencil({containerCenter}))}>
+      {/* This centering container helps fix an issue with Chrome. Chrome doesn't normally do
+      subpixel positioning, but seems to when using flexbox centering. This messes up Popper
+      calculations inside the Modal. The centering container forces a "center" pixel calculation
+      by making sure the width is always an even number */}
+      <Box
+      // make sure the centering container is an even number of pixels to avoid sub-pixel
+      // inaccuracies due to centering
       >
         {elemProps.children}
-      </ResponsiveContainer>
-    </Container>
+      </Box>
+    </Box>
   );
 
   // only render something on the client
@@ -118,3 +101,12 @@ const OpenModalOverlay = createSubcomponent('div')({
     return null;
   }
 });
+
+export const ModalOverlay = createSubcomponent('div')({
+  displayName: 'Modal.Overlay',
+  modelHook: useModalModel,
+})<ModalOverlayProps>((elemProps, Element, model) => {
+  return model.state.visibility !== 'hidden' ? (
+    <OpenModalOverlay as={Element} model={model} {...elemProps} />
+  ) : null;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.0.0-alpha.841-next.0",
+  "version": "12.0.0-alpha.846-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.841-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.841-next.0",
+    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.846-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.846-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "066c4b170850949586bf9f89370f5302a6c8f9a4"
+  "gitHead": "92573a5cb42a250072618c814c0bc78edaf0480a"
 }

package/popup/lib/Popper.tsx

@@ -154,10 +154,8 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
         enabled: true,
         phase: 'afterWrite',
         fn({state}) {
-          if (placementRef.current !== state.placement) {
-            setPlacement(state.placement);
-            onPlacementChange?.(state.placement);
-          }
+          setPlacement(state.placement);
+          onPlacementChange?.(state.placement);
         },
       };
     }, [setPlacement, onPlacementChange]);

package/popup/lib/PopupBody.tsx

@@ -3,10 +3,20 @@ import * as React from 'react';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Card} from '@workday/canvas-kit-react/card';
 import {usePopupModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '../../layout';
+import {system} from '@workday/canvas-tokens-web';
+
+export const popupBodyStencil = createStencil({
+  base: {
+    overflowY: 'auto',
+    padding: system.space.x2,
+  },
+});
 
 export const PopupBody = createSubcomponent('div')({
   displayName: 'Popup.Body',
   modelHook: usePopupModel,
 })<ExtractProps<typeof Card.Body>>(elemProps => {
-  return <Card.Body overflowY="auto" padding="xxs" {...elemProps} />;
+  return <Card.Body {...mergeStyles(elemProps, popupBodyStencil())} />;
 });

package/popup/lib/PopupCard.tsx

@@ -1,65 +1,38 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+import {space} from '@workday/canvas-kit-react/tokens';
 import {
-  styled,
-  TransformOrigin,
-  getTranslateFromOrigin,
-  StyledType,
   ExtractProps,
-  useConstant,
   createSubcomponent,
+  getTransformOrigin,
 } from '@workday/canvas-kit-react/common';
-import {Flex, FlexStyleProps} from '@workday/canvas-kit-react/layout';
+import {FlexStyleProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {getTransformFromPlacement} from './getTransformFromPlacement';
 import {usePopupCard, usePopupModel} from './hooks';
+import {createStencil, createVars, cssVar, keyframes} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
 export interface PopupCardProps extends FlexAndBoxProps {
   children?: React.ReactNode;
 }
 
-const popupAnimation = (transformOrigin: TransformOrigin) => {
-  const translate = getTranslateFromOrigin(transformOrigin, space.xxs);
+const translateVars = createVars('positionX', 'positionY');
 
-  return keyframes`
-    0% {
-      opacity: 0;
-      transform: translate(${translate.x}px, ${translate.y}px);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(0);
-    }
-  `;
-};
-
-const StyledPopupCard = styled(Card)<
-  StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(({transformOrigin, theme}) => {
-  if (transformOrigin == null) {
-    return {};
-  }
-
-  return {
-    animation: popupAnimation(transformOrigin),
-    animationDuration: '150ms',
-    animationTimingFunction: 'ease-out',
-    transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-    [theme.canvas.breakpoints.down('s')]: {
-      animation: popupAnimation({vertical: 'bottom', horizontal: 'center'}),
-      animationDuration: '150ms',
-      animationTimingFunction: 'ease-out',
-      transformOrigin: 'bottom center',
-    },
-    // Allow overriding of animation in special cases
-    '.wd-no-animation &': {
-      animation: 'none',
-    },
-  };
+/**
+ * Keyframe for the dots loading animation.
+ */
+const fadeIn = keyframes({
+  '0%': {
+    opacity: 1,
+    transform: `translate(${cssVar(translateVars.positionX)}, ${cssVar(translateVars.positionY)})`,
+  },
+  '100%': {
+    opacity: 1,
+    transform: `translate(0)`,
+  },
 });
 
 function getSpace(value?: string | number) {
@@ -72,7 +45,7 @@ function getSpace(value?: string | number) {
 
 function getMaxHeight(margin?: string | number) {
   // set the default margin offset to space.xl
-  let marginOffset: string | number = space.xl;
+  let marginOffset: string | number = cssVar(system.space.x10);
 
   if (margin) {
     // parse the margin prop
@@ -91,33 +64,61 @@ function getMaxHeight(margin?: string | number) {
   return `calc(100vh - ${marginOffset})`;
 }
 
+export const popupCardStencil = createStencil({
+  vars: {
+    maxHeight: '',
+    transformOriginHorizontal: '',
+    transformOriginVertical: '',
+  },
+  base: ({maxHeight, transformOriginHorizontal, transformOriginVertical}) => ({
+    ...system.type.subtext.large,
+    display: 'flex',
+    position: 'relative',
+    maxWidth: `calc(100vw - ${system.space.x8})`,
+    flexDirection: 'column',
+    boxShadow: system.depth[5],
+    minHeight: system.space.zero,
+    padding: system.space.x6,
+    maxHeight: maxHeight,
+    overflowY: 'auto',
+    animationName: fadeIn,
+    animationDuration: '150ms',
+    animationTimingFunction: 'ease-out',
+    transformOrigin: `${transformOriginVertical} ${transformOriginHorizontal}`,
+    // Allow overriding of animation in special cases
+    '.wd-no-animation &': {
+      animation: 'none',
+    },
+    '@media screen and (max-width: 768px)': {
+      transformOrigin: 'bottom center',
+    },
+  }),
+});
+
 export const PopupCard = createSubcomponent('div')({
   displayName: 'Popup.Card',
   modelHook: usePopupModel,
   elemPropsHook: usePopupCard,
-})<PopupCardProps>(({children, ...elemProps}, Element, model) => {
+})<PopupCardProps>(({children, ref, ...elemProps}, Element, model) => {
   const transformOrigin = React.useMemo(() => {
     return getTransformFromPlacement(model.state.placement || 'bottom');
   }, [model.state.placement]);
+  const translate = getTransformOrigin(transformOrigin, cssVar(system.space.x2));
+  const cardMaxHeight = getMaxHeight(elemProps.margin);
 
-  // As is a Flex that will render an element of `Element`
-  const As = useConstant(() => Flex.as(Element));
   return (
-    <StyledPopupCard
-      as={As}
-      transformOrigin={transformOrigin}
-      position="relative"
-      depth={5}
-      maxWidth={`calc(100vw - ${space.l})`}
-      flexDirection="column"
-      minHeight={0}
-      padding="m"
-      maxHeight={getMaxHeight(elemProps.margin)}
-      overflowY="auto"
-      {...type.levels.subtext.large}
-      {...elemProps}
+    <Card
+      ref={ref}
+      {...mergeStyles(elemProps, [
+        popupCardStencil({
+          transformOriginHorizontal: transformOrigin.horizontal,
+          transformOriginVertical: transformOrigin.vertical,
+          maxHeight: cardMaxHeight,
+        }),
+        translateVars({positionX: translate.x, positionY: translate.y}),
+      ])}
     >
       {children}
-    </StyledPopupCard>
+    </Card>
   );
 });

package/popup/lib/PopupCloseIcon.tsx

@@ -3,12 +3,22 @@ import React from 'react';
 import {xIcon} from '@workday/canvas-system-icons-web';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {space} from '@workday/canvas-kit-react/tokens';
 
 import {usePopupCloseButton, usePopupModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '../../layout';
 
 export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {}
 
+export const popupCloseIconStencil = createStencil({
+  base: {
+    position: 'absolute',
+    insetInlineEnd: system.space.x1,
+    top: system.space.x1,
+  },
+});
+
 export const PopupCloseIcon = createSubcomponent('button')({
   displayName: 'Popup.CloseIcon',
   modelHook: usePopupModel,
@@ -20,10 +30,7 @@ export const PopupCloseIcon = createSubcomponent('button')({
       size="medium"
       icon={xIcon}
       type="button"
-      position="absolute"
-      insetInlineEnd={space.xxxs}
-      top={space.xxxs}
-      {...elemProps}
+      {...mergeStyles(elemProps, popupCloseIconStencil())}
     />
   );
 });

package/popup/lib/PopupHeading.tsx

@@ -4,18 +4,28 @@ import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common
 import {Card} from '@workday/canvas-kit-react/card';
 
 import {usePopupHeading, usePopupModel} from './hooks';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '../../layout';
 
 export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, never> {
   children?: React.ReactNode;
 }
 
+export const popupHeadingStencil = createStencil({
+  base: {
+    marginBlockEnd: system.space.x2,
+    padding: system.space.x2,
+  },
+});
+
 export const PopupHeading = createSubcomponent('h2')({
   displayName: 'Popup.Heading',
   modelHook: usePopupModel,
   elemPropsHook: usePopupHeading,
 })<PopupHeadingProps>(({children, ...elemProps}, Element) => {
   return (
-    <Card.Heading as={Element} marginBottom="xxs" padding="xxs" {...elemProps}>
+    <Card.Heading as={Element} {...mergeStyles(elemProps, popupHeadingStencil())}>
       {children}
     </Card.Heading>
   );