bullet_train-themes-light 1.38.0 → 1.39.0

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

@@ -1,12 +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');
+  --secondary-50: var(--color-violet-50);
+  --secondary-100: var(--color-violet-100);
+  --secondary-200: var(--color-violet-200);
+  --secondary-300: var(--color-violet-300);
+  --secondary-400: var(--color-violet-400);
+  --secondary-500: var(--color-violet-500);
+  --secondary-600: var(--color-violet-600);
+  --secondary-700: var(--color-violet-700);
+  --secondary-800: var(--color-violet-800);
+  --secondary-900: var(--color-violet-900);
 }

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

@@ -1,12 +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');
+  --secondary-50: var(--color-yellow-50);
+  --secondary-100: var(--color-yellow-100);
+  --secondary-200: var(--color-yellow-200);
+  --secondary-300: var(--color-yellow-300);
+  --secondary-400: var(--color-yellow-400);
+  --secondary-500: var(--color-yellow-500);
+  --secondary-600: var(--color-yellow-600);
+  --secondary-700: var(--color-yellow-700);
+  --secondary-800: var(--color-yellow-800);
+  --secondary-900: var(--color-yellow-900);
 }

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

@@ -1,12 +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');
+  --secondary-50: var(--color-zinc-50);
+  --secondary-100: var(--color-zinc-100);
+  --secondary-200: var(--color-zinc-200);
+  --secondary-300: var(--color-zinc-300);
+  --secondary-400: var(--color-zinc-400);
+  --secondary-500: var(--color-zinc-500);
+  --secondary-600: var(--color-zinc-600);
+  --secondary-700: var(--color-zinc-700);
+  --secondary-800: var(--color-zinc-800);
+  --secondary-900: var(--color-zinc-900);
 }

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

@@ -2,24 +2,26 @@
 @import "./utilities/billing";
 @import "./utilities/scroll-reveal";
 
