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

wip

Browse Source
This commit is contained in:
Adam Weston
2022-11-20 09:06:55 -05:00
parent d1fab41d52
commit 183a4b4ed8
14 changed files with 235 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/monorepo-split.yml
+1
View File
@@ -23,6 +23,7 @@ jobs:
- support
- tables
- widgets
- theme
steps:
- uses: actions/checkout@v2
- id: previous-tag
bootstrap/app.php
+2
View File
@@ -8,6 +8,7 @@ use Filament\SpatieLaravelTranslatablePluginServiceProvider;
use Filament\Support\SupportServiceProvider;
use Filament\Tables\TablesServiceProvider;
use Filament\Tests\AdminFilamentProvider;
use Filament\Theme\ThemeServiceProvider;
use Filament\Widgets\WidgetsServiceProvider;
use Livewire\LivewireServiceProvider;
use Orchestra\Testbench\Concerns\CreatesApplication;
@@ -34,5 +35,6 @@ $app->register(SpatieLaravelTranslatablePluginServiceProvider::class);
$app->register(SupportServiceProvider::class);
$app->register(TablesServiceProvider::class);
$app->register(WidgetsServiceProvider::class);
$app->register(ThemeServiceProvider::class);
return $app;
composer.json
+2 -1
View File
@@ -57,7 +57,8 @@
"Filament\\Tables\\": "packages/tables/src",
"Filament\\Tests\\": "tests/src",
"Filament\\Tests\\Database\\Factories\\": "tests/database/factories",
"Filament\\Widgets\\": "packages/widgets/src"
"Filament\\Widgets\\": "packages/widgets/src",
"Filament\\Theme\\": "packages/theme/src"
}
},
"config": {
composer.lock
Generated
+13 -13
View File
@@ -127,16 +127,16 @@
},
{
"name": "aws/aws-sdk-php",
"version": "3.245.1",
"version": "3.246.0",
"source": {
"type": "git",
"url": "https://github.com/aws/aws-sdk-php.git",
"reference": "abe53c3bcf351ffe1d8fa8784f1bf1dfbf35b5ab"
"reference": "90859d0b704d80a7f5b0743766562f956e43c79d"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/abe53c3bcf351ffe1d8fa8784f1bf1dfbf35b5ab",
"reference": "abe53c3bcf351ffe1d8fa8784f1bf1dfbf35b5ab",
"url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/90859d0b704d80a7f5b0743766562f956e43c79d",
"reference": "90859d0b704d80a7f5b0743766562f956e43c79d",
"shasum": ""
},
"require": {
@@ -215,9 +215,9 @@
"support": {
"forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
"issues": "https://github.com/aws/aws-sdk-php/issues",
"source": "https://github.com/aws/aws-sdk-php/tree/3.245.1"
"source": "https://github.com/aws/aws-sdk-php/tree/3.246.0"
},
"time": "2022-11-17T19:21:17+00:00"
"time": "2022-11-18T19:56:22+00:00"
},
{
"name": "blade-ui-kit/blade-heroicons",
@@ -8211,16 +8211,16 @@
},
{
"name": "spatie/laravel-tags",
"version": "4.3.4",
"version": "4.3.5",
"source": {
"type": "git",
"url": "https://github.com/spatie/laravel-tags.git",
"reference": "88d17ce5888b9db3fd19762b2860caa709005670"
"reference": "0f6b46f8af83dd9dac4df55f57009fd51d884d1c"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/spatie/laravel-tags/zipball/88d17ce5888b9db3fd19762b2860caa709005670",
"reference": "88d17ce5888b9db3fd19762b2860caa709005670",
"url": "https://api.github.com/repos/spatie/laravel-tags/zipball/0f6b46f8af83dd9dac4df55f57009fd51d884d1c",
"reference": "0f6b46f8af83dd9dac4df55f57009fd51d884d1c",
"shasum": ""
},
"require": {
@@ -8268,7 +8268,7 @@
],
"support": {
"issues": "https://github.com/spatie/laravel-tags/issues",
"source": "https://github.com/spatie/laravel-tags/tree/4.3.4"
"source": "https://github.com/spatie/laravel-tags/tree/4.3.5"
},
"funding": [
{
@@ -8276,7 +8276,7 @@
"type": "github"
}
],
"time": "2022-11-17T11:42:45+00:00"
"time": "2022-11-19T20:16:17+00:00"
},
{
"name": "spatie/laravel-translatable",
@@ -12713,5 +12713,5 @@
"composer-runtime-api": "^2.1"
},
"platform-dev": [],
"plugin-api-version": "2.2.0"
"plugin-api-version": "2.3.0"
}
package.json
+2
View File
@@ -3,9 +3,11 @@
"scripts": {
"dev:js": "node bin/build --watch",
"dev:css": "npx tailwindcss -c ./packages/app/tailwind.config.js -i ./packages/app/resources/css/index.css -o ./packages/app/dist/index.css --minify --watch",
"dev:theme": "npx tailwindcss -c ./packages/theme/tailwind.config.js -i ./packages/theme/resources/css/index.css -o packages/theme/resources/dist/filament-theme.css --minify --watch",
"dev": "npm-run-all --parallel dev:*",
"build:js": "node bin/build",
"build:css": "npx tailwindcss -c ./packages/app/tailwind.config.js -i ./packages/app/resources/css/index.css -o ./packages/app/dist/index.css --minify",
"build:theme": "npx tailwindcss -c ./packages/theme/tailwind.config.js -i ./packages/theme/resources/css/index.css -o packages/theme/resources/dist/filament-theme.css --minify",
"build": "npm-run-all build:*",
"prettier": "npx prettier --write '**/*.{css,js,yml}' '!**/dist' '!**/vendor'"
},
packages/app/composer.json
+1
View File
@@ -16,6 +16,7 @@
"filament/support": "self.version",
"filament/tables": "self.version",
"filament/widgets": "self.version",
"filament/theme": "self.version",
"illuminate/auth": "^9.0",
"illuminate/console": "^9.0",
"illuminate/contracts": "^9.0",
packages/app/docs/08-appearance.md
+4 -4
View File
@@ -125,7 +125,7 @@ export default defineConfig({
laravel({
input: [
// ...
'resources/css/filament.css',
'resources/css/index.css',
],
// ...
}),
@@ -149,7 +149,7 @@ Or if you're using Laravel Mix instead of Vite, in your `webpack.mix.js` file, r
```js
const mix = require('laravel-mix')
mix.postCss('resources/css/filament.css', 'public/css', [
mix.postCss('resources/css/index.css', 'public/css', [
require('tailwindcss'), // [tl! focus]
])
```
@@ -168,11 +168,11 @@ use Illuminate\Foundation\Vite;
Filament::serving(function () {
// Using Vite
Filament::registerViteTheme('resources/css/filament.css');
Filament::registerViteTheme('resources/css/index.css');
// Using Laravel Mix
Filament::registerTheme(
mix('css/filament.css'),
mix('css/index.css'),
);
});
```
packages/app/filament-preset.js
+139
View File
@@ -0,0 +1,139 @@
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./packages/actions/resources/**/*.blade.php',
'./packages/app/resources/**/*.blade.php',
'./packages/forms/resources/**/*.blade.php',
'./packages/navigation/resources/**/*.blade.php',
'./packages/notifications/resources/**/*.blade.php',
'./packages/support/resources/**/*.blade.php',
'./packages/tables/resources/**/*.blade.php',
'./packages/widgets/resources/**/*.blade.php',
],
darkMode: 'class',
theme: {
extend: {
colors: {
danger: {
50: ({ opacityValue }) =>
`rgba(var(--danger-color-50), ${opacityValue})`,
100: ({ opacityValue }) =>
`rgba(var(--danger-color-100), ${opacityValue})`,
200: ({ opacityValue }) =>
`rgba(var(--danger-color-200), ${opacityValue})`,
300: ({ opacityValue }) =>
`rgba(var(--danger-color-300), ${opacityValue})`,
400: ({ opacityValue }) =>
`rgba(var(--danger-color-400), ${opacityValue})`,
500: ({ opacityValue }) =>
`rgba(var(--danger-color-500), ${opacityValue})`,
600: ({ opacityValue }) =>
`rgba(var(--danger-color-600), ${opacityValue})`,
700: ({ opacityValue }) =>
`rgba(var(--danger-color-700), ${opacityValue})`,
800: ({ opacityValue }) =>
`rgba(var(--danger-color-800), ${opacityValue})`,
900: ({ opacityValue }) =>
`rgba(var(--danger-color-900), ${opacityValue})`,
},
primary: {
50: ({ opacityValue }) =>
`rgba(var(--primary-color-50), ${opacityValue})`,
100: ({ opacityValue }) =>
`rgba(var(--primary-color-100), ${opacityValue})`,
200: ({ opacityValue }) =>
`rgba(var(--primary-color-200), ${opacityValue})`,
300: ({ opacityValue }) =>
`rgba(var(--primary-color-300), ${opacityValue})`,
400: ({ opacityValue }) =>
`rgba(var(--primary-color-400), ${opacityValue})`,
500: ({ opacityValue }) =>
`rgba(var(--primary-color-500), ${opacityValue})`,
600: ({ opacityValue }) =>
`rgba(var(--primary-color-600), ${opacityValue})`,
700: ({ opacityValue }) =>
`rgba(var(--primary-color-700), ${opacityValue})`,
800: ({ opacityValue }) =>
`rgba(var(--primary-color-800), ${opacityValue})`,
900: ({ opacityValue }) =>
`rgba(var(--primary-color-900), ${opacityValue})`,
},
secondary: {
50: ({ opacityValue }) =>
`rgba(var(--secondary-color-50), ${opacityValue})`,
100: ({ opacityValue }) =>
`rgba(var(--secondary-color-100), ${opacityValue})`,
200: ({ opacityValue }) =>
`rgba(var(--secondary-color-200), ${opacityValue})`,
300: ({ opacityValue }) =>
`rgba(var(--secondary-color-300), ${opacityValue})`,
400: ({ opacityValue }) =>
`rgba(var(--secondary-color-400), ${opacityValue})`,
500: ({ opacityValue }) =>
`rgba(var(--secondary-color-500), ${opacityValue})`,
600: ({ opacityValue }) =>
`rgba(var(--secondary-color-600), ${opacityValue})`,
700: ({ opacityValue }) =>
`rgba(var(--secondary-color-700), ${opacityValue})`,
800: ({ opacityValue }) =>
`rgba(var(--secondary-color-800), ${opacityValue})`,
900: ({ opacityValue }) =>
`rgba(var(--secondary-color-900), ${opacityValue})`,
},
success: {
50: ({ opacityValue }) =>
`rgba(var(--success-color-50), ${opacityValue})`,
100: ({ opacityValue }) =>
`rgba(var(--success-color-100), ${opacityValue})`,
200: ({ opacityValue }) =>
`rgba(var(--success-color-200), ${opacityValue})`,
300: ({ opacityValue }) =>
`rgba(var(--success-color-300), ${opacityValue})`,
400: ({ opacityValue }) =>
`rgba(var(--success-color-400), ${opacityValue})`,
500: ({ opacityValue }) =>
`rgba(var(--success-color-500), ${opacityValue})`,
600: ({ opacityValue }) =>
`rgba(var(--success-color-600), ${opacityValue})`,
700: ({ opacityValue }) =>
`rgba(var(--success-color-700), ${opacityValue})`,
800: ({ opacityValue }) =>
`rgba(var(--success-color-800), ${opacityValue})`,
900: ({ opacityValue }) =>
`rgba(var(--success-color-900), ${opacityValue})`,
},
warning: {
50: ({ opacityValue }) =>
`rgba(var(--warning-color-50), ${opacityValue})`,
100: ({ opacityValue }) =>
`rgba(var(--warning-color-100), ${opacityValue})`,
200: ({ opacityValue }) =>
`rgba(var(--warning-color-200), ${opacityValue})`,
300: ({ opacityValue }) =>
`rgba(var(--warning-color-300), ${opacityValue})`,
400: ({ opacityValue }) =>
`rgba(var(--warning-color-400), ${opacityValue})`,
500: ({ opacityValue }) =>
`rgba(var(--warning-color-500), ${opacityValue})`,
600: ({ opacityValue }) =>
`rgba(var(--warning-color-600), ${opacityValue})`,
700: ({ opacityValue }) =>
`rgba(var(--warning-color-700), ${opacityValue})`,
800: ({ opacityValue }) =>
`rgba(var(--warning-color-800), ${opacityValue})`,
900: ({ opacityValue }) =>
`rgba(var(--warning-color-900), ${opacityValue})`,
},
},
fontFamily: {
sans: 'var(--font-family)',
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}
packages/app/tailwind.config.js
+4 -135
View File
@@ -1,139 +1,8 @@
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
const preset = require('./filament-preset')
module.exports = {
content: [
'./packages/actions/resources/**/*.blade.php',
'./packages/app/resources/**/*.blade.php',
'./packages/forms/resources/**/*.blade.php',
'./packages/navigation/resources/**/*.blade.php',
'./packages/notifications/resources/**/*.blade.php',
'./packages/support/resources/**/*.blade.php',
'./packages/tables/resources/**/*.blade.php',
'./packages/widgets/resources/**/*.blade.php',
],
darkMode: 'class',
theme: {
extend: {
colors: {
danger: {
50: ({ opacityValue }) =>
`rgba(var(--danger-color-50), ${opacityValue})`,
100: ({ opacityValue }) =>
`rgba(var(--danger-color-100), ${opacityValue})`,
200: ({ opacityValue }) =>
`rgba(var(--danger-color-200), ${opacityValue})`,
300: ({ opacityValue }) =>
`rgba(var(--danger-color-300), ${opacityValue})`,
400: ({ opacityValue }) =>
`rgba(var(--danger-color-400), ${opacityValue})`,
500: ({ opacityValue }) =>
`rgba(var(--danger-color-500), ${opacityValue})`,
600: ({ opacityValue }) =>
`rgba(var(--danger-color-600), ${opacityValue})`,
700: ({ opacityValue }) =>
`rgba(var(--danger-color-700), ${opacityValue})`,
800: ({ opacityValue }) =>
`rgba(var(--danger-color-800), ${opacityValue})`,
900: ({ opacityValue }) =>
`rgba(var(--danger-color-900), ${opacityValue})`,
},
primary: {
50: ({ opacityValue }) =>
`rgba(var(--primary-color-50), ${opacityValue})`,
100: ({ opacityValue }) =>
`rgba(var(--primary-color-100), ${opacityValue})`,
200: ({ opacityValue }) =>
`rgba(var(--primary-color-200), ${opacityValue})`,
300: ({ opacityValue }) =>
`rgba(var(--primary-color-300), ${opacityValue})`,
400: ({ opacityValue }) =>
`rgba(var(--primary-color-400), ${opacityValue})`,
500: ({ opacityValue }) =>
`rgba(var(--primary-color-500), ${opacityValue})`,
600: ({ opacityValue }) =>
`rgba(var(--primary-color-600), ${opacityValue})`,
700: ({ opacityValue }) =>
`rgba(var(--primary-color-700), ${opacityValue})`,
800: ({ opacityValue }) =>
`rgba(var(--primary-color-800), ${opacityValue})`,
900: ({ opacityValue }) =>
`rgba(var(--primary-color-900), ${opacityValue})`,
},
secondary: {
50: ({ opacityValue }) =>
`rgba(var(--secondary-color-50), ${opacityValue})`,
100: ({ opacityValue }) =>
`rgba(var(--secondary-color-100), ${opacityValue})`,
200: ({ opacityValue }) =>
`rgba(var(--secondary-color-200), ${opacityValue})`,
300: ({ opacityValue }) =>
`rgba(var(--secondary-color-300), ${opacityValue})`,
400: ({ opacityValue }) =>
`rgba(var(--secondary-color-400), ${opacityValue})`,
500: ({ opacityValue }) =>
`rgba(var(--secondary-color-500), ${opacityValue})`,
600: ({ opacityValue }) =>
`rgba(var(--secondary-color-600), ${opacityValue})`,
700: ({ opacityValue }) =>
`rgba(var(--secondary-color-700), ${opacityValue})`,
800: ({ opacityValue }) =>
`rgba(var(--secondary-color-800), ${opacityValue})`,
900: ({ opacityValue }) =>
`rgba(var(--secondary-color-900), ${opacityValue})`,
},
success: {
50: ({ opacityValue }) =>
`rgba(var(--success-color-50), ${opacityValue})`,
100: ({ opacityValue }) =>
`rgba(var(--success-color-100), ${opacityValue})`,
200: ({ opacityValue }) =>
`rgba(var(--success-color-200), ${opacityValue})`,
300: ({ opacityValue }) =>
`rgba(var(--success-color-300), ${opacityValue})`,
400: ({ opacityValue }) =>
`rgba(var(--success-color-400), ${opacityValue})`,
500: ({ opacityValue }) =>
`rgba(var(--success-color-500), ${opacityValue})`,
600: ({ opacityValue }) =>
`rgba(var(--success-color-600), ${opacityValue})`,
700: ({ opacityValue }) =>
`rgba(var(--success-color-700), ${opacityValue})`,
800: ({ opacityValue }) =>
`rgba(var(--success-color-800), ${opacityValue})`,
900: ({ opacityValue }) =>
`rgba(var(--success-color-900), ${opacityValue})`,
},
warning: {
50: ({ opacityValue }) =>
`rgba(var(--warning-color-50), ${opacityValue})`,
100: ({ opacityValue }) =>
`rgba(var(--warning-color-100), ${opacityValue})`,
200: ({ opacityValue }) =>
`rgba(var(--warning-color-200), ${opacityValue})`,
300: ({ opacityValue }) =>
`rgba(var(--warning-color-300), ${opacityValue})`,
400: ({ opacityValue }) =>
`rgba(var(--warning-color-400), ${opacityValue})`,
500: ({ opacityValue }) =>
`rgba(var(--warning-color-500), ${opacityValue})`,
600: ({ opacityValue }) =>
`rgba(var(--warning-color-600), ${opacityValue})`,
700: ({ opacityValue }) =>
`rgba(var(--warning-color-700), ${opacityValue})`,
800: ({ opacityValue }) =>
`rgba(var(--warning-color-800), ${opacityValue})`,
900: ({ opacityValue }) =>
`rgba(var(--warning-color-900), ${opacityValue})`,
},
},
fontFamily: {
sans: 'var(--font-family)',
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
presets: [
preset
],
content: preset.content
}
packages/theme/composer.json
+31
View File
@@ -0,0 +1,31 @@
{
"name": "filament/theme",
"description": "Custom theme for Filament.",
"license": "MIT",
"homepage": "https://github.com/filamentphp/filament",
"support": {
"issues": "https://github.com/filamentphp/filament/issues",
"source": "https://github.com/filamentphp/filament"
},
"require": {
"php": "^8.0",
"spatie/laravel-package-tools": "^1.9"
},
"autoload": {
"psr-4": {
"Filament\\Theme\\": "src"
}
},
"extra": {
"laravel": {
"providers": [
"Filament\\Theme\\ThemeServiceProvider"
]
}
},
"config": {
"sort-packages": true
},
"minimum-stability": "dev",
"prefer-stable": true
}
packages/theme/resources/css/filament.css → packages/theme/resources/css/index.css
+9
View File
@@ -1,3 +1,12 @@
@import '../../../forms/dist/index.css';
@import 'tippy.js/dist/tippy.css';
@import 'tippy.js/themes/light.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.filament-card-layout {
@apply relative bg-no-repeat;
packages/theme/resources/dist/filament-theme.css
Vendored
+2
View File
File diff suppressed because one or more lines are too long
packages/theme/src/ThemeServiceProvider.php
+17
View File
@@ -0,0 +1,17 @@
<?php
namespace Filament\Theme;
use Filament\Support\PluginServiceProvider;
use Spatie\LaravelPackageTools\Package;
class ThemeServiceProvider extends PluginServiceProvider
{
public static string $name = 'filament-theme';
public function configurePackage(Package $package): void
{
$package->name(static::$name)
->hasAssets();
}
}
packages/theme/tailwind.config.js
+8
View File
@@ -0,0 +1,8 @@
const preset = require('../app/filament-preset')
module.exports = {
presets: [
preset
],
content: preset.content
}