bullet_train-themes-light 1.0.16 → 1.0.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c894ca9d694b40fc09d718ed4df9cfa7707b0b6d25bbecce941d61e7c79933a2
-  data.tar.gz: 2053560561e35dce564f5f7b4bcd4cb4ff2f1f0d62869a1a20cc18a6083f6599
+  metadata.gz: af3bd83c524618c1e2af49fb0c4510c926a84ab527d6a88250d5a4fe3c298301
+  data.tar.gz: f71167e71cb143c81596a2399f380c1c47fb239ff5bb7cd12050e26e453dc017
 SHA512:
-  metadata.gz: c41a5c20cf57df1fa05d5554bb698702eb67da1e7d95440a2724a234506bf4cac4c58e68c3f927a4b3300fab491b8ac8cd2cb355805fce90545c5b14de755ad0
-  data.tar.gz: fb1275c9738b30c67faf53eddc51e0e2aafb230081d441419d1fdf118acea83c91a9bcea2f96c3479994771343f16f217f61233aded0f02258230cba01dc47d1
+  metadata.gz: 1b63d73ecb854a1a40c634a0e0d658ba205a16b022a66187db59352e3726a34660900740cb9e23d221cd7e5a9460319851a838d587f4db4f553c8c07c1dbc7cc
+  data.tar.gz: 6fa79adde7523e4caabde4f72d53175d75ce699279e3ee294c964ba9e83646dcdf4e81c7d1a9b359e91135e4b3faeb9b85ed967f49198b9b9460426358f3a0a3

data/app/assets/stylesheets/light/application.css

@@ -1,6 +1,7 @@
 @import "./tailwind/components";
 @import "./tailwind/utilities";
 @import "./tailwind/dark-mode";
+@import "./tailwind/colors";
 
 @import "./electron";
 @import './fields';
@@ -22,7 +23,7 @@ form.button_to {
   input[type=submit] {
     @apply bg-transparent;
     &.button {
-      @apply bg-blue hover:bg-blue-dark;
+      @apply bg-primary-500 hover:bg-primary-600;
     }
   }
 }

data/app/assets/stylesheets/light/fields/cloudinary_image.css

@@ -36,7 +36,7 @@
       vertical-align: -7px;
       &:focus, &:active {
         i {
-          color: #047bf8;
+          color: var(--primary-500);
         }
       }
     }
@@ -49,9 +49,9 @@
       }
     }
     &:focus, &:active {
-      border-color: #047bf8;
+      border-color: var(--primary-500);
       i {
-        color: #047bf8;
+        color: var(--primary-500);
       }
     }
   }

data/app/assets/stylesheets/light/fields/date_field.css

@@ -1,19 +1,19 @@
 @layer components {
   .date-input {
     .single-daterange {
-      @apply rounded-md shadow-sm focus:ring-blue focus:border-blue font-light text-sm;
+      @apply rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 font-light text-sm;
     }
   }
 
   .daterangepicker {
     .hourselect, .minuteselect, .ampmselect {
-      @apply rounded-md shadow-sm focus:ring-blue font-light;
-      @apply border-gray-300 focus:border-blue bg-white !important;
+      @apply rounded-md shadow-sm focus:ring-primary-500 font-light;
+      @apply border-gray-300 focus:border-primary-500 bg-white !important;
       text-align-last: center;
     }
 
     .calendar-table .active {
-      @apply bg-blue !important;
+      @apply bg-primary-500 !important;
     }
   }
 }

data/app/assets/stylesheets/light/fields/super_select.css

