New Default theme: New York (#363)

djalmaaraujo · web-flow · commit a6c138869d14 · 2025-11-28T11:13:37.000-03:00
* Upgrade colors to use new york default theme

* Fix home components accessibility heading structure

* Modify the copy code from the theme gererator to support tailwindCSS 4
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -54,23 +54,23 @@
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
+  --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
+  --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
+  --primary: oklch(0.922 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: oklch(0.704 0.191 22.216);
   --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);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 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);
@@ -82,8 +82,8 @@
   --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);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 
   /* ruby_ui specific */
   --warning: hsl(38 92% 50%);
diff --git a/app/components/home_view/banner.rb b/app/components/home_view/banner.rb
@@ -9,10 +9,10 @@ def view_template(&block)
         div(class: "relative overflow-hidden") do
           render Shared::GridPattern.new(spacing: :md)
           render HomeView::Shapes.new(size: :xl, color: :pink, class: "hidden sm:block absolute right-0 top-1/2 transform -translate-y-1/2 sm:translate-x-2/3 md:translate-x-1/2")
-          div(class: "relative container mx-auto max-w-3xl py-24 lg:py-32 px-4 sm:text-center flex flex-col sm:items-center gap-y-6") do
+          div(class: "relative container mx-auto max-w-3xl py-24 px-4 sm:text-center flex flex-col sm:items-center gap-y-6") do
             Heading(level: 1) do
               plain "A UI component library, crafted precisely for Ruby devs"
-              span(class: "text-foreground opacity-30") { " who want to stay organised and build modern apps, fast." }
+              span(class: "text-primary/70") { " who want to stay organised and build modern apps, fast." }
             end
             if @cta
               div(class: "grid grid-cols-1 sm:grid-cols-2 gap-4", &@cta)
diff --git a/app/components/home_view/card.rb b/app/components/home_view/card.rb
@@ -31,7 +31,7 @@ def view_template(&block)
           end
           if @title || @subtitle
             div(class: "space-y-2") do
-              h3(class: "font-semibold leading-none tracking-tight") { @title } if @title
+              h2(class: "font-semibold leading-none tracking-tight") { @title } if @title
               p { @subtitle } if @subtitle
             end
           end
diff --git a/app/components/shared/logo.rb b/app/components/shared/logo.rb
@@ -5,7 +5,7 @@ module Shared
     class Logo < Components::Base
       def view_template
         a(href: root_url, class: "mr-6 flex items-center space-x-2") do
