From 5322e0c38ddb1c2a25054fa674ce5558229bd310 Mon Sep 17 00:00:00 2001 From: Karine Vieira Date: Sat, 22 Mar 2025 13:46:31 -0300 Subject: [PATCH 1/4] Add config to install ruby_ui with import maps and tailwind 4 --- .../ruby_ui/install/install_generator.rb | 24 ++-- .../install/templates/application.css.erb | 133 ++++++++++++++++++ 2 files changed, 145 insertions(+), 12 deletions(-) create mode 100644 lib/generators/ruby_ui/install/templates/application.css.erb diff --git a/lib/generators/ruby_ui/install/install_generator.rb b/lib/generators/ruby_ui/install/install_generator.rb index 4d542387..d4b6f69c 100644 --- a/lib/generators/ruby_ui/install/install_generator.rb +++ b/lib/generators/ruby_ui/install/install_generator.rb @@ -52,27 +52,27 @@ def add_ruby_ui_module_to_components_base end end - def add_tailwind_css - say "Adding RubyUI styles to application css" - template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css") - end - def add_tailwind_config say "Adding RubyUI config to tailwind config" - if File.exist?(Rails.root.join("tailwind.config.js")) # tailwindcss js package - template "tailwind.config.js.js-package.erb", Rails.root.join("tailwind.config.js") - elsif File.exist?(Rails.root.join("config/tailwind.config.js")) # tailwindcss-rails gem - template "tailwind.config.js.tailwindcss-rails.erb", Rails.root.join("config/tailwind.config.js") + if File.exist?(Rails.root.join("app/assets/tailwind/application.css")) # tailwindcss-rails gem + template "application.css.erb", Rails.root.join("app/assets/tailwind/application.css") else - say "Cannot find tailwind.config.js. You will need to install tailwind config manually", :red + template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css") end end def install_tailwind_animate - say "Installing tailwindcss-animate plugin" + say "Installing tw-animate-css plugin" - install_js_package("tailwindcss-animate") + package = "tw-animate-css" + if File.exist?(Rails.root.join("yarn.lock")) + run "yarn add #{package}" + elsif File.exist?(Rails.root.join("package-lock.json")) + run "npm install #{package}" + else + say "Could not detect the package manager, you need to install '#{package}' manually", :red + end end def add_ruby_ui_base diff --git a/lib/generators/ruby_ui/install/templates/application.css.erb b/lib/generators/ruby_ui/install/templates/application.css.erb new file mode 100644 index 00000000..4acf8740 --- /dev/null +++ b/lib/generators/ruby_ui/install/templates/application.css.erb @@ -0,0 +1,133 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +: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 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 { + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + font-feature-settings: "rlig" 1, "calt" 1; + + /* docs specific */ + /* https://css-tricks.com/snippets/css/system-font-stack/ */ + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + } +} From da0070df781b0480377083df7f6923a80e82596a Mon Sep 17 00:00:00 2001 From: Karine Vieira Date: Sat, 22 Mar 2025 15:09:24 -0300 Subject: [PATCH 2/4] Use shadcn classes --- .../ruby_ui/install/install_generator.rb | 9 +- .../install/templates/application.css.erb | 152 ++++++++++-------- 2 files changed, 87 insertions(+), 74 deletions(-) diff --git a/lib/generators/ruby_ui/install/install_generator.rb b/lib/generators/ruby_ui/install/install_generator.rb index d4b6f69c..00a7c106 100644 --- a/lib/generators/ruby_ui/install/install_generator.rb +++ b/lib/generators/ruby_ui/install/install_generator.rb @@ -65,14 +65,7 @@ def add_tailwind_config def install_tailwind_animate say "Installing tw-animate-css plugin" - package = "tw-animate-css" - if File.exist?(Rails.root.join("yarn.lock")) - run "yarn add #{package}" - elsif File.exist?(Rails.root.join("package-lock.json")) - run "npm install #{package}" - else - say "Could not detect the package manager, you need to install '#{package}' manually", :red - end + install_js_package("tw-animate-css") end def add_ruby_ui_base diff --git a/lib/generators/ruby_ui/install/templates/application.css.erb b/lib/generators/ruby_ui/install/templates/application.css.erb index 4acf8740..87dbfeb0 100644 --- a/lib/generators/ruby_ui/install/templates/application.css.erb +++ b/lib/generators/ruby_ui/install/templates/application.css.erb @@ -1,30 +1,45 @@ @import "tailwindcss"; @import "tw-animate-css"; +@plugin "@tailwindcss/forms"; +@plugin "@tailwindcss/typography"; + @custom-variant dark (&:is(.dark *)); :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); + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --radius: 0.625rem; + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); /* ruby_ui specific */ --warning: hsl(38 92% 50%); @@ -33,30 +48,44 @@ --success-foreground: hsl(0 0% 100%); /* Container settings */ + --container-center: true; --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%); + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.145 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.145 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.985 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.396 0.141 25.723); + --destructive-foreground: oklch(0.637 0.237 25.331); + --border: oklch(0.269 0 0); + --input: oklch(0.269 0 0); + --ring: oklch(0.439 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(0.269 0 0); + --sidebar-ring: oklch(0.439 0 0); /* ruby_ui specific */ --warning: hsl(38 92% 50%); @@ -85,32 +114,23 @@ --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-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); From 26995d324ae805c212f88e0eaf48f76ee1ff8358 Mon Sep 17 00:00:00 2001 From: Karine Vieira Date: Sat, 22 Mar 2025 17:00:24 -0300 Subject: [PATCH 3/4] Replace tailwindcss-animate with tw-animate-css to support Tailwind 4 --- lib/generators/ruby_ui/install/install_generator.rb | 2 +- lib/generators/ruby_ui/install/templates/application.css.erb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/generators/ruby_ui/install/install_generator.rb b/lib/generators/ruby_ui/install/install_generator.rb index 00a7c106..7d51708d 100644 --- a/lib/generators/ruby_ui/install/install_generator.rb +++ b/lib/generators/ruby_ui/install/install_generator.rb @@ -62,7 +62,7 @@ def add_tailwind_config end end - def install_tailwind_animate + def install_tw_animate_css say "Installing tw-animate-css plugin" install_js_package("tw-animate-css") diff --git a/lib/generators/ruby_ui/install/templates/application.css.erb b/lib/generators/ruby_ui/install/templates/application.css.erb index 87dbfeb0..10864760 100644 --- a/lib/generators/ruby_ui/install/templates/application.css.erb +++ b/lib/generators/ruby_ui/install/templates/application.css.erb @@ -1,5 +1,5 @@ @import "tailwindcss"; -@import "tw-animate-css"; +@import "../../../vendor/javascript/tw-animate-css.js"; @plugin "@tailwindcss/forms"; @plugin "@tailwindcss/typography"; From 81370c1a7af19924ec6b62340d6f37dd7f7518a7 Mon Sep 17 00:00:00 2001 From: Karine Vieira Date: Mon, 24 Mar 2025 12:41:01 -0300 Subject: [PATCH 4/4] Install tailwind plugins --- .../ruby_ui/install/install_generator.rb | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/lib/generators/ruby_ui/install/install_generator.rb b/lib/generators/ruby_ui/install/install_generator.rb index 7d51708d..f8ffd620 100644 --- a/lib/generators/ruby_ui/install/install_generator.rb +++ b/lib/generators/ruby_ui/install/install_generator.rb @@ -55,7 +55,7 @@ def add_ruby_ui_module_to_components_base def add_tailwind_config say "Adding RubyUI config to tailwind config" - if File.exist?(Rails.root.join("app/assets/tailwind/application.css")) # tailwindcss-rails gem + if using_tailwindcss_rails_gem? template "application.css.erb", Rails.root.join("app/assets/tailwind/application.css") else template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css") @@ -68,6 +68,18 @@ def install_tw_animate_css install_js_package("tw-animate-css") end + def install_tailwindcss_forms + say "Installing @tailwindcss/forms plugin" + + install_js_package("@tailwindcss/forms") + end + + def install_tailwindcss_typography + say "Installing @tailwindcss/typography plugin" + + install_js_package("@tailwindcss/typography") + end + def add_ruby_ui_base say "Adding RubyUI::Base component" template "../../../../ruby_ui/base.rb", Rails.root.join("app/components/ruby_ui/base.rb") @@ -78,6 +90,10 @@ def add_ruby_ui_base def gem_installed?(name) Gem::Specification.find_all_by_name(name).any? end + + def using_tailwindcss_rails_gem? + File.exist?(Rails.root.join("app/assets/tailwind/application.css")) + end end end end