Extract core styles to plugin or stylesheet

[zepfietje]

Initial pass to remove Tailwind classes from views into CSS files with @apply (CSS files could be restructured, moved, or imported differently to how they are now, the work in this stage is just to create the files)

• actions
• forms
• infolists
• notifications
• panels
• schema
• spark-billing-provider
• spatie-laravel-google-fonts-plugin
• spatie-laravel-media-library-plugin
• spatie-laravel-settings-plugin
• spatie-laravel-tags-plugin
• spatie-laravel-translatable-plugin
• support
• tables
• upgrade
• widgets

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[zepfietje]

@danharrin you can document your experiment findings here if you like.

[zepfietje]

CSS layers will make theming much easier already: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer.

[pxlrbt]

Just wanted to throw in, that we should consider introducing more CSS vars for everything like colors to make stuff more customisable.

[zepfietje]

Could you clarify what you mean specifically, @pxlrbt?

[pxlrbt]

What I mean is, that it would be good if it's possible to extract some often used configs to CSS vars, to allow easier customization. Colors would probably be the easiest. Other parts may be trickier. Also determining what might be useful could be tricky 😅

--sidebar-background
--sidebar-color
--border-radius

[zepfietje]

Naming design tokens is definitely tricky. Especially when keeping extensibility in mind.

[zepfietje]

Just wanted to mention this doesn't solve the table performance issue: #9304 (comment).