Add basic colors

app/assets/styles.css

@@ -2,17 +2,27 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --color-gray-darkest: #242424;
+    --color-gray-dark: #424242;
+    --color-gray: #616161;
+    --color-gray-light: #C7C7C7;
+    --color-gray-lightest: #D1D1D1;
+  }
+}
+
 .royal-table {
   @apply table-auto border text-left mb-4;
 
   thead {
-    @apply bg-light;
+    @apply bg-gray-light;
 
     tr {
       @apply border-b;
 
       th {
-        @apply px-4 py-4 text-dark font-normal whitespace-nowrap;
+        @apply px-4 py-4 text-gray-dark font-normal whitespace-nowrap;
 
         &[type="button"] {
           @apply cursor-pointer select-none;
@@ -31,11 +41,11 @@
   tbody {
     tr {
       &:nth-child(even) {
-        @apply bg-light;
+        @apply bg-gray-light;
       }
 
       td {
-        @apply px-4 py-2 text-text align-top;
+        @apply px-4 py-2 text-gray-darkest align-top;
       }
     }
   }

app/components/form/element.hbs

@@ -2,7 +2,7 @@
   {{#if @label}}
     <label
       for={{@for}}
-      class='block font-medium mb-1 text-dark
+      class='block font-medium mb-1 text-gray-dark
         {{if @required "after:content-['*'] after:text-red-500"}}'
     >
       {{~@label~}}

config/tailwind.config.js

@@ -1,47 +1,24 @@
 const colors = require('tailwindcss/colors');
 
-const light = '#FAFAFA';
-// const gray = '#EEEDEF';
-// const dark = '#55585D';
-// const text = '#33373B';
-
-// const  light = '#E5E7EB';
-// const secondary = '#374151';
-// const gray = '#e1dfe2';
-const text = '#252526';
-const dark = '#1E1E1E';
-// const primary = '#2563EB';
-// const primary = '#ff5caa';
-
 module.exports = {
   content: ['./app/**/*.{html,hbs}'],
   darkMode: 'media',
   theme: {
     extend: {
-      borderColor: (theme) => theme('colors.gray.light'),
+      borderColor: (theme) => theme('colors.gray.lightest'),
       colors: {
-        light,
-        // gray,
-        dark,
-        text,
+        gray: {
+          darkest: 'rgb(var(--color-gray-darkest) / <alpha-value>)',
+          dark: 'rgb(var(--color-gray-dark) / <alpha-value>)',
+          DEFAULT: 'rgb(var(--color-gray) / <alpha-value>)',
+          light: 'rgb(var(--color-light) / <alpha-value>)',
+          lightest: 'rgb(var(--color-lightest) / <alpha-value>)',
+        },
         primary: {
           light: colors.pink['100'],
           DEFAULT: colors.pink['500'],
           dark: colors.pink['800'],
         },
-        // gray: {
-        //   light: colors.gray['100'],
-        //   DEFAULT: colors.gray['500'],
-        //   dark: colors.gray['800'],
-        // },
-        gray: {
-          light: '#e5eaef',
-          DEFAULT: '#A1A6B0',
-          dark: '#676d7c',
-        },
-        black: {
-          DEFAULT: '#222228',
-        },
         yellow: {
           light: colors.yellow['100'],
           DEFAULT: colors.yellow['400'],