fix: toast colors

src/molecules/Toast/Toast.stories.tsx

@@ -1,8 +1,10 @@
+import { useState } from 'react';
+
 import { hill_shading, users_circle } from '@equinor/eds-icons';
 import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { spacings } from 'src/atoms/style';
-import { Toast } from 'src/molecules/Toast/Toast';
+import { Toast, type ToastProps } from 'src/molecules/Toast/Toast';
 
 import { expect, fn, userEvent } from 'storybook/test';
 
@@ -75,6 +77,16 @@ const meta: Meta<typeof Toast> = {
 export default meta;
 type Story = StoryObj<typeof Toast>;
 
+type ToastVariant = NonNullable<ToastProps['variant']>;
+
+const TOAST_VARIANTS: ToastVariant[] = [
+  'neutral',
+  'info',
+  'warning',
+  'error',
+  'success',
+];
+
 export const Default: Story = {
   args: {
     icon: users_circle,
@@ -104,13 +116,52 @@ export const Variants: Story = {
 export const WithDuration: Story = {
   args: {
     icon: users_circle,
-    duration: 120,
+    duration: 16,
   },
+  render: (args) => <WithDurationRender {...args} />,
   play: async ({ canvas }) => {
-    await expect(canvas.getByRole('progressbar')).toBeInTheDocument();
+    await expect(canvas.getAllByRole('progressbar')).toHaveLength(5);
   },
 };
 
+function WithDurationRender(args: ToastProps) {
+  const [keysByVariant, setKeysByVariant] = useState<
+    Record<ToastVariant, number>
+  >({
+    neutral: 0,
+    info: 0,
+    warning: 0,
+    error: 0,
+    success: 0,
+  });
+
+  const handleOnClose = (variant: ToastVariant) => {
+    setKeysByVariant((current) => ({
+      ...current,
+      [variant]: current[variant] + 1,
+    }));
+  };
+
+  return (
+    <div
+      style={{ display: 'flex', flexDirection: 'column', gap: spacings.medium }}
+    >
+      {TOAST_VARIANTS.map((variant) => (
+        <Toast
+          key={`${variant}-${keysByVariant[variant]}`}
+          title={args.title}
+          icon={args.icon}
+          variant={variant}
+          description={args.description}
+          action={args.action}
+          duration={args.duration}
+          onClose={() => handleOnClose(variant)}
+        />
+      ))}
+    </div>
+  );
+}
+
 export const WithDescription: Story = {
   args: {
     icon: users_circle,
@@ -128,7 +179,7 @@ export const WithAction: Story = {
     description: 'This is the description, it can be a longer text',
     action: {
       onClick: fn(),
-      text: 'Undo',
+      text: 'Read more',
     },
   },
   play: async ({ canvas, args }) => {

src/molecules/Toast/Toast.styles.ts

@@ -1,28 +1,85 @@
-import { shape, spacings } from 'src/atoms/style';
-import { ToastProps } from 'src/molecules';
+import { Typography } from '@equinor/eds-core-react';
+
+import { colors, shape, spacings } from 'src/atoms/style';
+import { Button } from 'src/molecules/Button/Button';
+import { IconButton } from 'src/molecules/Button/IconButton/IconButton';
+import type { ToastProps } from 'src/molecules/Toast/Toast';
 import { TOAST_COLORS } from 'src/molecules/Toast/Toast.utils';
 
-import styled, { css, keyframes } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+interface VariantProps {
+  $variant?: ToastProps['variant'];
+}
+
+interface HeaderProps {
+  $hasIcon: boolean;
+}
+
+const getVariantColors = (variant?: ToastProps['variant']) =>
+  TOAST_COLORS[variant ?? 'neutral'];
 
-export const Header = styled.header`
+export const Header = styled.header<HeaderProps>`
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: ${({ $hasIcon }) =>
+    $hasIcon ? 'auto minmax(0, 1fr)' : 'minmax(0, 1fr)'};
+  align-items: start;
   gap: ${spacings.small};
-  padding-right: 40px;
-  > h6 {
-    overflow: hidden;
-    text-overflow: ellipsis;
+`;
+
+export const HeaderIcon = styled.span<VariantProps>`
+  display: inline-flex;
+  align-items: center;
+
+  > svg {
+    color: ${({ $variant }) => getVariantColors($variant).controlForeground};
   }
-  &:has(> svg:first-child) {
-    grid-template-columns: auto minmax(0, 1fr);
+`;
+
+export const Title = styled(Typography)`
+  padding-right: ${spacings.xx_large};
+`;
+
+export const ActionButton = styled(Button)<VariantProps>`
+  align-self: flex-start;
+  width: fit-content;
+  margin-left: ${spacings.small};
+  color: ${({ $variant }) => getVariantColors($variant).controlForeground};
+  border-color: ${({ $variant }) =>
+    getVariantColors($variant).controlForeground};
+  &:hover {
+    background: ${({ $variant }) =>
+      getVariantColors($variant).controlHoverBackground};
+    color: ${({ $variant }) =>
+      getVariantColors($variant).controlForegroundHover};
+    border-color: ${({ $variant }) =>
+      getVariantColors($variant).controlForegroundHover};
   }
-  > button {
-    position: absolute;
-    top: ${spacings.x_small};
-    right: ${spacings.x_small};
+`;
+
+export const CloseButton = styled(IconButton)<VariantProps>`
+  position: absolute;
+  top: ${spacings.x_small};
+  right: ${spacings.x_small};
+  color: ${({ $variant }) => getVariantColors($variant).controlForeground};
+  &:hover {
+    color: ${({ $variant }) =>
+      getVariantColors($variant).controlForegroundHover};
+    background: ${({ $variant }) =>
+      getVariantColors($variant).controlHoverBackground};
+    border-color: ${({ $variant }) =>
+      getVariantColors($variant).controlHoverBackground};
+    &::before {
+      background: transparent;
+      border-color: transparent;
+    }
   }
 `;
 
+export const Description = styled(Typography)`
+  margin: 0 ${spacings.medium} 0 ${spacings.small};
+`;
+
 interface ContainerProps {
   $variant: ToastProps['variant'];
 }
@@ -38,74 +95,16 @@ export const Container = styled.div<ContainerProps>`
   overflow: hidden;
   min-width: 300px;
   max-width: 420px;
-  > p,
-  > button {
-    margin: 0 ${spacings.small};
-  }
-  > p {
-    margin-right: ${spacings.medium};
-  }
-
-  ${({ $variant }) => {
-    const usingColors = TOAST_COLORS[$variant ?? 'neutral'];
-
-    return css`
-      background: ${usingColors.background};
-
-      > button {
-        margin-right: auto;
-        color: ${usingColors.icon};
-        border-color: ${usingColors.icon};
-        &:hover {
-          background: none;
-          color: ${usingColors.actionHover};
-          border-color: ${usingColors.actionHover};
-          &:before {
-            position: absolute;
-            left: 0;
-            content: '';
-            width: 100%;
-            height: 100%;
-            background: ${usingColors.icon};
-            opacity: 0.15;
-            overflow: visible;
-          }
-        }
-      }
-
-      > ${Header} {
-        > svg:first-child {
-          color: ${usingColors.icon};
-        }
-        > button {
-          svg {
-            color: ${usingColors.close};
-          }
-          &:hover {
-            background: none;
-            &:before {
-              position: absolute;
-              left: 0;
-              content: '';
-              width: 100%;
-              height: 100%;
-              background: ${usingColors.close};
-              opacity: 0.15;
-              border-radius: 50%;
-              overflow: visible;
-            }
-          }
-        }
-      }
-    `;
-  }}
+  background: ${({ $variant }) =>
+    getVariantColors($variant).containerBackground};
 `;
+
 const durationAnimation = keyframes`
- from {
-   width: 100%
- }
+  from {
+    width: 100%;
+  }
   to {
-    width: 0
+    width: 0;
   }
 `;
 
@@ -115,28 +114,27 @@ interface DurationBarProps {
 }
 
 export const DurationBar = styled.span<DurationBarProps>`
-  background: white;
+  background: ${colors.ui.background__default.rgba};
   width: 100%;
   height: 2px;
   position: absolute;
   bottom: 0;
   left: 0;
-  &:after {
+  &::before {
     content: '';
     position: absolute;
     width: inherit;
     height: inherit;
     background: ${({ $variant }) =>
-      TOAST_COLORS[$variant ?? 'neutral'].background};
+      getVariantColors($variant).containerBackground};
     opacity: 0.5;
   }
-  &:before {
+  &::after {
     content: '';
     position: absolute;
     width: inherit;
     height: inherit;
-    background: ${({ $variant }) =>
-      TOAST_COLORS[$variant ?? 'neutral'].duration};
+    background: ${({ $variant }) => getVariantColors($variant).progressFill};
     animation: ${durationAnimation} ${({ $duration }) => $duration}s linear;
     animation-fill-mode: forwards;
   }