diff --git a/packages/forms/resources/views/components/field-wrapper/hint.blade.php b/packages/forms/resources/views/components/field-wrapper/hint.blade.php
index 7cb4a8f165..bf03151ba0 100644
--- a/packages/forms/resources/views/components/field-wrapper/hint.blade.php
+++ b/packages/forms/resources/views/components/field-wrapper/hint.blade.php
@@ -7,24 +7,30 @@
 
 <div
     {{
-        $attributes
-            ->class([
-                'fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm',
+        $attributes->class([
+            'fi-fo-field-wrp-hint flex items-center gap-x-3 text-sm',
+        ])
+    }}
+>
+    @if (! \Filament\Support\is_slot_empty($slot))
+        <span
+            @class([
+                'fi-fo-field-wrp-hint-label',
                 match ($color) {
                     'gray' => 'fi-color-gray text-gray-500',
                     default => 'fi-color-custom text-custom-600 dark:text-custom-400',
                 },
             ])
-            ->style([
+            @style([
                 \Filament\Support\get_color_css_variables(
                     $color,
-                    shades: [400, 500, 600],
+                    shades: [400, 600],
+                    alias: 'forms::components.field-wrapper.hint.label',
                 ),
             ])
-    }}
->
-    @if (! \Filament\Support\is_slot_empty($slot))
-        {{ $slot }}
+        >
+            {{ $slot }}
+        </span>
     @endif
 
     @if ($icon)
@@ -39,6 +45,13 @@
                     default => 'text-custom-500 dark:text-custom-400',
                 },
             ])
+            @style([
+                \Filament\Support\get_color_css_variables(
+                    $color,
+                    shades: [400, 500],
+                    alias: 'forms::components.field-wrapper.hint.icon',
+                ),
+            ])
         />
     @endif
 
diff --git a/packages/forms/resources/views/components/toggle.blade.php b/packages/forms/resources/views/components/toggle.blade.php
index 5a8faeb709..5c92ebebb9 100644
--- a/packages/forms/resources/views/components/toggle.blade.php
+++ b/packages/forms/resources/views/components/toggle.blade.php
@@ -33,12 +33,14 @@
                         \Filament\Support\get_color_css_variables(
                             $onColor,
                             shades: [600],
+                            alias: 'forms::components.toggle.on',
                         )
                     }}'
                     : '{{
                         \Filament\Support\get_color_css_variables(
                             $offColor,
                             shades: [600],
+                            alias: 'forms::components.toggle.off',
                         )
                     }}'
             "
diff --git a/packages/infolists/resources/views/components/entry-wrapper/hint.blade.php b/packages/infolists/resources/views/components/entry-wrapper/hint.blade.php
index 00e51888d9..4554c94b61 100644
--- a/packages/infolists/resources/views/components/entry-wrapper/hint.blade.php
+++ b/packages/infolists/resources/views/components/entry-wrapper/hint.blade.php
@@ -7,24 +7,30 @@
 
 <div
     {{
-        $attributes
-            ->class([
-                'fi-in-entry-wrp-hint flex items-center gap-x-3 text-sm',
+        $attributes->class([
+            'fi-in-entry-wrp-hint flex items-center gap-x-3 text-sm',
+        ])
+    }}
+>
+    @if (! \Filament\Support\is_slot_empty($slot))
+        <span
+            @class([
+                'fi-in-entry-wrp-hint-label',
                 match ($color) {
                     'gray' => 'fi-color-gray text-gray-500',
                     default => 'fi-color-custom text-custom-600 dark:text-custom-400',
                 },
             ])
-            ->style([
+            @style([
                 \Filament\Support\get_color_css_variables(
                     $color,
-                    shades: [400, 500, 600],
+                    shades: [400, 600],
+                    alias: 'infolists::components.entry-wrapper.hint.label',
                 ),
             ])
-    }}
->
-    @if (! \Filament\Support\is_slot_empty($slot))
-        {{ $slot }}
+        >
+            {{ $slot }}
+        </span>
     @endif
 
     @if ($icon)
@@ -39,6 +45,13 @@
                     default => 'text-custom-500 dark:text-custom-400',
                 },
             ])
+            @style([
+                \Filament\Support\get_color_css_variables(
+                    $color,
+                    shades: [400, 500],
+                    alias: 'infolists::components.entry-wrapper.hint.icon',
+                ),
+            ])
         />
     @endif
 
