Accent Colors

[jbrooksuk]

Closes #78 and replaces #114.

Instead of allowing a whole bunch of confusing and overlapping theming options, I've opted to follow what Caleb Porzio has done in FluxUI and implement "accent colors".

Out of the box, it means that Cachet is less customizable in a big way. However, we can later extend customizability by implementing #122 and structuring the views in a way where they're easier to replace via Laravel's own publishing system.

Okay, let's get into how it works. Essentially, Cachet now generates new CSS variables for accents:

/* Light mode */
:root {
    --accent: 4, 193, 71;
    --accent-content: 4, 193, 71;
    --accent-foreground: 255, 255, 255;
    --accent-background: 250, 250, 250;
}

/* Dark mode */
@media(prefers-color-scheme: dark) {
    :root {
        --accent: 4, 193, 71;
        --accent-content: 79, 212, 126;
        --accent-foreground: 1, 58, 21;
        --accent-background: 24, 24, 27;
    }
}

These colors are used throughout the UI to "accent" elements such as buttons (accent) and links within content (accent-content).

Cachet is also utilizing Filament's own Color and FilamentColor classes to access the default Tailwind color palette. We also register Cachet's default color so that it's an option too. This means we don't need to touch our own CSS to generate them in a usable CSS variable format.

I've adjusted parts of the UI (mainly in dark mode) to change the color of panel backgrounds to automatically take on the background hue ✨