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

package/icon/lib/SystemIcon.tsx

@@ -1,146 +1,44 @@
-import {iconColors} from '@workday/canvas-kit-react/tokens';
-import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {CSSObject} from '@emotion/styled';
-import {createComponent, getColor} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, handleCsProp, px2rem, createVars} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {Svg, SvgProps, svgStencil, transformColorNameToToken} from './Svg';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
+import {CanvasIconTypes, CanvasSystemIcon} from '@workday/canvas-system-icons-web';
+import {component} from '@workday/canvas-tokens-web';
+import {CanvasSystemIcon as LegacyCanvasSystemIcon} from '@workday/design-assets-types';
 
-/**
- * @deprecated Interface `SystemIconStyles` will be removed in a future version. `accent`, `color`, background props will be moved inside `GraphicProps`.
- */
-export interface SystemIconStyles {
+import {Svg, SvgProps, resolveSize, svgStencil} from './Svg';
+
+type SystemSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface SystemIconProps extends Omit<SvgProps, 'src' | 'type'> {
   /**
    * The accent color of the SystemIcon. This overrides `color`.
    */
   accent?: string;
-  /**
-   * The accent color of the SystemIcon on hover. This overrides `colorHover`.
-   * @deprecated `accentHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
-   * ```tsx
-   * '&:hover': {
-   *   [systemIconStencil.vars.accent]: desiredAccentHoverColor
-   * }
-   * ```
-   */
-  accentHover?: string;
   /**
    * The background color of the SystemIcon.
-   * @default transparent
    */
   background?: string;
-  /**
-   * The background color of the SystemIcon on hover.
-   * @default transparent
-   * @deprecated `backgroundHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
-   * ```tsx
-   * '&:hover': {
-   *   [systemIconStencil.vars.background]: desiredBackgroundHoverColor
-   * }
-   * ```
-   */
-  backgroundHover?: string;
   /**
    * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.
-   * @default base.licorice200
    */
   color?: string;
-  /**
-   * 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. We have removed the default hover styles on SystemIcon. Please
-   * use the following instead in your style overrides:
-   * ```tsx
-   * '&:hover': {
-   *   [systemIconStencil.vars.color]: desiredColorHoverColor
-   * }
-   * ```
-   */
-  colorHover?: string;
-  /**
-   * The fill color of the SystemIcon. This overrides `color`.
-   * @deprecated `fill` is deprecated and will be removed in a future version. Please use `color` and specify `accent` color if you want `accent` to be different from `color`.
-   */
-  fill?: string;
-  /**
-   * The fill color of the SystemIcon on hover. This overrides `colorHover`.
-   * @deprecated `fillHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
-   * ```tsx
-   * '&:hover': {
-   *   [systemIconStencil.vars.fill]: desiredFillHoverColor
-   * }
-   * ```
-   */
-  fillHover?: string;
-}
-
-export interface SystemIconProps
-  extends SystemIconStyles,
-    Omit<SvgProps, 'src' | 'type' | 'fill' | 'background' | 'color'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
-  icon: CanvasSystemIcon;
+  icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
   /**
-   * The size of the SystemIcon in `px`.
+   * The size of the SystemIcon in size variants or string / numeric (px) values.
+   * **System icon sizes**
+   * - `xxs`: 14px / 0.875rem
+   * - `xs`: 16px / 1rem
+   * - `sm`: 18px / 1.125rem
+   * - `md`: 20px / 1.25rem
+   * - `lg`: 24px / 1.5rem
+   * - `xl`: 32px / 2rem
+   * @default `24px`
    */
-  size?: number | string;
+  size?: SystemSize | string | number;
 }
 
