Light mode polish 2 (#3162)

- Simplify message and toast with themes, fix incorrect error hover
token
- Bumps text underline opacity 
- Bumps ghost button text opacity
- Tweak boolean cell colour on light mode
- Brighter/more saturated light mode text colours

Author: benjaminleonard

app/table/cells/BooleanCell.tsx

@@ -12,7 +12,13 @@ import { Disabled12Icon, Success12Icon } from '@oxide/design-system/icons/react'
 
 export const BooleanCell = ({ isTrue }: { isTrue: boolean }) =>
   isTrue ? (
-    <Success12Icon className="text-accent mr-1" aria-label="true" />
+    <Success12Icon
+      className="text-accent light:text-accent-secondary mr-1"
+      aria-label="true"
+    />
   ) : (
-    <Disabled12Icon className="text-notice mr-1" aria-label="false" />
+    <Disabled12Icon
+      className="text-notice light:text-notice-secondary mr-1"
+      aria-label="false"
+    />
   )

app/ui/lib/Message.tsx

@@ -37,32 +37,11 @@ const defaultIcon: Record<Variant, ReactElement> = {
   info: <Error12Icon className="rotate-180" />,
 }
 
-const color: Record<Variant, string> = {
-  success: 'bg-accent',
-  error: 'bg-error',
-  notice: 'bg-notice',
-  info: 'bg-info',
-}
-
-const textColor: Record<Variant, string> = {
-  success: 'text-accent',
-  error: 'text-error',
-  notice: 'text-notice',
-  info: 'text-info',
-}
-
-const secondaryTextColor: Record<Variant, string> = {
-  success: 'text-accent-secondary',
-  error: 'text-error-secondary',
-  notice: 'text-notice-secondary',
-  info: 'text-info-secondary',
-}
-
-const linkColor: Record<Variant, string> = {
-  success: 'text-accent-secondary hover:text-accent',
-  error: 'text-error-secondary hover:text-error',
-  notice: 'text-notice-secondary hover:text-notice',
-  info: 'text-info-secondary hover:text-info',
+const themeClass: Record<Variant, string> = {
+  success: '',
+  error: 'red-theme',
+  notice: 'yellow-theme',
+  info: 'blue-theme',
 }
 
 export const Message = ({
@@ -77,40 +56,27 @@ export const Message = ({
   return (
     <div
       className={cn(
-        'relative flex items-start gap-2 overflow-hidden rounded-md p-3 pr-5 ring ring-current/10',
-        color[variant],
-        textColor[variant],
+        'relative flex items-start gap-2 overflow-hidden rounded-md p-3 pr-5 ring ring-inset ring-current/10',
+        'bg-accent text-accent',
+        themeClass[variant],
         className
       )}
     >
       {showIcon && (
-        <div
-          className={cn(
-            'mt-0.5 flex [&>svg]:h-3 [&>svg]:w-3',
-            `[&>svg]:${textColor[variant]}`
-          )}
-        >
+        <div className="text-accent mt-0.5 flex [&>svg]:h-3 [&>svg]:w-3">
           {defaultIcon[variant]}
         </div>
       )}
       <div className="flex-1">
         {title && <div className="text-sans-semi-md">{title}</div>}
-        <div
-          className={cn(
-            // group gives HL the right color
-            'text-sans-md [&>a]:tint-underline group',
-            secondaryTextColor[variant]
-          )}
-        >
+        {/* group gives HL the right color */}
+        <div className="text-sans-md text-accent-secondary [&>a]:tint-underline group">
           {content}
         </div>
 
         {cta && (
           <Link
-            className={cn(
-              'text-sans-md mt-1 flex items-center underline',
-              linkColor[variant]
-            )}
+            className="text-sans-md text-accent-secondary hover:text-accent mt-1 flex items-center underline"
             to={cta.link}
           >
             {cta.text}

app/ui/lib/Toast.tsx

@@ -10,19 +10,14 @@ import cn from 'classnames'
 import { useEffect, type ReactElement, type ReactNode } from 'react'
 import { Link, type To } from 'react-router'
 
-import {
-  Close12Icon,
-  Error12Icon,
-  Success12Icon,
-  Warning12Icon,
-} from '@oxide/design-system/icons/react'
+import { Close12Icon, Error12Icon, Success12Icon } from '@oxide/design-system/icons/react'
 
 import { extractText } from '~/util/str'
 
 import { TimeoutIndicator } from './TimeoutIndicator'
 import { Truncate } from './Truncate'
 
-type Variant = 'success' | 'error' | 'info'
+type Variant = 'success' | 'error'
 
 export interface ToastProps {
   title?: string
@@ -39,31 +34,16 @@ export interface ToastProps {
 const icon: Record<Variant, ReactElement> = {
   success: <Success12Icon />,
   error: <Error12Icon />,
-  info: <Warning12Icon />,
 }
 
 const defaultTitle: Record<Variant, string> = {
   success: 'Success',
   error: 'Error',
-  info: 'Note',
 }
 
-const color: Record<Variant, string> = {
-  success: 'bg-accent',
-  error: 'bg-error-secondary',
-  info: 'bg-notice-secondary',
-}
-
-const textColor: Record<Variant, string> = {
-  success: 'text-accent *:text-accent',
-  error: 'text-error *:text-error',
-  info: 'text-notice *:text-notice',
-}
-
-const secondaryTextColor: Record<Variant, string> = {
-  success: 'text-accent-secondary',
-  error: 'text-error-secondary',
-  info: 'text-notice-secondary',
+const themeClass: Record<Variant, string> = {
+  success: '',
+  error: 'red-theme',
 }
 
 export const Toast = ({
@@ -85,8 +65,8 @@ export const Toast = ({
     <div
       className={cn(
         'shadow-toast relative flex w-96 items-start overflow-hidden rounded-lg border border-current/10 p-4',
-        color[variant],
-        textColor[variant]
+        'bg-accent text-accent *:text-accent',
+        themeClass[variant]
       )}
     >
       <div className="mt-[2px] flex [&>svg]:h-3 [&>svg]:w-3">{icon[variant]}</div>
@@ -95,9 +75,7 @@ export const Toast = ({
           <div className="text-sans-semi-md">{title || defaultTitle[variant]}</div>
         )}
         {/* 'group' is necessary for HL color trick to work. see HL.tsx */}
-        <div className={cn('text-sans-md group', secondaryTextColor[variant])}>
-          {content}
-        </div>
+        <div className="text-sans-md group text-accent-secondary">{content}</div>
 
         {cta && (
           <Link
@@ -112,10 +90,7 @@ export const Toast = ({
         <button
           type="button"
           aria-label="Dismiss notification"
-          className={cn(
-            'hover:bg-accent-hover -m-2 flex items-center rounded-md border-transparent! p-2',
-            textColor[variant]
-          )}
+          className="hover:bg-accent-hover text-accent *:text-accent -m-2 flex items-center rounded-md border-transparent! p-2"
           onClick={onClose}
         >
           <Close12Icon />

app/ui/styles/components/button.css

@@ -38,7 +38,7 @@
   }
 
   &.btn-ghost {
-    @apply text-secondary hover:bg-hover disabled:text-default/40 disabled:bg-transparent;
+    @apply text-secondary hover:bg-hover disabled:text-default/50 disabled:bg-transparent;
   }
   &.btn-ghost:after {
     @apply border-current/20;

app/ui/styles/index.css

@@ -30,6 +30,10 @@
 @import '@oxide/design-system/styles/preflight.css' layer(base);
 @import 'simplebar-react/dist/simplebar.min.css' layer(components);
 
+@import '@oxide/design-system/styles/red.css';
+@import '@oxide/design-system/styles/yellow.css';
+@import '@oxide/design-system/styles/blue.css';
+
 @import './fonts.css' layer(base);
 @import './vars.css' layer(base);
 @import './components/button.css' layer(components);
@@ -113,7 +117,7 @@
 
 @utility tint-underline {
   text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
+  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
 
   &:hover {
     text-decoration-color: color-mix(in srgb, currentColor 80%, transparent);

package-lock.json

@@ -37,7 +37,7 @@
     "@base-ui/react": "^1.1.0",
     "@floating-ui/react": "^0.26.23",
     "@headlessui/react": "^2.2.9",
-    "@oxide/design-system": "~6.0.1",
+    "@oxide/design-system": "^6.0.4",
     "@react-aria/live-announcer": "^3.3.4",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/vite": "^4.1.17",