bullet_train-themes-light 1.2.10 → 1.2.12

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -23,28 +23,7 @@
   .gap-x {
     @apply gap-x-4;
   }
-
-  .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-gradient {
-    &:before {
-      content: "";
-      position: fixed;
-      z-index: -1;
-      background: linear-gradient(to bottom right, var(--light-gradient-from), var(--light-gradient-to));
-      top: 0px;
-      left: 0px;
-      bottom: 0px;
-      right: 0px;
-    }
-  }
-
+ 
   [hidden] {
     display: none !important;
   }

data/app/views/showcase/previews/partials/_alert.html.erb

@@ -0,0 +1,16 @@
+<% showcase.sample "Basic" do %>
+  <%= render "shared/alert" do |p| %>
+    Example message.
+  <% end %>
+<% end %>
+
+<% showcase.sample "Error" do %>
+  <%= render "shared/alert", color: :red do |p| %>
+    Example error.
+  <% end %>
+<% end %>
+
+<% showcase.options do |o| %>
+  <% o.required :block, "Message" %>
+  <% o.optional :color, "Color", default: :yellow, options: %i[ yellow red ] %>
+<% end %>

data/app/views/showcase/previews/partials/_box.html.erb

@@ -0,0 +1,43 @@
+<% showcase.sample "Basic" do %>
+  <%= render "shared/box" do |partial| %>
+    <% partial.content_for :title, "Title" %>
+    <% partial.content_for :description, "Description" %>
+    <% partial.content_for :body, "Lorem ipsum dolor sit amet…" %>
+  <% end %>
+<% end %>
+
+<% showcase.sample "With Divider" do %>
+  <%= render "shared/box", divider: true do |partial| %>
+    <% partial.content_for :title, "Title" %>
+    <% partial.content_for :description, "Description" %>
+    <% partial.content_for :body, "Lorem ipsum dolor sit amet…" %>
+  <% end %>
+<% end %>
+
+<% showcase.sample "With top border" do %>
+  <%= render "shared/box", border_top: true do |partial| %>
+    <% partial.content_for :title, "Title" %>
+  <% end %>
+<% end %>
+
+<% showcase.sample "Without background" do %>
+  <%= render "shared/box", no_background: true do |partial| %>
+    <% partial.content_for :title, "Title" %>
+  <% end %>
+<% end %>
+
+<% showcase.options.context :nice_partials do |o| %>
+  <% o.optional.content_block :title %>
+  <% o.optional :title_size, "A CSS string to control title size" %>
+  <% o.optional :title_padding, "A CSS string to control title padding" %>
+  <% o.optional.content_block :description, "Content text to render beneath the title" %>
+  <% o.optional.content_block :table %>
+  <% o.optional.content_block :body, "The main content body of the element" %>
+  <% o.optional.content_block :footer, "Add a footer at the bottom within the container, with a top border and some padding" %>
+  <% o.optional.content_block :raw_footer, "Add a footer without a top border and padding" %>
+  <% o.optional.content_block :actions, "Content designated to contain actions, like buttons, beneath the body" %>
+  <% o.optional :pagy, "Pass in a pagy to render a pagy_nav below the body", type: "Pagy object" %>
+  <% o.optional :divider, "Whether to add dividers between sections", default: false %>
+  <% o.optional :border_top, "Whether to add a top border to the container element", default: false %>
+  <% o.optional :no_background, "Pass true to remove the surrounding background on the container", default: false %>
+<% end %>

data/app/views/showcase/previews/partials/_breadcrumb.html.erb

@@ -0,0 +1,14 @@
+<% showcase.sample "Basic" do %>
+  <%= render "shared/breadcrumb", url: root_url, label: "Breadcrumb Link" %>
+  <%= render "shared/breadcrumb", label: "Unlinked label" %>
+<% end %>
+
+<%# TODO: Find a suitable url_for GET route here that every BulletTrain app would have. %>
+<%# showcase.sample "With model url_for" do %>
+  <%#= render "shared/breadcrumb", url: [:account, Scaffolding::CompletelyConcrete::TangibleThing.new(id: 1)], label: "Concept" %>
+<%# end %>
+
+<% showcase.options do |o| %>
+  <% o.required :label, "The breadcrumb text, either shown in the link or the plain label" %>
+  <% o.optional :url, "A URL string, e.g. root_url, or something that's passed to url_for.", type: [String, "Valid url_for argument", "nil"].join("\n") %>
+<% end %>