-@layer utilities {
-  .space-y {
-    @apply space-y-5;
+@utility space-y {
+  & > :not(:first-child) {
+    margin-top: calc(var(--spacing) * 5);
   }
+}
 
-  .space-x {
-    @apply space-x-3;
+@utility space-x {
+  & > :not(:first-child) {
+    margin-left: calc(var(--spacing) * 3);
   }
+}
 
-  .gap-y {
-    @apply gap-y-5;
-  }
+@utility gap-y {
+  row-gap: calc(var(--spacing) * 5);
+}
 
-  .gap-x {
-    @apply gap-x-4;
-  }
- 
-  [hidden] {
-    display: none !important;
-  }
+@utility gap-x {
+  column-gap: calc(var(--spacing) * 4);
+}
+
+[hidden] {
+  display: none !important;
 }

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

@@ -1,8 +1,67 @@
-/*
- * This is an extra level of indirection because for some reason using @tailwind directives directly inside this file doesn't work.
- * When we move to v4 we should be able to just to `@import "tailwindcss"` here.
- */
-@import "tailwindcss_import";
+@import "tailwindcss";
 
-@import "$ThemeStylesheetsDir/application.css"; /* alias used to support ejecting the file to local */
+@source "../../../../../../config/initializers/theme.rb";
+@source "../../../../../../app/views/**/*.html.{erb,slim,haml}";
+@source "../../../../../../app/helpers/**/*.rb";
+@source "../../../../../../app/assets/stylesheets/**/*.css";
+@source "../../../../../../app/javascript/**/*.js";
+@source "../../../../../../tmp/gems/*/app/views/**/*.html.erb";
+@source "../../../../../../tmp/gems/*/app/helpers/**/*.rb";
+@source "../../../../../../tmp/gems/*/app/assets/stylesheets/**/*.css";
+@source "../../../../../../tmp/gems/*/app/javascript/**/*.js";
 
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: "Inter var", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --text-xs: 0.81rem;
+  --text-xs--line-height: 1.25rem;
+
+  --text-2xs: 0.65rem;
+  --text-2xs--line-height: 0.9rem;
+  --text-2xs--letter-spacing: 1px;
+}
+
+/* Use @theme inline for colors that reference CSS variables (for dynamic theming) */
+@theme inline {
+  --color-primary-50: var(--primary-50);
+  --color-primary-100: var(--primary-100);
+  --color-primary-200: var(--primary-200);
+  --color-primary-300: var(--primary-300);
+  --color-primary-400: var(--primary-400);
+  --color-primary-500: var(--primary-500);
+  --color-primary-600: var(--primary-600);
+  --color-primary-700: var(--primary-700);
+  --color-primary-800: var(--primary-800);
+  --color-primary-900: var(--primary-900);
+
+  --color-secondary-50: var(--secondary-50);
+  --color-secondary-100: var(--secondary-100);
+  --color-secondary-200: var(--secondary-200);
+  --color-secondary-300: var(--secondary-300);
+  --color-secondary-400: var(--secondary-400);
+  --color-secondary-500: var(--secondary-500);
+  --color-secondary-600: var(--secondary-600);
+  --color-secondary-700: var(--secondary-700);
+  --color-secondary-800: var(--secondary-800);
+  --color-secondary-900: var(--secondary-900);
+
+  --color-base-50: var(--color-slate-50);
+  --color-base-100: var(--color-slate-100);
+  --color-base-200: var(--color-slate-200);
+  --color-base-300: var(--color-slate-300);
+  --color-base-400: var(--color-slate-400);
+  --color-base-500: var(--color-slate-500);
+  --color-base-600: var(--color-slate-600);
+  --color-base-700: var(--color-slate-700);
+  --color-base-800: var(--color-slate-800);
+  --color-base-900: var(--color-slate-900);
+  --color-base-950: var(--color-slate-950);
+}
+
+/* Theme's application styles - uses Tailwind's native import handling */
+@import "./light/application.css";

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

@@ -9,7 +9,7 @@
 
 <div class="<%= "bg-white rounded-md shadow dark:bg-base-700/50" unless no_background %> <%= "overflow-hidden" if overflow_hidden %> <%= border_top ? "border-t dark:border-base-500" : "" %>">
   <% if partial.title? || partial.description? %>
-    <div class="py-6 px-8 <%= title_padding %> space-y-2 <%= 'border-b shadow-sm dark:border-base-600' if divider %>">
+    <div class="py-6 px-8 <%= title_padding %> space-y-2 <%= 'border-b border-base-200 shadow-xs dark:border-base-600' if divider %>">
       <% if partial.title? %>
         <h2 class="text-xl font-semibold dark:text-white <%= title_size %>">
           <%= partial.title %>

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

@@ -29,7 +29,7 @@
           <% end %>
 
           <main class="flex-1 relative z-0 focus:outline-none" tabindex="0">
-            <div class="flex flex-row items-center shadow-sm dark:shadow electron-draggable">
+            <div class="flex flex-row items-center shadow-xs dark:shadow electron-draggable">
               <%= render "account/shared/menu/open" %>
 
               <nav class="flex overflow-auto px-1 lg:px-4 py-2 select-none" aria-label="Breadcrumb">

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

@@ -4,10 +4,22 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Welcome to <%= t('application.name') %>!</title>
 
-    <%= stylesheet_link_tag 'application.mailer.light', media: 'all' %>
-
-    <% # TODO: Find out why Tailwind colors aren't working properly. %>
+    <% # Tailwind stylesheet disabled for v4 - CSS variables and modern features not supported by email clients %>
+    <% # Using inline styles instead for email compatibility %>
     <style type="text/css">
+      /* Tailwind utility replacements for email compatibility */
+      .w-full { width: 100%; }
+      .m-0 { margin: 0; }
+      .m-auto { margin: auto; }
+      .p-0 { padding: 0; }
+      .p-6 { padding: 24px; }
+      .p-9 { padding: 36px; }
+      .mt-6 { margin-top: 24px; }
+      .pt-6 { padding-top: 24px; }
+      .text-center { text-align: center; }
+      .text-base { font-size: 16px; }
+      .text-xs { font-size: 13px; }
+      .no-underline { text-decoration: none; }
       *:not(br):not(tr):not(html) {
         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         box-sizing: border-box;

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

@@ -2,7 +2,7 @@
 <% active ||= request.path == url %>
 
 <%= send (method ? :button_to : :link_to), url, class: "block group/item hover:text-white hover:no-underline #{'bg-primary-900 dark:bg-black/10' if active} text-white #{@menu_orientation == :top ? "px-5 py-5" : "px-3 py-2 rounded-md"} #{"rounded-tl-lg" unless @not_first || BulletTrain::Themes::Light.show_logo_in_account} dark:text-white", data: {"desktop-menu-target": "menuItemLink"}, tabIndex: 0, method: method do %>
-  <div class="inline-block <%= "transition group-hover/item:translate-x-3 duration-200" if @menu_orientation == :side %> flex items-center">
+  <div class="inline-flex <%= "transition group-hover/item:translate-x-3 duration-200" if @menu_orientation == :side %> items-center">
     <!-- Heroicon name: home -->
     <% if partial.icon? %>
       <span class="mr-3 h-6 w-6 text-center text-secondary-300 text-xl leading-6 dark:text-base-400">

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

@@ -20,7 +20,7 @@
       <% end %>
 
       <div class="invisible absolute group-hover:visible transition duration-200 scale-90 group-hover:scale-100 z-40
-        <%= @menu_orientation == :top ? "group-hover:translate-x-3 top-100 left-0 -ml-10 -mt-2 pt-4" : "group-hover:translate-x-3 top-0 left-full -mt-3 -ml-5 pl-4" %>
+        <%= @menu_orientation == :top ? "group-hover:translate-x-3 top-full left-0 -ml-10 -mt-2 pt-4" : "group-hover:translate-x-3 top-0 left-full -mt-3 -ml-5 pl-4" %>
       "
         data-desktop-menu-target="menuItemGroup"
       >

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

@@ -1,7 +1,7 @@
 module BulletTrain
   module Themes
     module Light
-      VERSION = "1.38.0"
+      VERSION = "1.39.0"
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bullet_train-themes-light
 version: !ruby/object:Gem::Version
-  version: 1.38.0
+  version: 1.39.0
 platform: ruby
 authors:
 - Andrew Culver