Improve Toast appearance of "neutral" variant (#1449)

Co-authored-by: Emma Hamilton <[email protected]>

Author: jossmac

.changeset/strong-bikes-cheer.md

@@ -0,0 +1,5 @@
+---
+'@keystar/ui': patch
+---
+
+Improve "neutral" `Toast` appearance, esp. for dark mode.

design-system/pkg/src/toast/Toast.tsx

@@ -9,12 +9,19 @@ import { checkCircle2Icon } from '@keystar/ui/icon/icons/checkCircle2Icon';
 import { infoIcon } from '@keystar/ui/icon/icons/infoIcon';
 import { alertTriangleIcon } from '@keystar/ui/icon/icons/alertTriangleIcon';
 import { SlotProvider } from '@keystar/ui/slots';
-import { classNames, css, tokenSchema, useStyleProps } from '@keystar/ui/style';
+import {
+  classNames,
+  css,
+  tokenSchema,
+  useMediaQuery,
+  useStyleProps,
+} from '@keystar/ui/style';
 import { Text } from '@keystar/ui/typography';
 import { isReactText } from '@keystar/ui/utils';
 
 import intlMessages from './l10n';
 import { ToastProps } from './types';
+import { useProvider } from '../core';
 
 const ICONS = {
   info: infoIcon,
@@ -45,6 +52,10 @@ function Toast(props: ToastProps, ref: ForwardedRef<HTMLDivElement>) {
     tone && tone !== 'neutral' ? stringFormatter.format(tone) : null;
   let icon = tone && tone !== 'neutral' ? ICONS[tone] : null;
 
+  const colorScheme = useColorScheme();
+  const staticColor =
+    tone === 'neutral' && colorScheme === 'dark' ? 'dark' : 'light';
+
   const handleAction = () => {
     if (onAction) {
       onAction();
@@ -83,7 +94,8 @@ function Toast(props: ToastProps, ref: ForwardedRef<HTMLDivElement>) {
           // tones
           color: tokenSchema.color.foreground.onEmphasis,
           '&[data-tone=neutral]': {
-            background: tokenSchema.color.scale['slate9'],
+            backgroundColor: tokenSchema.color.background.inverse,
+            color: tokenSchema.color.foreground.inverse,
           },
           '&[data-tone=info]': {
             background: tokenSchema.color.background.accentEmphasis,
@@ -135,30 +147,36 @@ function Toast(props: ToastProps, ref: ForwardedRef<HTMLDivElement>) {
               {isReactText(children) ? <Text>{children}</Text> : children}
             </div>
             {actionLabel && (
-              <Button
-                onPress={handleAction}
-                // prominence="low"
-                static="light"
-                // tone="secondary"
-                // staticColor="white"
-              >
+              <Button onPress={handleAction} static={staticColor}>
                 {actionLabel}
               </Button>
             )}
           </div>
         </div>
         <div
           className={css({
-            borderInlineStart: `${tokenSchema.size.border.regular} solid #fff3`,
+            borderInlineStart: `${tokenSchema.size.border.regular} solid var(--divider)`,
             paddingInlineStart: tokenSchema.size.space.regular,
+            '--divider': 'color-mix(in srgb, transparent, currentColor 20%)',
           })}
         >
-          <ClearButton static="light" {...closeButtonProps} />
+          <ClearButton static={staticColor} {...closeButtonProps} />
         </div>
       </SlotProvider>
     </div>
   );
 }
 
+function useColorScheme() {
+  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+  const preferred = useProvider();
+
+  if (preferred.colorScheme === 'auto') {
+    return prefersDark ? 'dark' : 'light';
+  }
+
+  return preferred.colorScheme;
+}
+
 let _Toast = forwardRef(Toast);
 export { _Toast as Toast };