Toggle

packages/support/resources/css/components/dropdown/header.css

@@ -1,5 +1,5 @@
 .fi-dropdown-header {
-    @apply flex font-medium w-full gap-2 p-3 text-sm;
+    @apply flex w-full gap-2 p-3 text-sm font-medium;
 
     & .fi-icon {
         @apply size-5 text-gray-400 dark:text-gray-500;

packages/support/resources/css/components/toggle.css

@@ -6,10 +6,10 @@
     }
 
     &.fi-color {
-        @apply bg-color-600;
+        @apply bg-(--bg) dark:bg-(--dark-bg);
 
         & .fi-icon {
-            @apply text-color-600;
+            @apply text-(--text);
         }
     }
 

packages/support/resources/views/components/toggle.blade.php

@@ -1,4 +1,5 @@
 @php
+    use Filament\Support\View\Components\Toggle;
     use Illuminate\Support\Arr;
 @endphp
 
@@ -17,31 +18,12 @@
     x-bind:class="
         state ? @js(Arr::toCssClasses([
                     'fi-toggle-on',
-                    match ($onColor) {
-                        null, 'gray' => null,
-                        default => 'fi-color',
-                    },
-                    is_string($onColor) ? "fi-color-{$onColor}" : null,
+                    ...\Filament\Support\get_component_color_classes(Toggle::class, $onColor),
                 ])) : @js(Arr::toCssClasses([
                             'fi-toggle-off',
-                            match ($offColor) {
-                                null, 'gray' => null,
-                                default => 'fi-color bg-color-600',
-                            },
-                            is_string($offColor) ? "fi-color-{$offColor}" : null,
+                            ...\Filament\Support\get_component_color_classes(Toggle::class, $offColor),
                         ]))
     "
-    x-bind:style="
-        state ? @js(\Filament\Support\get_color_css_variables(
-                    $onColor,
-                    shades: [600],
-                    alias: 'toggle.on',
-                )) : @js(\Filament\Support\get_color_css_variables(
-                            $offColor,
-                            shades: [600],
-                            alias: 'toggle.off',
-                        ))
-    "
     {{
         $attributes
             ->merge([
@@ -57,9 +39,12 @@
         </div>
 
         <div aria-hidden="true">
-            {{ \Filament\Support\generate_icon_html(
-                $onIcon,
-                attributes: (new \Illuminate\View\ComponentattributeBag())->merge(['x-cloak' => true], escape: false)), }}
+            {{
+                \Filament\Support\generate_icon_html(
+                    $onIcon,
+                    attributes: (new \Illuminate\View\ComponentattributeBag)->merge(['x-cloak' => true], escape: false),
+                )
+            }}
         </div>
     </div>
 </button>

packages/support/src/Colors/Color.php

@@ -449,7 +449,7 @@ public static function isTextContrastRatioAccessible(string $color1, string $col
         return static::calculateContrastRatio($color1, $color2) >= 4.5;
     }
 
-    public static function isIconContrastRatioAccessible(string $color1, string $color2): bool
+    public static function isNonTextContrastRatioAccessible(string $color1, string $color2): bool
     {
         return static::calculateContrastRatio($color1, $color2) >= 3;
     }

packages/support/src/Colors/ColorManager.php

@@ -151,8 +151,12 @@ public function getRemovedShades(string $alias): ?array
      * @param  class-string<HasColor> | HasColor  $component
      * @return array<string>
      */
-    public function getComponentClasses(string | HasColor $component, string $color): array
+    public function getComponentClasses(string | HasColor $component, ?string $color): array
     {
+        if (blank($color)) {
+            return [];
+        }
+
         $component = is_string($component) ? app($component) : $component;
         $componentKey = serialize($component);
 

packages/support/src/Facades/FilamentColor.php

@@ -12,7 +12,7 @@
  * @method static array<int | string> | null getAddedShades(string $alias)
  * @method static array<string, array<int | string, string | int>> getColors()
  * @method static ?array<int | string, string | int> getColor(string $color)
- * @method static array<string> getComponentClasses(class-string<HasColor> | HasColor $component, string $color)
+ * @method static array<string> getComponentClasses(class-string<HasColor> | HasColor $component, ?string $color)
  * @method static array<int | string> | null getOverridingShades(string $alias)
  * @method static array<int | string> | null getRemovedShades(string $alias)
  * @method static void overrideShades(string $alias, array<int | string> $shades)

packages/support/src/View/Components/Badge.php

@@ -18,7 +18,7 @@ public function getColorClasses(array $color): array
         ksort($color);
 
         foreach (array_keys($color) as $shade) {
-            if (Color::isIconContrastRatioAccessible($color[50], $color[$shade])) {
+            if (Color::isNonTextContrastRatioAccessible($color[50], $color[$shade])) {
                 $text = $shade;
 
                 break;
@@ -37,7 +37,7 @@ public function getColorClasses(array $color): array
                 continue;
             }
 
-            if (Color::isIconContrastRatioAccessible($lightestDarkGrayBg, $color[$shade])) {
+            if (Color::isNonTextContrastRatioAccessible($lightestDarkGrayBg, $color[$shade])) {
                 $darkText = $shade;
 
                 break;

packages/support/src/View/Components/Dropdown/Item/Icon.php

@@ -2,7 +2,10 @@
 
 namespace Filament\Support\View\Components\Dropdown\Item;
 
-class Icon
+use Filament\Support\View\Components\Contracts\HasColor;
+use Filament\Support\View\Components\Contracts\HasDefaultGrayColor;
+
+class Icon implements HasColor, HasDefaultGrayColor
 {
     /**
      * @param  array<int, string>  $color

packages/support/src/View/Components/IconButton.php

@@ -29,7 +29,7 @@ public function getColorClasses(array $color): array
         $darkestLightGrayBg = $gray[50];
 
         foreach (array_keys($color) as $shade) {
-            if (Color::isIconContrastRatioAccessible($darkestLightGrayBg, $color[$shade])) {
+            if (Color::isNonTextContrastRatioAccessible($darkestLightGrayBg, $color[$shade])) {
                 if ($shade > 500) {
                     // Shades above 500 are likely to be quite dark, so instead of lightening the button
                     // when it is hovered, we darken it.
@@ -56,7 +56,7 @@ public function getColorClasses(array $color): array
                 continue;
             }
 
-            if (Color::isIconContrastRatioAccessible($lightestDarkGrayBg, $color[$shade])) {
+            if (Color::isNonTextContrastRatioAccessible($lightestDarkGrayBg, $color[$shade])) {
                 $darkText = $shade;
                 $darkHoverText = $shade - 100;
 

packages/support/src/View/Components/Toggle.php

@@ -0,0 +1,78 @@
+<?php
+
+namespace Filament\Support\View\Components;
+
+use Filament\Support\Colors\Color;
+use Filament\Support\Facades\FilamentColor;
+use Filament\Support\View\Components\Contracts\HasColor;
+use Filament\Support\View\Components\Contracts\HasDefaultGrayColor;
+
+class Toggle implements HasColor, HasDefaultGrayColor
+{
+    /**
+     * @param  array<int, string>  $color
+     * @return array<string>
+     */
+    public function getColorClasses(array $color): array
+    {
+        $gray = FilamentColor::getColor('gray');
+
+        ksort($color);
+
+        /**
+         * Since the toggle doesn't contain text, the icon may be imperative for the user to understand the
+         * button's state. Therefore, the color should contrast at least 3:1 with the background to
+         * remain compliant with WCAG AA standards.
+         *
+         * @ref https://www.w3.org/WAI/WCAG21/Understanding/non-bg-contrast.html
+         */
+        foreach (array_keys($color) as $shade) {
+            if (Color::isNonTextContrastRatioAccessible('oklch(1 0 0)', $color[$shade])) {
+                $text = $shade;
+
+                break;
+            }
+        }
+
+        $text ??= 900;
+
+        /**
+         * Since the toggle doesn't contain text, the color is imperative for the user to understand the
+         * button's state. Therefore, the color should contrast at least 3:1 with the background to
+         * remain compliant with WCAG AA standards.
+         *
+         * @ref https://www.w3.org/WAI/WCAG21/Understanding/non-bg-contrast.html
+         */
+        $darkestLightGrayBg = $gray[50];
+
+        foreach (array_keys($color) as $shade) {
+            if (Color::isNonTextContrastRatioAccessible($darkestLightGrayBg, $color[$shade])) {
+                $bg = $shade;
+
+                break;
+            }
+        }
+
+        $bg ??= 900;
+
+        krsort($color);
+
+        $lightestDarkGrayBg = $gray[700];
+
+        foreach (array_keys($color) as $shade) {
+            if (Color::isNonTextContrastRatioAccessible($lightestDarkGrayBg, $color[$shade])) {
+                $darkBg = $shade;
+
+                break;
+            }
+        }
+
+        $darkBg ??= 200;
+
+        return [
+            "fi-bg-color-{$bg}",
+            "fi-text-color-{$text}",
+            "dark:fi-bg-color-{$darkBg}",
+        ];
+    }
+}

packages/support/src/helpers.php

@@ -67,8 +67,12 @@ function locale_has_pluralization(): bool
      * @param  class-string<HasColor>  $component
      * @return array<string>
      */
-    function get_component_color_classes(string | HasColor $component, string $color): array
+    function get_component_color_classes(string | HasColor $component, ?string $color): array
     {
+        if (blank($color)) {
+            return [];
+        }
+
         return FilamentColor::getComponentClasses($component, $color);
     }
 }

packages/tables/src/Columns/ToggleColumn.php

@@ -7,14 +7,15 @@
 use Filament\Support\Components\Contracts\HasEmbeddedView;
 use Filament\Support\Facades\FilamentAsset;
 use Filament\Support\Facades\FilamentView;
+use Filament\Support\View\Components\Toggle;
 use Filament\Tables\Columns\Contracts\Editable;
 use Filament\Tables\Table;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Js;
 use Illuminate\View\ComponentAttributeBag;
 
 use function Filament\Support\generate_icon_html;
-use function Filament\Support\get_color_css_variables;
+use function Filament\Support\get_component_color_classes;
 
 class ToggleColumn extends Column implements Editable, HasEmbeddedView
 {
@@ -85,28 +86,11 @@ public function toEmbeddedHtml(): string
                 x-on:click="if (! $el.hasAttribute('disabled')) state = ! state"
                 x-bind:class="state ? '<?= Arr::toCssClasses([
                     'fi-toggle-on',
-                    match ($onColor) {
-                        'gray' => null,
-                        default => 'fi-color',
-                    },
-                    is_string($onColor) ? "fi-color-{$onColor}" : null,
+                    ...get_component_color_classes(Toggle::class, $onColor),
                 ]) ?>' : '<?= Arr::toCssClasses([
                     'fi-toggle-off',
-                    match ($offColor) {
-                        'gray' => null,
-                        default => 'fi-color bg-color-600',
-                    },
-                    is_string($offColor) ? "fi-color-{$offColor}" : null,
+                    ...get_component_color_classes(Toggle::class, $offColor),
                 ]) ?>'"
-                x-bind:style="state ? '<?= get_color_css_variables(
-                    $onColor,
-                    shades: [600],
-                    alias: 'toggle.on',
-                ) ?>' : '<?= get_color_css_variables(
-                    $offColor,
-                    shades: [600],
-                    alias: 'toggle.off',
-                ) ?>'"
                 x-tooltip="
                     error === undefined
                         ? false

tests/.pest/snapshots/src/Support/ColorTest/it_generates_component_classes_with_data_set__dataset__dropdown_item_icon______gray______Filament_Support_View_Compone___m_Icon____gray__.snap

@@ -1,4 +1 @@
-[
-    "fi-color",
-    "fi-color-gray"
-]
+[]

tests/.pest/snapshots/src/Support/ColorTest/it_generates_component_classes_with_data_set__dataset__toggle______danger______Filament_Support_View_Compone___Toggle____danger__.snap

@@ -0,0 +1,7 @@
+[
+    "fi-color",
+    "fi-color-danger",
+    "fi-bg-color-500",
+    "fi-text-color-500",
+    "dark:fi-bg-color-400"
+]

tests/.pest/snapshots/src/Support/ColorTest/it_generates_component_classes_with_data_set__dataset__toggle______gray______Filament_Support_View_Compone___Toggle____gray__.snap

@@ -0,0 +1 @@
+[]

tests/.pest/snapshots/src/Support/ColorTest/it_generates_component_classes_with_data_set__dataset__toggle______info______Filament_Support_View_Compone___Toggle____info__.snap

@@ -0,0 +1,7 @@
+[
+    "fi-color",
+    "fi-color-info",
+    "fi-bg-color-500",
+    "fi-text-color-500",
+    "dark:fi-bg-color-400"
+]

tests/.pest/snapshots/src/Support/ColorTest/it_generates_component_classes_with_data_set__dataset__toggle______primary______Filament_Support_View_Compone___Toggle____primary__.snap

@@ -0,0 +1,7 @@
+[
+    "fi-color",
+    "fi-color-primary",
+    "fi-bg-color-600",
+    "fi-text-color-600",
+    "dark:fi-bg-color-600"
+]

tests/.pest/snapshots/src/Support/ColorTest/it_generates_component_classes_with_data_set__dataset__toggle______success______Filament_Support_View_Compone___Toggle____success__.snap

@@ -0,0 +1,7 @@
+[
+    "fi-color",
+    "fi-color-success",
+    "fi-bg-color-600",
+    "fi-text-color-600",
+    "dark:fi-bg-color-600"
+]

tests/.pest/snapshots/src/Support/ColorTest/it_generates_component_classes_with_data_set__dataset__toggle______warning______Filament_Support_View_Compone___Toggle____warning__.snap

@@ -0,0 +1,7 @@
+[
+    "fi-color",
+    "fi-color-warning",
+    "fi-bg-color-600",
+    "fi-text-color-600",
+    "dark:fi-bg-color-600"
+]

tests/src/Support/ColorTest.php

@@ -11,6 +11,7 @@
 use Filament\Support\View\Components\Dropdown\Item\Icon as DropdownItemIcon;
 use Filament\Support\View\Components\IconButton;
 use Filament\Support\View\Components\Link;
+use Filament\Support\View\Components\Toggle;
 use Filament\Tests\TestCase;
 use Illuminate\Support\Str;
 
@@ -62,5 +63,6 @@
         'dropdown item' => DropdownItem::class,
         'icon button' => IconButton::class,
         'link' => Link::class,
+        'toggle' => Toggle::class,
     ])
     ->with(fn (): array => array_keys(app(ColorManager::class)->getColors()));