opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-09-24 15:42:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add shade aliases

Browse Source
This commit is contained in:
Zep Fietje
2023-11-21 13:13:08 +00:00
parent 72b79c32b1
commit deb0d19cff
21 changed files with 228 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/forms/resources/views/components/field-wrapper/hint.blade.php
+22 -9
View File
@@ -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
packages/forms/resources/views/components/toggle.blade.php
+2
View File
@@ -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',
)
}}'
"
packages/infolists/resources/views/components/entry-wrapper/hint.blade.php
+22 -9
View File
@@ -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
packages/infolists/resources/views/components/icon-entry.blade.php
+1
View File
@@ -42,6 +42,7 @@
\Filament\Support\get_color_css_variables(
$color,
shades: [400, 500],
alias: 'infolists::components.icon-entry.item',
) => $color !== 'gray',
])
/>
packages/infolists/resources/views/components/text-entry.blade.php
+2
View File
@@ -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']),
])
>
packages/notifications/resources/views/components/icon.blade.php
+1
View File
@@ -29,6 +29,7 @@
\Filament\Support\get_color_css_variables(
$color,
shades: [400],
alias: 'notifications::notification.icon',
),
])
"
packages/notifications/resources/views/notification.blade.php
+1
View File
@@ -49,6 +49,7 @@
\Filament\Support\get_color_css_variables(
$color,
shades: [50, 400, 600],
alias: 'notifications::notification',
) => ! ($isInline || $color === 'gray'),
])
>
packages/support/resources/views/components/badge.blade.php
+27 -6
View File
@@ -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
packages/support/resources/views/components/dropdown/header.blade.php
+14 -10
View File
@@ -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>
packages/support/resources/views/components/dropdown/list/item.blade.php
+29 -6
View File
@@ -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>
packages/support/resources/views/components/icon-button.blade.php
+1
View File
@@ -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([
packages/support/resources/views/components/input/wrapper.blade.php
+2 -2
View File
@@ -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',
]);
packages/support/resources/views/components/link.blade.php
+35 -13
View File
@@ -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)
packages/support/resources/views/components/modal/index.blade.php
+1
View File
@@ -235,6 +235,7 @@
\Filament\Support\get_color_css_variables(
$iconColor,
shades: [100, 400, 500, 600],
alias: 'modal.icon',
) => $iconColor !== 'gray',
])
>
packages/support/resources/views/components/section/index.blade.php
+1
View File
@@ -103,6 +103,7 @@
\Filament\Support\get_color_css_variables(
$iconColor,
shades: [400, 500],
alias: 'section.header.icon',
) => $iconColor !== 'gray',
])
/>
packages/tables/resources/views/columns/icon-column.blade.php
+1
View File
@@ -43,6 +43,7 @@
\Filament\Support\get_color_css_variables(
$color,
shades: [400, 500],
alias: 'tables::columns.icon-column.item',
) => $color !== 'gray',
])
/>
packages/tables/resources/views/columns/summaries/icon-count.blade.php
+1
View File
@@ -40,6 +40,7 @@
\Filament\Support\get_color_css_variables(
$color,
shades: [400, 500],
alias: 'tables::columns.summaries.icon-count.icon',
) => $color !== 'gray',
])
/>
packages/tables/resources/views/columns/text-column.blade.php
+46 -35
View File
@@ -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
packages/tables/resources/views/columns/toggle-column.blade.php
+2
View File
@@ -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',
)
}}'
"
packages/widgets/resources/views/chart-widget.blade.php
+14 -6
View File
@@ -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
packages/widgets/resources/views/stats-overview-widget/stat.blade.php
+3
View File
@@ -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',
])
>