Accent Colors (#143)

cachethq · Dec 18, 2024 · c56a048 · c56a048
1 parent 3150651
commit c56a048
Show file tree

Hide file tree

Showing 19 changed files with 496 additions and 52 deletions.
diff --git a/database/migrations/2024_01_22_205110_add_theme_settings.php b/database/migrations/2024_01_22_205110_add_theme_settings.php
@@ -0,0 +1,17 @@
+<?php
+
+use Spatie\LaravelSettings\Migrations\SettingsMigration;
+
+return new class extends SettingsMigration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        // Theme settings...
+        rescue(fn () => $this->migrator->add('theme.accent', 'cachet'));
+        rescue(fn () => $this->migrator->add('theme.accent_content', 'zinc'));
+        rescue(fn () => $this->migrator->add('theme.accent_pairing', true));
+    }
+};
diff --git a/resources/css/cachet.css b/resources/css/cachet.css
@@ -16,7 +16,7 @@
     }
 
     .button--secondary {
-        @apply bg-zinc-300 text-zinc-800 hover:bg-zinc-400 focus-visible:outline-zinc-300 focus-visible:outline-zinc-800 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700;
+        @apply bg-zinc-300 text-zinc-800 hover:bg-zinc-400 focus-visible:outline-zinc-300 focus-visible:outline-zinc-800 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-zinc-700;
     }
 }
 

diff --git a/resources/css/dashboard/theme.css b/resources/css/dashboard/theme.css
@@ -1,3 +1,7 @@
 @import '/vendor/filament/filament/resources/css/theme.css';
 
 @config 'tailwind.config.js';
+
+.theme-swatch {
+    @apply inline-flex w-4 h-4 rounded-full mr-2 bg-[rgb(var(--swatch))];
+}
diff --git a/resources/views/components/about.blade.php b/resources/views/components/about.blade.php
@@ -1,7 +1,7 @@
 @if ($about !== '')
 <div>
     <h1 class="text-3xl font-semibold">{{ $title }}</h1>
-    <div class="prose-sm md:prose prose-zinc mt-1 dark:prose-invert prose-a:text-primary-500 prose-a:underline">
+    <div class="prose-sm md:prose prose-zinc mt-1 dark:prose-invert prose-a:text-accent-content prose-a:underline">
         {!! $about !!}
     </div>
 </div>

diff --git a/resources/views/components/cachet.blade.php b/resources/views/components/cachet.blade.php
@@ -1,6 +1,6 @@
 @use('Cachet\Cachet')
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="bg-background-light text-base-light dark:bg-background-dark dark:text-base-dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="bg-accent-background text-zinc-700 dark:text-zinc-300">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -35,13 +35,7 @@
         {!! $cachet_header !!}
 
         <style type="text/css">
-            /* Cachet custom styles */
-            :root {
-                @foreach (\Cachet\Cachet::cssVariables() as $key => $value)
-                    --{{ $key }}-light: {{ $value[0] }};
-                    --{{ $key }}-dark: {{ $value[1] }};
-                @endforeach
-            }
+            {{ $theme->styles  }}
 
             {!! $cachet_css !!}
         </style>

diff --git a/resources/views/components/component-group.blade.php b/resources/views/components/component-group.blade.php
@@ -6,7 +6,7 @@
     ]))
     ->class(['overflow-hidden rounded-lg border dark:border-zinc-700'])
     }}>
-    <div class="flex items-center justify-between bg-white p-4 dark:border-zinc-700 dark:bg-zinc-800">
+    <div class="flex items-center justify-between bg-white p-4 dark:border-zinc-700 dark:bg-white/5">
         <button x-disclosure:button class="flex items-center gap-2 text-zinc-500 dark:text-zinc-300">
             <h3 class="text-lg font-semibold">
                 {{ $componentGroup->name }}
@@ -21,7 +21,7 @@
         @endif
     </div>
 
-    <div x-disclosure:panel x-collapse class="flex flex-col divide-y bg-white dark:bg-zinc-800">
+    <div x-disclosure:panel x-collapse class="flex flex-col divide-y bg-white dark:bg-white/5">
         <ul class="divide-y dark:divide-zinc-700">
             @foreach($componentGroup->components as $component)
             <x-cachet::component :component="$component" />

