Merge pull request #15474 from filamentphp/improve-color-contrast

Improve color contrast

Author: danharrin

docs-assets/app/public/css/filament/filament/app.css

@@ -86,7 +86,7 @@ trait CanOpenModal
     protected string | Closure | null $modalIcon = null;
 
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     * @var string | array<int | string, string | int> | Closure | null
      */
     protected string | array | Closure | null $modalIconColor = null;
 
@@ -145,7 +145,7 @@ public function modalIcon(string | Closure | null $icon = null): static
     }
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function modalIconColor(string | array | Closure | null $color = null): static
     {
@@ -691,7 +691,7 @@ public function getModalIcon(): ?string
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getModalIconColor(): string | array | null
     {

docs-assets/app/public/css/filament/forms/forms.css

@@ -37,14 +37,14 @@ trait HasAffixes
     protected string | Closure | null $prefixIcon = null;
 
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     * @var string | array<int | string, string | int> | Closure | null
      */
     protected string | array | Closure | null $prefixIconColor = null;
 
     protected string | Closure | null $suffixIcon = null;
 
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     * @var string | array<int | string, string | int> | Closure | null
      */
     protected string | array | Closure | null $suffixIconColor = null;
 
@@ -138,7 +138,7 @@ public function prefixIcon(string | Closure | null $icon, bool | Closure $isInli
     }
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function prefixIconColor(string | array | Closure | null $color = null): static
     {
@@ -156,7 +156,7 @@ public function suffixIcon(string | Closure | null $icon, bool | Closure $isInli
     }
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function suffixIconColor(string | array | Closure | null $color = null): static
     {
@@ -242,15 +242,15 @@ public function getSuffixIcon(): ?string
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getPrefixIconColor(): string | array | null
     {
         return $this->evaluate($this->prefixIconColor);
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getSuffixIconColor(): string | array | null
     {

docs-assets/app/public/css/filament/support/support.css

@@ -10,12 +10,12 @@
 trait HasColors
 {
     /**
-     * @var array<string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null> | Arrayable | Closure | null
+     * @var array<string | array<int | string, string | int> | null> | Arrayable | Closure | null
      */
     protected array | Arrayable | Closure | null $colors = null;
 
     /**
-     * @param  array<string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null> | Arrayable | Closure | null  $colors
+     * @param  array<string | array<int | string, string | int> | null> | Arrayable | Closure | null  $colors
      */
     public function colors(array | Arrayable | Closure | null $colors): static
     {
@@ -25,15 +25,15 @@ public function colors(array | Arrayable | Closure | null $colors): static
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getColor(mixed $value): string | array | null
     {
         return $this->getColors()[$value] ?? null;
     }
 
     /**
-     * @return array<string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null>
+     * @return array<string | array<int | string, string | int> | null>
      */
     public function getColors(): array
     {

packages/actions/src/Concerns/CanOpenModal.php

@@ -20,7 +20,7 @@ trait HasHint
     protected array $hintActions = [];
 
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     * @var string | array<int | string, string | int> | Closure | null
      */
     protected string | array | Closure | null $hintColor = null;
 
@@ -62,7 +62,7 @@ public function hint(string | Htmlable | Closure | null $hint): static
     }
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function hintColor(string | array | Closure | null $color): static
     {
@@ -112,7 +112,7 @@ public function getHint(): string | Htmlable | null
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getHintColor(): string | array | null
     {

packages/forms/dist/index.css

@@ -7,17 +7,17 @@
 trait HasToggleColors
 {
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     * @var string | array<int | string, string | int> | Closure | null
      */
     protected string | array | Closure | null $offColor = null;
 
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     * @var string | array<int | string, string | int> | Closure | null
      */
     protected string | array | Closure | null $onColor = null;
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function offColor(string | array | Closure | null $color): static
     {
@@ -27,7 +27,7 @@ public function offColor(string | array | Closure | null $color): static
     }
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function onColor(string | array | Closure | null $color): static
     {
@@ -37,15 +37,15 @@ public function onColor(string | array | Closure | null $color): static
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getOffColor(): string | array | null
     {
         return $this->evaluate($this->offColor);
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getOnColor(): string | array | null
     {

packages/forms/src/Components/Concerns/HasAffixes.php

@@ -45,7 +45,7 @@
                             },
                             match ($color) {
                                 'gray' => 'text-gray-400 dark:text-gray-500',
-                                default => 'fi-color text-custom-500 dark:text-custom-400',
+                                default => 'fi-color text-color-500 dark:text-color-400',
                             },
                             is_string($color) ? 'fi-color-' . $color : null,
                         ])

packages/forms/src/Components/Concerns/HasColors.php

@@ -134,7 +134,7 @@
                                     'fi-in-text-item-icon size-5 shrink-0',
                                     match ($iconColor) {
                                         'gray', null => 'text-gray-400 dark:text-gray-500',
-                                        default => 'text-custom-500',
+                                        default => 'text-color-500',
                                     },
                                 ]);
 
@@ -170,7 +170,7 @@
                                     match ($color) {
                                         null => 'text-gray-950 dark:text-white',
                                         'gray' => 'text-gray-500 dark:text-gray-400',
-                                        default => 'text-custom-600 dark:text-custom-400',
+                                        default => 'text-color-600 dark:text-color-400',
                                     } => $isBulleted,
                                 ])
                                 @style([
@@ -224,7 +224,7 @@
                                                 match ($color) {
                                                     null => 'text-gray-950 dark:text-white',
                                                     'gray' => 'text-gray-500 dark:text-gray-400',
-                                                    default => 'text-custom-600 dark:text-custom-400',
+                                                    default => 'text-color-600 dark:text-color-400',
                                                 },
                                                 match ($weight) {
                                                     FontWeight::Thin, 'thin' => 'font-thin',

packages/forms/src/Components/Concerns/HasHint.php

@@ -9,12 +9,12 @@
 trait HasColor
 {
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | bool | Closure | null
+     * @var string | array<int | string, string | int> | bool | Closure | null
      */
     protected string | array | bool | Closure | null $color = null;
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | bool | Closure | null  $color
+     * @param  string | array<int | string, string | int> | bool | Closure | null  $color
      */
     public function color(string | array | bool | Closure | null $color): static
     {
@@ -50,7 +50,7 @@ public function colors(array | Closure $colors): static
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getColor(mixed $state): string | array | null
     {

packages/forms/src/Components/Concerns/HasToggleColors.php

@@ -19,7 +19,7 @@ trait HasHint
     protected array $hintActions = [];
 
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     * @var string | array<int | string, string | int> | Closure | null
      */
     protected string | array | Closure | null $hintColor = null;
 
@@ -61,7 +61,7 @@ public function hint(string | Htmlable | Closure | null $hint): static
     }
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function hintColor(string | array | Closure | null $color): static
     {
@@ -111,7 +111,7 @@ public function getHint(): string | Htmlable | null
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getHintColor(): string | array | null
     {

packages/infolists/resources/views/components/icon-entry.blade.php

@@ -7,12 +7,12 @@
 trait HasIconColor
 {
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     * @var string | array<int | string, string | int> | Closure | null
      */
     protected string | array | Closure | null $iconColor = null;
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function iconColor(string | array | Closure | null $color): static
     {
@@ -22,7 +22,7 @@ public function iconColor(string | array | Closure | null $color): static
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getIconColor(mixed $state): string | array | null
     {

packages/infolists/resources/views/components/text-entry.blade.php

@@ -23,14 +23,14 @@ class IconEntry extends Entry
     protected bool | Closure | null $isBoolean = null;
 
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     * @var string | array<int | string, string | int> | Closure | null
      */
     protected string | array | Closure | null $falseColor = null;
 
     protected string | Closure | null $falseIcon = null;
 
     /**
-     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     * @var string | array<int | string, string | int> | Closure | null
      */
     protected string | array | Closure | null $trueColor = null;
 
@@ -46,7 +46,7 @@ public function boolean(bool | Closure $condition = true): static
     }
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function false(string | Closure | null $icon = null, string | array | Closure | null $color = null): static
     {
@@ -57,7 +57,7 @@ public function false(string | Closure | null $icon = null, string | array | Clo
     }
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function falseColor(string | array | Closure | null $color): static
     {
@@ -76,7 +76,7 @@ public function falseIcon(string | Closure | null $icon): static
     }
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function true(string | Closure | null $icon = null, string | array | Closure | null $color = null): static
     {
@@ -87,7 +87,7 @@ public function true(string | Closure | null $icon = null, string | array | Clos
     }
 
     /**
-     * @param  string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null  $color
+     * @param  string | array<int | string, string | int> | Closure | null  $color
      */
     public function trueColor(string | array | Closure | null $color): static
     {
@@ -137,7 +137,7 @@ public function getIcon(mixed $state): ?string
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @return string | array<int | string, string | int> | null
      */
     public function getColor(mixed $state): string | array | null
     {
@@ -157,7 +157,7 @@ public function getColor(mixed $state): string | array | null
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
+     * @return string | array<int | string, string | int>
      */
     public function getFalseColor(): string | array
     {
@@ -172,7 +172,7 @@ public function getFalseIcon(): string
     }
 
     /**
-     * @return string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
+     * @return string | array<int | string, string | int>
      */
     public function getTrueColor(): string | array
     {

packages/infolists/src/Components/Concerns/HasColor.php

@@ -16,7 +16,7 @@
                 'fi-no-notification-icon',
                 match ($color) {
                     'gray' => 'text-gray-400',
-                    default => 'fi-color text-custom-400',
+                    default => 'fi-color text-color-400',
                 },
                 is_string($color) ? 'fi-color-' . $color : null,
                 match ($size) {