DOP-5029: CTAs should initialize in dark mode preference

src/components/Banner/Banner.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { palette } from '@leafygreen-ui/palette';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import styled from '@emotion/styled';
 import LeafyBanner, { Variant as LeafyVariant } from '@leafygreen-ui/banner';
 import ComponentFactory from '../ComponentFactory';
@@ -14,21 +13,114 @@ export const alertMap = {
   success: LeafyVariant.Success,
 };
 
+const styleMapLight = {
+  info: {
+    backgroundColor: palette.blue.light3,
+    color: palette.blue.dark2,
+    borderColor: palette.blue.light2,
+    linkColor: palette.blue.dark3,
+    beforeColor: palette.blue.base,
+    iconColor: palette.blue.base,
+  },
+  warning: {
+    backgroundColor: palette.yellow.light3,
+    color: palette.yellow.dark2,
+    borderColor: palette.yellow.light2,
+    linkColor: palette.yellow.dark3,
+    beforeColor: palette.yellow.base,
+    iconColor: palette.yellow.dark2,
+  },
+  danger: {
+    backgroundColor: palette.red.light3,
+    color: palette.red.dark2,
+    borderColor: palette.red.light2,
+    linkColor: palette.red.dark3,
+    beforeColor: palette.red.base,
+    iconColor: palette.red.base,
+  },
+  success: {
+    backgroundColor: palette.green.light3,
+    color: palette.green.dark2,
+    borderColor: palette.green.light2,
+    linkColor: palette.green.dark3,
+  },
+};
+const styleMapDark = {
+  info: {
+    backgroundColor: palette.blue.dark3,
+    color: palette.blue.light2,
+    borderColor: palette.blue.dark2,
+    linkColor: palette.blue.light3,
+    beforeColor: palette.blue.light1,
+    iconColor: palette.blue.light1,
+  },
+  warning: {
+    backgroundColor: palette.yellow.dark3,
+    color: palette.yellow.light2,
+    borderColor: palette.yellow.dark2,
+    linkColor: palette.yellow.light3,
+    beforeColor: palette.yellow.dark2,
+    iconColor: palette.yellow.base,
+  },
+  danger: {
+    backgroundColor: palette.red.dark3,
+    color: palette.red.light2,
+    borderColor: palette.red.dark2,
+    linkColor: palette.red.light3,
+    beforeColor: palette.red.base,
+    iconColor: palette.red.light1,
+  },
+  success: {
+    backgroundColor: palette.green.dark3,
+    color: palette.green.light2,
+    borderColor: palette.green.dark2,
+    linkColor: palette.green.light3,
+  },
+};
+
 const StyledBanner = styled((props) => <LeafyBanner {...props} />)`
   ${baseBannerStyle}
+  background-color: ${(props) => styleMapLight[props.variant].backgroundColor};
+  color: ${(props) => styleMapLight[props.variant].color};
+  border-color: ${(props) => styleMapLight[props.variant].borderColor};
+  // copied from LG
+  ::before {
+    background: linear-gradient(to left, transparent 6px, ${(props) => styleMapLight[props.variant].beforeColor}} 6px);
+  }
+  a {
+    color: ${(props) => styleMapLight[props.variant].linkColor};
+    :hover {
+      color: ${(props) => styleMapLight[props.variant].color};
+      text-decoration-color: ${(props) => styleMapLight[props.variant].color};
+    }
+  }
+  > svg {
+    color: ${(props) => styleMapLight[props.variant].iconColor};
+  }
 
-  a:hover {
-    text-decoration-color: var(--text-decoration-color);
+  .dark-theme & {
+    background-color: ${(props) => styleMapDark[props.variant].backgroundColor};
+    color: ${(props) => styleMapDark[props.variant].color};
+    border-color: ${(props) => styleMapDark[props.variant].borderColor};
+    ::before {
+      background: linear-gradient(to left, transparent 6px, ${(props) => styleMapDark[props.variant].beforeColor} 6px);
+    }
+    a {
+      color: ${(props) => styleMapDark[props.variant].linkColor};
+      :hover {
+        color: ${(props) => styleMapDark[props.variant].color};
+        text-decoration-color: ${(props) => styleMapDark[props.variant].color};
+      }
+    }
+    > svg {
+      color: ${(props) => styleMapDark[props.variant].iconColor};
+    }
   }
 `;
 
 const Banner = ({ nodeData: { children, options }, ...rest }) => {
-  const { darkMode } = useDarkMode();
   return (
-    <StyledBanner
-      variant={alertMap[options?.variant] || LeafyVariant.Info}
-      style={{ '--text-decoration-color': darkMode ? palette.blue.light2 : palette.blue.dark2 }}
-    >
+    <StyledBanner variant={alertMap[options?.variant] || LeafyVariant.Info}>
       {children.map((child, i) => (
         <ComponentFactory {...rest} key={i} nodeData={child} />
       ))}

src/components/Banner/CTABanner.js

@@ -1,19 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { palette } from '@leafygreen-ui/palette';
 import Icon, { glyphs } from '@leafygreen-ui/icon';
 import ComponentFactory from '../ComponentFactory';
 import { baseBannerStyle } from './styles/bannerItemStyle';
 
 const videoBannerStyling = css`
   ${baseBannerStyle};
+  background-color: ${palette.blue.light3};
+  border: 1px solid ${palette.blue.light2};
+  color: ${palette.blue.dark2};
+  .dark-theme & {
+    background-color: ${palette.blue.dark3};
+    border: 1px solid ${palette.blue.dark2};
+    color: ${palette.blue.light2};
+  }
   align-items: center;
-  background-color: var(--background-color);
+
   border-radius: 6px;
-  border: 1px solid var(--border);
-  color: var(--color);
+
   display: flex;
   font-size: 14px;
   margin: 24px 0px;
@@ -41,10 +47,10 @@ const lgIconStyling = css`
 
 const linkStyling = css`
   text-decoration: none !important;
+  color: unset;
 `;
 
 const CTABanner = ({ nodeData: { children, options }, ...rest }) => {
-  const { darkMode } = useDarkMode();
   // Handles case sensitivity for specified icons
   let lgIcon = 'Play';
   if (options?.icon) {
@@ -56,14 +62,7 @@ const CTABanner = ({ nodeData: { children, options }, ...rest }) => {
 
   return (
     <a href={options?.url} css={linkStyling}>
-      <div
-        css={videoBannerStyling}
-        style={{
-          '--background-color': darkMode ? palette.blue.dark3 : palette.blue.light3,
-          '--border': darkMode ? palette.blue.dark2 : palette.blue.light2,
-          '--color': darkMode ? palette.blue.light2 : palette.blue.dark2,
-        }}
-      >
+      <div css={videoBannerStyling}>
         <div css={lgIconStyling}>
           <Icon glyph={lgIcon} fill={palette.blue.base} />
         </div>

tests/unit/__snapshots__/Banner.test.js.snap

@@ -5,6 +5,9 @@ exports[`renders a Banner correctly 1`] = `
   .emotion-0 {
   margin: 16px 0;
   font-size: 13px;
+  background-color: #E1F7FF;
+  color: #083C90;
+  border-color: #C3E7FE;
 }
 
 .emotion-0>div>div>* {
@@ -28,8 +31,44 @@ exports[`renders a Banner correctly 1`] = `
   text-underline-offset: 3px;
 }
 
+.emotion-0::before {
+  background: linear-gradient(to left, transparent 6px, #016BF8} 6px);
+}
+
+.emotion-0 a {
+  color: #0C2657;
+}
+
 .emotion-0 a:hover {
-  text-decoration-color: var(--text-decoration-color);
+  color: #083C90;
+  text-decoration-color: #083C90;
+}
+
+.emotion-0>svg {
+  color: #016BF8;
+}
+
+.dark-theme .emotion-0 {
+  background-color: #0C2657;
+  color: #C3E7FE;
+  border-color: #083C90;
+}
+
+.dark-theme .emotion-0::before {
+  background: linear-gradient(to left, transparent 6px, #0498EC 6px);
+}
+
+.dark-theme .emotion-0 a {
+  color: #E1F7FF;
+}
+
+.dark-theme .emotion-0 a:hover {
+  color: #C3E7FE;
+  text-decoration-color: #C3E7FE;
+}
+
+.dark-theme .emotion-0>svg {
+  color: #0498EC;
 }
 
 .emotion-2 {
@@ -146,7 +185,6 @@ exports[`renders a Banner correctly 1`] = `
 <div
     class="emotion-0 emotion-1 emotion-2"
     role="alert"
-    style="--text-decoration-color: #083C90;"
   >
     <svg
       aria-label="Info With Circle Icon"