bullet_train-themes-light 1.2.10 → 1.2.11

data/app/assets/stylesheets/light/tailwind/colors.css

@@ -1,296 +1,45 @@
-:root {
-  --theme-blue-300: #95acff;
-  --theme-blue-400: #448eef;
-  --theme-blue-500: #047bf8;
-  --theme-blue-600: #0362c6;
-  --theme-blue-700: #1c4cc3;
-  --theme-blue-800: #0e369a;
-  --theme-blue-900: #00369D;
-
-  --theme-green-300: #52fa79;
-  --theme-green-400: #43ef6b;
-  --theme-green-500: #04f63c;
-  --theme-green-600: #03c430;
-  --theme-green-700: #1cc443;
-  --theme-green-800: #0e9a2f;
-  --theme-green-900: #009e25;
-
-  --theme-purple-300: #ac95ff;
-  --theme-purple-400: #8e44ef;
-  --theme-purple-500: #7b04f8;
-  --theme-purple-600: #6203c6;
-  --theme-purple-700: #4c1cc3;
-  --theme-purple-800: #360e9a;
-  --theme-purple-900: #36009D;
-
-  --theme-orange-300: #ffac95;
-  --theme-orange-400: #ef8e44;
-  --theme-orange-500: #f87b04;
-  --theme-orange-600: #c66203;
-  --theme-orange-700: #c34c1c;
-  --theme-orange-800: #9a360e;
-  --theme-orange-900: #9D3600;
-
-  --theme-pink-300: #ff95ac;
-  --theme-pink-400: #ef448e;
-  --theme-pink-500: #f8047b;
-  --theme-pink-600: #c60362;
-  --theme-pink-700: #c31c4c;
-  --theme-pink-800: #9a0e36;
-  --theme-pink-900: #9D0036;
-
-  --theme-gray-300: #ccd9e8;
-  --theme-gray-400: #9facc7;
-  --theme-gray-500: #777E94;
-  --theme-gray-600: #4D566F;
-  --theme-gray-700: #323c58;
-  --theme-gray-800: #2b344e;
-  --theme-gray-900: #232942;
-
-  /* TOOD Kind of yuck? */
-  --theme-sand-300: #e8d9cc;
-  --theme-sand-400: #c7ac9f;
-  --theme-sand-500: #947E77;
-  --theme-sand-600: #6F564D;
-  --theme-sand-700: #583c32;
-  --theme-sand-800: #4e342b;
-  --theme-sand-900: #422923;
-  
-}
-
-:root, .theme-blue {
-  --primary-300: var(--theme-blue-300);
-  --primary-400: var(--theme-blue-400);
-  --primary-500: var(--theme-blue-500);
-  --primary-600: var(--theme-blue-600);
-  --primary-700: var(--theme-blue-700);
-  --primary-800: var(--theme-blue-800);
-  --primary-900: var(--theme-blue-900);
-
-  --secondary-300: var(--theme-blue-300);
-  --secondary-400: var(--theme-blue-400);
-  --secondary-500: var(--theme-blue-500);
-  --secondary-600: var(--theme-blue-600);
-  --secondary-700: var(--theme-blue-700);
-  --secondary-800: var(--theme-blue-800);
-  --secondary-900: var(--theme-blue-900);
-
-  --dark-primary-300: var(--theme-gray-300);
-  --dark-primary-400: var(--theme-gray-400);
-  --dark-primary-500: var(--theme-gray-500);
-  --dark-primary-600: var(--theme-gray-600);
-  --dark-primary-700: var(--theme-gray-700);
-  --dark-primary-800: var(--theme-gray-800);
-  --dark-primary-900: var(--theme-gray-900);
-
-  --dark-secondary-300: var(--theme-gray-300);
-  --dark-secondary-400: var(--theme-gray-400);
-  --dark-secondary-500: var(--theme-gray-500);
-  --dark-secondary-600: var(--theme-gray-600);
-  --dark-secondary-700: var(--theme-gray-700);
-  --dark-secondary-800: var(--theme-gray-800);
-  --dark-secondary-900: var(--theme-gray-900);
-
-  --dark-accent-200: #b3bcde;
-
-  --light-gradient-from: #D7BBEA;
-  --light-gradient-to: #65A8F1;
-  --dark-gradient-from: #633d7d;
-  --dark-gradient-to: #2867ab;
-}
-
-.theme-green {
-  --primary-300: var(--theme-green-300);
-  --primary-400: var(--theme-green-400);
-  --primary-500: var(--theme-green-500);
-  --primary-600: var(--theme-green-600);
-  --primary-700: var(--theme-green-700);
-  --primary-800: var(--theme-green-800);
-  --primary-900: var(--theme-green-900);
-
-  --secondary-300: var(--theme-green-300);
-  --secondary-400: var(--theme-green-400);
-  --secondary-500: var(--theme-green-500);
-  --secondary-600: var(--theme-green-600);
-  --secondary-700: var(--theme-green-700);
-  --secondary-800: var(--theme-green-800);
-  --secondary-900: var(--theme-green-900);
-
-  --dark-primary-300: var(--theme-gray-300);
-  --dark-primary-400: var(--theme-gray-400);
-  --dark-primary-500: var(--theme-gray-500);
-  --dark-primary-600: var(--theme-gray-600);
-  --dark-primary-700: var(--theme-gray-700);
-  --dark-primary-800: var(--theme-gray-800);
-  --dark-primary-900: var(--theme-gray-900);
-
-  --dark-accent-200: #28ab42;
-
-  --light-gradient-from: #dff9e3;
-  --light-gradient-to: #adfbb9;
-  --dark-gradient-from: #74f18d;
-  --dark-gradient-to: #28ab42;
-}
-
-.theme-purple {
-  --primary-300: var(--theme-purple-300);
-  --primary-400: var(--theme-purple-400);
-  --primary-500: var(--theme-purple-500);
-  --primary-600: var(--theme-purple-600);
-  --primary-700: var(--theme-purple-700);
-  --primary-800: var(--theme-purple-800);
-  --primary-900: var(--theme-purple-900);
-
-  --secondary-300: var(--theme-purple-300);
-  --secondary-400: var(--theme-purple-400);
-  --secondary-500: var(--theme-purple-500);
-  --secondary-600: var(--theme-purple-600);
-  --secondary-700: var(--theme-purple-700);
-  --secondary-800: var(--theme-purple-800);
-  --secondary-900: var(--theme-purple-900);
-
-  --dark-primary-300: var(--theme-gray-300);
-  --dark-primary-400: var(--theme-gray-400);
-  --dark-primary-500: var(--theme-gray-500);
-  --dark-primary-600: var(--theme-gray-600);
-  --dark-primary-700: var(--theme-gray-700);
-  --dark-primary-800: var(--theme-gray-800);
-  --dark-primary-900: var(--theme-gray-900);
-
-  --dark-accent-200: #bcb3de;
-
-  --light-gradient-from: #EABBD7;
-  --light-gradient-to: #A865F1;
-  --dark-gradient-from: #7d3d63;
-  --dark-gradient-to: #6728ab;
-}
-
-.theme-orange {
-  --primary-300: var(--theme-orange-300);
-  --primary-400: var(--theme-orange-400);
-  --primary-500: var(--theme-orange-500);
-  --primary-600: var(--theme-orange-600);
-  --primary-700: var(--theme-orange-700);
-  --primary-800: var(--theme-orange-800);
-  --primary-900: var(--theme-orange-900);
-
-  --secondary-300: var(--theme-orange-300);
-  --secondary-400: var(--theme-orange-400);
-  --secondary-500: var(--theme-orange-500);
-  --secondary-600: var(--theme-orange-600);
-  --secondary-700: var(--theme-orange-700);
-  --secondary-800: var(--theme-orange-800);
-  --secondary-900: var(--theme-orange-900);
-
-  --dark-primary-300: var(--theme-sand-300);
-  --dark-primary-400: var(--theme-sand-400);
-  --dark-primary-500: var(--theme-sand-500);
-  --dark-primary-600: var(--theme-sand-600);
-  --dark-primary-700: var(--theme-sand-700);
-  --dark-primary-800: var(--theme-sand-800);
-  --dark-primary-900: var(--theme-sand-900);
-
-  --dark-accent-200: #debcb3;
-
-  --light-gradient-from: #EABBD7;
-  --light-gradient-to: #F1A865;
-  --dark-gradient-from: #7d3d63;
-  --dark-gradient-to: #ab6728;
-}
-
-.theme-pink {
-  --primary-300: var(--theme-pink-300);
-  --primary-400: var(--theme-pink-400);
-  --primary-500: var(--theme-pink-500);
-  --primary-600: var(--theme-pink-600);
-  --primary-700: var(--theme-pink-700);
-  --primary-800: var(--theme-pink-800);
-  --primary-900: var(--theme-pink-900);
-
-  --secondary-300: var(--theme-pink-300);
-  --secondary-400: var(--theme-pink-400);
-  --secondary-500: var(--theme-pink-500);
-  --secondary-600: var(--theme-pink-600);
-  --secondary-700: var(--theme-pink-700);
-  --secondary-800: var(--theme-pink-800);
-  --secondary-900: var(--theme-pink-900);
-
-  --dark-primary-300: var(--theme-gray-300);
-  --dark-primary-400: var(--theme-gray-400);
-  --dark-primary-500: var(--theme-gray-500);
-  --dark-primary-600: var(--theme-gray-600);
-  --dark-primary-700: var(--theme-gray-700);
-  --dark-primary-800: var(--theme-gray-800);
-  --dark-primary-900: var(--theme-gray-900);
-
-  --dark-accent-200: #bcb3de;
-
-  --light-gradient-from: #D7BBEA;
-  --light-gradient-to: #F165A8;
-  --dark-gradient-from: #6728ab;
-  --dark-gradient-to: #633d7d;
-}
-
-.theme-secondary-blue {
-  --secondary-300: var(--theme-blue-300);
-  --secondary-400: var(--theme-blue-400);
-  --secondary-500: var(--theme-blue-500);
-  --secondary-600: var(--theme-blue-600);
-  --secondary-700: var(--theme-blue-700);
-  --secondary-800: var(--theme-blue-800);
-  --secondary-900: var(--theme-blue-900);
-}
-
-.theme-secondary-purple {
-  --secondary-300: var(--theme-purple-300);
-  --secondary-400: var(--theme-purple-400);
-  --secondary-500: var(--theme-purple-500);
-  --secondary-600: var(--theme-purple-600);
-  --secondary-700: var(--theme-purple-700);
-  --secondary-800: var(--theme-purple-800);
-  --secondary-900: var(--theme-purple-900);
-}
-
-
-.theme-secondary-orange {
-  --secondary-300: var(--theme-orange-300);
-  --secondary-400: var(--theme-orange-400);
-  --secondary-500: var(--theme-orange-500);
-  --secondary-600: var(--theme-orange-600);
-  --secondary-700: var(--theme-orange-700);
-  --secondary-800: var(--theme-orange-800);
-  --secondary-900: var(--theme-orange-900);
-}
-
-.theme-secondary-pink {
-  --secondary-300: var(--theme-pink-300);
-  --secondary-400: var(--theme-pink-400);
-  --secondary-500: var(--theme-pink-500);
-  --secondary-600: var(--theme-pink-600);
-  --secondary-700: var(--theme-pink-700);
-  --secondary-800: var(--theme-pink-800);
-  --secondary-900: var(--theme-pink-900);
-}
-
-/* This isn't intended for use by any userland applications. */
-/* We do this strictly to avoid shipping different color versions of our logo. */
-/* This is disabled by default in new applications. */
-.theme-logo-color-shift {
-  &.theme-pink {
-    img.theme-logo {
-      filter: hue-rotate(105deg) brightness(0.9);
-    }
-  }
-
-  &.theme-purple {
-    img.theme-logo {
-      filter: hue-rotate(33deg) brightness(0.9);
-    }
-  }
-
-  &.theme-orange {
-    img.theme-logo {
-      filter: hue-rotate(160deg) brightness(1.10);
-    }
-  }
-}
+@import "./colors/blue";
+@import "./colors/slate";
+@import "./colors/gray";
+@import "./colors/zinc";
+@import "./colors/neutral";
+@import "./colors/stone";
+@import "./colors/red";
+@import "./colors/orange";
+@import "./colors/amber";
+@import "./colors/yellow";
+@import "./colors/lime";
+@import "./colors/green";
+@import "./colors/emerald";
+@import "./colors/teal";
+@import "./colors/cyan";
+@import "./colors/sky";
+@import "./colors/indigo";
+@import "./colors/violet";
+@import "./colors/purple";
+@import "./colors/fuchsia";
+@import "./colors/pink";
+@import "./colors/rose";
+
+@import "./secondary_colors/blue";
+@import "./secondary_colors/slate";
+@import "./secondary_colors/gray";
+@import "./secondary_colors/zinc";
+@import "./secondary_colors/neutral";
+@import "./secondary_colors/stone";
+@import "./secondary_colors/red";
+@import "./secondary_colors/orange";
+@import "./secondary_colors/amber";
+@import "./secondary_colors/yellow";
+@import "./secondary_colors/lime";
+@import "./secondary_colors/green";
+@import "./secondary_colors/emerald";
+@import "./secondary_colors/teal";
+@import "./secondary_colors/cyan";
+@import "./secondary_colors/sky";
+@import "./secondary_colors/indigo";
+@import "./secondary_colors/violet";
+@import "./secondary_colors/purple";
+@import "./secondary_colors/fuchsia";
+@import "./secondary_colors/pink";
+@import "./secondary_colors/rose";

