src/material/Button.tsx

@@ -1,6 +1,5 @@
 import { Component, JSX, splitProps } from "solid-js";
 import materialStyles from "./material.module.css";
-import "./typography.css";
 
 /**
  * Material-styled button.
@@ -11,15 +10,12 @@ const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement>> = (
   props,
 ) => {
   const [managed, passthough] = splitProps(props, ["class", "type"]);
+  const classes = () =>
+    managed.class
+      ? [materialStyles.button, managed.class].join(" ")
+      : materialStyles.button;
   const type = () => managed.type ?? "button";
-
-  return (
-    <button
-      type={type()}
-      class={`${materialStyles.button} buttonText ${managed.class || ""}`}
-      {...passthough}
-    ></button>
-  );
+  return <button type={type()} class={classes()} {...passthough}></button>;
 };
 
 export default Button;

src/material/material.module.css

@@ -10,6 +10,7 @@
 }
 
 .button {
+  composes: buttonText from "./typography.module.css";
   composes: touchTarget;
 
   border: none;

src/material/typography.module.css

@@ -29,11 +29,12 @@
   font-size: var(--subheading-size);
 }
 
-.body1, .body2 {
+.body1 {
   font-size: var(--body-size);
 }
 
 .body2 {
+  composes: body1;
   font-weight: var(--body2-weight);
 }
 

src/material/typography.tsx

@@ -1,6 +1,7 @@
 import { JSX, ParentComponent, splitProps, type Ref } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import "./typography.css";
+import typography from "./typography.module.css";
+import { mergeClass } from "../utils";
 
 type AnyElement = keyof JSX.IntrinsicElements | ParentComponent<any>;
 
@@ -39,11 +40,13 @@ export function Typography<T extends AnyElement>(
     "class",
     "typography",
   ]);
+  const classes = () =>
+    mergeClass(managed.class, typography[managed.typography]);
   return (
     <Dynamic
       ref={managed.ref}
       component={managed.component ?? "span"}
-      class={`${managed.class} ${managed.typography}`}
+      class={classes()}
       {...passthough}
     ></Dynamic>
   );

src/profiles/Profile.css

@@ -38,16 +38,6 @@
     flex-flow: column nowrap;
   }
 
-  .bot-mark {
-    font-size: 1.2em;
-  }
-
-  .display-name {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
   table.acct-fields {
     word-break: break-all;
 

src/profiles/Profile.tsx

@@ -38,12 +38,10 @@ import {
   PlaylistAdd,
   Send,
   Share,
-  SmartToy,
-  SmartToySharp,
   Translate,
   Verified,
 } from "@suid/icons-material";
-import { Body2, Title } from "../material/typography";
+import { Title } from "../material/typography";
 import { useNavigate, useParams } from "@solidjs/router";
 import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
@@ -402,21 +400,15 @@ const Profile: Component = () => {
             }}
           ></Avatar>
           <div class="name-grp">
-            <div class="display-name">
-              <Show when={profile()?.bot}>
-                <SmartToySharp class="bot-mark" aria-label="Bot" />
-              </Show>
-              <Body2
-                component="span"
-                ref={(e: HTMLElement) =>
-                  createRenderEffect(() => (e.innerHTML = displayName()))
-                }
-                aria-label="Display name"
-              ></Body2>
-            </div>
+            <span
+              ref={(e) =>
+                createRenderEffect(() => (e.innerHTML = displayName()))
+              }
+              aria-label="Display name"
+            ></span>
             <span aria-label="Complete username">{fullUsername()}</span>
           </div>
-          <div role="presentation">
+          <div>
             <Switch>
               <Match
                 when={

src/timelines/RegularToot.tsx

@@ -20,7 +20,6 @@ import {
   StarOutline,
   Bookmark,
   Share,
-  SmartToySharp,
 } from "@suid/icons-material";
 import { useTimeSource } from "../platform/timesrc.js";
 import { resolveCustomEmoji } from "../masto/toot.js";
@@ -152,22 +151,17 @@ function TootAuthorGroup(
     <div class={tootStyle.tootAuthorGrp} {...rest}>
       <Img src={toot().account.avatar} class={tootStyle.tootAvatar} />
       <div class={tootStyle.tootAuthorNameGrp}>
-        <div class={tootStyle.tootAuthorNamePrimary}>
-          <Show when={toot().account.bot}>
-            <SmartToySharp class="bot-mark" aria-label="Bot" />
-          </Show>
-          <Body2
-            component="span"
-            ref={(e: { innerHTML: string }) => {
-              createRenderEffect(() => {
-                e.innerHTML = resolveCustomEmoji(
-                  toot().account.displayName,
-                  toot().account.emojis,
-                );
-              });
-            }}
-          />
-        </div>
+        <Body2
+          class={tootStyle.tootAuthorNamePrimary}
+          ref={(e: { innerHTML: string }) => {
+            createRenderEffect(() => {
+              e.innerHTML = resolveCustomEmoji(
+                toot().account.displayName,
+                toot().account.emojis,
+              );
+            });
+          }}
+        />
         <time datetime={toot().createdAt}>
           {formatRelative(toot().createdAt, managed.now, {
             locale: dateFnLocale(),

src/timelines/toot.module.css

@@ -49,7 +49,10 @@
 .tootAuthorNameGrp {
   display: grid;
   grid-template-columns: 1fr auto;
-  color: var(--tutu-color-secondary-text-on-surface);
+
+  >* {
+    color: var(--tutu-color-secondary-text-on-surface);
+  }
 
   > :last-child {
     grid-column: 1 /3;
@@ -67,14 +70,7 @@
 }
 
 .tootAuthorNamePrimary {
-  color: var(--tutu-color-on-surface);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  > :global(.bot-mark) {
-    font-size: 1.2em;
-  }
+  color: revert;
 }
 
 .tootAvatar {