From ac07dfe00b0cfe6de4614472ec6450f291f4daa7 Mon Sep 17 00:00:00 2001 From: Jakob Skjerning Date: Fri, 27 Feb 2026 11:31:27 +0100 Subject: [PATCH] Make all buttons red Updated all button component styles to use danger (red) color scheme. All button variants (default, dark, ghost, secondary, success, tertiary, warning) now render with red backgrounds and appropriate hover/focus states. Co-Authored-By: Claude Haiku 4.5 --- app/components/flowbite/button.rb | 14 +++++----- app/components/flowbite/button/outline.rb | 12 ++++----- app/components/flowbite/button/pill.rb | 14 +++++----- test/components/flowbite/button_test.rb | 32 +++++++++++------------ 4 files changed, 36 insertions(+), 36 deletions(-) diff --git a/app/components/flowbite/button.rb b/app/components/flowbite/button.rb index 68c8ff1..0ab2be4 100644 --- a/app/components/flowbite/button.rb +++ b/app/components/flowbite/button.rb @@ -38,25 +38,25 @@ def styles default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"] }, dark: { - default: ["focus:outline-none", "text-white", "bg-dark", "box-border", "border", "border-transparent", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"] }, default: { - default: ["focus:outline-none", "text-white", "bg-brand", "box-border", "border", "border-transparent", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"] }, ghost: { - default: ["focus:outline-none", "text-heading", "bg-transparent", "box-border", "border", "border-transparent", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "font-medium", "leading-5", "rounded-base"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "font-medium", "leading-5", "rounded-base"] }, secondary: { - default: ["focus:outline-none", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"] }, success: { - default: ["focus:outline-none", "text-white", "bg-success", "box-border", "border", "border-transparent", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"] }, tertiary: { - default: ["focus:outline-none", "text-body", "bg-neutral-primary-soft", "box-border", "border", "border-default", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary-soft", "shadow-xs", "font-medium", "leading-5", "rounded-base"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"] }, warning: { - default: ["focus:outline-none", "text-white", "bg-warning", "box-border", "border", "border-transparent", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"] } }.freeze ) diff --git a/app/components/flowbite/button/outline.rb b/app/components/flowbite/button/outline.rb index 8deea3c..0612011 100644 --- a/app/components/flowbite/button/outline.rb +++ b/app/components/flowbite/button/outline.rb @@ -11,22 +11,22 @@ def styles default: ["focus:outline-none", "text-danger", "bg-transparent", "box-border", "border", "border-danger", "hover:text-white", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] }, dark: { - default: ["focus:outline-none", "text-dark", "bg-transparent", "box-border", "border", "border-dark", "hover:text-white", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] + default: ["focus:outline-none", "text-danger", "bg-transparent", "box-border", "border", "border-danger", "hover:text-white", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] }, default: { - default: ["focus:outline-none", "text-brand", "bg-transparent", "box-border", "border", "border-brand", "hover:text-white", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] + default: ["focus:outline-none", "text-danger", "bg-transparent", "box-border", "border", "border-danger", "hover:text-white", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] }, secondary: { - default: ["focus:outline-none", "text-body", "bg-transparent", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] + default: ["focus:outline-none", "text-danger", "bg-transparent", "box-border", "border", "border-danger", "hover:text-white", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] }, success: { - default: ["focus:outline-none", "text-success", "bg-transparent", "box-border", "border", "border-success", "hover:text-white", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] + default: ["focus:outline-none", "text-danger", "bg-transparent", "box-border", "border", "border-danger", "hover:text-white", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] }, tertiary: { - default: ["focus:outline-none", "text-body", "bg-transparent", "box-border", "border", "border-default", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary-soft", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] + default: ["focus:outline-none", "text-danger", "bg-transparent", "box-border", "border", "border-danger", "hover:text-white", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] }, warning: { - default: ["focus:outline-none", "text-warning", "bg-transparent", "box-border", "border", "border-warning", "hover:text-white", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] + default: ["focus:outline-none", "text-danger", "bg-transparent", "box-border", "border", "border-danger", "hover:text-white", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"] } }.freeze) end diff --git a/app/components/flowbite/button/pill.rb b/app/components/flowbite/button/pill.rb index c7ea50c..2434d9d 100644 --- a/app/components/flowbite/button/pill.rb +++ b/app/components/flowbite/button/pill.rb @@ -11,25 +11,25 @@ def styles default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] }, dark: { - default: ["focus:outline-none", "text-white", "bg-dark", "box-border", "border", "border-transparent", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] }, default: { - default: ["focus:outline-none", "text-white", "bg-brand", "box-border", "border", "border-transparent", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] }, ghost: { - default: ["focus:outline-none", "text-heading", "bg-transparent", "box-border", "border", "border-transparent", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "font-medium", "leading-5", "rounded-full", "text-center"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "font-medium", "leading-5", "rounded-full", "text-center"] }, secondary: { - default: ["focus:outline-none", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] }, success: { - default: ["focus:outline-none", "text-white", "bg-success", "box-border", "border", "border-transparent", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] }, tertiary: { - default: ["focus:outline-none", "text-body", "bg-neutral-primary-soft", "box-border", "border", "border-default", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary-soft", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] }, warning: { - default: ["focus:outline-none", "text-white", "bg-warning", "box-border", "border", "border-transparent", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] + default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"] } }.freeze) end diff --git a/test/components/flowbite/button_test.rb b/test/components/flowbite/button_test.rb index ac109a7..2da0524 100644 --- a/test/components/flowbite/button_test.rb +++ b/test/components/flowbite/button_test.rb @@ -32,17 +32,17 @@ def test_renders_a_xl_button def test_renders_pill_button_in_secondary_style render_inline(Flowbite::Button::Pill.new(style: :secondary)) { "Click me" } - assert_selector("button.text-body.bg-neutral-secondary-medium") + assert_selector("button.text-white.bg-danger") end def test_renders_pill_button_in_tertiary_style render_inline(Flowbite::Button::Pill.new(style: :tertiary)) { "Click me" } - assert_selector("button.text-body.bg-neutral-primary-soft") + assert_selector("button.text-white.bg-danger") end def test_renders_pill_button_in_success_style render_inline(Flowbite::Button::Pill.new(style: :success)) { "Click me" } - assert_selector("button.text-white.bg-success") + assert_selector("button.text-white.bg-danger") end def test_renders_pill_button_in_danger_style @@ -52,47 +52,47 @@ def test_renders_pill_button_in_danger_style def test_renders_pill_button_in_warning_style render_inline(Flowbite::Button::Pill.new(style: :warning)) { "Click me" } - assert_selector("button.text-white.bg-warning") + assert_selector("button.text-white.bg-danger") end def test_renders_pill_button_in_dark_style render_inline(Flowbite::Button::Pill.new(style: :dark)) { "Click me" } - assert_selector("button.text-white.bg-dark") + assert_selector("button.text-white.bg-danger") end def test_renders_pill_button_in_ghost_style render_inline(Flowbite::Button::Pill.new(style: :ghost)) { "Click me" } - assert_selector("button.text-heading.bg-transparent") + assert_selector("button.text-white.bg-danger") end def test_renders_pill_button_in_default_style render_inline(Flowbite::Button::Pill.new) { "Click me" } - assert_selector("button.text-white.bg-brand") + assert_selector("button.text-white.bg-danger") end def test_renders_pill_button_in_different_sizes render_inline(Flowbite::Button::Pill.new(size: :xs)) { "Click me" } - assert_selector("button.text-white.bg-brand.text-xs") + assert_selector("button.text-white.bg-danger.text-xs") end def test_renders_outline_button_in_default_style render_inline(Flowbite::Button::Outline.new) { "Click me" } - assert_selector("button.text-brand.border-brand") + assert_selector("button.text-danger.border-danger") end def test_renders_outline_button_in_secondary_style render_inline(Flowbite::Button::Outline.new(style: :secondary)) { "Click me" } - assert_selector("button.text-body.border-default-medium") + assert_selector("button.text-danger.border-danger") end def test_renders_outline_button_in_tertiary_style render_inline(Flowbite::Button::Outline.new(style: :tertiary)) { "Click me" } - assert_selector("button.text-body.border-default") + assert_selector("button.text-danger.border-danger") end def test_renders_outline_button_in_success_style render_inline(Flowbite::Button::Outline.new(style: :success)) { "Click me" } - assert_selector("button.text-success.border-success") + assert_selector("button.text-danger.border-danger") end def test_renders_outline_button_in_danger_style @@ -102,17 +102,17 @@ def test_renders_outline_button_in_danger_style def test_renders_outline_button_in_warning_style render_inline(Flowbite::Button::Outline.new(style: :warning)) { "Click me" } - assert_selector("button.text-warning.border-warning") + assert_selector("button.text-danger.border-danger") end def test_renders_outline_button_in_dark_style render_inline(Flowbite::Button::Outline.new(style: :dark)) { "Click me" } - assert_selector("button.text-dark.border-dark") + assert_selector("button.text-danger.border-danger") end def test_renders_outline_button_in_different_sizes render_inline(Flowbite::Button::Outline.new(size: :xs, style: :success)) { "Click me" } - assert_selector("button.text-success.border-success.text-xs") + assert_selector("button.text-danger.border-danger.text-xs") end def test_passes_attributes_to_button_tag @@ -138,6 +138,6 @@ def test_renders_a_submit_button def test_adds_classes_to_the_default_ones render_inline(Flowbite::Button.new(class: "custom-class")) { "Click me" } - assert_selector("button.bg-brand.text-white.custom-class") + assert_selector("button.bg-danger.text-white.custom-class") end end