Change colors

app/components/button.hbs

@@ -8,7 +8,7 @@
     py-2
     cursor-pointer
     border
-    border-gray-300
+    border-gray
     bg-white
     {{if @group "first:rounded-l-md last:rounded-r-md" "rounded-md"}}
     text-gray-700

app/components/input-text.hbs

@@ -2,11 +2,11 @@
   {{#if @label}}
     <label for={{this.id}} class="block font-medium mb-1 text-dark">{{@label}}</label>
   {{/if}}
-  <div class="relative flex items-center border rounded-md border-light">
+  <div class="relative flex items-center border rounded-md border-gray">
     {{#if @prefixIcon}}
       <MdIcon
         @icon={{@prefixIcon}}
-        class="h-8 w-8 pl-2 text-light"
+        class="h-8 w-8 pl-2"
       />
     {{/if}}
 

app/components/input-textarea.hbs

@@ -2,11 +2,11 @@
   {{#if @label}}
     <label for={{this.id}} class="block font-medium mb-1 text-dark">{{@label}}</label>
   {{/if}}
-  <div class="relative flex items-center border rounded-md border-light">
+  <div class="relative flex items-center border rounded-md border-gray">
     {{#if @prefixIcon}}
       <MdIcon
         @icon={{@prefixIcon}}
-        class="h-8 w-8 pl-2 text-light"
+        class="h-8 w-8 pl-2"
       />
     {{/if}}
 

app/components/menu-item.hbs

@@ -1,4 +1,4 @@
-<LinkTo @route={{@route}} @model={{@model}} @activeClass="bg-secondary" class="flex items-center px-4 py-2 rounded-md text-light hover:bg-secondary">
+<LinkTo @route={{@route}} @model={{@model}} @activeClass="bg-text" class="flex items-center px-4 py-2 rounded-md text-gray hover:bg-text">
   {{#if @icon}}
     <MdIcon @icon={{@icon}} />
   {{/if}}

app/components/tab.hbs

@@ -2,7 +2,7 @@
   @route={{@route}}
   @model={{@model}}
   @activeClass="text-primary border-primary"
-  class="flex items-center h-10 px-4 py-2 -mb-px text-center bg-transparent border-b-2 -px-1 whitespace-nowrap focus:outline-none"
+  class="flex items-center h-10 px-4 py-2 -mb-px text-center bg-transparent border-gray border-b-2 -px-1 whitespace-nowrap focus:outline-none"
 >
   {{#if @icon}}
     <MdIcon @icon={{@icon}} class="mr-2" />

app/styles/app.css

@@ -8,13 +8,13 @@
 }
 
 .royal-table {
-  @apply border border-light text-left mb-4;
+  @apply border border-gray text-left mb-4;
 
   thead {
     @apply bg-light;
 
     tr {
-      @apply border-b border-light;
+      @apply border-b border-gray;
 
       th {
         @apply px-4 py-4 text-dark font-normal whitespace-nowrap;
@@ -40,7 +40,7 @@
       }
 
       td {
-        @apply px-4 py-2 text-dark;
+        @apply px-4 py-2 text-text;
       }
     }
   }

app/templates/admin.hbs

@@ -1,5 +1,5 @@
 <div class="relative min-h-screen flex">
-  <div class="flex flex-col w-64 h-screen px-4 py-8 bg-dark border-r border-light">
+  <div class="flex flex-col w-64 h-screen px-4 py-8 bg-dark border-r border-gray">
     <h2 class="text-xl font-semibold text-light text-center flex items-center">
       <img src="/logo.svg" alt="MeiliSearch" class="w-8 h-8 mr-2">
       MeiliSearch Admin

app/templates/admin/indexes/item/settings.hbs

@@ -52,7 +52,7 @@
         @overrideClass="sortObject"
         @isSortable={{true}}
         @sortingScope="a"
-        class="flex items-center px-4 py-2 mb-2 border max-w-md"
+        class="flex items-center px-4 py-2 mb-2 border border-gray max-w-md"
         @dragHandle=".md-icon"
       >
         <MdIcon @icon="drag-vertical" class="mr-2 -ml-2 cursor-move" />

config/tailwind.config.js

@@ -1,20 +1,35 @@
+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', './app/**/*.hbs'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
       colors: {
-        light: '#E5E7EB',
-        secondary: '#374151',
-        dark: '#1F2937',
-        primary: '#2563EB',
+        light,
+        gray,
+        dark,
+        text,
+        primary,
       },
     },
+    // borderColor: gray,
     emberPowerSelect: (theme) => ({
       default: {
         trigger: {
           borderRadius: theme('borderRadius.default'),
-          borderColor: theme('borderColor.border'),
+          borderColor: theme('colors.gray'),
           fontSize: theme('fontSize.base'),
           padding: `${theme('spacing.2')} ${theme('spacing.10')} ${theme(
             'spacing.2'
@@ -31,7 +46,7 @@ module.exports = {
         dropdown: {
           // color: config.textColor,
           // backgroundColor: config.dropdownBackgroundColor,
-          borderColor: theme('colors.border'),
+          borderColor: theme('colors.gray'),
           // borderWidth: defaultTheme.borderWidth.default,
           // borderRadius: config.dropdownBorderRadius,
           boxShadow: theme('boxShadow.sm'),
@@ -103,7 +118,7 @@ module.exports = {
         },
         searchInput: {
           borderRadius: theme('borderRadius.default'),
-          borderColor: theme('borderColor.border'),
+          borderColor: theme('colors.gray'),
           fontSize: theme('fontSize.base'),
           padding: `${theme('spacing.2')} ${theme('spacing.3')}`,
           minHeight: '42px',