Forced color mode fixes

stylesheets/components/fun/FunEmoji.scss

@@ -27,6 +27,7 @@
 
 .FunStaticEmoji__Text {
   padding-top: 1px;
+  font-variant-emoji: emoji;
 
   // Emoji font images are slightly higher than optical center
   @media (resolution >= 2x) {
@@ -169,6 +170,7 @@ $inline-emoji-container-name: inline-emoji;
   // Inline-block so copying multiple emoji does not insert newlines around
   // each one in the clipboard plain-text serialization.
   display: inline-block;
+  font-variant-emoji: emoji;
 
   // Emoji font images are slightly higher than optical center
   @container #{$inline-emoji-container-name} (width > 16px) {

ts/axo/AxoAvatar.dom.tsx

@@ -287,6 +287,10 @@ export namespace AxoAvatar {
       <span
         className={tw(
           'flex size-full items-center justify-center',
+          'rounded-full',
+          'forced-colors:bg-[Canvas]',
+          'forced-colors:text-[CanvasText]',
+          'forced-colors:border',
           DefaultColor
         )}
         style={{ fontSize: size * 0.55 }}
@@ -378,6 +382,7 @@ export namespace AxoAvatar {
         onLoad={handleLoad}
         className={tw(
           'size-full object-cover object-center',
+          'rounded-full',
           props.blur && 'scale-110 blur-thin',
           'transition-[filter] duration-100 ease-out-cubic',
           !isLoaded && 'opacity-0'
@@ -422,7 +427,11 @@ export namespace AxoAvatar {
         src={src}
         width={1024}
         height={1024}
-        className={tw('size-full object-cover object-center')}
+        className={tw(
+          'size-full object-cover object-center',
+          'rounded-full',
+          'forced-color-adjust-none'
+        )}
         style={style}
       />
     );
@@ -506,7 +515,7 @@ export namespace AxoAvatar {
         width={256}
         height={256}
         viewBox="0 0 256 256"
-        className={tw('size-full fill-current')}
+        className={tw('size-full fill-current', 'rounded-full')}
         style={style}
       >
         <text

ts/axo/AxoButton.dom.tsx

@@ -71,7 +71,13 @@ export namespace AxoButton {
     'relative inline-flex max-w-full items-center-safe justify-center-safe rounded-full',
     'focus-visible:axo-focus-ring',
     'forced-colors:border',
-    'forced-colors:aria-disabled:text-[GrayText]'
+    'forced-colors:border-[ButtonBorder]',
+    'forced-colors:focus:border-[Highlight]',
+    'forced-colors:bg-[ButtonFace]',
+    'forced-colors:text-[ButtonText]',
+    'forced-colors:aria-disabled:text-[GrayText]',
+    'forced-colors:aria-pressed:bg-[SelectedItem]',
+    'forced-colors:aria-pressed:text-[SelectedItemText]'
   );
 
   const VariantStyles = variants<Variant>('AxoButton.Variant', {

ts/axo/AxoContactName.dom.tsx

@@ -32,7 +32,9 @@ export namespace AxoContactName {
             'size-fit',
             'rounded-full',
             'leading-none',
-            'focus-visible:axo-focus-ring'
+            'text-primary',
+            'focus-visible:axo-focus-ring',
+            'forced-colors:text-[ButtonText]'
           )}
         >
           <AxoSymbol.InlineGlyph label={null} symbol="person-circle" />

ts/axo/AxoIconButton.dom.tsx

@@ -29,10 +29,15 @@ export namespace AxoIconButton {
 
   const baseStyles = tw(
     'relative rounded-full leading-none',
-    'forced-colors:border forced-colors:border-[ButtonBorder] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText]',
     'focus-visible:axo-focus-ring',
+    'forced-colors:border',
+    'forced-colors:border-[ButtonBorder]',
+    'forced-colors:focus:border-[Highlight]',
+    'forced-colors:bg-[ButtonFace]',
+    'forced-colors:text-[ButtonText]',
     'forced-colors:aria-disabled:text-[GrayText]',
-    'forced-colors:aria-pressed:bg-[SelectedItem] forced-colors:aria-pressed:text-[SelectedItemText]'
+    'forced-colors:aria-pressed:bg-[SelectedItem]',
+    'forced-colors:aria-pressed:text-[SelectedItemText]'
   );
 
   const pressedInvertedStyles = tw(

ts/axo/AxoSelect.dom.tsx

@@ -158,8 +158,10 @@ export namespace AxoSelect {
     'group relative inline-flex items-center',
     'rounded-full text-start type-body-medium font-medium text-primary',
     'disabled:text-disabled',
+    'focus-visible:axo-focus-ring',
     'forced-colors:border',
-    'focus-visible:axo-focus-ring'
+    'forced-colors:text-[ButtonText]',
+    'disabled:forced-colors:text-[GrayText]'
   );
 
   const TriggerVariants = variants<TriggerVariant>('AxoSelect.TriggerVariant', {

ts/axo/AxoTooltip.dom.tsx

@@ -453,8 +453,8 @@ export namespace AxoTooltip {
                 'text-primary-oncolor',
                 'min-w-12',
                 hasAccessory ? 'max-w-[228px]' : 'max-w-[192px]',
-                'forced-color-adjust-none',
-                'forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]'
+                'forced-colors:bg-transparent',
+                'forced-colors:text-[HighlightText]'
               )}
               onPointerDownOutside={handlePointerDownOutside}
             >
@@ -486,7 +486,8 @@ export namespace AxoTooltip {
                   'bg-material-dim-primary',
                   'backdrop-blur-thin',
                   'rounded-[14px]',
-                  'shadow-elevation-3 shadow-no-outline'
+                  'shadow-elevation-3 shadow-no-outline',
+                  'forced-colors:bg-[Highlight]'
                 )}
               />
               <Label
@@ -499,7 +500,8 @@ export namespace AxoTooltip {
                 <span
                   className={tw(
                     'type-body-small text-secondary-oncolor',
-                    'forced-colors:text-inherit forced-colors:italic'
+                    'forced-colors:text-inherit forced-colors:italic',
+                    'forced-color-adjust-none'
                   )}
                 >
                   {keyboardShortcut}
@@ -509,7 +511,8 @@ export namespace AxoTooltip {
                 <span
                   className={tw(
                     'type-caption whitespace-nowrap text-secondary-oncolor',
-                    'forced-colors:text-inherit forced-colors:italic'
+                    'forced-colors:text-inherit forced-colors:italic',
+                    'forced-color-adjust-none'
                   )}
                 >
                   {formattedTimestamp}
@@ -556,7 +559,9 @@ export namespace AxoTooltip {
         aria-hidden={props.tooltipRepeatsTriggerAccessibleName}
         className={tw(
           'relative',
-          'line-clamp-4 max-h-full text-balance text-ellipsis hyphens-auto'
+          'line-clamp-4 max-h-full text-balance text-ellipsis hyphens-auto',
+          'forced-colors:text-inherit',
+          'forced-color-adjust-none'
         )}
       >
         <span ref={contentRef}>{props.label}</span>

ts/axo/_internal/AxoBaseMenu.dom.tsx

@@ -59,8 +59,7 @@ export namespace AxoBaseMenu {
     'forced-colors:text-[CanvasText]',
     'forced-colors:data-highlighted:bg-[Highlight]',
     'forced-colors:data-highlighted:text-[HighlightText]',
-    'forced-colors:data-disabled:text-[GrayText]',
-    'forced-color-adjust-none'
+    'forced-colors:data-disabled:text-[GrayText]'
   );
 
   /**
@@ -152,7 +151,10 @@ export namespace AxoBaseMenu {
    * --------------------------------------------------------------------------
    */
 
-  export const itemTextStyles = tw('flex-auto grow-0 truncate text-start');
+  export const itemTextStyles = tw(
+    'flex-auto grow-0 truncate text-start',
+    'forced-color-adjust-none forced-colors:text-inherit'
+  );
 
   export type ItemTextProps = Readonly<{
     children: ReactNode;
@@ -232,7 +234,8 @@ export namespace AxoBaseMenu {
       <span
         dir="auto"
         className={tw(
-          'ms-auto px-1 type-body-medium text-secondary forced-colors:text-inherit'
+          'ms-auto px-1 type-body-medium text-secondary',
+          'forced-color-adjust-none forced-colors:text-inherit'
         )}
       >
         {props.keyboardShortcut}

ts/axo/fields/_AxoBaseField.dom.tsx

@@ -260,7 +260,8 @@ export namespace AxoBaseField {
       <span
         className={tw(
           'pointer-events-none z-10 flex items-center justify-center text-secondary',
-          'px-1 first:ps-2.5 last:pe-2.5'
+          'px-1 first:ps-2.5 last:pe-2.5',
+          'forced-colors:text-[GrayText]'
         )}
       >
         <AxoSymbol.Icon size={16} symbol={props.symbol} label={null} />
@@ -639,7 +640,9 @@ export namespace AxoBaseField {
             'text-secondary',
             'group-enabled/clear:group-hover/clear:text-primary',
             ClearVariants.get(containerContext.variant),
-            'group-focus-visible/clear:axo-focus-ring'
+            'group-focus-visible/clear:axo-focus-ring',
+            // oxlint-disable-next-line better-tailwindcss/no-restricted-classes
+            'forced-colors:text-[ButtonText]!'
           )}
         >
           <AxoSymbol.Icon size={16} symbol="x" label={null} />
@@ -732,7 +735,9 @@ export namespace AxoBaseField {
             'text-secondary',
             'group-not-aria-disabled/action:group-hover/action:text-primary',
             ActionVariants.get(containerContext.variant),
-            'group-focus-visible/action:axo-focus-ring'
+            'group-focus-visible/action:axo-focus-ring',
+            // oxlint-disable-next-line better-tailwindcss/no-restricted-classes
+            'forced-colors:text-[ButtonText]!'
           )}
         >
           <AxoSymbol.Icon size={18} symbol={props.symbol} label={null} />

ts/axo/items/AxoContactList.dom.stories.tsx

@@ -4,27 +4,22 @@ import type { Meta } from '@storybook/react';
 import type { ReactNode } from 'react';
 import { action } from '@storybook/addon-actions';
 import { AxoContactList } from './AxoContactList.dom.tsx';
-import { Avatar, AvatarSize } from '../../components/Avatar.dom.tsx';
 import { FunInlineEmoji } from '../../components/fun/FunEmoji.dom.tsx';
 import { Emoji } from '../emoji.std.ts';
 import { tw } from '../tw.dom.tsx';
-
-const { i18n } = window.SignalContext;
+import { AxoAvatar } from '../AxoAvatar.dom.tsx';
 
 export default {
   title: 'Axo/Items/AxoContactList',
 } satisfies Meta;
 
-function LegacyAvatar(props: { title: string }): ReactNode {
+function Avatar(props: { label: string; initials: string }): ReactNode {
   return (
-    <Avatar
-      i18n={i18n}
-      conversationType="direct"
-      title={props.title}
-      size={AvatarSize.THIRTY_TWO}
-      badge={undefined}
-      theme={undefined}
-    />
+    <AxoAvatar.Root size={32}>
+      <AxoAvatar.Content label={props.label}>
+        <AxoAvatar.Initials initials={props.initials} color="A100" />
+      </AxoAvatar.Content>
+    </AxoAvatar.Root>
   );
 }
 
@@ -46,17 +41,17 @@ export function Basic(): ReactNode {
     <div className={tw('mx-auto max-w-150')}>
       <AxoContactList.Root>
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Jamie" />}
+          avatar={<Avatar label="Jamie's Avatar" initials="JK" />}
           title="Jamie"
           onClick={action('onClick')}
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Tyler" />}
+          avatar={<Avatar label="Tyler's Avatar" initials="TN" />}
           title="Tyler"
           onClick={action('onClick')}
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Adrian" />}
+          avatar={<Avatar label="Adrian's Avatar" initials="AS" />}
           title="Adrian"
           onClick={action('onClick')}
         />
@@ -70,7 +65,7 @@ export function Description(): ReactNode {
     <div className={tw('mx-auto max-w-150')}>
       <AxoContactList.Root>
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Jamie" />}
+          avatar={<Avatar label="Jamie's Avatar" initials="JK" />}
           title="Jamie"
           description={
             <>
@@ -83,7 +78,7 @@ export function Description(): ReactNode {
           onClick={action('onClick')}
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Tyler" />}
+          avatar={<Avatar label="Tyler's Avatar" initials="TN" />}
           title="Tyler"
           description={
             <About
@@ -94,7 +89,7 @@ export function Description(): ReactNode {
           onClick={action('onClick')}
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Adrian" />}
+          avatar={<Avatar label="Adrian's Avatar" initials="AS" />}
           title="Adrian"
           description={<About emoji={Emoji.COFFEE} label="Coffee lover" />}
           onClick={action('onClick')}
@@ -109,13 +104,13 @@ export function Value(): ReactNode {
     <div className={tw('mx-auto max-w-150')}>
       <AxoContactList.Root>
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Jamie" />}
+          avatar={<Avatar label="Jamie's Avatar" initials="JK" />}
           title="Jamie"
           value="Admin"
           onClick={action('onClick')}
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Tyler" />}
+          avatar={<Avatar label="Tyler's Avatar" initials="TN" />}
           title="Tyler"
           value="Admin"
           description={
@@ -127,7 +122,7 @@ export function Value(): ReactNode {
           onClick={action('onClick')}
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Adrian" />}
+          avatar={<Avatar label="Adrian's Avatar" initials="AS" />}
           title="Adrian"
           value="Admin"
           description={
@@ -150,7 +145,7 @@ export function ItemActions(): ReactNode {
     <div className={tw('mx-auto max-w-150')}>
       <AxoContactList.Root>
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Jamie" />}
+          avatar={<Avatar label="Jamie's Avatar" initials="JK" />}
           title="Jamie"
           onClick={action('onClick')}
           accessory={
@@ -160,7 +155,7 @@ export function ItemActions(): ReactNode {
           }
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Tyler" />}
+          avatar={<Avatar label="Tyler's Avatar" initials="TN" />}
           title="Tyler"
           description={
             <About
@@ -176,7 +171,7 @@ export function ItemActions(): ReactNode {
           }
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Adrian" />}
+          avatar={<Avatar label="Adrian's Avatar" initials="AS" />}
           title="Adrian"
           onClick={action('onClick')}
           accessory={
@@ -195,7 +190,7 @@ export function ItemIconActions(): ReactNode {
     <div className={tw('mx-auto max-w-150')}>
       <AxoContactList.Root>
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Jamie" />}
+          avatar={<Avatar label="Jamie's Avatar" initials="JK" />}
           title="Jamie"
           onClick={action('onClick')}
           accessory={
@@ -207,7 +202,7 @@ export function ItemIconActions(): ReactNode {
           }
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Tyler" />}
+          avatar={<Avatar label="Tyler's Avatar" initials="TN" />}
           title="Tyler"
           description={
             <About
@@ -232,7 +227,7 @@ export function ItemIconActions(): ReactNode {
           }
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Adrian" />}
+          avatar={<Avatar label="Adrian's Avatar" initials="AS" />}
           title="Adrian"
           onClick={action('onClick')}
           accessory={
@@ -258,13 +253,13 @@ export function ActionItems(): ReactNode {
           onClick={action('onClick')}
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Jamie" />}
+          avatar={<Avatar label="Jamie's Avatar" initials="JK" />}
           title="Jamie"
           description={<About emoji={Emoji.COFFEE} label="Coffee lover" />}
           onClick={action('onClick')}
         />
         <AxoContactList.Item
-          avatar={<LegacyAvatar title="Tyler" />}
+          avatar={<Avatar label="Tyler's Avatar" initials="TN" />}
           title="Tyler"
           description={
             <About

ts/axo/items/_AxoBaseItem.dom.tsx

@@ -116,8 +116,8 @@ export namespace AxoBaseItem {
   export type Variant = 'secondary' | 'destructive';
 
   const Variants = variants<Variant>('AxoBaseItem.Variant', {
-    secondary: tw('text-primary'),
-    destructive: tw('text-destructive'),
+    secondary: tw('text-primary forced-colors:text-[CanvasText]'),
+    destructive: tw('text-destructive forced-color-adjust-none'),
   });
 
   const DisabledVariants = variants<Variant>('AxoBaseItem.Root', {