[LG-4998] feat: Shadow Tokens (#3249)

* [LG-4998] feat: Shadow Tokens

* updated token maps, updated card, code, menu, modal, expandable card

* updates searchpanetl

* updates

* updated overflwo shadow value

* updated cbox, menu, formfooter, tablehead, toast

* added chat. menu, select

* updated dependencies

* updated lock file, updated shadow1

* pr feedback pt 1

* fixed deprecated comment

* updates

* udpated titleBar and tableHEad shadows

* rm 100 value, updated changeset

* rm datePicker changes, rm shadow from titleBar

* updated tableHead

Author: adamrasheed

.changeset/cold-rivers-drive.md

@@ -0,0 +1,21 @@
+---
+'@leafygreen-ui/tokens': major
+'@leafygreen-ui/confirmation-modal': minor
+'@leafygreen-ui/expandable-card': minor
+'@leafygreen-ui/search-input': minor
+'@leafygreen-ui/code-editor': minor
+'@leafygreen-ui/form-footer': minor
+'@leafygreen-ui/combobox': minor
+'@lg-chat/chat-window': minor
+'@leafygreen-ui/emotion': minor
+'@leafygreen-ui/select': minor
+'@lg-chat/title-bar': minor
+'@leafygreen-ui/modal': minor
+'@leafygreen-ui/table': minor
+'@leafygreen-ui/toast': minor
+'@leafygreen-ui/card': minor
+'@leafygreen-ui/menu': minor
+'@lg-chat/message': minor
+---
+
+Updated major version to Shadow tokens. `shadow` object and its key/values have been changed. Other packages utilizing the shadow values have had a minor update to accommodate the changes.

chat/chat-window/src/ChatWindow/ChatWindow.styles.ts

@@ -3,6 +3,7 @@ import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import {
   borderRadius,
+  boxShadows,
   breakpoints,
   color,
   InteractionState,
@@ -27,7 +28,7 @@ const getSpaciousContainerStyles = (theme: Theme) => css`
   overflow: hidden;
   border: 1px solid
     ${color[theme].border[Variant.Secondary][InteractionState.Default]};
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: ${boxShadows[theme][3]};
   background-color: ${theme === Theme.Dark
     ? palette.black
     : palette.gray.light3};

chat/message/src/MessageContainer/MessageContainer.styles.ts

@@ -1,7 +1,7 @@
 import { css, cx } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
-import { borderRadius, spacing } from '@leafygreen-ui/tokens';
+import { borderRadius, boxShadows, spacing } from '@leafygreen-ui/tokens';
 
 import { Variant } from './MessageContainer.types';
 
@@ -32,10 +32,10 @@ const getCompactStyles = ({
     [getCompactPrimaryVariantStyles(theme)]: variant === Variant.Primary,
   });
 
-const baseSpaciousContainerStyles = css`
+const getBaseSpaciousContainerStyles = (theme: Theme) => css`
   border-radius: ${borderRadius[300]}px;
   /* Card Shadow */
-  box-shadow: 0px 4px 10px -4px ${palette.black}4D; // 4D is 30% opacity
+  box-shadow: ${boxShadows[theme][1]};
   padding: ${spacing[600]}px;
 `;
 
@@ -65,7 +65,10 @@ const getSpaciousContainerStyles = ({
   theme: Theme;
   variant: Variant;
 }) =>
-  cx(baseSpaciousContainerStyles, spaciousVariantThemeStyles[variant][theme]);
+  cx(
+    getBaseSpaciousContainerStyles(theme),
+    spaciousVariantThemeStyles[variant][theme],
+  );
 
 export const getMessageContainerStyles = ({
   className,

chat/title-bar/src/TitleBar/TitleBar.styles.ts

@@ -1,9 +1,11 @@
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
 
-export const baseStyles = css`
+import { Align } from './TitleBar.types';
+
+const baseStyles = css`
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -12,7 +14,7 @@ export const baseStyles = css`
   border-bottom: 1px solid;
 `;
 
-export const themeStyles: Record<Theme, string> = {
+const themeStyles: Record<Theme, string> = {
   [Theme.Dark]: css`
     background-color: ${palette.black};
     border-color: ${palette.gray.dark2};
@@ -23,13 +25,28 @@ export const themeStyles: Record<Theme, string> = {
   `,
 };
 
-export const contentContainerStyles = css`
+export const getTitleBarStyles = ({
+  className,
+  theme,
+}: {
+  theme: Theme;
+  className?: string;
+}) => {
+  return cx(baseStyles, themeStyles[theme], className);
+};
+
+const contentContainerStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: ${spacing[2]}px;
+  gap: ${spacing[200]}px;
 `;
 
-export const contentAlignmentStyles = css`
+const contentAlignmentStyles = css`
   margin: auto;
 `;
+
+export const getContentContainerStyles = ({ align }: { align: Align }) =>
+  cx(contentContainerStyles, {
+    [contentAlignmentStyles]: align === Align.Center,
+  });

chat/title-bar/src/TitleBar/TitleBar.tsx

@@ -1,20 +1,17 @@
 import React, { ForwardedRef, forwardRef } from 'react';
 import { Avatar, Variant as ChatAvatarVariant } from '@lg-chat/avatar';
 
-import Badge from '@leafygreen-ui/badge';
-import { cx } from '@leafygreen-ui/emotion';
+import { Badge } from '@leafygreen-ui/badge';
 import XIcon from '@leafygreen-ui/icon/dist/X';
-import IconButton from '@leafygreen-ui/icon-button';
+import { IconButton } from '@leafygreen-ui/icon-button';
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
 import { Body } from '@leafygreen-ui/typography';
 
 import {
-  baseStyles,
-  contentAlignmentStyles,
-  contentContainerStyles,
-  themeStyles,
+  getContentContainerStyles,
+  getTitleBarStyles,
 } from './TitleBar.styles';
 import { Align, TitleBarProps } from '.';
 
@@ -36,15 +33,11 @@ export const TitleBar = forwardRef(
     return (
       <LeafyGreenProvider darkMode={darkMode}>
         <div
-          className={cx(baseStyles, themeStyles[theme], className)}
+          className={getTitleBarStyles({ theme, className })}
           {...rest}
           ref={ref}
         >
-          <div
-            className={cx(contentContainerStyles, {
-              [contentAlignmentStyles]: align === Align.Center,
-            })}
-          >
+          <div className={getContentContainerStyles({ align })}>
             <Avatar variant={ChatAvatarVariant.Mongo} sizeOverride={24} />
             <Body>
               <strong>{title}</strong>

packages/card/package.json

@@ -19,8 +19,7 @@
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/palette": "workspace:^",
     "@leafygreen-ui/polymorphic": "workspace:^",
-    "@leafygreen-ui/tokens": "workspace:^",
-    "polished": "^4.2.2"
+    "@leafygreen-ui/tokens": "workspace:^"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": ">=3.2.0"

packages/card/src/Card.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { storybookArgTypes, StoryMetaType } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
 
-import Card, { CardProps } from '.';
+import { Card, CardProps, ContentStyle } from '.';
 
 const loremIpsum = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy children ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`;
 
@@ -27,6 +27,11 @@ const meta: StoryMetaType<typeof Card> = {
     as: storybookArgTypes.as,
     darkMode: storybookArgTypes.darkMode,
     children: storybookArgTypes.children,
+    contentStyle: {
+      options: Object.values(ContentStyle),
+      control: { type: 'radio' },
+      defaultValue: ContentStyle.None,
+    },
   },
 };
 export default meta;

packages/card/src/Card/styles.ts

@@ -1,31 +1,27 @@
-import { transparentize } from 'polished';
-
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import {
+  boxShadows,
   focusRing,
   fontFamilies,
   transitionDuration,
   typeScales,
 } from '@leafygreen-ui/tokens';
 
+import { ContentStyle } from './types';
+
 interface ColorSet {
   containerStyle: string;
   clickableStyle: string;
 }
 
-const lightBaseBoxShadow = `0 4px 10px -4px ${transparentize(
-  0.7,
-  palette.black,
-)}`;
-const lightHoverBoxShadow = `0 4px 20px -4px ${transparentize(
-  0.8,
-  palette.black,
-)}`;
+const lightBaseBoxShadow = boxShadows[Theme.Light][1];
+const lightHoverBoxShadow = boxShadows[Theme.Light][2];
+const darkBaseBoxShadow = boxShadows[Theme.Dark][1];
+const darkHoverBoxShadow = boxShadows[Theme.Dark][2];
+
 const lightFocusBoxShadow = focusRing.light.default;
-const darkBaseBoxShadow = `0 4px 20px -4px #01121A`;
-const darkHoverBoxShadow = `0 4px 20px -4px ${transparentize(0.3, '#000000')}`;
 const darkFocusBoxShadow = focusRing.dark.default;
 
 export const colorSet: Record<Theme, ColorSet> = {
@@ -50,7 +46,7 @@ export const colorSet: Record<Theme, ColorSet> = {
         box-shadow: ${lightHoverBoxShadow};
 
         &:focus {
-          box-shadow: ${lightFocusBoxShadow}, ${lightHoverBoxShadow};
+          box-shadow: ${lightFocusBoxShadow}, ${lightBaseBoxShadow};
         }
       }
     `,
@@ -74,7 +70,7 @@ export const colorSet: Record<Theme, ColorSet> = {
         box-shadow: ${darkHoverBoxShadow};
 
         &:focus {
-          box-shadow: ${darkHoverBoxShadow}, ${darkFocusBoxShadow};
+          box-shadow: ${darkBaseBoxShadow}, ${darkFocusBoxShadow};
         }
       }
     `,
@@ -92,3 +88,21 @@ export const containerStyle = css`
   padding: 24px;
   min-height: 68px; // 48px + 20px (padding + line-height)
 `;
+
+export const getCardStyles = ({
+  theme,
+  contentStyle,
+  className,
+}: {
+  theme: Theme;
+  contentStyle: ContentStyle;
+  className?: string;
+}) =>
+  cx(
+    containerStyle,
+    {
+      [colorSet[theme].containerStyle]: true,
+      [colorSet[theme].clickableStyle]: contentStyle === ContentStyle.Clickable,
+    },
+    className,
+  );

packages/code-editor/src/CodeEditorTooltip/CodeEditorTooltip.styles.ts

@@ -2,10 +2,10 @@ import { css } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import {
   borderRadius,
+  boxShadows,
   color,
   fontFamilies,
   InteractionState,
-  shadow,
   spacing,
   Variant,
 } from '@leafygreen-ui/tokens';
@@ -19,7 +19,7 @@ export const getTooltipStyles = (theme: Theme) => css`
   border-radius: ${borderRadius[200]}px;
   border: 1px solid
     ${color[theme].border[Variant.Secondary][InteractionState.Default]};
-  box-shadow: ${shadow[theme][100]};
+  box-shadow: ${boxShadows[theme][1]};
   line-height: ${MESSAGE_LINE_HEIGHT}px;
   width: fit-content;
 `;

packages/code-editor/src/SearchPanel/SearchPanel.styles.ts

@@ -3,8 +3,8 @@ import { Theme } from '@leafygreen-ui/lib';
 import {
   BaseFontSize,
   borderRadius,
+  boxShadows,
   InteractionState,
-  shadow,
   spacing,
   transitionDuration,
   Variant,
@@ -48,7 +48,7 @@ const getBaseContainerStyles = (
     height: 100%;
 
     /** Apply the shadow to the pseudo-element */
-    box-shadow: ${shadow[theme][100]};
+    box-shadow: ${boxShadows[theme][1]};
 
     /** Negative values expand the clipping area outward, revealing the shadow. */
     /** A zero value clips the shadow exactly at the element's edge. */