diff --git a/app/views/docs/getting_started/customizing_components.rb b/app/views/docs/getting_started/customizing_components.rb index 8d53b696..4c363f5e 100644 --- a/app/views/docs/getting_started/customizing_components.rb +++ b/app/views/docs/getting_started/customizing_components.rb @@ -88,6 +88,50 @@ def view_template end end end + + div(class: "space-y-4") do + Heading(level: 2) { "Learning from shadcn/ui" } + Text do + plain "RubyUI components are inspired by " + InlineLink(href: "https://ui.shadcn.com") { "shadcn/ui" } + plain ", which has an extensive collection of beautifully designed components. When customizing RubyUI components, we recommend checking the " + InlineLink(href: "https://ui.shadcn.com/docs/components") { "shadcn/ui component documentation" } + plain " for reference on Tailwind CSS class implementations." + end + Text do + plain "shadcn/ui provides excellent examples of:" + end + Components.TypographyList do + Components.TypographyListItem { "Tailwind CSS class patterns for common UI elements" } + Components.TypographyListItem { "Accessibility best practices" } + Components.TypographyListItem { "Responsive design patterns" } + Components.TypographyListItem { "Dark mode implementations" } + end + end + + div(class: "space-y-4") do + Heading(level: 2) { "Contributing new components" } + Text do + plain "If you've implemented a component locally that exists in " + InlineLink(href: "https://ui.shadcn.com/docs/components") { "shadcn/ui" } + plain " but isn't yet available in RubyUI, we'd love for you to contribute it back to the community!" + end + Text do + plain "To contribute a new component:" + end + Components.TypographyList(numbered: true) do + Components.TypographyListItem do + plain "Check the " + InlineLink(href: "https://github.com/PhlexUI/phlex_ui") { "RubyUI GitHub repository" } + plain " to see if the component is already planned" + end + Components.TypographyListItem { "Open an issue or discussion to propose the new component" } + Components.TypographyListItem { "Submit a pull request with your implementation" } + end + Text do + plain "By contributing, you help expand the RubyUI ecosystem and make it easier for other Ruby developers to build beautiful interfaces." + end + end end end diff --git a/app/views/docs/getting_started/introduction.rb b/app/views/docs/getting_started/introduction.rb index 7d077732..1d4b1a2c 100644 --- a/app/views/docs/getting_started/introduction.rb +++ b/app/views/docs/getting_started/introduction.rb @@ -37,6 +37,32 @@ def view_template end end + div(class: "space-y-4") do + Heading(level: 2) { "Design inspiration" } + Text do + plain "RubyUI's component designs are heavily inspired by " + InlineLink(href: "https://ui.shadcn.com") { "shadcn/ui" } + plain ", a beautifully designed collection of React components built on Tailwind CSS. shadcn/ui describes itself as \"The Foundation for your Design System\" - a set of components you can customize, extend, and make your own." + end + Text do + plain "We borrow design patterns, component APIs, and Tailwind CSS classes from shadcn/ui, bringing the same beautiful aesthetic to Ruby developers. This means:" + end + Components.TypographyList do + Components.TypographyListItem do + span(class: "font-medium") { "Same visual design " } + plain "- Components look and feel like their shadcn/ui counterparts" + end + Components.TypographyListItem do + span(class: "font-medium") { "Compatible theming " } + plain "- Use the same CSS variables and copy themes directly from shadcn/ui" + end + Components.TypographyListItem do + span(class: "font-medium") { "Familiar patterns " } + plain "- If you've used shadcn/ui, you'll feel right at home" + end + end + end + div(class: "space-y-4") do Heading(level: 2) { "Why I built RubyUI" } Text do @@ -101,6 +127,10 @@ def view_template InlineLink(href: "https://phlex.fun") { "Phlex" } plain " - The foundation of RubyUI." end + Components.TypographyListItem do + InlineLink(href: "https://ui.shadcn.com") { "shadcn/ui" } + plain " - The design inspiration for RubyUI's components and theming system." + end Components.TypographyListItem do InlineLink(href: "https://stimulus.hotwired.dev") { "Stimulus JS" } plain " - A quicker way to write JavaScript." diff --git a/app/views/docs/getting_started/theming.rb b/app/views/docs/getting_started/theming.rb index 84c614f3..12a2affb 100644 --- a/app/views/docs/getting_started/theming.rb +++ b/app/views/docs/getting_started/theming.rb @@ -8,9 +8,11 @@ def view_template div(class: "space-y-4") do Components.Heading(level: 2) { "Introduction" } Text do - plain "Phlex UI uses CSS Variables like " - InlineCode { "--primary: 0 0% 9%" } - plain " for theming. This allows you to easily customize the look and feel of your application." + plain "RubyUI uses CSS Variables like " + InlineCode { "--primary: oklch(0.205 0 0)" } + plain " for theming. This approach is inspired by " + InlineLink(href: "https://ui.shadcn.com") { "shadcn/ui" } + plain " and allows you to easily customize the look and feel of your application." end # List the 2 benefits. That we can use CSS variables to change the style, without changing the tailwindcss classes used # And that we can change the style of a particular tailwindcss class for both light and dark mode, without having to duplicate the tailwindcss class @@ -60,19 +62,19 @@ def view_template end Text { "Given the following CSS variables:" } code = <<~CODE - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); CODE Codeblock(code, syntax: :css) Text do plain "The " InlineCode { "background" } plain " color of the following component will be " - InlineCode { "hsl(var(--primary))" } + InlineCode { "var(--primary)" } plain " and the " InlineCode { "foreground" } plain " color will be " - InlineCode { "hsl(var(--primary-foreground))" } + InlineCode { "var(--primary-foreground)" } plain "." end code = <<~CODE @@ -81,8 +83,8 @@ def view_template Codeblock(code, syntax: :html) Alert(class: "bg-transparent") do AlertDescription do - span(class: "font-medium") { "CSS variables must be defined without color space function" } - plain ". See the " + span(class: "font-medium") { "RubyUI uses oklch color format" } + plain ", the same format used by shadcn/ui. See the " InlineLink(href: "https://tailwindcss.com/docs/customizing-colors#using-css-variables") { "Tailwind CSS documentation" } plain " for more information." end @@ -110,26 +112,42 @@ def view_template end div(class: "space-y-4") do - Heading(level: 2) { "Other color formats" } + Heading(level: 2) { "Color format (oklch)" } Text do - plain "It's recommended to use " - InlineLink(href: "https://www.smashingmagazine.com/2021/07/hsl-colors-css/") { "HSL colors" } - plain " for your application. However, you can also use other color formats such as " - InlineCode { "rgb" } - plain " or " - InlineCode { "rgba" } - plain "." + plain "RubyUI uses " + InlineLink(href: "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch") { "oklch colors" } + plain " as the default color format. This is the same format used by " + InlineLink(href: "https://ui.shadcn.com") { "shadcn/ui" } + plain " and provides better perceptual uniformity and wider color gamut support." end Text do - plain "See " - InlineLink(href: "https://tailwindcss.com/docs/customizing-colors#using-css-variables") { "Tailwind CSS documentation" } - plain " for more information on how to use " - InlineCode { "rgb" } + plain "While " + InlineCode { "oklch" } + plain " is recommended, you can also use other color formats such as " + InlineCode { "hsl" } plain ", " + InlineCode { "rgb" } + plain ", or " InlineCode { "rgba" } - plain " or " - InlineCode { "hsl" } - plain " colors." + plain ". See the " + InlineLink(href: "https://tailwindcss.com/docs/customizing-colors#using-css-variables") { "Tailwind CSS documentation" } + plain " for more information." + end + end + + div(class: "space-y-4") do + Heading(level: 2) { "shadcn/ui themes" } + Text do + plain "RubyUI themes use the same CSS variable convention as " + InlineLink(href: "https://ui.shadcn.com") { "shadcn/ui" } + plain ". This means you can copy themes directly from " + InlineLink(href: "https://ui.shadcn.com/themes") { "shadcn/ui themes" } + plain " and use them in your RubyUI application." + end + Text do + plain "Visit the " + InlineLink(href: "/themes/default") { "RubyUI themes page" } + plain " to preview and copy themes, just like you would on shadcn/ui." end end end @@ -139,8 +157,8 @@ def css_variables space_y_2 do Text(size: "2", weight: "medium") { "Default background color of ...etc" } code = <<~CODE - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); CODE Codeblock(code, syntax: :css) end @@ -148,8 +166,8 @@ def css_variables space_y_2 do Text(size: "2", weight: "medium") { "Muted backgrounds such as TabsList" } code = <<~CODE - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); CODE Codeblock(code, syntax: :css) end @@ -157,7 +175,7 @@ def css_variables space_y_2 do Text(size: "2", weight: "medium") { "Default border color" } code = <<~CODE - --border: 214.3 31.8% 91.4%; + --border: oklch(0.922 0 0); CODE Codeblock(code, syntax: :css) end @@ -165,7 +183,7 @@ def css_variables space_y_2 do Text(size: "2", weight: "medium") { "Border color for inputs such as Input, Select or Textarea" } code = <<~CODE - --input: 214.3 31.8% 91.4%; + --input: oklch(0.922 0 0); CODE Codeblock(code, syntax: :css) end @@ -173,8 +191,8 @@ def css_variables space_y_2 do Text(size: "2", weight: "medium") { "Primary colors for Button" } code = <<~CODE - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); CODE Codeblock(code, syntax: :css) end @@ -182,8 +200,8 @@ def css_variables space_y_2 do Text(size: "2", weight: "medium") { "Secondary colors for Button" } code = <<~CODE - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); CODE Codeblock(code, syntax: :css) end @@ -191,8 +209,8 @@ def css_variables space_y_2 do Text(size: "2", weight: "medium") { "Used for accents such as hover effects on DropdownMenu::Item, Select::Item... etc" } code = <<~CODE - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); CODE Codeblock(code, syntax: :css) end @@ -200,8 +218,8 @@ def css_variables space_y_2 do Text(size: "2", weight: "medium") { "Used for destructive actions such as Button.new(variant: :destructive)" } code = <<~CODE - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.577 0.245 27.325); CODE Codeblock(code, syntax: :css) end @@ -209,7 +227,7 @@ def css_variables space_y_2 do Text(size: "2", weight: "medium") { "Used for focus ring" } code = <<~CODE - --ring: 215 20.2% 65.1%; + --ring: oklch(0.708 0 0); CODE Codeblock(code, syntax: :css) end @@ -217,7 +235,7 @@ def css_variables space_y_2 do Text(size: "2", weight: "medium") { "Border radius for card, input and buttons" } code = <<~CODE - --radius: 0.5rem; + --radius: 0.625rem; CODE Codeblock(code, syntax: :css) end @@ -231,33 +249,27 @@ def adding_a_color end code = <<~CODE :root { - --contrast: 38 92% 50%; - --contrast-foreground: 48 96% 89%; + --contrast: oklch(0.75 0.18 85); + --contrast-foreground: oklch(0.25 0.05 85); } .dark { - --contrast: 48 96% 89%; - --contrast-foreground: 38 92% 50%; + --contrast: oklch(0.85 0.15 85); + --contrast-foreground: oklch(0.2 0.05 85); } CODE Codeblock(code, syntax: :css) end space_y_2 do - Text(size: "2", weight: "medium") { "tailwind.config.js" } + Text(size: "2", weight: "medium") { "application.tailwind.css (inside @theme inline)" } code = <<~CODE - module.exports = { - theme: { - extend: { - colors: { - contrast: "hsl(var(--contrast))", - "contrast-foreground": "hsl(var(--contrast-foreground))", - }, - }, - }, + @theme inline { + --color-contrast: var(--contrast); + --color-contrast-foreground: var(--contrast-foreground); } CODE - Codeblock(code, syntax: :javascript) + Codeblock(code, syntax: :css) end Text do diff --git a/app/views/themes/show.rb b/app/views/themes/show.rb index 4a88b491..e653ebf3 100644 --- a/app/views/themes/show.rb +++ b/app/views/themes/show.rb @@ -10,7 +10,7 @@ def view_template div(class: "md:flex items-center justify-between") do div do Heading(level: 1) { "Themes" } - Text(as: "p", size: "5", weight: "medium") { "Customize your app fast with hand-picked themes." } + Text(as: "p", size: "5", weight: "medium") { "Customize your app fast with hand-picked themes. Compatible with shadcn/ui." } end div(class: "flex gap-x-2 mt-4") do render Themes::CustomizePopover.new(theme: @theme)