diff --git a/packages/infolists/resources/views/components/icon-entry.blade.php b/packages/infolists/resources/views/components/icon-entry.blade.php
index cac1811721..9628a495c6 100644
--- a/packages/infolists/resources/views/components/icon-entry.blade.php
+++ b/packages/infolists/resources/views/components/icon-entry.blade.php
@@ -42,6 +42,7 @@
                             \Filament\Support\get_color_css_variables(
                                 $color,
                                 shades: [400, 500],
+                                alias: 'infolists::components.icon-entry.item',
                             ) => $color !== 'gray',
                         ])
                     />
diff --git a/packages/infolists/resources/views/components/text-entry.blade.php b/packages/infolists/resources/views/components/text-entry.blade.php
index 509726dd0a..46295238ed 100644
--- a/packages/infolists/resources/views/components/text-entry.blade.php
+++ b/packages/infolists/resources/views/components/text-entry.blade.php
@@ -98,6 +98,7 @@
                                     \Filament\Support\get_color_css_variables(
                                         $iconColor,
                                         shades: [500],
+                                        alias: 'infolists::components.text-entry.item.icon',
                                     ) => $iconColor !== 'gray',
                                 ]);
                             @endphp
@@ -162,6 +163,7 @@
                                             \Filament\Support\get_color_css_variables(
                                                 $color,
                                                 shades: [400, 600],
+                                                alias: 'infolists::components.text-entry.item',
                                             ) => ! in_array($color, [null, 'gray']),
                                         ])
                                     >
diff --git a/packages/notifications/resources/views/components/icon.blade.php b/packages/notifications/resources/views/components/icon.blade.php
index 1f0e425fe6..0c8428e695 100644
--- a/packages/notifications/resources/views/components/icon.blade.php
+++ b/packages/notifications/resources/views/components/icon.blade.php
@@ -29,6 +29,7 @@
                 \Filament\Support\get_color_css_variables(
                     $color,
                     shades: [400],
+                    alias: 'notifications::notification.icon',
                 ),
             ])
     "
diff --git a/packages/notifications/resources/views/notification.blade.php b/packages/notifications/resources/views/notification.blade.php
index 362896c5d2..d101107dd4 100644
--- a/packages/notifications/resources/views/notification.blade.php
+++ b/packages/notifications/resources/views/notification.blade.php
@@ -49,6 +49,7 @@
         \Filament\Support\get_color_css_variables(
             $color,
             shades: [50, 400, 600],
+            alias: 'notifications::notification',
         ) => ! ($isInline || $color === 'gray'),
     ])
 >
diff --git a/packages/support/resources/views/components/badge.blade.php b/packages/support/resources/views/components/badge.blade.php
index d7bedaa92c..e1836d2263 100644
--- a/packages/support/resources/views/components/badge.blade.php
+++ b/packages/support/resources/views/components/badge.blade.php
@@ -52,6 +52,14 @@
         },
     ]);
 
+    $iconStyles = \Illuminate\Support\Arr::toCssStyles([
+        \Filament\Support\get_color_css_variables(
+            $color,
+            shades: [500],
+            alias: 'badge.icon',
+        ) => $color !== 'gray',
+    ]);
+
     $wireTarget = $loadingIndicator ? $attributes->whereStartsWith(['wire:target', 'wire:click'])->filter(fn ($value): bool => filled($value))->first() : null;
 
     $hasLoadingIndicator = filled($wireTarget) || ($type === 'submit' && filled($form));
@@ -108,8 +116,6 @@
                         50,
                         400,
                         600,
-                        ...($icon || $hasLoadingIndicator) ? [500] : [],
-                        ...$isDeletable ? [300, 700] : [],
                     ],
                     alias: 'badge',
                 ) => $color !== 'gray',
@@ -127,7 +133,9 @@
                             'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
                             'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : null,
                         ])
-                    )->class([$iconClasses])
+                    )
+                        ->class([$iconClasses])
+                        ->style([$iconStyles])
                 "
             />
         @endif
@@ -140,7 +148,9 @@
                             'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
                             'wire:target' => $loadingIndicatorTarget,
                         ])
-                    )->class([$iconClasses])
+                    )
+                        ->class([$iconClasses])
+                        ->style([$iconStyles])
                 "
             />
         @endif