data/app/views/showcase/previews/partials/_page.html.erb

@@ -0,0 +1,30 @@
+<% showcase.description do %>
+  <p>Partial to wrap an app page, like a #show view.</p>
+
+  <p>It's composed of three content sections:</p>
+
+  <p>
+    <ol>
+      <li>render "shared/title", with the title and actions provided.</li>
+      <li>render "shared/notices", for any account level notices.</li>
+      <li>Outputs the passed body.</li>
+    </ol>
+  </p>
+<% end %>
+
+<% showcase.sample "Basic" do %>
+  <%= render "shared/page" do |partial| %>
+    <% partial.content_for :title, "Title" %>
+    <% partial.content_for :actions do %>
+      <%= link_to "Home", root_url, class: "border-2 p-2 rounded-full border-indigo-300" %>
+      <%= link_to "Another link", root_url, class: "border-2 p-2 rounded-full border-indigo-300" %>
+    <% end %>
+    <% partial.content_for :body, "Lorem ipsum dolor sit amet…" %>
+  <% end %>
+<% end %>
+
+<% showcase.options.context :nice_partials do |o| %>
+  <% o.optional.content_block :title %>
+  <% o.optional.content_block :actions %>
+  <% o.optional.content_block :body %>
+<% end %>

data/app/views/showcase/previews/partials/_title.html.erb

@@ -0,0 +1,14 @@
+<% showcase.sample "Basic" do %>
+  <%= render "shared/title" do |partial| %>
+    <% partial.content_for :title, "Title" %>
+    <% partial.content_for :actions do %>
+      <%= link_to "Home", root_url, class: "border-2 p-2 rounded-full border-indigo-300" %>
+      <%= link_to "Another link", root_url, class: "border-2 p-2 rounded-full border-indigo-300" %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% showcase.options.context :nice_partials do |o| %>
+  <% o.optional.content_block :title %>
+  <% o.optional.content_block :actions %>
+<% end %>

data/app/views/showcase/previews/partials/actions/_box.html.erb

@@ -0,0 +1,11 @@
+<% showcase.sample "Basic" do %>
+  <%= render "shared/actions/box" do |partial| %>
+    <% partial.content_for :title, "Title" %>
+    <% partial.content_for :table, "Some table content" %>
+  <% end %>
+<% end %>
+
+<% showcase.options.context :nice_partials do |o| %>
+  <% o.optional.content_block :title %>
+  <% o.optional.content_block :table %>
+<% end %>

data/app/views/showcase/previews/partials/actions/_list.html.erb

@@ -0,0 +1,9 @@
+<% showcase.sample "Basic" do %>
+  <%= render "shared/actions/list" do %>
+    This is a list
+  <% end %>
+
+  <%= render "shared/actions/list" do %>
+    This is a second list
+  <% end %>
+<% end %>

data/app/views/showcase/previews/tailwind/components/_button.html.erb

@@ -0,0 +1,17 @@
+<% showcase.description "Button styles are applied as a utility class." %>
+
+<% showcase.sample "Basic" do %>
+  <a class="button">Default Button</a>
+<% end %>
+
+<% showcase.sample "Secondary" do %>
+  <a class="button-secondary">Secondary Button</a>
+<% end %>
+
+<% showcase.sample "Alternative" do %>
+  <a class="button-alternative">Alternative Button</a>
+<% end %>
+
+<% showcase.sample "Smaller" do %>
+  <a class="button button-smaller">Smaller Button</a>
+<% end %>

data/app/views/showcase/previews/tailwind/components/_link.html.erb

@@ -0,0 +1,5 @@
+<% showcase.description "Link elements have a default style." %>
+
+<% showcase.sample "Basic" do %>
+  <a href="#">Default Link</a>
+<% end %>