-          Heading(level: 4, class: "flex items-center") {
+          Heading(level: 2, class: "flex items-center pb-0 border-0") {
             img(src: image_url("logo.svg"), class: "h-4 block dark:hidden")
             img(src: image_url("logo_dark.svg"), class: "h-4 hidden dark:block")
             span(class: "sr-only") { "RubyUI" }
diff --git a/app/components/themes/copy_code.rb b/app/components/themes/copy_code.rb
@@ -15,13 +15,13 @@ def view_template
           SheetTrigger do
             Button(variant: :primary) { "Copy Code" }
           end
-          SheetContent(class: "sm:max-w-md w-screen flex flex-col h-screen overflow-y-scroll") do
+          SheetContent(class: "sm:max-w-lg lg:max-w-xl flex flex-col h-screen overflow-y-scroll") do
             SheetHeader do
               SheetTitle { "Theme" }
-              SheetDescription { "Copy and paste the following code into your CSS file." }
+              SheetDescription { "Copy and paste the following code into your CSS file. These styles are compatible with TailwindCSS 4." }
             end
             SheetMiddle(class: "flex-1 relative") do
-              Codeblock(Theme::CSS.retrieve(@theme, with_directive: true), syntax: :css, class: "h-full max-h-none")
+              Codeblock(Theme::CSS.retrieve(@theme, with_directive: true, exclude_ruby_ui_vars: true), syntax: :css, class: "h-full max-h-none")
             end
           end
         end
diff --git a/app/views/pages/home.rb b/app/views/pages/home.rb
@@ -29,7 +29,7 @@ def view_template
         iframe(width: "100%", height: "720", src: "https://www.youtube.com/embed/OQZam7rug00?si=JmZNzS5u194Q0AWQ", title: "YouTube video player", frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", referrerpolicy: "strict-origin-when-cross-origin", allowfullscreen: true)
       end
 
-      div(class: "relative z-10 container mx-auto max-w-5xl pt-16 lg:pt-16 py-24 lg:py-32 px-4") do
+      div(class: "relative z-10 container mx-auto max-w-5xl pt-16 lg:pt-16 py-24 px-4") do
         div(class: "grid grid-cols-6 gap-4") do
           render HomeView::Card.new(class: "col-span-6 sm:col-span-3 md:col-span-4", title: "Built for Speed", subtitle: "Dive into a world where your Rails UI development happens at light speed. Phlex is not just fast - it's blazing fast.", color: :secondary) do |card|
             card.icon do
diff --git a/lib/theme/c_s_s.rb b/lib/theme/c_s_s.rb
@@ -1,7 +1,11 @@
 module Theme
   class CSS
-    def self.retrieve(theme, with_directive: true, format: :css)
+    # Ruby UI specific variables that are not part of the standard shadcn theme
+    RUBY_UI_SPECIFIC_VARS = %w[warning warning-foreground success success-foreground].freeze
+
+    def self.retrieve(theme, with_directive: true, format: :css, exclude_ruby_ui_vars: false)
       theme_hash = send(theme)
+      theme_hash = filter_ruby_ui_vars(theme_hash) if exclude_ruby_ui_vars
 
       case format
       when :css
@@ -14,6 +18,12 @@ def self.retrieve(theme, with_directive: true, format: :css)
       end
     end
 
+    def self.filter_ruby_ui_vars(theme_hash)
+      theme_hash.transform_values do |properties|
+        properties.reject { |key, _| RUBY_UI_SPECIFIC_VARS.include?(key.to_s) }
+      end
+    end
+
     def self.all_themes
       {
         default: default,
@@ -86,23 +96,23 @@ def self.neutral
         dark: {
           background: "oklch(0.145 0 0)",
           foreground: "oklch(0.985 0 0)",
-          card: "oklch(0.145 0 0)",
+          card: "oklch(0.205 0 0)",
           "card-foreground": "oklch(0.985 0 0)",
-          popover: "oklch(0.145 0 0)",
+          popover: "oklch(0.205 0 0)",
           "popover-foreground": "oklch(0.985 0 0)",
-          primary: "oklch(0.985 0 0)",
+          primary: "oklch(0.922 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: "oklch(0.704 0.191 22.216)",
           "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)",
+          border: "oklch(1 0 0 / 10%)",
+          input: "oklch(1 0 0 / 15%)",
+          ring: "oklch(0.556 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)",
@@ -114,8 +124,8 @@ def self.neutral
           "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)",
+          "sidebar-border": "oklch(1 0 0 / 10%)",
+          "sidebar-ring": "oklch(0.556 0 0)",
           warning: "hsl(38 92% 50%)",
           "warning-foreground": "hsl(0 0% 100%)",
           success: "hsl(84 81% 44%)",
@@ -457,23 +467,23 @@ def self.default_dark
       {
         background: "oklch(0.145 0 0)",
         foreground: "oklch(0.985 0 0)",
-        card: "oklch(0.145 0 0)",
+        card: "oklch(0.205 0 0)",
         "card-foreground": "oklch(0.985 0 0)",
-        popover: "oklch(0.145 0 0)",
+        popover: "oklch(0.205 0 0)",
         "popover-foreground": "oklch(0.985 0 0)",
-        primary: "oklch(0.985 0 0)",
+        primary: "oklch(0.922 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: "oklch(0.704 0.191 22.216)",
         "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)",
+        border: "oklch(1 0 0 / 10%)",
+        input: "oklch(1 0 0 / 15%)",
+        ring: "oklch(0.556 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)",
@@ -485,8 +495,8 @@ def self.default_dark
         "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)",
+        "sidebar-border": "oklch(1 0 0 / 10%)",
+        "sidebar-ring": "oklch(0.556 0 0)",
         warning: "hsl(38 92% 50%)",
         "warning-foreground": "hsl(0 0% 100%)",
         success: "hsl(84 81% 44%)",
@@ -510,11 +520,9 @@ def self.format_selector(selector)
     end
 
     def self.wrap_with_directive(css)
-      <<~CSS
-        @layer base {
-          #{css}
-        }
-      CSS
+      # Tailwind 4: :root and .dark selectors should NOT be wrapped in @layer base
+      # This ensures CSS variables are properly accessible to @theme inline
+      css
     end
   end
 end