@@ -166,6 +176,13 @@
                             default => 'text-custom-700/50 hover:text-custom-700/75 focus-visible:text-custom-700/75 dark:text-custom-300/50 dark:hover:text-custom-300/75 dark:focus-visible:text-custom-300/75',
                         },
                     ])
+                    ->style([
+                        \Filament\Support\get_color_css_variables(
+                            $color,
+                            shades: [300, 700],
+                            alias: 'badge.delete-button',
+                        ) => $color !== 'gray',
+                    ])
             }}
         >
             <x-filament::icon
@@ -191,7 +208,9 @@
                             'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
                             'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : null,
                         ])
-                    )->class([$iconClasses])
+                    )
+                        ->class([$iconClasses])
+                        ->style([$iconStyles])
                 "
             />
         @endif
@@ -204,7 +223,9 @@
                             'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
                             'wire:target' => $loadingIndicatorTarget,
                         ])
-                    )->class([$iconClasses])
+                    )
+                        ->class([$iconClasses])
+                        ->style([$iconStyles])
                 "
             />
         @endif
diff --git a/packages/support/resources/views/components/dropdown/header.blade.php b/packages/support/resources/views/components/dropdown/header.blade.php
index b7498da8d5..7a47724df5 100644
--- a/packages/support/resources/views/components/dropdown/header.blade.php
+++ b/packages/support/resources/views/components/dropdown/header.blade.php
@@ -21,16 +21,6 @@
                 // @deprecated `fi-dropdown-header-color-*` has been replaced by `fi-color-gray` and `fi-color-custom`.
                 is_string($color) ? "fi-dropdown-header-color-{$color}" : null,
             ])
-            ->style([
-                \Filament\Support\get_color_css_variables(
-                    $color,
-                    shades: [
-                        400,
-                        ...(filled($icon) ? [500] : []),
-                        600,
-                    ],
-                ) => $color !== 'gray',
-            ])
     }}
 >
     @if (filled($icon))
@@ -49,6 +39,13 @@
                     default => 'text-custom-500 dark:text-custom-400',
                 },
             ])
+            @style([
+                \Filament\Support\get_color_css_variables(
+                    $color,
+                    shades: [400, 500],
+                    alias: 'dropdown.header.icon',
+                ) => $color !== 'gray',
+            ])
         />
     @endif
 
@@ -60,6 +57,13 @@
                 default => 'text-custom-600 dark:text-custom-400',
             },
         ])
+        @style([
+            \Filament\Support\get_color_css_variables(
+                $color,
+                shades: [400, 600],
+                alias: 'dropdown.header.label',
+            ) => $color !== 'gray',
+        ])
     >
         {{ $slot }}
     </span>
diff --git a/packages/support/resources/views/components/dropdown/list/item.blade.php b/packages/support/resources/views/components/dropdown/list/item.blade.php
index 93d33b2f90..35919af758 100644
--- a/packages/support/resources/views/components/dropdown/list/item.blade.php
+++ b/packages/support/resources/views/components/dropdown/list/item.blade.php
@@ -38,7 +38,8 @@
     $buttonStyles = \Illuminate\Support\Arr::toCssStyles([
         \Filament\Support\get_color_css_variables(
             $color,
-            shades: [50, 400, 500, 600],
+            shades: [50, 400],
+            alias: 'dropdown.list.item',
         ) => $color !== 'gray',
     ]);
 
@@ -56,6 +57,14 @@
         },
     ]);
 
+    $iconStyles = \Illuminate\Support\Arr::toCssStyles([
+        \Filament\Support\get_color_css_variables(
+            $color,
+            shades: [400, 500],
+            alias: 'dropdown.list.item.icon',
+        ) => $color !== 'gray',
+    ]);
+
     $imageClasses = 'fi-dropdown-list-item-image h-5 w-5 rounded-full bg-cover bg-center';
 
     $labelClasses = \Illuminate\Support\Arr::toCssClasses([
@@ -66,6 +75,14 @@
         },
     ]);
 
+    $labelStyles = \Illuminate\Support\Arr::toCssStyles([
+        \Filament\Support\get_color_css_variables(
+            $color,
+            shades: [400, 600],
+            alias: 'dropdown.list.item.label',
+        ) => $color !== 'gray',
+    ]);
+
     $wireTarget = $loadingIndicator ? $attributes->whereStartsWith(['wire:target', 'wire:click'])->filter(fn ($value): bool => filled($value))->first() : null;
 
     $hasLoadingIndicator = filled($wireTarget);