@@ -44,14 +44,14 @@
   }
 
   .select2-border {
-    @apply border-blue !important;
-    box-shadow: inset 0 0 0 1px #047bf8 !important;
+    @apply border-primary-500 !important;
+    box-shadow: inset 0 0 0 1px var(--primary-500) !important;
     outline: 0 !important;
   }
 
   .select2-selection--single, .select2-selection--multiple {
     @apply border-gray-300;
-    @apply rounded-md shadow-sm pt-0 focus:ring-blue !important;
+    @apply rounded-md shadow-sm pt-0 focus:ring-primary-500 !important;
     height: 38px !important;
 
     &.focus-visible {
@@ -89,7 +89,7 @@
   }
 
   .select2-container--default .select2-results__option[aria-selected=true] {
-    @apply text-white bg-blue !important;
+    @apply text-white bg-primary-500 !important;
   }
 
   .select2-search__field {

data/app/assets/stylesheets/light/fields/trix_editor.css

@@ -32,7 +32,7 @@ a[href^="bullettrain://users"], a[href^="bullettrain://teams"], span.tribute-use
     border-radius: 5px;
     overflow: hidden;
     box-sizing: border-box;
-    border: 2px solid #047bf8;
+    border: 2px solid var(--primary-500);
     background: white;
     list-style: none;
     padding: 0;
@@ -78,8 +78,8 @@ trix-editor {
   padding-left: 0.75rem;
   @apply shadow-sm border-gray-300 font-light rounded-md;
   &:focus, &:active {
-    border-color: #047bf8;
-    box-shadow: inset 0 0 0 1px #047bf8;
+    border-color: var(--primary-500);
+    box-shadow: inset 0 0 0 1px var(--primary-500);
   }
 }
 

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

@@ -0,0 +1,100 @@
+:root, .theme-blue {
+  --primary-300: #95acff;
+  --primary-400: #448eef;
+  --primary-500: #047bf8;
+  --primary-600: #0362c6;
+  --primary-700: #1c4cc3;
+  --primary-800: #0e369a;
+  --primary-900: #00369D;
+
+  --dark-primary-300: #ccd9e8;
+  --dark-primary-400: #9facc7;
+  --dark-primary-500: #777E94;
+  --dark-primary-600: #4D566F;
+  --dark-primary-700: #323c58;
+  --dark-primary-800: #2b344e;
+  --dark-primary-900: #232942;
+
+  --dark-accent-200: #b3bcde;
+
+  --light-gradient-from: #D7BBEA;
+  --light-gradient-to: #65A8F1;
+  --dark-gradient-from: #633d7d;
+  --dark-gradient-to: #2867ab;
+}
+
+.theme-purple {
+  --primary-300: #ac95ff;
+  --primary-400: #8e44ef;
+  --primary-500: #7b04f8;
+  --primary-600: #6203c6;
+  --primary-700: #4c1cc3;
+  --primary-800: #360e9a;
+  --primary-900: #36009D;
+
+  --dark-primary-300: #d9cce8;
+  --dark-primary-400: #ac9fc7;
+  --dark-primary-500: #7E7794;
+  --dark-primary-600: #564D6F;
+  --dark-primary-700: #3c3258;
+  --dark-primary-800: #342b4e;
+  --dark-primary-900: #292342;
+
+  --dark-accent-200: #bcb3de;
+
+  --light-gradient-from: #EABBD7;
+  --light-gradient-to: #A865F1;
+  --dark-gradient-from: #7d3d63;
+  --dark-gradient-to: #6728ab;
+}
+
+.theme-orange {
+  --primary-300: #ffac95;
+  --primary-400: #ef8e44;
+  --primary-500: #f87b04;
+  --primary-600: #c66203;
+  --primary-700: #c34c1c;
+  --primary-800: #9a360e;
+  --primary-900: #9D3600;
+
+  /* TOOD Kind of yuck? */
+  --dark-primary-300: #e8d9cc;
+  --dark-primary-400: #c7ac9f;
+  --dark-primary-500: #947E77;
+  --dark-primary-600: #6F564D;
+  --dark-primary-700: #583c32;
+  --dark-primary-800: #4e342b;
+  --dark-primary-900: #422923;
+
+  --dark-accent-200: #debcb3;
+
+  --light-gradient-from: #EABBD7;
+  --light-gradient-to: #F1A865;
+  --dark-gradient-from: #7d3d63;
+  --dark-gradient-to: #ab6728;
+}
+
+.theme-pink {
+  --primary-300: #ff95ac;
+  --primary-400: #ef448e;
+  --primary-500: #f8047b;
+  --primary-600: #c60362;
+  --primary-700: #c31c4c;
+  --primary-800: #9a0e36;
+  --primary-900: #9D0036;
+
+  --dark-primary-300: #d9cce8;
+  --dark-primary-400: #ac9fc7;
+  --dark-primary-500: #7E7794;
+  --dark-primary-600: #564D6F;
+  --dark-primary-700: #3c3258;
+  --dark-primary-800: #342b4e;
+  --dark-primary-900: #292342;
+
+  --dark-accent-200: #bcb3de;
+
+  --light-gradient-from: #D7BBEA;
+  --light-gradient-to: #F165A8;
+  --dark-gradient-from: #6728ab;
+  --dark-gradient-to: #633d7d;
+}

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

@@ -1,6 +1,6 @@
 @layer components {
   a {
-    @apply text-blue hover:text-blue-dark hover:underline;
+    @apply text-primary-500 hover:text-primary-600 hover:underline;
   }
 
   b, strong {
@@ -12,11 +12,11 @@
   }
 
   .button {
-    @apply shadow-sm text-white hover:text-white bg-blue hover:bg-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-dark hover:no-underline;
+    @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;
   }
 
   .button-secondary {
-    @apply text-blue hover:text-blue-dark hover:underline;
+    @apply text-primary-500 hover:text-primary-600 hover:underline;
   }
 
   .button, .button-secondary, .button-alternative {

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

@@ -3,34 +3,35 @@
     /**
      * Color overrides
      **/
-    .bg-blue-darker {
+    .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-dark-blue-gradient {
+    .bg-dark-gradient {
       &:before {
-        background: linear-gradient(to bottom right, #633d7d, #2867ab 100%);
+        background: linear-gradient(to bottom right, var(--dark-gradient-from), var(--dark-gradient-to) 100%);
       }
-      background: linear-gradient(to bottom right, #633d7d, #2867ab 100%);
+      background: linear-gradient(to bottom right, var(--dark-gradient-from), var(--dark-gradient-to) 100%);
     }
 
     /**
      * General
      **/
     .button {
-      @apply ring-offset-sealBlue-400;
+      @apply ring-offset-darkPrimary-700;
     }
 
     .table {
       th {
-        @apply text-sealBlue-700;
+        @apply text-darkPrimary-400;
       }
 
       tbody {
         @apply border-gray-500;
 
         tr {
-          border-top: 1px solid theme('colors.sealBlue.600');
+          border-top: 1px solid theme('colors.darkPrimary.500');
         }
 
         td {
@@ -38,7 +39,7 @@
 
           a,
           input[type="submit"] {
-            @apply text-sealBlue-800;
+            @apply text-darkAccent-200;
           }
         }
       }
@@ -48,7 +49,7 @@
      * Form components
      **/
     .button-secondary {
-      @apply text-sealBlue-800;
+      @apply text-darkAccent-200;
     }
 
     .button-alternative {
@@ -64,94 +65,94 @@
      **/
     /* Color picker */
     .pcr-app {
-      @apply bg-sealBlue-300 border border-solid border-sealBlue-100;
+      @apply bg-darkPrimary-800 border border-solid border-darkPrimary-900;
 
       .pcr-interaction .pcr-result {
-        @apply text-sealBlue-900 border border-solid border-sealBlue-100 bg-sealBlue-300;
+        @apply text-darkPrimary-300 border border-solid border-darkPrimary-900 bg-darkPrimary-800;
 
         &:focus {
-          box-shadow: 0 0 0 1px theme('colors.blue.500'), 0 0 0 3px theme('colors.blue.500');
+          box-shadow: 0 0 0 1px theme('colors.primary.500'), 0 0 0 3px theme('colors.primary.500');
         }
       }
     }
 
     /* Date range picker */
     .daterangepicker {
-      @apply bg-sealBlue-300 border-sealBlue-100;
+      @apply bg-darkPrimary-800 border-darkPrimary-900;
 
       &::before {
-        border-bottom-color: theme('colors.sealBlue.100');
+        border-bottom-color: theme('colors.darkPrimary.900');
       }
 
       &::after {
-        border-bottom-color: theme('colors.sealBlue.300');
+        border-bottom-color: theme('colors.darkPrimary.800');
       }
 
       .calendar-table {
-        @apply bg-sealBlue-300 text-sealBlue-900;
+        @apply bg-darkPrimary-800 text-darkPrimary-300;
 
         /* navigation arrows */
         .available {
           span {
-            @apply border-blue-500;
+            @apply border-primary-500;
           }
         }
       }
 
       /* Clear and Apply buttons wrapper */
       .drp-buttons {
-        border-top-color: theme('colors.sealBlue.100');
-        @apply text-sealBlue-900;
+        border-top-color: theme('colors.darkPrimary.900');
+        @apply text-darkPrimary-300;
       }
 
       th {
         &.available:hover {
-          @apply bg-sealBlue-500;
+          @apply bg-darkPrimary-600;
         }
       }
 
       td {
         &.off {
-          @apply bg-sealBlue-300 text-white;
+          @apply bg-darkPrimary-800 text-white;
         }
 
         &.available:hover {
-          @apply bg-sealBlue-500;
+          @apply bg-darkPrimary-600;
         }
       }
 
       .hourselect, .minuteselect, .ampmselect {
-        @apply text-sealBlue-900 border-sealBlue-100 bg-sealBlue-300 !important;
+        @apply text-darkPrimary-300 border-darkPrimary-900 bg-darkPrimary-800 !important;
       }
     }
 
     /* Phone field */
     .iti__country-list {
-      @apply bg-sealBlue-300 border border-solid border-sealBlue-100;
+      @apply bg-darkPrimary-800 border border-solid border-darkPrimary-900;
     }
 
     /* Select2 */
     .select2-container {
       .select2-selection__rendered {
-        @apply text-sealBlue-900 !important;
+        @apply text-darkPrimary-300 !important;
       }
 
       .select2-dropdown {
-        @apply bg-sealBlue-400;
+        @apply bg-darkPrimary-700;
       }
 
       .select2-search__field {
-        @apply bg-sealBlue-300 border-sealBlue-100 !important;
+        @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
       }
 
       .select2-selection--multiple, .select2-selection--single {
-        @apply bg-sealBlue-300 focus:ring-blue border-sealBlue-100 !important;
-        @apply text-sealBlue-900;
+        @apply bg-darkPrimary-800 focus:ring-primary-500 border-darkPrimary-900 !important;
+        @apply text-darkPrimary-300;
       }
 
       /* For the selected options in the multiple select2 component */
       .select2-selection__choice {
-        @apply bg-blue-500 border-blue-500 !important;
+        @apply bg-primary-500 border-primary-500 !important;
         @apply text-white;
 
         .select2-selection__choice__remove {
@@ -164,48 +165,48 @@
       }
 
       .select2-results__option {
-        @apply text-sealBlue-900;
+        @apply text-darkPrimary-300;
       }
     }
 
     /* Trix Editor */
     trix-editor {
-      @apply bg-sealBlue-300 border-sealBlue-100 !important;
+      @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
 
       &:focus, &:active {
-        @apply border-blue !important;
+        @apply border-primary-500 !important;
       }
     }
 
     trix-toolbar {
       .trix-button-group, .trix-button {
-        @apply border-sealBlue-100 !important;
+        @apply border-darkPrimary-900 !important;
       }
     }
 
     .tribute-container {
       ul {
-        @apply bg-sealBlue-300 border-sealBlue-100 !important;
+        @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
       }
     }
 
     .trix-dialogs {
-      @apply bg-sealBlue-300 border-sealBlue-100 !important;
+      @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
     }
 
     .trix-content {
       a[href^="bullettrain://"] {
-        @apply bg-sealBlue-600 text-white;
+        @apply bg-darkPrimary-500 text-white;
       }
     }
 
     /* CKEditor */
     .ck {
-      --ck-color-base-background: theme('colors.sealBlue.300');
-      --ck-color-base-border: theme('colors.sealBlue.100');
-      --ck-color-toolbar-background: theme('colors.sealBlue.200');
-      --ck-color-toolbar-border: theme('colors.sealBlue.100');
-      --ck-color-text: theme('colors.sealBlue.900');
+      --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-editor__editable:not(.ck-editor__nested-editable) {
         @apply shadow-none;

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

@@ -22,20 +22,20 @@
     @apply gap-x-4;
   }
 
-  .bg-dark-blue-gradient {
-    background-image: linear-gradient(to bottom, #1c4cc3 0%, #0e369a 100%);
+  .bg-dark-gradient {
+    background-image: linear-gradient(to bottom, var(--primary-700) 0%, var(--primary-800) 100%);
   }
 
   .bg-dark-awesome-gradient {
     background-image: linear-gradient(to bottom right, darken(#D7BBEA, 45%) 10%, #0e369a 100%);
   }
 
-  .bg-light-blue-gradient {
+  .bg-light-gradient {
     &:before {
       content: "";
       position: fixed;
       z-index: -1;
-      background: linear-gradient(to bottom right, #D7BBEA, #65A8F1);
+      background: linear-gradient(to bottom right, var(--light-gradient-from), var(--light-gradient-to));
       top: 0px;
       left: 0px;
       bottom: 0px;

data/app/views/themes/light/_alert.html.erb

@@ -1,13 +1,13 @@
 <% color ||= 'yellow' %>
 
-<div class="rounded-md bg-<%= color %>-light border border-<%= color %> py-4 px-5 mb-3">
-  <h3 class="text-sm text-<%= color %>-darker font-light">
+<div class="rounded-md bg-<%= color %>-400 border border-<%= color %>-500 py-4 px-5 mb-3">
+  <h3 class="text-sm text-<%= color %>-900 font-light">
     <%= yield %>
   </h3>
 </div>
 
 <% # we have to list out the evaluations we want possible above so purgecss includes them in production. %>
 <% if false %>
-  <div class="bg-yellow-light border-yellow text-yellow-darker"></div>
-  <div class="bg-red-light border-red text-red-darker"></div>
+  <div class="bg-yellow-400 border-yellow-500 text-yellow-900"></div>
+  <div class="bg-red-400 border-red-500 text-red-900"></div>
 <% end %>

data/app/views/themes/light/_box.html.erb

@@ -6,8 +6,8 @@
 <% body = p.content_for(:body) || p.content_for(:raw_body) %>
 <% pagy ||= nil %>
 
-<div class="<%= "bg-white rounded-md shadow dark:bg-sealBlue-400" unless no_background %> overflow-hidden">
-  <div class="py-6 px-8 space-y-2 <%= 'border-b shadow-sm dark:border-sealBlue-500' if divider %>">
+<div class="<%= "bg-white rounded-md shadow dark:bg-darkPrimary-700" unless no_background %> overflow-hidden">
+  <div class="py-6 px-8 space-y-2 <%= 'border-b shadow-sm dark:border-darkPrimary-600' if divider %>">
     <% if p.content_for? :title %>
       <h2 class="<%= title_size %> font-semibold dark:text-white">
         <%= p.content_for :title %>
@@ -53,13 +53,13 @@
   </div>
 
   <% if p.content_for? :footer %>
-    <div class="py-4 px-8 bg-gray-50 border-t dark:bg-sealBlue-300 dark:border-sealBlue-500">
+    <div class="py-4 px-8 bg-gray-50 border-t dark:bg-darkPrimary-800 dark:border-darkPrimary-600">
       <%= p.content_for :footer %>
     </div>
   <% end %>
 
   <% if p.content_for? :raw_footer %>
-    <div class="bg-gray-50 dark:bg-sealBlue-300">
+    <div class="bg-gray-50 dark:bg-darkPrimary-800">
       <%= p.content_for :raw_footer %>
     </div>
   <% end %>

data/app/views/themes/light/_breadcrumb.html.erb

@@ -15,7 +15,7 @@
 
     <% # don't link to the same page we're already on. %>
     <% if url && url != request.url %>
-      <%= link_to label, url, class: "#{item_style} hover:text-gray-700 hover:underline dark:text-blue-300" %>
+      <%= link_to label, url, class: "#{item_style} hover:text-gray-700 hover:underline dark:text-primary-300" %>
     <% else %>
       <span class="<%= item_style %>"><%= label %></span>
     <% end %>

data/app/views/themes/light/_cell.html.erb

@@ -27,7 +27,7 @@
 
       <% if completion_percent %>
         <div class="mt-3 h-4 bg-gray-100 shadow-inner rounded w-full">
-          <div class="h-4 animate-pulse bg-blue rounded" style="width: <%= completion_percent %>%"></div>
+          <div class="h-4 animate-pulse bg-primary-500 rounded" style="width: <%= completion_percent %>%"></div>
         </div>
       <% end %>
 

data/app/views/themes/light/_decision_line.html.erb

@@ -5,7 +5,7 @@
     <div class="w-full border-t border-gray-300 dark:border-gray-500"></div>
   </div>
   <div class="relative flex justify-center">
-    <span class="px-2 bg-white text-gray-500 uppercase text-xs dark:text-gray-300 dark:bg-sealBlue-400">
+    <span class="px-2 bg-white text-gray-500 uppercase text-xs dark:text-gray-300 dark:bg-darkPrimary-700">
       <%= label %>
     </span>
   </div>

data/app/views/themes/light/_line.html.erb

@@ -1,3 +1,3 @@
 <div class="border-b border-gray-200 pb-4 dark:border-gray-500" style="position: relative;">
-  <div style="background-color: #047bf8; width: 26px; height: 4px; position: absolute; left: 0; bottom: -2px; border: 1px solid #047bf8; border-radius: 1px;"></div>
+  <div style="background-color: var(--primary-500); width: 26px; height: 4px; position: absolute; left: 0; bottom: -2px; border: 1px solid var(--primary-500); border-radius: 1px;"></div>
 </div>

data/app/views/themes/light/conversations/_card.html.erb

@@ -1,6 +1,6 @@
 <% conversation ||= subscription.conversation %>
 
-<div class="<%= 'border-l-blue border-l-4 border-blue-700' if subscription.unread? %>">
+<div class="<%= 'border-l-primary-500 border-l-4 border-primary-600' if subscription.unread? %>">
 
   <%= link_to [:account, current_user, :conversations, :subscriptions, conversation_id: subscription.conversation.id], class: "#{current_conversation ? 'bg-gray-100 border-l ' : 'bg-white'} h-28 p-1 flex border-b-2 cursor-pointer hover:no-underline  hover:bg-gray-50 relative items-center" do %>
     <div class="md:w-1/4 w-1/5 lg:inline-block md:hidden flex-shrink-0">

data/app/views/themes/light/conversations/_message.html.erb

@@ -65,9 +65,9 @@
           data-action="<%= 'mouseenter->reply#showReplyButton click->reply#showReplyButton' unless placeholder_message || show_as_thread %>" data-show-class="<%= current_user_message ? 'mr-10' : 'ml-10' %>"
           >
           <% if placeholder_message %>
-            <div class="cursor-pointer" data-thread-url="<%= url_for([:thread, :account, message.thread_origin_message || message]) %>" data-action="click->reply#reply"><span class="px-2 py-1 text-xs text-gray-300 rounded-lg inline-block <%= rounding_modifier %> border-blue-300 border break-words sm:max-w-sm max-w-tiny"><%= Nokogiri::HTML.fragment(trix_sanitize(message.body)).text.truncate(80) %></span></div>
+            <div class="cursor-pointer" data-thread-url="<%= url_for([:thread, :account, message.thread_origin_message || message]) %>" data-action="click->reply#reply"><span class="px-2 py-1 text-xs text-gray-300 rounded-lg inline-block <%= rounding_modifier %> border-primary-300 border break-words sm:max-w-sm max-w-tiny"><%= Nokogiri::HTML.fragment(trix_sanitize(message.body)).text.truncate(80) %></span></div>
           <% else %>
-            <div><span class="px-4 py-2 rounded-lg inline-block <%= rounding_modifier %> <%= current_user_message ? ' bg-blue-600 text-white' : ' bg-gray-300 text-gray-600' %> "><%= trix_sanitize(message.body) %></span></div>
+            <div><span class="px-4 py-2 rounded-lg inline-block <%= rounding_modifier %> <%= current_user_message ? ' bg-primary-600 text-white' : ' bg-gray-300 text-gray-600' %> "><%= trix_sanitize(message.body) %></span></div>
           <% end %>
         </div>
         <%= avatar %>
@@ -86,7 +86,7 @@
       </div>
       <% if message.replies.any? && !show_as_thread %>
         <div class="<%= 'text-right' if current_user_message %>">
-          <button class="text-xs text-blue-400 text-right mr-12 ml-12" data-thread-url="<%= url_for([:thread, :account, message.thread_origin_message || message]) %>" data-action="reply#reply"><%= message.replies.size %> <%= t("conversations/messages.navigation.reply").pluralize(message.replies.size) %></button>
+          <button class="text-xs text-primary-400 text-right mr-12 ml-12" data-thread-url="<%= url_for([:thread, :account, message.thread_origin_message || message]) %>" data-action="reply#reply"><%= message.replies.size %> <%= t("conversations/messages.navigation.reply").pluralize(message.replies.size) %></button>
         </div>
       <% end %>
 

data/app/views/themes/light/fields/_field.html.erb

@@ -17,9 +17,9 @@ has_errors = errors.any? || content_for(:error).present? || other_options[:error
 options[:class] = "#{options[:class]} block w-full rounded-md shadow-sm font-light text-sm"
 
 options[:class] += if has_errors
-  " pr-10 border-red text-red-darker placeholder-red focus:outline-none focus:ring-red focus:border-red dark:bg-sealBlue-300 dark:text-sealBlue-900"
+  " pr-10 border-red-500 text-red-900 placeholder-red-500 focus:outline-none focus:ring-red-500 focus:border-red-500 dark:bg-darkPrimary-800 dark:text-darkPrimary-300"
 else
-  " focus:ring-blue focus:border-blue border-gray-300 dark:bg-sealBlue-300 dark:border-sealBlue-100 dark:text-sealBlue-900"
+  " focus:ring-primary-500 focus:border-primary-500 border-gray-300 dark:bg-darkPrimary-800 dark:border-darkPrimary-900 dark:text-darkPrimary-300"
 end
 
 %>

data/app/views/themes/light/layouts/_account.html.erb

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html class="theme-<%= BulletTrain::Themes::Light.color %>">
   <head>
     <%= render 'themes/light/layouts/head' %>
   </head>
-  <body class="bg-light-blue-gradient text-gray-700 text-sm font-normal dark:bg-dark-blue-gradient dark:text-sealBlue-900">
-    <div class="p-4 bg-blue-darker electron-draggable electron-title-bar hidden electron-mobile-only"></div>
+  <body class="bg-light-gradient text-gray-700 text-sm font-normal dark:bg-dark-gradient dark:text-darkPrimary-300">
+    <div class="p-4 bg-primary-900 electron-draggable electron-title-bar hidden electron-mobile-only"></div>
     <div class="md:p-5 main-container-padding">
       <div class="h-screen md:h-auto overflow-hidden md:rounded-lg flex shadow main-container"
         data-controller="mobile-menu"
@@ -14,7 +14,7 @@
       >
 
         <% menu = capture do %>
-          <div class="flex items-center flex-shrink-0 p-4 bg-blue-darker md:rounded-tl-lg electron-draggable electron-title-bar dark:bg-black dark:bg-opacity-10">
+          <div class="flex items-center flex-shrink-0 p-4 bg-primary-900 md:rounded-tl-lg electron-draggable electron-title-bar dark:bg-black dark:bg-opacity-10">
             <%= image_tag image_path("logo/logo.png"), class: 'h-5 w-auto mx-auto' %>
 
             <div class="lg:hidden absolute right-0">
@@ -40,7 +40,7 @@
                     <div class="text-white">
                       <%= current_user.name %>
                     </div>
-                    <div class="text-2xs tracking-widest uppercase text-blue-light group-hover:text-white dark:text-gray-500">
+                    <div class="text-2xs tracking-widest uppercase text-primary-300 group-hover:text-white dark:text-gray-500">
                       <%= current_team.name %>
                     </div>
                   </div>
@@ -79,20 +79,20 @@
 
               class="fixed inset-0" aria-hidden="true"
             >
-              <div class="absolute inset-0 bg-light-blue-gradient opacity-75"></div>
+              <div class="absolute inset-0 bg-light-gradient opacity-75"></div>
             </button>
             <div
               hidden
               data-reveal
               data-transition
               data-transition-enter="transition ease-in-out duration-200 transform"
-              data-transition-enter-start="-translate-x-full"
-              data-transition-enter-end="translate-x-0"
+              data-transition-enter-start="-trandarkPrimary-x-full"
+              data-transition-enter-end="trandarkPrimary-x-0"
               data-transition-leave="transition ease-in-out duration-200 transform"
-              data-transition-leave-start="translate-x-0"
-              data-transition-leave-end="-translate-x-full"
+              data-transition-leave-start="trandarkPrimary-x-0"
+              data-transition-leave-end="-trandarkPrimary-x-full"
 
-              class="relative flex-1 flex flex-col max-w-xs w-full pb-4 bg-dark-blue-gradient shadow-xl"
+              class="relative flex-1 flex flex-col max-w-xs w-full pb-4 bg-dark-gradient shadow-xl"
             >
               <%= menu %>
             </div>
@@ -100,16 +100,16 @@
           </div>
         </div>
 
-        <div class="hidden lg:flex lg:flex-shrink-0 overflow-y-auto bg-gradient-to-b from-vividBlue-700 to-vividBlue-800 dark:from-sealBlue-200 dark:to-sealBlue-200">
+        <div class="hidden lg:flex lg:flex-shrink-0 overflow-y-auto bg-gradient-to-b from-primary-700 to-primary-800 dark:from-darkPrimary-800 dark:to-darkPrimary-800">
           <div class="w-64">
             <%= menu %>
           </div>
         </div>
 
-        <div class="flex flex-col w-0 flex-1 overflow-y-auto bg-gray-100 dark:bg-sealBlue-200 lg:border-l dark:border-gray-500">
+        <div class="flex flex-col w-0 flex-1 overflow-y-auto bg-gray-100 dark:bg-darkPrimary-800 lg:border-l dark:border-gray-500">
           <main class="flex-1 relative z-0 focus:outline-none" tabindex="0">
             <div class="flex flex-row items-center shadow-sm electron-draggable">
-              <button class="mobile-menu-trigger lg:hidden h-12 w-12 ml-1 flex-none inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue"
+              <button class="mobile-menu-trigger lg:hidden h-12 w-12 ml-1 flex-none inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                 data-action="mobile-menu#toggle"
               >
                 <span class="sr-only">Open Application Menu</span>

data/app/views/themes/light/layouts/_devise.html.erb

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html class="theme-<%= BulletTrain::Themes::Light.color %>">
   <head>
     <%= render 'themes/light/layouts/head' %>
   </head>
-  <body class="bg-light-blue-gradient text-gray-700 text-sm font-normal electron-draggable dark:bg-dark-blue-gradient dark:text-sealBlue-900">
+  <body class="bg-light-gradient text-gray-700 text-sm font-normal electron-draggable dark:bg-dark-gradient dark:text-darkPrimary-300">
     <div data-turbo="false">
       <%= yield %>
     </div>

data/app/views/themes/light/menu/_heading.html.erb

@@ -1,3 +1,3 @@
-<div class="text-xs py-2 uppercase tracking-wider text-blue-lightish">
+<div class="text-xs py-2 uppercase tracking-wider text-primary-400">
   <%= yield %>
 </div>

data/app/views/themes/light/menu/_item.html.erb

@@ -3,11 +3,11 @@
 <% method ||= nil %>
 <% active ||= request.path == url %>
 
-<%= send (method ? :button_to : :link_to), url, class: "block group hover:text-white hover:no-underline hover-indent-child #{'bg-blue-darker dark:bg-black dark:bg-opacity-10' if active} text-white px-2 py-2 rounded-md dark:text-white", method: method do %>
+<%= send (method ? :button_to : :link_to), url, class: "block group hover:text-white hover:no-underline hover-indent-child #{'bg-primary-900 dark:bg-black dark:bg-opacity-10' if active} text-white px-2 py-2 rounded-md dark:text-white", method: method do %>
   <div class="inline-block indent-child flex items-center">
     <!-- Heroicon name: home -->
     <% if p.content_for? :icon %>
-      <span class="mr-3 h-6 w-6 text-center text-blue-light text-xl leading-6 dark:text-gray-400">
+      <span class="mr-3 h-6 w-6 text-center text-primary-300 text-xl leading-6 dark:text-gray-400">
         <%= p.content_for :icon %>
       </span>
     <% end %>

data/app/views/themes/light/workflow/_box.html.erb

@@ -4,7 +4,7 @@
 
 <div class="min-h-screen flex flex-col justify-center sm:py-12">
   <div class="mx-auto w-full <%= width %> p-1.5">
-    <div class="bg-white py-8 px-10 shadow rounded-lg dark:bg-sealBlue-400">
+    <div class="bg-white py-8 px-10 shadow rounded-lg dark:bg-darkPrimary-700">
       <div class="sm:mx-auto sm:w-full sm:max-w-md py-5">
         <a href="<%= main_app.root_path %>" class="block py-3">
           <img alt="" src="<%= image_path("logo/logo.png") %>" width="<%= image_width_for_height("logo/logo.png", BulletTrain::Themes.logo_height) %>" height="<%= BulletTrain::Themes.logo_height %>" class="mx-auto h-12 w-auto" />

data/lib/bullet_train/themes/light/version.rb

@@ -1,7 +1,7 @@
 module BulletTrain
   module Themes
     module Light
-      VERSION = "1.0.16"
+      VERSION = "1.0.17"
     end
   end
 end

data/lib/bullet_train/themes/light.rb

@@ -5,9 +5,12 @@ require "bullet_train/themes/tailwind_css"
 module BulletTrain
   module Themes
     module Light
+      # TODO Not sure this is the right place for this in the long-term.
+      mattr_accessor :color, default: :blue
+
       class Theme < BulletTrain::Themes::TailwindCss::Theme
         def directory_order
-          ['light'] + super
+          ["light"] + super
         end
       end
     end

data/tailwind.light.config.js

@@ -20,43 +20,42 @@ module.exports = {
       },
       colors: {
         red: {
-          darker: '#652424',
-          DEFAULT: '#e86060',
-          light: '#ee8989',
+          400: '#ee8989',
+          500: '#e86060',
+          900: '#652424',
         },
+
         yellow: {
-          darker: '#6e6446',
-          DEFAULT: '#fbe6a8',
-          light: '#fcedbe',
-        },
-        blue: {
-          light: '#95acff',
-          lightish: '#448eef',
-          DEFAULT: '#047bf8',
-          dark: '#0362c6',
-          darker: '#00369D',
+          400: '#fcedbe',
+          500: '#fbe6a8',
+          900: '#6e6446',
         },
-        green: {
-          darker: '#166e0c',
-          dark: '#1b850f',
-          DEFAULT: '#71c21a',
-          light: '#c5f0c0',
+
+        primary: {
+          300: 'var(--primary-300)',
+          400: 'var(--primary-400)',
+          500: 'var(--primary-500)',
+          600: 'var(--primary-600)',
+          700: 'var(--primary-700)',
+          800: 'var(--primary-800)',
+          900: 'var(--primary-900)',
         },
-        sealBlue: {
-          100: '#232942',
-          200: '#293145',
-          300: '#2b344e',
-          400: '#323c58',
-          500: '#4D566F',
-          600: '#777E94',
-          700: '#9facc7',
-          800: '#b3bcde',
-          900: '#ccd9e8'
+
+        darkPrimary: {
+          300: 'var(--dark-primary-300)',
+          400: 'var(--dark-primary-400)',
+          500: 'var(--dark-primary-500)',
+          600: 'var(--dark-primary-600)',
+          700: 'var(--dark-primary-700)',
+          800: 'var(--dark-primary-800)',
+          900: 'var(--dark-primary-900)',
         },
-        vividBlue: {
-          700: '#1c4cc3',
-          800: '#0e369a'
+
+        // This is a weird one-off for dark-mode.
+        darkAccent: {
+          200: 'var(--dark-accent-200)',
         },
+
         black: {
           100: '#000000',
           200: '#101112',

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bullet_train-themes-light
 version: !ruby/object:Gem::Version
-  version: 1.0.16
+  version: 1.0.17
 platform: ruby
 authors:
 - Andrew Culver
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-05-22 00:00:00.000000000 Z
+date: 2022-05-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -61,6 +61,7 @@ files:
 - app/assets/stylesheets/light/fields/super_select.css
 - app/assets/stylesheets/light/fields/trix_editor.css
 - app/assets/stylesheets/light/mailer.scss
+- app/assets/stylesheets/light/tailwind/colors.css
 - app/assets/stylesheets/light/tailwind/components.css
 - app/assets/stylesheets/light/tailwind/dark-mode.css
 - app/assets/stylesheets/light/tailwind/utilities.css