feat: change primary color to vatsim green

app/Providers/AppServiceProvider.php

@@ -43,5 +43,9 @@ public function boot()
             new HtmlString('<meta name="msapplication-TileColor" content="#603cba">'),
             new HtmlString('<meta name="theme-color" content="#ffffff">'),
         ]);
+
+        Filament::serving(function () {
+            Filament::registerTheme(mix('css/filament.css'));
+        });
     }
 }

package.json

@@ -10,9 +10,13 @@
         "production": "mix --production"
     },
     "devDependencies": {
+        "@tailwindcss/forms": "^0.5.1",
+        "@tailwindcss/typography": "^0.5.2",
         "axios": "^0.25",
         "laravel-mix": "^6.0.6",
         "lodash": "^4.17.19",
-        "postcss": "^8.1.14"
+        "postcss": "^8.1.14",
+        "tailwindcss": "^3.0.24",
+        "tippy.js": "^6.3.7"
     }
 }

public/mix-manifest.json

@@ -1 +1,3 @@
-{}
+{
+    "/css/filament.css": "/css/filament.css"
+}

resources/css/filament.css

@@ -0,0 +1 @@
+@import "../../vendor/filament/filament/resources/css/app.css";

tailwind.config.js

@@ -0,0 +1,68 @@
+const colors = require('tailwindcss/colors')
+
+const vatsimIndigo = {
+  DEFAULT: '#2B3990',
+  '50': '#949EDF',
+  '100': '#8490DA',
+  '200': '#6574D1',
+  '300': '#4557C7',
+  '400': '#3445AF',
+  '500': '#2B3990',
+  '600': '#1E2865',
+  '700': '#11173A',
+  '800': '#04060E',
+  '900': '#000000'
+}
+
+const vatsimGreen = {
+  DEFAULT: '#29B473',
+  '50': '#A9EBCC',
+  '100': '#99E8C3',
+  '200': '#77E0AF',
+  '300': '#56D99C',
+  '400': '#35D188',
+  '500': '#29B473',
+  '600': '#1F8656',
+  '700': '#145939',
+  '800': '#0A2B1B',
+  '900': '#000000'
+}
+
+const vatsimBlue = {
+  DEFAULT: '#2483C5',
+  '50': '#B0D6F1',
+  '100': '#9FCDED',
+  '200': '#7CBBE7',
+  '300': '#5AA9E1',
+  '400': '#3798DB',
+  '500': '#2483C5',
+  '600': '#1B6396',
+  '700': '#134466',
+  '800': '#0A2437',
+  '900': '#010507'
+}
+
+module.exports = {
+  content: [
+    './resources/**/*.blade.php',
+    './vendor/filament/**/*.blade.php',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        'vatsim-indigo': vatsimIndigo,
+        'vatsim-blue': vatsimBlue,
+        'vatsim-green': vatsimGreen,
+        danger: colors.rose,
+        primary: vatsimGreen,
+        success: colors.green,
+        warning: colors.amber,
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ],
+}

webpack.mix.js

@@ -11,7 +11,6 @@ const mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/js/app.js', 'public/js')
-    .postCss('resources/css/app.css', 'public/css', [
-        //
-    ]);
+mix.postCss('resources/css/filament.css', 'public/css', [
+    require('tailwindcss'),
+])