update

assets/styles/app.css

@@ -218,6 +218,15 @@
         border-bottom-color: rgb(var(--rgb-inverse));
     }
 }
+
+@utility btn-quiet {
+    background-color: rgb(var(--rgb-raised) / calc(var(--raised-alpha) * 2));
+    color: rgb(var(--rgb-ink-soft));
+
+    &:hover {
+        background-color: rgb(var(--rgb-raised) / calc(var(--raised-alpha) * 3.5));
+    }
+}
 @layer utilities {
     .compose-address-row {
         display: flex;

bin/theme-sweep.sh

@@ -6,62 +6,9 @@ FILES=$(find templates -name '*.html.twig')
 sweep() {
     perl -0777 -pi -e "s{(?<![\\w:./-])$1}{$2}g" $FILES
 }
-
-# ── Tooltips (run before generic bg rules) ──────────────────────────────────
-sweep 'bg-gray-800\s+dark:bg-gray-100\s+text-white\s+dark:text-gray-900' 'tooltip-bubble'
-sweep "before:border-\[5px\]\s+before:border-transparent\s+before:border-b-gray-800\s+dark:before:border-b-gray-100" 'before:border-[5px] before:border-transparent'
-
-# ── Alerts ──────────────────────────────────────────────────────────────────
-sweep 'bg-red-50\s+dark:bg-red-950/60\s+border\s+border-red-200\s+dark:border-red-800/70' 'alert-danger'
-sweep 'bg-red-50\s+dark:bg-red-950\s+border\s+border-red-200\s+dark:border-red-800'       'alert-danger'
-sweep 'bg-red-500/10\s+dark:bg-red-500/10\s*\n?\s*border\s+border-red-500/25\s+dark:border-red-500/20' 'alert-danger'
-sweep 'bg-blue-500/10\s+dark:bg-blue-500/10\s*\n?\s*border\s+border-blue-500/20\s+dark:border-blue-500/15' 'alert-info'
-
-# ── Shadows ─────────────────────────────────────────────────────────────────
-sweep 'shadow-2xl\s+shadow-black/20\s+dark:shadow-black/60' 'shadow-float'
-sweep 'shadow-xl\s+shadow-black/15\s+dark:shadow-black/50'  'shadow-pop'
-sweep 'shadow-xl\s+shadow-black/15'                         'shadow-pop'
-sweep 'shadow-lg\s+shadow-black/5\s+dark:shadow-black/30'   'shadow-pop'
-
-# ── Ring offsets ────────────────────────────────────────────────────────────
-sweep 'ring-offset-1\s+dark:hover:ring-offset-gray-900'          'ring-offset-1 ring-offset-surface'
-sweep 'focus:ring-offset-2\s+dark:focus:ring-offset-gray-900'    'focus:ring-offset-2 ring-offset-surface'
-
-# ── Remaining surfaces ──────────────────────────────────────────────────────
-sweep 'bg-white/40\s+dark:bg-white/\[0\.0[23]\]'          'bg-raised'
-sweep 'hover:bg-white/60\s+dark:hover:bg-white/\[0\.06\]' 'hover:bg-hover'
-sweep 'hover:bg-gray-50\s+dark:hover:bg-white/\[0\.06\]'  'hover:bg-hover'
-sweep 'bg-white/60\s+dark:bg-white/\[0\.03\]'             'bg-raised'
-sweep 'bg-gray-50/50\s+dark:bg-gray-800/50'               'bg-sunken'
-sweep 'bg-zinc-50/80\s+dark:bg-zinc-800/40'               'bg-sunken'
-sweep 'bg-zinc-50\s+dark:bg-zinc-950/60'                  'bg-sunken'
-sweep 'bg-white/80\s+dark:bg-zinc-800/80'                 'bg-field'
-sweep 'bg-white/50\s+dark:bg-white/5'                     'bg-sunken'
-sweep 'bg-gray-100/80\s+dark:bg-gray-800/60'              'bg-sunken'
-sweep 'bg-black/\[0\.03\]\s+dark:bg-black/20'             'bg-sunken'
-sweep 'bg-black/(?:5|10|20)\s+dark:bg-black/(?:20|30)'    'bg-sunken'
-sweep 'bg-gray-300\s+dark:bg-gray-600'                    'bg-line'
-sweep 'bg-gray-200\s+dark:bg-gray-800'                    'bg-line'
-sweep 'bg-white\s+dark:bg-gray-800(?![/\w-])'             'bg-field'
-
-# ── Remaining borders ───────────────────────────────────────────────────────
-sweep 'border-gray-300\s+dark:border-gray-700'    'border-field'
-sweep 'border-gray-400\s+dark:border-gray-500'    'border-field'
-sweep 'border-zinc-300\s+dark:border-zinc-600(?:/80)?' 'border-field'
-sweep 'border-zinc-200\s+dark:border-zinc-700/60' 'border-line'
-sweep 'border-white/(?:15|40)\s+dark:border-white/10' 'border-line'
-sweep 'border-gray-200/60\s+dark:border-gray-800/60'  'border-line'
-
-# ── Accent hovers & remaining blues ─────────────────────────────────────────
-sweep 'hover:text-blue-600\s+dark:hover:text-blue-400' 'hover:text-accent'
-sweep 'hover:bg-blue-50\s+dark:hover:bg-blue-500/20'   'hover:bg-accent-soft'
-sweep 'bg-blue-50\s+dark:bg-blue-500/10'               'bg-accent-soft'
-sweep 'text-blue-600\s+dark:text-blue-500'             'text-accent'
-sweep 'text-blue-400\s+dark:text-blue-500'             'text-accent'
-sweep 'empty:before:text-gray-400\s+dark:empty:before:text-gray-600' 'empty:before:text-ink-faint'
-
-# ── Label colour dots ───────────────────────────────────────────────────────
-sweep "'bg-gray-400 dark:bg-gray-500'" "'bg-ink-faint'"
-sweep 'bg-gray-400 dark:bg-gray-500'   'bg-ink-faint'
+sweep 'bg-zinc-100\s+hover:bg-zinc-200\s+dark:bg-zinc-800\s+dark:hover:bg-zinc-700' 'btn-quiet'
+sweep 'btn-quiet\s+text-ink-soft' 'btn-quiet'
+sweep 'bg-zinc-100\s+hover:bg-red-100\s+dark:bg-zinc-800\s+dark:hover:bg-red-900/40' 'btn-quiet hover:bg-danger-soft'
+sweep 'border-black/\[0\.08\]\s+dark:border-white/10' 'border-line'
 
 echo "Done. Now: git diff"

templates/_layout/form/modal_form_theme.html.twig

@@ -122,8 +122,8 @@
 {# ── Checkbox ────────────────────────────────────────────────────────────── #}
 {% block checkbox_widget %}
     {% set attr = attr|merge({
-        class: 'size-4 rounded border-zinc-300 dark:border-zinc-600
-            text-blue-600 dark:text-blue-500
+        class: 'size-4 rounded border-field
+            text-accent
             bg-field
             focus:ring-2 focus:ring-blue-500 focus:ring-offset-0
             cursor-pointer

templates/_partials/_label_menu.html.twig

@@ -31,7 +31,7 @@ Variables:
          class="hidden absolute right-0 top-full mt-1 z-30 w-56 max-h-72 overflow-y-auto rounded-xl
                 bg-pane-soft backdrop-blur-xl
                 border border-line
-                shadow-xl shadow-black/15 py-1">
+                shadow-pop py-1">
 
         {% if labels|length == 0 %}
             <p class="px-3 py-2 text-xs text-ink-faint">{{ 'label.menu.empty'|trans }}</p>

templates/_partials/_list_toolbar.html.twig

@@ -46,13 +46,12 @@ The button itself carries `group` and `relative`.
     absolute top-full left-1/2 -translate-x-1/2 mt-2
     px-2 py-1 rounded-md
     text-[11px] font-medium leading-none whitespace-nowrap
-    bg-gray-800 dark:bg-gray-100
-    text-white dark:text-gray-900
+    tooltip-bubble
     opacity-0 group-hover:opacity-100
     transition-opacity duration-100 delay-500
     z-50
     before:content-[''] before:absolute before:top-[-5px] before:left-1/2 before:-translate-x-1/2
-    before:border-[5px] before:border-transparent before:border-b-gray-800 dark:before:border-b-gray-100
+    before:border-[5px] before:border-transparent
 ">{{ label }}</span>
     </button>
 {% endmacro %}
@@ -83,13 +82,12 @@ The button itself carries `group` and `relative`.
                 absolute top-full left-1/2 -translate-x-1/2 mt-2
                 px-2 py-1 rounded-md
                 text-[11px] font-medium leading-none whitespace-nowrap
-                bg-gray-800 dark:bg-gray-100
-                text-white dark:text-gray-900
+                tooltip-bubble
                 opacity-0 group-hover:opacity-100
                 transition-opacity duration-100 delay-500
                 z-50
                 before:content-[''] before:absolute before:top-[-5px] before:left-1/2 before:-translate-x-1/2
-                before:border-[5px] before:border-transparent before:border-b-gray-800 dark:before:border-b-gray-100
+                before:border-[5px] before:border-transparent
             ">{{ label }}</span>
         </a>
     {% endif %}
@@ -100,7 +98,7 @@ The button itself carries `group` and `relative`.
 <div
     class="flex items-center px-3 py-1
            border-b border-line
-           bg-white/40 dark:bg-white/[0.02]
+           bg-raised
            shrink-0 min-h-[40px]"
     data-controller="list-toolbar"
     data-list-toolbar-total-value="{{ total }}"
@@ -120,8 +118,8 @@ The button itself carries `group` and `relative`.
             data-list-toolbar-target="checkboxBtn"
             data-action="click->list-toolbar#toggleAll"
             class="flex items-center justify-center w-4 h-4 rounded
-                   border border-gray-400 dark:border-gray-500
-                   bg-white dark:bg-gray-800
+                   border border-field
+                   bg-field
                    cursor-pointer transition-colors duration-100
                    hover:border-blue-500 focus-visible:outline-none
                    focus-visible:ring-2 focus-visible:ring-blue-500"

templates/_partials/_modal.html.twig

@@ -20,7 +20,7 @@
     <div class="
         relative w-full max-w-lg
         pane-flat
-        rounded-pane shadow-2xl shadow-black/20 dark:shadow-black/60
+        rounded-pane shadow-float
         flex flex-col
         max-h-[90vh]
         border border-line
@@ -31,7 +31,7 @@
             flex items-center justify-between
             px-5 py-3.5
             border-b border-line
-            bg-black/[0.03] dark:bg-black/20
+            bg-sunken
             rounded-t-2xl
             shrink-0
         ">

templates/_partials/_modal_form.html.twig

@@ -19,7 +19,7 @@
         {% if form.vars.errors|length %}
             <div
                 role="alert"
-                class="flex items-start gap-2.5 rounded-lg bg-red-50 dark:bg-red-950/60 border border-red-200 dark:border-red-800/70 px-3.5 py-3 text-sm text-danger"
+                class="flex items-start gap-2.5 rounded-lg alert-danger px-3.5 py-3 text-sm text-danger"
             >
                 <i class="fa-solid fa-circle-exclamation mt-0.5 shrink-0 text-danger" aria-hidden="true"></i>
                 <div class="space-y-0.5">
@@ -35,14 +35,14 @@
     </div>
 
     {# ── Footer ── #}
-    <div class="flex items-center justify-end gap-2 px-5 py-3.5 border-t border-zinc-200 dark:border-zinc-700/60 bg-zinc-50/80 dark:bg-zinc-800/40 rounded-b-xl shrink-0">
+    <div class="flex items-center justify-end gap-2 px-5 py-3.5 border-t border-line bg-sunken rounded-b-xl shrink-0">
         <button
             type="button"
             data-action="click->modal#close"
             class="inline-flex items-center justify-center h-8 px-3.5 rounded-lg text-sm font-medium
                text-ink-soft
                bg-field
-               border border-zinc-300 dark:border-zinc-600/80
+               border border-field
                hover:bg-zinc-50 dark:hover:bg-zinc-700
                focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1
                transition-colors duration-100"

templates/_partials/_sidebar.html.twig

@@ -9,7 +9,7 @@
 {% macro label_dot(color) %}
     <span class="w-2.5 h-2.5 rounded-full shrink-0
         {{ {
-        'gray':   'bg-gray-400 dark:bg-gray-500',
+        'gray':   'bg-ink-faint',
         'red':    'bg-red-500',
         'orange': 'bg-orange-500',
         'amber':  'bg-amber-500',
@@ -18,7 +18,7 @@
         'blue':   'bg-blue-500',
         'violet': 'bg-violet-500',
         'pink':   'bg-pink-500',
-    }[color ?? 'gray'] ?? 'bg-gray-400 dark:bg-gray-500' }}"
+    }[color ?? 'gray'] ?? 'bg-ink-faint' }}"
           aria-hidden="true"></span>
 {% endmacro %}
 
@@ -74,7 +74,7 @@ When true, nav links also dispatch a close action to the parent sidebar-drawer c
 <aside id="{{ _drawerMode is defined and _drawerMode ? 'sidebar-drawer-inner' : 'sidebar' }}"
        {% if not (_drawerMode is defined and _drawerMode) %}data-turbo-permanent{% endif %}
        data-controller="sidebar"
-       class="flex flex-col w-56 h-full flex-shrink-0 bg-surface rounded-pane shadow-lg shadow-black/5 dark:shadow-black/30 border border-gray-200/60 dark:border-gray-800/60">
+       class="flex flex-col w-56 h-full flex-shrink-0 bg-surface rounded-pane shadow-pop border border-line">
 
     {# Compose #}
     <div class="px-3 py-3 border-b border-line">

templates/_partials/_thread_labels.html.twig

@@ -14,7 +14,7 @@ Variables:
                          bg-sunken text-ink-soft">
                 <span class="w-1.5 h-1.5 rounded-full shrink-0
                     {{ {
-                        'gray':   'bg-gray-400 dark:bg-gray-500',
+                        'gray':   'bg-ink-faint',
                         'red':    'bg-red-500',
                         'orange': 'bg-orange-500',
                         'amber':  'bg-amber-500',
@@ -23,7 +23,7 @@ Variables:
                         'blue':   'bg-blue-500',
                         'violet': 'bg-violet-500',
                         'pink':   'bg-pink-500',
-                    }[chipLabel.color ?? 'gray'] ?? 'bg-gray-400 dark:bg-gray-500' }}"
+                    }[chipLabel.color ?? 'gray'] ?? 'bg-ink-faint' }}"
                     aria-hidden="true"></span>
                 <span class="truncate">{{ chipLabel.name }}</span>
             </span>

templates/_partials/_thread_row.html.twig

@@ -55,15 +55,15 @@
 
     <div
         class="pointer-events-auto flex items-center gap-3 pl-3 pr-4 py-2.5 cursor-pointer transition-colors
-            {{ unread ? 'bg-white/40 dark:bg-white/[0.03]' : 'bg-transparent' }}
-            hover:bg-white/60 dark:hover:bg-white/[0.06]"
+            {{ unread ? 'bg-raised' : 'bg-transparent' }}
+            hover:bg-hover"
     >
         {# Checkbox — fires custom event so the toolbar controller can react #}
         <input
             type="checkbox"
             data-action="change->message-row#toggleSelect"
             data-thread-select value="{{ rowId }}"
-            class="z-10 w-4 h-4 rounded border-gray-300 dark:border-gray-700 text-blue-600 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer flex-shrink-0"
+            class="z-10 w-4 h-4 rounded border-field text-blue-600 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer flex-shrink-0"
             aria-label="{{ 'thread_row.select'|trans({'%subject%': subject}) }}"
         >
 

templates/account/_edit_modal.html.twig

@@ -41,7 +41,7 @@
 
         </div>
 
-        <div class="flex items-center justify-end gap-2 px-5 py-3.5 border-t border-line bg-black/[0.03] dark:bg-black/20">
+        <div class="flex items-center justify-end gap-2 px-5 py-3.5 border-t border-line bg-sunken">
             <button type="button" data-action="click->modal#close"
                     class="px-3 h-9 rounded-lg text-sm font-medium text-ink-soft hover:bg-hover transition-colors cursor-pointer">
                 {{ 'form.cancel'|trans }}

templates/account/_form_modal.html.twig

@@ -13,7 +13,7 @@
         }) }}
 
         {# ── Tab bar ─────────────────────────────────────────────────────────── #}
-        <div class="flex border-b border-line px-5 -mt-px bg-black/5 dark:bg-black/20">
+        <div class="flex border-b border-line px-5 -mt-px bg-sunken">
             <button
                 type="button"
                 data-account-form-target="tab"
@@ -36,8 +36,7 @@
             {# Global errors #}
             {% if form.vars.errors|length %}
                 <div role="alert" class="mx-5 mt-5 flex items-start gap-2.5 rounded-xl
-                                         bg-red-500/10 dark:bg-red-500/10
-                                         border border-red-500/25 dark:border-red-500/20
+                                         alert-danger
                                          px-3.5 py-3 text-sm text-danger">
                     <i class="fa-solid fa-circle-exclamation mt-0.5 shrink-0 text-red-500/80" aria-hidden="true"></i>
                     <div class="space-y-0.5">
@@ -95,8 +94,7 @@
 
                 {# Info banner #}
                 <div class="flex items-start gap-3 rounded-xl
-                            bg-blue-500/10 dark:bg-blue-500/10
-                            border border-blue-500/20 dark:border-blue-500/15
+                            alert-info
                             px-4 py-3 text-sm text-accent">
                     <i class="fa-solid fa-circle-info mt-0.5 shrink-0 text-blue-500/70" aria-hidden="true"></i>
                     <p>{{ 'account.oauth.info'|trans }}</p>
@@ -109,7 +107,7 @@
                         href="{{ path('app_oauth_connect', { provider: 'google' }) }}"
                         data-turbo="false"
                         class="flex items-center gap-3 mb-3 w-full px-4 py-2.5 rounded-xl
-                               border border-white/15 dark:border-white/10
+                               border border-line
                                bg-sunken
                                hover:bg-hover
                                text-sm font-medium text-ink
@@ -127,7 +125,7 @@
                     <a
                         href="#"
                         class="flex items-center gap-3 w-full px-4 py-2.5 rounded-xl
-                               border border-white/15 dark:border-white/10
+                               border border-line
                                bg-sunken
                                hover:bg-hover
                                text-sm font-medium text-ink
@@ -153,15 +151,15 @@
         {# ── Footer ───────────────────────────────────────────────────────────── #}
         <div class="flex items-center justify-end gap-2 px-5 py-3.5
                     border-t border-line
-                    bg-black/10 dark:bg-black/20
+                    bg-sunken
                     rounded-b-xl shrink-0">
             <button
                 type="button"
                 data-action="click->modal#close"
                 class="inline-flex items-center justify-center h-8 px-3.5 rounded-lg text-sm font-medium
                        text-ink-soft
-                       bg-white/50 dark:bg-white/5
-                       border border-white/40 dark:border-white/10
+                       bg-sunken
+                       border border-line
                        hover:bg-white/70 dark:hover:bg-white/10
                        focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1
                        transition-colors duration-100 cursor-pointer"

templates/admin/_db_frame.html.twig

@@ -66,7 +66,7 @@
                         <i class="fa-solid fa-circle-info text-amber-500" aria-hidden="true"></i>
                         {{ 'admin.db.extension_missing'|trans }}
                     </p>
-                    <pre class="mt-2 p-3 rounded-lg bg-zinc-50 dark:bg-zinc-950/60 border border-line text-xs text-ink-soft overflow-x-auto">shared_preload_libraries = 'pg_stat_statements'   # postgresql.conf, then restart
+                    <pre class="mt-2 p-3 rounded-lg bg-sunken border border-line text-xs text-ink-soft overflow-x-auto">shared_preload_libraries = 'pg_stat_statements'   # postgresql.conf, then restart
 CREATE EXTENSION IF NOT EXISTS pg_stat_statements;</pre>
                 </div>
             {% elseif slowestByMean|length == 0 %}

templates/admin/_logs_frame.html.twig

@@ -9,14 +9,14 @@
 
             <form method="get" action="{{ path('app_admin_logs') }}" class="ml-auto flex items-center gap-2">
                 <select name="level"
-                        class="h-8 rounded-lg border border-black/[0.08] dark:border-white/10 bg-white/80 dark:bg-zinc-800/80 text-xs text-ink-soft px-2"
+                        class="h-8 rounded-lg border border-black/[0.08] dark:border-white/10 bg-field text-xs text-ink-soft px-2"
                         onchange="this.form.requestSubmit();">
                     {% for value, name in levels %}
                         <option value="{{ value }}" {{ minLevel == value ? 'selected' : '' }}>≥ {{ name }}</option>
                     {% endfor %}
                 </select>
                 <select name="channel"
-                        class="h-8 rounded-lg border border-black/[0.08] dark:border-white/10 bg-white/80 dark:bg-zinc-800/80 text-xs text-ink-soft px-2"
+                        class="h-8 rounded-lg border border-black/[0.08] dark:border-white/10 bg-field text-xs text-ink-soft px-2"
                         onchange="this.form.requestSubmit();">
                     <option value="">{{ 'admin.logs.all_channels'|trans }}</option>
                     {% for ch in channels %}
@@ -53,7 +53,7 @@
                             <i class="fa-solid fa-chevron-down text-[10px] text-ink-faint transition-transform group-open:rotate-180" aria-hidden="true"></i>
                         </summary>
                         {% if entry.context %}
-                            <pre class="mt-2 p-3 rounded-lg bg-zinc-50 dark:bg-zinc-950/60 border border-line text-xs text-ink-soft overflow-x-auto">{{ entry.context|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
+                            <pre class="mt-2 p-3 rounded-lg bg-sunken border border-line text-xs text-ink-soft overflow-x-auto">{{ entry.context|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                         {% endif %}
                     </details>
                 {% endfor %}

templates/compose/_window.html.twig

@@ -13,7 +13,7 @@
             data-compose-send-url-value="{{ path('app_compose_mail_send_draft', {'id': message.id}) }}"
         {% endif %}
          class="max-h-[90vh]
-       w-[520px] rounded-pane shadow-2xl shadow-black/20 dark:shadow-black/60
+       w-[520px] rounded-pane shadow-float
        pane-flat
        border border-line
        flex flex-col mb-4">
@@ -21,7 +21,7 @@
 
         {# ── Header ───────────────────────────────────────────────── #}
         <div class="flex items-center justify-between px-4 py-2.5
-                    bg-black/20 dark:bg-black/30
+                    bg-sunken
                     rounded-t-2xl select-none shrink-0"
              data-action="dblclick->compose#toggleMinimize">
             <span class="text-sm font-semibold text-ink cursor-pointer truncate max-w-[260px]"
@@ -97,7 +97,7 @@
                             bg-pane-soft
                             backdrop-blur-sm
                             border border-line
-                            shadow-xl shadow-black/15 dark:shadow-black/50">
+                            shadow-pop">
                     {% for choice in form.account.vars.choices %}
                         <button type="button"
                                 data-action="click->compose#selectAccount"
@@ -105,11 +105,11 @@
                                 data-label="{{ choice.label }}"
                                 class="w-full text-left px-4 py-2.5 text-sm
                                        text-ink-soft
-                                       hover:bg-blue-50 dark:hover:bg-blue-500/20
+                                       hover:bg-accent-soft
                                        hover:text-blue-600 dark:hover:text-blue-300
                                        transition-colors
                                        {% if form.account.vars.value == choice.value %}
-                                           bg-blue-50 dark:bg-blue-500/10 text-accent
+                                           bg-accent-soft text-accent
                                        {% endif %}">
                             {{ choice.label }}
                         </button>
@@ -127,13 +127,13 @@
                     <button type="button"
                             data-compose-target="ccBtn"
                             data-action="click->compose#showCc"
-                            class="text-xs text-ink-faint hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+                            class="text-xs text-ink-faint hover:text-accent transition-colors">
                         Cc
                     </button>
                     <button type="button"
                             data-compose-target="bccBtn"
                             data-action="click->compose#showBcc"
-                            class="text-xs text-ink-faint hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+                            class="text-xs text-ink-faint hover:text-accent transition-colors">
                         Bcc
                     </button>
                 </div>
@@ -191,7 +191,7 @@
                             text-sm leading-relaxed
                             text-ink
                             empty:before:content-[attr(data-placeholder)]
-                            empty:before:text-gray-400 dark:empty:before:text-gray-600
+                            empty:before:text-ink-faint
                             empty:before:pointer-events-none">{{ form.bodyHtml.vars.value|raw ?: '' }}</div>
             </div>
 
@@ -199,7 +199,7 @@
             <div class="px-3 pb-3 pt-1 shrink-0">
 
                 <div class="flex items-center gap-0.5 mb-2 flex-wrap
-                            bg-gray-100/80 dark:bg-gray-800/60
+                            bg-sunken
                             rounded-full px-2 py-1">
 
                     <select data-compose-toolbar-target="fontFamily"
@@ -212,7 +212,7 @@
                         <option>Monospace</option>
                     </select>
 
-                    <div class="w-px h-4 bg-gray-300 dark:bg-gray-600 mx-1 shrink-0"></div>
+                    <div class="w-px h-4 bg-line mx-1 shrink-0"></div>
 
                     <select data-compose-toolbar-target="fontSize"
                             data-action="change->compose-toolbar#changeFontSize"
@@ -225,7 +225,7 @@
                         <option>Huge</option>
                     </select>
 
-                    <div class="w-px h-4 bg-gray-300 dark:bg-gray-600 mx-1 shrink-0"></div>
+                    <div class="w-px h-4 bg-line mx-1 shrink-0"></div>
 
                     <button type="button" data-compose-toolbar-action data-compose-toolbar-target="boldBtn"
                             data-action="click->compose-toolbar#bold"
@@ -247,7 +247,7 @@
                                class="absolute opacity-0 w-0 h-0 pointer-events-none" tabindex="-1">
                     </label>
 
-                    <div class="w-px h-4 bg-gray-300 dark:bg-gray-600 mx-1 shrink-0"></div>
+                    <div class="w-px h-4 bg-line mx-1 shrink-0"></div>
 
                     <button type="button" data-compose-toolbar-action data-action="click->compose-toolbar#alignLeft"
                             class="px-1.5 py-0.5 rounded text-sm transition-colors text-ink-muted hover:bg-hover" title="Align left">
@@ -259,7 +259,7 @@
                             class="px-1.5 py-0.5 rounded text-sm transition-colors text-ink-muted hover:bg-hover" title="Align right">
                         <i class="fa-solid fa-align-right"></i></button>
 
-                    <div class="w-px h-4 bg-gray-300 dark:bg-gray-600 mx-1 shrink-0"></div>
+                    <div class="w-px h-4 bg-line mx-1 shrink-0"></div>
 
                     <button type="button" data-compose-toolbar-action data-action="click->compose-toolbar#orderedList"
                             class="px-1.5 py-0.5 rounded text-sm transition-colors text-ink-muted hover:bg-hover" title="Numbered list">
@@ -274,7 +274,7 @@
                             class="px-1.5 py-0.5 rounded text-sm transition-colors text-ink-muted hover:bg-hover" title="Indent">
                         <i class="fa-solid fa-indent"></i></button>
 
-                    <div class="w-px h-4 bg-gray-300 dark:bg-gray-600 mx-1 shrink-0"></div>
+                    <div class="w-px h-4 bg-line mx-1 shrink-0"></div>
 
                     <button type="button" data-compose-toolbar-action data-action="click->compose-toolbar#undo"
                             class="px-1.5 py-0.5 rounded text-sm transition-colors text-ink-muted hover:bg-hover" title="Undo">

templates/mail/_thread_content.html.twig

@@ -34,7 +34,7 @@
 
                 {# Thread connection line #}
                 {% if not loop.last %}
-                    <div class="absolute left-[19px] top-4 bottom-[-24px] w-0.5 bg-gray-200 dark:bg-gray-800 -z-0"></div>
+                    <div class="absolute left-[19px] top-4 bottom-[-24px] w-0.5 bg-line -z-0"></div>
                 {% endif %}
 
                 <div class="flex items-start gap-3 relative z-10">
@@ -109,7 +109,7 @@
                     </div>
 
                     {% if message.hasAttachments %}
-                        <div class="mt-3 p-3 border border-line rounded-lg bg-gray-50/50 dark:bg-gray-800/50">
+                        <div class="mt-3 p-3 border border-line rounded-lg bg-sunken">
                             <p class="text-xs font-medium text-gray-400 mb-2">{{ 'message.attachments'|trans }}</p>
                             <div class="flex gap-2">
                                 {# TODO: iterate message.parts filtered by disposition = attachment #}
@@ -187,8 +187,8 @@
                     data-turbo-frame="compose_dock"
                     class="flex items-center gap-3 w-full px-4 py-3 rounded-xl
                            border border-line
-                           bg-white/60 dark:bg-white/[0.03]
-                           hover:bg-gray-50 dark:hover:bg-white/[0.06]
+                           bg-raised
+                           hover:bg-hover
                            text-sm text-ink-faint
                            transition-colors cursor-text"
                 >

templates/search/search.html.twig

@@ -62,7 +62,7 @@
     <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium
                  bg-blue-50 dark:bg-blue-950/40 text-blue-700 dark:text-blue-300
                  border border-blue-200/60 dark:border-blue-700/40">
-        <span class="text-blue-400 dark:text-blue-500">{{ label }}:</span>{{ value }}
+        <span class="text-accent">{{ label }}:</span>{{ value }}
     </span>
 {% endmacro %}
 

templates/security/login.html.twig

@@ -18,7 +18,7 @@
 
             {# Error #}
             {% if error %}
-                <div class="mb-4 px-4 py-3 rounded-lg bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 text-sm text-danger">
+                <div class="mb-4 px-4 py-3 rounded-lg alert-danger text-sm text-danger">
                     {{ error.messageKey | trans(error.messageData, 'security') }}
                 </div>
             {% endif %}
@@ -41,7 +41,7 @@
                                 autocomplete="email"
                                 autofocus
                                 required
-                                class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-ink placeholder:text-ink-faint focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                                class="w-full px-3 py-2 text-sm rounded-lg border border-field bg-field text-ink placeholder:text-ink-faint focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                                 placeholder="you@example.com"
                             >
                         </div>
@@ -62,7 +62,7 @@
                                 autocomplete="current-password"
                                 required
                                 value="{{ 'APP_DEV_USER_PASSWORD'|get_env }}"
-                                class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-ink placeholder:text-ink-faint focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                                class="w-full px-3 py-2 text-sm rounded-lg border border-field bg-field text-ink placeholder:text-ink-faint focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                                 placeholder="••••••••"
                             >
                         </div>
@@ -72,7 +72,7 @@
 
                     <button
                         type="submit"
-                        class="mt-6 w-full bg-accent hover:bg-accent-strong text-white text-sm font-medium py-2 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+                        class="mt-6 w-full bg-accent hover:bg-accent-strong text-white text-sm font-medium py-2 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ring-offset-surface"
                     >
                         {{ 'login.form.submit'|trans }}
                     </button>

templates/settings/_labels.html.twig

@@ -33,7 +33,7 @@ Variables:
                                 {% else %}
                                     <span class="w-2.5 h-2.5 rounded-full shrink-0
                                         {{ {
-                                            'gray':   'bg-gray-400 dark:bg-gray-500',
+                                            'gray':   'bg-ink-faint',
                                             'red':    'bg-red-500',
                                             'orange': 'bg-orange-500',
                                             'amber':  'bg-amber-500',
@@ -42,7 +42,7 @@ Variables:
                                             'blue':   'bg-blue-500',
                                             'violet': 'bg-violet-500',
                                             'pink':   'bg-pink-500',
-                                        }[label.color ?? 'gray'] ?? 'bg-gray-400 dark:bg-gray-500' }}"
+                                        }[label.color ?? 'gray'] ?? 'bg-ink-faint' }}"
                                         aria-hidden="true"></span>
                                 {% endif %}