Convert color schema, begin migrating old classes (finishes grey & red)

resources/assets/index.html

@@ -10,7 +10,7 @@
 <div id="pterodactyl">
     <router-view></router-view>
     <div class="w-full m-auto mt-0 container">
-        <p class="text-right text-grey-dark text-xs">
+        <p class="text-right text-neutral-600 text-xs">
         </p>
     </div>
 </div>

resources/assets/scripts/components/auth/ForgotPassword.ts

@@ -69,7 +69,7 @@ export default Vue.component('forgot-password', {
                            v-on:input="updateEmail($event)"
                     />
                     <label for="grid-email" id="grid-email-label">{{ $t('strings.email') }}</label>
-                    <p class="text-grey-darker text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
+                    <p class="text-neutral-800 text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
                 </div>
             </div>
             <div>
@@ -81,7 +81,7 @@ export default Vue.component('forgot-password', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
+                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
                              aria-label="Go to login"
                              :to="{ name: 'login' }"
                 >

resources/assets/scripts/components/auth/LoginForm.ts

@@ -102,7 +102,7 @@ export default Vue.component('login-form', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" aria-label="Forgot password"
+                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600" aria-label="Forgot password"
                              :to="{ name: 'forgot-password' }">
                     {{ $t('auth.forgot_password.label') }}
                 </router-link>

resources/assets/scripts/components/auth/ResetPassword.ts

@@ -88,7 +88,7 @@ export default Vue.component('reset-password', {
                            v-model="password"
                     />
                     <label for="grid-password">{{ $t('strings.password') }}</label>
-                    <p class="text-grey-darker text-xs">{{ $t('auth.password_requirements') }}</p>
+                    <p class="text-neutral-800 text-xs">{{ $t('auth.password_requirements') }}</p>
                 </div>
             </div>
             <div class="flex flex-wrap -mx-3 mb-6">
@@ -110,7 +110,7 @@ export default Vue.component('reset-password', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
+                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
                              :to="{ name: 'login' }"
                 >
                     {{ $t('auth.go_to_login') }}

resources/assets/scripts/components/auth/TwoFactorForm.ts

@@ -60,7 +60,7 @@ export default Vue.component('two-factor-form', {
                            v-model="code"
                     />
                     <label for="grid-code">{{ $t('auth.two_factor.label') }}</label>
-                    <p class="text-grey-darker text-xs">{{ $t('auth.two_factor.label_help') }}</p>
+                    <p class="text-neutral-800 text-xs">{{ $t('auth.two_factor.label_help') }}</p>
                 </div>
             </div>
             <div>
@@ -69,7 +69,7 @@ export default Vue.component('two-factor-form', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
+                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
                              :to="{ name: 'login' }"
                 >
                     Back to Login

resources/assets/scripts/components/core/Modal.ts

@@ -34,7 +34,7 @@ export default Vue.component('modal', {
                 <div class="modal-container" @click.stop>
                     <div v-on:click="close">
                         <icon name="x"
-                              class="absolute pin-r pin-t m-2 text-grey cursor-pointer"
+                              class="absolute pin-r pin-t m-2 textneutral-500scursor-pointer"
                               aria-label="Close modal"
                               role="button"
                         />

resources/assets/scripts/components/core/Navigation.ts

@@ -101,7 +101,7 @@ export default Vue.component('navigation', {
                             <a href="#">
                                 <div class="flex items-center">
                                     <div class="flex-1">
-                                        <span class="text-sm text-grey-darker">Loading...</span>
+                                        <span class="text-sm text-neutral-800">Loading...</span>
                                     </div>
                                     <div class="flex-none">
                                         <span class="spinner spinner-relative"></span>
@@ -113,8 +113,8 @@ export default Vue.component('navigation', {
                             <router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
                                 <div class="flex items-center">
                                     <div class="flex-1">
-                                        <span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
-                                        <span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
+                                        <span class="font-bold text-neutral-900">{{ server.name }}</span><br />
+                                        <span class="font-light text-neutral-600 text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
                                     </div>
                                     <div class="flex-none">
                                         <span class="pillbox bg-indigo">{{ server.node }}</span>

resources/assets/scripts/components/dashboard/ServerBox.ts

@@ -171,12 +171,12 @@ export default Vue.component('server-box', {
                             {{ server.name }}
                         </h2>
                     </router-link>
-                    <div class="text-grey-darker font-normal text-sm">
+                    <div class="text-neutral-800 font-normal text-sm">
                         <p v-if="server.description.length" class="pb-1">{{ server.description }}</p>
     
                         <div class="absolute pin-b pin-l p-4 w-full">
                             <span class="font-semibold text-indigo">{{ server.node }}</span>
-                            <span class="float-right text-grey-dark font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
+                            <span class="float-right text-neutral-600 font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
                         </div>
                     </div>
                 </div>

resources/assets/scripts/components/dashboard/account/ChangePassword.ts

@@ -53,7 +53,7 @@ export default Vue.component('change-password', {
         <div id="change-password-container" :class>
             <form method="post" v-on:submit.prevent="submitForm">
                 <div class="content-box">
-                    <h2 class="mb-6 text-grey-darkest font-medium">{{ $t('dashboard.account.password.title') }}</h2>
+                    <h2 class="mb-6 text-neutral-900 font-medium">{{ $t('dashboard.account.password.title') }}</h2>
                     <div class="mt-6">
                         <label for="grid-password-current" class="input-label">{{ $t('strings.password') }}</label>
                         <input id="grid-password-current" name="current_password" type="password" class="input" required

resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts

@@ -128,7 +128,7 @@ export default Vue.component('two-factor-authentication', {
                 <span class="spinner spinner-xl text-blue"></span>
             </div>
             <div id="container-disable-two-factor" v-if="response.enabled" v-show="!spinner">
-                <h2 class="font-medium text-grey-darkest">{{ $t('dashboard.account.two_factor.disable.title') }}</h2>
+                <h2 class="font-medium text-neutral-900">{{ $t('dashboard.account.two_factor.disable.title') }}</h2>
                 <div class="mt-6">
                     <label class="input-label" for="grid-two-factor-token-disable">{{ $t('dashboard.account.two_factor.disable.field') }}</label>
                     <input id="grid-two-factor-token-disable" type="number" class="input"
@@ -151,14 +151,14 @@ export default Vue.component('two-factor-authentication', {
                 </div>
             </div>
             <div id="container-enable-two-factor" v-else v-show="!spinner">
-                <h2 class="font-medium text-grey-darkest">{{ $t('dashboard.account.two_factor.setup.title') }}</h2>
+                <h2 class="font-medium text-neutral-900">{{ $t('dashboard.account.two_factor.setup.title') }}</h2>
                 <div class="flex mt-6">
                     <div class="flex-none w-full sm:w-1/2 text-center">
                         <div class="h-48">
                             <img :src="response.qr_image" id="grid-qr-code" alt="Two-factor qr image" class="h-48">
                         </div>
                         <div>
-                            <p class="text-xs text-grey-darker mb-2">{{ $t('dashboard.account.two_factor.setup.help') }}</p>
+                            <p class="text-xs text-neutral-800 mb-2">{{ $t('dashboard.account.two_factor.setup.help') }}</p>
                             <p class="text-xs"><code>{{response.secret}}</code></p>
                         </div>
                     </div>

resources/assets/scripts/components/dashboard/account/UpdateEmail.ts

@@ -51,7 +51,7 @@ export default Vue.component('update-email', {
         <div id="update-email-container" :class>
             <form method="post" v-on:submit.prevent="submitForm">
                 <div class="content-box">
-                    <h2 class="mb-6 text-grey-darkest font-medium">{{ $t('dashboard.account.email.title') }}</h2>
+                    <h2 class="mb-6 text-neutral-900 font-medium">{{ $t('dashboard.account.email.title') }}</h2>
                     <div>
                         <label for="grid-email" class="input-label">{{ $t('strings.email_address') }}</label>
                         <input id="grid-email" name="email" type="email" class="input" required

resources/assets/scripts/components/server/Server.ts

@@ -82,32 +82,28 @@ export default Vue.component('server', {
                         <div class="mr-6">
                             <div class="p-6 text-center bg-white rounded shadow">
                                 <h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
-                                <span class="text-grey-dark text-sm">{{server.node}}</span>
-                                <power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/>
+                                <span class="text-neutral-600 text-sm">{{server.node}}</span>
+                                <power-buttons class="mt-6 pt-6 text-center border-t border-neutral-100"/>
                             </div>
                         </div>
-                        <div class="mt-6 sidenav mr-6">
-                            <router-link :to="{ name: 'server', params: { id: $route.params.id } }">
-                                Console
-                            </router-link>
-                            <router-link :to="{ name: 'server-files' }">
-                                File Manager
-                            </router-link>
-                            <!--<router-link :to="{ name: 'server-subusers' }">-->
-                                <!--<icon name="users" class="h-4"></icon> Subusers-->
-                            <!--</router-link>-->
-                            <!--<router-link :to="{ name: 'server-schedules' }">-->
-                                <!--<icon name="calendar" class="h-4"></icon> Schedules-->
-                            <!--</router-link>-->
-                            <router-link :to="{ name: 'server-databases' }">
-                                Databases
-                            </router-link>
-                            <!--<router-link :to="{ name: 'server-allocations' }">-->
-                                <!--<icon name="globe" class="h-4"></icon> Allocations-->
-                            <!--</router-link>-->
-                            <!--<router-link :to="{ name: 'server-settings' }">-->
-                                <!--<icon name="settings" class="h-4"></icon> Settings-->
-                            <!--</router-link>-->
+                        <div class="sidenav mt-6 mr-6">
+                            <ul>
+                                <li>
+                                    <router-link :to="{ name: 'server', params: { id: $route.params.id } }">
+                                        Console
+                                    </router-link>
+                                </li>
+                                <li>
+                                    <router-link :to="{ name: 'server-files' }">
+                                        File Manager
+                                    </router-link>
+                                </li>
+                                <li>
+                                    <router-link :to="{ name: 'server-databases' }">
+                                        Databases
+                                    </router-link>
+                                </li>
+                            </ul>
                         </div>
                     </div>
                     <div class="h-full w-full">

resources/assets/scripts/components/server/components/PowerButtons.ts

@@ -28,7 +28,7 @@ export default Vue.component('power-buttons', {
                             v-on:click.prevent="sendPowerAction('start')"
                     >Start</button>
                     <div v-else>
-                        <button class="btn btn-red uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('stop')">Stop</button>
+                        <button class="btn btn-red-500 uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('stop')">Stop</button>
                         <button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('restart')">Restart</button>
                         <button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('kill')">Kill</button>
                     </div>
@@ -37,7 +37,7 @@ export default Vue.component('power-buttons', {
             <div v-else>
                 <div class="text-center">
                     <div class="spinner"></div>
-                    <div class="pt-2 text-xs text-grey-light">Connecting to node</div>
+                    <div class="pt-2 text-xs text-neutral-400">Connecting to node</div>
                 </div>
             </div>
         </div>

resources/assets/scripts/components/server/components/ProgressBar.ts

@@ -13,7 +13,7 @@ export default Vue.component('progress-bar', {
             } else if (this.percent >= 70 && this.percent < 90) {
                 return "bg-yellow-dark";
             } else {
-                return "bg-red-dark";
+                return "bg-red-600";
             }
         },
         borderColor: function () {
@@ -22,7 +22,7 @@ export default Vue.component('progress-bar', {
             } else if (this.percent >= 70 && this.percent < 90) {
                 return "border-yellow-dark";
             } else {
-                return "border-red-dark";
+                return "border-red-600";
             }
         }
     },
@@ -30,7 +30,7 @@ export default Vue.component('progress-bar', {
     template: `
         <div>
             <div class="text-right mb-1" v-if="title.length > 0">
-                <span class="text-grey-dark text-xs uppercase">{{ title }}</span>
+                <span class="text-neutral-600 text-xs uppercase">{{ title }}</span>
             </div>
             <div class="w-full border rounded h-4" :class="borderColor">
                 <div class="h-full w-1/3 text-center" :style="{ width: percent + '%' }" :class="backgroundColor">

resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <message-box class="alert error mb-6" :message="errorMessage" v-show="errorMessage.length"/>
-        <h2 class="font-medium text-grey-darkest mb-6">Create a new database</h2>
+        <h2 class="font-medium text-neutral-900 mb-6">Create a new database</h2>
         <div class="mb-6">
             <label class="input-label" for="grid-database-name">Database name</label>
             <input id="grid-database-name" type="text" class="input" name="database_name" required

resources/assets/scripts/components/server/components/database/DatabaseRow.vue

@@ -1,17 +1,17 @@
 <template>
-    <div class="content-box mb-6 hover:border-grey">
-        <div class="flex items-center text-grey-darker">
+    <div class="content-box mb-6 hover:borderneutral-500">
+        <div class="flex items-center text-neutral-800">
             <database-icon class="flex-none text-green"></database-icon>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-grey pb-1 select-none">Database Name</p>
+                <p class="uppercase text-xs textneutral-500spb-1 select-none">Database Name</p>
                 <p>{{database.name}}</p>
             </div>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-grey pb-1 select-none">Username</p>
+                <p class="uppercase text-xs textneutral-500spb-1 select-none">Username</p>
                 <p>{{database.username}}</p>
             </div>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-grey pb-1 select-none">Password</p>
+                <p class="uppercase text-xs textneutral-500spb-1 select-none">Password</p>
                 <p>
                     <code class="text-sm cursor-pointer" v-on:click="revealPassword">
                         <span class="select-none" v-if="!database.showPassword">
@@ -22,7 +22,7 @@
                 </p>
             </div>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-grey pb-1 select-none">Server</p>
+                <p class="uppercase text-xs textneutral-500spb-1 select-none">Server</p>
                 <p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
             </div>
             <div class="flex-none px-4">

resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <h2 class="font-medium text-grey-darkest mb-6">Delete this database?</h2>
-        <p class="text-grey-darkest text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p>
+        <h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
+        <p class="text-neutral-900 text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p>
         <div class="mt-6">
             <label class="input-label">Confirm database name</label>
             <input type="text" class="input" v-model="nameConfirmation"/>

resources/assets/scripts/components/server/components/filemanager/FileRow.ts

@@ -89,8 +89,8 @@ export default Vue.component('file-row', {
                     <icon name="link2" v-else/>
                 </div>
                 <div class="flex-1">{{file.name}}</div>
-                <div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div>
-                <div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
+                <div class="flex-1 text-right text-neutral-600">{{readableSize(file.size)}}</div>
+                <div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
                 <div class="flex-none w-1/6"></div>
             </div>
             <file-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>

resources/assets/scripts/components/server/components/filemanager/FolderRow.ts

@@ -35,8 +35,8 @@ export default Vue.component('folder-row', {
                     <icon name="folder"/>
                 </div>
                 <div class="flex-1">{{directory.name}}</div>
-                <div class="flex-1 text-right text-grey-dark"></div>
-                <div class="flex-1 text-right text-grey-dark">{{formatDate(directory.modified)}}</div>
+                <div class="flex-1 text-right text-neutral-600"></div>
+                <div class="flex-1 text-right text-neutral-600">{{formatDate(directory.modified)}}</div>
                 <div class="flex-none w-1/6"></div>
             </router-link>
         </div>

resources/assets/scripts/components/server/subpages/Console.ts

@@ -162,12 +162,12 @@ export default Vue.component('server-console', {
         <div class="animate fadein shadow-md">
             <div class="text-xs font-mono">
                 <div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
-                    <div class="mb-2 text-grey-light" ref="terminal" v-if="connected"></div>
+                    <div class="mb-2 text-neutral-400" ref="terminal" v-if="connected"></div>
                     <div v-else>
                         <div class="spinner spinner-xl mt-24"></div>
                     </div>
                 </div>
-                <div class="rounded-b bg-grey-darkest text-white flex">
+                <div class="rounded-b bg-neutral-900 text-white flex">
                     <div class="flex-no-shrink p-2">
                         <span class="font-bold">$</span>
                     </div>

resources/assets/scripts/components/server/subpages/Databases.ts

@@ -92,8 +92,8 @@ export default Vue.component('server-databases', {
             <div class="animate fadein" v-else>
                 <div class="content-box mb-6" v-if="!databases.length">
                     <div class="flex items-center">
-                        <icon name="database" class="flex-none text-grey-darker"></icon>
-                        <div class="flex-1 px-4 text-grey-darker">
+                        <icon name="database" class="flex-none text-neutral-800"></icon>
+                        <div class="flex-1 px-4 text-neutral-800">
                             <p>You have no databases.</p>
                         </div>
                     </div>

resources/assets/scripts/components/server/subpages/FileManager.ts

@@ -136,7 +136,7 @@ export default Vue.component('file-manager', {
                     <div class="alert error" v-text="errorMessage"></div>
                 </div>
                 <div v-else-if="!directories.length && !files.length">
-                    <p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
+                    <p class="textneutral-500stext-sm text-center p-6 pb-4">This directory is empty.</p>
                 </div>
                 <div class="filemanager" v-else>
                     <div class="header">

resources/assets/styles/components/animations.css

@@ -35,7 +35,7 @@
     @apply .bg-red;
   }
   100% {
-    @apply .bg-red-dark;
+    @apply .bg-red-600;
   }
 }
 

resources/assets/styles/components/buttons.css

@@ -23,23 +23,23 @@
 
   &.btn-red {
     &:not(.btn-secondary) {
-      @apply .bg-red .border-red-dark .border .text-white;
+      @apply .bg-red-500 .border-red-600 .border .text-white;
     }
 
     &:hover:enabled {
-      @apply .bg-red-dark .border-red-darker;
+      @apply .bg-red-600 .border-red-800;
     }
   }
 
   &.btn-secondary {
-    @apply .border .border-grey-light .text-grey-dark;
+    @apply .border .border-neutral-400 .text-neutral-600;
 
     &:hover:enabled {
-      @apply .border-grey .text-grey-darker;
+      @apply .borderneutral-500s.text-neutral-800;
     }
 
     &.btn-red:hover:enabled {
-      @apply .bg-red-dark .border-red-darker .text-white;
+      @apply .bg-red-600 .border-red-800 .text-white;
     }
   }
 

resources/assets/styles/components/filemanager.css

@@ -1,6 +1,6 @@
 .filemanager {
   & .header {
-    @apply .flex .text-sm .pb-4 .font-bold .border-b .border-grey-light .mb-3;
+    @apply .flex .text-sm .pb-4 .font-bold .border-b .border-neutral-400 .mb-3;
 
     & > div {
       @apply .pr-4;
@@ -19,7 +19,7 @@
     }
 
     &.active-selection, &.clickable:hover {
-      @apply .bg-grey-lightest .text-grey-darkest .shadow;
+      @apply .bg-neutral-50 .text-neutral-900 .shadow;
     }
 
     & > .icon {
@@ -31,10 +31,10 @@
   }
 
   .context-menu {
-    @apply .absolute .bg-white .py-2 .border .rounded .text-grey-darker .text-sm .cursor-pointer;
+    @apply .absolute .bg-white .py-2 .border .rounded .text-neutral-800 .text-sm .cursor-pointer;
 
     & > div:not(:last-of-type) {
-      @apply .border-b .border-grey-lightest .pb-2 .mb-2;
+      @apply .border-b .border-neutral-50 .pb-2 .mb-2;
     }
 
     & .context-row {
@@ -53,11 +53,11 @@
       }
 
       &:hover {
-        @apply .bg-grey-lightest .border-t .border-b .border-grey-lighter;
+        @apply .bg-neutral-50 .border-t .border-b .border-neutral-100;
       }
 
       &.danger:hover {
-        @apply .bg-red-lightest .border-t .border-b .border-red-lighter;
+        @apply .bg-red-50 .border-t .border-b .border-red-100;
       }
 
     }
@@ -65,7 +65,7 @@
 }
 
 .filemanager-breadcrumbs {
-  @apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-grey-darker .shadow-md;
+  @apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-800 .shadow-md;
 
   & a {
     @apply .no-underline .text-blue;

resources/assets/styles/components/forms.css

@@ -21,7 +21,7 @@ input[type=number] {
 }
 
 .input-open > .input {
-    @apply .appearance-none .block .w-full .text-grey-darker .border-b-2 .border-grey-light .py-3 .mb-3;
+    @apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-400 .py-3 .mb-3;
 
     &:focus {
         @apply .border-blue-light;
@@ -30,7 +30,7 @@ input[type=number] {
     }
 
     &:focus + label, &:valid + label, &.has-content + label {
-        @apply .text-grey-darker .px-0 .cursor-pointer;
+        @apply .text-neutral-800 .px-0 .cursor-pointer;
         transform:translateY(-26px)
     }
 
@@ -40,7 +40,7 @@ input[type=number] {
 }
 
 .input-open > label {
-    @apply .block .uppercase .tracking-wide .text-grey .text-xs .mb-2 .absolute;
+    @apply .block .uppercase .tracking-wide .textneutral-500s.text-xs .mb-2 .absolute;
     top: 14px;
     transition: transform 200ms ease-out;
 }
@@ -49,7 +49,7 @@ input[type=number] {
  * Styling for other forms throughout the Panel.
  */
 .input:not(.open-label) {
-    @apply .appearance-none .p-3 .rounded .border .text-grey-darker .w-full;
+    @apply .appearance-none .p-3 .rounded .border .text-neutral-800 .w-full;
     transition: all 100ms linear;
 
     &:focus {
@@ -61,18 +61,18 @@ input[type=number] {
     }
 
     &.error {
-        @apply .text-red-dark .border-red;
+        @apply .text-red-600 .border-red;
     }
 }
 
 .input-label {
-    @apply .block .uppercase .tracking-wide .text-grey-darkest .text-xs .font-bold .mb-2;
+    @apply .block .uppercase .tracking-wide .text-neutral-900 .text-xs .font-bold .mb-2;
 }
 
 .input-help {
-    @apply .text-xs .text-grey .pt-2;
+    @apply .text-xs .textneutral-500s.pt-2;
 
     &.error {
-        @apply .text-red-dark;
+        @apply .text-red-600;
     }
 }

resources/assets/styles/components/miscellaneous.css

@@ -11,7 +11,7 @@ code {
  * Indicators for server online status.
  */
 .indicator {
-    @apply .bg-grey-darker .border .border-grey;
+    @apply .bg-neutral-800 .border .border-grey;
     border-radius: 50%;
     width: 16px;
     height: 16px;
@@ -89,16 +89,16 @@ code {
     }
 
     & a, & a:visited {
-        @apply .no-underline .text-grey-darkest;
+        @apply .no-underline .text-neutral-900;
     }
 
     & > .content {
-        @apply .border .border-grey-light .bg-white .no-underline .block .text-black .p-4;
-        border-top: 4px solid config('colors.grey-light') !important;
+        @apply .border .border-neutral-400 .bg-white .no-underline .block .text-black .p-4;
+        border-top: 4px solid config('colors.neutral-400') !important;
     }
 
     & > .footer {
-        @apply .border .border-grey-light .border-t-0 .bg-grey-lightest;
+        @apply .border .border-neutral-400 .border-t-0 .bg-neutral-50;
     }
 }
 
@@ -110,7 +110,7 @@ code {
     @apply .w-full .my-4;
 
     & > input[type="text"] {
-        @apply .w-full .p-3 .rounded .border .text-grey-darker;
+        @apply .w-full .p-3 .rounded .border .text-neutral-800;
         transition: border 150ms ease-in;
 
         &:focus {

resources/assets/styles/components/navigation.css

@@ -19,7 +19,7 @@
         @apply .mr-2;
 
         & > .search-input {
-            @apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest .w-96;
+            @apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-neutral-50 .text-neutral-900 .w-96;
             opacity: 0.9;
             transition: ease-in-out opacity 150ms;
 
@@ -35,13 +35,13 @@
         }
 
         & .search-results {
-            @apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
+            @apply .absolute .bg-neutral-50 .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
 
             & a {
                 @apply .block .no-underline .p-2 .rounded;
 
                 &:hover {
-                    @apply .bg-grey-lighter;
+                    @apply .bg-neutral-100;
                 }
             }
         }
@@ -51,7 +51,7 @@
         @apply .flex .h-full .items-center;
 
         & > a {
-            @apply .block .flex .self-stretch .items-center .no-underline .text-grey-lighter .font-light .text-sm .px-5;
+            @apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;
 
             &:hover {
                 @apply .bg-blue-dark;
@@ -61,16 +61,24 @@
 }
 
 .sidenav {
-    a {
-        @apply .block .no-underline .text-grey-darker .py-2;
-        transition: color 75ms ease-in;
+    ul {
+        @apply .list-reset;
 
-        &:hover {
-            @apply .text-grey;
-        }
+        & li {
+            @apply .block;
 
-        &.router-link-exact-active {
-            @apply .font-medium;
+            & > a {
+                transition: border-left-color 250ms linear, color 250ms linear;
+                @apply .block .px-4 .py-3 .border-l-3 .border-neutral-100 .no-underline .text-neutral-400 .font-medium;
+
+                &:hover, &.router-link-exact-active {
+                    @apply .text-neutral-800;
+                }
+
+                &.router-link-exact-active {
+                    @apply .border-blue .cursor-default;
+                }
+            }
         }
     }
 }
@@ -79,10 +87,10 @@
     @apply .py-2;
 
     a {
-        @apply .block .py-3 .px-6 .text-grey-darkest .no-underline .border .border-transparent;
+        @apply .block .py-3 .px-6 .text-neutral-900 .no-underline .border .border-transparent;
 
         &:hover, &.router-link-exact-active {
-            @apply .border-grey-light .bg-grey-lightest;
+            @apply .border-neutral-400 .bg-neutral-50;
 
             border-left: 1px solid transparent;
             border-right: 1px solid transparent;

resources/assets/styles/components/notifications.css

@@ -13,7 +13,7 @@
     }
 
     &.error {
-        @apply .bg-red-dark .border-red-darker .text-red-lightest;
+        @apply .bg-red-600 .border-red-800 .text-red-50;
 
         & > .title {
             @apply .bg-red;

resources/assets/styles/components/spinners.css

@@ -7,7 +7,7 @@
   }
 
   &:after {
-    @apply .border-2 .border-grey-light .absolute .block .h-4 .w-4 .rounded-full;
+    @apply .border-2 .border-neutral-400 .absolute .block .h-4 .w-4 .rounded-full;
     animation: spinners--spin 500ms infinite linear;
     border-top-color: transparent !important;
     border-right-color: transparent !important;

resources/themes/pterodactyl/admin/nodes/view/index.blade.php

@@ -98,7 +98,7 @@
                 <div class="row">
                     @if($node->maintenance_mode)
                     <div class="col-sm-12">
-                        <div class="info-box bg-orange">
+                        <div class="info-box bg-grey">
                             <span class="info-box-icon"><i class="ion ion-wrench"></i></span>
                             <div class="info-box-content" style="padding: 23px 10px 0;">
                                 <span class="info-box-text">This node is under</span>
@@ -169,4 +169,4 @@
         });
     })();
     </script>
-@endsection
+@endsection

resources/themes/pterodactyl/templates/auth/core.blade.php

@@ -1,5 +1,5 @@
 @extends('templates/wrapper', [
-    'css' => ['body' => 'bg-grey-darkest']
+    'css' => ['body' => 'bg-neutral-900']
 ])
 
 @section('container')
@@ -8,7 +8,7 @@
             <img src="/assets/img/pterodactyl-flat.svg" class="max-w-xxs">
         </div>
         <router-view></router-view>
-        <p class="text-center text-grey text-xs">
+        <p class="text-center textneutral-500stext-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>
     </div>

resources/themes/pterodactyl/templates/base/core.blade.php

@@ -56,7 +56,7 @@
 @section('below-container')
     <div class="flex-grow"></div>
     <div class="w-full m-auto mt-0 container">
-        <p class="text-center sm:text-right text-grey-dark text-xs">
+        <p class="text-center sm:text-right text-neutral-600 text-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>
     </div>

resources/themes/pterodactyl/templates/wrapper.blade.php

@@ -32,7 +32,7 @@
 
         @include('layouts.scripts')
     </head>
-    <body class="{{ $css['body'] ?? 'bg-grey-lightest' }}">
+    <body class="{{ $css['body'] ?? 'bg-neutral-50' }}">
         @section('content')
             @yield('above-container')
             <div id="pterodactyl" class="flex flex-col">