-/**
- * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
- * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
- * - Style overrides using the `systemIconStencil`:
- *   ```tsx
- *   // styling container
- *
- *   ```
- */
-export const systemIconStyles = ({
-  accent,
-  accentHover,
-  background = 'transparent',
-  backgroundHover = 'transparent',
-  color = iconColors.standard,
-  colorHover = iconColors.hover,
-  fill,
-  fillHover,
-}: SystemIconStyles): CSSObject => ({
-  '& .wd-icon-fill': {
-    fill: getColor(fill) || getColor(color),
-  },
-  ':hover .wd-icon-fill': {
-    fill: getColor(fillHover) || getColor(colorHover),
-  },
-  '& .wd-icon-accent, & .wd-icon-accent2': {
-    fill: getColor(accent) || getColor(color),
-  },
-  ':hover .wd-icon-accent, :hover .wd-icon-accent2': {
-    fill: getColor(accentHover) || getColor(colorHover),
-  },
-  '& .wd-icon-background': {
-    fill: getColor(background),
-  },
-  ':hover .wd-icon-background': {
-    fill: getColor(backgroundHover),
-  },
-});
-
-/**
- * @deprecated These variables are being used for backward compatibility with existing hover props. Please use the following instead:
- * ```tsx
- * '&:hover': {
- *   [systemIconStencil.vars.color]: desiredHoverColor
- * }
- * ```
- */
-const deprecatedSystemIconVars = createVars(
-  'colorHover',
-  'fillHover',
-  'accentHover',
-  'backgroundHover'
-);
-
 export const systemIconStencil = createStencil({
   extends: svgStencil,
   vars: {
@@ -150,72 +48,45 @@ export const systemIconStencil = createStencil({
      * wish to change the accent layer independently, also set the `accentColor` variable
      */
     color: '',
+    /**
+     * This will set the icon's accent color for the `.wd-icon-accent` SVG layer.
+     */
     accentColor: '',
+    /**
+     * This will set the icon's background color for the `.wd-icon-background` SVG layer.
+     */
     backgroundColor: '',
   },
-  base: ({size, width, height, accentColor, backgroundColor, color}) => ({
+  base: ({size, accentColor, backgroundColor, color}) => ({
     '& svg': {
-      width: cssVar(width, cssVar(size, system.space.x6)),
-      height: cssVar(height, cssVar(size, system.space.x6)),
+      width: cssVar(size, component.legacy.systemIcon.size.lg),
+      height: cssVar(size, component.legacy.systemIcon.size.lg),
     },
-    '& .wd-icon-fill': {
-      fill: cssVar(color, system.color.icon.default),
+    '.wd-icon .wd-icon-fill': {
+      fill: cssVar(color, component.legacy.systemIcon.color.fill),
     },
-    '& .wd-icon-accent, & .wd-icon-accent2': {
-      fill: cssVar(accentColor, cssVar(color, system.color.fg.default)),
+    '.wd-icon .wd-icon-accent, & .wd-icon-accent2': {
+      fill: cssVar(accentColor, cssVar(color, component.legacy.systemIcon.color.accent)),
     },
-    '& .wd-icon-background': {
+    '.wd-icon .wd-icon-background': {
       fill: cssVar(backgroundColor, 'transparent'),
     },
-    // will be removed eventually
-    '&:where(:hover, .hover) .wd-icon-fill': {
-      fill: cssVar(
-        deprecatedSystemIconVars.fillHover,
-        cssVar(deprecatedSystemIconVars.colorHover, cssVar(color, system.color.fg.default))
-      ),
-    },
-    '&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2': {
-      fill: cssVar(
-        deprecatedSystemIconVars.accentHover,
-        cssVar(
-          deprecatedSystemIconVars.colorHover,
-          cssVar(accentColor, cssVar(color, system.color.fg.default))
-        )
-      ),
-    },
-    '&:where(:hover, .hover) .wd-icon-background': {
-      fill: cssVar(
-        deprecatedSystemIconVars.backgroundHover,
-        cssVar(backgroundColor, 'transparent')
-      ),
-    },
     // for Windows high contrast desktop themes
     '@media (prefers-contrast: more)': {
-      '.wd-icon-fill, .wd-icon-accent': {
+      '.wd-icon .wd-icon-fill, .wd-icon .wd-icon-accent': {
         color: 'currentColor',
         fill: 'currentColor',
       },
     },
   }),
+  // Keeps parent stencil `ME` inferred as `{}` so extending stencils keep correct boolean modifier typings.
   modifiers: {},
 });
 
 export const SystemIcon = createComponent('span')({
   displayName: 'SystemIcon',
   Component: (
-    {
-      size,
-      background,
-      backgroundHover,
-      color,
-      colorHover,
-      icon,
-      accent,
-      accentHover,
-      fill,
-      fillHover,
-      ...elemProps
-    }: SystemIconProps,
+    {accent, background, color, icon, size, ...elemProps}: SystemIconProps,
     ref,
     Element
   ) => {
@@ -225,23 +96,15 @@ export const SystemIcon = createComponent('span')({
         src={icon}
         type={CanvasIconTypes.System}
         ref={ref}
-        {...handleCsProp(elemProps, [
+        {...handleCsProp(
+          elemProps,
           systemIconStencil({
-            size: typeof size === 'number' ? px2rem(size) : size,
-            color: transformColorNameToToken(fill || color),
-            accentColor: transformColorNameToToken(accent || color),
-            backgroundColor: transformColorNameToToken(background),
-          }),
-          {
-            [deprecatedSystemIconVars.colorHover]:
-              colorHover && transformColorNameToToken(colorHover),
-            [deprecatedSystemIconVars.fillHover]: fillHover && transformColorNameToToken(fillHover),
-            [deprecatedSystemIconVars.accentHover]:
-              accentHover && transformColorNameToToken(accentHover),
-            [deprecatedSystemIconVars.backgroundHover]:
-              backgroundHover && transformColorNameToToken(backgroundHover),
-          },
-        ])}
+            size: resolveSize(size, component.legacy.systemIcon.size),
+            color,
+            accentColor: accent,
+            backgroundColor: background,
+          })
+        )}
       />
     );
   },

package/icon/lib/SystemIconCircle.tsx

@@ -1,12 +1,20 @@
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon, systemIconStencil} from './SystemIcon';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {calc, createStencil, cssVar, px2rem, CSProps} from '@workday/canvas-kit-styling';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {
+  CSProps,
+  calc,
+  createStencil,
+  cssVar,
+  handleCsProp,
+  px2rem,
+} from '@workday/canvas-kit-styling';
+import {CanvasSystemIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
-import {transformColorNameToToken} from './Svg';
+import {CanvasSystemIcon as LegacyCanvasSystemIcon} from '@workday/design-assets-types';
+
+import {resolveSize} from './Svg';
+import {SystemIcon, systemIconStencil} from './SystemIcon';
 
+/* @deprecated Use tokens instead. Deprecated in v15.0.0. */
 export enum SystemIconCircleSize {
   xs = 16,
   s = 24,
@@ -16,27 +24,28 @@ export enum SystemIconCircleSize {
   xxl = 120,
 }
 
-export interface SystemIconCircleProps extends CSProps {
-  /**
-   * The background color of the SystemIconCircle
-   * @default base.soap300
-   */
-  background?: string;
-  /**
-   * The icon color for the SystemIconCircle. Required if background specified as a CSS variable.
-   * If not specified, it will be calculated based on the background color.
-   * @default rgba(0,0,0,0.65)
-   */
-  color?: string;
+/** Mapping utility for the SystemIconCircleSize enum to the systemLegacy size tokens.
+ * @deprecated Use tokens instead. Deprecated in v15.0.0.
+ * */
+const sizes = {
+  xs: system.legacy.size.xxxs,
+  s: system.legacy.size.xs,
+  m: system.legacy.size.sm,
+  l: system.legacy.size.md,
+  xl: system.legacy.size.xxl,
+  xxl: px2rem(120),
+};
+
+type SystemIconCircleCommonProps = {
   /**
-   * The icon to display from `@workday/canvas-accent-icons-web`.
+   * The icon to display from `@workday/canvas-system-icons-web`.
    */
-  icon: CanvasSystemIcon;
+  icon: CanvasSystemIcon | LegacyCanvasSystemIcon;
   /**
-   * The size of the SystemIconCircle.
+   * The size token of the SystemIconCircle.
    * @default SystemIconCircleSize.l
    */
-  size?: SystemIconCircleSize | number;
+  size?: SystemIconCircleSize | string | number;
   /**
    * If set to `true`, transform the SVG's x-axis to mirror the graphic. Use this if you want to
    * always mirror the icon regardless of the content direction. If the SVG should mirror only when
@@ -51,32 +60,54 @@ export interface SystemIconCircleProps extends CSProps {
    * @default false
    */
   shouldMirrorInRTL?: boolean;
-}
+  /**
+   * If set to `true`, the icon will be displayed in inverse mode.
+   * @default false
+   */
+  inverse?: boolean;
+} & CSProps;
+
+/**
+ * Circle fill and icon color. When `background` is set, `color` is required so foreground/background
+ * stay paired for contrast.
+ */
+export type SystemIconCircleProps =
+  | (SystemIconCircleCommonProps & {background?: never; color?: never})
+  | (SystemIconCircleCommonProps & {background: string; color: string});
 
 export const systemIconCircleStencil = createStencil({
   vars: {
-    containerSize: '',
     background: '',
     color: '',
+    size: '',
   },
-  base: ({background, containerSize, color}) => ({
-    background: cssVar(background, system.color.bg.alt.soft),
+  base: ({background, color, size}) => ({
+    background: cssVar(background, system.legacy.color.surface.alt.default),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: system.space.zero,
+    padding: 0,
     border: 'none',
-    borderRadius: system.shape.round,
+    borderRadius: system.legacy.shape.full,
     overflow: 'hidden',
-    width: cssVar(containerSize, system.space.x10),
-    height: cssVar(containerSize, system.space.x10),
-    [systemIconStencil.vars.size]: calc.multiply(cssVar(containerSize, system.space.x10), 0.625),
+    width: cssVar(size, system.legacy.size.md),
+    height: cssVar(size, system.legacy.size.md),
+    // There is no `component.systemIcon.size.*` token for `40px` so leaving `size` here.
+    [systemIconStencil.vars.size]: calc.multiply(cssVar(size, system.legacy.size.md), 0.625),
     [systemIconStencil.vars.color]: color,
     '& img': {
       width: '100%',
       height: '100%',
     },
   }),
+  modifiers: {
+    inverse: {
+      true: ({background, color}) => ({
+        background: cssVar(background, system.legacy.color.accent.info),
+        [systemIconStencil.vars.color]: cssVar(color, system.color.fg.inverse),
+      }),
+    },
+  },
 });
 
 export const SystemIconCircle = createComponent('span')({
@@ -89,29 +120,21 @@ export const SystemIconCircle = createComponent('span')({
       icon,
       shouldMirror,
       shouldMirrorInRTL,
+      inverse,
       ...elemProps
     }: SystemIconCircleProps,
     ref,
     Element
   ) => {
-    // `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
-    const backgroundFallback =
-      background && !background.startsWith('--') ? background : colors.soap200;
-
-    const iconColor = pickForegroundColor(
-      backgroundFallback,
-      'rgba(0,0,0,0.65)',
-      colors.frenchVanilla100
-    );
-
     return (
       <div
-        {...mergeStyles(
+        {...handleCsProp(
           elemProps,
           systemIconCircleStencil({
-            containerSize: typeof size === 'number' ? px2rem(size) : size,
-            background: transformColorNameToToken(background),
-            color: color || iconColor,
+            size: resolveSize(size, sizes),
+            background,
+            color,
+            inverse,
           })
         )}
       >

package/icon/lib/types.ts

@@ -1,3 +1,4 @@
 import {DetailedHTMLProps, HTMLAttributes} from 'react';
 
+/** @deprecated Deprecated in v15.0.0. */
 export type SpanProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;

package/icon/lib/utils.ts

@@ -1,6 +1,11 @@
-import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
+import {CanvasExpressiveIcon} from '@workday/canvas-expressive-icons-web';
+import {CanvasIconTypes, CanvasSystemIcon} from '@workday/canvas-system-icons-web';
 
-export function validateIconType(icon: CanvasIcon, expectedType: CanvasIconTypes) {
+/** @deprecated Deprecated in v15.0.0. */
+export function validateIconType(
+  icon: CanvasSystemIcon | CanvasExpressiveIcon,
+  expectedType: CanvasIconTypes
+) {
   if (icon.type !== expectedType) {
     throw `${icon.name}: Icon type "${icon.type}" does not match expected type "${expectedType}"`;
   }

package/index.ts

@@ -15,10 +15,12 @@ export * from './disclosure';
 export * from './expandable';
 export * from './form-field';
 export * from './icon';
+export * from './information-highlight';
 export * from './layout';
 export * from './loading-dots';
 export * from './menu';
 export * from './modal';
+export * from './pill';
 export * from './pagination';
 export * from './popup';
 export * from './radio';

package/information-highlight/index.ts

@@ -0,0 +1,5 @@
+export * from './lib/InformationHighlight';
+export * from './lib/parts/Body';
+export * from './lib/parts/Heading';
+export * from './lib/parts/Icon';
+export * from './lib/parts/Link';

package/information-highlight/lib/InformationHighlight.tsx

@@ -0,0 +1,107 @@
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+import {useInformationHighlightModel} from './hooks/useInformationHighlightModel';
+import {Body} from './parts/Body';
+import {InformationHighlightHeading} from './parts/Heading';
+import {Icon} from './parts/Icon';
+import {Link} from './parts/Link';
+
+interface InformationHighlightProps extends CSProps {}
+
+export const informationHighlightStencil = createStencil({
+  base: {
+    display: 'grid',
+    gridTemplateColumns: 'min-content',
+    gap: `${system.legacy.gap.sm} ${system.legacy.gap.md}`,
+    padding: system.legacy.padding.md,
+    borderRadius: system.legacy.shape.sm,
+    outline: `${px2rem(1)} solid transparent`,
+    borderInlineStart: `${base.legacy.size50} solid transparent`,
+  },
+  modifiers: {
+    informational: {
+      low: {
+        borderInlineStartColor: system.legacy.color.border.info.default,
+        backgroundColor: system.legacy.color.surface.alt.default,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: system.legacy.color.fg.info.default,
+          [systemIconStencil.vars.backgroundColor]: system.legacy.color.fg.info.default,
+        },
+      },
+      high: {
+        borderInlineStartColor: system.legacy.color.border.info.default,
+        backgroundColor: system.legacy.color.surface.info.default,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: system.legacy.color.fg.info.default,
+          [systemIconStencil.vars.backgroundColor]: system.legacy.color.fg.info.default,
+        },
+      },
+    },
+    caution: {
+      low: {
+        borderInlineStartColor: system.legacy.color.border.warning,
+        backgroundColor: system.legacy.color.surface.alt.default,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: system.legacy.color.fg.warning.default,
+          [systemIconStencil.vars.backgroundColor]: system.legacy.color.fg.warning.default,
+        },
+      },
+      high: {
+        borderInlineStartColor: system.legacy.color.border.warning,
+        backgroundColor: system.legacy.color.surface.warning.default,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: system.legacy.color.fg.warning.default,
+          [systemIconStencil.vars.backgroundColor]: system.legacy.color.fg.warning.default,
+        },
+      },
+    },
+    critical: {
+      low: {
+        borderInlineStartColor: system.legacy.color.border.danger,
+        backgroundColor: system.legacy.color.surface.danger.default,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: system.legacy.color.fg.danger.default,
+          // The fallback is set to 'transparent' as this will be the same transparent background icon used with v3 tokens
+          [systemIconStencil.vars.backgroundColor]: system.legacy.color.fg.danger.default,
+        },
+      },
+      high: {
+        borderInlineStartColor: system.legacy.color.border.danger,
+        backgroundColor: system.legacy.color.surface.danger.default,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: system.legacy.color.fg.danger.default,
+          [systemIconStencil.vars.backgroundColor]: system.legacy.color.fg.danger.default,
+        },
+      },
+    },
+  },
+});
+
+export const InformationHighlight = createContainer('section')({
+  displayName: 'InformationHighlight',
+  modelHook: useInformationHighlightModel,
+  subComponents: {
+    Icon: Icon,
+    Heading: InformationHighlightHeading,
+    Body: Body,
+    Link: Link,
+  },
+})(({...elemProps}: InformationHighlightProps, Element, model) => {
+  return (
+    <Element
+      {...handleCsProp(
+        elemProps,
+        informationHighlightStencil({[model.state.variant]: model.state.emphasis})
+      )}
+    />
+  );
+});

package/information-highlight/lib/hooks/useInformationHighlightModel.ts

@@ -0,0 +1,16 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+
+export const useInformationHighlightModel = createModelHook({
+  defaultConfig: {
+    variant: 'informational' as 'informational' | 'caution' | 'critical',
+    emphasis: 'low' as 'low' | 'high',
+  },
+})(config => {
+  return {
+    state: {
+      variant: config.variant,
+      emphasis: config.emphasis,
+    },
+    events: {},
+  };
+});

package/information-highlight/lib/parts/Body.tsx

@@ -0,0 +1,32 @@
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {Text} from '@workday/canvas-kit-react/text';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const informationHighlightBodyStencil = createStencil({
+  base: () => {
+    return {
+      fontFamily: system.fontFamily.default,
+      fontWeight: system.fontWeight.normal,
+      lineHeight: system.legacy.lineHeight.subtext.lg,
+      fontSize: system.legacy.fontSize.subtext.lg,
+      letterSpacing: system.legacy.letterSpacing.subtext.lg,
+      color: system.color.fg.default,
+      gridColumn: '2',
+      marginBlockEnd: system.legacy.gap.sm,
+    };
+  },
+});
+
+export const Body = createComponent('div')({
+  displayName: 'Body',
+  Component: ({...elemProps}: ExtractProps<typeof Text, never>, ref, Element) => {
+    return (
+      <Text
+        as={Element}
+        ref={ref}
+        {...handleCsProp(elemProps, informationHighlightBodyStencil())}
+      />
+    );
+  },
+});