diff --git a/resources/views/components/component-ungrouped.blade.php b/resources/views/components/component-ungrouped.blade.php
@@ -1,7 +1,7 @@
 @props(['component' => null])
 
 <div class="overflow-hidden rounded-lg border dark:border-zinc-700">
-    <div class="flex flex-col divide-y bg-white dark:bg-zinc-800">
+    <div class="flex flex-col divide-y bg-white dark:bg-white/5">
         <ul class="divide-y dark:divide-zinc-700">
             <x-cachet::component :component="$component" />
         </ul>

diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
@@ -1,5 +1,5 @@
 @if ($showSupport || $showTimezone)
-<footer class="flex flex-col items-center justify-center gap-2 border-t px-8 py-6 text-center text-sm tracking-tight text-zinc-500 dark:border-zinc-700">
+<footer class="flex flex-col items-center justify-center gap-2 border-t px-8 py-6 text-center text-sm tracking-tight text-zinc-500 dark:text-zinc-400 dark:border-zinc-700">
     @if($showSupport)
     <div class="flex items-center justify-center gap-2">
         Powered by

diff --git a/resources/views/components/header.blade.php b/resources/views/components/header.blade.php
@@ -12,16 +12,14 @@
 
     @if ($dashboardLoginLink)
     <div class="flex items-center gap-2.5 sm:gap-5">
-        <a href="{{ Cachet\Cachet::dashboardPath() }}" class="text-sm font-medium text-zinc-800 transition hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300 sm:text-base">{{ __('Dashboard') }}</a>
+        <a href="{{ Cachet\Cachet::dashboardPath() }}" class="rounded bg-accent px-3 py-2 text-sm font-semibold text-accent-foreground">Dashboard</a>
         @auth
         {{-- TODO: This form sucks... --}}
         <form action="{{ \Cachet\Cachet::dashboardPath() }}/logout" method="POST">
             @csrf
             <button class="text-sm font-medium text-zinc-800 transition hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300 sm:text-base">Logout</button>
         </form>
         @endauth
-        {{-- Conditional Button. --}}
-{{--        <a href="{{ route('cachet.dashboard.index') }}" class="rounded bg-primary-500 px-2 py-1 text-sm font-semibold text-zinc-800 dark:text-zinc-400 transition hover:bg-primary-600">Subscribers</a>--}}
     </div>
     @endif
 </div>
diff --git a/resources/views/components/incident.blade.php b/resources/views/components/incident.blade.php
@@ -7,9 +7,9 @@
 <div class="relative flex flex-col gap-5" x-data="{ forDate: new Date(@js($date)) }">
     <h3 class="text-xl font-semibold"><time datetime="{{ $date }}" x-text="forDate.toLocaleDateString()"></time></h3>
     @forelse($incidents as $incident)
-    <div x-data="{ timestamp: new Date(@js($incident->timestamp)) }" class="bg-white border divide-y rounded-lg ml-9 dark:divide-zinc-700 dark:border-zinc-700 dark:bg-zinc-800">
+    <div x-data="{ timestamp: new Date(@js($incident->timestamp)) }" class="bg-white border divide-y rounded-lg ml-9 dark:divide-zinc-700 dark:border-zinc-700 dark:bg-white/5">
         <div @class([
-            'flex flex-col bg-zinc-50 p-4 dark:bg-zinc-900 gap-2',
+            'flex flex-col bg-zinc-50 p-4 dark:bg-accent-background gap-2',
             'rounded-t-lg' => $incident->updates->isNotEmpty(),
             'rounded-lg' => $incident->updates->isEmpty(),
         ])>
@@ -43,8 +43,8 @@
         <div class="relative">
             <div class="absolute inset-y-0 -left-9">
                 <div class="ml-3.5 h-full border-l-2 border-dashed dark:border-zinc-700"></div>
-                <div class="absolute inset-x-0 top-0 w-full h-24 bg-gradient-to-t from-transparent to-zinc-50 dark:from-transparent dark:to-zinc-900"></div>
-                <div class="absolute inset-x-0 bottom-0 w-full h-24 bg-gradient-to-b from-transparent to-zinc-50 dark:from-transparent dark:to-zinc-900"></div>
+                <div class="absolute inset-x-0 top-0 w-full h-24 bg-gradient-to-t from-transparent to-[rgb(var(--accent-background))]"></div>
+                <div class="absolute inset-x-0 bottom-0 w-full h-24 bg-gradient-to-b from-transparent to-[rgb(var(--accent-background))]"></div>
             </div>
             <div class="flex flex-col px-4 divide-y dark:divide-zinc-700">
                 @foreach ($incident->updates as $update)
