Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve color contrast #15474

Merged
merged 38 commits into from
Jan 30, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
a33e531
Write scripts to calculate color contrast
danharrin Jan 24, 2025
ad18e05
Add text colors to shade maps
danharrin Jan 25, 2025
57bd144
Swap "custom" variable color to "color"
danharrin Jan 25, 2025
602a5bc
Improve readability of custom color var
danharrin Jan 25, 2025
c959723
Refactor button colors
danharrin Jan 26, 2025
e7cd01e
Fix outlined button
danharrin Jan 26, 2025
2441951
Customize shades for custom button colors
danharrin Jan 27, 2025
410bd30
Remove complexity
danharrin Jan 27, 2025
c9123df
Fix tests
danharrin Jan 27, 2025
23514dc
Increase text contrast on colored backgrounds
danharrin Jan 28, 2025
39f3e47
Simplify
danharrin Jan 28, 2025
9cbacbf
Update badge.css
danharrin Jan 28, 2025
de6271d
Update Button.php
danharrin Jan 28, 2025
08354fb
Update Color.php
danharrin Jan 28, 2025
63affca
Update badge.css
danharrin Jan 29, 2025
08a54e3
Merge branch '4.x' into improve-color-contrast
danharrin Jan 29, 2025
337b9a8
Refactor badge colors
danharrin Jan 29, 2025
387ac66
Refactor icon button colors
danharrin Jan 29, 2025
36cd5de
Update IconButton.php
danharrin Jan 29, 2025
d0ecafd
Update icon-button.blade.php
danharrin Jan 29, 2025
648902b
Refactor to remove extra text color variables
danharrin Jan 29, 2025
7427b60
Output custom color classes
danharrin Jan 29, 2025
5d892c7
adjust button and link weights
danharrin Jan 29, 2025
b491a15
Link color
danharrin Jan 30, 2025
ecdd821
Refactor dropdown item and add tests
danharrin Jan 30, 2025
dc432f7
Update ColorTest.php
danharrin Jan 30, 2025
ec79d6c
Dropdown header
danharrin Jan 30, 2025
8ea0efa
Toggle
danharrin Jan 30, 2025
35cda4b
Icon components
danharrin Jan 30, 2025
c64d0af
Update index.blade.php
danharrin Jan 30, 2025
6e54f06
Chart widget
danharrin Jan 30, 2025
8109e10
Widgets
danharrin Jan 30, 2025
7f857d2
Count summarizer
danharrin Jan 30, 2025
95d4528
Make icons have accessible colors
danharrin Jan 30, 2025
3c89d89
Update support.css
danharrin Jan 30, 2025
a62cd10
Icon column
danharrin Jan 30, 2025
74cb825
Update IconColumn.php
danharrin Jan 30, 2025
b6ee723
Text column
danharrin Jan 30, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs-assets/app/public/css/filament/filament/app.css

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs-assets/app/public/css/filament/forms/forms.css

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs-assets/app/public/css/filament/support/support.css

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions packages/actions/src/Concerns/CanOpenModal.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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
{
Expand Down Expand Up @@ -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
{
Expand Down
4 changes: 2 additions & 2 deletions packages/forms/dist/index.css

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions packages/forms/src/Components/Concerns/HasAffixes.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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
{
Expand All @@ -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
{
Expand Down Expand Up @@ -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
{
Expand Down
8 changes: 4 additions & 4 deletions packages/forms/src/Components/Concerns/HasColors.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand All @@ -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
{
Expand Down
6 changes: 3 additions & 3 deletions packages/forms/src/Components/Concerns/HasHint.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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
{
Expand Down Expand Up @@ -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
{
Expand Down
12 changes: 6 additions & 6 deletions packages/forms/src/Components/Concerns/HasToggleColors.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand All @@ -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
{
Expand All @@ -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
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
])
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
]);

Expand Down Expand Up @@ -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([
Expand Down Expand Up @@ -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',
Expand Down
6 changes: 3 additions & 3 deletions packages/infolists/src/Components/Concerns/HasColor.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand Down Expand Up @@ -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
{
Expand Down
6 changes: 3 additions & 3 deletions packages/infolists/src/Components/Concerns/HasHint.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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
{
Expand Down Expand Up @@ -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
{
Expand Down
6 changes: 3 additions & 3 deletions packages/infolists/src/Components/Concerns/HasIconColor.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand All @@ -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
{
Expand Down
18 changes: 9 additions & 9 deletions packages/infolists/src/Components/IconEntry.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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
{
Expand All @@ -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
{
Expand All @@ -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
{
Expand All @@ -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
{
Expand Down Expand Up @@ -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
{
Expand All @@ -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
{
Expand All @@ -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
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Loading