@@ -113,7 +130,9 @@
                             'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
                             'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : null,
                         ])
-                    )->class([$iconClasses])
+                    )
+                        ->class([$iconClasses])
+                        ->style([$iconStyles])
                 "
             />
         @endif
@@ -133,12 +152,14 @@
                             'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => '',
                             'wire:target' => $loadingIndicatorTarget,
                         ])
-                    )->class([$iconClasses])
+                    )
+                        ->class([$iconClasses])
+                        ->style([$iconStyles])
                 "
             />
         @endif
 
-        <span class="{{ $labelClasses }}">
+        <span class="{{ $labelClasses }}" style="{{ $labelStyles }}">
             {{ $slot }}
         </span>
 
@@ -174,6 +195,7 @@
                 :alias="$iconAlias"
                 :icon="$icon"
                 :class="$iconClasses"
+                :style="$iconStyles"
             />
         @endif
 
@@ -184,7 +206,7 @@
             ></div>
         @endif
 
-        <span class="{{ $labelClasses }}">
+        <span class="{{ $labelClasses }}" style="{{ $labelStyles }}">
             {{ $slot }}
         </span>
 
@@ -226,10 +248,11 @@
                     :alias="$iconAlias"
                     :icon="$icon"
                     :class="$iconClasses"
+                    :style="$iconStyles"
                 />
             @endif
 
-            <span class="{{ $labelClasses }}">
+            <span class="{{ $labelClasses }}" style="{{ $labelStyles }}">
                 {{ $slot }}
             </span>
 
