From 163e07132b0658fd43d1d6115c9fe5624b7b8b73 Mon Sep 17 00:00:00 2001
From: Seth Horsley <github.dvxhi@sl.isethi.com>
Date: Thu, 6 Mar 2025 13:39:31 +0100
Subject: [PATCH] update application css
---
.../templates/application.tailwind.css.erb | 178 ++++++++++++------
1 file changed, 121 insertions(+), 57 deletions(-)
diff --git a/lib/generators/ruby_ui/install/templates/application.tailwind.css.erb b/lib/generators/ruby_ui/install/templates/application.tailwind.css.erb
index e1bb6c1..ada1d48 100644
--- a/lib/generators/ruby_ui/install/templates/application.tailwind.css.erb
+++ b/lib/generators/ruby_ui/install/templates/application.tailwind.css.erb
@@ -1,64 +1,126 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
-@layer base {
- :root {
- --background: 0 0% 100%;
- --foreground: 240 10% 3.9%;
- --card: 0 0% 100%;
- --card-foreground: 240 10% 3.9%;
- --popover: 0 0% 100%;
- --popover-foreground: 240 10% 3.9%;
- --primary: 240 5.9% 10%;
- --primary-foreground: 0 0% 98%;
- --secondary: 240 4.8% 95.9%;
- --secondary-foreground: 240 5.9% 10%;
- --muted: 240 4.8% 95.9%;
- --muted-foreground: 240 3.8% 46.1%;
- --accent: 240 4.8% 95.9%;
- --accent-foreground: 240 5.9% 10%;
- --destructive: 0 84.2% 60.2%;
- --destructive-foreground: 0 0% 98%;
- --border: 240 5.9% 90%;
- --input: 240 5.9% 90%;
- --ring: 240 5.9% 10%;
- --radius: 0.5rem;
+@custom-variant dark (&:is(.dark *));
- /* ruby_ui especific */
- --warning: 38 92% 50%;
- --warning-foreground: 0 0% 100%;
- --success: 87 100% 37%;
- --success-foreground: 0 0% 100%;
- }
+@source "./app/views/**/*.rb"; /* Phlex views */
+@source "./app/components/**/*.rb"; /* Phlex components */
+@source "./app/views/**/*.html.erb";
+@source "./app/helpers/**/*.rb";
+@source "./app/assets/stylesheets/**/*.css";
+@source "./app/javascript/**/*.js";
- .dark {
- --background: 240 10% 3.9%;
- --foreground: 0 0% 98%;
- --card: 240 10% 3.9%;
- --card-foreground: 0 0% 98%;
- --popover: 240 10% 3.9%;
- --popover-foreground: 0 0% 98%;
- --primary: 0 0% 98%;
- --primary-foreground: 240 5.9% 10%;
- --secondary: 240 3.7% 15.9%;
- --secondary-foreground: 0 0% 98%;
- --muted: 240 3.7% 15.9%;
- --muted-foreground: 240 5% 64.9%;
- --accent: 240 3.7% 15.9%;
- --accent-foreground: 0 0% 98%;
- --destructive: 0 62.8% 30.6%;
- --destructive-foreground: 0 0% 98%;
- --border: 240 3.7% 15.9%;
- --input: 240 3.7% 15.9%;
- --ring: 240 4.9% 83.9%;
+:root {
+ /* Base colors */
+ --background: hsl(0 0% 100%);
+ --foreground: hsl(240 10% 3.9%);
+ --card: hsl(0 0% 100%);
+ --card-foreground: hsl(240 10% 3.9%);
+ --popover: hsl(0 0% 100%);
+ --popover-foreground: hsl(240 10% 3.9%);
+ --primary: hsl(240 5.9% 10%);
+ --primary-foreground: hsl(0 0% 98%);
+ --secondary: hsl(240 4.8% 95.9%);
+ --secondary-foreground: hsl(240 5.9% 10%);
+ --muted: hsl(240 4.8% 95.9%);
+ --muted-foreground: hsl(240 3.8% 46.1%);
+ --accent: hsl(240 4.8% 95.9%);
+ --accent-foreground: hsl(240 5.9% 10%);
+ --destructive: hsl(0 84.2% 60.2%);
+ --destructive-foreground: hsl(0 0% 98%);
+ --border: hsl(240 5.9% 90%);
+ --input: hsl(240 5.9% 90%);
+ --ring: hsl(240 5.9% 10%);
+ --radius: hsl(0.5rem);
- /* ruby_ui especific */
- --warning: 38 92% 50%;
- --warning-foreground: 0 0% 100%;
- --success: 84 81% 44%;
- --success-foreground: 0 0% 100%;
- }
+ /* ruby_ui specific */
+ --warning: hsl(38 92% 50%);
+ --warning-foreground: hsl(0 0% 100%);
+ --success: hsl(87 100% 37%);
+ --success-foreground: hsl(0 0% 100%);
+
+ /* Container settings */
+ --container-padding: hsl(2rem);
+ --container-max-width-2xl: hsl(1400px);
+}
+
+.dark {
+ --background: hsl(240 10% 3.9%);
+ --foreground: hsl(0 0% 98%);
+ --card: hsl(240 10% 3.9%);
+ --card-foreground: hsl(0 0% 98%);
+ --popover: hsl(240 10% 3.9%);
+ --popover-foreground: hsl(0 0% 98%);
+ --primary: hsl(0 0% 98%);
+ --primary-foreground: hsl(240 5.9% 10%);
+ --secondary: hsl(240 3.7% 15.9%);
+ --secondary-foreground: hsl(0 0% 98%);
+ --muted: hsl(240 3.7% 15.9%);
+ --muted-foreground: hsl(240 5% 64.9%);
+ --accent: hsl(240 3.7% 15.9%);
+ --accent-foreground: hsl(0 0% 98%);
+ --destructive: hsl(0 62.8% 30.6%);
+ --destructive-foreground: hsl(0 0% 98%);
+ --border: hsl(240 3.7% 15.9%);
+ --input: hsl(240 3.7% 15.9%);
+ --ring: hsl(240 4.9% 83.9%);
+
+ /* ruby_ui specific */
+ --warning: hsl(38 92% 50%);
+ --warning-foreground: hsl(0 0% 100%);
+ --success: hsl(84 81% 44%);
+ --success-foreground: hsl(0 0% 100%);
+}
+
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-radius: var(--radius);
+ --color-warning: var(--warning);
+ --color-warning-foreground: var(--warning-foreground);
+ --color-success: var(--success);
+ --color-success-foreground: var(--success-foreground);
+ --color-container-padding: var(--container-padding);
+ --color-container-max-width-2xl: var(--container-max-width-2xl);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-warning: var(--warning);
+ --color-warning-foreground: var(--warning-foreground);
+ --color-success: var(--success);
+ --color-success-foreground: var(--success-foreground);
}
@layer base {
@@ -75,3 +137,5 @@
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
}
+
+@plugin "tailwindcss-animate";