data/app/views/showcase/previews/tailwind/utilities/_small_text.html.erb

@@ -0,0 +1,5 @@
+<% showcase.description "An even smaller, stylized text is provided as a utility class." %>
+
+<% showcase.sample "Smaller Text" do %>
+  <span class="text-2xs">Even smaller text than Tailwind provides!</span>
+<% end %>

data/app/views/showcase/previews/tailwind/utilities/_spacing.html.erb

@@ -0,0 +1,21 @@
+<% showcase.description "Generic spacing utilities that can be mapped to a concrete Tailwind class by each theme." %>
+
+<% showcase.sample "Vertical Spacing" do %>
+  <div class="space-y">
+    <div class="button block">Item</div>
+    <div class="button block">Item</div>
+    <div class="button block">Item</div>
+    <div class="button block">Item</div>
+  </div>
+<% end %>
+
+<% showcase.sample "Horizontal Spacing" do %>
+  <div class="flex space-x">
+    <div class="flex-1 button">Item</div>
+    <div class="flex-1 button">Item</div>
+    <div class="flex-1 button">Item</div>
+    <div class="flex-1 button">Item</div>
+  </div>
+<% end %>
+
+<% # TODO Add `gap-y` and `gap-x`. %>

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

@@ -1,15 +1,19 @@
-<% color ||= 'yellow' %>
+<% color ||= "yellow" %>
 <% tighter ||= false %>
 
-<div class="rounded-md bg-<%= color %>-400 border border-<%= color %>-500 py-4 px-5 mb-3">
-  <h3 class="text-sm text-<%= color %>-800 font-light">
+<% 
+case color.to_sym
+when :yellow
+  div_classes = "bg-amber-100 border-amber-200"
+  header_classes = "text-amber-800"
+when :red
+  div_classes = "bg-red-300 border-red-400"
+  header_classes = "text-red-700"
+end
+%>
+
+<div class="rounded-md border <%= div_classes %> py-4 px-5 mb-3">
+  <h3 class="text-sm  <%= header_classes %> 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-400 border-yellow-500 dark:border-yellow-200 text-yellow-800 dark:text-yellow-200"></div>
-  <div class="bg-red-400 border-red-500 dark:border-red-200 text-red-800 dark:text-red-200"></div>
-  <div class="bg-blue-400 border-blue-500 dark:border-blue-200 text-blue-800 dark:text-blue-200"></div>
-<% end %>
+</div>

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

@@ -8,8 +8,8 @@
 <% body = p.content_for(:body) || p.content_for(:raw_body) %>
 <% pagy ||= nil %>
 
-<div class="<%= "bg-white rounded-md shadow dark:bg-darkPrimary-700" unless no_background %> overflow-hidden <%= border_top ? "border-t dark:border-darkPrimary-500" : "" %>">
-  <div class="py-6 px-8 <%= title_padding %> space-y-2 <%= 'border-b shadow-sm dark:border-darkPrimary-600' if divider %>">
+<div class="<%= "bg-white rounded-md shadow dark:bg-slate-700 dark:bg-opacity-50" unless no_background %> overflow-hidden <%= border_top ? "border-t dark:border-slate-500" : "" %>">
+  <div class="py-6 px-8 <%= title_padding %> space-y-2 <%= 'border-b shadow-sm dark:border-slate-600' if divider %>">
     <% if p.content_for? :title %>
       <h2 class="text-xl font-semibold dark:text-white <%= title_size %>">
         <%= p.content_for :title %>
@@ -17,7 +17,7 @@
     <% end %>
 
     <% if p.content_for? :description %>
-      <p class="text-gray-400 font-light leading-normal">
+      <p class="text-slate-400 font-light leading-normal">
         <%= p.content_for :description %>
       </p>
     <% end %>
@@ -55,13 +55,13 @@
   </div>
 
   <% if p.content_for? :footer %>