data/app/assets/stylesheets/light/tailwind/components.css

@@ -13,6 +13,7 @@
 
   .button {
     @apply shadow-sm text-white hover:text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 hover:no-underline;
+    @apply dark:ring-offset-slate-700;
 
     &.button-red {
       @apply bg-red-500 hover:bg-red-600 focus:ring-red-600;
@@ -21,6 +22,8 @@
 
   .button-secondary {
     @apply text-secondary-500 hover:text-secondary-600 hover:underline;
+    /* @apply dark:text-slate-200; */
+
     &.button-increase-contrast {
       @apply text-secondary-700 hover:text-secondary-900;
     }
@@ -42,7 +45,8 @@
   }
 
   .button-alternative {
-    @apply border-gray-300 rounded-md shadow-sm bg-white text-gray-500 hover:bg-gray-50 no-underline hover:no-underline;
+    @apply border-slate-300 rounded-md shadow-sm bg-white text-slate-500 hover:bg-slate-50 no-underline hover:no-underline;
+    @apply dark:bg-slate-800 dark:border-slate-900 dark:text-white dark:hover:bg-slate-700;
   }
 
   .button-color {
@@ -111,10 +115,12 @@
   }
 
   .table {
-    @apply w-full divide-y divide-gray-900 divide-opacity-5 text-left;
+    @apply w-full divide-y divide-slate-900 dark:divide-slate-700 divide-opacity-5 text-left;
+
 
-    & th {
+    th {
       @apply px-3 py-3 text-2xs font-semibold font-normal;
+      @apply dark:text-slate-400;
 
       &:first-child {
         @apply pl-5;
@@ -125,12 +131,14 @@
       }
     }
 
-    & tbody {
-      @apply divide-y divide-gray-900 divide-opacity-5;
+    tbody {
+      @apply divide-y divide-slate-900 divide-opacity-5;
+      @apply dark:divide-slate-700;
     }
 
-    & td {
+    td {
       @apply px-3 py-3.5;
+      @apply dark:text-slate-400;
 
       &:first-child {
         @apply pl-5;

data/app/assets/stylesheets/light/tailwind/dark-mode.css

@@ -1,77 +1,14 @@
 @layer utilities {
   @media (prefers-color-scheme: dark) {
-    /**
-     * Color overrides
-     **/
-    .bg-primary-900 {
-      /* TODO We can't really do this. We need to just append a transparency class to these elements. */
-      background-color: rgba(0, 0, 0, 0.15);
-    }
-
-    .bg-light-gradient {
-      &:before {
-        background: linear-gradient(to bottom right, var(--dark-gradient-from), var(--dark-gradient-to) 100%);
-      }
-    }
-
-    .bg-dark-gradient {
-      background-image: linear-gradient(to bottom, var(--dark-primary-700), var(--dark-primary-800) 100%);
-    }
-
-    /**
-     * General
-     **/
-    .button {
-      @apply ring-offset-darkPrimary-700;
-    }
-
-    .table {
-      th {
-        @apply text-darkPrimary-400;
-      }
-
-      tbody {
-        @apply border-gray-500;
-
-        tr {
-          border-top: 1px solid theme('colors.darkPrimary.500');
-        }
-
-        td {
-          @apply text-gray-400;
-
-          a,
-          input[type="submit"] {
-            @apply text-darkAccent-200;
-          }
-        }
-      }
-    }
-
-    /**
-     * Form components
-     **/
-    .button-secondary {
-      @apply text-darkAccent-200;
-    }
-
-    .button-alternative {
-      @apply bg-black-400 border-black-400 text-white;
-
-      &:hover {
-        @apply bg-black-300 border-black-200 text-white;
-      }
-    }
-
     /**
      * Custom components
      **/
     /* Color picker */
     .pcr-app {
-      @apply bg-darkPrimary-800 border border-solid border-darkPrimary-900;
+      @apply bg-slate-800 border border-solid border-slate-900;
 
       .pcr-interaction .pcr-result {
-        @apply text-darkPrimary-300 border border-solid border-darkPrimary-900 bg-darkPrimary-800;
+        @apply text-slate-300 border border-solid border-slate-900 bg-slate-800;
 
         &:focus {
           box-shadow: 0 0 0 1px theme('colors.primary.500'), 0 0 0 3px theme('colors.primary.500');
@@ -81,18 +18,18 @@
 
     /* Date range picker */
     .daterangepicker {
-      @apply bg-darkPrimary-800 border-darkPrimary-900;
+      @apply bg-slate-800 border-slate-900;
 
       &::before {
-        border-bottom-color: theme('colors.darkPrimary.900');
+        border-bottom-color: theme('colors.slate.900');
       }
 
       &::after {
-        border-bottom-color: theme('colors.darkPrimary.800');
+        border-bottom-color: theme('colors.slate.800');
       }
 
       .calendar-table {
-        @apply bg-darkPrimary-800 text-darkPrimary-300;
+        @apply bg-slate-800 text-slate-300;
 
         /* navigation arrows */
         .available {
@@ -104,53 +41,53 @@
 
       /* Clear and Apply buttons wrapper */
       .drp-buttons {
-        border-top-color: theme('colors.darkPrimary.900');
-        @apply text-darkPrimary-300;
+        border-top-color: theme('colors.slate.900');
+        @apply text-slate-300;
       }
 
       th {
         &.available:hover {
-          @apply bg-darkPrimary-600;
+          @apply bg-slate-600;
         }
       }
 
       td {
         &.off {
-          @apply bg-darkPrimary-800 text-white;
+          @apply bg-slate-800 text-white;
         }
 
         &.available:hover {
-          @apply bg-darkPrimary-600;
+          @apply bg-slate-600;
         }
       }
 
       .hourselect, .minuteselect, .ampmselect {
-        @apply text-darkPrimary-300 border-darkPrimary-900 bg-darkPrimary-800 !important;
+        @apply text-slate-300 border-slate-900 bg-slate-800 !important;
       }
     }
 
     /* Phone field */
     .iti__country-list {
-      @apply bg-darkPrimary-800 border border-solid border-darkPrimary-900;
+      @apply bg-slate-800 border border-solid border-slate-900;
     }
 
     /* Select2 */
     .select2-container {
       .select2-selection__rendered {
-        @apply text-darkPrimary-300 !important;
+        @apply text-slate-300 !important;
       }
 
       .select2-dropdown {
-        @apply bg-darkPrimary-700;
+        @apply bg-slate-700;
       }
 
       .select2-search__field {
-        @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
+        @apply bg-slate-800 border-slate-900 !important;
       }
 
       .select2-selection--multiple, .select2-selection--single {
-        @apply bg-darkPrimary-800 focus:ring-primary-500 border-darkPrimary-900 !important;
-        @apply text-darkPrimary-300;
+        @apply bg-slate-800 focus:ring-primary-500 border-slate-900 !important;
+        @apply text-slate-300;
       }
 
       /* For the selected options in the multiple select2 component */
@@ -168,13 +105,13 @@
       }
 
       .select2-results__option {
-        @apply text-darkPrimary-300;
+        @apply text-slate-300;
       }
     }
 
     /* Trix Editor */
     trix-editor {
-      @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
+      @apply bg-slate-800 border-slate-900 !important;
 
       &:focus, &:active {
         @apply border-primary-500 !important;
@@ -189,7 +126,7 @@
       }
 
       .trix-button-group, .trix-button {
-        @apply border-darkPrimary-400 !important;
+        @apply border-slate-400 !important;
       }
 
       .trix-button:disabled::before {
@@ -199,25 +136,25 @@
 
     .tribute-container {
       ul {
-        @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
+        @apply bg-slate-800 border-slate-900 !important;
       }
     }
 
     .trix-dialogs {
-      @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
+      @apply bg-slate-800 border-slate-900 !important;
     }
 
     .trix-content a[href^="bullettrain://"] {
-      @apply text-white bg-darkPrimary-500;
+      @apply text-white bg-slate-500;
     }
 
     /* CKEditor */
     .ck {
-      --ck-color-base-background: theme('colors.darkPrimary.800');
-      --ck-color-base-border: theme('colors.darkPrimary.900');
-      --ck-color-toolbar-background: theme('colors.darkPrimary.800');
-      --ck-color-toolbar-border: theme('colors.darkPrimary.900');
-      --ck-color-text: theme('colors.darkPrimary.300');
+      --ck-color-base-background: theme('colors.slate.800');
+      --ck-color-base-border: theme('colors.slate.900');
+      --ck-color-toolbar-background: theme('colors.slate.800');
+      --ck-color-toolbar-border: theme('colors.slate.900');
+      --ck-color-text: theme('colors.slate.300');
 
       .ck-editor__editable:not(.ck-editor__nested-editable) {
         @apply shadow-none;

data/app/assets/stylesheets/light/tailwind/secondary_colors/amber.css

@@ -0,0 +1,12 @@
+.theme-secondary-amber {
+  --secondary-50: theme('colors.amber.50');
+  --secondary-100: theme('colors.amber.100');
+  --secondary-200: theme('colors.amber.200');
+  --secondary-300: theme('colors.amber.300');
+  --secondary-400: theme('colors.amber.400');
+  --secondary-500: theme('colors.amber.500');
+  --secondary-600: theme('colors.amber.600');
+  --secondary-700: theme('colors.amber.700');
+  --secondary-800: theme('colors.amber.800');
+  --secondary-900: theme('colors.amber.900');
+}

data/app/assets/stylesheets/light/tailwind/secondary_colors/blue.css

@@ -0,0 +1,12 @@
+.theme-secondary-blue {
+  --secondary-50: theme('colors.blue.50');
+  --secondary-100: theme('colors.blue.100');
+  --secondary-200: theme('colors.blue.200');
+  --secondary-300: theme('colors.blue.300');
+  --secondary-400: theme('colors.blue.400');
+  --secondary-500: theme('colors.blue.500');
+  --secondary-600: theme('colors.blue.600');
+  --secondary-700: theme('colors.blue.700');
+  --secondary-800: theme('colors.blue.800');
+  --secondary-900: theme('colors.blue.900');
+}

data/app/assets/stylesheets/light/tailwind/secondary_colors/cyan.css

@@ -0,0 +1,12 @@
+.theme-secondary-cyan {
+  --secondary-50: theme('colors.cyan.50');
+  --secondary-100: theme('colors.cyan.100');
+  --secondary-200: theme('colors.cyan.200');
+  --secondary-300: theme('colors.cyan.300');
+  --secondary-400: theme('colors.cyan.400');
+  --secondary-500: theme('colors.cyan.500');
+  --secondary-600: theme('colors.cyan.600');
+  --secondary-700: theme('colors.cyan.700');
+  --secondary-800: theme('colors.cyan.800');
+  --secondary-900: theme('colors.cyan.900');
+}

data/app/assets/stylesheets/light/tailwind/secondary_colors/emerald.css

@@ -0,0 +1,12 @@
+.theme-secondary-emerald {
+  --secondary-50: theme('colors.emerald.50');
+  --secondary-100: theme('colors.emerald.100');
+  --secondary-200: theme('colors.emerald.200');
+  --secondary-300: theme('colors.emerald.300');
+  --secondary-400: theme('colors.emerald.400');
+  --secondary-500: theme('colors.emerald.500');
+  --secondary-600: theme('colors.emerald.600');
+  --secondary-700: theme('colors.emerald.700');
+  --secondary-800: theme('colors.emerald.800');
+  --secondary-900: theme('colors.emerald.900');
+}