@@ -54,7 +54,7 @@
                     <span class="text-xs text-zinc-500 dark:text-zinc-400">
                         {{ $update->created_at->diffForHumans() }} — <time datetime="{{ $update->created_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
                     </span>
-                    <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $update->formattedMessage() !!}</div>
+                    <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-accent-content prose-a:underline prose-p:leading-normal">{!! $update->formattedMessage() !!}</div>
                 </div>
                 @endforeach
                 <div class="relative py-4" x-data="{ timestamp: new Date(@js($incident->timestamp)) }">
@@ -63,15 +63,15 @@
                     <span class="text-xs text-zinc-500 dark:text-zinc-400">
                         {{ $incident->timestamp->diffForHumans() }} — <time datetime="{{ $incident->timestamp->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
                     </span>
-                    <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $incident->formattedMessage() !!}</div>
+                    <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-accent-content prose-a:underline prose-p:leading-normal">{!! $incident->formattedMessage() !!}</div>
                 </div>
             </div>
         </div>
     </div>
     @empty
-        <div class="bg-white border divide-y rounded-lg ml-9 dark:divide-zinc-700 dark:border-zinc-700 dark:bg-zinc-800">
+        <div class="bg-white border divide-y rounded-lg ml-9 dark:divide-zinc-700 dark:border-zinc-700 dark:bg-white/5">
             <div class="flex flex-col p-4 divide-y dark:divide-zinc-700">
-                <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">
+                <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-accent-content prose-a:underline prose-p:leading-normal">
                     {{ __('No incidents reported.') }}
                 </div>
             </div>

diff --git a/resources/views/components/schedule.blade.php b/resources/views/components/schedule.blade.php
@@ -19,7 +19,7 @@
                     </div>
                 </div>
 
-                <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $schedule->formattedMessage() !!}</div>
+                <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-accent-content prose-a:underline prose-p:leading-normal">{!! $schedule->formattedMessage() !!}</div>
             </div>
         </div>
     </div>
@@ -31,7 +31,7 @@
                 <span class="text-xs text-zinc-500 dark:text-zinc-400">
                     {{ $update->created_at->diffForHumans() }} — <time datetime="{{ $update->created_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
                 </span>
-                <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $update->formattedMessage() !!}</div>
+                <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-accent-content prose-a:underline prose-p:leading-normal">{!! $update->formattedMessage() !!}</div>
             </div>
             @endforeach
         </div>

diff --git a/resources/views/components/schedules.blade.php b/resources/views/components/schedules.blade.php
@@ -1,9 +1,9 @@
 <div class="overflow-hidden rounded-lg border dark:border-zinc-700">
-    <div class="flex items-center justify-between border-b bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-900">
+    <div class="flex items-center justify-between border-b bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-white/5">
         <h3 class="font-semibold">{{ __('Planned Maintenance') }}</h3>
     </div>
 
-    <div class="flex flex-col divide-y bg-white dark:bg-zinc-800">
+    <div class="flex flex-col divide-y bg-white dark:bg-white/5">
         <ul class="divide-y">
             @foreach($schedules as $schedule)
             <x-cachet::schedule :schedule="$schedule" />

diff --git a/resources/views/setup/index.blade.php b/resources/views/setup/index.blade.php
@@ -31,33 +31,33 @@
         </div>
 
         <div class="mx-auto w-full max-w-5xl px-4 py-5 sm:px-6 lg:px-8">
-            <form action="#" method="POST" class="rounded-md border bg-white p-5 shadow-lg dark:border-zinc-700 dark:bg-zinc-800 sm:px-8 sm:pb-8 sm:pt-10">
+            <form action="#" method="POST" class="rounded-md border bg-white p-5 shadow-lg dark:border-zinc-700 dark:bg-white/5 sm:px-8 sm:pb-8 sm:pt-10">
                 <div class="grid gap-x-5 gap-y-8 lg:grid-cols-6">
                     <div class="lg:col-span-3">
                         <label for="site-name" class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Site Name</label>
