From 18c0a7875999be01d4e11883ea6bdab2c37b06a7 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 8 Dec 2025 17:53:40 -0600
Subject: [PATCH] Prefer component and utility classes when possible

---
 app/assets/stylesheets/theme-switcher.css | 62 +++++------------------
 app/views/users/_theme.html.erb           | 20 ++++----
 2 files changed, 22 insertions(+), 60 deletions(-)

diff --git a/app/assets/stylesheets/theme-switcher.css b/app/assets/stylesheets/theme-switcher.css
index 1e35ca990..2b35308d1 100644
--- a/app/assets/stylesheets/theme-switcher.css
+++ b/app/assets/stylesheets/theme-switcher.css
@@ -1,58 +1,20 @@
 @layer components {
   .theme-switcher {
-    --gap: 8px;
-
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--gap);
-    inline-size: 100%;
-    justify-content: center;
-    margin: 1rem auto;
-    max-inline-size: 100%;
-  }
-
-  .theme-switcher__btn {
-    --btn-border-radius: 0.4em;
-
-    align-items: center;
-    aspect-ratio: 5/3;
-    background-color: var(--color-ink-lightest);
-    border: none;
-    border-radius: 0.5em;
-    color: inherit;
-    cursor: pointer;
-    display: flex;
-    flex-basis: calc((100% - var(--gap) * 2) / 3);
-    flex-direction: column;
-    font-size: var(--text-small);
-    line-height: 1;
-    justify-content: center;
-    overflow: hidden;
-    padding: 0.5em;
-    position: relative;
-    row-gap: 0.3lh;
-    text-align: center;
-
-    .icon {
-      --icon-size: 2em;
-    }
-
-    span {
-      display: block;
-      text-wrap: nowrap;
-    }
-
     @media (max-width: 639px) {
-      font-size: var(--text-x-small);
-      font-weight: 500;
+      flex-direction: column;
     }
+  }
+  .theme-switcher__btn {
+    --btn-background: var(--color-ink-lightest);
+    --btn-border-radius: 0.4em;
+    --btn-border-size: 0;
+    --btn-gap: 0.3lh;
+    --icon-size: 2em;
 
-    @media (any-hover: hover) {
-      &:hover {
-        background-color: var(--color-ink-lighter);
-      }
-    }
+    flex: 1 0 33%;
+    flex-direction: column;
+    position: relative;
+    white-space: nowrap;
 
     &[aria-selected="true"] {
       background-color: var(--color-selected);
diff --git a/app/views/users/_theme.html.erb b/app/views/users/_theme.html.erb
index ce4e91429..01d2c479e 100644
--- a/app/views/users/_theme.html.erb
+++ b/app/views/users/_theme.html.erb
@@ -1,20 +1,20 @@
-<div class="flex flex-column align-center gap txt-medium--responsive txt-medium margin-block-start-double">
-  <strong class="txt-medium">Appearance</strong>
+<section>
+  <strong class="divider txt-large">Appearance</strong>
 
-  <div class="theme-switcher">
-    <button type="button" class="theme-switcher__btn" data-action="click->theme#setLight" data-theme-target="lightBtn">
+  <div class="theme-switcher flex gap max-width justify-center txt-small margin-block-start-half">
+    <button type="button" class="btn theme-switcher__btn" data-action="click->theme#setLight" data-theme-target="lightBtn">
       <%= icon_tag "sun" %>
-      <span>Always light</span>
+      <span class="overflow-ellipsis">Always light</span>
     </button>
 
-    <button type="button" class="theme-switcher__btn" data-action="click->theme#setDark" data-theme-target="darkBtn">
+    <button type="button" class="btn theme-switcher__btn" data-action="click->theme#setDark" data-theme-target="darkBtn">
       <%= icon_tag "moon" %>
-      <span>Always dark</span>
+      <span class="overflow-ellipsis">Always dark</span>
     </button>
 
-    <button type="button" class="theme-switcher__btn" data-action="click->theme#setAuto" data-theme-target="autoBtn">
+    <button type="button" class="btn theme-switcher__btn" data-action="click->theme#setAuto" data-theme-target="autoBtn">
       <%= icon_tag "monitor" %>
-      <span>Same as OS</span>
+      <span class="overflow-ellipsis">Same as OS</span>
     </button>
   </div>
-</div>
+</section>