diff --git a/packages/support/resources/views/components/icon-button.blade.php b/packages/support/resources/views/components/icon-button.blade.php
index 5fe8bcfe53..f2a668eb20 100644
--- a/packages/support/resources/views/components/icon-button.blade.php
+++ b/packages/support/resources/views/components/icon-button.blade.php
@@ -92,6 +92,7 @@
     $buttonStyles = \Filament\Support\get_color_css_variables(
         $color,
         shades: [300, 400, 500, 600],
+        alias: 'icon-button',
     );
 
     $iconClasses = \Illuminate\Support\Arr::toCssClasses([
diff --git a/packages/support/resources/views/components/input/wrapper.blade.php b/packages/support/resources/views/components/input/wrapper.blade.php
index adc5f66899..c6db9fad32 100644
--- a/packages/support/resources/views/components/input/wrapper.blade.php
+++ b/packages/support/resources/views/components/input/wrapper.blade.php
@@ -57,8 +57,8 @@
     $getIconStyles = fn (string | array $color = 'gray'): string => \Illuminate\Support\Arr::toCssStyles([
         \Filament\Support\get_color_css_variables(
             $color,
-            shades: [400, 500],
-            alias: 'input-wrapper-icon',
+            shades: [500],
+            alias: 'input-wrapper.icon',
         ) => $color !== 'gray',
     ]);
 
diff --git a/packages/support/resources/views/components/link.blade.php b/packages/support/resources/views/components/link.blade.php
index c881a79800..1e1ceb3898 100644
--- a/packages/support/resources/views/components/link.blade.php
+++ b/packages/support/resources/views/components/link.blade.php
@@ -43,30 +43,47 @@
     }
 
     $linkClasses = \Illuminate\Support\Arr::toCssClasses([
-        'fi-link relative inline-flex items-center justify-center font-semibold outline-none transition duration-75 hover:underline focus-visible:underline',
+        'fi-link relative inline-flex items-center justify-center outline-none transition duration-75 hover:underline focus-visible:underline',
         'pe-4' => $badge,
         'pointer-events-none opacity-70' => $disabled,
         "fi-size-{$size->value}" => $size instanceof ActionSize,
         // @deprecated `fi-link-size-*` has been replaced by `fi-size-*`.
         "fi-link-size-{$size->value}" => $size instanceof ActionSize,
         match ($size) {
-            ActionSize::ExtraSmall => 'gap-1 text-xs',
-            ActionSize::Small => 'gap-1 text-sm',
-            ActionSize::Medium => 'gap-1.5 text-sm',
-            ActionSize::Large => 'gap-1.5 text-sm',
-            ActionSize::ExtraLarge => 'gap-1.5 text-sm',
+            ActionSize::ExtraSmall => 'gap-1',
+            ActionSize::Small => 'gap-1',
+            ActionSize::Medium => 'gap-1.5',
+            ActionSize::Large => 'gap-1.5',
+            ActionSize::ExtraLarge => 'gap-1.5',
             default => $size,
         },
         match ($color) {
-            'gray' => 'fi-color-gray text-gray-700 dark:text-gray-200',
-            default => 'fi-color-custom text-custom-600 dark:text-custom-400',
+            'gray' => 'fi-color-gray',
+            default => 'fi-color-custom',
         },
     ]);
 
-    $linkStyles = \Illuminate\Support\Arr::toCssStyles([
+    $labelClasses = \Illuminate\Support\Arr::toCssClasses([
+        'font-semibold',
+        match ($size) {
+            ActionSize::ExtraSmall => 'text-xs',
+            ActionSize::Small => 'text-sm',
+            ActionSize::Medium => 'text-sm',
+            ActionSize::Large => 'text-sm',
+            ActionSize::ExtraLarge => 'text-sm',
+            default => null,
+        },
+        match ($color) {
+            'gray' => 'text-gray-700 dark:text-gray-200',
+            default => 'text-custom-600 dark:text-custom-400',
+        },
+    ]);
+
+    $labelStyles = \Illuminate\Support\Arr::toCssStyles([
         \Filament\Support\get_color_css_variables(
             $color,
-            shades: [300, 400, 500, 600],
+            shades: [400, 600],
+            alias: 'link.label',
         ) => $color !== 'gray',
     ]);
 
@@ -87,7 +104,8 @@
     $iconStyles = \Illuminate\Support\Arr::toCssStyles([
         \Filament\Support\get_color_css_variables(
             $color,
-            shades: [500],
+            shades: [400, 600],
+            alias: 'link.icon',
         ) => $color !== 'gray',
     ]);
 
@@ -134,7 +152,9 @@
             />
         @endif
 
-        {{ $slot }}
+        <span class="{{ $labelClasses }}" style="{{ $labelStyles }}">
+            {{ $slot }}
+        </span>
 
         @if ($icon && $iconPosition === IconPosition::After)
             <x-filament::icon
@@ -210,7 +230,9 @@
             @endif
         @endif
 
-        {{ $slot }}
+        <span class="{{ $labelClasses }}" style="{{ $labelStyles }}">
+            {{ $slot }}
+        </span>
 
         @if ($iconPosition === IconPosition::After)
             @if ($icon)
diff --git a/packages/support/resources/views/components/modal/index.blade.php b/packages/support/resources/views/components/modal/index.blade.php
index 8d25f5a352..cdc830f11f 100644
--- a/packages/support/resources/views/components/modal/index.blade.php
+++ b/packages/support/resources/views/components/modal/index.blade.php
@@ -235,6 +235,7 @@
                                             \Filament\Support\get_color_css_variables(
                                                 $iconColor,
                                                 shades: [100, 400, 500, 600],
+                                                alias: 'modal.icon',
                                             ) => $iconColor !== 'gray',
                                         ])
                                     >
diff --git a/packages/support/resources/views/components/section/index.blade.php b/packages/support/resources/views/components/section/index.blade.php
index 5cbd2a51a5..dac41ec6df 100644
--- a/packages/support/resources/views/components/section/index.blade.php
+++ b/packages/support/resources/views/components/section/index.blade.php
@@ -103,6 +103,7 @@
                         \Filament\Support\get_color_css_variables(
                             $iconColor,
                             shades: [400, 500],
+                            alias: 'section.header.icon',
                         ) => $iconColor !== 'gray',
                     ])
                 />
diff --git a/packages/tables/resources/views/columns/icon-column.blade.php b/packages/tables/resources/views/columns/icon-column.blade.php
index e5ef038d74..36d6ce557a 100644
--- a/packages/tables/resources/views/columns/icon-column.blade.php
+++ b/packages/tables/resources/views/columns/icon-column.blade.php
@@ -43,6 +43,7 @@
                         \Filament\Support\get_color_css_variables(
                             $color,
                             shades: [400, 500],
+                            alias: 'tables::columns.icon-column.item',
                         ) => $color !== 'gray',
                     ])
                 />
