Update colors

resources/scripts/components/admin/users/UsersContainerV2.tsx

@@ -13,6 +13,7 @@ import {
 } from '@heroicons/react/solid';
 import { Button } from '@/components/elements/button/index';
 import { Dialog } from '@/components/elements/dialog';
+import { Checkbox } from '@/components/elements/inputs';
 
 const UsersContainerV2 = () => {
     const [ users, setUsers ] = useState<User[]>([]);
@@ -41,8 +42,8 @@ const UsersContainerV2 = () => {
                 <Dialog.Icon type={'danger'}/>
                 This account will be permanently deleted.
                 <Dialog.Buttons>
-                    <Button.Text onClick={() => setVisible(false)}>Cancel</Button.Text>
+                    <Button.Text className={'!ring-offset-neutral-800'} onClick={() => setVisible(false)}>Cancel</Button.Text>
-                    <Button.Danger>Delete</Button.Danger>
+                    <Button.Danger className={'!ring-offset-neutral-800'}>Delete</Button.Danger>
                 </Dialog.Buttons>
             </Dialog>
             <table className={'min-w-full rounded bg-neutral-700'}>
@@ -58,7 +59,7 @@ const UsersContainerV2 = () => {
                         <tr key={user.uuid}>
                             <td className={'whitespace-nowrap'}>
                                 <div className={'flex justify-end items-center w-8'}>
-                                    <input type={'checkbox'}/>
+                                    <Checkbox />
                                 </div>
                             </td>
                             <td className={'pl-6 py-4 whitespace-nowrap'}>

resources/scripts/components/elements/button/button.module.css

@@ -1,14 +1,14 @@
 .button {
   @apply px-4 py-2 inline-flex items-center justify-center;
-  @apply bg-primary-500 rounded text-base font-semibold text-primary-50 transition-all duration-100;
+  @apply bg-blue-600 rounded text-base font-semibold text-blue-50 transition-all duration-100;
-  @apply hover:bg-primary-600 active:bg-primary-600;
+  @apply hover:bg-blue-500 active:bg-blue-500;
 
   &.square {
     @apply p-2;
   }
 
   &:focus {
-    @apply ring-[3px] ring-opacity-75 ring-primary-300;
+    @apply ring-[3px] ring-blue-500 ring-offset-2 ring-offset-neutral-700;
   }
 
   /* Sizing Controls */
@@ -26,5 +26,5 @@
 }
 
 .danger {
-  @apply bg-red-500 hover:bg-red-600 active:bg-red-600 focus:ring-red-400 text-red-50;
+  @apply bg-red-600 hover:bg-red-500 active:bg-red-500 focus:ring-red-500 text-red-50;
 }

resources/scripts/components/elements/dropdown/dropdown.module.css

@@ -35,10 +35,10 @@
   }
 
   &:hover, &:focus, &:focus-within {
-    @apply bg-primary-600 text-primary-50;
+    @apply bg-blue-500 text-blue-50;
 
     & svg {
-      @apply text-primary-50;
+      @apply text-blue-50;
     }
   }
 

resources/scripts/components/elements/inputs/Checkbox.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import styles from './inputs.module.css';
+import classNames from 'classnames';
+
+type Props = Omit<React.ComponentProps<'input'>, 'type'>
+
+export default forwardRef<HTMLInputElement, Props>(({ className, ...props }, ref) => (
+    <input
+        ref={ref}
+        type={'checkbox'}
+        className={classNames('form-checkbox', styles.checkbox, className)} {...props}
+    />
+));

resources/scripts/components/elements/inputs/index.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox';
+export { default as styles } from './inputs.module.css';

resources/scripts/components/elements/inputs/inputs.module.css

@@ -0,0 +1,7 @@
+.checkbox {
+  @apply w-4 h-4 rounded-sm border-neutral-500 bg-neutral-600 text-primary-500;
+
+  &:focus, &:active {
+    @apply ring-2 ring-primary-500 ring-offset-2 ring-offset-neutral-700;
+  }
+}

tailwind.config.js

@@ -11,30 +11,9 @@ module.exports = {
             },
             colors: {
                 black: '#131a20',
-                primary: {
+                // Deprecated, prefer the use of "blue" directly here.
-                    50: '#e6f6ff',
+                primary: colors.blue,
-                    100: '#b8e2ff',
+                neutral: colors.neutral,
-                    200: '#7ac3fa',
-                    300: '#49a4f3',
-                    400: '#2487eb',
-                    500: '#0967d3',
-                    600: '#0550b3',
-                    700: '#0345a0',
-                    800: '#01337e',
-                    900: '#002057',
-                },
-                neutral: {
-                    50: '#f5f7fa',
-                    100: '#e5e8eb',
-                    200: '#cad1d8',
-                    300: '#9aa5b1',
-                    400: '#7b8793',
-                    500: '#606d7b',
-                    600: '#515f6c',
-                    700: '#3f4d5a',
-                    800: '#33404d',
-                    900: '#1f2933',
-                },
                 cyan: colors.cyan,
             },
             fontSize: {
@@ -49,6 +28,8 @@ module.exports = {
         },
     },
     plugins: [
-        require('@tailwindcss/forms'),
+        require('@tailwindcss/forms')({
+            strategy: 'class',
+        }),
     ]
 };