Wear your lane colour on the main buttons, and make full-width buttons large

app/Devnull/Lane.php

@@ -10,7 +10,8 @@
  * for a server that doesn't send one.
  *
  * The colours themselves are `lane-0` to `lane-5` in the native-ui theme, so
- * `bg-theme-lane-{n}` picks the light or dark lift automatically.
+ * `bg-theme-lane-{n}` picks the light or dark lift automatically. Each has an
+ * `on-lane-{n}` for a button's label.
  */
 final class Lane
 {
@@ -35,6 +36,16 @@ public static function from(mixed $value): ?int
         return $lane >= 0 && $lane < self::Count ? $lane : null;
     }
 
+    /**
+     * The theme token a lane is drawn in, which is also a button variant: your
+     * lane's is what the tab bar, the main buttons and the pager tab underlines
+     * wear. Commit Blue (primary) before devnull has said whose phone this is.
+     */
+    public static function token(?int $lane): string
+    {
+        return $lane === null ? 'primary' : 'lane-'.$lane;
+    }
+
     public static function for(string $id): int
     {
         $hash = 0;

app/NativeComponents/CommitDetail.php

@@ -338,6 +338,7 @@ public function render(): View
         $earlier = $this->earlierShown ? [] : $this->ancestors;
 
         return view('native.commit-detail', [
+            'myColour' => $this->myColour(),
             'viewer' => $this->me(),
             'rows' => $this->commit === null ? [] : Timeline::thread(
                 [...($this->earlierShown ? $this->ancestors : []), $this->commit, ...$this->series],

app/NativeComponents/Concerns/TalksToDevnull.php

@@ -8,6 +8,7 @@
 use App\Devnull\Exceptions\ApiException;
 use App\Devnull\Exceptions\KeychainUnavailable;
 use App\Devnull\Exceptions\Unauthenticated;
+use App\Devnull\Lane;
 use Closure;
 
 /**
@@ -60,4 +61,13 @@ protected function me(): ?User
     {
         return app(Account::class)->user();
     }
+
+    /**
+     * The theme token for your lane, which the main buttons and the pager tab
+     * underlines are drawn in.
+     */
+    protected function myColour(): string
+    {
+        return Lane::token($this->me()?->lane());
+    }
 }

app/NativeComponents/Layouts/TabsLayout.php

@@ -3,6 +3,7 @@
 namespace App\NativeComponents\Layouts;
 
 use App\Devnull\Account;
+use App\Devnull\Lane;
 use App\Icons\Lucide;
 use App\NativeComponents\Log;
 use Native\Mobile\Edge\Elements\Image;
@@ -90,8 +91,7 @@ public function tabBar(NativeComponent $screen): ?TabBar
     public static function accent(): string
     {
         $primary = (string) theme('primary', '#3b6fe0');
-        $me = app(Account::class)->user();
 
-        return $me === null ? $primary : (string) theme('lane-'.$me->lane(), $primary);
+        return (string) theme(Lane::token(app(Account::class)->user()?->lane()), $primary);
     }
 }

app/NativeComponents/Log.php

@@ -698,6 +698,7 @@ public function render(): View
         $showing = $pages[array_search($this->log, self::Logs, true)];
 
         return view('native.log', [
+            'myColour' => $this->myColour(),
             'viewer' => $viewer,
             'composerOpen' => $this->composing || $this->body !== '',
             'remaining' => $this->remaining(),

app/NativeComponents/Notifications.php

@@ -462,6 +462,7 @@ public function render(): View
         }
 
         return view('native.notifications', [
+            'myColour' => $this->myColour(),
             'types' => self::Types,
             'readAt' => $readAt,
             'pages' => $pages,

app/NativeComponents/Profile.php

@@ -385,6 +385,7 @@ public function render(): View
         $pinnedCommit = $this->pinnedCommit();
 
         return view('native.profile', [
+            'myColour' => $this->myColour(),
             'isBlocked' => $this->unavailable === ErrorCode::UserBlocked->value,
             'isMe' => $this->isMe(),
             'newCommitsLabel' => $this->newCommitsLabel(),

app/NativeComponents/ThisDevice.php

@@ -312,6 +312,7 @@ public function render(): View
         $current = $this->current;
 
         return view('native.this-device', [
+            'myColour' => $this->myColour(),
             'user' => $current?->user,
             'fields' => $current === null ? [] : self::fields($current),
             'syncedAt' => $current?->githubSyncedAt === null ? 'Last synced when you signed in' : 'Last synced '.Display::ago($current->githubSyncedAt),

config/native-ui.php

@@ -40,9 +40,11 @@
     'theme' => [
 
         // devnull's tokens from DESIGN.md: a cool, nearly colourless shell, one
-        // working blue, and six author lanes that only ever mark the graph.
+        // working blue, and six author lanes that mark the graph. Your own lane
+        // also colours your buttons.
         'light' => [
-            // Commit Blue: the primary button, links, the active tab underline.
+            // Commit Blue: links, the new commits pill, and the main buttons and
+            // tab underlines before devnull has said whose phone this is.
             'primary' => '#3b6fe0',
             'on-primary' => '#ffffff',
 
@@ -80,13 +82,24 @@
             'pending' => '#b45309',
             'pending-soft' => '#fef3c7',
 
-            // Author lanes. Identity only: graph nodes, rail segments, avatar rings.
+            // Author lanes: graph nodes, rail segments, avatar rings. Yours also
+            // colours the tab bar, the main buttons and the pager tab underlines.
             'lane-0' => '#d9480f',
             'lane-1' => '#2f9e44',
             'lane-2' => '#9c36b5',
             'lane-3' => '#0c8599',
             'lane-4' => '#c2255c',
             'lane-5' => '#b7791f',
+
+            // A button's label on each lane: white, except ink on green and
+            // ochre, where white falls well short of 4.5:1. White on orange and
+            // teal is 4.3:1, a hair short, and ink is no better there.
+            'on-lane-0' => '#ffffff',
+            'on-lane-1' => '#121417',
+            'on-lane-2' => '#ffffff',
+            'on-lane-3' => '#ffffff',
+            'on-lane-4' => '#ffffff',
+            'on-lane-5' => '#121417',
         ],
 
         // A faithful mirror on graphite, with the lanes and primary lifted.
@@ -129,6 +142,15 @@
             'lane-3' => '#3bc9db',
             'lane-4' => '#f06595',
             'lane-5' => '#fcc419',
+
+            // The lifted lanes are all light enough that white won't read on
+            // them (3:1 at best), so labels are graphite, as on primary.
+            'on-lane-0' => '#111112',
+            'on-lane-1' => '#111112',
+            'on-lane-2' => '#111112',
+            'on-lane-3' => '#111112',
+            'on-lane-4' => '#111112',
+            'on-lane-5' => '#111112',
         ],
 
         // Corner radii (points / dp): 6px controls, 8px groups, circles for people and commits.

resources/views/native/commit-detail.blade.php

@@ -122,7 +122,7 @@ class="w-full py-2 text-theme-ink"
                         />
                     </native:column>
                     @include('native.partials.body-counter', ['body' => $reply, 'ref' => 'reply-budget'])
-                    <native:button ref="send-reply" size="sm" :disabled="$replyLength < 3 || $remaining < 0" @press="sendReply">Reply</native:button>
+                    <native:button ref="send-reply" :variant="$myColour" size="sm" :disabled="$replyLength < 3 || $remaining < 0" @press="sendReply">Reply</native:button>
                 </native:row>
             </native:column>
         </native:bottom-bar>

resources/views/native/log.blade.php

@@ -5,8 +5,9 @@
 
     {{--
         The logs as pages you swipe between, under DESIGN.md's page tabs, which the pager draws itself: a full-width
-        split, the active label in ink over a 3px blue underline. On the phone the underline follows your finger, the
-        label you're nearest lights up past halfway, and a tab tap scrolls the pager there, so none of it waits for PHP.
+        split, the active label in ink over a 3px underline in your colour. On the phone the underline follows your
+        finger, the label you're nearest lights up past halfway, and a tab tap scrolls the pager there, so none of it
+        waits for PHP.
 
         The pager says which log it settled on once the swipe has come to rest, not as the log changes under your
         finger: switching logs sends a frame big enough to make the swipe stutter if it lands mid-swipe. A tap on the
@@ -27,6 +28,7 @@ class="w-full flex-1 bg-theme-surface"
         :tabs="$tabs"
         on-tab-reselect="backToTop"
         tab-active-color="theme-ink"
+        :tab-indicator-color="'theme-'.$myColour"
         tab-color="theme-ink-muted"
         tab-divider-color="theme-hairline"
         tab-font="semibold"

resources/views/native/notifications.blade.php

@@ -25,6 +25,7 @@ class="w-full flex-1 bg-theme-surface"
         tabs-scrollable
         on-tab-reselect="backToTop"
         tab-active-color="theme-ink"
+        :tab-indicator-color="'theme-'.$myColour"
         tab-color="theme-ink-muted"
         tab-divider-color="theme-hairline"
         tab-font="semibold"

resources/views/native/partials/commit-sheet.blade.php

@@ -44,7 +44,7 @@ class="w-full text-theme-ink"
 
                     <native:row class="w-full gap-3 items-center justify-end">
                         @include('native.partials.body-counter', ['body' => $sheetBody, 'ref' => 'sheet-budget'])
-                        <native:button ref="sheet-commit" variant="primary" :disabled="$sheetLength < \App\Devnull\Data\Commit::MinLength || $sheetLength > \App\Devnull\Data\Commit::MaxLength" @press="commitFromSheet">Commit</native:button>
+                        <native:button ref="sheet-commit" :variant="$myColour" :disabled="$sheetLength < \App\Devnull\Data\Commit::MinLength || $sheetLength > \App\Devnull\Data\Commit::MaxLength" @press="commitFromSheet">Commit</native:button>
                     </native:row>
                 </native:column>
             </native:scroll-view>
@@ -84,7 +84,7 @@ class="w-full"
                         <native:text ref="sheet-error" class="w-full text-sm text-theme-destructive">{{ $sheetError }}</native:text>
                     @endif
 
-                    <native:button ref="send-report" variant="primary" :disabled="$reportReason === ''" @press="sendReport" class="w-full">Send report</native:button>
+                    <native:button ref="send-report" :variant="$myColour" size="lg" :disabled="$reportReason === ''" @press="sendReport" class="w-full">Send report</native:button>
                 </native:column>
             </native:scroll-view>
         @elseif ($sheetView === 'reported')
@@ -93,7 +93,7 @@ class="w-full"
                     <native:icon :ios="\App\Icons\Lucide::Check->ios()" :android="\App\Icons\Lucide::Check->android()" :size="20" class="text-theme-primary" />
                     <native:text class="flex-1 text-base text-theme-ink">Report received. Moderators will review it privately.</native:text>
                 </native:row>
-                <native:button ref="report-done" variant="secondary" @press="hideCommitSheet" class="w-full">Done</native:button>
+                <native:button ref="report-done" variant="secondary" size="lg" @press="hideCommitSheet" class="w-full">Done</native:button>
             </native:column>
         @endif
     @endif

resources/views/native/partials/composer.blade.php

@@ -30,7 +30,7 @@ class="w-full text-theme-ink"
             @if ($composerOpen)
                 <native:row class="w-full gap-3 items-center justify-end">
                     @include('native.partials.body-counter', ['body' => $body, 'ref' => 'budget'])
-                    <native:button ref="commit" variant="primary" :disabled="! $canCommit" @press="commit">Commit</native:button>
+                    <native:button ref="commit" :variant="$myColour" :disabled="! $canCommit" @press="commit">Commit</native:button>
                 </native:row>
             @endif
         </native:column>

resources/views/native/partials/follow-back.blade.php

@@ -1,2 +1,2 @@
-{{-- The web's Follow button on a follow: Follow in Commit Blue, or Following once you do. A tap flips it. --}}
-<native:button ref="follow-back-{{ $actor->username }}" size="sm" :variant="$isFollowing ? 'secondary' : 'primary'" @press="toggleFollowBack('{{ $actor->username }}')" a11y-hint="{{ $isFollowing ? 'Unfollows' : 'Follows' }} {{ $actor->handle() }}">{{ $isFollowing ? 'Following' : 'Follow' }}</native:button>
+{{-- The web's Follow button on a follow: Follow in your colour, or Following once you do. A tap flips it. --}}
+<native:button ref="follow-back-{{ $actor->username }}" size="sm" :variant="$isFollowing ? 'secondary' : $myColour" @press="toggleFollowBack('{{ $actor->username }}')" a11y-hint="{{ $isFollowing ? 'Unfollows' : 'Follows' }} {{ $actor->handle() }}">{{ $isFollowing ? 'Following' : 'Follow' }}</native:button>

resources/views/native/partials/following-empty.blade.php

@@ -27,7 +27,7 @@
                         </native:row>
                         <native:text class="w-full text-sm text-theme-ink-muted" :max-lines="1">{{ $suggestion->plainText() }}</native:text>
                     </native:column>
-                    <native:button ref="follow-{{ $author->username }}" size="sm" @press="followSuggested('{{ $author->username }}')" a11y-label="Follow {{ $author->handle() }}">Follow</native:button>
+                    <native:button ref="follow-{{ $author->username }}" :variant="$myColour" size="sm" @press="followSuggested('{{ $author->username }}')" a11y-label="Follow {{ $author->handle() }}">Follow</native:button>
                 </native:row>
                 @unless ($loop->last)
                     <native:column class="w-full h-[1] bg-theme-hairline" />

resources/views/native/partials/page-tabs.blade.php

@@ -1,11 +1,11 @@
-{{-- DESIGN.md's page tabs: a full-width split, the active label in ink over a 3px blue underline. --}}
+{{-- DESIGN.md's page tabs: a full-width split, the active label in ink over a 3px underline in your colour. --}}
 <native:column class="w-full bg-theme-surface">
     <native:row class="w-full">
         @foreach ($tabs as $tab)
             <native:pressable ref="tab-{{ $tab['key'] }}" @press="{{ $tab['press'] }}" class="flex-1 items-center pt-[14]" a11y-label="{{ $tab['label'] }}{{ $tab['active'] ? ', selected' : '' }}">
                 <native:column class="items-center gap-[11]">
                     <native:text font="semibold" class="text-[15px] {{ $tab['active'] ? 'text-theme-ink' : 'text-theme-ink-muted' }}">{{ $tab['label'] }}</native:text>
-                    <native:column class="w-full h-[3] rounded-full {{ $tab['active'] ? 'bg-theme-primary' : 'bg-transparent' }}" />
+                    <native:column class="w-full h-[3] rounded-full {{ $tab['active'] ? 'bg-theme-'.$myColour : 'bg-transparent' }}" />
                 </native:column>
             </native:pressable>
         @endforeach

resources/views/native/profile.blade.php

@@ -34,7 +34,7 @@
                         @elseif ($profile->isFollowing)
                             <native:button ref="follow" variant="secondary" size="sm" @press="toggleFollow" a11y-hint="Unfollows {{ $user->handle() }}">Unfollow</native:button>
                         @else
-                            <native:button ref="follow" variant="primary" size="sm" @press="toggleFollow">Follow</native:button>
+                            <native:button ref="follow" :variant="$myColour" size="sm" @press="toggleFollow">Follow</native:button>
                         @endif
                     </native:row>