diff --git a/packages/tables/resources/views/columns/summaries/icon-count.blade.php b/packages/tables/resources/views/columns/summaries/icon-count.blade.php
index aef33a41ec..a5222cf534 100644
--- a/packages/tables/resources/views/columns/summaries/icon-count.blade.php
+++ b/packages/tables/resources/views/columns/summaries/icon-count.blade.php
@@ -40,6 +40,7 @@
                                     \Filament\Support\get_color_css_variables(
                                         $color,
                                         shades: [400, 500],
+                                        alias: 'tables::columns.summaries.icon-count.icon',
                                     ) => $color !== 'gray',
                                 ])
                             />
diff --git a/packages/tables/resources/views/columns/text-column.blade.php b/packages/tables/resources/views/columns/text-column.blade.php
index 07091b2e30..b9f7799a66 100644
--- a/packages/tables/resources/views/columns/text-column.blade.php
+++ b/packages/tables/resources/views/columns/text-column.blade.php
@@ -94,6 +94,7 @@
                             \Filament\Support\get_color_css_variables(
                                 $iconColor,
                                 shades: [500],
+                                alias: 'tables::columns.text-column.item.icon',
                             ) => $iconColor !== 'gray',
                         ]);
                     @endphp
@@ -128,41 +129,11 @@
                                 @class([
                                     'fi-ta-text-item inline-flex items-center gap-1.5',
                                     'transition duration-75 hover:underline focus-visible:underline' => $url,
-                                    match ($size) {
-                                        TextColumnSize::ExtraSmall, 'xs' => 'text-xs',
-                                        TextColumnSize::Small, 'sm', null => 'text-sm',
-                                        TextColumnSize::Medium, 'base', 'md' => 'text-base',
-                                        TextColumnSize::Large, 'lg' => 'text-lg',
-                                        default => $size,
-                                    },
                                     match ($color) {
-                                        null => 'text-gray-950 dark:text-white',
-                                        'gray' => 'fi-color-gray text-gray-500 dark:text-gray-400',
-                                        default => 'fi-color-custom text-custom-600 dark:text-custom-400',
+                                        null => null,
+                                        'gray' => 'fi-color-gray',
+                                        default => 'fi-color-custom',
                                     },
-                                    match ($weight) {
-                                        FontWeight::Thin, 'thin' => 'font-thin',
-                                        FontWeight::ExtraLight, 'extralight' => 'font-extralight',
-                                        FontWeight::Light, 'light' => 'font-light',
-                                        FontWeight::Medium, 'medium' => 'font-medium',
-                                        FontWeight::SemiBold, 'semibold' => 'font-semibold',
-                                        FontWeight::Bold, 'bold' => 'font-bold',
-                                        FontWeight::ExtraBold, 'extrabold' => 'font-extrabold',
-                                        FontWeight::Black, 'black' => 'font-black',
-                                        default => $weight,
-                                    },
-                                    match ($fontFamily) {
-                                        FontFamily::Sans, 'sans' => 'font-sans',
-                                        FontFamily::Serif, 'serif' => 'font-serif',
-                                        FontFamily::Mono, 'mono' => 'font-mono',
-                                        default => $fontFamily,
-                                    },
-                                ])
-                                @style([
-                                    \Filament\Support\get_color_css_variables(
-                                        $color,
-                                        shades: [400, 600],
-                                    ) => ! in_array($color, [null, 'gray']),
                                 ])
                             >
                                 @if ($icon && in_array($iconPosition, [IconPosition::Before, 'before']))
@@ -173,9 +144,49 @@
                                     />
                                 @endif
 
-                                <div>
+                                <span
+                                    @class([
+                                        'fi-ta-text-item-label',
+                                        match ($size) {
+                                            TextColumnSize::ExtraSmall, 'xs' => 'text-xs',
+                                            TextColumnSize::Small, 'sm', null => 'text-sm',
+                                            TextColumnSize::Medium, 'base', 'md' => 'text-base',
+                                            TextColumnSize::Large, 'lg' => 'text-lg',
+                                            default => $size,
+                                        },
+                                        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',
+                                        },
+                                        match ($weight) {
+                                            FontWeight::Thin, 'thin' => 'font-thin',
+                                            FontWeight::ExtraLight, 'extralight' => 'font-extralight',
+                                            FontWeight::Light, 'light' => 'font-light',
+                                            FontWeight::Medium, 'medium' => 'font-medium',
+                                            FontWeight::SemiBold, 'semibold' => 'font-semibold',
+                                            FontWeight::Bold, 'bold' => 'font-bold',
+                                            FontWeight::ExtraBold, 'extrabold' => 'font-extrabold',
+                                            FontWeight::Black, 'black' => 'font-black',
+                                            default => $weight,
+                                        },
+                                        match ($fontFamily) {
+                                            FontFamily::Sans, 'sans' => 'font-sans',
+                                            FontFamily::Serif, 'serif' => 'font-serif',
+                                            FontFamily::Mono, 'mono' => 'font-mono',
+                                            default => $fontFamily,
+                                        },
+                                    ])
+                                    @style([
+                                        \Filament\Support\get_color_css_variables(
+                                            $color,
+                                            shades: [400, 600],
+                                            alias: 'tables::columns.text-column.item.label',
+                                        ) => ! in_array($color, [null, 'gray']),
+                                    ])
+                                >
                                     {{ $formattedState }}
