chore: adds colors to Well

Author: geotrev

packages/notifications/src/elements/Well.tsx

@@ -12,9 +12,11 @@ import { StyledWell } from '../styled';
 import { Title } from './content/Title';
 import { Paragraph } from './content/Paragraph';
 
-export const WellComponent = React.forwardRef<HTMLDivElement, IWellProps>((props, ref) => (
-  <StyledWell ref={ref} {...props} />
-));
+export const WellComponent = React.forwardRef<HTMLDivElement, IWellProps>(
+  ({ isFloating, isRecessed, ...props }, ref) => (
+    <StyledWell ref={ref} $isFloating={isFloating} $isRecessed={isRecessed} {...props} />
+  )
+);
 
 WellComponent.displayName = 'Well';
 

packages/notifications/src/styled/StyledWell.spec.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 import { StyledWell } from '../styled';
 
 describe('StyledWell', () => {
@@ -30,8 +30,8 @@ describe('StyledWell', () => {
   });
 
   it('renders recessed styling correctly', () => {
-    const { container } = render(<StyledWell isRecessed />);
+    const { container } = render(<StyledWell $isRecessed />);
 
-    expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.grey[100]);
+    expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.grey[100]);
   });
 });

packages/notifications/src/styled/StyledWell.ts

@@ -6,13 +6,13 @@
  */
 
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledBase } from './StyledBase';
 
 const COMPONENT_ID = 'notifications.well';
 
 export interface IStyledWellProps {
-  isRecessed?: boolean;
+  $isRecessed?: boolean;
 }
 
 /**
@@ -22,9 +22,11 @@ export const StyledWell = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledWellProps>`
-  background-color: ${props => props.isRecessed && getColorV8('neutralHue', 100, props.theme)};
-  color: ${props => getColorV8('neutralHue', 600, props.theme)}
-    ${props => retrieveComponentStyles(COMPONENT_ID, props)};
+  background-color: ${p =>
+    p.$isRecessed && getColor({ variable: 'background.recessed', theme: p.theme })};
+  color: ${p => getColor({ variable: 'foreground.subtle', theme: p.theme })};
+
+  ${p => retrieveComponentStyles(COMPONENT_ID, p)};
 `;
 
 StyledWell.defaultProps = {