-                        <input id="site-name" type="text" class="mt-1 block w-full rounded-md border border-zinc-400 px-3 py-2.5 dark:border-zinc-600 dark:bg-zinc-800" />
+                        <input id="site-name" type="text" class="mt-1 block w-full rounded-md border border-zinc-400 px-3 py-2.5 dark:border-zinc-600 dark:bg-white/5" />
                     </div>
                     <div class="lg:col-span-3">
                         <label for="site-domain" class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Site Domain</label>
-                        <input id="site-domain" type="text" class="mt-1 block w-full rounded-md border border-zinc-400 px-3 py-2.5 dark:border-zinc-600 dark:bg-zinc-800" />
+                        <input id="site-domain" type="text" class="mt-1 block w-full rounded-md border border-zinc-400 px-3 py-2.5 dark:border-zinc-600 dark:bg-white/5" />
                     </div>
                     <div class="lg:col-span-3">
                         <label for="timezone" class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Timezone</label>
-                        <select id="timezone" class="mt-1 block w-full rounded-md border border-zinc-400 px-3 py-2.5 dark:border-zinc-600 dark:bg-zinc-800"></select>
+                        <select id="timezone" class="mt-1 block w-full rounded-md border border-zinc-400 px-3 py-2.5 dark:border-zinc-600 dark:bg-white/5"></select>
                     </div>
                     <div class="lg:col-span-3">
                         <label for="language" class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Language</label>
-                        <select id="language" class="mt-1 block w-full rounded-md border border-zinc-400 px-3 py-2.5 dark:border-zinc-600 dark:bg-zinc-800"></select>
+                        <select id="language" class="mt-1 block w-full rounded-md border border-zinc-400 px-3 py-2.5 dark:border-zinc-600 dark:bg-white/5"></select>
                     </div>
                     <div class="lg:col-span-3">
                         <label for="show-support" class="flex items-start gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
-                            <input id="show-support" type="checkbox" class="block h-5 w-5 rounded border border-zinc-400 text-primary-500 dark:border-zinc-600 dark:bg-zinc-800" />
+                            <input id="show-support" type="checkbox" class="block h-5 w-5 rounded border border-zinc-400 text-primary-500 dark:border-zinc-600 dark:bg-white/5" />
                             <span>Show support for Cachet</span>
                         </label>
                     </div>
                 </div>
                 <div class="mt-5 flex items-center justify-end gap-5">
-                    <button class="inline-flex items-center gap-2 rounded-lg border border-zinc-800 bg-white px-3 py-2 font-semibold text-zinc-800 transition hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-900/50">
+                    <button class="inline-flex items-center gap-2 rounded-lg border border-zinc-800 bg-white px-3 py-2 font-semibold text-zinc-800 transition hover:bg-zinc-50 dark:border-zinc-600 dark:bg-white/5 dark:text-zinc-300 dark:hover:bg-zinc-900/50">
                         @svg('cachet-chevron-right', 'rotate-180 size-4')
                         <span>Back</span>
                     </button>

diff --git a/src/CachetCoreServiceProvider.php b/src/CachetCoreServiceProvider.php
@@ -6,6 +6,8 @@
 use Cachet\Models\Incident;
 use Cachet\Models\Schedule;
 use Cachet\Settings\AppSettings;
+use Filament\Support\Colors\Color;
+use Filament\Support\Facades\FilamentColor;
 use Illuminate\Cache\RateLimiting\Limit;
 use Illuminate\Database\Eloquent\Relations\Relation;
 use Illuminate\Foundation\Application;
@@ -56,6 +58,10 @@ public function boot(): void
         Http::globalRequestMiddleware(fn ($request) => $request->withHeader(
             'User-Agent', Cachet::USER_AGENT
         ));
+
+        FilamentColor::register([
+            'cachet' => Color::rgb('rgb(4, 193, 71)'),
+        ]);
     }
 
     /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ @@
         }
         .button--secondary {
-            @apply bg-zinc-300 text-zinc-800 hover:bg-zinc-400 focus-visible:outline-zinc-300 focus-visible:outline-zinc-800 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700;
+            @apply bg-zinc-300 text-zinc-800 hover:bg-zinc-400 focus-visible:outline-zinc-300 focus-visible:outline-zinc-800 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-zinc-700;
         }
     }
@@ Expand Down @@