Missing configurable colours in :root, ring & focus stay default Nova colour.

[LTKort]

• Laravel Version: 9
• Nova Version: 4.4.2
• PHP Version: 8.1

Description:

Not all primary colours that are defined in the vendor stylesheets are customisable. Which results in that the border of inputs etc stay blue instead of the configured colour.

TL;DR Colours stay default instead of configured colours. Solution for missing colours proposed, ring utility colour is still the default.

In the tailwind config are multiple values defined;

  primary: {
        50: 'rgba(var(--colors-primary-50))',
        100: 'rgba(var(--colors-primary-100))',
        200: 'rgba(var(--colors-primary-200))',
        300: 'rgba(var(--colors-primary-300))',
        400: 'rgba(var(--colors-primary-400))',
        500: 'rgba(var(--colors-primary-500))',
        600: 'rgba(var(--colors-primary-600))',
        700: 'rgba(var(--colors-primary-700))',
        800: 'rgba(var(--colors-primary-800))',
        900: 'rgba(var(--colors-primary-900))',
      },

But the app.js only writes

<style>
:root {
  --colors-primary-400: 255, 18, 59, 0.4;
  --colors-primary-500: 255, 18, 59;
  --colors-primary-600: 206, 6, 42, 1;
}
</style>

Solution:

In resources/app.js in function applyTheme() on Line 439 replace

  applyTheme() {
    if (Object.keys(this.config('brandColors')).length > 0) {
      const style = document.createElement('style')

      style.innerHTML = `
:root {
  --colors-primary-400: ${this.config('brandColors')['400']};
  --colors-primary-500: ${this.config('brandColors')['500']};
  --colors-primary-600: ${this.config('brandColors')['600']};
}
    `
      document.head.append(style)
    }
  }

with

  applyTheme() {
    if (Object.keys(this.config('brandColors')).length > 0) {
      const style = document.createElement('style')

      style.innerHTML = `
:root {
    --colors-primary-50: ${this.config("brandColors")["50"]};
    --colors-primary-100: ${this.config("brandColors")["100"]};
    --colors-primary-200: ${this.config("brandColors")["200"]};
    --colors-primary-300: ${this.config("brandColors")["300"]};
    --colors-primary-400: ${this.config("brandColors")["400"]};
    --colors-primary-500: ${this.config("brandColors")["500"]};
    --colors-primary-600: ${this.config("brandColors")["600"]};
    --colors-primary-700: ${this.config("brandColors")["700"]};
    --colors-primary-800: ${this.config("brandColors")["800"]};
    --colors-primary-900: ${this.config("brandColors")["900"]};
}
    `
      document.head.append(style)
    }
  }

Detailed steps to reproduce the issue on a fresh Nova installation:

Add these colors to the nova config, and you will see that the form focus etc stays the same blue color instead of red.

    'brand' => [
        'colors' => [
            "50" => "255, 18, 59, 0.1",
            "100" => "255, 18, 59, 0.1",
            "200" => "255, 18, 59, 0.2",
            "300" => "255, 18, 59, 0.3",
            "400" => "255, 18, 59, 0.4",
            "500" => "255, 18, 59",
            "600" => "206, 6, 42, 1",
            "700" => "255, 18, 59, 0.7",
            "800" => "255, 18, 59, 0.8",
            "900" => "206, 6, 42, 1",
        ]
    ],

[benedict-w]

Is there currently any work around for this?

[abordage]

You can override styles by including your styles in resources/views/vendor/nova/partials/meta.blade.php

An example of how to include the entire tailwind color palette: https://github.com/abordage/tailwind-colors