-                                </div>
+                                </span>
 
                                 @if ($icon && in_array($iconPosition, [IconPosition::After, 'after']))
                                     <x-filament::icon
diff --git a/packages/tables/resources/views/columns/toggle-column.blade.php b/packages/tables/resources/views/columns/toggle-column.blade.php
index b5b3e997fe..e835652d5b 100644
--- a/packages/tables/resources/views/columns/toggle-column.blade.php
+++ b/packages/tables/resources/views/columns/toggle-column.blade.php
@@ -79,12 +79,14 @@
                         \Filament\Support\get_color_css_variables(
                             $onColor,
                             shades: [600],
+                            alias: 'tables::columns.toggle-column.on',
                         )
                     }}'
                     : '{{
                         \Filament\Support\get_color_css_variables(
                             $offColor,
                             shades: [600],
+                            alias: 'tables::columns.toggle-column.off',
                         )
                     }}'
             "
diff --git a/packages/widgets/resources/views/chart-widget.blade.php b/packages/widgets/resources/views/chart-widget.blade.php
index 5281df4abf..bda73fc13e 100644
--- a/packages/widgets/resources/views/chart-widget.blade.php
+++ b/packages/widgets/resources/views/chart-widget.blade.php
@@ -55,12 +55,6 @@
                         default => 'fi-color-custom',
                     },
                 ])
-                @style([
-                    \Filament\Support\get_color_css_variables(
-                        $color,
-                        shades: [50, 400, 500],
-                    ) => $color !== 'gray',
-                ])
             >
                 <canvas
                     x-ref="canvas"
@@ -77,6 +71,13 @@
                             default => 'text-custom-50 dark:text-custom-400/10',
                         },
                     ])
+                    @style([
+                        \Filament\Support\get_color_css_variables(
+                            $color,
+                            shades: [50, 400],
+                            alias: 'widgets::chart-widget.background',
+                        ) => $color !== 'gray',
+                    ])
                 ></span>
 
                 <span
@@ -87,6 +88,13 @@
                             default => 'text-custom-500 dark:text-custom-400',
                         },
                     ])
+                    @style([
+                        \Filament\Support\get_color_css_variables(
+                            $color,
+                            shades: [400, 500],
+                            alias: 'widgets::chart-widget.border',
+                        ) => $color !== 'gray',
+                    ])
                 ></span>
 
                 <span
diff --git a/packages/widgets/resources/views/stats-overview-widget/stat.blade.php b/packages/widgets/resources/views/stats-overview-widget/stat.blade.php
index dddcf3a908..de42ae835c 100644
--- a/packages/widgets/resources/views/stats-overview-widget/stat.blade.php
+++ b/packages/widgets/resources/views/stats-overview-widget/stat.blade.php
@@ -22,6 +22,7 @@
         \Filament\Support\get_color_css_variables(
             $descriptionColor,
             shades: [500],
+            alias: 'widgets::stats-overview-widget.stat.description.icon',
         ) => $descriptionColor !== 'gray',
     ]);
 @endphp
@@ -79,6 +80,7 @@
                         \Filament\Support\get_color_css_variables(
                             $descriptionColor,
                             shades: [400, 600],
+                            alias: 'widgets::stats-overview-widget.stat.description',
                         ) => $descriptionColor !== 'gray',
                     ])
                 >
@@ -122,6 +124,7 @@
                     \Filament\Support\get_color_css_variables(
                         $chartColor,
                         shades: [50, 400, 500],
+                        alias: 'widgets::stats-overview-widget.stat.chart',
                     ) => $chartColor !== 'gray',
                 ])
             >