-    <div class="py-4 px-8 bg-gray-50 border-t dark:bg-darkPrimary-900 dark:border-darkPrimary-600">
+    <div class="py-4 px-8 bg-slate-50 border-t dark:bg-slate-900 dark:border-slate-600">
       <%= p.content_for :footer %>
     </div>
   <% end %>
 
   <% if p.content_for? :raw_footer %>
-    <div class="bg-gray-50 dark:bg-darkPrimary-900">
+    <div class="bg-slate-50 dark:bg-slate-900">
       <%= p.content_for :raw_footer %>
     </div>
   <% end %>

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

@@ -7,15 +7,15 @@
 <li>
   <div class="flex items-center">
     <!-- Heroicon name: chevron-right -->
-    <svg class="flex-shrink-0 h-3 w-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <svg class="flex-shrink-0 h-3 w-3 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
       <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
     </svg>
 
-    <% item_style = "ml-3 text-gray-500 uppercase text-2xs tracking-widest" %>
+    <% item_style = "ml-3 text-slate-500 uppercase text-2xs tracking-widest" %>
 
     <% # 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-primary-300" %>
+      <%= link_to label, url, class: "#{item_style} hover:text-slate-700 hover:underline dark:text-primary-300" %>
     <% else %>
       <span class="<%= item_style %>"><%= label %></span>
     <% end %>

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

@@ -26,13 +26,13 @@
       </div>
 
       <% if completion_percent %>
-        <div class="mt-3 h-4 bg-gray-100 shadow-inner rounded w-full">
+        <div class="mt-3 h-4 bg-slate-100 shadow-inner rounded w-full">
           <div class="h-4 animate-pulse bg-primary-500 rounded" style="width: <%= completion_percent %>%"></div>
         </div>
       <% end %>
 
       <% if p.content_for? :status %>
-        <div class="<% "mt-2" if completion_percent %> uppercase text-xs text-gray-400">
+        <div class="<% "mt-2" if completion_percent %> uppercase text-xs text-slate-400">
           <%= p.content_for :status %>
         </div>
       <% end %>

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

@@ -2,10 +2,10 @@
 
 <div class="relative">
   <div class="absolute inset-0 flex items-center">
-    <div class="w-full border-t border-gray-300 dark:border-gray-500"></div>
+    <div class="w-full border-t border-slate-300 dark:border-slate-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-darkPrimary-700">
+    <span class="px-2 bg-white text-slate-500 uppercase text-xs dark:text-slate-300 dark:bg-slate-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: var(--primary-500); width: 26px; height: 4px; position: absolute; left: 0; bottom: -2px; border: 1px solid var(--primary-500); border-radius: 1px;"></div>
+<div class="border-b border-slate-200 pb-4 dark:border-slate-600" style="position: relative;">
+  <div style="background-color: var(--primary-500); width: 26px; height: 3px; position: absolute; left: 0; bottom: -2px; border: 1px solid var(--primary-500); border-radius: 1px;"></div>
 </div>

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

@@ -0,0 +1,30 @@
+<% yield p = np %>
+
+<% link_url ||= "#" %>
+<% memberships ||= [] %>
+
+<li class="bg-white shadow overflow-hidden sm:rounded-md dark:bg-slate-700">
+  <%= link_to link_url, class: "group block hover:bg-slate-50 dark:hover:bg-slate-400 dark:text-slate-800" do %>
+    <div class="px-4 py-4 flex items-center sm:pl-8 sm:pr-6">
+      <div class="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
+        <div>
+          <% if p.content_for? :name %>
+            <div class="flex text-xl font-semibold text-blue uppercase group-hover:text-blue-800 tracking-widest dark:text-white">
+              <%= p.content_for :name %>
+            </div>
+          <% end %>
+        </div>
+        <div class="mt-4 flex-shrink-0 sm:mt-0">
+          <div class="flex overflow-hidden">
+            <%= render 'account/shared/memberships/photos', memberships: memberships %>
+          </div>
+        </div>
+      </div>
+      <div class="ml-5 flex-shrink-0">
+        <svg class="h-5 w-5 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+        </svg>
+      </div>
+    </div>
+  <% end %>
+</li>